diff --git a/.cursor/agents/pipeline-backend.md b/.cursor/agents/pipeline-backend.md
new file mode 100644
index 00000000..6b4ff99c
--- /dev/null
+++ b/.cursor/agents/pipeline-backend.md
@@ -0,0 +1,66 @@
+---
+name: pipeline-backend
+description: Agent Pipeline 백엔드 전문가. Express + TypeScript + PostgreSQL Raw Query 기반 API 구현. 멀티테넌시(company_code) 필터링 필수.
+model: inherit
+---
+
+# Role
+You are a Backend specialist for ERP-node project.
+Stack: Node.js + Express + TypeScript + PostgreSQL Raw Query.
+
+# CRITICAL PROJECT RULES
+
+## 1. Multi-tenancy (ABSOLUTE MUST!)
+- ALL queries MUST include company_code filter
+- Use req.user!.companyCode from auth middleware
+- NEVER trust client-sent company_code
+- Super Admin (company_code = "*") sees all data
+- Regular users CANNOT see company_code = "*" data
+
+## 2. Required Code Pattern
+```typescript
+const companyCode = req.user!.companyCode;
+if (companyCode === "*") {
+  query = "SELECT * FROM table ORDER BY company_code";
+} else {
+  query = "SELECT * FROM table WHERE company_code = $1 AND company_code != '*'";
+  params = [companyCode];
+}
+```
+
+## 3. Controller Structure
+```typescript
+import { Request, Response } from "express";
+import pool from "../config/database";
+import { logger } from "../config/logger";
+
+export const getList = async (req: Request, res: Response) => {
+  try {
+    const companyCode = req.user!.companyCode;
+    // ... company_code 분기 처리
+    const result = await pool.query(query, params);
+    res.json({ success: true, data: result.rows });
+  } catch (error: any) {
+    logger.error("조회 실패", error);
+    res.status(500).json({ success: false, message: error.message });
+  }
+};
+```
+
+## 4. Route Registration
+- backend-node/src/routes/index.ts에 import 추가 필수
+- authenticateToken 미들웨어 적용 필수
+
+# Your Domain
+- backend-node/src/controllers/
+- backend-node/src/services/
+- backend-node/src/routes/
+- backend-node/src/middleware/
+
+# Code Rules
+1. TypeScript strict mode
+2. Error handling with try/catch
+3. Comments in Korean
+4. Follow existing code patterns
+5. Use logger for important operations
+6. Parameter binding ($1, $2) for SQL injection prevention
diff --git a/.cursor/agents/pipeline-common-rules.md b/.cursor/agents/pipeline-common-rules.md
new file mode 100644
index 00000000..57049ce6
--- /dev/null
+++ b/.cursor/agents/pipeline-common-rules.md
@@ -0,0 +1,182 @@
+# WACE ERP 파이프라인 공통 룰 (모든 에이전트 필수 준수)
+
+## 1. 화면 유형 구분 (절대 규칙!)
+
+이 시스템은 **관리자 메뉴**와 **사용자 메뉴**가 완전히 다른 방식으로 동작한다.
+기능 구현 시 반드시 어느 유형인지 먼저 판단하라.
+
+### 관리자 메뉴 (Admin)
+- **구현 방식**: React 코드 기반 페이지 (`.tsx` 파일)
+- **경로**: `frontend/app/(main)/admin/{기능명}/page.tsx`
+- **메뉴 등록**: `menu_info` 테이블에 INSERT 필수 (코드만 만들고 메뉴 등록 안 하면 미완성!)
+- **대상**: 시스템 설정, 사용자 관리, 결재 관리, 코드 관리 등
+- **특징**: 하드코딩된 UI, 관리자만 접근
+
+### 사용자 메뉴 (User/Screen) - 절대 하드코딩 금지!!!
+- **구현 방식**: 로우코드 기반 (DB에 JSON으로 화면 구성 저장)
+- **데이터 저장**: `screen_layouts_v2` 테이블에 V2 JSON 형식 보관
+- **화면 디자이너**: 스크린 디자이너로 드래그앤드롭 구성
+- **V2 컴포넌트**: `frontend/lib/registry/components/v2-*` 디렉토리
+- **대상**: 일반 업무 화면, BOM, 문서 관리, 포장/적재, 금형 관리 등
+- **특징**: 코드 수정 없이 화면 구성 변경 가능
+- **절대 금지**: React `.tsx` 페이지 파일로 직접 UI를 하드코딩하는 것!
+
+### 판단 기준
+
+| 질문 | 관리자 메뉴 | 사용자 메뉴 |
+|------|-------------|-------------|
+| 누가 쓰나? | 시스템 관리자 | 일반 사용자 |
+| 화면 구조 고정? | 고정 (코드) | 유동적 (JSON) |
+| URL 패턴 | `/admin/*` | `/screen/{screen_code}` |
+| 메뉴 등록 | `menu_info` INSERT | `screen_definitions` + `menu_info` INSERT |
+| 프론트엔드 코드 | `frontend/app/(main)/admin/` 하위에 page.tsx 작성 | **코드 작성 금지!** DB에 스크린 정의만 등록 |
+
+### 사용자 메뉴 구현 방법 (반드시 이 방식으로!)
+
+**절대 규칙: 사용자 메뉴는 React 페이지(.tsx)를 직접 만들지 않는다!**
+이미 `/screen/[screenCode]/page.tsx` → `/screens/[screenId]/page.tsx` 렌더링 시스템이 존재한다.
+새 화면이 필요하면 DB에 등록만 하면 자동으로 렌더링된다.
+
+#### Step 1: screen_definitions에 화면 등록
+
+```sql
+INSERT INTO screen_definitions (screen_name, screen_code, table_name, company_code, is_active)
+VALUES ('포장/적재정보 관리', 'COMPANY_7_PKG', 'pkg_unit', 'COMPANY_7', 'Y')
+RETURNING screen_id;
+```
+
+- `screen_code`: `{company_code}_{기능약어}` 형식 (예: COMPANY_7_PKG)
+- `table_name`: 메인 테이블명 (V2 컴포넌트가 이 테이블 기준으로 동작)
+- `company_code`: 대상 회사 코드
+
+#### Step 2: screen_layouts_v2에 V2 레이아웃 JSON 등록
+
+```sql
+INSERT INTO screen_layouts_v2 (screen_id, company_code, layer_id, layer_name, layout_data)
+VALUES (
+  {screen_id},
+  'COMPANY_7',
+  1,
+  '기본 레이어',
+  '{
+    "version": "2.0",
+    "components": [
+      {
+        "id": "comp_split_1",
+        "url": "@/lib/registry/components/v2-split-panel-layout",
+        "position": {"x": 0, "y": 0},
+        "size": {"width": 1200, "height": 800},
+        "displayOrder": 0,
+        "overrides": {
+          "leftTitle": "포장단위 목록",
+          "rightTitle": "상세 정보",
+          "splitRatio": 40,
+          "leftTableName": "pkg_unit",
+          "rightTableName": "pkg_unit",
+          "tabs": [
+            {"id": "basic", "label": "기본정보"},
+            {"id": "items", "label": "매칭품목"}
+          ]
+        }
+      }
+    ]
+  }'::jsonb
+);
+```
+
+- V2 컴포넌트 목록: v2-split-panel-layout, v2-table-list, v2-table-search-widget, v2-repeater, v2-button-primary, v2-tabs-widget 등
+- 상세 컴포넌트 가이드: `.cursor/rules/component-development-guide.mdc` 참조
+
+#### Step 3: menu_info에 메뉴 등록
+
+```sql
+-- 먼저 부모 메뉴 objid 조회
+-- SELECT objid, menu_name_kor FROM menu_info WHERE company_code = '{회사코드}' AND menu_name_kor LIKE '%물류%';
+
+INSERT INTO menu_info (objid, menu_type, parent_obj_id, menu_name_kor, seq, menu_url, screen_code, company_code, status)
+VALUES (
+  (SELECT COALESCE(MAX(objid), 0) + 1 FROM menu_info),
+  2,                          -- 2 = 메뉴 항목
+  {부모_objid},               -- 상위 메뉴의 objid
+  '포장/적재정보',
+  10,                         -- 정렬 순서
+  '/screen/COMPANY_7_PKG',   -- /screen/{screen_code} 형식 (절대!)
+  'COMPANY_7_PKG',           -- screen_definitions.screen_code와 일치
+  'COMPANY_7',
+  'Y'
+);
+```
+
+**핵심**: `menu_url`은 반드시 `/screen/{screen_code}` 형식이어야 한다!
+프론트엔드가 이 URL을 받아 `screen_definitions`에서 screen_id를 찾고, `screen_layouts_v2`에서 레이아웃을 로드한다.
+
+## 2. 관리자 메뉴 등록 (코드 구현 후 필수!)
+
+관리자 기능을 코드로 만들었으면 반드시 `menu_info`에 등록해야 한다.
+
+```sql
+-- 예시: 결재 템플릿 관리 메뉴 등록
+INSERT INTO menu_info (objid, menu_type, parent_obj_id, menu_name_kor, seq, menu_url, company_code, status)
+VALUES (
+  (SELECT COALESCE(MAX(objid), 0) + 1 FROM menu_info),
+  2, {부모_objid}, '결재 템플릿', 40, '/admin/approvalTemplate', '대상회사코드', 'Y'
+);
+```
+
+- 기존 메뉴 구조를 먼저 조회해서 parent_obj_id, seq 등을 맞춰라
+- company_code 별로 등록이 필요할 수 있다
+- menu_auth_group 권한 매핑도 필요하면 추가
+
+## 3. 하드코딩 금지 / 범용성 필수
+
+- 특정 회사에만 동작하는 코드 금지
+- 특정 사용자 ID에 의존하는 로직 금지
+- 매직 넘버 사용 금지 (상수 또는 설정 파일로 관리)
+- 하드코딩 색상 금지 (CSS 변수 사용: bg-primary, text-destructive 등)
+- 하드코딩 URL 금지 (환경 변수 또는 API 클라이언트 사용)
+
+## 4. 테스트 환경 정보
+
+- **테스트 계정**: userId=`wace`, password=`qlalfqjsgh11`
+- **역할**: SUPER_ADMIN (company_code = "*")
+- **개발 프론트엔드**: http://localhost:9771
+- **개발 백엔드 API**: http://localhost:8080
+- **개발 DB**: postgresql://postgres:ph0909!!@39.117.244.52:11132/plm
+
+## 5. 기능 구현 완성 체크리스트
+
+기능 하나를 "완성"이라고 말하려면 아래를 전부 충족해야 한다:
+
+### 공통
+- [ ] DB: 마이그레이션 작성 + 실행 완료
+- [ ] DB: company_code 컬럼 + 인덱스 존재
+- [ ] BE: API 엔드포인트 구현 + 라우트 등록 (app.ts에 import + use 추가!)
+- [ ] BE: company_code 필터링 적용
+- [ ] 빌드 통과: 백엔드 tsc + 프론트엔드 tsc
+
+### 관리자 메뉴인 경우
+- [ ] FE: `frontend/app/(main)/admin/{기능}/page.tsx` 작성
+- [ ] FE: API 클라이언트 함수 작성 (lib/api/)
+- [ ] DB: `menu_info` INSERT (menu_url = `/admin/{기능}`)
+
+### 사용자 메뉴인 경우 (코드 작성 금지!)
+- [ ] DB: `screen_definitions` INSERT (screen_code, table_name, company_code)
+- [ ] DB: `screen_layouts_v2` INSERT (V2 레이아웃 JSON)
+- [ ] DB: `menu_info` INSERT (menu_url = `/screen/{screen_code}`)
+- [ ] BE: 필요한 경우 전용 API 작성 (범용 table-management API로 커버 안 되는 경우만)
+- [ ] FE: .tsx 페이지 파일 만들지 않음 (이미 `/screens/[screenId]/page.tsx`가 렌더링)
+
+## 6. 절대 하지 말 것
+
+1. 페이지 파일만 만들고 메뉴 등록 안 하기 (미완성!)
+2. fetch() 직접 사용 (lib/api/ 클라이언트 필수)
+3. company_code 필터링 빠뜨리기
+4. 하드코딩 색상/URL/사용자ID 사용
+5. Card 안에 Card 중첩 (중첩 박스 금지)
+6. 백엔드 재실행하기 (nodemon이 자동 재시작)
+7. **사용자 메뉴를 React 하드코딩(.tsx)으로 만들기 (절대 금지!!!)**
+   - `frontend/app/(main)/production/`, `frontend/app/(main)/warehouse/` 등에 page.tsx 파일을 만들어서 직접 UI를 코딩하는 것은 절대 금지
+   - 사용자 메뉴는 반드시 `screen_definitions` + `screen_layouts_v2` + `menu_info` DB 등록 방식으로 구현
+   - 이미 `/screen/[screenCode]` → `/screens/[screenId]` 렌더링 시스템이 존재함
+   - 백엔드 API(controller/routes)와 프론트엔드 API 클라이언트(lib/api/)는 필요하면 코드로 작성 가능
+   - 하지만 프론트엔드 화면 UI 자체는 DB의 V2 레이아웃 JSON으로만 구성
diff --git a/.cursor/agents/pipeline-db.md b/.cursor/agents/pipeline-db.md
new file mode 100644
index 00000000..33e25218
--- /dev/null
+++ b/.cursor/agents/pipeline-db.md
@@ -0,0 +1,50 @@
+---
+name: pipeline-db
+description: Agent Pipeline DB 전문가. PostgreSQL 스키마 설계, 마이그레이션 작성 및 실행. 모든 테이블에 company_code 필수.
+model: inherit
+---
+
+# Role
+You are a Database specialist for ERP-node project.
+Stack: PostgreSQL + Raw Query (no ORM). Migrations in db/migrations/.
+
+# CRITICAL PROJECT RULES
+
+## 1. Multi-tenancy (ABSOLUTE MUST!)
+- ALL tables MUST have company_code VARCHAR(20) NOT NULL
+- ALL queries MUST filter by company_code
+- JOINs MUST include company_code matching condition
+- CREATE INDEX on company_code for every table
+
+## 2. Migration Rules
+- File naming: NNN_description.sql
+- Always include company_code column
+- Always create index on company_code
+- Use IF NOT EXISTS for idempotent migrations
+- Use TIMESTAMPTZ for dates (not TIMESTAMP)
+
+## 3. MIGRATION EXECUTION (절대 규칙!)
+마이그레이션 SQL 파일을 생성한 후, 반드시 직접 실행해서 테이블을 생성해라.
+절대 사용자에게 "직접 실행해주세요"라고 떠넘기지 마라.
+
+Docker 환경:
+```bash
+DOCKER_HOST=unix:///Users/gbpark/.orbstack/run/docker.sock docker exec pms-backend-mac node -e "
+const {Pool}=require('pg');
+const p=new Pool({connectionString:process.env.DATABASE_URL,ssl:false});
+const fs=require('fs');
+const sql=fs.readFileSync('/app/db/migrations/파일명.sql','utf8');
+p.query(sql).then(()=>{console.log('OK');p.end()}).catch(e=>{console.error(e.message);p.end();process.exit(1)})
+"
+```
+
+# Your Domain
+- db/migrations/
+- SQL schema design
+- Query optimization
+
+# Code Rules
+1. PostgreSQL syntax only
+2. Parameter binding ($1, $2)
+3. Use COALESCE for NULL handling
+4. Use TIMESTAMPTZ for dates
diff --git a/.cursor/agents/pipeline-frontend.md b/.cursor/agents/pipeline-frontend.md
new file mode 100644
index 00000000..223b5b38
--- /dev/null
+++ b/.cursor/agents/pipeline-frontend.md
@@ -0,0 +1,92 @@
+---
+name: pipeline-frontend
+description: Agent Pipeline 프론트엔드 전문가. Next.js 14 + React + TypeScript + shadcn/ui 기반 화면 구현. fetch 직접 사용 금지, lib/api/ 클라이언트 필수.
+model: inherit
+---
+
+# Role
+You are a Frontend specialist for ERP-node project.
+Stack: Next.js 14 + React + TypeScript + Tailwind CSS + shadcn/ui.
+
+# CRITICAL PROJECT RULES
+
+## 1. API Client (ABSOLUTE RULE!)
+- NEVER use fetch() directly!
+- ALWAYS use lib/api/ clients (Axios-based)
+- 환경별 URL 자동 처리: v1.vexplor.com → api.vexplor.com, localhost → localhost:8080
+
+## 2. shadcn/ui Style Rules
+- Use CSS variables: bg-primary, text-muted-foreground (하드코딩 색상 금지)
+- No nested boxes: Card inside Card is FORBIDDEN
+- Responsive: mobile-first approach (flex-col md:flex-row)
+
+## 3. V2 Component Standard
+V2 컴포넌트를 만들거나 수정할 때 반드시 이 규격을 따라야 한다.
+
+### 폴더 구조 (필수)
+```
+frontend/lib/registry/components/v2-{name}/
+├── index.ts               # createComponentDefinition() 호출
+├── types.ts               # Config extends ComponentConfig
+├── {Name}Component.tsx    # React 함수 컴포넌트
+├── {Name}Renderer.tsx     # extends AutoRegisteringComponentRenderer + registerSelf()
+├── {Name}ConfigPanel.tsx  # ConfigPanelBuilder 사용
+└── config.ts              # 기본 설정값 상수
+```
+
+### ConfigPanel 규칙 (절대!)
+- 반드시 ConfigPanelBuilder 또는 ConfigSection 사용
+- 직접 JSX로 설정 UI 작성 금지
+
+## 4. API Client 생성 패턴
+```typescript
+// frontend/lib/api/yourModule.ts
+import apiClient from "@/lib/api/client";
+
+export async function getYourData(id: number) {
+  const response = await apiClient.get(`/api/your-endpoint/${id}`);
+  return response.data;
+}
+```
+
+# CRITICAL: 사용자 메뉴 화면은 코드로 만들지 않는다!!!
+
+**이 프로젝트는 로우코드 스크린 디자이너 시스템을 사용한다.**
+사용자 업무 화면(포장관리, 금형관리, BOM, 문서관리 등)은 절대 React 페이지(.tsx)로 직접 UI를 하드코딩하지 않는다!
+
+## 금지 패턴 (절대 하지 말 것)
+```
+frontend/app/(main)/production/packaging/page.tsx  ← 이런 파일 만들지 마라!
+frontend/app/(main)/warehouse/something/page.tsx   ← 이런 파일 만들지 마라!
+```
+
+## 올바른 패턴
+사용자 화면은 DB에 등록만 하면 자동으로 렌더링된다:
+1. `screen_definitions` 테이블에 화면 등록 (screen_code, table_name 등)
+2. `screen_layouts_v2` 테이블에 V2 레이아웃 JSON 등록 (v2-split-panel-layout, v2-table-list 등)
+3. `menu_info` 테이블에 메뉴 등록 (menu_url = `/screen/{screen_code}`)
+
+이미 존재하는 렌더링 시스템:
+- `/screen/[screenCode]/page.tsx` → screenCode를 screenId로 변환
+- `/screens/[screenId]/page.tsx` → screen_layouts_v2에서 V2 레이아웃 로드 → DynamicComponentRenderer로 렌더링
+
+## 프론트엔드 에이전트가 할 수 있는 것
+- `frontend/lib/api/` 하위에 API 클라이언트 함수 작성 (백엔드와 통신)
+- V2 컴포넌트 자체를 수정/신규 개발 (`frontend/lib/registry/components/v2-*/`)
+- 관리자 메뉴(`/admin/*`)는 React 페이지 코딩 가능
+
+## 프론트엔드 에이전트가 할 수 없는 것
+- 사용자 메뉴 화면을 React 페이지로 직접 코딩하는 것
+
+# Your Domain
+- frontend/components/
+- frontend/app/
+- frontend/lib/
+- frontend/hooks/
+
+# Code Rules
+1. TypeScript strict mode
+2. React functional components with hooks
+3. Prefer shadcn/ui components
+4. Use cn() utility for conditional classes
+5. Comments in Korean
diff --git a/.cursor/agents/pipeline-ui.md b/.cursor/agents/pipeline-ui.md
new file mode 100644
index 00000000..05d3359e
--- /dev/null
+++ b/.cursor/agents/pipeline-ui.md
@@ -0,0 +1,64 @@
+---
+name: pipeline-ui
+description: Agent Pipeline UI/UX 디자인 전문가. 모던 엔터프라이즈 UI 구현. CSS 변수 필수, 하드코딩 색상 금지, 반응형 필수.
+model: inherit
+---
+
+# Role
+You are a UI/UX Design specialist for the ERP-node project.
+Stack: Next.js 14 + React + TypeScript + Tailwind CSS + shadcn/ui + lucide-react icons.
+
+# Design Philosophy
+- Apple-level polish with enterprise functionality
+- Consistent spacing, typography, color usage
+- Subtle animations and micro-interactions
+- Dark mode compatible using CSS variables
+
+# CRITICAL STYLE RULES
+
+## 1. Color System (CSS Variables ONLY)
+- bg-background / text-foreground (base)
+- bg-primary / text-primary-foreground (actions)
+- bg-muted / text-muted-foreground (secondary)
+- bg-destructive / text-destructive-foreground (danger)
+FORBIDDEN: bg-gray-50, text-blue-500, bg-white, text-black
+
+## 2. Layout Rules
+- No nested boxes (Card inside Card FORBIDDEN)
+- Spacing: p-6 for cards, space-y-4 for forms, gap-4 for grids
+- Mobile-first responsive: flex-col md:flex-row
+
+## 3. Typography
+- Page title: text-3xl font-bold
+- Section: text-xl font-semibold
+- Body: text-sm
+- Helper: text-xs text-muted-foreground
+
+## 4. Components
+- ALWAYS use shadcn/ui components
+- Use cn() for conditional classes
+- Use lucide-react for ALL icons
+
+# CRITICAL: 사용자 메뉴 화면은 코드로 만들지 않는다!!!
+
+사용자 업무 화면(포장관리, 금형관리, BOM 등)의 UI는 DB의 `screen_layouts_v2` 테이블에 V2 레이아웃 JSON으로 정의된다.
+React 페이지(.tsx)로 직접 UI를 하드코딩하는 것은 절대 금지!
+
+UI 에이전트가 할 수 있는 것:
+- V2 컴포넌트 자체의 스타일/UX 개선 (`frontend/lib/registry/components/v2-*/`)
+- 관리자 메뉴(`/admin/*`) 페이지의 UI 개선
+- 공통 UI 컴포넌트(`frontend/components/ui/`) 스타일 개선
+
+UI 에이전트가 할 수 없는 것:
+- 사용자 메뉴 화면을 React 페이지로 직접 코딩
+
+# Your Domain
+- frontend/components/ (UI components)
+- frontend/app/ (pages - 관리자 메뉴만)
+- frontend/lib/registry/components/v2-*/ (V2 컴포넌트)
+
+# Output Rules
+1. TypeScript strict mode
+2. "use client" for client components
+3. Comments in Korean
+4. MINIMAL targeted changes when modifying existing files
diff --git a/.cursor/agents/pipeline-verifier.md b/.cursor/agents/pipeline-verifier.md
new file mode 100644
index 00000000..a4f4186d
--- /dev/null
+++ b/.cursor/agents/pipeline-verifier.md
@@ -0,0 +1,57 @@
+---
+name: pipeline-verifier
+description: Agent Pipeline 검증 전문가. 구현 완료 후 실제 동작 검증. 빈 껍데기 탐지, 패턴 준수 확인, 멀티테넌시 검증.
+model: fast
+readonly: true
+---
+
+# Role
+You are a skeptical validator for the ERP-node project.
+Your job is to verify that work claimed as complete actually works.
+
+# Verification Checklist
+
+## 1. Multi-tenancy (최우선)
+- [ ] 모든 SQL에 company_code 필터 존재
+- [ ] req.user!.companyCode 사용 (클라이언트 입력 아님)
+- [ ] INSERT에 company_code 포함
+- [ ] JOIN에 company_code 매칭 조건 존재
+- [ ] company_code = "*" 최고관리자 예외 처리
+
+## 2. Empty Shell Detection (빈 껍데기)
+- [ ] API가 실제 DB 쿼리 실행 (mock 아님)
+- [ ] 컴포넌트가 실제 데이터 로딩 (하드코딩 아님)
+- [ ] TODO/FIXME/placeholder 없음
+- [ ] 타입만 정의하고 구현 없는 함수 없음
+
+## 3. Pattern Compliance (패턴 준수)
+- [ ] Frontend: fetch 직접 사용 안 함 (lib/api/ 사용)
+- [ ] Frontend: CSS 변수 사용 (하드코딩 색상 없음)
+- [ ] Frontend: V2 컴포넌트 규격 준수
+- [ ] Backend: logger 사용
+- [ ] Backend: try/catch 에러 처리
+
+## 4. Integration Check
+- [ ] Route가 index.ts에 등록됨
+- [ ] Import 경로 정확
+- [ ] Export 존재
+- [ ] TypeScript 타입 일치
+
+# Reporting Format
+```
+## 검증 결과: [PASS/FAIL]
+
+### 통과 항목
+- item 1
+- item 2
+
+### 실패 항목
+- item 1: 구체적 이유
+- item 2: 구체적 이유
+
+### 권장 수정사항
+- fix 1
+- fix 2
+```
+
+Do not accept claims at face value. Check the actual code.
diff --git a/.cursor/worktrees.json b/.cursor/worktrees.json
new file mode 100644
index 00000000..d568a8fe
--- /dev/null
+++ b/.cursor/worktrees.json
@@ -0,0 +1,8 @@
+{
+  "setup-worktree-unix": [
+    "cd backend-node && npm ci --prefer-offline --no-audit 2>/dev/null || npm install --prefer-offline --no-audit",
+    "cd frontend && npm ci --prefer-offline --no-audit 2>/dev/null || npm install --prefer-offline --no-audit",
+    "cp $ROOT_WORKTREE_PATH/backend-node/.env backend-node/.env 2>/dev/null || true",
+    "cp $ROOT_WORKTREE_PATH/frontend/.env.local frontend/.env.local 2>/dev/null || true"
+  ]
+}
diff --git a/.cursorrules b/.cursorrules
index 77180695..0019badc 100644
--- a/.cursorrules
+++ b/.cursorrules
@@ -1510,3 +1510,69 @@ const query = `
 
 **company_code = "*"는 공통 데이터가 아닌 최고 관리자 전용 데이터입니다!**
 
+---
+
+## DB 테이블 생성 필수 규칙
+
+**상세 가이드**: [table-type-sql-guide.mdc](.cursor/rules/table-type-sql-guide.mdc)
+
+### 핵심 원칙 (절대 위반 금지)
+
+1. **모든 비즈니스 컬럼은 `VARCHAR(500)`**: NUMERIC, INTEGER, SERIAL, TEXT 등 DB 타입 직접 지정 금지
+2. **기본 5개 컬럼 자동 포함** (모든 테이블 필수):
+   ```sql
+   "id" varchar(500) PRIMARY KEY DEFAULT gen_random_uuid()::text,
+   "created_date" timestamp DEFAULT now(),
+   "updated_date" timestamp DEFAULT now(),
+   "writer" varchar(500) DEFAULT NULL,
+   "company_code" varchar(500)
+   ```
+3. **3개 메타데이터 테이블 등록 필수**:
+   - `table_labels`: 테이블 라벨/설명
+   - `table_type_columns`: 컬럼 input_type, detail_settings (company_code = '*')
+   - `column_labels`: 컬럼 한글 라벨 (레거시 호환)
+4. **input_type으로 타입 구분**: text, number, date, code, entity, select, checkbox, radio, textarea
+5. **ON CONFLICT 절 필수**: 중복 시 UPDATE 처리
+
+### 금지 사항
+
+- `SERIAL`, `INTEGER`, `NUMERIC`, `BOOLEAN`, `TEXT`, `DATE` 등 DB 타입 직접 사용 금지
+- `VARCHAR` 길이 변경 금지 (반드시 500)
+- 기본 5개 컬럼 누락 금지
+- 메타데이터 테이블 미등록 금지
+
+---
+
+## 화면 개발 방식 필수 규칙 (사용자 메뉴 vs 관리자 메뉴)
+
+**상세 가이드**: [pipeline-common-rules.md](.cursor/agents/pipeline-common-rules.md)
+
+### 핵심 원칙 (절대 위반 금지)
+
+1. **사용자 업무 화면은 React 코드(.tsx)로 직접 만들지 않는다!**
+   - 포장관리, 금형관리, BOM, 입출고, 품질 등 일반 업무 화면
+   - DB에 `screen_definitions` + `screen_layouts_v2` + `menu_info` 등록으로 구현
+   - 이미 `/screen/[screenCode]` → `/screens/[screenId]` 렌더링 시스템이 존재
+   - V2 컴포넌트(v2-split-panel-layout, v2-table-list, v2-repeater 등)로 레이아웃 구성
+
+2. **관리자 메뉴만 React 코드로 작성 가능**
+   - 사용자 관리, 권한 관리, 시스템 설정 등
+   - `frontend/app/(main)/admin/{기능}/page.tsx`에 작성
+   - `menu_info` 테이블에 메뉴 등록 필수
+
+### 사용자 메뉴 구현 순서
+
+```
+1. DB 테이블 생성 (비즈니스 데이터용)
+2. screen_definitions INSERT (screen_code, table_name)
+3. screen_layouts_v2 INSERT (V2 레이아웃 JSON)
+4. menu_info INSERT (menu_url = '/screen/{screen_code}')
+5. 필요하면 백엔드 전용 API 추가 (범용 API로 안 되는 경우만)
+```
+
+### 금지 사항
+
+- `frontend/app/(main)/production/*/page.tsx` 같은 사용자 화면 하드코딩 금지
+- `frontend/app/(main)/warehouse/*/page.tsx` 같은 사용자 화면 하드코딩 금지
+- 사용자 메뉴의 UI를 React 컴포넌트로 직접 구현하는 것 금지
+
diff --git a/approval-company7-report.txt b/approval-company7-report.txt
new file mode 100644
index 00000000..57760435
--- /dev/null
+++ b/approval-company7-report.txt
@@ -0,0 +1,33 @@
+
+=== Step 1: 로그인 (topseal_admin) ===
+  현재 URL: http://localhost:9771/screens/138
+  스크린샷: 01-after-login.png
+  OK: 로그인 완료
+
+=== Step 2: 발주관리 화면 이동 ===
+  스크린샷: 02-po-screen.png
+  OK: 발주관리 화면 로드
+
+=== Step 3: 그리드 컬럼 및 데이터 확인 ===
+  컬럼 헤더 (전체): ["결재상태","발주번호","품목코드","품목명","규격","발주수량","출하수량","단위","구분","유형","재질","규격","품명"]
+  첫 번째 컬럼: "결재상태"
+  결재상태(한글) 표시됨
+  데이터 행 수: 11
+  데이터 있음
+  첫 번째 컬럼 값(샘플): ["","","","",""]
+  발주번호 형식 데이터: ["PO-2026-0001","PO-2026-0001","PO-2026-0001","PO-2026-0045","PO-2026-0045"]
+  스크린샷: 03-grid-detail.png
+  OK: 그리드 상세 스크린샷 저장
+
+=== Step 4: 결재 요청 버튼 확인 ===
+  OK: '결재 요청' 파란색 버튼 확인됨
+  스크린샷: 04-approval-button.png
+
+=== Step 5: 행 선택 후 결재 요청 ===
+  OK: 행 선택 완료
+  스크린샷: 05-approval-modal.png
+  OK: 결재 모달 열림
+  스크린샷: 06-approver-search-results.png
+  결재자 검색 결과: 8명
+  결재자 목록: ["상신결재","다단 결재순차적으로 결재","동시 결재모든 결재자 동시 진행","TEST(Kim1542)김동현","김혜인(qwer0578)배달집행부 / 차장","김지수(area09)배달집행부 / 대리","김한길(qoznd123)배달집행부 / 과장","김하세(kaoe123)배달집행부 / 사원"]
+  스크린샷: 07-final.png
\ No newline at end of file
diff --git a/approval-test-report.txt b/approval-test-report.txt
new file mode 100644
index 00000000..4a2e6386
--- /dev/null
+++ b/approval-test-report.txt
@@ -0,0 +1,29 @@
+
+=== Step 1: 로그인 ===
+  스크린샷: 01-login-page.png
+  스크린샷: 02-after-login.png
+  OK: 로그인 완료, 대시보드 로드
+
+=== Step 2: 구매관리 → 발주관리 메뉴 이동 ===
+  INFO: 메뉴에서 발주관리 미발견, 직접 URL로 이동
+  메뉴 목록: ["관리자 메뉴로 전환","회사 선택","관리자해외영업부"]
+  스크린샷: 04-po-screen-loaded.png
+  OK: /screen/COMPANY_7_064 직접 이동 완료
+
+=== Step 3: 그리드 컬럼 확인 ===
+  스크린샷: 05-grid-columns.png
+  컬럼 목록: ["approval_status","발주번호","품목코드","품목명","규격","발주수량","출하","단위","구분","유형","재질","규격","품명"]
+  FAIL: '결재상태' 컬럼 없음
+  결재상태 값: 데이터 없음 또는 해당 값 없음
+
+=== Step 4: 행 선택 및 결재 요청 버튼 클릭 ===
+  스크린샷: 06-row-selected.png
+  OK: 첫 번째 행 선택
+  스크린샷: 07-approval-modal-opened.png
+  OK: 결재 모달 열림
+
+=== Step 5: 결재자 검색 테스트 ===
+  스크린샷: 08-approver-search-results.png
+  검색 결과 수: 12명
+  결재자 목록: ["상신결재","템플릿","다단 결재순차적으로 결재","동시 결재모든 결재자 동시 진행","김동열(drkim)-","김아름(qwe123)생산부 / 차장","TEST(Kim1542)김동현","김혜인(qwer0578)배달집행부 / 차장","김욱동(dnrehd0171)-","김지수(area09)배달집행부 / 대리"]
+  스크린샷: 09-final-state.png
\ No newline at end of file
diff --git a/backend-node/scripts/run-1050-migration.js b/backend-node/scripts/run-1050-migration.js
new file mode 100644
index 00000000..aa1b3723
--- /dev/null
+++ b/backend-node/scripts/run-1050-migration.js
@@ -0,0 +1,35 @@
+/**
+ * system_notice 테이블 생성 마이그레이션 실행
+ */
+const { Pool } = require('pg');
+const fs = require('fs');
+const path = require('path');
+
+const pool = new Pool({
+  connectionString: process.env.DATABASE_URL || 'postgresql://postgres:ph0909!!@39.117.244.52:11132/plm',
+  ssl: false,
+});
+
+async function run() {
+  const client = await pool.connect();
+  try {
+    const sqlPath = path.join(__dirname, '../../db/migrations/1050_create_system_notice.sql');
+    const sql = fs.readFileSync(sqlPath, 'utf8');
+    await client.query(sql);
+    console.log('OK: system_notice 테이블 생성 완료');
+
+    // 검증
+    const result = await client.query(
+      "SELECT column_name FROM information_schema.columns WHERE table_name='system_notice' ORDER BY ordinal_position"
+    );
+    console.log('컬럼:', result.rows.map(r => r.column_name).join(', '));
+  } catch (e) {
+    console.error('ERROR:', e.message);
+    process.exit(1);
+  } finally {
+    client.release();
+    await pool.end();
+  }
+}
+
+run();
diff --git a/backend-node/scripts/run-notice-migration.js b/backend-node/scripts/run-notice-migration.js
new file mode 100644
index 00000000..4b23153d
--- /dev/null
+++ b/backend-node/scripts/run-notice-migration.js
@@ -0,0 +1,38 @@
+/**
+ * system_notice 마이그레이션 실행 스크립트
+ * 사용법: node scripts/run-notice-migration.js
+ */
+const fs = require('fs');
+const path = require('path');
+const { Pool } = require('pg');
+
+const pool = new Pool({
+  connectionString: process.env.DATABASE_URL || 'postgresql://postgres:ph0909!!@39.117.244.52:11132/plm',
+  ssl: false,
+});
+
+async function run() {
+  const client = await pool.connect();
+  try {
+    const sqlPath = path.join(__dirname, '../../db/migrations/1050_create_system_notice.sql');
+    const sql = fs.readFileSync(sqlPath, 'utf8');
+
+    console.log('마이그레이션 실행 중...');
+    await client.query(sql);
+    console.log('마이그레이션 완료');
+
+    // 컬럼 확인
+    const check = await client.query(
+      "SELECT column_name FROM information_schema.columns WHERE table_name='system_notice' ORDER BY ordinal_position"
+    );
+    console.log('테이블 컬럼:', check.rows.map(r => r.column_name).join(', '));
+  } catch (e) {
+    console.error('오류:', e.message);
+    process.exit(1);
+  } finally {
+    client.release();
+    await pool.end();
+  }
+}
+
+run();
diff --git a/backend-node/src/app.ts b/backend-node/src/app.ts
index 908c7e1d..822d3740 100644
--- a/backend-node/src/app.ts
+++ b/backend-node/src/app.ts
@@ -131,6 +131,7 @@ import taxInvoiceRoutes from "./routes/taxInvoiceRoutes"; // 세금계산서 관
 import cascadingRelationRoutes from "./routes/cascadingRelationRoutes"; // 연쇄 드롭다운 관계 관리
 import cascadingAutoFillRoutes from "./routes/cascadingAutoFillRoutes"; // 자동 입력 관리
 import cascadingConditionRoutes from "./routes/cascadingConditionRoutes"; // 조건부 연쇄 관리
+import packagingRoutes from "./routes/packagingRoutes"; // 포장/적재정보 관리
 import cascadingMutualExclusionRoutes from "./routes/cascadingMutualExclusionRoutes"; // 상호 배제 관리
 import cascadingHierarchyRoutes from "./routes/cascadingHierarchyRoutes"; // 다단계 계층 관리
 import categoryValueCascadingRoutes from "./routes/categoryValueCascadingRoutes"; // 카테고리 값 연쇄관계
@@ -321,6 +322,7 @@ app.use("/api/tax-invoice", taxInvoiceRoutes); // 세금계산서 관리
 app.use("/api/cascading-relations", cascadingRelationRoutes); // 연쇄 드롭다운 관계 관리
 app.use("/api/cascading-auto-fill", cascadingAutoFillRoutes); // 자동 입력 관리
 app.use("/api/cascading-conditions", cascadingConditionRoutes); // 조건부 연쇄 관리
+app.use("/api/packaging", packagingRoutes); // 포장/적재정보 관리
 app.use("/api/cascading-exclusions", cascadingMutualExclusionRoutes); // 상호 배제 관리
 app.use("/api/cascading-hierarchy", cascadingHierarchyRoutes); // 다단계 계층 관리
 app.use("/api/category-value-cascading", categoryValueCascadingRoutes); // 카테고리 값 연쇄관계
diff --git a/backend-node/src/controllers/adminController.ts b/backend-node/src/controllers/adminController.ts
index 57edad10..6f0997a9 100644
--- a/backend-node/src/controllers/adminController.ts
+++ b/backend-node/src/controllers/adminController.ts
@@ -3563,29 +3563,36 @@ export async function getTableSchema(
 
     logger.info("테이블 스키마 조회", { tableName, companyCode });
 
-    // information_schema와 table_type_columns를 JOIN하여 컬럼 정보와 라벨 정보 함께 가져오기
+    // information_schema와 table_type_columns를 JOIN하여 컬럼 정보 + 회사별 제약조건 함께 가져오기
+    // 회사별 설정 우선, 없으면 공통(*) 설정 사용
     const schemaQuery = `
       SELECT 
         ic.column_name,
         ic.data_type,
-        ic.is_nullable,
+        ic.is_nullable AS db_is_nullable,
         ic.column_default,
         ic.character_maximum_length,
         ic.numeric_precision,
         ic.numeric_scale,
-        ttc.column_label,
-        ttc.display_order
+        COALESCE(NULLIF(ttc_company.column_label, ic.column_name), ttc_common.column_label) AS column_label,
+        COALESCE(ttc_company.display_order, ttc_common.display_order) AS display_order,
+        COALESCE(ttc_company.is_nullable, ttc_common.is_nullable) AS ttc_is_nullable,
+        COALESCE(ttc_company.is_unique, ttc_common.is_unique) AS ttc_is_unique
       FROM information_schema.columns ic
-      LEFT JOIN table_type_columns ttc 
-        ON ttc.table_name = ic.table_name 
-        AND ttc.column_name = ic.column_name
-        AND ttc.company_code = '*'
+      LEFT JOIN table_type_columns ttc_common 
+        ON ttc_common.table_name = ic.table_name 
+        AND ttc_common.column_name = ic.column_name
+        AND ttc_common.company_code = '*'
+      LEFT JOIN table_type_columns ttc_company 
+        ON ttc_company.table_name = ic.table_name 
+        AND ttc_company.column_name = ic.column_name
+        AND ttc_company.company_code = $2
       WHERE ic.table_schema = 'public'
         AND ic.table_name = $1
-      ORDER BY COALESCE(ttc.display_order, ic.ordinal_position), ic.ordinal_position
+      ORDER BY COALESCE(ttc_company.display_order, ttc_common.display_order, ic.ordinal_position), ic.ordinal_position
     `;
 
-    const columns = await query<any>(schemaQuery, [tableName]);
+    const columns = await query<any>(schemaQuery, [tableName, companyCode]);
 
     if (columns.length === 0) {
       res.status(404).json({
@@ -3595,17 +3602,28 @@ export async function getTableSchema(
       return;
     }
 
-    // 컬럼 정보를 간단한 형태로 변환 (라벨 정보 포함)
-    const columnList = columns.map((col: any) => ({
-      name: col.column_name,
-      label: col.column_label || col.column_name, // 라벨이 없으면 컬럼명 사용
-      type: col.data_type,
-      nullable: col.is_nullable === "YES",
-      default: col.column_default,
-      maxLength: col.character_maximum_length,
-      precision: col.numeric_precision,
-      scale: col.numeric_scale,
-    }));
+    // 컬럼 정보를 간단한 형태로 변환 (회사별 제약조건 반영)
+    const columnList = columns.map((col: any) => {
+      // DB level nullable + 회사별 table_type_columns 제약조건 통합
+      // table_type_columns에서 is_nullable = 'N'이면 필수 (DB가 nullable이어도)
+      const dbNullable = col.db_is_nullable === "YES";
+      const ttcNotNull = col.ttc_is_nullable === "N";
+      const effectiveNullable = ttcNotNull ? false : dbNullable;
+
+      const ttcUnique = col.ttc_is_unique === "Y";
+
+      return {
+        name: col.column_name,
+        label: col.column_label || col.column_name,
+        type: col.data_type,
+        nullable: effectiveNullable,
+        unique: ttcUnique,
+        default: col.column_default,
+        maxLength: col.character_maximum_length,
+        precision: col.numeric_precision,
+        scale: col.numeric_scale,
+      };
+    });
 
     logger.info(`테이블 스키마 조회 성공: ${columnList.length}개 컬럼`);
 
diff --git a/backend-node/src/controllers/approvalController.ts b/backend-node/src/controllers/approvalController.ts
index 84231245..eabe77ce 100644
--- a/backend-node/src/controllers/approvalController.ts
+++ b/backend-node/src/controllers/approvalController.ts
@@ -1,6 +1,16 @@
 import { Response } from "express";
 import { AuthenticatedRequest } from "../types/auth";
 import { query, queryOne, transaction } from "../database/db";
+import { PoolClient } from "pg";
+import { NodeFlowExecutionService } from "../services/nodeFlowExecutionService";
+
+// 트랜잭션 내부에서 throw하고 외부에서 instanceof로 구분하기 위한 커스텀 에러
+class ValidationError extends Error {
+  constructor(public statusCode: number, message: string) {
+    super(message);
+    this.name = "ValidationError";
+  }
+}
 
 // ============================================================
 // 결재 정의 (Approval Definitions) CRUD
@@ -17,24 +27,34 @@ export class ApprovalDefinitionController {
 
       const { is_active, search } = req.query;
 
-      const conditions: string[] = ["company_code = $1"];
-      const params: any[] = [companyCode];
-      let idx = 2;
+      const conditions: string[] = [];
+      const params: any[] = [];
+      let idx = 1;
+
+      // SUPER_ADMIN은 전체 조회, 일반 회사는 자사 데이터만
+      if (companyCode === "*") {
+        // 전체 조회 (company_code 필터 없음)
+      } else {
+        conditions.push(`company_code = $${idx++}`);
+        params.push(companyCode);
+      }
 
       if (is_active) {
-        conditions.push(`is_active = $${idx}`);
+        conditions.push(`is_active = $${idx++}`);
         params.push(is_active);
-        idx++;
       }
 
       if (search) {
+        // ILIKE에서 같은 파라미터를 두 조건에서 참조 (파라미터는 1개만 push)
         conditions.push(`(definition_name ILIKE $${idx} OR definition_name_eng ILIKE $${idx})`);
         params.push(`%${search}%`);
         idx++;
       }
 
+      const whereClause = conditions.length > 0 ? `WHERE ${conditions.join(" AND ")}` : "";
+
       const rows = await query<any>(
-        `SELECT * FROM approval_definitions WHERE ${conditions.join(" AND ")} ORDER BY definition_id ASC`,
+        `SELECT * FROM approval_definitions ${whereClause} ORDER BY company_code, definition_id ASC`,
         params
       );
 
@@ -58,9 +78,12 @@ export class ApprovalDefinitionController {
       }
 
       const { id } = req.params;
+      // SUPER_ADMIN은 company_code 필터 없이 조회 가능
       const row = await queryOne<any>(
-        "SELECT * FROM approval_definitions WHERE definition_id = $1 AND company_code = $2",
-        [id, companyCode]
+        companyCode === "*"
+          ? "SELECT * FROM approval_definitions WHERE definition_id = $1"
+          : "SELECT * FROM approval_definitions WHERE definition_id = $1 AND company_code = $2",
+        companyCode === "*" ? [id] : [id, companyCode]
       );
 
       if (!row) {
@@ -165,11 +188,15 @@ export class ApprovalDefinitionController {
 
       fields.push(`updated_by = $${idx++}`, `updated_at = NOW()`);
       params.push(req.user?.userId || "system");
+
+      // WHERE 절 파라미터 인덱스를 미리 계산 (쿼리 문자열 내 idx++ 호출 순서 보장)
+      const idIdx = idx++;
+      const ccIdx = idx++;
       params.push(id, companyCode);
 
       const [row] = await query<any>(
         `UPDATE approval_definitions SET ${fields.join(", ")}
-         WHERE definition_id = $${idx++} AND company_code = $${idx++} RETURNING *`,
+         WHERE definition_id = $${idIdx} AND company_code = $${ccIdx} RETURNING *`,
         params
       );
 
@@ -234,9 +261,15 @@ export class ApprovalTemplateController {
 
       const { definition_id, is_active } = req.query;
 
-      const conditions: string[] = ["t.company_code = $1"];
-      const params: any[] = [companyCode];
-      let idx = 2;
+      const conditions: string[] = [];
+      const params: any[] = [];
+      let idx = 1;
+
+      // SUPER_ADMIN은 전체 조회, 일반 회사는 자사 데이터만
+      if (companyCode !== "*") {
+        conditions.push(`t.company_code = $${idx++}`);
+        params.push(companyCode);
+      }
 
       if (definition_id) {
         conditions.push(`t.definition_id = $${idx++}`);
@@ -247,12 +280,14 @@ export class ApprovalTemplateController {
         params.push(is_active);
       }
 
+      const whereClause = conditions.length > 0 ? `WHERE ${conditions.join(" AND ")}` : "";
+
       const rows = await query<any>(
         `SELECT t.*, d.definition_name
          FROM approval_line_templates t
          LEFT JOIN approval_definitions d ON t.definition_id = d.definition_id AND t.company_code = d.company_code
-         WHERE ${conditions.join(" AND ")}
-         ORDER BY t.template_id ASC`,
+         ${whereClause}
+         ORDER BY t.company_code, t.template_id ASC`,
         params
       );
 
@@ -276,12 +311,18 @@ export class ApprovalTemplateController {
       }
 
       const { id } = req.params;
+      // SUPER_ADMIN은 company_code 필터 없이 조회 가능
       const template = await queryOne<any>(
-        `SELECT t.*, d.definition_name
-         FROM approval_line_templates t
-         LEFT JOIN approval_definitions d ON t.definition_id = d.definition_id AND t.company_code = d.company_code
-         WHERE t.template_id = $1 AND t.company_code = $2`,
-        [id, companyCode]
+        companyCode === "*"
+          ? `SELECT t.*, d.definition_name
+             FROM approval_line_templates t
+             LEFT JOIN approval_definitions d ON t.definition_id = d.definition_id AND t.company_code = d.company_code
+             WHERE t.template_id = $1`
+          : `SELECT t.*, d.definition_name
+             FROM approval_line_templates t
+             LEFT JOIN approval_definitions d ON t.definition_id = d.definition_id AND t.company_code = d.company_code
+             WHERE t.template_id = $1 AND t.company_code = $2`,
+        companyCode === "*" ? [id] : [id, companyCode]
       );
 
       if (!template) {
@@ -289,8 +330,10 @@ export class ApprovalTemplateController {
       }
 
       const steps = await query<any>(
-        "SELECT * FROM approval_line_template_steps WHERE template_id = $1 AND company_code = $2 ORDER BY step_order ASC",
-        [id, companyCode]
+        companyCode === "*"
+          ? "SELECT * FROM approval_line_template_steps WHERE template_id = $1 ORDER BY step_order ASC"
+          : "SELECT * FROM approval_line_template_steps WHERE template_id = $1 AND company_code = $2 ORDER BY step_order ASC",
+        companyCode === "*" ? [id] : [id, companyCode]
       );
 
       return res.json({ success: true, data: { ...template, steps } });
@@ -312,7 +355,7 @@ export class ApprovalTemplateController {
         return res.status(401).json({ success: false, message: "인증 정보가 없습니다." });
       }
 
-      const { template_name, description, definition_id, is_active = "Y", steps = [] } = req.body;
+      const { template_name, description, definition_id, after_approval_flow_id, is_active = "Y", steps = [] } = req.body;
 
       if (!template_name) {
         return res.status(400).json({ success: false, message: "템플릿명은 필수입니다." });
@@ -323,9 +366,9 @@ export class ApprovalTemplateController {
       let result: any;
       await transaction(async (client) => {
         const { rows } = await client.query(
-          `INSERT INTO approval_line_templates (template_name, description, definition_id, is_active, company_code, created_by, updated_by)
-           VALUES ($1, $2, $3, $4, $5, $6, $6) RETURNING *`,
-          [template_name, description, definition_id, is_active, companyCode, userId]
+          `INSERT INTO approval_line_templates (template_name, description, definition_id, after_approval_flow_id, is_active, company_code, created_by, updated_by)
+           VALUES ($1, $2, $3, $4, $5, $6, $7, $7) RETURNING *`,
+          [template_name, description, definition_id, after_approval_flow_id || null, is_active, companyCode, userId]
         );
         result = rows[0];
 
@@ -380,7 +423,7 @@ export class ApprovalTemplateController {
         return res.status(404).json({ success: false, message: "결재선 템플릿을 찾을 수 없습니다." });
       }
 
-      const { template_name, description, definition_id, is_active, steps } = req.body;
+      const { template_name, description, definition_id, after_approval_flow_id, is_active, steps } = req.body;
       const userId = req.user?.userId || "system";
 
       let result: any;
@@ -392,13 +435,19 @@ export class ApprovalTemplateController {
         if (template_name !== undefined) { fields.push(`template_name = $${idx++}`); params.push(template_name); }
         if (description !== undefined) { fields.push(`description = $${idx++}`); params.push(description); }
         if (definition_id !== undefined) { fields.push(`definition_id = $${idx++}`); params.push(definition_id); }
+        if (after_approval_flow_id !== undefined) { fields.push(`after_approval_flow_id = $${idx++}`); params.push(after_approval_flow_id); }
         if (is_active !== undefined) { fields.push(`is_active = $${idx++}`); params.push(is_active); }
         fields.push(`updated_by = $${idx++}`, `updated_at = NOW()`);
-        params.push(userId, id, companyCode);
+        params.push(userId);
+
+        // WHERE 절 파라미터 인덱스를 미리 계산
+        const tmplIdx = idx++;
+        const ccIdx = idx++;
+        params.push(id, companyCode);
 
         const { rows } = await client.query(
           `UPDATE approval_line_templates SET ${fields.join(", ")}
-           WHERE template_id = $${idx++} AND company_code = $${idx++} RETURNING *`,
+           WHERE template_id = $${tmplIdx} AND company_code = $${ccIdx} RETURNING *`,
           params
         );
         result = rows[0];
@@ -467,6 +516,216 @@ export class ApprovalTemplateController {
   }
 }
 
+// ============================================================
+// 다음 step 활성화 헬퍼 (혼합형 결재선 대응)
+// notification step은 자동 통과 후 재귀적으로 다음 step 진행
+// ============================================================
+
+// 결재 상태 변경 시 원본 테이블(target_table)의 approval_status를 동기화하는 범용 hook
+async function syncApprovalStatusToTarget(
+  client: PoolClient,
+  requestId: number,
+  newStatus: string,
+  companyCode: string,
+): Promise<void> {
+  try {
+    const { rows: [req] } = await client.query(
+      `SELECT target_table, target_record_id FROM approval_requests WHERE request_id = $1 AND company_code = $2`,
+      [requestId, companyCode],
+    );
+    if (!req?.target_table || !req?.target_record_id || req.target_record_id === "0") return;
+
+    const { rows: cols } = await client.query(
+      `SELECT 1 FROM information_schema.columns WHERE table_name = $1 AND column_name = 'approval_status'`,
+      [req.target_table],
+    );
+    if (cols.length === 0) return;
+
+    const statusMap: Record<string, string> = {
+      in_progress: "결재중",
+      approved: "결재완료",
+      rejected: "반려",
+      cancelled: "작성중",
+      draft: "작성중",
+      post_pending: "후결대기",
+    };
+
+    const businessStatus = statusMap[newStatus] || newStatus;
+    const safeTable = req.target_table.replace(/[^a-zA-Z0-9_]/g, "");
+
+    // super admin(company_code='*')은 다른 회사 레코드도 업데이트 가능
+    if (companyCode === "*") {
+      await client.query(
+        `UPDATE "${safeTable}" SET approval_status = $1 WHERE id = $2`,
+        [businessStatus, req.target_record_id],
+      );
+    } else {
+      await client.query(
+        `UPDATE "${safeTable}" SET approval_status = $1 WHERE id = $2 AND company_code = $3`,
+        [businessStatus, req.target_record_id, companyCode],
+      );
+    }
+
+    // 결재 완료(approved) 시 제어관리(노드 플로우) 자동 실행
+    if (newStatus === "approved") {
+      await executeAfterApprovalFlow(client, requestId, companyCode, req);
+    }
+  } catch (err) {
+    console.error("[syncApprovalStatusToTarget] 원본 테이블 상태 동기화 실패:", err);
+  }
+}
+
+// 결재 완료 후 제어관리(노드 플로우) 실행 hook
+// 우선순위: 템플릿(template) > 정의(definition) > 요청(request) 직접 지정
+async function executeAfterApprovalFlow(
+  client: PoolClient,
+  requestId: number,
+  companyCode: string,
+  approvalReq: { target_table: string; target_record_id: string },
+): Promise<void> {
+  try {
+    const { rows: [reqData] } = await client.query(
+      `SELECT r.after_approval_flow_id, r.definition_id, r.template_id, r.title, r.requester_id
+       FROM approval_requests r WHERE r.request_id = $1`,
+      [requestId],
+    );
+
+    let flowId: number | null = null;
+
+    // 1순위: 템플릿에 연결된 제어관리 플로우
+    if (reqData?.template_id) {
+      const { rows: [tmpl] } = await client.query(
+        `SELECT after_approval_flow_id FROM approval_line_templates WHERE template_id = $1`,
+        [reqData.template_id],
+      );
+      flowId = tmpl?.after_approval_flow_id || null;
+    }
+
+    // 2순위: 정의(definition)에 연결된 제어관리 플로우 (fallback)
+    if (!flowId && reqData?.definition_id) {
+      const { rows: [def] } = await client.query(
+        `SELECT after_approval_flow_id FROM approval_definitions WHERE definition_id = $1`,
+        [reqData.definition_id],
+      );
+      flowId = def?.after_approval_flow_id || null;
+    }
+
+    // 3순위: 요청 자체에 직접 지정된 플로우
+    if (!flowId) {
+      flowId = reqData?.after_approval_flow_id || null;
+    }
+
+    if (!flowId) return;
+
+    // 3. 원본 레코드 데이터 조회
+    const safeTable = approvalReq.target_table.replace(/[^a-zA-Z0-9_]/g, "");
+    const { rows: [targetRecord] } = await client.query(
+      `SELECT * FROM "${safeTable}" WHERE id = $1`,
+      [approvalReq.target_record_id],
+    );
+
+    // 4. 노드 플로우 실행
+    console.log(`[제어관리] 결재 완료 후 플로우 #${flowId} 실행 (request_id=${requestId})`);
+    const result = await NodeFlowExecutionService.executeFlow(flowId, {
+      formData: targetRecord || {},
+      approvalInfo: {
+        requestId,
+        title: reqData.title,
+        requesterId: reqData.requester_id,
+        targetTable: approvalReq.target_table,
+        targetRecordId: approvalReq.target_record_id,
+      },
+      companyCode,
+      selectedRows: targetRecord ? [targetRecord] : [],
+    });
+
+    console.log(`[제어관리] 플로우 #${flowId} 실행 결과: ${result.success ? "성공" : "실패"} (${result.executionTime}ms)`);
+  } catch (err) {
+    // 제어관리 실패는 결재 승인 자체에 영향 주지 않음
+    console.error("[executeAfterApprovalFlow] 제어관리 실행 실패:", err);
+  }
+}
+
+async function activateNextStep(
+  client: PoolClient,
+  requestId: number,
+  currentStep: number,
+  totalSteps: number,
+  companyCode: string,
+  userId: string,
+  comment: string | null,
+): Promise<void> {
+  const nextStep = currentStep + 1;
+
+  if (nextStep > totalSteps) {
+    // 최종 승인 처리
+    await client.query(
+      `UPDATE approval_requests
+       SET status = CASE WHEN approval_type = 'post' THEN 'approved' ELSE 'approved' END,
+           is_post_approved = CASE WHEN approval_type = 'post' THEN true ELSE is_post_approved END,
+           post_approved_at = CASE WHEN approval_type = 'post' THEN NOW() ELSE post_approved_at END,
+           final_approver_id = $1, final_comment = $2, completed_at = NOW(), updated_at = NOW()
+       WHERE request_id = $3 AND company_code = $4`,
+      [userId, comment, requestId, companyCode]
+    );
+    await syncApprovalStatusToTarget(client, requestId, "approved", companyCode);
+    return;
+  }
+
+  // 다음 step의 결재 라인 조회 (FOR UPDATE로 동시성 방어)
+  const { rows: nextLines } = await client.query(
+    `SELECT * FROM approval_lines
+     WHERE request_id = $1 AND step_order = $2 AND company_code = $3
+     FOR UPDATE`,
+    [requestId, nextStep, companyCode]
+  );
+
+  if (nextLines.length === 0) {
+    // 다음 step이 비어있으면 최종 승인 처리
+    await client.query(
+      `UPDATE approval_requests
+       SET status = 'approved', final_approver_id = $1, final_comment = $2,
+           completed_at = NOW(), updated_at = NOW()
+       WHERE request_id = $3 AND company_code = $4`,
+      [userId, comment, requestId, companyCode]
+    );
+    await syncApprovalStatusToTarget(client, requestId, "approved", companyCode);
+    return;
+  }
+
+  const nextStepType = nextLines[0].step_type || "approval";
+
+  if (nextStepType === "notification") {
+    // 통보 단계: 자동 approved 처리 후 다음 step으로 재귀
+    for (const nl of nextLines) {
+      await client.query(
+        `UPDATE approval_lines SET status = 'approved', comment = '자동 통보 처리', processed_at = NOW()
+         WHERE line_id = $1 AND company_code = $2`,
+        [nl.line_id, companyCode]
+      );
+    }
+    await client.query(
+      `UPDATE approval_requests SET current_step = $1, updated_at = NOW()
+       WHERE request_id = $2 AND company_code = $3`,
+      [nextStep, requestId, companyCode]
+    );
+    // 재귀: 통보 다음 step 활성화
+    await activateNextStep(client, requestId, nextStep, totalSteps, companyCode, userId, comment);
+  } else {
+    // approval 또는 consensus: pending으로 전환
+    await client.query(
+      `UPDATE approval_lines SET status = 'pending'
+       WHERE request_id = $1 AND step_order = $2 AND company_code = $3`,
+      [requestId, nextStep, companyCode]
+    );
+    await client.query(
+      `UPDATE approval_requests SET current_step = $1, updated_at = NOW()
+       WHERE request_id = $2 AND company_code = $3`,
+      [nextStep, requestId, companyCode]
+    );
+  }
+}
+
 // ============================================================
 // 결재 요청 (Approval Requests) CRUD
 // ============================================================
@@ -483,9 +742,15 @@ export class ApprovalRequestController {
 
       const { status, target_table, target_record_id, requester_id, my_approvals, page = "1", limit = "20" } = req.query;
 
-      const conditions: string[] = ["r.company_code = $1"];
-      const params: any[] = [companyCode];
-      let idx = 2;
+      const conditions: string[] = [];
+      const params: any[] = [];
+      let idx = 1;
+
+      // SUPER_ADMIN은 전체 조회, 일반 회사는 자사 데이터만
+      if (companyCode !== "*") {
+        conditions.push(`r.company_code = $${idx++}`);
+        params.push(companyCode);
+      }
 
       if (status) {
         conditions.push(`r.status = $${idx++}`);
@@ -513,26 +778,31 @@ export class ApprovalRequestController {
       }
 
       const offset = (parseInt(page as string) - 1) * parseInt(limit as string);
+      const whereClause = conditions.length > 0 ? `WHERE ${conditions.join(" AND ")}` : "";
+
+      // countParams는 WHERE 조건 파라미터만 포함 (LIMIT/OFFSET 제외)
+      // my_approvals 파라미터도 포함된 후 복사해야 함
+      const countParams = [...params];
+      const [countRow] = await query<any>(
+        `SELECT COUNT(*) as total FROM approval_requests r ${whereClause}`,
+        countParams
+      );
+
+      // LIMIT/OFFSET 파라미터 인덱스를 미리 계산 (countParams 복사 후에 idx 증가)
+      const limitIdx = idx++;
+      const offsetIdx = idx++;
       params.push(parseInt(limit as string), offset);
 
       const rows = await query<any>(
         `SELECT r.*, d.definition_name
          FROM approval_requests r
          LEFT JOIN approval_definitions d ON r.definition_id = d.definition_id AND r.company_code = d.company_code
-         WHERE ${conditions.join(" AND ")}
+         ${whereClause}
          ORDER BY r.created_at DESC
-         LIMIT $${idx++} OFFSET $${idx++}`,
+         LIMIT $${limitIdx} OFFSET $${offsetIdx}`,
         params
       );
 
-      // 전체 건수 조회
-      const countParams = params.slice(0, params.length - 2);
-      const [countRow] = await query<any>(
-        `SELECT COUNT(*) as total FROM approval_requests r
-         WHERE ${conditions.join(" AND ")}`,
-        countParams
-      );
-
       return res.json({
         success: true,
         data: rows,
@@ -559,12 +829,18 @@ export class ApprovalRequestController {
       }
 
       const { id } = req.params;
+      // SUPER_ADMIN은 company_code 필터 없이 모든 요청 조회 가능
       const request = await queryOne<any>(
-        `SELECT r.*, d.definition_name
-         FROM approval_requests r
-         LEFT JOIN approval_definitions d ON r.definition_id = d.definition_id AND r.company_code = d.company_code
-         WHERE r.request_id = $1 AND r.company_code = $2`,
-        [id, companyCode]
+        companyCode === "*"
+          ? `SELECT r.*, d.definition_name
+             FROM approval_requests r
+             LEFT JOIN approval_definitions d ON r.definition_id = d.definition_id AND r.company_code = d.company_code
+             WHERE r.request_id = $1`
+          : `SELECT r.*, d.definition_name
+             FROM approval_requests r
+             LEFT JOIN approval_definitions d ON r.definition_id = d.definition_id AND r.company_code = d.company_code
+             WHERE r.request_id = $1 AND r.company_code = $2`,
+        companyCode === "*" ? [id] : [id, companyCode]
       );
 
       if (!request) {
@@ -572,8 +848,10 @@ export class ApprovalRequestController {
       }
 
       const lines = await query<any>(
-        "SELECT * FROM approval_lines WHERE request_id = $1 AND company_code = $2 ORDER BY step_order ASC",
-        [id, companyCode]
+        companyCode === "*"
+          ? "SELECT * FROM approval_lines WHERE request_id = $1 ORDER BY step_order ASC"
+          : "SELECT * FROM approval_lines WHERE request_id = $1 AND company_code = $2 ORDER BY step_order ASC",
+        companyCode === "*" ? [id] : [id, companyCode]
       );
 
       return res.json({ success: true, data: { ...request, lines } });
@@ -587,7 +865,7 @@ export class ApprovalRequestController {
     }
   }
 
-  // 결재 요청 생성 (결재 라인 자동 생성)
+  // 결재 요청 생성 (혼합형 결재선 지원 - self/escalation/consensus/post)
   static async createRequest(req: AuthenticatedRequest, res: Response) {
     try {
       const companyCode = req.user?.companyCode;
@@ -596,85 +874,238 @@ export class ApprovalRequestController {
       }
 
       const {
-        title, description, definition_id, target_table, target_record_id,
+        title, description, definition_id, template_id, target_table, target_record_id,
         target_record_data, screen_id, button_component_id,
-        approvers, // [{ approver_id, approver_name, approver_position, approver_dept, approver_label }]
-        approval_mode, // "sequential" | "parallel"
+        approvers,
+        approval_mode,
+        approval_type = "escalation",
       } = req.body;
 
       if (!title || !target_table) {
         return res.status(400).json({ success: false, message: "제목과 대상 테이블은 필수입니다." });
       }
 
-      if (!Array.isArray(approvers) || approvers.length === 0) {
-        return res.status(400).json({ success: false, message: "결재자를 1명 이상 지정해야 합니다." });
-      }
+      // target_record_id는 NOT NULL 컬럼이므로 빈 값은 기본값으로 대체
+      const safeTargetRecordId = target_record_id || "0";
 
       const userId = req.user?.userId || "system";
       const userName = req.user?.userName || "";
       const deptName = req.user?.deptName || "";
 
-      const isParallel = approval_mode === "parallel";
-      const totalSteps = approvers.length;
-
-      // approval_mode를 target_record_data에 병합 저장
+      // approval_mode를 target_record_data에 병합 저장 (하위호환)
       const mergedRecordData = {
         ...(target_record_data || {}),
         approval_mode: approval_mode || "sequential",
       };
 
+      // ========== 자기결재(전결) ==========
+      if (approval_type === "self") {
+        // definition_id가 있으면 allow_self_approval 체크
+        if (definition_id) {
+          const def = await queryOne<any>(
+            "SELECT allow_self_approval FROM approval_definitions WHERE definition_id = $1 AND company_code = $2",
+            [definition_id, companyCode]
+          );
+          if (def && !def.allow_self_approval) {
+            return res.status(400).json({ success: false, message: "해당 결재 유형은 자기결재(전결)를 허용하지 않습니다." });
+          }
+        }
+
+        let result: any;
+        await transaction(async (client) => {
+          const { rows: reqRows } = await client.query(
+            `INSERT INTO approval_requests (
+              title, description, definition_id, template_id, target_table, target_record_id,
+              target_record_data, status, current_step, total_steps, approval_type,
+              requester_id, requester_name, requester_dept,
+              screen_id, button_component_id, company_code,
+              final_approver_id, completed_at
+            ) VALUES ($1, $2, $3, $4, $5, $6, $7, 'approved', 1, 1, 'self',
+                      $8, $9, $10, $11, $12, $13, $8, NOW())
+            RETURNING *`,
+            [
+              title, description, definition_id, template_id || null, target_table, safeTargetRecordId,
+              JSON.stringify(mergedRecordData),
+              userId, userName, deptName,
+              screen_id, button_component_id, companyCode,
+            ]
+          );
+          result = reqRows[0];
+
+          // 본인을 결재자로 INSERT (이미 approved)
+          await client.query(
+            `INSERT INTO approval_lines (
+              request_id, step_order, approver_id, approver_name, approver_position,
+              approver_dept, approver_label, status, step_type, processed_at, company_code
+            ) VALUES ($1, 1, $2, $3, $4, $5, '자기결재', 'approved', 'approval', NOW(), $6)`,
+            [result.request_id, userId, userName, req.user?.positionName || null, deptName, companyCode]
+          );
+
+          await syncApprovalStatusToTarget(client, result.request_id, "approved", companyCode);
+        });
+
+        return res.status(201).json({ success: true, data: result, message: "자기결재(전결) 처리되었습니다." });
+      }
+
+      // ========== 그 외 유형: approvers 필수 검증 ==========
+      if (!Array.isArray(approvers) || approvers.length === 0) {
+        return res.status(400).json({ success: false, message: "결재자를 1명 이상 지정해야 합니다." });
+      }
+
+      // 각 approver에 step_type/step_order 할당 (혼합형 지원)
+      const hasExplicitStepType = approvers.some((a: any) => a.step_type);
+
+      interface NormalizedApprover {
+        approver_id: string;
+        approver_name: string | null;
+        approver_position: string | null;
+        approver_dept: string | null;
+        approver_label: string | null;
+        step_order: number;
+        step_type: string;
+      }
+
+      let normalizedApprovers: NormalizedApprover[];
+
+      if (approval_type === "consensus" && !hasExplicitStepType) {
+        // 단순 합의결재: 전원 step_order=1, step_type='consensus'
+        normalizedApprovers = approvers.map((a: any) => ({
+          approver_id: a.approver_id,
+          approver_name: a.approver_name || null,
+          approver_position: a.approver_position || null,
+          approver_dept: a.approver_dept || null,
+          approver_label: a.approver_label || "합의 결재",
+          step_order: 1,
+          step_type: "consensus",
+        }));
+      } else if (hasExplicitStepType) {
+        // 혼합형: 각 approver에 명시된 step_type/step_order 사용
+        normalizedApprovers = approvers.map((a: any, i: number) => ({
+          approver_id: a.approver_id,
+          approver_name: a.approver_name || null,
+          approver_position: a.approver_position || null,
+          approver_dept: a.approver_dept || null,
+          approver_label: a.approver_label || null,
+          step_order: a.step_order ?? (i + 1),
+          step_type: a.step_type || "approval",
+        }));
+      } else {
+        // escalation / post: 기본 sequential
+        normalizedApprovers = approvers.map((a: any, i: number) => ({
+          approver_id: a.approver_id,
+          approver_name: a.approver_name || null,
+          approver_position: a.approver_position || null,
+          approver_dept: a.approver_dept || null,
+          approver_label: a.approver_label || `${i + 1}차 결재`,
+          step_order: a.step_order ?? (i + 1),
+          step_type: "approval",
+        }));
+      }
+
+      // escalation 타입에서 같은 step_order에 2명 이상이면서 step_type이 approval인 경우 에러
+      const stepOrderGroups = new Map<number, NormalizedApprover[]>();
+      for (const a of normalizedApprovers) {
+        const group = stepOrderGroups.get(a.step_order) || [];
+        group.push(a);
+        stepOrderGroups.set(a.step_order, group);
+      }
+      for (const [stepOrder, group] of stepOrderGroups) {
+        if (group.length > 1) {
+          const allApproval = group.every(g => g.step_type === "approval");
+          if (allApproval) {
+            return res.status(400).json({
+              success: false,
+              message: `step_order ${stepOrder}에 approval 타입 결재자가 2명 이상입니다. consensus로 지정해주세요.`,
+            });
+          }
+        }
+      }
+
+      // total_steps = 고유한 step_order의 최대값
+      const uniqueStepOrders = [...new Set(normalizedApprovers.map(a => a.step_order))].sort((a, b) => a - b);
+      const totalSteps = Math.max(...uniqueStepOrders);
+
+      // 저장할 approval_type 결정 (혼합형은 escalation으로 저장)
+      const storedApprovalType = hasExplicitStepType ? "escalation" : approval_type;
+      const initialStatus = approval_type === "post" ? "post_pending" : "requested";
+
       let result: any;
       await transaction(async (client) => {
-        // 결재 요청 생성
         const { rows: reqRows } = await client.query(
           `INSERT INTO approval_requests (
-            title, description, definition_id, target_table, target_record_id,
-            target_record_data, status, current_step, total_steps,
+            title, description, definition_id, template_id, target_table, target_record_id,
+            target_record_data, status, current_step, total_steps, approval_type,
             requester_id, requester_name, requester_dept,
             screen_id, button_component_id, company_code
-          ) VALUES ($1, $2, $3, $4, $5, $6, 'requested', 1, $7, $8, $9, $10, $11, $12, $13)
+          ) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, 1, $9, $10, $11, $12, $13, $14, $15, $16)
           RETURNING *`,
           [
-            title, description, definition_id, target_table, target_record_id || null,
-            JSON.stringify(mergedRecordData),
-            totalSteps,
+            title, description, definition_id, template_id || null, target_table, safeTargetRecordId,
+            JSON.stringify(mergedRecordData), initialStatus, totalSteps, storedApprovalType,
             userId, userName, deptName,
             screen_id, button_component_id, companyCode,
           ]
         );
         result = reqRows[0];
 
-        // 결재 라인 생성
-        // 동시결재: 모든 결재자 pending (step_order는 고유값) / 다단결재: 첫 번째만 pending
-        for (let i = 0; i < approvers.length; i++) {
-          const approver = approvers[i];
-          const lineStatus = isParallel ? "pending" : (i === 0 ? "pending" : "waiting");
+        const firstStep = uniqueStepOrders[0];
+
+        for (const approver of normalizedApprovers) {
+          // 첫 번째 step의 결재자만 pending, 나머지는 waiting
+          let lineStatus: string;
+          if (approver.step_order === firstStep) {
+            lineStatus = "pending";
+          } else {
+            lineStatus = "waiting";
+          }
 
           await client.query(
             `INSERT INTO approval_lines (
               request_id, step_order, approver_id, approver_name, approver_position,
-              approver_dept, approver_label, status, company_code
-            ) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9)`,
+              approver_dept, approver_label, status, step_type, company_code
+            ) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10)`,
             [
               result.request_id,
-              i + 1,
+              approver.step_order,
               approver.approver_id,
-              approver.approver_name || null,
-              approver.approver_position || null,
-              approver.approver_dept || null,
-              approver.approver_label || (isParallel ? "동시 결재" : `${i + 1}차 결재`),
+              approver.approver_name,
+              approver.approver_position,
+              approver.approver_dept,
+              approver.approver_label,
               lineStatus,
+              approver.step_type,
               companyCode,
             ]
           );
         }
 
-        // 상태를 in_progress로 업데이트
-        await client.query(
-          "UPDATE approval_requests SET status = 'in_progress' WHERE request_id = $1",
-          [result.request_id]
-        );
-        result.status = "in_progress";
+        // 첫 번째 step이 notification이면 자동 통과 처리
+        const firstStepLines = normalizedApprovers.filter(a => a.step_order === firstStep);
+        const firstStepType = firstStepLines[0]?.step_type;
+
+        if (firstStepType === "notification") {
+          // notification은 자동 처리 → activateNextStep으로 재귀
+          for (const nl of firstStepLines) {
+            await client.query(
+              `UPDATE approval_lines SET status = 'approved', comment = '자동 통보 처리', processed_at = NOW()
+               WHERE request_id = $1 AND step_order = $2 AND approver_id = $3 AND company_code = $4`,
+              [result.request_id, nl.step_order, nl.approver_id, companyCode]
+            );
+          }
+          await activateNextStep(client, result.request_id, firstStep, totalSteps, companyCode, userId, null);
+        }
+
+        // status를 in_progress로 업데이트 (post_pending 제외)
+        if (approval_type !== "post") {
+          await client.query(
+            `UPDATE approval_requests SET status = 'in_progress' WHERE request_id = $1 AND company_code = $2`,
+            [result.request_id, companyCode]
+          );
+          result.status = "in_progress";
+          await syncApprovalStatusToTarget(client, result.request_id, "in_progress", companyCode);
+        } else {
+          await syncApprovalStatusToTarget(client, result.request_id, "post_pending", companyCode);
+        }
       });
 
       return res.status(201).json({ success: true, data: result, message: "결재 요청이 생성되었습니다." });
@@ -711,14 +1142,17 @@ export class ApprovalRequestController {
         return res.status(403).json({ success: false, message: "본인이 요청한 건만 회수할 수 있습니다." });
       }
 
-      if (!["requested", "in_progress"].includes(request.status)) {
+      if (!["requested", "in_progress", "post_pending"].includes(request.status)) {
         return res.status(400).json({ success: false, message: "이미 처리된 결재 요청은 회수할 수 없습니다." });
       }
 
-      await query<any>(
-        "UPDATE approval_requests SET status = 'cancelled', updated_at = NOW() WHERE request_id = $1 AND company_code = $2",
-        [id, companyCode]
-      );
+      await transaction(async (client) => {
+        await client.query(
+          "UPDATE approval_requests SET status = 'cancelled', updated_at = NOW() WHERE request_id = $1 AND company_code = $2",
+          [id, companyCode]
+        );
+        await syncApprovalStatusToTarget(client, Number(id), "cancelled", companyCode);
+      });
 
       return res.json({ success: true, message: "결재 요청이 회수되었습니다." });
     } catch (error) {
@@ -730,6 +1164,68 @@ export class ApprovalRequestController {
       });
     }
   }
+
+  // 후결 처리 엔드포인트
+  static async postApprove(req: AuthenticatedRequest, res: Response) {
+    try {
+      const companyCode = req.user?.companyCode;
+      const userId = req.user?.userId;
+      if (!companyCode || !userId) {
+        return res.status(401).json({ success: false, message: "인증 정보가 없습니다." });
+      }
+
+      const { id } = req.params;
+      const { comment } = req.body;
+
+      const request = await queryOne<any>(
+        "SELECT * FROM approval_requests WHERE request_id = $1 AND company_code = $2",
+        [id, companyCode]
+      );
+
+      if (!request) {
+        return res.status(404).json({ success: false, message: "결재 요청을 찾을 수 없습니다." });
+      }
+
+      if (request.approval_type !== "post") {
+        return res.status(400).json({ success: false, message: "후결 유형의 결재 요청만 후결 처리할 수 있습니다." });
+      }
+
+      if (request.is_post_approved) {
+        return res.status(400).json({ success: false, message: "이미 후결 처리된 요청입니다." });
+      }
+
+      // 결재선 전원 approved 확인
+      const [pendingCount] = await query<any>(
+        `SELECT COUNT(*) as cnt FROM approval_lines
+         WHERE request_id = $1 AND status NOT IN ('approved', 'skipped') AND company_code = $2`,
+        [id, companyCode]
+      );
+
+      if (parseInt(pendingCount?.cnt || "0") > 0) {
+        return res.status(400).json({ success: false, message: "모든 결재자의 승인이 완료되지 않았습니다." });
+      }
+
+      await transaction(async (client) => {
+        await client.query(
+          `UPDATE approval_requests
+           SET status = 'approved', is_post_approved = true, post_approved_at = NOW(),
+               final_approver_id = $1, final_comment = $2, completed_at = NOW(), updated_at = NOW()
+           WHERE request_id = $3 AND company_code = $4`,
+          [userId, comment || null, id, companyCode]
+        );
+        await syncApprovalStatusToTarget(client, Number(id), "approved", companyCode);
+      });
+
+      return res.json({ success: true, message: "후결 처리가 완료되었습니다." });
+    } catch (error) {
+      console.error("후결 처리 오류:", error);
+      return res.status(500).json({
+        success: false,
+        message: "후결 처리 중 오류가 발생했습니다.",
+        error: error instanceof Error ? error.message : "알 수 없는 오류",
+      });
+    }
+  }
 }
 
 // ============================================================
@@ -737,7 +1233,7 @@ export class ApprovalRequestController {
 // ============================================================
 
 export class ApprovalLineController {
-  // 결재 처리 (승인/반려)
+  // 결재 처리 (승인/반려) - FOR UPDATE 동시성 방어 + 대결 + step_type 분기
   static async processApproval(req: AuthenticatedRequest, res: Response) {
     try {
       const companyCode = req.user?.companyCode;
@@ -747,111 +1243,151 @@ export class ApprovalLineController {
       }
 
       const { lineId } = req.params;
-      const { action, comment } = req.body; // action: 'approved' | 'rejected'
+      const { action, comment, proxy_reason } = req.body;
 
       if (!["approved", "rejected"].includes(action)) {
         return res.status(400).json({ success: false, message: "액션은 approved 또는 rejected여야 합니다." });
       }
 
-      const line = await queryOne<any>(
-        "SELECT * FROM approval_lines WHERE line_id = $1 AND company_code = $2",
-        [lineId, companyCode]
-      );
-
-      if (!line) {
-        return res.status(404).json({ success: false, message: "결재 라인을 찾을 수 없습니다." });
-      }
-
-      if (line.approver_id !== userId) {
-        return res.status(403).json({ success: false, message: "본인이 결재자로 지정된 건만 처리할 수 있습니다." });
-      }
-
-      if (line.status !== "pending") {
-        return res.status(400).json({ success: false, message: "대기 중인 결재만 처리할 수 있습니다." });
-      }
-
       await transaction(async (client) => {
-        // 현재 라인 처리
+        // FOR UPDATE로 결재 라인 잠금
+        // super admin(*)은 모든 회사의 라인을 처리할 수 있음
+        const lineQuery = companyCode === "*"
+          ? `SELECT * FROM approval_lines WHERE line_id = $1 FOR UPDATE`
+          : `SELECT * FROM approval_lines WHERE line_id = $1 AND company_code IN ($2, '*') FOR UPDATE`;
+        const lineParams = companyCode === "*" ? [lineId] : [lineId, companyCode];
+        const { rows: [line] } = await client.query(lineQuery, lineParams);
+
+        if (!line) {
+          throw new ValidationError(404, "결재 라인을 찾을 수 없습니다.");
+        }
+
+        if (line.status !== "pending") {
+          throw new ValidationError(400, "대기 중인 결재만 처리할 수 있습니다.");
+        }
+
+        // 대결(proxy) 인증 로직
+        let proxyFor: string | null = null;
+        let proxyReasonVal: string | null = null;
+
+        if (line.approver_id !== userId) {
+          // super admin(company_code='*')은 모든 결재를 대리 처리 가능
+          if (companyCode === "*") {
+            proxyFor = line.approver_id;
+            proxyReasonVal = proxy_reason || "최고관리자 대리 처리";
+          } else {
+            const { rows: proxyRows } = await client.query(
+              `SELECT * FROM approval_proxy_settings
+               WHERE original_user_id = $1 AND proxy_user_id = $2
+               AND is_active = 'Y' AND start_date <= CURRENT_DATE AND end_date >= CURRENT_DATE
+               AND company_code = $3`,
+              [line.approver_id, userId, companyCode]
+            );
+            if (proxyRows.length === 0) {
+              throw new ValidationError(403, "본인이 결재자로 지정된 건만 처리할 수 있습니다.");
+            }
+            proxyFor = line.approver_id;
+            proxyReasonVal = proxy_reason || proxyRows[0].reason || "대결 처리";
+          }
+        }
+
+        // 현재 라인 처리 (proxy_for, proxy_reason 포함) - 라인의 company_code 기준
         await client.query(
-          `UPDATE approval_lines SET status = $1, comment = $2, processed_at = NOW()
-           WHERE line_id = $3`,
-          [action, comment || null, lineId]
+          `UPDATE approval_lines
+           SET status = $1, comment = $2, processed_at = NOW(),
+               proxy_for = $3, proxy_reason = $4
+           WHERE line_id = $5 AND company_code = $6`,
+          [action, comment || null, proxyFor, proxyReasonVal, lineId, line.company_code]
         );
 
-        const { rows: reqRows } = await client.query(
-          "SELECT * FROM approval_requests WHERE request_id = $1 AND company_code = $2",
-          [line.request_id, companyCode]
+        // 결재 요청 조회 (FOR UPDATE) - 라인의 company_code 기준
+        const { rows: [request] } = await client.query(
+          `SELECT * FROM approval_requests WHERE request_id = $1 AND company_code = $2 FOR UPDATE`,
+          [line.request_id, line.company_code]
         );
-        const request = reqRows[0];
 
         if (!request) return;
 
+        const lineCC = line.company_code;
+
         if (action === "rejected") {
           // 반려: 전체 요청 반려 처리
           await client.query(
             `UPDATE approval_requests SET status = 'rejected', final_approver_id = $1, final_comment = $2,
              completed_at = NOW(), updated_at = NOW()
-             WHERE request_id = $3`,
-            [userId, comment || null, line.request_id]
+             WHERE request_id = $3 AND company_code = $4`,
+            [userId, comment || null, line.request_id, lineCC]
           );
           // 남은 pending/waiting 라인도 skipped 처리
           await client.query(
             `UPDATE approval_lines SET status = 'skipped'
-             WHERE request_id = $1 AND status IN ('pending', 'waiting') AND line_id != $2`,
-            [line.request_id, lineId]
+             WHERE request_id = $1 AND status IN ('pending', 'waiting') AND line_id != $2 AND company_code = $3`,
+            [line.request_id, lineId, lineCC]
           );
+          await syncApprovalStatusToTarget(client, line.request_id, "rejected", lineCC);
         } else {
-          // 승인: 동시결재 vs 다단결재 분기
-          const recordData = request.target_record_data;
-          const isParallelMode = recordData?.approval_mode === "parallel";
+          // 승인 처리: step_type 기반 분기
+          const currentStepType = line.step_type || "approval";
 
-          if (isParallelMode) {
-            // 동시결재: 남은 pending 라인이 있는지 확인
+          // 기존 isParallelMode 하위호환 (step_type이 없는 기존 데이터)
+          const recordData = request.target_record_data;
+          const isLegacyParallel = recordData?.approval_mode === "parallel" && !line.step_type;
+
+          if (isLegacyParallel) {
+            // 레거시 동시결재 (하위호환)
             const { rows: remainingLines } = await client.query(
               `SELECT COUNT(*) as cnt FROM approval_lines
                WHERE request_id = $1 AND status = 'pending' AND line_id != $2 AND company_code = $3`,
-              [line.request_id, lineId, companyCode]
+              [line.request_id, lineId, lineCC]
             );
             const remaining = parseInt(remainingLines[0]?.cnt || "0");
 
             if (remaining === 0) {
-              // 모든 동시 결재자 승인 완료 → 최종 승인
               await client.query(
                 `UPDATE approval_requests SET status = 'approved', final_approver_id = $1, final_comment = $2,
                  completed_at = NOW(), updated_at = NOW()
-                 WHERE request_id = $3`,
-                [userId, comment || null, line.request_id]
+                 WHERE request_id = $3 AND company_code = $4`,
+                [userId, comment || null, line.request_id, lineCC]
               );
+              await syncApprovalStatusToTarget(client, line.request_id, "approved", lineCC);
             }
-            // 아직 남은 결재자 있으면 대기 (상태 변경 없음)
-          } else {
-            // 다단결재: 다음 단계 활성화 또는 최종 완료
-            const nextStep = line.step_order + 1;
+          } else if (currentStepType === "consensus") {
+            // 합의결재: 같은 step의 모든 결재자 승인 확인
+            const { rows: remaining } = await client.query(
+              `SELECT COUNT(*) as cnt FROM approval_lines
+               WHERE request_id = $1 AND step_order = $2
+               AND status NOT IN ('approved', 'skipped')
+               AND line_id != $3 AND company_code = $4`,
+              [line.request_id, line.step_order, lineId, lineCC]
+            );
 
-            if (nextStep <= request.total_steps) {
-              await client.query(
-                `UPDATE approval_lines SET status = 'pending'
-                 WHERE request_id = $1 AND step_order = $2 AND company_code = $3`,
-                [line.request_id, nextStep, companyCode]
-              );
-              await client.query(
-                `UPDATE approval_requests SET current_step = $1, updated_at = NOW() WHERE request_id = $2`,
-                [nextStep, line.request_id]
-              );
-            } else {
-              await client.query(
-                `UPDATE approval_requests SET status = 'approved', final_approver_id = $1, final_comment = $2,
-                 completed_at = NOW(), updated_at = NOW()
-                 WHERE request_id = $3`,
-                [userId, comment || null, line.request_id]
+            if (parseInt(remaining[0].cnt) === 0) {
+              // 합의 완료 → 다음 step 활성화
+              await activateNextStep(
+                client, line.request_id, line.step_order, request.total_steps,
+                lineCC, userId, comment || null,
               );
             }
+          } else {
+            // approval (기존 sequential 로직): 다음 step 활성화
+            await activateNextStep(
+              client, line.request_id, line.step_order, request.total_steps,
+              lineCC, userId, comment || null,
+            );
           }
         }
       });
 
       return res.json({ success: true, message: action === "approved" ? "승인 처리되었습니다." : "반려 처리되었습니다." });
     } catch (error) {
+      // ValidationError는 트랜잭션이 rollback된 후 적절한 HTTP 상태코드로 응답
+      if (error instanceof Error && error.name === "ValidationError") {
+        const validationErr = error as any;
+        return res.status(validationErr.statusCode).json({
+          success: false,
+          message: validationErr.message,
+        });
+      }
       console.error("결재 처리 오류:", error);
       return res.status(500).json({
         success: false,
@@ -874,7 +1410,7 @@ export class ApprovalLineController {
         `SELECT l.*, r.title, r.target_table, r.target_record_id, r.requester_name, r.requester_dept, r.created_at as request_created_at
          FROM approval_lines l
          JOIN approval_requests r ON l.request_id = r.request_id AND l.company_code = r.company_code
-         WHERE l.approver_id = $1 AND l.status = 'pending' AND l.company_code = $2
+         WHERE l.approver_id = $1 AND l.status = 'pending' AND l.company_code IN ($2, '*')
          ORDER BY r.created_at ASC`,
         [userId, companyCode]
       );
@@ -890,3 +1426,4 @@ export class ApprovalLineController {
     }
   }
 }
+
diff --git a/backend-node/src/controllers/approvalProxyController.ts b/backend-node/src/controllers/approvalProxyController.ts
new file mode 100644
index 00000000..5788c7bf
--- /dev/null
+++ b/backend-node/src/controllers/approvalProxyController.ts
@@ -0,0 +1,212 @@
+import { Response } from "express";
+import { AuthenticatedRequest } from "../types/auth";
+import { query, queryOne } from "../database/db";
+
+// ============================================================
+// 대결 위임 설정 (Approval Proxy Settings) CRUD
+// ============================================================
+
+export class ApprovalProxyController {
+  // 대결 위임 목록 조회 (user_info JOIN으로 이름/부서 포함)
+  static async getProxySettings(req: AuthenticatedRequest, res: Response) {
+    try {
+      const companyCode = req.user?.companyCode;
+      if (!companyCode) {
+        return res.status(401).json({ success: false, message: "인증 정보가 없습니다." });
+      }
+
+      const rows = await query<any>(
+        `SELECT ps.*,
+                u1.user_name AS original_user_name, u1.dept_name AS original_dept_name,
+                u2.user_name AS proxy_user_name, u2.dept_name AS proxy_dept_name
+         FROM approval_proxy_settings ps
+         LEFT JOIN user_info u1 ON ps.original_user_id = u1.user_id AND ps.company_code = u1.company_code
+         LEFT JOIN user_info u2 ON ps.proxy_user_id = u2.user_id AND ps.company_code = u2.company_code
+         WHERE ps.company_code = $1
+         ORDER BY ps.created_at DESC`,
+        [companyCode]
+      );
+
+      return res.json({ success: true, data: rows });
+    } catch (error) {
+      console.error("대결 위임 목록 조회 오류:", error);
+      return res.status(500).json({
+        success: false,
+        message: "대결 위임 목록 조회 중 오류가 발생했습니다.",
+        error: error instanceof Error ? error.message : "알 수 없는 오류",
+      });
+    }
+  }
+
+  // 대결 위임 생성 (기간 중복 체크 포함)
+  static async createProxySetting(req: AuthenticatedRequest, res: Response) {
+    try {
+      const companyCode = req.user?.companyCode;
+      if (!companyCode) {
+        return res.status(401).json({ success: false, message: "인증 정보가 없습니다." });
+      }
+
+      const { original_user_id, proxy_user_id, start_date, end_date, reason, is_active = "Y" } = req.body;
+
+      if (!original_user_id || !proxy_user_id) {
+        return res.status(400).json({ success: false, message: "위임자와 대결자는 필수입니다." });
+      }
+      if (!start_date || !end_date) {
+        return res.status(400).json({ success: false, message: "시작일과 종료일은 필수입니다." });
+      }
+      if (original_user_id === proxy_user_id) {
+        return res.status(400).json({ success: false, message: "위임자와 대결자가 동일할 수 없습니다." });
+      }
+
+      // 같은 기간 중복 체크 (daterange 오버랩)
+      const overlap = await queryOne<any>(
+        `SELECT COUNT(*) AS cnt FROM approval_proxy_settings
+         WHERE original_user_id = $1 AND is_active = 'Y'
+         AND daterange(start_date, end_date, '[]') && daterange($2::date, $3::date, '[]')
+         AND company_code = $4`,
+        [original_user_id, start_date, end_date, companyCode]
+      );
+
+      if (overlap && parseInt(overlap.cnt) > 0) {
+        return res.status(400).json({ success: false, message: "해당 기간에 이미 대결 설정이 존재합니다." });
+      }
+
+      const [row] = await query<any>(
+        `INSERT INTO approval_proxy_settings
+         (original_user_id, proxy_user_id, start_date, end_date, reason, is_active, company_code)
+         VALUES ($1, $2, $3, $4, $5, $6, $7)
+         RETURNING *`,
+        [original_user_id, proxy_user_id, start_date, end_date, reason || null, is_active, companyCode]
+      );
+
+      return res.status(201).json({ success: true, data: row, message: "대결 위임이 생성되었습니다." });
+    } catch (error) {
+      console.error("대결 위임 생성 오류:", error);
+      return res.status(500).json({
+        success: false,
+        message: "대결 위임 생성 중 오류가 발생했습니다.",
+        error: error instanceof Error ? error.message : "알 수 없는 오류",
+      });
+    }
+  }
+
+  // 대결 위임 수정
+  static async updateProxySetting(req: AuthenticatedRequest, res: Response) {
+    try {
+      const companyCode = req.user?.companyCode;
+      if (!companyCode) {
+        return res.status(401).json({ success: false, message: "인증 정보가 없습니다." });
+      }
+
+      const { id } = req.params;
+      const existing = await queryOne<any>(
+        "SELECT id FROM approval_proxy_settings WHERE id = $1 AND company_code = $2",
+        [id, companyCode]
+      );
+
+      if (!existing) {
+        return res.status(404).json({ success: false, message: "대결 위임 설정을 찾을 수 없습니다." });
+      }
+
+      const { proxy_user_id, start_date, end_date, reason, is_active } = req.body;
+
+      const fields: string[] = [];
+      const params: any[] = [];
+      let idx = 1;
+
+      if (proxy_user_id !== undefined) { fields.push(`proxy_user_id = $${idx++}`); params.push(proxy_user_id); }
+      if (start_date !== undefined) { fields.push(`start_date = $${idx++}`); params.push(start_date); }
+      if (end_date !== undefined) { fields.push(`end_date = $${idx++}`); params.push(end_date); }
+      if (reason !== undefined) { fields.push(`reason = $${idx++}`); params.push(reason); }
+      if (is_active !== undefined) { fields.push(`is_active = $${idx++}`); params.push(is_active); }
+
+      if (fields.length === 0) {
+        return res.status(400).json({ success: false, message: "수정할 필드가 없습니다." });
+      }
+
+      fields.push(`updated_at = NOW()`);
+      params.push(id, companyCode);
+
+      const [row] = await query<any>(
+        `UPDATE approval_proxy_settings SET ${fields.join(", ")}
+         WHERE id = $${idx++} AND company_code = $${idx++}
+         RETURNING *`,
+        params
+      );
+
+      return res.json({ success: true, data: row, message: "대결 위임이 수정되었습니다." });
+    } catch (error) {
+      console.error("대결 위임 수정 오류:", error);
+      return res.status(500).json({
+        success: false,
+        message: "대결 위임 수정 중 오류가 발생했습니다.",
+        error: error instanceof Error ? error.message : "알 수 없는 오류",
+      });
+    }
+  }
+
+  // 대결 위임 삭제
+  static async deleteProxySetting(req: AuthenticatedRequest, res: Response) {
+    try {
+      const companyCode = req.user?.companyCode;
+      if (!companyCode) {
+        return res.status(401).json({ success: false, message: "인증 정보가 없습니다." });
+      }
+
+      const { id } = req.params;
+
+      const result = await query<any>(
+        "DELETE FROM approval_proxy_settings WHERE id = $1 AND company_code = $2 RETURNING id",
+        [id, companyCode]
+      );
+
+      if (result.length === 0) {
+        return res.status(404).json({ success: false, message: "대결 위임 설정을 찾을 수 없습니다." });
+      }
+
+      return res.json({ success: true, message: "대결 위임이 삭제되었습니다." });
+    } catch (error) {
+      console.error("대결 위임 삭제 오류:", error);
+      return res.status(500).json({
+        success: false,
+        message: "대결 위임 삭제 중 오류가 발생했습니다.",
+        error: error instanceof Error ? error.message : "알 수 없는 오류",
+      });
+    }
+  }
+
+  // 특정 사용자의 현재 활성 대결자 조회
+  static async checkActiveProxy(req: AuthenticatedRequest, res: Response) {
+    try {
+      const companyCode = req.user?.companyCode;
+      if (!companyCode) {
+        return res.status(401).json({ success: false, message: "인증 정보가 없습니다." });
+      }
+
+      const { userId } = req.params;
+
+      if (!userId) {
+        return res.status(400).json({ success: false, message: "userId 파라미터는 필수입니다." });
+      }
+
+      const rows = await query<any>(
+        `SELECT ps.*, u.user_name AS proxy_user_name
+         FROM approval_proxy_settings ps
+         LEFT JOIN user_info u ON ps.proxy_user_id = u.user_id AND ps.company_code = u.company_code
+         WHERE ps.original_user_id = $1 AND ps.is_active = 'Y'
+         AND ps.start_date <= CURRENT_DATE AND ps.end_date >= CURRENT_DATE
+         AND ps.company_code = $2`,
+        [userId, companyCode]
+      );
+
+      return res.json({ success: true, data: rows });
+    } catch (error) {
+      console.error("활성 대결자 조회 오류:", error);
+      return res.status(500).json({
+        success: false,
+        message: "활성 대결자 조회 중 오류가 발생했습니다.",
+        error: error instanceof Error ? error.message : "알 수 없는 오류",
+      });
+    }
+  }
+}
diff --git a/backend-node/src/controllers/authController.ts b/backend-node/src/controllers/authController.ts
index ebf3e8f5..2bb72876 100644
--- a/backend-node/src/controllers/authController.ts
+++ b/backend-node/src/controllers/authController.ts
@@ -6,6 +6,7 @@ import { AuthService } from "../services/authService";
 import { JwtUtils } from "../utils/jwtUtils";
 import { LoginRequest, UserInfo, ApiResponse, PersonBean } from "../types/auth";
 import { logger } from "../utils/logger";
+import { sendSmartFactoryLog } from "../utils/smartFactoryLog";
 
 export class AuthController {
   /**
@@ -86,13 +87,20 @@ export class AuthController {
           logger.warn("메뉴 조회 중 오류 발생 (무시하고 계속):", menuError);
         }
 
+        // 스마트공장 활용 로그 전송 (비동기, 응답 블로킹 안 함)
+        sendSmartFactoryLog({
+          userId: userInfo.userId,
+          remoteAddr,
+          useType: "접속",
+        }).catch(() => {});
+
         res.status(200).json({
           success: true,
           message: "로그인 성공",
           data: {
             userInfo,
             token: loginResult.token,
-            firstMenuPath, // 첫 번째 접근 가능한 메뉴 경로 추가
+            firstMenuPath,
           },
         });
       } else {
diff --git a/backend-node/src/controllers/dataflowExecutionController.ts b/backend-node/src/controllers/dataflowExecutionController.ts
index 338fa628..71eb2211 100644
--- a/backend-node/src/controllers/dataflowExecutionController.ts
+++ b/backend-node/src/controllers/dataflowExecutionController.ts
@@ -8,6 +8,7 @@ import { Request, Response } from "express";
 import { AuthenticatedRequest } from "../types/auth";
 import { query } from "../database/db";
 import logger from "../utils/logger";
+import { TableManagementService } from "../services/tableManagementService";
 
 /**
  * 데이터 액션 실행
@@ -81,6 +82,19 @@ async function executeMainDatabaseAction(
       company_code: companyCode,
     };
 
+    // UNIQUE 제약조건 검증 (INSERT/UPDATE/UPSERT 전)
+    if (["insert", "update", "upsert"].includes(actionType.toLowerCase())) {
+      const tms = new TableManagementService();
+      const uniqueViolations = await tms.validateUniqueConstraints(
+        tableName,
+        dataWithCompany,
+        companyCode
+      );
+      if (uniqueViolations.length > 0) {
+        throw new Error(`중복된 값이 존재합니다: ${uniqueViolations.join(", ")}`);
+      }
+    }
+
     switch (actionType.toLowerCase()) {
       case "insert":
         return await executeInsert(tableName, dataWithCompany);
diff --git a/backend-node/src/controllers/dynamicFormController.ts b/backend-node/src/controllers/dynamicFormController.ts
index 48b55d18..31c11638 100644
--- a/backend-node/src/controllers/dynamicFormController.ts
+++ b/backend-node/src/controllers/dynamicFormController.ts
@@ -1,7 +1,9 @@
 import { Response } from "express";
 import { dynamicFormService } from "../services/dynamicFormService";
 import { enhancedDynamicFormService } from "../services/enhancedDynamicFormService";
+import { TableManagementService } from "../services/tableManagementService";
 import { AuthenticatedRequest } from "../types/auth";
+import { formatPgError } from "../utils/pgErrorUtil";
 
 // 폼 데이터 저장 (기존 버전 - 레거시 지원)
 export const saveFormData = async (
@@ -47,6 +49,21 @@ export const saveFormData = async (
       formDataWithMeta.company_code = companyCode;
     }
 
+    // UNIQUE 제약조건 검증 (INSERT 전)
+    const tms = new TableManagementService();
+    const uniqueViolations = await tms.validateUniqueConstraints(
+      tableName,
+      formDataWithMeta,
+      companyCode || "*"
+    );
+    if (uniqueViolations.length > 0) {
+      res.status(400).json({
+        success: false,
+        message: `중복된 값이 존재합니다: ${uniqueViolations.join(", ")}`,
+      });
+      return;
+    }
+
     // 클라이언트 IP 주소 추출
     const ipAddress =
       req.ip ||
@@ -68,9 +85,12 @@ export const saveFormData = async (
     });
   } catch (error: any) {
     console.error("❌ 폼 데이터 저장 실패:", error);
-    res.status(500).json({
+    const { companyCode } = req.user as any;
+    const friendlyMsg = await formatPgError(error, companyCode);
+    const statusCode = error.code?.startsWith("23") ? 400 : 500;
+    res.status(statusCode).json({
       success: false,
-      message: error.message || "데이터 저장에 실패했습니다.",
+      message: friendlyMsg,
     });
   }
 };
@@ -108,6 +128,21 @@ export const saveFormDataEnhanced = async (
       formDataWithMeta.company_code = companyCode;
     }
 
+    // UNIQUE 제약조건 검증 (INSERT 전)
+    const tmsEnhanced = new TableManagementService();
+    const uniqueViolations = await tmsEnhanced.validateUniqueConstraints(
+      tableName,
+      formDataWithMeta,
+      companyCode || "*"
+    );
+    if (uniqueViolations.length > 0) {
+      res.status(400).json({
+        success: false,
+        message: `중복된 값이 존재합니다: ${uniqueViolations.join(", ")}`,
+      });
+      return;
+    }
+
     // 개선된 서비스 사용
     const result = await enhancedDynamicFormService.saveFormData(
       screenId,
@@ -118,9 +153,12 @@ export const saveFormDataEnhanced = async (
     res.json(result);
   } catch (error: any) {
     console.error("❌ 개선된 폼 데이터 저장 실패:", error);
-    res.status(500).json({
+    const { companyCode } = req.user as any;
+    const friendlyMsg = await formatPgError(error, companyCode);
+    const statusCode = error.code?.startsWith("23") ? 400 : 500;
+    res.status(statusCode).json({
       success: false,
-      message: error.message || "데이터 저장에 실패했습니다.",
+      message: friendlyMsg,
     });
   }
 };
@@ -146,12 +184,28 @@ export const updateFormData = async (
     const formDataWithMeta = {
       ...data,
       updated_by: userId,
-      writer: data.writer || userId, // ✅ writer가 없으면 userId로 설정
+      writer: data.writer || userId,
       updated_at: new Date(),
     };
 
+    // UNIQUE 제약조건 검증 (UPDATE 시 자기 자신 제외)
+    const tmsUpdate = new TableManagementService();
+    const uniqueViolations = await tmsUpdate.validateUniqueConstraints(
+      tableName,
+      formDataWithMeta,
+      companyCode || "*",
+      id
+    );
+    if (uniqueViolations.length > 0) {
+      res.status(400).json({
+        success: false,
+        message: `중복된 값이 존재합니다: ${uniqueViolations.join(", ")}`,
+      });
+      return;
+    }
+
     const result = await dynamicFormService.updateFormData(
-      id, // parseInt 제거 - 문자열 ID 지원
+      id,
       tableName,
       formDataWithMeta
     );
@@ -163,9 +217,12 @@ export const updateFormData = async (
     });
   } catch (error: any) {
     console.error("❌ 폼 데이터 업데이트 실패:", error);
-    res.status(500).json({
+    const { companyCode } = req.user as any;
+    const friendlyMsg = await formatPgError(error, companyCode);
+    const statusCode = error.code?.startsWith("23") ? 400 : 500;
+    res.status(statusCode).json({
       success: false,
-      message: error.message || "데이터 업데이트에 실패했습니다.",
+      message: friendlyMsg,
     });
   }
 };
@@ -199,11 +256,27 @@ export const updateFormDataPartial = async (
     const newDataWithMeta = {
       ...newData,
       updated_by: userId,
-      writer: newData.writer || userId, // ✅ writer가 없으면 userId로 설정
+      writer: newData.writer || userId,
     };
 
+    // UNIQUE 제약조건 검증 (부분 UPDATE 시 자기 자신 제외)
+    const tmsPartial = new TableManagementService();
+    const uniqueViolations = await tmsPartial.validateUniqueConstraints(
+      tableName,
+      newDataWithMeta,
+      companyCode || "*",
+      id
+    );
+    if (uniqueViolations.length > 0) {
+      res.status(400).json({
+        success: false,
+        message: `중복된 값이 존재합니다: ${uniqueViolations.join(", ")}`,
+      });
+      return;
+    }
+
     const result = await dynamicFormService.updateFormDataPartial(
-      id, // 🔧 parseInt 제거 - UUID 문자열도 지원
+      id,
       tableName,
       originalData,
       newDataWithMeta
@@ -216,9 +289,12 @@ export const updateFormDataPartial = async (
     });
   } catch (error: any) {
     console.error("❌ 부분 업데이트 실패:", error);
-    res.status(500).json({
+    const { companyCode } = req.user as any;
+    const friendlyMsg = await formatPgError(error, companyCode);
+    const statusCode = error.code?.startsWith("23") ? 400 : 500;
+    res.status(statusCode).json({
       success: false,
-      message: error.message || "부분 업데이트에 실패했습니다.",
+      message: friendlyMsg,
     });
   }
 };
diff --git a/backend-node/src/controllers/entitySearchController.ts b/backend-node/src/controllers/entitySearchController.ts
index 62fc8bbe..fa70de66 100644
--- a/backend-node/src/controllers/entitySearchController.ts
+++ b/backend-node/src/controllers/entitySearchController.ts
@@ -181,16 +181,87 @@ export async function getDistinctColumnValues(req: AuthenticatedRequest, res: Re
       ? `WHERE ${whereConditions.join(" AND ")}`
       : "";
 
-    // DISTINCT 쿼리 실행
-    const query = `
+    // 1단계: DISTINCT 값 조회
+    const distinctQuery = `
       SELECT DISTINCT "${columnName}" as value, "${effectiveLabelColumn}" as label
       FROM "${tableName}"
       ${whereClause}
       ORDER BY "${effectiveLabelColumn}" ASC
       LIMIT 500
     `;
+    const result = await pool.query(distinctQuery, params);
 
-    const result = await pool.query(query, params);
+    // 2단계: 카테고리/코드 라벨 변환 (값이 있을 때만)
+    if (result.rows.length > 0) {
+      const rawValues = result.rows.map((r: any) => r.value);
+      const labelMap: Record<string, string> = {};
+
+      // category_values에서 라벨 조회
+      try {
+        const cvCompanyCondition = companyCode !== "*"
+          ? `AND (company_code = $4 OR company_code = '*')`
+          : "";
+        const cvParams = companyCode !== "*"
+          ? [tableName, columnName, rawValues, companyCode]
+          : [tableName, columnName, rawValues];
+
+        const cvResult = await pool.query(
+          `SELECT value_code, value_label FROM category_values
+           WHERE table_name = $1 AND column_name = $2
+           AND value_code = ANY($3) AND is_active = true
+           ${cvCompanyCondition}`,
+          cvParams
+        );
+        cvResult.rows.forEach((r: any) => {
+          labelMap[r.value_code] = r.value_label;
+        });
+      } catch (e) {
+        // category_values 조회 실패 시 무시
+      }
+
+      // code_info에서 라벨 조회 (code_category 기반)
+      try {
+        const ttcResult = await pool.query(
+          `SELECT code_category FROM table_type_columns
+           WHERE table_name = $1 AND column_name = $2 AND code_category IS NOT NULL
+           LIMIT 1`,
+          [tableName, columnName]
+        );
+        const codeCategory = ttcResult.rows[0]?.code_category;
+
+        if (codeCategory) {
+          const ciCompanyCondition = companyCode !== "*"
+            ? `AND (company_code = $3 OR company_code = '*')`
+            : "";
+          const ciParams = companyCode !== "*"
+            ? [codeCategory, rawValues, companyCode]
+            : [codeCategory, rawValues];
+
+          const ciResult = await pool.query(
+            `SELECT code_value, code_name FROM code_info
+             WHERE code_category = $1 AND code_value = ANY($2) AND is_active = 'Y'
+             ${ciCompanyCondition}`,
+            ciParams
+          );
+          ciResult.rows.forEach((r: any) => {
+            if (!labelMap[r.code_value]) {
+              labelMap[r.code_value] = r.code_name;
+            }
+          });
+        }
+      } catch (e) {
+        // code_info 조회 실패 시 무시
+      }
+
+      // 라벨 매핑 적용
+      if (Object.keys(labelMap).length > 0) {
+        result.rows.forEach((row: any) => {
+          if (labelMap[row.value]) {
+            row.label = labelMap[row.value];
+          }
+        });
+      }
+    }
 
     logger.info("컬럼 DISTINCT 값 조회 성공", {
       tableName,
diff --git a/backend-node/src/controllers/systemNoticeController.ts b/backend-node/src/controllers/systemNoticeController.ts
new file mode 100644
index 00000000..9a00a4f0
--- /dev/null
+++ b/backend-node/src/controllers/systemNoticeController.ts
@@ -0,0 +1,275 @@
+import { Response } from "express";
+import { AuthenticatedRequest } from "../types/auth";
+import { logger } from "../utils/logger";
+import { query } from "../database/db";
+
+/**
+ * GET /api/system-notices
+ * 공지사항 목록 조회
+ * - 최고 관리자(*): 전체 조회
+ * - 일반 회사: 자신의 company_code 데이터만 조회
+ * - is_active 필터 옵션 지원
+ */
+export const getSystemNotices = async (
+  req: AuthenticatedRequest,
+  res: Response
+): Promise<void> => {
+  try {
+    const companyCode = req.user!.companyCode;
+    const { is_active } = req.query;
+
+    logger.info("공지사항 목록 조회 요청", { companyCode, is_active });
+
+    const conditions: string[] = [];
+    const params: any[] = [];
+    let paramIndex = 1;
+
+    // 최고 관리자가 아닌 경우 company_code 필터링
+    if (companyCode !== "*") {
+      conditions.push(`company_code = $${paramIndex}`);
+      params.push(companyCode);
+      paramIndex++;
+    }
+
+    // is_active 필터 (true/false 문자열 처리)
+    if (is_active !== undefined && is_active !== "") {
+      const activeValue = is_active === "true" || is_active === "1";
+      conditions.push(`is_active = $${paramIndex}`);
+      params.push(activeValue);
+      paramIndex++;
+    }
+
+    const whereClause =
+      conditions.length > 0 ? `WHERE ${conditions.join(" AND ")}` : "";
+
+    const rows = await query<any>(
+      `SELECT
+        id,
+        company_code,
+        title,
+        content,
+        is_active,
+        created_by,
+        created_at,
+        updated_at
+      FROM system_notice
+      ${whereClause}
+      ORDER BY created_at DESC`,
+      params
+    );
+
+    logger.info("공지사항 목록 조회 성공", {
+      companyCode,
+      count: rows.length,
+    });
+
+    res.status(200).json({
+      success: true,
+      data: rows,
+      total: rows.length,
+    });
+  } catch (error) {
+    logger.error("공지사항 목록 조회 실패", { error });
+    res.status(500).json({
+      success: false,
+      message: "공지사항 목록 조회 중 오류가 발생했습니다.",
+      error: error instanceof Error ? error.message : "Unknown error",
+    });
+  }
+};
+
+/**
+ * POST /api/system-notices
+ * 공지사항 등록
+ * - company_code는 req.user.companyCode에서 자동 추출 (클라이언트 입력 신뢰 금지)
+ */
+export const createSystemNotice = async (
+  req: AuthenticatedRequest,
+  res: Response
+): Promise<void> => {
+  try {
+    const companyCode = req.user!.companyCode;
+    const userId = req.user!.userId;
+    const { title, content, is_active = true } = req.body;
+
+    logger.info("공지사항 등록 요청", { companyCode, userId, title });
+
+    if (!title || !title.trim()) {
+      res.status(400).json({
+        success: false,
+        message: "제목을 입력해주세요.",
+      });
+      return;
+    }
+
+    if (!content || !content.trim()) {
+      res.status(400).json({
+        success: false,
+        message: "내용을 입력해주세요.",
+      });
+      return;
+    }
+
+    const [created] = await query<any>(
+      `INSERT INTO system_notice (company_code, title, content, is_active, created_by)
+       VALUES ($1, $2, $3, $4, $5)
+       RETURNING *`,
+      [companyCode, title.trim(), content.trim(), is_active, userId]
+    );
+
+    logger.info("공지사항 등록 성공", {
+      id: created.id,
+      companyCode,
+      title: created.title,
+    });
+
+    res.status(201).json({
+      success: true,
+      data: created,
+      message: "공지사항이 등록되었습니다.",
+    });
+  } catch (error) {
+    logger.error("공지사항 등록 실패", { error });
+    res.status(500).json({
+      success: false,
+      message: "공지사항 등록 중 오류가 발생했습니다.",
+      error: error instanceof Error ? error.message : "Unknown error",
+    });
+  }
+};
+
+/**
+ * PUT /api/system-notices/:id
+ * 공지사항 수정
+ * - WHERE id=$1 AND company_code=$2 로 타 회사 데이터 수정 차단
+ * - 최고 관리자는 company_code 조건 없이 id만으로 수정 가능
+ */
+export const updateSystemNotice = async (
+  req: AuthenticatedRequest,
+  res: Response
+): Promise<void> => {
+  try {
+    const companyCode = req.user!.companyCode;
+    const { id } = req.params;
+    const { title, content, is_active } = req.body;
+
+    logger.info("공지사항 수정 요청", { id, companyCode });
+
+    if (!title || !title.trim()) {
+      res.status(400).json({
+        success: false,
+        message: "제목을 입력해주세요.",
+      });
+      return;
+    }
+
+    if (!content || !content.trim()) {
+      res.status(400).json({
+        success: false,
+        message: "내용을 입력해주세요.",
+      });
+      return;
+    }
+
+    let result: any[];
+
+    if (companyCode === "*") {
+      // 최고 관리자: id만으로 수정
+      result = await query<any>(
+        `UPDATE system_notice
+         SET title = $1, content = $2, is_active = $3, updated_at = NOW()
+         WHERE id = $4
+         RETURNING *`,
+        [title.trim(), content.trim(), is_active ?? true, id]
+      );
+    } else {
+      // 일반 회사: company_code 추가 조건으로 타 회사 데이터 수정 차단
+      result = await query<any>(
+        `UPDATE system_notice
+         SET title = $1, content = $2, is_active = $3, updated_at = NOW()
+         WHERE id = $4 AND company_code = $5
+         RETURNING *`,
+        [title.trim(), content.trim(), is_active ?? true, id, companyCode]
+      );
+    }
+
+    if (!result || result.length === 0) {
+      res.status(404).json({
+        success: false,
+        message: "공지사항을 찾을 수 없거나 수정 권한이 없습니다.",
+      });
+      return;
+    }
+
+    logger.info("공지사항 수정 성공", { id, companyCode });
+
+    res.status(200).json({
+      success: true,
+      data: result[0],
+      message: "공지사항이 수정되었습니다.",
+    });
+  } catch (error) {
+    logger.error("공지사항 수정 실패", { error, id: req.params.id });
+    res.status(500).json({
+      success: false,
+      message: "공지사항 수정 중 오류가 발생했습니다.",
+      error: error instanceof Error ? error.message : "Unknown error",
+    });
+  }
+};
+
+/**
+ * DELETE /api/system-notices/:id
+ * 공지사항 삭제
+ * - WHERE id=$1 AND company_code=$2 로 타 회사 데이터 삭제 차단
+ * - 최고 관리자는 company_code 조건 없이 id만으로 삭제 가능
+ */
+export const deleteSystemNotice = async (
+  req: AuthenticatedRequest,
+  res: Response
+): Promise<void> => {
+  try {
+    const companyCode = req.user!.companyCode;
+    const { id } = req.params;
+
+    logger.info("공지사항 삭제 요청", { id, companyCode });
+
+    let result: any[];
+
+    if (companyCode === "*") {
+      // 최고 관리자: id만으로 삭제
+      result = await query<any>(
+        `DELETE FROM system_notice WHERE id = $1 RETURNING id`,
+        [id]
+      );
+    } else {
+      // 일반 회사: company_code 추가 조건으로 타 회사 데이터 삭제 차단
+      result = await query<any>(
+        `DELETE FROM system_notice WHERE id = $1 AND company_code = $2 RETURNING id`,
+        [id, companyCode]
+      );
+    }
+
+    if (!result || result.length === 0) {
+      res.status(404).json({
+        success: false,
+        message: "공지사항을 찾을 수 없거나 삭제 권한이 없습니다.",
+      });
+      return;
+    }
+
+    logger.info("공지사항 삭제 성공", { id, companyCode });
+
+    res.status(200).json({
+      success: true,
+      message: "공지사항이 삭제되었습니다.",
+    });
+  } catch (error) {
+    logger.error("공지사항 삭제 실패", { error, id: req.params.id });
+    res.status(500).json({
+      success: false,
+      message: "공지사항 삭제 중 오류가 발생했습니다.",
+      error: error instanceof Error ? error.message : "Unknown error",
+    });
+  }
+};
diff --git a/backend-node/src/controllers/tableCategoryValueController.ts b/backend-node/src/controllers/tableCategoryValueController.ts
index 60a0af08..49fe6e72 100644
--- a/backend-node/src/controllers/tableCategoryValueController.ts
+++ b/backend-node/src/controllers/tableCategoryValueController.ts
@@ -62,24 +62,31 @@ export const getAllCategoryColumns = async (req: AuthenticatedRequest, res: Resp
  */
 export const getCategoryValues = async (req: AuthenticatedRequest, res: Response) => {
   try {
-    const companyCode = req.user!.companyCode;
+    const userCompanyCode = req.user!.companyCode;
     const { tableName, columnName } = req.params;
     const includeInactive = req.query.includeInactive === "true";
     const menuObjid = req.query.menuObjid ? Number(req.query.menuObjid) : undefined;
+    const filterCompanyCode = req.query.filterCompanyCode as string | undefined;
+
+    // 최고관리자가 특정 회사 기준 필터링을 요청한 경우 해당 회사 코드 사용
+    const effectiveCompanyCode = (userCompanyCode === "*" && filterCompanyCode)
+      ? filterCompanyCode
+      : userCompanyCode;
 
     logger.info("카테고리 값 조회 요청", {
       tableName,
       columnName,
       menuObjid,
-      companyCode,
+      companyCode: effectiveCompanyCode,
+      filterCompanyCode,
     });
 
     const values = await tableCategoryValueService.getCategoryValues(
       tableName,
       columnName,
-      companyCode,
+      effectiveCompanyCode,
       includeInactive,
-      menuObjid // ← menuObjid 전달
+      menuObjid
     );
 
     return res.json({
diff --git a/backend-node/src/controllers/tableManagementController.ts b/backend-node/src/controllers/tableManagementController.ts
index 0c35fdbd..0ab73e09 100644
--- a/backend-node/src/controllers/tableManagementController.ts
+++ b/backend-node/src/controllers/tableManagementController.ts
@@ -2087,6 +2087,23 @@ export async function multiTableSave(
       return;
     }
 
+    // UNIQUE 제약조건 검증 (트랜잭션 전에)
+    const tmsMulti = new TableManagementService();
+    const uniqueViolations = await tmsMulti.validateUniqueConstraints(
+      mainTable.tableName,
+      mainData,
+      companyCode,
+      isUpdate ? mainData[mainTable.primaryKeyColumn] : undefined
+    );
+    if (uniqueViolations.length > 0) {
+      client.release();
+      res.status(400).json({
+        success: false,
+        message: `중복된 값이 존재합니다: ${uniqueViolations.join(", ")}`,
+      });
+      return;
+    }
+
     await client.query("BEGIN");
 
     // 1. 메인 테이블 저장
@@ -3088,3 +3105,153 @@ export async function getNumberingColumnsByCompany(
     });
   }
 }
+
+/**
+ * 엑셀 업로드 전 데이터 검증
+ * POST /api/table-management/validate-excel
+ * Body: { tableName, data: Record<string,any>[] }
+ */
+export async function validateExcelData(
+  req: AuthenticatedRequest,
+  res: Response
+): Promise<void> {
+  try {
+    const { tableName, data } = req.body as {
+      tableName: string;
+      data: Record<string, any>[];
+    };
+    const companyCode = req.user?.companyCode || "*";
+
+    if (!tableName || !Array.isArray(data) || data.length === 0) {
+      res.status(400).json({ success: false, message: "tableName과 data 배열이 필요합니다." });
+      return;
+    }
+
+    const effectiveCompanyCode =
+      companyCode === "*" && data[0]?.company_code && data[0].company_code !== "*"
+        ? data[0].company_code
+        : companyCode;
+
+    let constraintCols = await query<{
+      column_name: string;
+      column_label: string;
+      is_nullable: string;
+      is_unique: string;
+    }>(
+      `SELECT column_name,
+              COALESCE(column_label, column_name) as column_label,
+              COALESCE(is_nullable, 'Y') as is_nullable,
+              COALESCE(is_unique, 'N') as is_unique
+       FROM table_type_columns
+       WHERE table_name = $1 AND company_code = $2`,
+      [tableName, effectiveCompanyCode]
+    );
+
+    if (constraintCols.length === 0 && effectiveCompanyCode !== "*") {
+      constraintCols = await query(
+        `SELECT column_name,
+                COALESCE(column_label, column_name) as column_label,
+                COALESCE(is_nullable, 'Y') as is_nullable,
+                COALESCE(is_unique, 'N') as is_unique
+         FROM table_type_columns
+         WHERE table_name = $1 AND company_code = '*'`,
+        [tableName]
+      );
+    }
+
+    const autoGenCols = ["id", "created_date", "updated_date", "writer", "company_code"];
+    const notNullCols = constraintCols.filter((c) => c.is_nullable === "N" && !autoGenCols.includes(c.column_name));
+    const uniqueCols = constraintCols.filter((c) => c.is_unique === "Y" && !autoGenCols.includes(c.column_name));
+
+    const notNullErrors: { row: number; column: string; label: string }[] = [];
+    const uniqueInExcelErrors: { rows: number[]; column: string; label: string; value: string }[] = [];
+    const uniqueInDbErrors: { row: number; column: string; label: string; value: string }[] = [];
+
+    // NOT NULL 검증
+    for (const col of notNullCols) {
+      for (let i = 0; i < data.length; i++) {
+        const val = data[i][col.column_name];
+        if (val === null || val === undefined || String(val).trim() === "") {
+          notNullErrors.push({ row: i + 1, column: col.column_name, label: col.column_label });
+        }
+      }
+    }
+
+    // UNIQUE: 엑셀 내부 중복
+    for (const col of uniqueCols) {
+      const seen = new Map<string, number[]>();
+      for (let i = 0; i < data.length; i++) {
+        const val = data[i][col.column_name];
+        if (val === null || val === undefined || String(val).trim() === "") continue;
+        const key = String(val).trim();
+        if (!seen.has(key)) seen.set(key, []);
+        seen.get(key)!.push(i + 1);
+      }
+      for (const [value, rows] of seen) {
+        if (rows.length > 1) {
+          uniqueInExcelErrors.push({ rows, column: col.column_name, label: col.column_label, value });
+        }
+      }
+    }
+
+    // UNIQUE: DB 기존 데이터와 중복
+    const hasCompanyCode = await query(
+      `SELECT column_name FROM information_schema.columns
+       WHERE table_name = $1 AND column_name = 'company_code'`,
+      [tableName]
+    );
+
+    for (const col of uniqueCols) {
+      const values = [...new Set(
+        data
+          .map((row) => row[col.column_name])
+          .filter((v) => v !== null && v !== undefined && String(v).trim() !== "")
+          .map((v) => String(v).trim())
+      )];
+      if (values.length === 0) continue;
+
+      let dupQuery: string;
+      let dupParams: any[];
+      const targetCompany = data[0]?.company_code || (effectiveCompanyCode !== "*" ? effectiveCompanyCode : null);
+
+      if (hasCompanyCode.length > 0 && targetCompany) {
+        dupQuery = `SELECT "${col.column_name}" FROM "${tableName}" WHERE "${col.column_name}" = ANY($1) AND company_code = $2`;
+        dupParams = [values, targetCompany];
+      } else {
+        dupQuery = `SELECT "${col.column_name}" FROM "${tableName}" WHERE "${col.column_name}" = ANY($1)`;
+        dupParams = [values];
+      }
+
+      const existingRows = await query<Record<string, any>>(dupQuery, dupParams);
+      const existingSet = new Set(existingRows.map((r) => String(r[col.column_name]).trim()));
+
+      for (let i = 0; i < data.length; i++) {
+        const val = data[i][col.column_name];
+        if (val === null || val === undefined || String(val).trim() === "") continue;
+        if (existingSet.has(String(val).trim())) {
+          uniqueInDbErrors.push({ row: i + 1, column: col.column_name, label: col.column_label, value: String(val) });
+        }
+      }
+    }
+
+    const isValid = notNullErrors.length === 0 && uniqueInExcelErrors.length === 0 && uniqueInDbErrors.length === 0;
+
+    res.json({
+      success: true,
+      data: {
+        isValid,
+        notNullErrors,
+        uniqueInExcelErrors,
+        uniqueInDbErrors,
+        summary: {
+          notNull: notNullErrors.length,
+          uniqueInExcel: uniqueInExcelErrors.length,
+          uniqueInDb: uniqueInDbErrors.length,
+        },
+      },
+    });
+  } catch (error: any) {
+    logger.error("엑셀 데이터 검증 오류:", error);
+    res.status(500).json({ success: false, message: "데이터 검증 중 오류가 발생했습니다." });
+  }
+}
diff --git a/backend-node/src/middleware/errorHandler.ts b/backend-node/src/middleware/errorHandler.ts
index 54d8f0a2..b592ae2e 100644
--- a/backend-node/src/middleware/errorHandler.ts
+++ b/backend-node/src/middleware/errorHandler.ts
@@ -41,13 +41,27 @@ export const errorHandler = (
     // PostgreSQL 에러 코드 참조: https://www.postgresql.org/docs/current/errcodes-appendix.html
     if (pgError.code === "23505") {
       // unique_violation
-      error = new AppError("중복된 데이터가 존재합니다.", 400);
+      const constraint = pgError.constraint || "";
+      const tbl = pgError.table || "";
+      let col = "";
+      if (constraint && tbl) {
+        const prefix = `${tbl}_`;
+        const suffix = "_key";
+        if (constraint.startsWith(prefix) && constraint.endsWith(suffix)) {
+          col = constraint.slice(prefix.length, -suffix.length);
+        }
+      }
+      const detail = col ? ` [${col}]` : "";
+      error = new AppError(`중복된 데이터가 존재합니다.${detail}`, 400);
     } else if (pgError.code === "23503") {
       // foreign_key_violation
       error = new AppError("참조 무결성 제약 조건 위반입니다.", 400);
     } else if (pgError.code === "23502") {
       // not_null_violation
-      error = new AppError("필수 입력값이 누락되었습니다.", 400);
+      const colName = pgError.column || "";
+      const tableName = pgError.table || "";
+      const detail = colName ? ` [${tableName}.${colName}]` : "";
+      error = new AppError(`필수 입력값이 누락되었습니다.${detail}`, 400);
     } else if (pgError.code.startsWith("23")) {
       // 기타 무결성 제약 조건 위반
       error = new AppError("데이터 무결성 제약 조건 위반입니다.", 400);
@@ -84,6 +98,7 @@ export const errorHandler = (
   // 응답 전송
   res.status(statusCode).json({
     success: false,
+    message: message,
     error: {
       message: message,
       ...(process.env.NODE_ENV === "development" && { stack: error.stack }),
diff --git a/backend-node/src/routes/approvalRoutes.ts b/backend-node/src/routes/approvalRoutes.ts
index 3f2cd2f2..d312b344 100644
--- a/backend-node/src/routes/approvalRoutes.ts
+++ b/backend-node/src/routes/approvalRoutes.ts
@@ -5,6 +5,7 @@ import {
   ApprovalRequestController,
   ApprovalLineController,
 } from "../controllers/approvalController";
+import { ApprovalProxyController } from "../controllers/approvalProxyController";
 import { authenticateToken } from "../middleware/authMiddleware";
 
 const router = express.Router();
@@ -30,9 +31,17 @@ router.get("/requests", ApprovalRequestController.getRequests);
 router.get("/requests/:id", ApprovalRequestController.getRequest);
 router.post("/requests", ApprovalRequestController.createRequest);
 router.post("/requests/:id/cancel", ApprovalRequestController.cancelRequest);
+router.post("/requests/:id/post-approve", ApprovalRequestController.postApprove);
 
 // ==================== 결재 라인 처리 (Lines) ====================
 router.get("/my-pending", ApprovalLineController.getMyPendingLines);
 router.post("/lines/:lineId/process", ApprovalLineController.processApproval);
 
+// ==================== 대결 위임 설정 (Proxy Settings) ====================
+router.get("/proxy-settings", ApprovalProxyController.getProxySettings);
+router.post("/proxy-settings", ApprovalProxyController.createProxySetting);
+router.put("/proxy-settings/:id", ApprovalProxyController.updateProxySetting);
+router.delete("/proxy-settings/:id", ApprovalProxyController.deleteProxySetting);
+router.get("/proxy-settings/check/:userId", ApprovalProxyController.checkActiveProxy);
+
 export default router;
diff --git a/backend-node/src/routes/dataRoutes.ts b/backend-node/src/routes/dataRoutes.ts
index 3c47b901..36e8bd62 100644
--- a/backend-node/src/routes/dataRoutes.ts
+++ b/backend-node/src/routes/dataRoutes.ts
@@ -6,6 +6,8 @@ import { authenticateToken } from "../middleware/authMiddleware";
 import { AuthenticatedRequest } from "../types/auth";
 import { getPool } from "../database/db";
 import { auditLogService } from "../services/auditLogService";
+import { TableManagementService } from "../services/tableManagementService";
+import { formatPgError } from "../utils/pgErrorUtil";
 
 const router = express.Router();
 
@@ -1047,6 +1049,20 @@ router.post(
         console.log(`🏢 company_name 자동 추가: ${req.user.companyName}`);
       }
 
+      // UNIQUE 제약조건 검증
+      const tms = new TableManagementService();
+      const uniqueViolations = await tms.validateUniqueConstraints(
+        tableName,
+        enrichedData,
+        req.user?.companyCode || "*"
+      );
+      if (uniqueViolations.length > 0) {
+        return res.status(400).json({
+          success: false,
+          message: `중복된 값이 존재합니다: ${uniqueViolations.join(", ")}`,
+        });
+      }
+
       // 레코드 생성
       const result = await dataService.createRecord(tableName, enrichedData);
 
@@ -1116,6 +1132,21 @@ router.put(
 
       console.log(`✏️ 레코드 수정: ${tableName}/${id}`, data);
 
+      // UNIQUE 제약조건 검증 (자기 자신 제외)
+      const tmsUpdate = new TableManagementService();
+      const uniqueViolations = await tmsUpdate.validateUniqueConstraints(
+        tableName,
+        data,
+        req.user?.companyCode || "*",
+        String(id)
+      );
+      if (uniqueViolations.length > 0) {
+        return res.status(400).json({
+          success: false,
+          message: `중복된 값이 존재합니다: ${uniqueViolations.join(", ")}`,
+        });
+      }
+
       // 레코드 수정
       const result = await dataService.updateRecord(tableName, id, data);
 
diff --git a/backend-node/src/routes/packagingRoutes.ts b/backend-node/src/routes/packagingRoutes.ts
new file mode 100644
index 00000000..f501269e
--- /dev/null
+++ b/backend-node/src/routes/packagingRoutes.ts
@@ -0,0 +1,10 @@
+import { Router } from "express";
+import { authenticateToken } from "../middleware/authMiddleware";
+
+const router = Router();
+
+router.use(authenticateToken);
+
+// TODO: 포장/적재정보 관리 API 구현 예정
+
+export default router;
diff --git a/backend-node/src/routes/systemNoticeRoutes.ts b/backend-node/src/routes/systemNoticeRoutes.ts
new file mode 100644
index 00000000..54506386
--- /dev/null
+++ b/backend-node/src/routes/systemNoticeRoutes.ts
@@ -0,0 +1,27 @@
+import { Router } from "express";
+import {
+  getSystemNotices,
+  createSystemNotice,
+  updateSystemNotice,
+  deleteSystemNotice,
+} from "../controllers/systemNoticeController";
+import { authenticateToken } from "../middleware/authMiddleware";
+
+const router = Router();
+
+// 모든 공지사항 라우트에 인증 미들웨어 적용
+router.use(authenticateToken);
+
+// 공지사항 목록 조회 (is_active 필터 쿼리 파라미터 지원)
+router.get("/", getSystemNotices);
+
+// 공지사항 등록
+router.post("/", createSystemNotice);
+
+// 공지사항 수정
+router.put("/:id", updateSystemNotice);
+
+// 공지사항 삭제
+router.delete("/:id", deleteSystemNotice);
+
+export default router;
diff --git a/backend-node/src/routes/tableManagementRoutes.ts b/backend-node/src/routes/tableManagementRoutes.ts
index 92449cf6..6a4a8ce8 100644
--- a/backend-node/src/routes/tableManagementRoutes.ts
+++ b/backend-node/src/routes/tableManagementRoutes.ts
@@ -27,6 +27,7 @@ import {
   getCategoryColumnsByCompany, // 🆕 회사별 카테고리 컬럼 조회
   getNumberingColumnsByCompany, // 채번 타입 컬럼 조회
   multiTableSave, // 🆕 범용 다중 테이블 저장
+  validateExcelData, // 엑셀 업로드 전 데이터 검증
   getTableEntityRelations, // 🆕 두 테이블 간 엔티티 관계 조회
   getReferencedByTables, // 🆕 현재 테이블을 참조하는 테이블 조회
   getTableConstraints, // 🆕 PK/인덱스 상태 조회
@@ -280,4 +281,9 @@ router.get("/menu/:menuObjid/category-columns", getCategoryColumnsByMenu);
  */
 router.post("/multi-table-save", multiTableSave);
 
+/**
+ * 엑셀 업로드 전 데이터 검증
+ */
+router.post("/validate-excel", validateExcelData);
+
 export default router;
diff --git a/backend-node/src/services/dynamicFormService.ts b/backend-node/src/services/dynamicFormService.ts
index 1b183074..604405c3 100644
--- a/backend-node/src/services/dynamicFormService.ts
+++ b/backend-node/src/services/dynamicFormService.ts
@@ -1715,8 +1715,8 @@ export class DynamicFormService {
         `SELECT component_id, properties
          FROM screen_layouts
          WHERE screen_id = $1
-         AND component_type = $2`,
-        [screenId, "component"]
+         AND component_type IN ('component', 'v2-button-primary')`,
+        [screenId]
       );
 
       console.log(`📋 화면 컴포넌트 조회 결과:`, screenLayouts.length);
@@ -1747,8 +1747,12 @@ export class DynamicFormService {
           (triggerType === "delete" && buttonActionType === "delete") ||
           ((triggerType === "insert" || triggerType === "update") && buttonActionType === "save");
         
+        const isButtonComponent =
+          properties?.componentType === "button-primary" ||
+          properties?.componentType === "v2-button-primary";
+        
         if (
-          properties?.componentType === "button-primary" &&
+          isButtonComponent &&
           isMatchingAction &&
           properties?.webTypeConfig?.enableDataflowControl === true
         ) {
@@ -1877,7 +1881,7 @@ export class DynamicFormService {
           {
             sourceData: [savedData],
             dataSourceType: "formData",
-            buttonId: "save-button",
+            buttonId: `${triggerType}-button`,
             screenId: screenId,
             userId: userId,
             companyCode: companyCode,
diff --git a/backend-node/src/services/multiTableExcelService.ts b/backend-node/src/services/multiTableExcelService.ts
index d18f479b..03e5db4c 100644
--- a/backend-node/src/services/multiTableExcelService.ts
+++ b/backend-node/src/services/multiTableExcelService.ts
@@ -970,10 +970,11 @@ class MultiTableExcelService {
     const result = await pool.query(
       `SELECT
          c.column_name,
-         c.is_nullable,
+         c.is_nullable AS db_is_nullable,
          c.column_default,
-         COALESCE(ttc.column_label, cl.column_label) AS column_label,
-         COALESCE(ttc.reference_table, cl.reference_table) AS reference_table
+         COALESCE(NULLIF(ttc.column_label, c.column_name), cl.column_label) AS column_label,
+         COALESCE(ttc.reference_table, cl.reference_table) AS reference_table,
+         COALESCE(ttc.is_nullable, cl.is_nullable) AS ttc_is_nullable
        FROM information_schema.columns c
        LEFT JOIN table_type_columns cl
          ON c.table_name = cl.table_name AND c.column_name = cl.column_name AND cl.company_code = '*'
@@ -991,13 +992,13 @@ class MultiTableExcelService {
       // 시스템 컬럼 제외
       if (MultiTableExcelService.SYSTEM_COLUMNS.has(colName)) continue;
 
-      // FK 컬럼 제외 (reference_table이 있는 컬럼 = 다른 테이블의 PK를 참조)
-      // 단, 비즈니스적으로 의미 있는 FK는 남길 수 있으므로,
-      // _id로 끝나면서 reference_table이 있는 경우만 제외
+      // FK 컬럼 제외
       if (row.reference_table && colName.endsWith("_id")) continue;
 
       const hasDefault = row.column_default !== null;
-      const isNullable = row.is_nullable === "YES";
+      const dbNullable = row.db_is_nullable === "YES";
+      const ttcNotNull = row.ttc_is_nullable === "N";
+      const isNullable = ttcNotNull ? false : dbNullable;
       const isRequired = !isNullable && !hasDefault;
 
       columns.push({
diff --git a/backend-node/src/services/tableCategoryValueService.ts b/backend-node/src/services/tableCategoryValueService.ts
index 96efdfbb..a8b12605 100644
--- a/backend-node/src/services/tableCategoryValueService.ts
+++ b/backend-node/src/services/tableCategoryValueService.ts
@@ -217,12 +217,12 @@ class TableCategoryValueService {
           AND column_name = $2
       `;
       
-      // category_values 테이블 사용 (menu_objid 없음)
+      // company_code 기반 필터링
       if (companyCode === "*") {
-        // 최고 관리자: 모든 값 조회
-        query = baseSelect;
+        // 최고 관리자: 공통(*) 카테고리만 조회 (모든 회사 카테고리 혼합 방지)
+        query = baseSelect + ` AND company_code = '*'`;
         params = [tableName, columnName];
-        logger.info("최고 관리자 전체 카테고리 값 조회 (category_values)");
+        logger.info("최고 관리자: 공통 카테고리만 조회 (category_values)");
       } else {
         // 일반 회사: 자신의 회사 또는 공통(*) 카테고리 조회
         query = baseSelect + ` AND (company_code = $3 OR company_code = '*')`;
diff --git a/backend-node/src/services/tableManagementService.ts b/backend-node/src/services/tableManagementService.ts
index 6d994f93..d727a96e 100644
--- a/backend-node/src/services/tableManagementService.ts
+++ b/backend-node/src/services/tableManagementService.ts
@@ -190,7 +190,7 @@ export class TableManagementService {
         ? await query<any>(
             `SELECT 
               c.column_name as "columnName",
-              COALESCE(ttc.column_label, cl.column_label, c.column_name) as "displayName",
+              COALESCE(NULLIF(ttc.column_label, c.column_name), cl.column_label, c.column_name) as "displayName",
               c.data_type as "dataType",
               c.data_type as "dbType",
               COALESCE(ttc.input_type, cl.input_type, 'text') as "webType",
diff --git a/backend-node/src/utils/pgErrorUtil.ts b/backend-node/src/utils/pgErrorUtil.ts
new file mode 100644
index 00000000..3f7c56d3
--- /dev/null
+++ b/backend-node/src/utils/pgErrorUtil.ts
@@ -0,0 +1,80 @@
+import { query } from "../database/db";
+
+/**
+ * PostgreSQL 에러를 사용자 친절한 메시지로 변환
+ * table_type_columns의 column_label을 조회하여 한글 라벨로 표시
+ */
+export async function formatPgError(
+  error: any,
+  companyCode?: string
+): Promise<string> {
+  if (!error || !error.code) {
+    return error?.message || "데이터 처리 중 오류가 발생했습니다.";
+  }
+
+  switch (error.code) {
+    case "23502": {
+      // not_null_violation
+      const colName = error.column || "";
+      const tblName = error.table || "";
+
+      if (colName && tblName && companyCode) {
+        try {
+          const rows = await query(
+            `SELECT column_label FROM table_type_columns 
+             WHERE table_name = $1 AND column_name = $2 AND company_code = $3 
+             LIMIT 1`,
+            [tblName, colName, companyCode]
+          );
+          const label = rows[0]?.column_label;
+          if (label) {
+            return `필수 입력값이 누락되었습니다: ${label}`;
+          }
+        } catch {
+          // 라벨 조회 실패 시 컬럼명으로 폴백
+        }
+      }
+      const detail = colName ? ` [${colName}]` : "";
+      return `필수 입력값이 누락되었습니다.${detail}`;
+    }
+    case "23505": {
+      // unique_violation
+      const constraint = error.constraint || "";
+      const tblName = error.table || "";
+      // constraint 이름에서 컬럼명 추출 시도 (예: item_mst_item_code_key → item_code)
+      let colName = "";
+      if (constraint && tblName) {
+        const prefix = `${tblName}_`;
+        const suffix = "_key";
+        if (constraint.startsWith(prefix) && constraint.endsWith(suffix)) {
+          colName = constraint.slice(prefix.length, -suffix.length);
+        }
+      }
+      if (colName && tblName && companyCode) {
+        try {
+          const rows = await query(
+            `SELECT column_label FROM table_type_columns 
+             WHERE table_name = $1 AND column_name = $2 AND company_code = $3 
+             LIMIT 1`,
+            [tblName, colName, companyCode]
+          );
+          const label = rows[0]?.column_label;
+          if (label) {
+            return `중복된 데이터가 존재합니다: ${label}`;
+          }
+        } catch {
+          // 폴백
+        }
+      }
+      const detail = colName ? ` [${colName}]` : "";
+      return `중복된 데이터가 존재합니다.${detail}`;
+    }
+    case "23503":
+      return "참조 무결성 제약 조건 위반입니다.";
+    default:
+      if (error.code.startsWith("23")) {
+        return "데이터 무결성 제약 조건 위반입니다.";
+      }
+      return error.message || "데이터 처리 중 오류가 발생했습니다.";
+  }
+}
diff --git a/backend-node/src/utils/smartFactoryLog.ts b/backend-node/src/utils/smartFactoryLog.ts
new file mode 100644
index 00000000..ea8d9aec
--- /dev/null
+++ b/backend-node/src/utils/smartFactoryLog.ts
@@ -0,0 +1,71 @@
+// 스마트공장 활용 로그 전송 유틸리티
+// https://log.smart-factory.kr 에 사용자 접속 로그를 전송
+
+import axios from "axios";
+import { logger } from "./logger";
+
+const SMART_FACTORY_LOG_URL =
+  "https://log.smart-factory.kr/apisvc/sendLogDataJSON.do";
+
+/**
+ * 스마트공장 활용 로그 전송
+ * 로그인 성공 시 비동기로 호출하여 응답을 블로킹하지 않음
+ */
+export async function sendSmartFactoryLog(params: {
+  userId: string;
+  remoteAddr: string;
+  useType?: string;
+}): Promise<void> {
+  const apiKey = process.env.SMART_FACTORY_API_KEY;
+
+  if (!apiKey) {
+    logger.warn(
+      "SMART_FACTORY_API_KEY 환경변수가 설정되지 않아 스마트공장 로그 전송을 건너뜁니다."
+    );
+    return;
+  }
+
+  try {
+    const now = new Date();
+    const logDt = formatDateTime(now);
+
+    const logData = {
+      crtfcKey: apiKey,
+      logDt,
+      useSe: params.useType || "접속",
+      sysUser: params.userId,
+      conectIp: params.remoteAddr,
+      dataUsgqty: "",
+    };
+
+    const encodedLogData = encodeURIComponent(JSON.stringify(logData));
+
+    const response = await axios.get(SMART_FACTORY_LOG_URL, {
+      params: { logData: encodedLogData },
+      timeout: 5000,
+    });
+
+    logger.info("스마트공장 로그 전송 완료", {
+      userId: params.userId,
+      status: response.status,
+    });
+  } catch (error) {
+    // 스마트공장 로그 전송 실패해도 로그인에 영향 없도록 에러만 기록
+    logger.error("스마트공장 로그 전송 실패", {
+      userId: params.userId,
+      error: error instanceof Error ? error.message : error,
+    });
+  }
+}
+
+/** yyyy-MM-dd HH:mm:ss.SSS 형식 */
+function formatDateTime(date: Date): string {
+  const y = date.getFullYear();
+  const M = String(date.getMonth() + 1).padStart(2, "0");
+  const d = String(date.getDate()).padStart(2, "0");
+  const H = String(date.getHours()).padStart(2, "0");
+  const m = String(date.getMinutes()).padStart(2, "0");
+  const s = String(date.getSeconds()).padStart(2, "0");
+  const ms = String(date.getMilliseconds()).padStart(3, "0");
+  return `${y}-${M}-${d} ${H}:${m}:${s}.${ms}`;
+}
diff --git a/docs/responsive-component-strategy.md b/docs/responsive-component-strategy.md
new file mode 100644
index 00000000..b7feab2f
--- /dev/null
+++ b/docs/responsive-component-strategy.md
@@ -0,0 +1,155 @@
+# WACE 반응형 컴포넌트 전략
+
+## 개요
+
+WACE 프로젝트의 모든 반응형 UI는 **3개의 레이아웃 프리미티브 + 1개의 훅**으로 통일한다.
+컴포넌트마다 새로 타입을 정의하거나 리사이저를 구현하지 않는다.
+
+## 아키텍처
+
+```
+┌─────────────────────────────────────────────────┐
+│            useResponsive() 훅                    │
+│   isMobile | isTablet | isDesktop | width       │
+└──────────┬──────────┬──────────┬────────────────┘
+           │          │          │
+   ┌───────▼──┐ ┌────▼─────┐ ┌─▼──────────────┐
+   │ 데이터    │ │ 좌우분할  │ │ 캔버스(디자이너)│
+   │ 목록      │ │ 패널     │ │ 화면           │
+   └──────────┘ └──────────┘ └────────────────┘
+   ResponsiveDataView  ResponsiveSplitPanel  ResponsiveGridRenderer
+```
+
+## 1. useResponsive (훅)
+
+**위치**: `frontend/lib/hooks/useResponsive.ts`
+
+모든 반응형 판단의 기반. 직접 breakpoint 분기가 필요할 때만 사용.
+가능하면 아래 레이아웃 컴포넌트를 쓰고, 훅 직접 사용은 최소화.
+
+| 반환값 | 브레이크포인트 | 해상도 |
+|--------|---------------|--------|
+| isMobile | xs, sm | < 768px |
+| isTablet | md | 768 ~ 1023px |
+| isDesktop | lg, xl, 2xl | >= 1024px |
+
+## 2. ResponsiveDataView (데이터 목록)
+
+**위치**: `frontend/components/common/ResponsiveDataView.tsx`
+**패턴**: 데스크톱 = 테이블, 모바일 = 카드 리스트
+**적용 대상**: 모든 목록/리스트 화면
+
+```tsx
+<ResponsiveDataView<User>
+  data={users}
+  columns={columns}
+  keyExtractor={(u) => u.id}
+  cardTitle={(u) => u.name}
+  cardFields={[
+    { label: "이메일", render: (u) => u.email },
+    { label: "부서", render: (u) => u.dept },
+  ]}
+  renderActions={(u) => <Button>편집</Button>}
+/>
+```
+
+**적용 완료 (12개 화면)**:
+- UserTable, CompanyTable, UserAuthTable
+- DataFlowList, ScreenList
+- system-notices, approvalTemplate, standards
+- batch-management, mail/receive, flowMgmtList
+- exconList, exCallConfList
+
+## 3. ResponsiveSplitPanel (좌우 분할)
+
+**위치**: `frontend/components/common/ResponsiveSplitPanel.tsx`
+**패턴**: 데스크톱 = 좌우 분할(리사이저 포함), 모바일 = 세로 스택(접기/펼치기)
+**적용 대상**: 카테고리관리, 메뉴관리, 부서관리, BOM 등 좌우 분할 레이아웃
+
+```tsx
+<ResponsiveSplitPanel
+  left={<TreeView />}
+  right={<DetailPanel />}
+  leftTitle="카테고리"
+  leftWidth={25}
+  minLeftWidth={10}
+  maxLeftWidth={40}
+  height="calc(100vh - 120px)"
+/>
+```
+
+**Props**:
+| Prop | 타입 | 기본값 | 설명 |
+|------|------|--------|------|
+| left | ReactNode | 필수 | 좌측 패널 콘텐츠 |
+| right | ReactNode | 필수 | 우측 패널 콘텐츠 |
+| leftTitle | string | "목록" | 모바일 접기 헤더 |
+| leftWidth | number | 25 | 초기 좌측 너비(%) |
+| minLeftWidth | number | 10 | 최소 좌측 너비(%) |
+| maxLeftWidth | number | 50 | 최대 좌측 너비(%) |
+| showResizer | boolean | true | 리사이저 표시 |
+| collapsedOnMobile | boolean | true | 모바일 기본 접힘 |
+| height | string | "100%" | 컨테이너 높이 |
+
+**동작**:
+- 데스크톱(>= 1024px): 좌우 분할 + 드래그 리사이저 + 좌측 접기 버튼
+- 모바일(< 1024px): 세로 스택, 좌측 패널 40vh 제한, 접기/펼치기
+
+**마이그레이션 후보**:
+- `V2CategoryManagerComponent` (완료)
+- `SplitPanelLayoutComponent` (v1, v2)
+- `BomTreeComponent`
+- `ScreenSplitPanel`
+- menu/page.tsx (메뉴 관리)
+- departments/page.tsx (부서 관리)
+
+## 4. ResponsiveGridRenderer (디자이너 캔버스)
+
+**위치**: `frontend/components/screen/ResponsiveGridRenderer.tsx`
+**패턴**: 데스크톱(비전폭 컴포넌트) = 캔버스 스케일링, 그 외 = Flex 그리드
+**적용 대상**: 화면 디자이너로 만든 동적 화면
+
+이 컴포넌트는 화면 디자이너 시스템 전용. 일반 개발에서 직접 사용하지 않음.
+
+## 사용 가이드
+
+### 새 화면 만들 때
+
+| 화면 유형 | 사용 컴포넌트 |
+|-----------|--------------|
+| 데이터 목록 (테이블) | `ResponsiveDataView` |
+| 좌우 분할 (트리+상세) | `ResponsiveSplitPanel` |
+| 디자이너 화면 | `ResponsiveGridRenderer` (자동) |
+| 단순 레이아웃 | Tailwind 반응형 (`flex-col lg:flex-row`) |
+
+### 금지 사항
+
+1. 컴포넌트 내부에 `isDraggingRef`, `handleMouseDown/Move/Up` 직접 구현 금지
+   -> `ResponsiveSplitPanel` 사용
+2. `hidden lg:block` / `lg:hidden` 패턴으로 테이블/카드 이중 렌더링 금지
+   -> `ResponsiveDataView` 사용
+3. `window.innerWidth` 직접 체크 금지
+   -> `useResponsive()` 훅 사용
+4. 반응형 분기를 위한 새로운 타입/인터페이스 정의 금지
+   -> 기존 프리미티브의 Props 사용
+
+### 폐기 예정 컴포넌트
+
+| 컴포넌트 | 대체 | 상태 |
+|----------|------|------|
+| `ResponsiveContainer` | Tailwind 또는 `useResponsive` | 미사용, 삭제 예정 |
+| `ResponsiveGrid` | Tailwind `grid-cols-*` | 미사용, 삭제 예정 |
+| `ResponsiveText` | Tailwind `text-sm lg:text-lg` | 미사용, 삭제 예정 |
+
+## 파일 구조
+
+```
+frontend/
+├── lib/hooks/
+│   └── useResponsive.ts           # 브레이크포인트 훅 (기반)
+├── components/common/
+│   ├── ResponsiveDataView.tsx      # 테이블/카드 전환
+│   └── ResponsiveSplitPanel.tsx    # 좌우 분할 반응형
+└── components/screen/
+    └── ResponsiveGridRenderer.tsx  # 디자이너 캔버스 렌더러
+```
diff --git a/docs/ycshin-node/BIC[계획]-버튼-아이콘화.md b/docs/ycshin-node/BIC[계획]-버튼-아이콘화.md
new file mode 100644
index 00000000..816eaa1e
--- /dev/null
+++ b/docs/ycshin-node/BIC[계획]-버튼-아이콘화.md
@@ -0,0 +1,340 @@
+# [계획서] 버튼 아이콘화 - 화면 디자이너 버튼 표시 모드 확장
+
+> 관련 문서: [맥락노트](./BIC[맥락]-버튼-아이콘화.md) | [체크리스트](./BIC[체크]-버튼-아이콘화.md)
+
+## 개요
+
+화면 디자이너에서 버튼을 텍스트 모드(현행), 아이콘 모드, 아이콘+텍스트 모드 중 선택할 수 있도록 확장한다.
+아이콘 모드 선택 시 버튼 액션에 맞는 아이콘 후보군이 제시되고, 관리자가 원하는 아이콘을 선택한다.
+아이콘 크기 비율(버튼 높이 대비 4단계 프리셋), 아이콘 색상, 텍스트 위치(4방향), 아이콘-텍스트 간격 설정을 제공한다.
+관리자가 lucide 검색 또는 외부 SVG 붙여넣기로 커스텀 아이콘을 추가/삭제할 수 있다.
+
+---
+
+## 현재 동작
+
+- 버튼은 항상 **텍스트 모드**로만 표시됨
+- `ButtonConfigPanel.tsx`에서 "버튼 텍스트" 입력 → 실제 화면에서 해당 텍스트가 버튼에 표시
+- 아이콘 표시 기능 없음
+
+### 현재 코드 위치
+
+| 구분 | 파일 | 설명 |
+|------|------|------|
+| 설정 패널 | `frontend/components/screen/config-panels/ButtonConfigPanel.tsx` | 버튼 텍스트, 액션 설정 (784~854행) |
+| 뷰어 렌더링 | `frontend/components/screen/InteractiveScreenViewerDynamic.tsx` | 실제 버튼 렌더링 (961~983행) |
+| 뷰어 렌더링 | `frontend/components/screen/InteractiveScreenViewer.tsx` | 실제 버튼 렌더링 (2041~2059행) |
+| 위젯 렌더링 | `frontend/components/screen/widgets/types/ButtonWidget.tsx` | 위젯 기반 버튼 렌더링 (67~86행) |
+| 최적화 컴포넌트 | `frontend/components/screen/OptimizedButtonComponent.tsx` | 최적화된 버튼 컴포넌트 (643~674행) |
+
+---
+
+## 변경 후 동작
+
+### 1. 표시 모드 선택 (라디오 그룹)
+
+ButtonConfigPanel에 "버튼 텍스트" 입력 위에 표시 모드 선택 UI 추가:
+
+- **텍스트 모드** (기본값, 현행 유지): 버튼에 텍스트만 표시
+- **아이콘 모드**: 버튼에 아이콘만 표시
+- **아이콘+텍스트 모드**: 버튼에 아이콘과 텍스트를 함께 표시
+
+```
+[ 텍스트 | 아이콘 | 아이콘+텍스트 ]  ← 라디오 그룹 (토글 형태)
+```
+
+### 2. 텍스트 모드 선택 시
+
+- 현재와 동일하게 "버튼 텍스트" 입력 필드 표시
+- 변경 사항 없음
+
+### 2-1. 아이콘+텍스트 모드 선택 시
+
+- 아이콘 선택 UI (3장과 동일) + 버튼 텍스트 입력 필드 **둘 다 표시**
+- 렌더링: 텍스트 위치에 따라 아이콘과 텍스트 배치 방향이 달라짐
+- 텍스트 위치 4방향: 오른쪽(기본), 왼쪽, 위쪽, 아래쪽
+- 예시: `[ ✓ 저장 ]` (오른쪽), `[ 저장 ✓ ]` (왼쪽), 세로 배치 (위쪽/아래쪽)
+- 아이콘과 텍스트 사이 간격: 기본 6px, 관리자가 0~무제한 조절 가능 (슬라이더 0~32px + 직접 입력)
+
+### 3. 아이콘 모드 선택 시
+
+#### 3-1. 버튼 액션별 추천 아이콘 목록
+
+버튼 액션(`action.type`)에 따라 해당 액션에 어울리는 아이콘 후보군을 그리드로 표시:
+
+| 버튼 액션 | 값 | 추천 아이콘 (lucide-react) |
+|-----------|-----|---------------------------|
+| 저장 | `save` | Check, Save, CheckCircle, CircleCheck, FileCheck, ShieldCheck |
+| 삭제 | `delete` | Trash2, Trash, XCircle, X, Eraser, CircleX |
+| 편집 | `edit` | Pencil, PenLine, Edit, SquarePen, FilePen, PenTool |
+| 페이지 이동 | `navigate` | ArrowRight, ExternalLink, MoveRight, Navigation, CornerUpRight, Link |
+| 모달 열기 | `modal` | Maximize2, PanelTop, AppWindow, LayoutGrid, Layers, FolderOpen |
+| 데이터 전달 | `transferData` | SendHorizontal, ArrowRightLeft, Repeat, PackageCheck, Upload, Share2 |
+| 엑셀 다운로드 | `excel_download` | Download, FileDown, FileSpreadsheet, Sheet, Table, FileOutput |
+| 엑셀 업로드 | `excel_upload` | Upload, FileUp, FileSpreadsheet, Sheet, ImportIcon, FileInput |
+| 즉시 저장 | `quickInsert` | Zap, Plus, PlusCircle, SquarePlus, FilePlus, BadgePlus |
+| 제어 흐름 | `control` | Settings, SlidersHorizontal, ToggleLeft, Workflow, GitBranch, Cog |
+| 바코드 스캔 | `barcode_scan` | ScanLine, QrCode, Camera, Scan, ScanBarcode, Focus |
+| 운행알림 및 종료 | `operation_control` | Truck, Car, MapPin, Navigation2, Route, Bell |
+| 이벤트 발송 | `event` | Send, Bell, Radio, Megaphone, Podcast, BellRing |
+| 복사 | `copy` | Copy, ClipboardCopy, Files, CopyPlus, Duplicate, ClipboardList |
+
+**적절한 아이콘이 없는 액션 (숨김 처리된 deprecated 액션들):**
+
+| 버튼 액션 | 값 | 안내 문구 |
+|-----------|-----|----------|
+| 연관 데이터 버튼 모달 열기 | `openRelatedModal` | 안내 문구 표시 + 커스텀 아이콘 추가 가능 |
+| (deprecated) 데이터 전달 + 모달 | `openModalWithData` | 안내 문구 표시 + 커스텀 아이콘 추가 가능 |
+| 테이블 이력 보기 | `view_table_history` | 안내 문구 표시 + 커스텀 아이콘 추가 가능 |
+| 코드 병합 | `code_merge` | 안내 문구 표시 + 커스텀 아이콘 추가 가능 |
+| 공차등록 | `empty_vehicle` | 안내 문구 표시 + 커스텀 아이콘 추가 가능 |
+
+> 안내 문구: "적절한 추천 아이콘이 없습니다. 텍스트 모드를 사용하거나 아래에서 아이콘을 직접 추가하세요."
+> 안내 문구 아래에 커스텀 아이콘 목록 + lucide 검색/SVG 붙여넣기 버튼이 표시됨
+
+#### 3-2. 아이콘 선택 UI
+
+- 액션별 추천 아이콘을 4~6열 그리드로 표시
+- 각 아이콘은 32x32 크기, 호버 시 하이라이트, 선택 시 ring 표시
+- 아이콘 아래에 이름 표시 (`text-[10px]`)
+- 관리자가 추가한 커스텀 아이콘이 있으면 "커스텀 아이콘" 구분선 아래 함께 표시
+
+#### 3-3. 아이콘 크기 비율 설정
+
+버튼 높이 대비 비율로 아이콘 크기를 설정 (정사각형 유지):
+
+**프리셋 (ToggleGroup, 4단계):**
+
+| 이름 | 버튼 높이 대비 | 설명 |
+|------|--------------|------|
+| 작게 | 40% | 컴팩트한 아이콘 |
+| 보통 | 55% | 기본값, 대부분의 버튼에 적합 |
+| 크게 | 70% | 존재감 있는 크기 |
+| 매우 크게 | 85% | 아이콘 강조, 버튼에 꽉 차는 느낌 |
+
+- px 직접 입력은 제거 (비율 기반이므로 버튼 크기 변경 시 아이콘도 자동 비례)
+- 저장: `icon.size`에 프리셋 문자열(`"보통"`) 저장
+- 렌더링: `height: N%` + `aspect-ratio: 1/1`로 정사각형 유지
+
+#### 3-4. 아이콘 색상 설정
+
+아이콘 크기 아래에 아이콘 전용 색상 설정:
+
+- **컬러 피커**: 기존 버튼 색상 설정과 동일한 UI 사용
+- **기본값**: 미설정 (= `textColor` 상속, 기존 동작과 동일)
+- **설정 시**: lucide 아이콘은 지정한 색상으로 덮어쓰기
+- **외부 SVG**: 고유 색상이 하드코딩된 SVG는 이 설정의 영향을 받지 않음 (원본 유지)
+- **초기화 버튼**: "텍스트 색상과 동일" 버튼으로 별도 색상 해제 가능
+
+| 상황 | iconColor 설정 | 결과 |
+|------|---------------|------|
+| lucide 아이콘, iconColor 미설정 | 없음 | textColor 상속 (기존 동작) |
+| lucide 아이콘, iconColor 설정 | `#22c55e` | 초록색 아이콘 |
+| 외부 SVG (고유 색상), iconColor 설정 | `#22c55e` | SVG 원본 색상 유지 (무시) |
+| 외부 SVG (currentColor), iconColor 설정 | `#22c55e` | 초록색 아이콘 |
+
+#### 3-5. 텍스트 위치 설정 (아이콘+텍스트 모드 전용)
+
+아이콘 대비 텍스트의 배치 방향을 4방향으로 설정:
+
+| 위치 | 값 | 레이아웃 | 설명 |
+|------|-----|---------|------|
+| 왼쪽 | `left` | `텍스트 ← 아이콘` | 텍스트가 아이콘 왼쪽 (가로) |
+| 오른쪽 | `right` | `아이콘 → 텍스트` | 기본값, 아이콘 뒤에 텍스트 (가로) |
+| 위쪽 | `top` | 텍스트 위, 아이콘 아래 | 세로 배치 |
+| 아래쪽 | `bottom` | 아이콘 위, 텍스트 아래 | 세로 배치 |
+
+- 기본값: `"right"` (아이콘 오른쪽에 텍스트)
+- 저장: `componentConfig.iconTextPosition`
+- 아이콘 모드에서는 이 옵션이 숨겨짐 (텍스트가 없으므로 불필요)
+
+#### 3-6. 아이콘-텍스트 간격 설정 (아이콘+텍스트 모드 전용)
+
+아이콘+텍스트 모드에서 아이콘과 텍스트 사이 간격을 조절:
+
+- **슬라이더**: 0~32px 범위 시각적 조절
+- **직접 입력**: px 수치 직접 입력 (최솟값 0, 최댓값 제한 없음)
+- **기본값**: 6px
+- 아이콘 모드에서는 이 옵션이 숨겨짐 (텍스트가 없으므로 불필요)
+
+#### 3-7. 아이콘 모드 레이아웃 안내
+
+아이콘만 표시하면 텍스트보다 좁은 공간으로 충분하므로 안내 문구 표시:
+
+```
+ℹ 아이콘만 표시할 때는 버튼 영역의 가로 폭을 줄여 정사각형에 가깝게 만들면 더 깔끔합니다.
+```
+
+- `bg-blue-50 dark:bg-blue-950/20` 배경의 안내 박스
+- 아이콘 모드(`"icon"`)에서만 표시, 아이콘+텍스트 모드에서는 숨김
+
+#### 3-8. 디폴트 아이콘 자동 부여
+
+아이콘/아이콘+텍스트 모드 전환 시 아이콘이 미선택 상태이면 **디폴트 아이콘을 자동으로 부여**한다.
+
+| 상황 | 디폴트 아이콘 |
+|------|-------------|
+| 추천 아이콘이 있는 액션 (save, delete 등) | 해당 액션의 **첫 번째 추천 아이콘** (예: save → Check) |
+| 추천 아이콘이 없는 액션 (deprecated 등) | 범용 폴백 아이콘: `SquareMousePointer` |
+
+**커스텀 아이콘 삭제 시:**
+- 현재 선택된 커스텀 아이콘을 삭제하면 **디폴트 아이콘으로 자동 복귀** (텍스트 모드로 빠지지 않음)
+- 아이콘 모드를 유지한 채 디폴트 아이콘이 캔버스에 즉시 반영됨
+
+#### 3-9. 커스텀 아이콘 추가/삭제
+
+**방법 1: lucide 아이콘 검색으로 추가**
+- "아이콘 추가" 버튼 클릭 시 lucide 아이콘 전체 검색 가능한 모달/팝오버 표시
+- 검색 입력 → 아이콘 이름으로 필터링 → 선택하면 커스텀 목록에 추가
+
+**방법 2: 외부 SVG 붙여넣기로 추가**
+- "SVG 붙여넣기" 버튼 클릭 시 텍스트 입력 영역(textarea) 표시
+- 외부에서 복사한 SVG 코드를 붙여넣기 → 미리보기로 확인 → "추가" 버튼으로 등록
+- SVG 유효성 검사: `<svg` 태그가 포함된 올바른 SVG인지 확인, 아니면 에러 메시지
+- 추가 시 관리자가 아이콘 이름을 직접 입력 (목록에서 구분용)
+- 저장 형태: SVG 문자열을 `customSvgIcons` 배열에 `{ name, svg }` 객체로 저장
+
+**공통 규칙:**
+- 추가된 커스텀 아이콘(lucide/SVG 모두)은 **모든 버튼 액션의 아이콘 후보에 공통으로 노출**
+- 커스텀 아이콘에 X 버튼으로 삭제 가능
+
+---
+
+## 데이터 구조
+
+### componentConfig 확장
+
+```typescript
+interface ButtonComponentConfig {
+  text: string;                    // 기존: 버튼 텍스트
+  displayMode: "text" | "icon" | "icon-text"; // 신규: 표시 모드 (기본값: "text")
+  icon?: {
+    name: string;                  // lucide 아이콘 이름 또는 커스텀 SVG 아이콘 이름
+    type: "lucide" | "svg";        // 아이콘 출처 구분 (기본값: "lucide")
+    size: "작게" | "보통" | "크게" | "매우 크게"; // 버튼 높이 대비 비율 프리셋 (기본값: "보통")
+    color?: string;                  // 아이콘 색상 (미설정 시 textColor 상속)
+  };
+  iconGap?: number;                // 아이콘-텍스트 간격 px (기본값: 6, 아이콘+텍스트 모드 전용)
+  iconTextPosition?: "right" | "left" | "top" | "bottom"; // 텍스트 위치 (기본값: "right", 아이콘+텍스트 모드 전용)
+  customIcons?: string[];          // 관리자가 추가한 lucide 커스텀 아이콘 이름 목록
+  customSvgIcons?: Array<{         // 관리자가 붙여넣기한 외부 SVG 아이콘 목록
+    name: string;                  // 관리자가 지정한 아이콘 이름
+    svg: string;                   // SVG 문자열 원본
+  }>;
+  action: {
+    type: string;                  // 기존: 버튼 액션 타입
+    // ...기존 action 속성들 유지
+  };
+}
+```
+
+### 저장 예시
+
+```json
+{
+  "text": "저장",
+  "displayMode": "icon",
+  "icon": {
+    "name": "Check",
+    "type": "lucide",
+    "size": "보통",
+    "color": "#22c55e"
+  },
+  "customIcons": ["Rocket", "Star"],
+  "customSvgIcons": [
+    {
+      "name": "회사로고",
+      "svg": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>...</svg>"
+    }
+  ],
+  "action": {
+    "type": "save"
+  }
+}
+```
+
+---
+
+## 시각적 동작 예시
+
+### ButtonConfigPanel (디자이너 편집 모드)
+
+```
+표시 모드: [ 텍스트 | (아이콘) | 아이콘+텍스트 ]  ← 아이콘 선택됨
+
+아이콘 선택:
+┌──────────────────────────────────┐
+│  추천 아이콘 (저장)               │
+│  ┌────┐ ┌────┐ ┌────┐ ┌────┐   │
+│  │ ✓  │ │ 💾 │ │ ✓○ │ │ ○✓ │   │
+│  │Check│ │Save│ │Chk○│ │○Chk│   │
+│  └────┘ └────┘ └────┘ └────┘   │
+│  ┌────┐ ┌────┐                   │
+│  │📄✓│ │🛡✓│                   │
+│  │FChk│ │ShCk│                   │
+│  └────┘ └────┘                   │
+│                                  │
+│  ── 커스텀 아이콘 ──             │
+│  ┌────┐ ┌────┐ ┌────┐           │
+│  │ 🚀 │ │ ⭐ │ │[로고]│          │
+│  │Rckt │ │Star│ │회사  │          │
+│  │  ✕ │ │  ✕│ │  ✕ │          │
+│  └────┘ └────┘ └────┘           │
+│  [+ lucide 검색] [+ SVG 붙여넣기]│
+└──────────────────────────────────┘
+
+아이콘 크기 비율: [ 작게 | (보통) | 크게 | 매우 크게 ]
+텍스트 위치:     [ 왼쪽 | (오른쪽) | 위쪽 | 아래쪽 ]  ← 아이콘+텍스트 모드에서만 표시
+아이콘-텍스트 간격: [━━━━━○━━] [6] px  ← 아이콘+텍스트 모드에서만 표시
+아이콘 색상: [■ #22c55e] [텍스트 색상과 동일]
+
+ℹ 아이콘만 표시할 때는 버튼 영역의 가로 폭을 줄여 정사각형에 가깝게 만들면 더 깔끔합니다.
+```
+
+### 실제 화면 렌더링
+
+| 모드 | 표시 |
+|------|------|
+| 텍스트 모드 | `[  저장  ]` |
+| 아이콘 모드 (보통, 55%) | `[ ✓ ]` |
+| 아이콘 모드 (매우 크게, 85%) | `[ ✓ ]` |
+| 아이콘+텍스트 (텍스트 오른쪽) | `[ ✓ 저장 ]` (간격 6px) |
+| 아이콘+텍스트 (텍스트 왼쪽) | `[ 저장 ✓ ]` |
+| 아이콘+텍스트 (텍스트 아래쪽) | 아이콘 위, 텍스트 아래 (세로) |
+| 아이콘+텍스트 (색상 분리) | `[ 초록✓ 검정저장 ]` |
+
+---
+
+## 변경 대상
+
+### 수정 파일
+
+| 파일 | 변경 내용 |
+|------|----------|
+| `ButtonConfigPanel.tsx` | 표시 모드 3종 라디오, 아이콘 그리드, 크기, 색상, 간격 설정, 레이아웃 안내, 커스텀 아이콘 UI |
+| `InteractiveScreenViewerDynamic.tsx` | `displayMode` 3종 분기 → 아이콘/아이콘+텍스트/텍스트 렌더링 |
+| `InteractiveScreenViewer.tsx` | 동일 분기 추가 |
+| `ButtonWidget.tsx` | 동일 분기 추가 |
+| `OptimizedButtonComponent.tsx` | 동일 분기 추가 |
+| `ScreenDesigner.tsx` | 입력 필드 포커스 시 키보드 단축키 기본 동작 허용 (Ctrl+A/C/V/Z) |
+| `RealtimePreviewDynamic.tsx` | 버튼 컴포넌트 position wrapper에서 border 속성 분리 (이중 테두리 방지) |
+
+### 신규 파일
+
+| 파일 | 내용 |
+|------|------|
+| `frontend/lib/button-icon-map.ts` | 버튼 액션별 추천 아이콘 매핑 + 아이콘 동적 렌더링 유틸 |
+
+---
+
+## 설계 원칙
+
+- 기본값은 `"text"` 모드 → 기존 모든 버튼은 변경 없이 동작
+- `displayMode`가 없거나 `"text"`이면 현행 텍스트 렌더링 유지
+- 아이콘/아이콘+텍스트 모드 전환 시 아이콘 미선택이면 **디폴트 아이콘 자동 부여** (빈 상태 방지)
+- 커스텀 아이콘 삭제 시 텍스트 모드로 빠지지 않고 **디폴트 아이콘으로 자동 복귀**
+- 아이콘 모드에서도 `text` 값은 유지 (접근성 aria-label로 활용)
+- 기본 아이콘은 lucide-react 사용 (프로젝트 일관성)
+- 외부 SVG 붙여넣기도 지원 → 관리자가 회사 로고 등 자체 아이콘을 등록 가능
+- lucide 커스텀 아이콘은 `componentConfig.customIcons`에, SVG 아이콘은 `componentConfig.customSvgIcons`에 저장
+- lucide 아이콘 렌더링: 아이콘 이름 → 컴포넌트 매핑, SVG 아이콘 렌더링: `dangerouslySetInnerHTML` + DOMPurify 정화
diff --git a/docs/ycshin-node/BIC[맥락]-버튼-아이콘화.md b/docs/ycshin-node/BIC[맥락]-버튼-아이콘화.md
new file mode 100644
index 00000000..f4b2b16d
--- /dev/null
+++ b/docs/ycshin-node/BIC[맥락]-버튼-아이콘화.md
@@ -0,0 +1,263 @@
+# [맥락노트] 버튼 아이콘화 - 화면 디자이너 버튼 표시 모드 확장
+
+> 관련 문서: [계획서](./BIC[계획]-버튼-아이콘화.md) | [체크리스트](./BIC[체크]-버튼-아이콘화.md)
+
+---
+
+## 왜 이 작업을 하는가
+
+- 현재 모든 버튼은 텍스트로만 표시 → 버튼 영역이 넓어야 하고, 모바일/태블릿에서 공간 효율이 낮음
+- "저장", "삭제", "추가" 같은 자주 쓰는 버튼은 아이콘만으로 충분히 인식 가능
+- 관리자가 화면 레이아웃을 더 컴팩트하게 구성할 수 있도록 선택권 제공
+- 단, "출하 계획" 같이 아이콘화가 어려운 특수 버튼이 존재하므로 텍스트 모드도 반드시 유지
+
+---
+
+## 핵심 결정 사항과 근거
+
+### 1. 표시 모드는 3종 라디오 그룹(토글 형태)으로 구현
+
+- **결정**: `ToggleGroup` 형태의 세 개 옵션 (텍스트 / 아이콘 / 아이콘+텍스트)
+- **근거**: 세 모드는 상호 배타적. 아이콘+텍스트 병합 모드가 있어야 `[ + 추가 ]`, `[ 💾 저장 ]` 같은 실무 패턴을 지원. 아이콘만으로 의미 전달이 부족한 경우 텍스트를 병기하면 사용자 인식 속도가 빨라짐
+- **대안 검토**: Switch(토글) → 기각 ("무엇이 켜지는지" 직관적이지 않음, 3종 불가)
+
+### 2. 기본값은 텍스트 모드
+
+- **결정**: `displayMode` 기본값 = `"text"`
+- **근거**: 기존 모든 버튼은 텍스트로 동작 중. 아이콘 모드는 명시적으로 선택해야만 적용되어야 하위 호환성이 보장됨
+- **중요**: `displayMode`가 `undefined`이거나 `"text"`이면 현행 동작 그대로 유지
+
+### 3. 아이콘은 버튼 액션(action.type)에 연동
+
+- **결정**: 버튼 액션을 변경하면 해당 액션에 맞는 추천 아이콘 목록이 자동으로 갱신됨
+- **근거**: 관리자가 "저장" 아이콘을 고른 뒤 액션을 "삭제"로 바꾸면 혼란 발생. 액션별로 적절한 아이콘 후보를 보여주는 것이 자연스러움
+- **주의**: 액션 변경 시 이전에 선택한 아이콘이 새 액션의 추천 목록에 없으면 선택 초기화
+
+### 4. 액션별 아이콘은 6개씩 제공, 적절한 아이콘이 없으면 안내 문구
+
+- **결정**: 활성 액션 14개 각각에 6개의 lucide-react 아이콘 후보 제공
+- **근거**: 너무 적으면 선택지 부족, 너무 많으면 선택 피로. 6개가 2행 그리드로 깔끔하게 표시됨
+- **deprecated/숨김 액션**: UI에서 숨김 처리된 액션은 추천 아이콘 없이 안내 문구만 표시
+
+### 5. 커스텀 아이콘 추가는 2가지 방법 제공
+
+- **결정**: (1) lucide 아이콘 검색 + (2) 외부 SVG 붙여넣기 두 가지 경로 제공
+- **근거**: lucide 내장 아이콘만으로는 부족한 경우 존재 (회사 로고, 업종별 특수 아이콘 등). 외부에서 가져온 SVG를 직접 붙여넣기로 등록할 수 있어야 실무 유연성 확보
+- **lucide 추가**: "lucide 검색" 버튼 → 팝오버에서 검색 → 선택 → `customIcons` 배열에 이름 추가
+- **SVG 추가**: "SVG 붙여넣기" 버튼 → textarea에 SVG 코드 붙여넣기 → 미리보기 확인 → 이름 입력 → `customSvgIcons` 배열에 `{ name, svg }` 저장
+- **SVG 유효성**: `<svg` 태그 포함 여부로 기본 검증, XSS 방지를 위해 DOMPurify로 정화 후 저장
+- **범위**: 모든 커스텀 아이콘은 **해당 버튼 컴포넌트에 저장** (lucide: `customIcons`, SVG: `customSvgIcons`)
+- **노출**: 커스텀 아이콘(lucide/SVG 모두)은 어떤 버튼 액션에서도 추천 아이콘 아래에 함께 노출됨
+- **삭제**: 커스텀 아이콘 위에 X 버튼으로 개별 삭제 가능
+
+### 5-1. 외부 SVG 붙여넣기의 보안 고려
+
+- **결정**: SVG 문자열을 DOMPurify로 정화(sanitize)한 뒤 저장
+- **근거**: SVG에 `<script>`, `onload` 같은 악성 코드가 포함될 수 있으므로 XSS 방지 필수
+- **렌더링**: 정화된 SVG를 `dangerouslySetInnerHTML`로 렌더링 (정화 후이므로 안전)
+- **대안 검토**: SVG를 이미지 파일로 업로드 → 기각 (관리자 입장에서 복사-붙여넣기가 훨씬 간편)
+
+### 6. 아이콘 색상은 별도 설정, 기본값은 textColor 상속
+
+- **결정**: `icon.color` 옵션 추가. 미설정 시 `textColor`를 상속, 설정하면 아이콘만 해당 색상 적용
+- **근거**: 아이콘+텍스트 모드에서 `[ 초록✓ 검정저장 ]` 같이 아이콘과 텍스트 색을 분리하고 싶은 경우 존재. 삭제 버튼에 빨간 아이콘 + 흰 텍스트 같은 세밀한 디자인도 가능
+- **기본값**: 미설정 (= `textColor` 상속) → 설정하지 않으면 기존 동작과 100% 동일
+- **외부 SVG**: `fill`이 하드코딩된 SVG는 이 설정 무시 (SVG 원본 색상 유지가 의도). `currentColor`를 사용하는 SVG만 영향받음
+- **구현**: 아이콘을 `<span style={{ color: icon.color }}>`으로 감싸서 아이콘만 색상 분리
+- **초기화**: "텍스트 색상과 동일" 버튼으로 별도 색상 해제 → `icon.color` 삭제
+
+### 7. 아이콘 크기는 버튼 높이 대비 비율(%) 프리셋 4단계
+
+- **결정**: 작게(40%) / 보통(55%) / 크게(70%) / 매우 크게(85%) — 버튼 높이 대비 비율
+- **근거**: 절대 px 값은 버튼 크기가 바뀌면 비율이 깨짐. 비율 기반이면 버튼 크기를 조정해도 아이콘이 자동으로 비례하여 일관된 시각적 균형 유지
+- **기본값**: `"보통"` (55%) — 대부분의 버튼 크기에 적합
+- **px 직접 입력 제거**: 관리자에게 과도한 선택지를 주면 오히려 일관성이 깨짐. 4단계 프리셋만으로 충분
+- **구현**: CSS `height: N%` + `aspect-ratio: 1/1`로 정사각형 유지, lucide 아이콘은 래핑 span으로 크기 제어
+- **레거시 호환**: 기존 `"sm"`, `"md"` 등 레거시 값은 55%(보통)로 자동 폴백
+
+### 8. 아이콘 동적 렌더링은 매핑 객체 방식
+
+- **결정**: lucide-react 아이콘 이름(string) → 실제 컴포넌트 매핑 객체를 별도 파일로 관리
+- **근거**: `import * from 'lucide-react'`는 번들 크기에 영향. 사용하는 아이콘만 명시적으로 매핑
+- **파일**: `frontend/lib/button-icon-map.ts`
+- **구현**: `Record<string, React.ComponentType>` 형태의 매핑 + `renderIcon(name, size)` 유틸 함수
+
+### 9. 아이콘 모드에서도 text 값은 유지
+
+- **결정**: `displayMode === "icon"`이어도 `text` 필드는 삭제하지 않음
+- **근거**: 접근성(`aria-label`), 검색/필터링 등에 텍스트가 필요할 수 있음
+- **렌더링**: 아이콘 모드에서는 `text`를 `aria-label` 용도로만 보존
+- **아이콘+텍스트 모드**: `text`가 아이콘 오른쪽에 함께 렌더링됨
+
+### 10. 아이콘-텍스트 간격 설정 추가
+
+- **결정**: 아이콘+텍스트 모드에서 아이콘과 텍스트 사이 간격을 관리자가 조절 가능 (`iconGap`)
+- **근거**: 고정 `gap-1.5`(6px)로는 다양한 버튼 크기/디자인에 대응 불가. 간격이 좁으면 답답하고, 넓으면 분리되어 보이는 경우가 있어 관리자에게 조절 권한 제공
+- **기본값**: 6px (기존 `gap-1.5`와 동일)
+- **UI**: 슬라이더(0~32px) + 숫자 직접 입력(최댓값 제한 없음)
+- **저장**: `componentConfig.iconGap` (숫자)
+
+### 11. 키보드 단축키 입력 필드 충돌 해결
+
+- **결정**: `ScreenDesigner`의 글로벌 키보드 핸들러에서 입력 필드 포커스 시 앱 단축키를 무시하도록 수정
+- **근거**: SVG 붙여넣기 textarea에서 Ctrl+V/A/C/Z가 작동하지 않는 치명적 UX 문제 발견. 글로벌 `keydown` 핸들러가 `{ capture: true }`로 모든 키보드 이벤트를 가로채고 있었음
+- **수정**: `browserShortcuts` 일괄 차단과 앱 전용 단축키 처리 앞에 `e.target`/`document.activeElement` 기반 입력 필드 감지 가드 추가
+- **영향**: input, textarea, select, contentEditable 요소에서 텍스트 편집 단축키가 정상 동작
+
+### 12. noIconAction에서 커스텀 아이콘 추가 허용
+
+- **결정**: 추천 아이콘이 없는 deprecated 액션에서도 커스텀 아이콘(lucide 검색, SVG 붙여넣기) 추가 가능
+- **근거**: "적절한 아이콘이 없습니다" 문구만 표시하고 아이콘 추가를 완전 차단하면 관리자가 필요한 아이콘을 직접 등록할 방법이 없음. 추천은 없지만 직접 추가는 허용해야 유연성 확보
+- **안내 문구**: "적절한 추천 아이콘이 없습니다. 텍스트 모드를 사용하거나 아래에서 아이콘을 직접 추가하세요."
+
+### 13. 아이콘 모드 레이아웃 안내 문구
+
+- **결정**: 아이콘 모드(`"icon"`) 선택 시 "버튼 영역의 가로 폭을 줄여 정사각형에 가깝게 만들면 더 깔끔합니다" 안내 표시
+- **근거**: 아이콘 자체는 항상 정사각형(24x24 viewBox)이지만, 디자이너에서 버튼 컨테이너는 가로로 넓은 직사각형이 기본. 아이콘만 넣으면 좌우 여백이 과다해 보이므로 버튼 영역을 줄이라는 안내가 필요. 자동 크기 조정은 기존 레이아웃을 깨뜨릴 위험이 있어 도입하지 않되, 관리자에게 팁을 제공하면 스스로 최적화할 수 있음
+- **표시 조건**: `displayMode === "icon"`일 때만 (아이콘+텍스트 모드는 가로 공간이 필요하므로 해당 안내 불필요)
+- **대안 검토**: 자동 정사각형 조정 → 기각 (관리자 수동 레이아웃 파괴 위험)
+
+### 14. 디폴트 아이콘 자동 부여
+
+- **결정**: 아이콘/아이콘+텍스트 모드 전환 시 아이콘이 미선택이면 디폴트 아이콘을 자동으로 부여. 커스텀 아이콘 삭제 시에도 텍스트 모드로 빠지지 않고 디폴트 아이콘으로 복귀
+- **근거**: 아이콘 모드로 전환했는데 아무것도 안 보이면 "기능이 작동하지 않는다"는 착각을 유발. 또한 커스텀 아이콘을 삭제했을 때 갑자기 텍스트로 빠지면 관리자가 의도치 않은 모드 변경을 경험하게 됨
+- **디폴트 선택 기준**: 해당 액션의 첫 번째 추천 아이콘 (예: save → Check). 추천 아이콘이 없는 액션은 범용 폴백 `SquareMousePointer` 사용
+- **구현**: `getDefaultIconForAction(actionType)` 유틸 함수로 중앙화 (`button-icon-map.tsx`)
+- **폴백 아이콘**: `SquareMousePointer` — 마우스 포인터 + 사각형 형태로 "버튼 클릭 동작"을 범용적으로 표현
+
+### 15. 아이콘+텍스트 모드에서 텍스트 위치 4방향 지원
+
+- **결정**: 아이콘 대비 텍스트 위치를 왼쪽/오른쪽/위쪽/아래쪽 4방향으로 설정 가능
+- **근거**: 기존에는 아이콘 오른쪽에 텍스트 고정이었으나, 세로 배치(위/아래)가 필요한 경우도 존재 (좁고 높은 버튼, 툴바 스타일). 4방향을 제공하면 관리자가 버튼 모양에 맞게 레이아웃 선택 가능
+- **기본값**: `"right"` (아이콘 오른쪽에 텍스트) — 가장 자연스러운 좌→우 읽기 방향
+- **구현**: `flexDirection` (row/column) + 요소 순서 (textFirst) 조합으로 4방향 구현
+- **저장**: `componentConfig.iconTextPosition`
+- **표시 조건**: 아이콘+텍스트 모드에서만 표시 (아이콘 모드, 텍스트 모드에서는 숨김)
+
+### 16. 버튼 컴포넌트 테두리 이중 적용 문제 해결
+
+- **결정**: `RealtimePreviewDynamic`의 position wrapper에서 버튼 컴포넌트의 border 속성을 분리(strip)
+- **근거**: StyleEditor에서 설정한 border가 (1) position wrapper와 (2) 내부 버튼 요소 두 곳에 모두 적용되어 이중 테두리 발생. border는 내부 버튼(`buttonElementStyle`)에서만 렌더링해야 함
+- **수정 파일**: `RealtimePreviewDynamic.tsx` — `isButtonComponent` 조건에 `v2-button-primary` 추가하여 border strip 대상에 포함
+- **수정 파일**: `ButtonPrimaryComponent.tsx` — 외부 wrapper(`componentStyle`)에서 border 속성 destructure로 제거, `border: "none"` shorthand 대신 개별 longhand 속성으로 변경 (borderStyle 미설정 시 기본 `"solid"` 적용)
+
+### 17. 커스텀 아이콘 검색은 lucide 전체 목록 기반
+
+- **결정**: lucide-react에서 export되는 전체 아이콘 이름 목록을 검색 가능
+- **근거**: 관리자가 "어떤 아이콘이 있는지" 모르므로 검색 기능이 필수
+- **구현**: lucide 아이콘 이름 배열을 상수로 관리하고, CommandInput으로 필터링
+- **주의**: 전체 아이콘 컴포넌트를 import하지 않고, 이름 배열만 관리 → 선택 시에만 해당 아이콘을 매핑에 추가
+
+---
+
+## 관련 파일 위치
+
+| 구분 | 파일 경로 | 설명 |
+|------|----------|------|
+| 설정 패널 (수정) | `frontend/components/screen/config-panels/ButtonConfigPanel.tsx` | 버튼 텍스트/액션 설정 (784~854행에 모드 선택 추가) |
+| 뷰어 렌더링 (수정) | `frontend/components/screen/InteractiveScreenViewerDynamic.tsx` | 버튼 렌더링 분기 (961~983행) |
+| 뷰어 렌더링 (수정) | `frontend/components/screen/InteractiveScreenViewer.tsx` | 버튼 렌더링 분기 (2041~2059행) |
+| 위젯 (수정) | `frontend/components/screen/widgets/types/ButtonWidget.tsx` | 위젯 기반 버튼 렌더링 (67~86행) |
+| 최적화 버튼 (수정) | `frontend/components/screen/OptimizedButtonComponent.tsx` | 최적화된 버튼 렌더링 (643~674행) |
+| 아이콘 매핑 (신규) | `frontend/lib/button-icon-map.ts` | 액션별 추천 아이콘 + 동적 렌더링 유틸 |
+| 타입 정의 (참고) | `frontend/types/screen.ts` | ComponentData, componentConfig 타입 |
+
+---
+
+## 기술 참고
+
+### lucide-react 아이콘 동적 렌더링
+
+```typescript
+// button-icon-map.ts
+import { Check, Save, Trash2, Pencil, ... } from "lucide-react";
+
+const iconMap: Record<string, React.ComponentType<{ className?: string }>> = {
+  Check, Save, Trash2, Pencil, ...
+};
+
+export function renderButtonIcon(name: string, size: string | number) {
+  const IconComponent = iconMap[name];
+  if (!IconComponent) return null;
+  return <IconComponent style={getIconSizeStyle(size)} />;
+}
+```
+
+### 아이콘 크기 비율 매핑 (버튼 높이 대비 %)
+
+```typescript
+const iconSizePresets: Record<string, number> = {
+  "작게": 40,
+  "보통": 55,
+  "크게": 70,
+  "매우 크게": 85,
+};
+
+// 프리셋 문자열 → 비율(%) 반환. 레거시 값은 55(보통)로 폴백
+export function getIconPercent(size: string | number): number {
+  if (typeof size === "number") return size;
+  return iconSizePresets[size] ?? 55;
+}
+
+// 버튼 높이 대비 비율 + 정사각형 유지
+export function getIconSizeStyle(size: string | number): React.CSSProperties {
+  const pct = getIconPercent(size);
+  return { height: `${pct}%`, width: "auto", aspectRatio: "1 / 1" };
+}
+```
+
+### 외부 SVG 아이콘 렌더링
+
+```typescript
+import DOMPurify from "dompurify";
+
+export function renderSvgIcon(svgString: string, size: string | number) {
+  const clean = DOMPurify.sanitize(svgString, { USE_PROFILES: { svg: true } });
+  return (
+    <span
+      className="inline-flex items-center justify-center"
+      style={getIconSizeStyle(size)}
+      dangerouslySetInnerHTML={{ __html: clean }}
+    />
+  );
+}
+```
+
+### 버튼 액션별 추천 아이콘 구조
+
+```typescript
+const actionIconMap: Record<string, string[]> = {
+  save: ["Check", "Save", "CheckCircle", "CircleCheck", "FileCheck", "ShieldCheck"],
+  delete: ["Trash2", "Trash", "XCircle", "X", "Eraser", "CircleX"],
+  // ...
+};
+```
+
+### 현재 버튼 액션 목록 (활성)
+
+| 값 | 표시명 | 아이콘화 가능 |
+|-----|--------|-------------|
+| `save` | 저장 | O |
+| `delete` | 삭제 | O |
+| `edit` | 편집 | O |
+| `navigate` | 페이지 이동 | O |
+| `modal` | 모달 열기 | O |
+| `transferData` | 데이터 전달 | O |
+| `excel_download` | 엑셀 다운로드 | O |
+| `excel_upload` | 엑셀 업로드 | O |
+| `quickInsert` | 즉시 저장 | O |
+| `control` | 제어 흐름 | O |
+| `barcode_scan` | 바코드 스캔 | O |
+| `operation_control` | 운행알림 및 종료 | O |
+| `event` | 이벤트 발송 | O |
+| `copy` | 복사 (품목코드 초기화) | O |
+
+### 현재 버튼 액션 목록 (숨김/deprecated)
+
+| 값 | 표시명 | 아이콘화 가능 |
+|-----|--------|-------------|
+| `openRelatedModal` | 연관 데이터 버튼 모달 열기 | X (적절한 아이콘 없음) |
+| `openModalWithData` | (deprecated) 데이터 전달 + 모달 | X |
+| `view_table_history` | 테이블 이력 보기 | X |
+| `code_merge` | 코드 병합 | X |
+| `empty_vehicle` | 공차등록 | X |
diff --git a/docs/ycshin-node/BIC[체크]-버튼-아이콘화.md b/docs/ycshin-node/BIC[체크]-버튼-아이콘화.md
new file mode 100644
index 00000000..a02a15b1
--- /dev/null
+++ b/docs/ycshin-node/BIC[체크]-버튼-아이콘화.md
@@ -0,0 +1,158 @@
+# [체크리스트] 버튼 아이콘화 - 화면 디자이너 버튼 표시 모드 확장
+
+> 관련 문서: [계획서](./BIC[계획]-버튼-아이콘화.md) | [맥락노트](./BIC[맥락]-버튼-아이콘화.md)
+
+---
+
+## 공정 상태
+
+- 전체 진행률: **100%** (전 단계 구현 및 검증 완료)
+- 현재 단계: 완료
+
+---
+
+## 구현 체크리스트
+
+### 1단계: 아이콘 매핑 파일 생성
+
+- [x] `frontend/lib/button-icon-map.tsx` 생성
+- [x] 버튼 액션별 추천 아이콘 매핑 (`actionIconMap`) 정의 (14개 액션 x 6개 아이콘)
+- [x] 아이콘 크기 비율 매핑 (`iconSizePresets`) 정의 (작게/보통/크게/매우 크게, 버튼 높이 대비 %) + `getIconSizeStyle()` 유틸
+- [x] lucide 아이콘 동적 렌더링 포함 `getButtonDisplayContent()` 구현
+- [x] SVG 아이콘 렌더링 (DOMPurify 정화 via `isomorphic-dompurify`)
+- [x] 아이콘 이름 → 컴포넌트 매핑 객체 (`iconMap`) + `addToIconMap()` 동적 추가
+- [x] deprecated 액션용 안내 문구 상수 (`NO_ICON_MESSAGE`) 정의
+- [x] `isomorphic-dompurify` 기존 설치 확인 (추가 설치 불필요)
+- [x] `ButtonIconRenderer` 공용 컴포넌트 추가 (모든 렌더러에서 재사용)
+- [x] `getDefaultIconForAction()` 디폴트 아이콘 유틸 함수 추가 (액션별 첫 번째 추천 / 범용 폴백)
+- [x] `FALLBACK_ICON_NAME` 상수 + `SquareMousePointer` import/매핑 추가
+
+### 2단계: ButtonConfigPanel 수정
+
+- [x] 표시 모드 버튼 그룹 UI 추가 (텍스트 / 아이콘 / 아이콘+텍스트)
+- [x] `displayMode` 상태 관리 및 `onUpdateProperty` 연동
+- [x] 아이콘 모드 선택 시 조건부 UI 분기 (텍스트 입력 숨김 → 아이콘 선택 표시)
+- [x] 아이콘+텍스트 모드 선택 시 아이콘 선택 + 텍스트 입력 **동시** 표시
+- [x] 버튼 액션별 추천 아이콘 그리드 렌더링 (4열 그리드)
+- [x] 선택된 아이콘 하이라이트 (`ring-2 ring-primary/30 border-primary`)
+- [x] 아이콘 크기 비율 프리셋 버튼 그룹 (작게/보통/크게/매우 크게, 한글 라벨)
+- [x] px 직접 입력 필드 제거 (비율 프리셋만 제공)
+- [x] `icon.name`, `icon.size` 를 `onUpdateProperty`로 저장
+- [x] 아이콘 색상 컬러 피커 구현 (`ColorPickerWithTransparent` 재사용)
+- [x] "텍스트 색상과 동일" 초기화 버튼 구현
+- [x] 텍스트 위치 4방향 설정 추가 (`iconTextPosition`, 왼쪽/오른쪽/위쪽/아래쪽)
+- [x] 아이콘-텍스트 간격 설정 추가 (`iconGap`, 슬라이더 + 직접 입력, 아이콘+텍스트 모드 전용)
+- [x] 아이콘 모드 레이아웃 안내 문구 표시 (Info 아이콘 + bg-blue-50 박스)
+- [x] 액션 변경 시 선택 아이콘 자동 초기화 로직 (추천 목록에 없으면 해제)
+- [x] deprecated 액션에서 안내 문구 + 커스텀 아이콘 추가 버튼 표시
+- [x] 아이콘/아이콘+텍스트 모드 전환 시 아이콘 미선택이면 디폴트 아이콘 자동 부여
+- [x] 커스텀 아이콘 삭제 시 디폴트 아이콘으로 자동 복귀 (텍스트 모드 전환 방지)
+
+### 3단계: 커스텀 아이콘 추가/삭제 (lucide 검색)
+
+- [x] "lucide 검색" 버튼 UI
+- [x] lucide 아이콘 검색 팝오버 (Popover + Command + CommandInput)
+- [x] `import { icons } from "lucide-react"` 기반 전체 아이콘 검색/필터링
+- [x] 선택 시 `componentConfig.customIcons` 배열 추가 + `addToIconMap` 동적 등록
+- [x] lucide 커스텀 아이콘 그리드 렌더링 (추천 아이콘 아래, 구분선 포함)
+- [x] lucide 커스텀 아이콘 X 버튼으로 개별 삭제
+
+### 3-1단계: 커스텀 아이콘 추가/삭제 (SVG 붙여넣기)
+
+- [x] "SVG 붙여넣기" 버튼 UI (Popover)
+- [x] SVG 입력 textarea + DOMPurify 실시간 미리보기
+- [x] SVG 유효성 검사 (`<svg` 태그 포함 여부)
+- [x] 아이콘 이름 입력 필드 (관리자가 구분용 이름 지정)
+- [x] DOMPurify로 SVG 정화(sanitize) 후 저장
+- [x] `componentConfig.customSvgIcons` 배열에 `{ name, svg }` 추가
+- [x] SVG 커스텀 아이콘 그리드 렌더링 (lucide 커스텀 아이콘과 함께 표시)
+- [x] SVG 커스텀 아이콘 X 버튼으로 개별 삭제
+- [x] 커스텀 아이콘(lucide + SVG 모두)이 모든 버튼 액션에서 공통 노출
+
+### 4단계: 버튼 렌더링 수정 (뷰어/위젯)
+
+- [x] `InteractiveScreenViewerDynamic.tsx` - `ButtonIconRenderer` 적용
+- [x] `InteractiveScreenViewer.tsx` - `ButtonIconRenderer` 적용
+- [x] `ButtonWidget.tsx` - `ButtonIconRenderer` 적용 (디자인/실행 모드 모두)
+- [x] `OptimizedButtonComponent.tsx` - `ButtonIconRenderer` 적용 (실행 중 "처리 중..." 유지)
+- [x] `ButtonPrimaryComponent.tsx` - `ButtonIconRenderer` 적용 (v2-button-primary 캔버스 렌더링)
+- [x] lucide 아이콘 렌더링 (`icon.type === "lucide"`, `getLucideIcon` 조회)
+- [x] SVG 아이콘 렌더링 (`icon.type === "svg"`, DOMPurify 정화 후 innerHTML)
+- [x] 아이콘+텍스트 모드: `inline-flex items-center` + 동적 `gap` (iconGap px)
+- [x] `icon.color` 설정 시 아이콘만 별도 색상 적용 (inline style)
+- [x] `icon.color` 미설정 시 textColor 상속 (currentColor 기본)
+- [x] 아이콘 크기 비율 프리셋 `getIconSizeStyle()` 처리 (버튼 높이 대비 %)
+- [x] 텍스트 위치 4방향 렌더링 (`flexDirection` + 요소 순서 조합)
+
+### 4-2단계: 버튼 테두리 이중 적용 수정
+
+- [x] `RealtimePreviewDynamic.tsx` — position wrapper에서 버튼 컴포넌트 border strip 추가
+- [x] `ButtonPrimaryComponent.tsx` — 외부 wrapper에서 border 속성 destructure 제거
+- [x] `ButtonPrimaryComponent.tsx` — `border: "none"` shorthand 제거, 개별 longhand 속성으로 변경
+- [x] `isButtonComponent` 조건에 `"v2-button-primary"` 추가
+
+### 4-1단계: 키보드 단축키 충돌 수정
+
+- [x] `ScreenDesigner.tsx` 글로벌 keydown 핸들러에 입력 필드 감지 가드 추가
+- [x] `browserShortcuts` 배열에서 `Ctrl+V` 제거
+- [x] 입력 필드(input/textarea/select/contentEditable) 포커스 시 Ctrl+A/C/V/Z 기본 동작 허용
+- [x] SVG 붙여넣기 textarea에 `onPaste`/`onKeyDown` stopPropagation 핸들러 추가
+
+### 5단계: 검증
+
+- [x] 텍스트 모드: 기존 동작 변화 없음 확인 (하위 호환성)
+- [x] `displayMode` 없는 기존 버튼: 텍스트 모드로 정상 동작
+- [x] 아이콘 모드 선택 → 추천 아이콘 6개 그리드 표시
+- [x] 아이콘 선택 → 캔버스(오른쪽 프리뷰) 및 실제 화면에서 아이콘 렌더링 확인
+- [x] 아이콘 크기 비율 프리셋 변경 → 버튼 높이 대비 비율 반영 확인
+- [x] 텍스트 위치 4방향(왼/오른/위/아래) 변경 → 레이아웃 방향 반영 확인
+- [x] 버튼 테두리 설정 → 내부 버튼에만 적용, 외부 wrapper에 이중 적용 없음 확인
+- [x] 버튼 액션 변경 → 추천 아이콘 목록 갱신 확인
+- [x] lucide 커스텀 아이콘 추가 → 모든 액션에서 노출 확인
+- [x] SVG 커스텀 아이콘 붙여넣기 → 미리보기 → 추가 → 모든 액션에서 노출 확인
+- [x] SVG에 악성 코드 삽입 시도 → DOMPurify 정화 후 안전 렌더링 확인
+- [x] 커스텀 아이콘 삭제 → 목록에서 제거 확인
+- [x] deprecated 액션에서 안내 문구 + 커스텀 아이콘 추가 가능 확인
+- [x] 아이콘+텍스트 모드: 아이콘 + 텍스트 나란히 렌더링 확인
+- [x] 아이콘+텍스트 간격 조절: 슬라이더/직접 입력으로 간격 변경 → 실시간 반영 확인
+- [x] 아이콘 색상 미설정 → textColor와 동일한 색상 확인
+- [x] 아이콘 색상 설정 → 아이콘만 해당 색상, 텍스트는 textColor 유지 확인
+- [x] 외부 SVG (고유 색상) → icon.color 설정해도 SVG 원본 색상 유지 확인
+- [x] "텍스트 색상과 동일" 버튼 → icon.color 해제되고 textColor 상속 복원 확인
+- [x] 레이아웃 안내 문구: 아이콘 모드에서만 표시, 다른 모드에서 숨김 확인
+- [x] 입력 필드에서 Ctrl+A/C/V/Z 단축키 정상 동작 확인
+- [x] 아이콘 모드 전환 시 디폴트 아이콘 자동 선택 → 캔버스에 즉시 반영 확인
+- [x] 커스텀 아이콘 삭제 시 디폴트 아이콘으로 복귀 → 아이콘 모드 유지 확인
+- [x] deprecated 액션에서 디폴트 폴백 아이콘(SquareMousePointer) 표시 확인
+
+### 6단계: 정리
+
+- [x] TypeScript 컴파일 에러 없음 확인 (우리 파일 6개 모두 0 에러)
+- [x] 불필요한 import 없음 확인
+- [x] 이 체크리스트 완료 표시 업데이트
+
+---
+
+## 변경 이력
+
+| 날짜 | 내용 |
+|------|------|
+| 2026-03-04 | 계획서, 맥락노트, 체크리스트 작성 완료 |
+| 2026-03-04 | 외부 SVG 붙여넣기 기능 추가 (3개 문서 모두 반영) |
+| 2026-03-04 | 아이콘+텍스트 모드, 레이아웃 안내 추가 |
+| 2026-03-04 | 설정 패널 내 미리보기 제거 (오른쪽 캔버스 프리뷰로 대체) |
+| 2026-03-04 | 아이콘 색상 설정 추가 (icon.color, 기본값 textColor 상속) |
+| 2026-03-04 | 3개 문서 교차 검토 — 개요 누락 보완, 시각 예시 문구 통일, 렌더 함수 px 대응, 용어 명확화 |
+| 2026-03-04 | 구현 완료 — 1~4단계 코드 작성, 6단계 린트/타입 검증 통과 |
+| 2026-03-04 | 아이콘-텍스트 간격 설정 추가 (iconGap, 슬라이더+직접 입력) |
+| 2026-03-04 | noIconAction에서 커스텀 아이콘 추가 허용 + 안내 문구 변경 |
+| 2026-03-04 | ScreenDesigner 키보드 단축키 수정 — 입력 필드에서 텍스트 편집 단축키 허용 |
+| 2026-03-04 | SVG 붙여넣기 textarea에 onPaste/onKeyDown 핸들러 추가 |
+| 2026-03-04 | SVG 커스텀 아이콘 이름 중복 방지 (자동 넘버링) |
+| 2026-03-04 | 디폴트 아이콘 자동 부여 — 모드 전환 시 자동 선택, 커스텀 삭제 시 디폴트 복귀 |
+| 2026-03-04 | `getDefaultIconForAction()` 유틸 + `SquareMousePointer` 폴백 아이콘 추가 |
+| 2026-03-04 | 3개 문서 변경사항 동기화 및 코드 정리 |
+| 2026-03-04 | 아이콘 크기: 절대 px → 버튼 높이 대비 비율(%) 4단계 프리셋으로 변경, px 직접 입력 제거 |
+| 2026-03-04 | 텍스트 위치 4방향 설정 추가 (왼쪽/오른쪽/위쪽/아래쪽) |
+| 2026-03-04 | 버튼 테두리 이중 적용 수정 — position wrapper에서 border strip, border shorthand 제거 |
+| 2026-03-04 | 프리셋 라벨 한글화 (작게/보통/크게/매우 크게), 라벨 "아이콘 크기 비율"로 변경 |
diff --git a/docs/ycshin-node/MST[계획]-다중선택-라벨표시.md b/docs/ycshin-node/MST[계획]-다중선택-라벨표시.md
new file mode 100644
index 00000000..01761b9c
--- /dev/null
+++ b/docs/ycshin-node/MST[계획]-다중선택-라벨표시.md
@@ -0,0 +1,146 @@
+# [계획서] V2Select 다중 선택 드롭다운 - 선택 항목 표시 개선
+
+> 관련 문서: [맥락노트](./MST[맥락노트]-v2select-multiselect-tooltip.md) | [체크리스트](./MST[체크리스트]-v2select-multiselect-tooltip.md)
+
+## 개요
+
+모든 화면에서 다중 선택 가능한 드롭다운(`V2Select` - `DropdownSelect`)의 선택 항목 표시 방식을 개선합니다.
+
+---
+
+## 현재 동작
+
+- 다중 선택 시 `"3개 선택됨"` 같은 텍스트만 표시
+- 어떤 항목이 선택되었는지 드롭다운을 열어야만 확인 가능
+
+### 현재 코드 (V2Select.tsx - DropdownSelect, 174~178행)
+
+```tsx
+{selectedLabels.length > 0
+  ? multiple 
+    ? `${selectedLabels.length}개 선택됨`
+    : selectedLabels[0]
+  : placeholder}
+```
+
+---
+
+## 변경 후 동작
+
+### 1. 선택된 항목 라벨을 쉼표로 연결하여 한 줄로 표시
+
+- 예: `"구매품, 판매품, 재고품"`
+- `truncate` (text-overflow: ellipsis)로 필드 너비를 넘으면 말줄임(`...`) 처리
+- 무조건 한 줄 표시, 넘치면 `...`으로 숨김
+
+### 2. 텍스트가 말줄임(`...`) 처리될 때만 호버 툴팁 표시
+
+- 필드 너비를 넘어서 `...`으로 잘릴 때만 툴팁 활성화
+- 필드 내에 전부 보이면 툴팁 불필요
+- 툴팁 내용은 세로 나열로 각 항목을 한눈에 확인 가능
+- 툴팁은 딜레이 없이 즉시 표시
+
+---
+
+## 시각적 동작 예시
+
+| 상태 | 필드 내 표시 | 호버 시 툴팁 |
+|------|-------------|-------------|
+| 미선택 | `선택` (placeholder) | 없음 |
+| 1개 선택 | `구매품` | 없음 |
+| 3개 선택 (필드 내 수용) | `구매품, 판매품, 재고품` | 없음 (잘리지 않으므로) |
+| 5개 선택 (필드 넘침) | `구매품, 판매품, 재고품, 외...` | 구매품 / 판매품 / 재고품 / 외주품 / 반제품 (세로 나열) |
+
+---
+
+## 변경 대상
+
+- **파일**: `frontend/components/v2/V2Select.tsx`
+- **컴포넌트**: `DropdownSelect` 내부 표시 텍스트 부분 (170~178행)
+- **적용 범위**: `DropdownSelect`를 사용하는 모든 화면 (품목정보, 기타 모든 모달 포함)
+- **변경 규모**: 약 30줄 내외 소규모 변경
+
+---
+
+## 코드 설계
+
+### 추가 import
+
+```tsx
+import { useRef, useEffect, useState } from "react";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+```
+
+### 말줄임 감지 로직
+
+```tsx
+// 텍스트가 잘리는지(truncated) 감지
+const textRef = useRef<HTMLSpanElement>(null);
+const [isTruncated, setIsTruncated] = useState(false);
+
+useEffect(() => {
+  const el = textRef.current;
+  if (el) {
+    setIsTruncated(el.scrollWidth > el.clientWidth);
+  }
+}, [selectedLabels]);
+```
+
+### 수정 코드 (DropdownSelect 내부, 170~178행 대체)
+
+```tsx
+const displayText = selectedLabels.length > 0
+  ? (multiple ? selectedLabels.join(", ") : selectedLabels[0])
+  : placeholder;
+
+const isPlaceholder = selectedLabels.length === 0;
+
+// 렌더링 부분
+{isTruncated && multiple ? (
+  <TooltipProvider delayDuration={0}>
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <span
+          ref={textRef}
+          className={cn("truncate flex-1 text-left", isPlaceholder && "text-muted-foreground")}
+          {...(isPlaceholder ? { "data-placeholder": placeholder } : {})}
+        >
+          {displayText}
+        </span>
+      </TooltipTrigger>
+      <TooltipContent side="top" className="max-w-[300px]">
+        <div className="space-y-0.5 text-xs">
+          {selectedLabels.map((label, i) => (
+            <div key={i}>{label}</div>
+          ))}
+        </div>
+      </TooltipContent>
+    </Tooltip>
+  </TooltipProvider>
+) : (
+  <span
+    ref={textRef}
+    className={cn("truncate flex-1 text-left", isPlaceholder && "text-muted-foreground")}
+    {...(isPlaceholder ? { "data-placeholder": placeholder } : {})}
+  >
+    {displayText}
+  </span>
+)}
+```
+
+---
+
+## 설계 원칙
+
+- 기존 단일 선택 동작은 변경하지 않음
+- `DropdownSelect` 공통 컴포넌트 수정이므로 모든 화면에 자동 적용
+- 무조건 한 줄 표시, 넘치면 `...`으로 말줄임
+- 툴팁은 텍스트가 실제로 잘릴 때(`scrollWidth > clientWidth`)만 표시
+- 툴팁 내용은 세로 나열로 각 항목 확인 용이
+- 툴팁 딜레이 없음 (`delayDuration={0}`)
+- shadcn 표준 Tooltip 컴포넌트 사용으로 프로젝트 일관성 유지
diff --git a/docs/ycshin-node/MST[맥락]-다중선택-라벨표시.md b/docs/ycshin-node/MST[맥락]-다중선택-라벨표시.md
new file mode 100644
index 00000000..155dde59
--- /dev/null
+++ b/docs/ycshin-node/MST[맥락]-다중선택-라벨표시.md
@@ -0,0 +1,95 @@
+# [맥락노트] V2Select 다중 선택 드롭다운 - 선택 항목 표시 개선
+
+> 관련 문서: [계획서](./MST[계획서]-v2select-multiselect-tooltip.md) | [체크리스트](./MST[체크리스트]-v2select-multiselect-tooltip.md)
+
+---
+
+## 왜 이 작업을 하는가
+
+- 사용자가 수정 모달에서 다중 선택 드롭다운을 사용할 때 `"3개 선택됨"` 만 보임
+- 드롭다운을 다시 열어봐야만 무엇이 선택됐는지 확인 가능 → UX 불편
+- 선택 항목을 직접 보여주고, 넘치면 툴팁으로 확인할 수 있게 개선
+
+---
+
+## 핵심 결정 사항과 근거
+
+### 1. "n개 선택됨" → 라벨 쉼표 나열
+
+- **결정**: `"구매품, 판매품, 재고품"` 형태로 표시
+- **근거**: 사용자가 드롭다운을 열지 않아도 선택 내용을 바로 확인 가능
+
+### 2. 무조건 한 줄, 넘치면 말줄임(`...`)
+
+- **결정**: 여러 줄 줄바꿈 없이 한 줄 고정, `truncate`로 오버플로우 처리
+- **근거**: 드롭다운 필드 높이가 고정되어 있어 여러 줄 표시 시 레이아웃이 깨짐
+
+### 3. 텍스트가 잘릴 때만 툴팁 표시
+
+- **결정**: `scrollWidth > clientWidth` 비교로 실제 잘림 여부 감지 후 툴팁 활성화
+- **근거**: 전부 보이는데 툴팁이 뜨면 오히려 방해. 필요할 때만 보여야 함
+- **대안 검토**: "2개 이상이면 항상 툴팁" → 기각 (불필요한 툴팁 발생)
+
+### 4. 툴팁 내용은 세로 나열
+
+- **결정**: 툴팁 안에서 항목을 줄바꿈으로 세로 나열
+- **근거**: 가로 나열 시 툴팁도 길어져서 읽기 어려움. 세로가 한눈에 파악하기 좋음
+
+### 5. 툴팁 딜레이 0ms
+
+- **결정**: `delayDuration={0}` 즉시 표시
+- **근거**: 사용자가 "무엇을 선택했는지" 확인하려는 의도적 행동이므로 즉시 응답해야 함
+
+### 6. Radix Tooltip 대신 커스텀 호버 툴팁 사용
+
+- **결정**: Radix Tooltip을 사용하지 않고 `onMouseEnter`/`onMouseLeave`로 직접 제어
+- **근거**: Radix Tooltip + Popover 조합은 이벤트 충돌 발생. 내부 배치든 외부 래핑이든 Popover가 호버를 가로챔
+- **시도 1**: Tooltip을 Button 안에 배치 → Popover가 이벤트 가로챔 (실패)
+- **시도 2**: Radix 공식 패턴 (TooltipTrigger > PopoverTrigger > Button 체이닝) → 여전히 동작 안 함 (실패)
+- **최종**: wrapper div에 마우스 이벤트 + 절대 위치 div로 툴팁 렌더링 (성공)
+- **추가**: Popover 열릴 때 `setHoverTooltip(false)`로 툴팁 자동 숨김
+
+### 8. 선택 항목 표시 순서는 드롭다운 옵션 순서 기준
+
+- **결정**: 사용자가 클릭한 순서가 아닌 드롭다운 옵션 목록 순서대로 표시
+- **근거**: 선택 순서대로 보여주면 매번 순서가 달라져서 혼란. 옵션 순서 기준이 일관적이고 예측 가능
+- **구현**: `selectedValues.map(...)` → `safeOptions.filter(...).map(...)` 으로 변경
+
+### 9. DropdownSelect 공통 컴포넌트 수정
+
+- **결정**: 특정 화면이 아닌 `DropdownSelect` 자체를 수정
+- **근거**: 품목정보뿐 아니라 모든 화면에서 동일한 문제가 있으므로 공통 해결
+
+---
+
+## 관련 파일 위치
+
+| 구분 | 파일 경로 | 설명 |
+|------|----------|------|
+| 수정 대상 | `frontend/components/v2/V2Select.tsx` | DropdownSelect 컴포넌트 (170~178행) |
+| 타입 정의 | `frontend/types/v2-components.ts` | V2SelectProps, SelectOption 타입 |
+| UI 컴포넌트 | `frontend/components/ui/tooltip.tsx` | shadcn Tooltip 컴포넌트 |
+| 렌더러 | `frontend/lib/registry/components/v2-select/V2SelectRenderer.tsx` | V2Select를 레지스트리에 연결 |
+| 수정 모달 | `frontend/components/screen/EditModal.tsx` | 공통 편집 모달 |
+
+---
+
+## 기술 참고
+
+### truncate 감지 방식
+
+```
+scrollWidth: 텍스트의 실제 전체 너비 (보이지 않는 부분 포함)
+clientWidth: 요소의 보이는 너비
+
+scrollWidth > clientWidth → 텍스트가 잘리고 있음 (... 표시 중)
+```
+
+### selectedLabels 계산 흐름
+
+```
+value (string[]) → selectedValues → safeOptions에서 label 매칭 → selectedLabels (string[])
+```
+
+- `selectedLabels`는 이미 `DropdownSelect` 내부에서 `useMemo`로 계산됨 (126~130행)
+- 추가 데이터 fetching 불필요, 기존 값을 `.join(", ")`로 결합하면 됨
diff --git a/docs/ycshin-node/MST[체크]-다중선택-라벨표시.md b/docs/ycshin-node/MST[체크]-다중선택-라벨표시.md
new file mode 100644
index 00000000..c3599343
--- /dev/null
+++ b/docs/ycshin-node/MST[체크]-다중선택-라벨표시.md
@@ -0,0 +1,54 @@
+# [체크리스트] V2Select 다중 선택 드롭다운 - 선택 항목 표시 개선
+
+> 관련 문서: [계획서](./MST[계획서]-v2select-multiselect-tooltip.md) | [맥락노트](./MST[맥락노트]-v2select-multiselect-tooltip.md)
+
+---
+
+## 공정 상태
+
+- 전체 진행률: **100%** (완료)
+- 현재 단계: 전체 완료
+
+---
+
+## 구현 체크리스트
+
+### 1단계: 코드 수정
+
+- [x] `V2Select.tsx`에 Tooltip 관련 import 추가
+- [x] `DropdownSelect` 내부에 `textRef`, `isTruncated` 상태 추가
+- [x] `useEffect`로 `scrollWidth > clientWidth` 감지 로직 추가
+- [x] 표시 텍스트를 `selectedLabels.join(", ")`로 변경
+- [x] `isTruncated && multiple` 조건으로 Tooltip 래핑
+- [x] 툴팁 내용을 세로 나열 (`space-y-0.5`)로 구성
+- [x] `delayDuration={0}` 설정
+- [x] Radix Tooltip → 커스텀 호버 툴팁으로 변경 (onMouseEnter/onMouseLeave + 절대 위치 div)
+- [x] 선택 항목 표시 순서를 드롭다운 옵션 순서 기준으로 변경
+
+### 2단계: 검증
+
+- [x] 단일 선택 모드: 기존 동작 변화 없음 확인
+- [x] 다중 선택 1개: 라벨 정상 표시, 툴팁 없음
+- [x] 다중 선택 3개 (필드 내 수용): 쉼표 나열 표시, 툴팁 없음
+- [x] 다중 선택 5개+ (필드 넘침): 말줄임 표시, 호버 시 툴팁 세로 나열
+- [x] 품목정보 수정 모달에서 동작 확인
+- [x] 다른 화면의 다중 선택 드롭다운에서도 동작 확인
+
+### 3단계: 정리
+
+- [x] 린트 에러 없음 확인
+- [x] 이 체크리스트 완료 표시 업데이트
+
+---
+
+## 변경 이력
+
+| 날짜 | 내용 |
+|------|------|
+| 2026-03-04 | 설계 문서 작성 완료 |
+| 2026-03-04 | 맥락노트, 체크리스트 작성 완료 |
+| 2026-03-04 | 파일명 MST 접두사 적용 |
+| 2026-03-04 | 1단계 코드 수정 완료 (V2Select.tsx) |
+| 2026-03-04 | Radix Tooltip이 Popover와 충돌 → 커스텀 호버 툴팁으로 변경 |
+| 2026-03-04 | 사용자 검증 완료, 전체 작업 완료 |
+| 2026-03-04 | 선택 항목 표시 순서를 옵션 순서 기준으로 변경 |
diff --git a/docs/ycshin-node/탭_시스템_설계.md b/docs/ycshin-node/탭_시스템_설계.md
new file mode 100644
index 00000000..50ca2468
--- /dev/null
+++ b/docs/ycshin-node/탭_시스템_설계.md
@@ -0,0 +1,241 @@
+# 탭 시스템 아키텍처 및 구현 계획
+
+## 1. 개요
+
+사이드바 메뉴 클릭 시 `router.push()` 페이지 이동 방식에서 **탭 기반 멀티 화면 시스템**으로 전환한다.
+
+```
+                    ┌──────────────────────────┐
+                    │    Tab Data Layer (중앙)   │
+  API 응답 ────────→│                          │
+                    │  탭별 상태 저장소          │
+                    │  ├─ formData             │
+                    │  ├─ selectedRows          │
+                    │  ├─ scrollPosition        │
+                    │  ├─ modalState            │
+                    │  ├─ sortState             │
+                    │  └─ cacheState            │
+                    │                          │
+                    │  공통 규칙 엔진            │
+                    │  ├─ 날짜 포맷 규칙        │
+                    │  ├─ 숫자/통화 포맷 규칙    │
+                    │  ├─ 로케일 처리 규칙       │
+                    │  ├─ 유효성 검증 규칙       │
+                    │  └─ 데이터 타입 변환 규칙   │
+                    │                          │
+                    │  F5 복원 / 캐시 관리       │
+                    │  (sessionStorage 중앙관리)  │
+                    └────────────┬─────────────┘
+                                 │
+                      가공 완료된 데이터
+                                 │
+                ┌────────────────┼────────────────┐
+                │                │                │
+           화면 A (경량)    화면 B (경량)    화면 C (경량)
+           렌더링만 담당    렌더링만 담당    렌더링만 담당
+```
+
+## 2. 레이어 구조
+
+| 레이어 | 책임 |
+|---|---|
+| **Tab Data Layer** | 탭별 상태 보관, 캐시, 복원, 데이터 가공 |
+| **공통 규칙 엔진** | 날짜/숫자/로케일 포맷, 유효성 검증 |
+| **화면 컴포넌트** | 가공된 데이터를 받아서 렌더링만 담당 |
+
+## 3. 파일 구성
+
+| 파일 | 역할 |
+|---|---|
+| `stores/tabStore.ts` | Zustand 기반 탭 상태 관리 |
+| `components/layout/TabBar.tsx` | 탭 바 UI (드래그, 우클릭, 오버플로우) |
+| `components/layout/TabContent.tsx` | 탭별 콘텐츠 렌더링 (컨테이너) |
+| `components/layout/EmptyDashboard.tsx` | 탭 없을 때 안내 화면 |
+| `components/layout/AppLayout.tsx` | 전체 레이아웃 (사이드바 + 탭 + 콘텐츠) |
+| `lib/tabStateCache.ts` | 탭별 상태 캐싱 엔진 |
+| `lib/formatting/rules.ts` | 포맷 규칙 정의 |
+| `lib/formatting/index.ts` | formatDate, formatNumber, formatCurrency |
+| `app/(main)/screens/[screenId]/page.tsx` | 화면별 렌더링 |
+
+## 4. 기술 스택
+
+- Next.js 15, React 19, Zustand
+- Tailwind CSS, shadcn/ui
+
+---
+
+## 5. Phase 1: 탭 껍데기
+
+### 5-1. Zustand 탭 Store (`stores/tabStore.ts`)
+- [ ] zustand 직접 의존성 추가
+- [ ] Tab 인터페이스: id, type, title, screenId, menuObjid, adminUrl
+- [ ] 탭 목록, 활성 탭 ID
+- [ ] openTab, closeTab, switchTab, refreshTab
+- [ ] closeOtherTabs, closeTabsToLeft, closeTabsToRight, closeAllTabs
+- [ ] updateTabOrder (드래그 순서 변경)
+- [ ] 중복 방지: 같은 탭이면 해당 탭으로 이동
+- [ ] 닫기 후 왼쪽 탭으로 이동, 왼쪽 없으면 오른쪽
+- [ ] sessionStorage 영속화 (persist middleware)
+- [ ] 탭 ID 생성 규칙: V2 화면 `tab-{screenId}-{menuObjid}`, URL 탭 `tab-url-{menuObjid}`
+
+### 5-2. TabBar 컴포넌트 (`components/layout/TabBar.tsx`)
+- [ ] 고정 너비 탭, 화면 너비에 맞게 동적 개수
+- [ ] 활성 탭: 새로고침 버튼 + X 버튼
+- [ ] 비활성 탭: X 버튼만
+- [ ] 오버플로우 시 +N 드롭다운 (ResizeObserver 감시)
+- [ ] 드래그 순서 변경 (mousedown/move/up, DOM transform 직접 조작)
+- [ ] 사이드바 메뉴 드래그 드롭 수신 (`application/tab-menu` 커스텀 데이터, 마우스 위치에 삽입)
+- [ ] 우클릭 컨텍스트 메뉴 (새로고침/왼쪽닫기/오른쪽닫기/다른탭닫기/모든탭닫기)
+- [ ] 휠 클릭: 탭 즉시 닫기
+
+### 5-3. TabContent 컴포넌트 (`components/layout/TabContent.tsx`)
+- [ ] display:none 방식 (비활성 탭 DOM 유지, 상태 보존)
+- [ ] 지연 마운트 (한 번 활성화된 탭만 마운트)
+- [ ] 안정적 순서 유지 (탭 순서 변경 시 리마운트 방지)
+- [ ] 탭별 모달 격리 (DialogPortalContainerContext)
+- [ ] tab.type === "screen" -> ScreenViewPageWrapper 임베딩
+- [ ] tab.type === "admin" -> 동적 import로 관리자 페이지 렌더링
+
+### 5-4. EmptyDashboard 컴포넌트 (`components/layout/EmptyDashboard.tsx`)
+- [ ] 탭이 없을 때 "사이드바에서 메뉴를 선택하여 탭을 추가하세요" 표시
+
+### 5-5. AppLayout 수정 (`components/layout/AppLayout.tsx`)
+- [ ] handleMenuClick: router.push -> tabStore.openTab 호출
+- [ ] 레이아웃: main 영역을 TabBar + TabContent로 교체
+- [ ] children prop 제거 (탭이 콘텐츠 관리)
+- [ ] 사이드바 메뉴 드래그 가능하게 (draggable)
+
+### 5-6. 라우팅 연동
+- [ ] `app/(main)/layout.tsx` 수정 - children 대신 탭 시스템
+- [ ] URL 직접 접근 시 탭으로 열기 (북마크/공유 링크 대응)
+
+---
+
+## 6. Phase 2: F5 최대 복원
+
+### 6-1. 탭 상태 캐싱 엔진 (`lib/tabStateCache.ts`)
+- [ ] 탭별 상태 저장/복원 (sessionStorage)
+- [ ] 저장 대상: formData, selectedRows, sortState, scrollPosition, modalState, checkboxState
+- [ ] debounce 적용 (상태 변경마다 저장하지 않음)
+
+### 6-2. 복원 로직
+- [ ] 활성 탭: fresh API 호출 (캐시 데이터 무시)
+- [ ] 비활성 탭: 캐시에서 복원
+- [ ] 탭 닫기 시 해당 탭의 캐시 키 일괄 삭제
+
+### 6-3. 캐시 키 관리 (clearTabStateCache)
+
+탭 닫기/새로고침 시 관련 sessionStorage 키 일괄 제거:
+- `tab-cache-{screenId}-{menuObjid}`
+- `page-scroll-{screenId}-{menuObjid}`
+- `tsp-{screenId}-*`, `table-state-{screenId}-*`
+- `split-sel-{screenId}-*`, `catval-sel-{screenId}-*`
+- `bom-tree-{screenId}-*`
+- URL 탭: `tsp-{urlHash}-*`, `admin-scroll-{url}`
+
+---
+
+## 7. Phase 3: 포맷팅 중앙화
+
+### 7-1. 포맷팅 규칙 엔진
+
+```typescript
+// lib/formatting/rules.ts
+
+interface FormatRules {
+  date: {
+    display: string;      // "YYYY-MM-DD"
+    datetime: string;     // "YYYY-MM-DD HH:mm:ss"
+    input: string;        // "YYYY-MM-DD"
+  };
+  number: {
+    locale: string;       // 사용자 로케일 기반
+    decimals: number;     // 기본 소수점 자릿수
+  };
+  currency: {
+    code: string;         // 회사 설정 기반
+    locale: string;
+  };
+}
+
+export function formatValue(value: any, dataType: string, rules: FormatRules): string;
+export function formatDate(value: any, format?: string): string;
+export function formatNumber(value: any, locale?: string): string;
+export function formatCurrency(value: any, currencyCode?: string): string;
+```
+
+### 7-2. 하드코딩 교체 대상
+- [ ] V2DateRenderer.tsx
+- [ ] EditModal.tsx
+- [ ] InteractiveDataTable.tsx
+- [ ] FlowWidget.tsx
+- [ ] AggregationWidgetComponent.tsx
+- [ ] aggregation.ts (피벗)
+- [ ] 기타 하드코딩 파일들
+
+---
+
+## 8. Phase 4: ScreenViewPage 경량화
+- [ ] 탭 데이터 레이어에서 받은 데이터로 렌더링만 담당
+- [ ] API 호출, 캐시, 복원 로직 제거 (탭 레이어가 담당)
+- [ ] 관리자 페이지도 동일한 데이터 레이어 패턴 적용
+
+---
+
+---
+
+## 구현 완료: 다중 스크롤 영역 F5 복원
+
+### 개요
+
+split panel 등 한 탭 안에 **스크롤 영역이 여러 개**인 화면에서, F5 새로고침 후에도 각 영역의 스크롤 위치가 복원된다.
+
+탭 전환 시에는 `display: none` 방식으로 DOM이 유지되므로 브라우저가 스크롤을 자연 보존한다. 이 기능은 **F5 새로고침** 전용이다.
+
+### 동작 방식
+
+탭 내 모든 스크롤 가능한 요소를 DOM 경로(`"0/1/0/2"` 형태)와 함께 저장한다.
+
+```
+scrollPositions: [
+  { path: "0/1/0/2", top: 150, left: 0 },     // 예: 좌측 패널
+  { path: "0/1/1/3/1", top: 420, left: 0 },   // 예: 우측 패널
+]
+```
+
+- **실시간 추적**: 스크롤 이벤트 발생 시 해당 요소의 경로와 위치를 Map에 기록
+- **저장 시점**: 탭 전환 시 + `beforeunload`(F5/닫기) 시 sessionStorage에 저장
+- **복원 시점**: 탭 활성화 시 경로를 기반으로 각 요소를 찾아 개별 복원
+
+### 관련 파일 및 주요 함수
+
+| 파일 | 역할 |
+|---|---|
+| `lib/tabStateCache.ts` | 스크롤 캡처/복원 핵심 로직 |
+| `components/layout/TabContent.tsx` | 스크롤 이벤트 감지, 저장/복원 호출 |
+
+**`tabStateCache.ts` 핵심 함수**:
+
+| 함수 | 설명 |
+|---|---|
+| `getElementPath(element, container)` | 요소의 DOM 경로를 자식 인덱스 문자열로 생성 |
+| `captureAllScrollPositions(container)` | TreeWalker로 컨테이너 하위 모든 스크롤 요소의 위치를 일괄 캡처 |
+| `restoreAllScrollPositions(container, positions)` | 경로 기반으로 각 요소를 찾아 스크롤 위치 복원 (콘텐츠 렌더링 대기 폴링 포함) |
+
+**`TabContent.tsx` 핵심 Ref**:
+
+| Ref | 설명 |
+|---|---|
+| `lastScrollMapRef` | `Map<tabId, Map<path, {top, left}>>` - 탭 내 요소별 최신 스크롤 위치 |
+| `pathCacheRef` | `WeakMap<HTMLElement, string>` - 동일 요소의 경로 재계산 방지용 캐시 |
+
+---
+
+## 9. 참고 파일
+
+| 파일 | 비고 |
+|---|---|
+| `frontend/components/layout/AppLayout.tsx` | 사이드바 + 콘텐츠 레이아웃 |
+| `frontend/app/(main)/screens/[screenId]/page.tsx` | 화면 렌더링 (건드리지 않음) |
+| `frontend/stores/modalDataStore.ts` | Zustand store 참고 패턴 |
+| `frontend/lib/adminPageRegistry.tsx` | 관리자 페이지 레지스트리 |
diff --git a/docs/ycshin-node/필수입력항목_자동검증_설계.md b/docs/ycshin-node/필수입력항목_자동검증_설계.md
new file mode 100644
index 00000000..1edb53dd
--- /dev/null
+++ b/docs/ycshin-node/필수입력항목_자동검증_설계.md
@@ -0,0 +1,231 @@
+# 모달 필수 입력 검증 설계
+
+## 1. 목표
+
+모든 모달에서 필수 입력값이 빈 상태로 저장 버튼을 클릭하면:
+- 첫 번째 빈 필수 필드로 포커스 이동 + 하이라이트
+- 우측 상단에 토스트 알림 ("○○ 항목을 입력해주세요")
+- 버튼은 항상 활성 상태 (비활성화하지 않음)
+
+---
+
+## 2. 전체 구조
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│                DialogContent (모든 모달의 공통 래퍼)               │
+│                                                                 │
+│   useDialogAutoValidation(contentRef)                           │
+│   │                                                             │
+│   ├─ 0단계: 모드 확인                                            │
+│   │   └─ useTabStore.mode === "user" 일 때만 실행                │
+│   │                                                             │
+│   ├─ 1단계: 필수 필드 탐지                                       │
+│   │   └─ Label 내부 <span> 안에 * 문자 존재 여부                  │
+│   │      (라벨 텍스트 직접 매칭 X → span 태그 안의 * 만 감지)      │
+│   │                                                             │
+│   └─ 2단계: 저장 버튼 클릭 인터셉트                               │
+│       │                                                         │
+│       ├─ 저장/수정/확인 버튼 클릭 감지                            │
+│       │   (data-action-type="save"/"submit"                     │
+│       │    또는 data-variant="default")                          │
+│       │                                                         │
+│       ├─ 빈 필수 필드 있음:                                      │
+│       │   ├─ 클릭 이벤트 차단 (stopPropagation + preventDefault) │
+│       │   ├─ 첫 번째 빈 필드로 포커스 이동                        │
+│       │   ├─ 해당 필드 빨간 테두리 + 하이라이트 애니메이션          │
+│       │   └─ 토스트 알림: "{필드명} 항목을 입력해주세요"           │
+│       │                                                         │
+│       └─ 모든 필수 필드 입력됨:                                   │
+│           └─ 클릭 이벤트 통과 (정상 저장 진행)                    │
+│                                                                 │
+│   제외 조건:                                                     │
+│   └─ 필수 필드가 0개인 모달 → 인터셉트 없음                       │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+---
+
+## 3. 필수 필드 감지: span 기반 * 감지
+
+### 원리
+
+화면 관리에서 필드를 "필수"로 체크하면 `component.required = true`가 저장된다.
+V2 컴포넌트가 렌더링할 때 `required = true`이면 Label 안에 `<span>*</span>`을 추가한다.
+훅은 이 span 안의 `*`를 감지하여 필수 필드를 식별한다.
+
+### 오탐 방지
+
+관리자가 라벨 텍스트에 직접 `*`를 입력해도 span 안에 들어가지 않으므로 오탐이 발생하지 않는다.
+
+```
+required = true  → <label>품목코드<span class="text-orange-500">*</span></label>
+                    → span 안에 * 있음 → 감지 O
+
+required = false → <label>품목코드</label>
+                    → span 없음 → 감지 X
+
+라벨에 * 직접 입력 → <label>품목코드*</label>
+                    → span 없이 텍스트에 * → 감지 X (오탐 방지)
+```
+
+### 지원 필드 타입
+
+| V2 컴포넌트 | 렌더링 요소 | 빈값 판정 |
+|---|---|---|
+| V2Input | `<input>`, `<textarea>` | `value.trim() === ""` |
+| V2Select | `<button role="combobox">` | `querySelector("[data-placeholder]")` 존재 |
+| V2Date | `<input>` (날짜/시간) | `value.trim() === ""` |
+
+---
+
+## 4. 저장 버튼 클릭 인터셉트
+
+### 원리
+
+버튼을 비활성화하지 않고, 클릭 이벤트를 캡처링 단계에서 가로챈다.
+빈 필수 필드가 있으면 이벤트를 차단하고, 없으면 통과시킨다.
+
+### 인터셉트 대상 버튼
+
+| 조건 | 예시 |
+|------|------|
+| `data-action-type="save"` | ButtonPrimary 저장 버튼 |
+| `data-action-type="submit"` | ButtonPrimary 제출 버튼 |
+| `data-variant="default"` | shadcn Button 기본 (저장/확인/등록) |
+
+### 인터셉트하지 않는 버튼
+
+| 조건 | 예시 |
+|------|------|
+| `data-variant` = outline/ghost/destructive/secondary | 취소, 닫기, 삭제 |
+| `role` = combobox/tab/switch 등 | 폼 컨트롤 |
+| `data-action-type` != save/submit | 기타 액션 버튼 |
+| `data-dialog-close` | 모달 닫기 X 버튼 |
+
+---
+
+## 5. 시각적 피드백
+
+### 포커스 이동
+
+첫 번째 빈 필수 필드로 커서를 이동한다.
+- `<input>`, `<textarea>`: `input.focus()`
+- `<button role="combobox">` (V2Select): `button.click()` → 드롭다운 열기
+
+### 하이라이트 애니메이션
+
+빈 필수 필드에 빨간 테두리 + 흔들림 효과를 준다.
+
+```css
+@keyframes validationShake {
+  0%, 100% { transform: translateX(0); }
+  20%, 60% { transform: translateX(-4px); }
+  40%, 80% { transform: translateX(4px); }
+}
+
+[data-validation-highlight] {
+  border-color: hsl(var(--destructive)) !important;
+  animation: validationShake 400ms ease-in-out;
+}
+```
+
+애니메이션 종료 후 `data-validation-highlight` 속성 제거 (일회성).
+
+### 토스트 알림
+
+우측 상단에 토스트 메시지를 표시한다.
+
+```typescript
+toast.error(`${fieldLabel} 항목을 입력해주세요`);
+```
+
+---
+
+## 6. 동작 흐름
+
+```
+모달 열림
+    │
+    ▼
+DialogContent 마운트
+    │
+    ▼
+useDialogAutoValidation 실행
+    │
+    ▼
+모드 확인 (useTabStore.mode)
+    │
+    ├─ mode !== "user"? → return
+    │
+    ▼
+필수 필드 탐지 (Label 내 span에서 * 감지)
+    │
+    ├─ 필수 필드 0개? → return
+    │
+    ▼
+클릭 이벤트 리스너 등록 (캡처링 단계)
+    │
+    ▼
+사용자가 저장 버튼 클릭
+    │
+    ▼
+인터셉트 대상 버튼인가?
+    │
+    ├─ 아니오 → 클릭 통과
+    │
+    ▼
+빈 필수 필드 검사
+    │
+    ├─ 모두 입력됨 → 클릭 통과 (정상 저장)
+    │
+    ├─ 빈 필드 있음:
+    │   ├─ e.stopPropagation() + e.preventDefault()
+    │   ├─ 첫 번째 빈 필드에 포커스 이동
+    │   ├─ 해당 필드에 data-validation-highlight 속성 추가
+    │   ├─ 애니메이션 종료 후 속성 제거
+    │   └─ toast.error("{필드명} 항목을 입력해주세요")
+    │
+    ▼
+모달 닫힘
+    │
+    ▼
+클린업
+    ├─ 이벤트 리스너 제거
+    └─ 하이라이트 속성 제거
+```
+
+---
+
+## 7. 관련 파일
+
+| 파일 | 역할 |
+|------|------|
+| `frontend/lib/hooks/useDialogAutoValidation.ts` | 검증 훅 본체 |
+| `frontend/components/ui/dialog.tsx` | DialogContent에서 훅 호출 |
+| `frontend/components/ui/button.tsx` | data-variant 속성 노출 |
+| `frontend/lib/registry/components/v2-button-primary/ButtonPrimaryComponent.tsx` | data-action-type 속성 노출 |
+| `frontend/app/globals.css` | 하이라이트 애니메이션 |
+
+---
+
+## 8. 적용 범위
+
+### 현재 (1단계): 사용자 모드만
+
+| 모달 유형                              | 동작 여부 | 이유                          |
+|---------------------------------------|:---:|-------------------------------|
+| 사용자 모드 모달 (SaveModal 등)         | O | mode === "user" + span * 있음  |
+| 관리자 모드 모달 (CodeFormModal 등)     | X | mode !== "user" → return      |
+| 확인/삭제 다이얼로그 (필수 필드 없음)     | X | 필수 필드 0개 → 자동 제외       |
+
+---
+
+## 9. 이전 방식과 비교
+
+| 항목 | 이전 (버튼 비활성화) | 현재 (클릭 인터셉트) |
+|------|---|---|
+| 버튼 상태 | 빈 필드 있으면 비활성화 | 항상 활성 |
+| 피드백 시점 | 모달 열릴 때부터 | 저장 버튼 클릭 시 |
+| 피드백 방식 | 빨간 테두리 + 에러 문구 | 포커스 이동 + 하이라이트 + 토스트 |
+| 복잡도 | 높음 (MutationObserver, 폴링, CSS 지연) | 낮음 (클릭 이벤트 하나) |
diff --git a/docs/결재시스템_v2_사용가이드.md b/docs/결재시스템_v2_사용가이드.md
new file mode 100644
index 00000000..7fa686c4
--- /dev/null
+++ b/docs/결재시스템_v2_사용가이드.md
@@ -0,0 +1,380 @@
+# 결재 시스템 v2 사용 가이드
+
+## 개요
+
+결재 시스템 v2는 기존 순차결재(escalation) 외에 다양한 결재 방식을 지원합니다.
+
+| 결재 유형 | 코드 | 설명 |
+|-----------|------|------|
+| 순차결재 (기본) | `escalation` | 결재선 순서대로 한 명씩 처리 |
+| 전결 (자기결재) | `self` | 상신자 본인이 직접 승인 (결재자 불필요) |
+| 합의결재 | `consensus` | 같은 단계에 여러 결재자 → 전원 승인 필요 |
+| 후결 | `post` | 먼저 실행 후 나중에 결재 (결재 전 상태에서도 업무 진행) |
+
+추가 기능:
+- **대결 위임**: 부재 시 다른 사용자에게 결재 위임
+- **통보 단계**: 결재선에 통보만 하는 단계 (자동 승인 처리)
+- **긴급도**: `normal` / `urgent` / `critical`
+- **혼합형 결재선**: 한 결재선에 결재/합의/통보 단계를 자유롭게 조합
+
+---
+
+## DB 스키마 변경사항
+
+### 마이그레이션 적용
+
+```bash
+# 개발 DB에 마이그레이션 적용
+psql -h 39.117.244.52 -p 11132 -U postgres -d plm -f db/migrations/1051_approval_system_v2.sql
+psql -h 39.117.244.52 -p 11132 -U postgres -d plm -f db/migrations/1052_rename_proxy_id_to_id.sql
+```
+
+### 변경된 테이블
+
+#### approval_requests (추가 컬럼)
+
+| 컬럼 | 타입 | 기본값 | 설명 |
+|------|------|--------|------|
+| approval_type | VARCHAR(20) | 'escalation' | self/escalation/consensus/post |
+| is_post_approved | BOOLEAN | FALSE | 후결 처리 완료 여부 |
+| post_approved_at | TIMESTAMPTZ | NULL | 후결 처리 시각 |
+| urgency | VARCHAR(20) | 'normal' | normal/urgent/critical |
+
+#### approval_lines (추가 컬럼)
+
+| 컬럼 | 타입 | 기본값 | 설명 |
+|------|------|--------|------|
+| step_type | VARCHAR(20) | 'approval' | approval/consensus/notification |
+| proxy_for | VARCHAR(50) | NULL | 대결 시 원래 결재자 ID |
+| proxy_reason | TEXT | NULL | 대결 사유 |
+| is_required | BOOLEAN | TRUE | 필수 결재 여부 |
+
+#### approval_proxy_settings (신규)
+
+| 컬럼 | 타입 | 설명 |
+|------|------|------|
+| id | SERIAL PK | |
+| company_code | VARCHAR(20) NOT NULL | |
+| original_user_id | VARCHAR(50) | 원래 결재자 |
+| proxy_user_id | VARCHAR(50) | 대결자 |
+| start_date | DATE | 위임 시작일 |
+| end_date | DATE | 위임 종료일 |
+| reason | TEXT | 위임 사유 |
+| is_active | CHAR(1) | 'Y'/'N' |
+
+---
+
+## API 엔드포인트
+
+모든 API는 `/api/approval` 접두사 + JWT 인증 필수.
+
+### 결재 요청 (Requests)
+
+| Method | Endpoint | 설명 |
+|--------|----------|------|
+| GET | `/requests` | 목록 조회 |
+| GET | `/requests/:id` | 상세 조회 (lines 포함) |
+| POST | `/requests` | 결재 요청 생성 |
+| POST | `/requests/:id/cancel` | 결재 회수 |
+| POST | `/requests/:id/post-approve` | 후결 처리 |
+
+#### 결재 요청 생성 Body
+
+```typescript
+{
+  title: string;
+  target_table: string;
+  target_record_id: string;
+  approval_type?: "self" | "escalation" | "consensus" | "post";  // 기본: escalation
+  urgency?: "normal" | "urgent" | "critical";  // 기본: normal
+  definition_id?: number;
+  target_record_data?: Record<string, any>;
+  approvers: Array<{
+    approver_id: string;
+    step_order: number;
+    step_type?: "approval" | "consensus" | "notification";  // 기본: approval
+  }>;
+}
+```
+
+#### 결재 유형별 요청 예시
+
+**전결 (self)**: 결재자 없이 본인 즉시 승인
+
+```typescript
+await createApprovalRequest({
+  title: "긴급 출장비 전결",
+  target_table: "expense",
+  target_record_id: "123",
+  approval_type: "self",
+  approvers: [],
+});
+```
+
+**합의결재 (consensus)**: 같은 step_order에 여러 결재자
+
+```typescript
+await createApprovalRequest({
+  title: "프로젝트 예산안 합의",
+  target_table: "budget",
+  target_record_id: "456",
+  approval_type: "consensus",
+  approvers: [
+    { approver_id: "user1", step_order: 1, step_type: "consensus" },
+    { approver_id: "user2", step_order: 1, step_type: "consensus" },
+    { approver_id: "user3", step_order: 1, step_type: "consensus" },
+  ],
+});
+```
+
+**혼합형 결재선**: 결재 → 합의 → 통보 조합
+
+```typescript
+await createApprovalRequest({
+  title: "신규 채용 승인",
+  target_table: "recruitment",
+  target_record_id: "789",
+  approval_type: "escalation",
+  approvers: [
+    { approver_id: "teamLead",  step_order: 1, step_type: "approval" },
+    { approver_id: "hrManager", step_order: 2, step_type: "consensus" },
+    { approver_id: "cfo",       step_order: 2, step_type: "consensus" },
+    { approver_id: "ceo",       step_order: 3, step_type: "approval" },
+    { approver_id: "secretary", step_order: 4, step_type: "notification" },
+  ],
+});
+```
+
+**후결 (post)**: 먼저 실행 후 나중에 결재
+
+```typescript
+await createApprovalRequest({
+  title: "긴급 자재 발주",
+  target_table: "purchase_order",
+  target_record_id: "101",
+  approval_type: "post",
+  urgency: "urgent",
+  approvers: [
+    { approver_id: "manager", step_order: 1, step_type: "approval" },
+  ],
+});
+```
+
+### 결재 처리 (Lines)
+
+| Method | Endpoint | 설명 |
+|--------|----------|------|
+| GET | `/my-pending` | 내 결재 대기 목록 |
+| POST | `/lines/:lineId/process` | 승인/반려 처리 |
+
+#### 승인/반려 Body
+
+```typescript
+{
+  action: "approved" | "rejected";
+  comment?: string;
+  proxy_reason?: string;  // 대결 시 사유
+}
+```
+
+대결 처리: 원래 결재자가 아닌 사용자가 처리하면 자동으로 대결 설정 확인 후 `proxy_for`, `proxy_reason` 기록.
+
+### 대결 위임 설정 (Proxy Settings)
+
+| Method | Endpoint | 설명 |
+|--------|----------|------|
+| GET | `/proxy-settings` | 위임 목록 |
+| POST | `/proxy-settings` | 위임 생성 |
+| PUT | `/proxy-settings/:id` | 위임 수정 |
+| DELETE | `/proxy-settings/:id` | 위임 삭제 |
+| GET | `/proxy-settings/check/:userId` | 활성 대결자 확인 |
+
+#### 대결 생성 Body
+
+```typescript
+{
+  original_user_id: string;
+  proxy_user_id: string;
+  start_date: string;  // "2026-03-10"
+  end_date: string;    // "2026-03-20"
+  reason?: string;
+  is_active?: "Y" | "N";
+}
+```
+
+### 템플릿 (Templates)
+
+| Method | Endpoint | 설명 |
+|--------|----------|------|
+| GET | `/templates` | 템플릿 목록 |
+| GET | `/templates/:id` | 템플릿 상세 (steps 포함) |
+| POST | `/templates` | 템플릿 생성 |
+| PUT | `/templates/:id` | 템플릿 수정 |
+| DELETE | `/templates/:id` | 템플릿 삭제 |
+
+---
+
+## 프론트엔드 화면
+
+### 1. 결재 요청 모달 (`ApprovalRequestModal`)
+
+경로: `frontend/components/approval/ApprovalRequestModal.tsx`
+
+- 결재 유형 선택: 상신결재 / 전결 / 합의결재 / 후결
+- 템플릿 불러오기: 등록된 템플릿에서 결재선 자동 세팅
+- 전결 시 결재자 섹션 숨김 + "본인이 직접 승인합니다" 안내
+- 합의결재 시 결재자 레이블 "합의 결재자"로 변경
+- 후결 시 안내 배너 표시
+- 혼합형 step_type 뱃지 표시 (결재/합의/통보)
+
+### 2. 결재함 (`/admin/approvalBox`)
+
+경로: `frontend/app/(main)/admin/approvalBox/page.tsx`
+
+탭 구성:
+- **수신함**: 내가 결재할 건 목록
+- **상신함**: 내가 요청한 건 목록
+- **대결 설정**: 대결 위임 CRUD
+
+대결 설정 기능:
+- 위임자/대결자 사용자 검색 (디바운스 300ms)
+- 시작일/종료일 설정
+- 활성/비활성 토글
+- 기간 중복 체크 (서버 측)
+- 등록/수정/삭제 모달
+
+### 3. 결재 템플릿 관리 (`/admin/approvalTemplate`)
+
+경로: `frontend/app/(main)/admin/approvalTemplate/page.tsx`
+
+- 템플릿 목록/검색
+- 등록/수정 Dialog
+- 단계별 결재 유형 설정 (결재/합의/통보)
+- 합의 단계: "합의자 추가" 버튼으로 같은 step_order에 복수 결재자
+- 결재자 사용자 검색
+
+### 4. 결재 단계 컴포넌트 (`v2-approval-step`)
+
+경로: `frontend/lib/registry/components/v2-approval-step/`
+
+화면 디자이너에서 사용하는 결재 단계 시각화 컴포넌트:
+- 가로형/세로형 스테퍼
+- step_order 기준 그룹핑 (합의결재 시 가로 나열)
+- step_type 아이콘: 결재(CheckCircle), 합의(Users), 통보(Bell)
+- 상태별 색상: 승인(success), 반려(destructive), 대기(warning)
+- 대결/후결/전결 뱃지
+- 긴급도 표시 (urgent: 주황 dot, critical: 빨강 배경)
+
+---
+
+## API 클라이언트 사용법
+
+```typescript
+import {
+  // 결재 요청
+  createApprovalRequest,
+  getApprovalRequests,
+  getApprovalRequest,
+  cancelApprovalRequest,
+  postApproveRequest,
+  
+  // 대결 위임
+  getProxySettings,
+  createProxySetting,
+  updateProxySetting,
+  deleteProxySetting,
+  checkActiveProxy,
+  
+  // 템플릿 단계
+  getTemplateSteps,
+  createTemplateStep,
+  updateTemplateStep,
+  deleteTemplateStep,
+  
+  // 타입
+  type ApprovalProxySetting,
+  type CreateApprovalRequestInput,
+  type ApprovalLineTemplateStep,
+} from "@/lib/api/approval";
+```
+
+---
+
+## 핵심 로직 설명
+
+### 동시성 보호 (FOR UPDATE)
+
+결재 처리(`processApproval`)에서 동시 승인/반려 방지:
+
+```sql
+SELECT * FROM approval_lines WHERE line_id = $1 FOR UPDATE
+SELECT * FROM approval_requests WHERE request_id = $1 FOR UPDATE
+```
+
+### 대결 자동 감지
+
+결재자가 아닌 사용자가 결재 처리하면:
+1. `approval_proxy_settings`에서 활성 대결 설정 확인
+2. 대결 설정이 있으면 → `proxy_for`, `proxy_reason` 자동 기록
+3. 없으면 → 403 에러
+
+### 통보 단계 자동 처리
+
+`step_type = 'notification'`인 단계가 활성화되면:
+1. 해당 단계의 모든 결재자를 자동 `approved` 처리
+2. `comment = '자동 통보 처리'` 기록
+3. `activateNextStep()` 재귀 호출로 다음 단계 진행
+
+### 합의결재 단계 완료 판정
+
+같은 `step_order`의 모든 결재자가 `approved`여야 다음 단계로:
+
+```sql
+SELECT COUNT(*) FROM approval_lines
+WHERE request_id = $1 AND step_order = $2
+AND status NOT IN ('approved', 'skipped')
+```
+
+하나라도 `rejected`면 전체 결재 반려.
+
+---
+
+## 메뉴 등록
+
+결재 관련 화면을 메뉴에 등록하려면:
+
+| 화면 | URL | 메뉴명 예시 |
+|------|-----|-------------|
+| 결재함 | `/admin/approvalBox` | 결재함 |
+| 결재 템플릿 관리 | `/admin/approvalTemplate` | 결재 템플릿 |
+| 결재 유형 관리 | `/admin/approvalMng` | 결재 유형 (기존) |
+
+---
+
+## 파일 구조
+
+```
+backend-node/src/
+├── controllers/
+│   ├── approvalController.ts      # 결재 유형/템플릿/요청/라인 처리
+│   └── approvalProxyController.ts # 대결 위임 CRUD
+└── routes/
+    └── approvalRoutes.ts          # 라우트 등록
+
+frontend/
+├── app/(main)/admin/
+│   ├── approvalBox/page.tsx       # 결재함 (수신/상신/대결)
+│   ├── approvalTemplate/page.tsx  # 템플릿 관리
+│   └── approvalMng/page.tsx       # 결재 유형 관리 (기존)
+├── components/approval/
+│   └── ApprovalRequestModal.tsx   # 결재 요청 모달
+└── lib/
+    ├── api/approval.ts            # API 클라이언트
+    └── registry/components/v2-approval-step/
+        ├── ApprovalStepComponent.tsx  # 결재 단계 시각화
+        └── types.ts                  # 확장 타입
+
+db/migrations/
+├── 1051_approval_system_v2.sql       # v2 스키마 확장
+└── 1052_rename_proxy_id_to_id.sql    # PK 컬럼명 통일
+```
diff --git a/docs/시스템_문제점_분석_및_개선_계획.md b/docs/시스템_문제점_분석_및_개선_계획.md
new file mode 100644
index 00000000..0dcdf2ab
--- /dev/null
+++ b/docs/시스템_문제점_분석_및_개선_계획.md
@@ -0,0 +1,759 @@
+# WACE 시스템 문제점 분석 및 개선 계획
+
+> **작성일**: 2026-03-01
+> **상태**: 분석 완료, 계획 수립
+> **목적**: 반복적으로 발생하는 시스템 문제의 근본 원인 분석 및 구조적 개선 방안
+
+---
+
+## 목차
+
+1. [문제 요약](#1-문제-요약)
+2. [문제 1: AI(Cursor) 대화 길어질수록 정확도 저하](#2-문제-1-aicursor-대화-길어질수록-정확도-저하)
+3. [문제 2: 컴포넌트가 일관되지 않게 생성됨](#3-문제-2-컴포넌트가-일관되지-않게-생성됨)
+4. [문제 3: 코드 수정 시 다른 곳에 사이드 이펙트 발생](#4-문제-3-코드-수정-시-다른-곳에-사이드-이펙트-발생)
+5. [근본 원인 종합](#5-근본-원인-종합)
+6. [개선 계획](#6-개선-계획)
+7. [우선순위 로드맵](#7-우선순위-로드맵)
+
+---
+
+## 1. 문제 요약
+
+| # | 증상 | 빈도 | 심각도 |
+|---|------|------|--------|
+| 1 | Cursor로 오래 작업하면 정확도 떨어짐 | 매 세션 | 중 |
+| 2 | 로우코드 컴포넌트 생성 시 오류, 비일관성 | 매 컴포넌트 | 높 |
+| 3 | 수정/신규 코드가 다른 곳에 영향 (저장 안됨, 특정 기능 깨짐) | 수시 | 높 |
+
+세 문제는 독립적으로 보이지만, **하나의 구조적 원인**에서 파생된다.
+
+---
+
+## 2. 문제 1: AI(Cursor) 대화 길어질수록 정확도 저하
+
+### 2.1. 증상
+
+- 대화 초반에는 정확한 코드를 생성하다가, 30분~1시간 이상 작업하면 엉뚱한 코드 생성
+- 이전 맥락을 잊고 같은 질문을 반복하거나, 이미 수정한 부분을 되돌림
+- 관련 없는 파일을 수정하거나, 존재하지 않는 함수/변수를 참조
+
+### 2.2. 원인 분석
+
+AI의 컨텍스트 윈도우는 유한하다. 우리 코드베이스의 핵심 파일들이 **비정상적으로 거대**해서, AI가 한 번에 파악해야 할 정보량이 폭발한다.
+
+#### 거대 파일 목록 (상위 10개)
+
+| 파일 | 줄 수 | 역할 |
+|------|-------|------|
+| `frontend/lib/utils/buttonActions.ts` | **7,609줄** | 버튼 액션 전체 로직 |
+| `frontend/components/screen/ScreenDesigner.tsx` | **7,559줄** | 화면 설계기 |
+| `frontend/lib/registry/components/v2-table-list/TableListComponent.tsx` | **6,867줄** | V2 테이블 컴포넌트 |
+| `frontend/lib/registry/components/table-list/TableListComponent.tsx` | **6,829줄** | 레거시 테이블 컴포넌트 |
+| `frontend/components/screen/EditModal.tsx` | **1,648줄** | 편집 모달 |
+| `frontend/lib/registry/components/v2-button-primary/ButtonPrimaryComponent.tsx` | **1,524줄** | 버튼 컴포넌트 |
+| `frontend/components/v2/V2Repeater.tsx` | **1,442줄** | 리피터 컴포넌트 |
+| `frontend/components/screen/InteractiveScreenViewerDynamic.tsx` | **1,435줄** | 화면 뷰어 |
+| `frontend/lib/utils/improvedButtonActionExecutor.ts` | **1,063줄** | 버튼 실행기 |
+| `frontend/lib/registry/DynamicComponentRenderer.tsx` | **980줄** | 컴포넌트 렌더러 |
+
+**상위 3개 파일만 합쳐도 22,035줄**이다. AI가 이 파일 하나를 읽는 것만으로도 컨텍스트의 상당 부분을 소모한다.
+
+#### 타입 안전성 부재
+
+```typescript
+// frontend/types/component.ts:37-39
+export interface ComponentConfig {
+  [key: string]: any;  // 사실상 타입 검증 없음
+}
+
+// frontend/types/component.ts:56-78
+export interface ComponentRendererProps {
+  component: any;       // ComponentData인데 any로 선언
+  // ... 중략 ...
+  [key: string]: any;   // 여기도 any
+}
+```
+
+`any` 타입이 핵심 인터페이스에 사용되어, AI가 "이 prop에 뭘 넣어야 하는지" 추론 불가.
+사람이 봐도 모르는데 AI가 알 리가 없다.
+
+#### 이벤트 이름이 문자열 상수
+
+```typescript
+// 이 이벤트들이 코드 전체에 흩어져 있음
+window.dispatchEvent(new CustomEvent("refreshTable"));
+window.dispatchEvent(new CustomEvent("closeEditModal"));
+window.dispatchEvent(new CustomEvent("saveSuccessInModal"));
+window.dispatchEvent(new CustomEvent("repeaterSaveComplete"));
+window.dispatchEvent(new CustomEvent("refreshCardDisplay"));
+window.dispatchEvent(new CustomEvent("refreshTableData"));
+window.dispatchEvent(new CustomEvent("saveSuccess"));
+window.dispatchEvent(new CustomEvent("closeScreenModal"));
+```
+
+문자열 기반이라 AI가 이벤트 흐름을 추적할 수 없다. 어떤 이벤트가 어디서 발생하고 어디서 수신되는지 **정적 분석이 불가능**하다.
+
+### 2.3. 영향
+
+- AI가 파일 하나를 읽으면 다른 파일의 맥락을 잊음
+- 함수 시그니처를 추론하지 못하고 잘못된 파라미터를 넣음
+- 이벤트 기반 로직을 이해하지 못해 부정확한 코드 생성
+
+---
+
+## 3. 문제 2: 컴포넌트가 일관되지 않게 생성됨
+
+### 3.1. 증상
+
+- 새 컴포넌트를 만들 때마다 구조가 다름
+- Config 패널의 UI 패턴이 컴포넌트마다 제각각
+- 같은 기능인데 어떤 컴포넌트는 동작하고 어떤 컴포넌트는 안 됨
+
+### 3.2. 원인 분석
+
+#### 컴포넌트 수량과 중복
+
+현재 등록된 컴포넌트 디렉토리: **81개**
+
+이 중 V2와 레거시가 병존하는 **중복 쌍**:
+
+| V2 버전 | 레거시 버전 | 기능 |
+|---------|------------|------|
+| `v2-table-list` (6,867줄) | `table-list` (6,829줄) | 테이블 |
+| `v2-button-primary` (1,524줄) | `button-primary` | 버튼 |
+| `v2-card-display` | `card-display` | 카드 표시 |
+| `v2-aggregation-widget` | `aggregation-widget` | 집계 위젯 |
+| `v2-file-upload` | `file-upload` | 파일 업로드 |
+| `v2-split-panel-layout` | `split-panel-layout` | 분할 패널 |
+| `v2-section-card` | `section-card` | 섹션 카드 |
+| `v2-section-paper` | `section-paper` | 섹션 페이퍼 |
+| `v2-category-manager` | `category-manager` | 카테고리 |
+| `v2-repeater` | `repeater-field-group` | 리피터 |
+| `v2-pivot-grid` | `pivot-grid` | 피벗 그리드 |
+| `v2-rack-structure` | `rack-structure` | 랙 구조 |
+| `v2-repeat-container` | `repeat-container` | 반복 컨테이너 |
+
+**13쌍이 중복** 존재. `v2-table-list`와 `table-list`는 각각 6,800줄 이상으로, 거의 같은 코드가 두 벌 있다.
+
+#### 패턴은 있지만 강제되지 않음
+
+컴포넌트 표준 구조:
+```
+v2-example/
+├── index.ts              # createComponentDefinition()
+├── ExampleRenderer.tsx   # AutoRegisteringComponentRenderer 상속
+├── ExampleComponent.tsx  # 실제 UI
+├── ExampleConfigPanel.tsx # 설정 패널 (선택)
+└── types.ts              # ExampleConfig extends ComponentConfig
+```
+
+이 패턴을 **문서(`.cursor/rules/component-development-guide.mdc`)에서 설명**하고 있지만:
+
+1. **런타임 검증 없음**: `createComponentDefinition()`이 ID 형식만 검증, 나머지는 자유
+2. **Config 타입이 `any`**: `ComponentConfig = { [key: string]: any }` → 아무 값이나 들어감
+3. **테스트 0개**: 전체 프론트엔드에 테스트 파일 **1개** (`buttonDataflowPerformance.test.ts`), 컴포넌트 테스트는 **0개**
+4. **스캐폴딩 도구 없음**: 수동으로 파일을 만들고 index.ts에 import를 추가해야 함
+
+#### 컴포넌트 간 복잡도 격차
+
+| 분류 | 예시 | 줄 수 | 외부 의존 | Error Boundary |
+|------|------|-------|-----------|----------------|
+| 단순 표시형 | `v2-text-display` | ~100줄 | 거의 없음 | 없음 |
+| 입력형 | `v2-input` | ~500줄 | formData, eventBus | 없음 |
+| 버튼 | `v2-button-primary` | 1,524줄 | buttonActions, apiClient, context, eventBus, modalDataStore | 있음 |
+| 테이블 | `v2-table-list` | 6,867줄 | 거의 모든 것 | 있음 |
+
+100줄짜리와 6,867줄짜리가 같은 "컴포넌트"로 취급된다. AI에게 "컴포넌트 만들어"라고 하면 어떤 수준으로 만들어야 하는지 기준이 없다.
+
+#### POP 컴포넌트는 완전 별도 시스템
+
+```
+frontend/lib/registry/
+├── ComponentRegistry.ts      # 웹 컴포넌트 레지스트리
+├── PopComponentRegistry.ts   # POP 컴포넌트 레지스트리 (별도 인터페이스)
+```
+
+같은 "컴포넌트"인데 등록 방식, 인터페이스, 설정 구조가 완전히 다르다.
+
+### 3.3. 영향
+
+- 새 컴포넌트를 만들 때 "어떤 컴포넌트를 참고해야 하는지" 불명확
+- AI가 참조하는 컴포넌트에 따라 결과물이 달라짐
+- Config 구조가 제각각이라 설정 패널 UI도 불일치
+
+---
+
+## 4. 문제 3: 코드 수정 시 다른 곳에 사이드 이펙트 발생
+
+### 4.1. 증상
+
+- 저장 로직 수정했더니 다른 화면에서 저장이 안 됨
+- 테이블 관련 코드 수정했더니 모달에서 특정 기능이 깨짐
+- 리피터 수정했더니 버튼 동작이 달라짐
+
+### 4.2. 원인 분석
+
+#### 원인 A: window 전역 상태 오염
+
+코드베이스 전체에서 `window.__*` 패턴 사용: **8개 파일, 32회 참조**
+
+| 전역 변수 | 정의 위치 | 사용 위치 | 위험도 |
+|-----------|-----------|-----------|--------|
+| `window.__v2RepeaterInstances` | `V2Repeater.tsx` (220줄) | `EditModal.tsx`, `buttonActions.ts` (4곳) | **높음** |
+| `window.__relatedButtonsTargetTables` | `RelatedDataButtonsComponent.tsx` (25줄) | `v2-table-list`, `table-list`, `buttonActions.ts` | **높음** |
+| `window.__relatedButtonsSelectedData` | `RelatedDataButtonsComponent.tsx` (51줄) | `buttonActions.ts` (3113줄) | **높음** |
+| `window.__unifiedRepeaterInstances` | `UnifiedRepeater.tsx` (110줄) | `UnifiedRepeater.tsx` | 중간 |
+| `window.__AUTH_LOG` | `authLogger.ts` | 디버깅용 | 낮음 |
+
+**사이드 이펙트 시나리오 예시**:
+
+```
+1. V2Repeater 마운트 → window.__v2RepeaterInstances에 등록
+2. EditModal이 저장 시 → window.__v2RepeaterInstances 체크
+3. 만약 Repeater가 언마운트 타이밍에 늦게 정리되면?
+   → EditModal은 "리피터가 있다"고 판단
+   → 리피터 저장 로직 실행
+   → 실제로는 리피터 데이터 없음
+   → 저장 실패 또는 빈 데이터 저장
+```
+
+#### 원인 B: 이벤트 스파게티
+
+`window.dispatchEvent(new CustomEvent(...))` 사용: **43개 파일, 총 120회 이상**
+
+주요 이벤트와 발신/수신 관계:
+
+```
+[refreshTable 이벤트]
+발신 (8곳):
+  - buttonActions.ts (5회)
+  - BomItemEditorComponent.tsx
+  - SelectedItemsDetailInputComponent.tsx
+  - BomTreeComponent.tsx (2회)
+  - ButtonPrimaryComponent.tsx (레거시)
+  - ScreenModal.tsx (2회)
+  - InteractiveScreenViewerDynamic.tsx
+
+수신 (5곳):
+  - v2-table-list/TableListComponent.tsx
+  - table-list/TableListComponent.tsx
+  - SplitPanelLayoutComponent.tsx
+  - InteractiveScreenViewerDynamic.tsx
+  - InteractiveScreenViewer.tsx
+```
+
+```
+[closeEditModal 이벤트]
+발신 (4곳):
+  - buttonActions.ts (4회)
+
+수신 (2곳):
+  - EditModal.tsx
+  - screens/[screenId]/page.tsx
+```
+
+```
+[beforeFormSave 이벤트]
+수신 (6곳):
+  - V2Input.tsx
+  - V2Repeater.tsx
+  - BomItemEditorComponent.tsx
+  - SelectedItemsDetailInputComponent.tsx
+  - UniversalFormModalComponent.tsx
+  - V2FormContext.tsx
+```
+
+**문제**: 이벤트 이름이 **문자열 상수**이고, 발신과 수신이 **타입으로 연결되지 않음**.
+`refreshTable` 이벤트를 `refreshTableData`로 오타내도 컴파일 에러 없이 런타임에서만 발견된다.
+
+#### 원인 C: 이중/삼중 이벤트 시스템
+
+동시에 3개의 이벤트 시스템이 공존:
+
+| 시스템 | 위치 | 방식 | 타입 안전 |
+|--------|------|------|-----------|
+| `window.dispatchEvent` | 전역 | CustomEvent 문자열 | 없음 |
+| `v2EventBus` | `lib/v2-core/events/EventBus.ts` | 타입 기반 pub/sub | 있음 |
+| `LegacyEventAdapter` | `lib/v2-core/adapters/LegacyEventAdapter.ts` | 1번↔2번 브릿지 | 부분적 |
+
+어떤 컴포넌트는 `window.dispatchEvent`를 쓰고, 어떤 컴포넌트는 `v2EventBus`를 쓰고, 또 어떤 컴포넌트는 둘 다 쓴다. **같은 이벤트가 두 시스템에서 동시에 발생**할 수 있어 예측 불가능한 동작이 발생한다.
+
+#### 원인 D: SplitPanelContext 이름 충돌
+
+같은 이름의 Context가 2개 존재:
+
+| 위치 | 용도 | 제공하는 것 |
+|------|------|------------|
+| `frontend/contexts/SplitPanelContext.tsx` | 데이터 전달 | `selectedLeftData`, `transfer()`, `registerReceiver()` |
+| `frontend/lib/registry/components/split-panel-layout/SplitPanelContext.tsx` | 리사이즈/좌표 | `getAdjustedX()`, `dividerX`, `leftWidthPercent` |
+
+import 경로에 따라 **완전히 다른 Context**를 가져온다. AI가 자동완성으로 잘못된 Context를 import하면 런타임에 `undefined` 에러가 발생한다.
+
+#### 원인 E: buttonActions.ts - 7,609줄의 신(God) 파일
+
+이 파일 하나가 다음 기능을 전부 담당:
+
+- 저장 (INSERT/UPDATE/DELETE)
+- 모달 열기/닫기
+- 리피터 데이터 수집
+- 테이블 새로고침
+- 파일 업로드
+- 외부 API 호출
+- 화면 전환
+- 데이터 검증
+- 이벤트 발송 (33회)
+- window 전역 상태 읽기 (5회)
+
+**이 파일의 한 줄을 수정하면, 위의 모든 기능이 영향을 받을 수 있다.**
+
+#### 원인 F: 레거시-V2 코드 동시 존재
+
+```
+v2-table-list/TableListComponent.tsx   (6,867줄)
+table-list/TableListComponent.tsx      (6,829줄)
+```
+
+거의 같은 코드가 두 벌. 한쪽을 수정하면 다른 쪽은 수정 안 되어 동작이 달라진다.
+또한 두 컴포넌트가 **같은 전역 이벤트를 수신**하므로, 한 화면에 둘 다 있으면 이중으로 반응할 수 있다.
+
+#### 원인 G: Error Boundary 미적용
+
+| 컴포넌트 | Error Boundary |
+|----------|----------------|
+| `v2-button-primary` | 있음 |
+| `v2-table-list` | 있음 |
+| `v2-repeater` | 있음 |
+| `v2-input` | **없음** |
+| `v2-select` | **없음** |
+| `v2-card-display` | **없음** |
+| `v2-text-display` | **없음** |
+| 기타 대부분 | **없음** |
+
+Error Boundary가 없는 컴포넌트에서 에러가 발생하면, **상위 컴포넌트까지 전파**되어 화면 전체가 깨진다.
+
+### 4.3. 사이드 이펙트 발생 위험 지도
+
+```
+┌─────────────────────────────────────────────────────┐
+│                  buttonActions.ts                     │
+│                    (7,609줄)                          │
+│  ┌──────────┐  ┌──────────┐  ┌──────────┐           │
+│  │ 저장 로직 │  │ 모달 로직 │  │ 이벤트   │           │
+│  └────┬─────┘  └────┬─────┘  └────┬─────┘           │
+└───────┼──────────────┼─────────────┼─────────────────┘
+        │              │             │
+        ▼              ▼             ▼
+┌──────────────┐ ┌──────────┐ ┌─────────────────┐
+│ window.__v2  │ │EditModal │ │ CustomEvent     │
+│ RepeaterInst │ │(1,648줄) │ │ "refreshTable"  │
+│ ances        │ │          │ │ "closeEditModal" │
+└──────┬───────┘ └────┬─────┘ │ "saveSuccess"   │
+       │              │       └───────┬─────────┘
+       ▼              │               │
+┌──────────────┐      │        ┌──────▼───────┐
+│ V2Repeater   │◄─────┘        │ TableList    │
+│ (1,442줄)    │               │ (6,867줄)    │
+└──────────────┘               │ + 레거시      │
+                               │ (6,829줄)    │
+                               └──────────────┘
+```
+
+**위 그래프에서 어디를 수정하든 화살표를 따라 다른 곳에 영향이 전파된다.**
+
+---
+
+## 5. 근본 원인 종합
+
+세 가지 문제의 근본 원인은 하나다: **경계(Boundary)가 없는 아키텍처**
+
+| 근본 원인 | 문제 1 영향 | 문제 2 영향 | 문제 3 영향 |
+|-----------|-------------|-------------|-------------|
+| 거대 파일 (God File) | AI 컨텍스트 소모 | 참조할 기준 불명확 | 수정 영향 범위 광범위 |
+| `any` 타입 남발 | AI 타입 추론 불가 | Config 검증 없음 | 런타임 에러 |
+| 문자열 이벤트 | AI 이벤트 흐름 추적 불가 | 이벤트 패턴 불일치 | 이벤트 누락/오타 |
+| window 전역 상태 | AI 상태 추적 불가 | 컴포넌트 간 의존 증가 | 상태 오염 |
+| 테스트 부재 (0개) | 변경 검증 불가 | 컴포넌트 계약 불명 | 사이드 이펙트 감지 불가 |
+| 레거시-V2 중복 (13쌍) | AI 혼동 | 어느 쪽을 기준으로? | 한쪽만 수정 시 불일치 |
+
+---
+
+## 6. 개선 계획
+
+### Phase 1: 즉시 효과 (1~2주) - 안전장치 설치
+
+#### 1-1. 이벤트 이름 상수화
+
+**현재**:
+```typescript
+window.dispatchEvent(new CustomEvent("refreshTable"));
+```
+
+**개선**:
+```typescript
+// frontend/lib/constants/events.ts
+export const EVENTS = {
+  REFRESH_TABLE: "refreshTable",
+  CLOSE_EDIT_MODAL: "closeEditModal",
+  SAVE_SUCCESS: "saveSuccess",
+  SAVE_SUCCESS_IN_MODAL: "saveSuccessInModal",
+  REPEATER_SAVE_COMPLETE: "repeaterSaveComplete",
+  REFRESH_CARD_DISPLAY: "refreshCardDisplay",
+  REFRESH_TABLE_DATA: "refreshTableData",
+  CLOSE_SCREEN_MODAL: "closeScreenModal",
+  BEFORE_FORM_SAVE: "beforeFormSave",
+} as const;
+
+// 사용
+window.dispatchEvent(new CustomEvent(EVENTS.REFRESH_TABLE));
+```
+
+**효과**: 오타 방지, AI가 이벤트 흐름 추적 가능, IDE 자동완성 지원
+**위험도**: 낮음 (기능 변경 없음, 리팩토링만)
+**소요 예상**: 2~3시간
+
+#### 1-2. window 전역 변수 타입 선언
+
+**현재**: `window.__v2RepeaterInstances`를 사용하지만 타입 선언 없음
+
+**개선**:
+```typescript
+// frontend/types/global.d.ts
+declare global {
+  interface Window {
+    __v2RepeaterInstances?: Set<string>;
+    __unifiedRepeaterInstances?: Set<string>;
+    __relatedButtonsTargetTables?: Set<string>;
+    __relatedButtonsSelectedData?: {
+      tableName: string;
+      selectedRows: any[];
+    };
+    __AUTH_LOG?: { show: () => void };
+    __COMPONENT_REGISTRY__?: Map<string, any>;
+  }
+}
+```
+
+**효과**: 타입 안전성 확보, AI가 전역 상태 구조 이해 가능
+**위험도**: 낮음 (타입 선언만, 런타임 변경 없음)
+**소요 예상**: 1시간
+
+#### 1-3. ComponentConfig에 제네릭 타입 적용
+
+**현재**:
+```typescript
+export interface ComponentConfig {
+  [key: string]: any;
+}
+```
+
+**개선**:
+```typescript
+export interface ComponentConfig {
+  [key: string]: unknown;  // any → unknown으로 변경하여 타입 체크 강제
+}
+
+// 각 컴포넌트에서
+export interface ButtonPrimaryConfig extends ComponentConfig {
+  text: string;           // 구체적 타입
+  action: ButtonAction;   // 구체적 타입
+  variant?: "default" | "destructive" | "outline";
+}
+```
+
+**효과**: 잘못된 config 값 사전 차단
+**위험도**: 중간 (기존 `any` 사용처에서 타입 에러 발생 가능, 점진적 적용 필요)
+**소요 예상**: 3~5일 (점진적)
+
+---
+
+### Phase 2: 구조 개선 (2~4주) - 핵심 분리
+
+#### 2-1. buttonActions.ts 분할
+
+**현재**: 7,609줄, 1개 파일
+
+**개선 목표**: 도메인별 분리
+
+```
+frontend/lib/actions/
+├── index.ts                  # re-export
+├── types.ts                  # 공통 타입
+├── saveActions.ts            # INSERT/UPDATE 저장 로직
+├── deleteActions.ts          # DELETE 로직
+├── modalActions.ts           # 모달 열기/닫기
+├── tableActions.ts           # 테이블 새로고침, 데이터 조작
+├── repeaterActions.ts        # 리피터 데이터 수집/저장
+├── fileActions.ts            # 파일 업로드/다운로드
+├── navigationActions.ts      # 화면 전환
+├── validationActions.ts      # 데이터 검증
+└── externalActions.ts        # 외부 API 호출
+```
+
+**효과**: 
+- 저장 로직 수정 시 `saveActions.ts`만 영향
+- AI가 관련 파일만 읽으면 됨 (7,600줄 → 평균 500줄)
+- import 관계로 의존성 명확화
+
+**위험도**: 높음 (가장 많이 사용되는 파일, 신중한 분리 필요)
+**소요 예상**: 1~2주
+
+#### 2-2. 이벤트 시스템 통일
+
+**현재**: 3개 시스템 공존 (window CustomEvent, v2EventBus, LegacyEventAdapter)
+
+**개선**:
+```typescript
+// v2EventBus로 통일, 타입 안전한 이벤트 정의
+interface EventMap {
+  "table:refresh": { tableId?: string };
+  "modal:close": { modalId: string };
+  "form:save": { formData: Record<string, any> };
+  "form:saveComplete": { success: boolean; message?: string };
+  "repeater:saveComplete": { repeaterId: string };
+}
+
+// 사용
+v2EventBus.emit("table:refresh", { tableId: "order_table" });
+v2EventBus.on("table:refresh", (data) => { /* data.tableId 타입 안전 */ });
+```
+
+**마이그레이션 전략**:
+1. `v2EventBus`에 `EventMap` 타입 추가
+2. 새 코드는 반드시 `v2EventBus` 사용
+3. 기존 `window.dispatchEvent` → `v2EventBus`로 점진적 교체
+4. `LegacyEventAdapter`에서 양방향 브릿지 유지 (과도기)
+5. 모든 교체 완료 후 `LegacyEventAdapter` 제거
+
+**효과**: 이벤트 흐름 추적 가능, 타입 안전, 디버깅 용이
+**위험도**: 중간 (과도기 브릿지로 안전하게 전환)
+**소요 예상**: 2~3주
+
+#### 2-3. window 전역 상태 → Zustand 스토어 전환
+
+**현재**:
+```typescript
+window.__v2RepeaterInstances = new Set();
+window.__relatedButtonsSelectedData = { tableName, selectedRows };
+```
+
+**개선**:
+```typescript
+// frontend/lib/stores/componentInstanceStore.ts
+import { create } from "zustand";
+
+interface ComponentInstanceState {
+  repeaterInstances: Set<string>;
+  relatedButtonsTargetTables: Set<string>;
+  relatedButtonsSelectedData: {
+    tableName: string;
+    selectedRows: any[];
+  } | null;
+
+  registerRepeater: (key: string) => void;
+  unregisterRepeater: (key: string) => void;
+  setRelatedData: (data: { tableName: string; selectedRows: any[] }) => void;
+  clearRelatedData: () => void;
+}
+
+export const useComponentInstanceStore = create<ComponentInstanceState>((set) => ({
+  repeaterInstances: new Set(),
+  relatedButtonsTargetTables: new Set(),
+  relatedButtonsSelectedData: null,
+
+  registerRepeater: (key) =>
+    set((state) => {
+      const next = new Set(state.repeaterInstances);
+      next.add(key);
+      return { repeaterInstances: next };
+    }),
+  unregisterRepeater: (key) =>
+    set((state) => {
+      const next = new Set(state.repeaterInstances);
+      next.delete(key);
+      return { repeaterInstances: next };
+    }),
+  setRelatedData: (data) => set({ relatedButtonsSelectedData: data }),
+  clearRelatedData: () => set({ relatedButtonsSelectedData: null }),
+}));
+```
+
+**효과**:
+- 상태 변경 추적 가능 (Zustand devtools)
+- 컴포넌트 리렌더링 최적화 (selector 사용)
+- window 오염 제거
+
+**위험도**: 중간
+**소요 예상**: 1주
+
+---
+
+### Phase 3: 품질 강화 (4~8주) - 예방 체계
+
+#### 3-1. 레거시 컴포넌트 제거
+
+**목표**: V2-레거시 중복 13쌍 → V2만 유지
+
+**전략**:
+1. 각 중복 쌍에서 레거시 사용처 검색
+2. 사용처가 없는 레거시 컴포넌트 즉시 제거
+3. 사용처가 있는 경우 V2로 교체 후 제거
+4. `components/index.ts`에서 import 제거
+
+**효과**: 코드베이스 ~15,000줄 감소, AI 혼동 제거
+**소요 예상**: 2~3주
+
+#### 3-2. 컴포넌트 스캐폴딩 CLI
+
+**목표**: `npx create-v2-component my-component` 실행 시 표준 구조 자동 생성
+
+```bash
+$ npx create-v2-component my-widget --category data
+
+생성 완료:
+  frontend/lib/registry/components/v2-my-widget/
+  ├── index.ts              # 자동 생성
+  ├── MyWidgetRenderer.tsx   # 자동 생성
+  ├── MyWidgetComponent.tsx  # 템플릿
+  ├── MyWidgetConfigPanel.tsx # 템플릿
+  └── types.ts              # Config 인터페이스 템플릿
+
+  components/index.ts에 import 자동 추가 완료
+```
+
+**효과**: 컴포넌트 구조 100% 일관성 보장
+**소요 예상**: 3~5일
+
+#### 3-3. 핵심 컴포넌트 통합 테스트
+
+**목표**: 사이드 이펙트 감지용 테스트 작성
+
+```typescript
+// __tests__/integration/save-flow.test.ts
+describe("저장 플로우", () => {
+  it("버튼 저장 → refreshTable 이벤트 발생", async () => {
+    const listener = vi.fn();
+    v2EventBus.on("table:refresh", listener);
+    
+    await executeSaveAction({ tableName: "test_table", data: mockData });
+    
+    expect(listener).toHaveBeenCalledTimes(1);
+  });
+
+  it("리피터가 있을 때 저장 → 리피터 데이터도 포함", async () => {
+    useComponentInstanceStore.getState().registerRepeater("detail_table");
+    
+    const result = await executeSaveAction({ tableName: "master_table", data: mockData });
+    
+    expect(result.repeaterDataCollected).toBe(true);
+  });
+});
+```
+
+**대상**: 저장/삭제/모달/리피터 흐름 (가장 빈번하게 깨지는 부분)
+**효과**: 코드 수정 후 즉시 사이드 이펙트 감지
+**소요 예상**: 2~3주
+
+#### 3-4. SplitPanelContext 통합
+
+**목표**: 이름이 같은 2개의 Context → 1개로 통합 또는 명확히 분리
+
+**방안 A - 통합**:
+```typescript
+// frontend/contexts/SplitPanelContext.tsx에 통합
+interface SplitPanelContextValue {
+  // 데이터 전달 (기존 contexts/ 버전)
+  selectedLeftData: any;
+  transfer: (data: any) => void;
+  registerReceiver: (handler: (data: any) => void) => void;
+  // 리사이즈 (기존 components/ 버전)
+  getAdjustedX: (x: number) => number;
+  dividerX: number;
+  leftWidthPercent: number;
+}
+```
+
+**방안 B - 명확 분리**:
+```typescript
+// SplitPanelDataContext.tsx → 데이터 전달용
+// SplitPanelResizeContext.tsx → 리사이즈용
+```
+
+**효과**: import 혼동 제거
+**소요 예상**: 2~3일
+
+---
+
+### Phase 4: 장기 개선 (8주+) - 아키텍처 전환
+
+#### 4-1. 거대 컴포넌트 분할
+
+| 대상 파일 | 현재 줄 수 | 분할 목표 |
+|-----------|-----------|-----------|
+| `v2-table-list/TableListComponent.tsx` | 6,867줄 | 훅 분리, 렌더링 분리 → 각 1,000줄 이하 |
+| `ScreenDesigner.tsx` | 7,559줄 | 패널별 분리 → 각 1,500줄 이하 |
+| `EditModal.tsx` | 1,648줄 | 저장/폼/UI 분리 → 각 500줄 이하 |
+| `ButtonPrimaryComponent.tsx` | 1,524줄 | 액션 실행 분리 → 각 500줄 이하 |
+
+#### 4-2. Config 스키마 검증 (Zod)
+
+```typescript
+// v2-button-primary/types.ts
+import { z } from "zod";
+
+export const ButtonPrimaryConfigSchema = z.object({
+  text: z.string().default("버튼"),
+  variant: z.enum(["default", "destructive", "outline", "secondary", "ghost"]).default("default"),
+  action: z.object({
+    type: z.enum(["save", "delete", "navigate", "custom"]),
+    targetTable: z.string().optional(),
+    // ...
+  }),
+});
+
+export type ButtonPrimaryConfig = z.infer<typeof ButtonPrimaryConfigSchema>;
+```
+
+`createComponentDefinition()`에서 스키마 검증을 강제하여 잘못된 config가 등록 시점에 차단되도록 한다.
+
+---
+
+## 7. 우선순위 로드맵
+
+### 즉시 (이번 주)
+
+- [ ] **1-1**: 이벤트 이름 상수 파일 생성 (`frontend/lib/constants/events.ts`)
+- [ ] **1-2**: window 전역 변수 타입 선언 (`frontend/types/global.d.ts`)
+
+### 단기 (1~2주)
+
+- [ ] **2-3**: window 전역 상태 → Zustand 스토어 전환
+- [ ] **1-3**: ComponentConfig `any` → `unknown` 점진적 적용
+
+### 중기 (2~4주)
+
+- [ ] **2-1**: buttonActions.ts 분할 (7,609줄 → 도메인별)
+- [ ] **2-2**: 이벤트 시스템 통일 (v2EventBus 기반)
+- [ ] **3-4**: SplitPanelContext 통합/분리
+
+### 장기 (4~8주)
+
+- [ ] **3-1**: 레거시 컴포넌트 13쌍 제거
+- [ ] **3-2**: 컴포넌트 스캐폴딩 CLI
+- [ ] **3-3**: 핵심 플로우 통합 테스트
+- [ ] **4-1**: 거대 컴포넌트 분할
+- [ ] **4-2**: Config 스키마 Zod 검증
+
+---
+
+## 부록: 수치 요약
+
+| 지표 | 현재 | 목표 |
+|------|------|------|
+| 최대 파일 크기 | 7,609줄 | 1,500줄 이하 |
+| 컴포넌트 수 | 81개 (13쌍 중복) | ~55개 (중복 제거) |
+| window 전역 변수 | 5개 | 0개 |
+| 이벤트 시스템 | 3개 공존 | 1개 (v2EventBus) |
+| 테스트 파일 | 1개 | 핵심 플로우 최소 10개 |
+| `any` 타입 사용 (핵심 인터페이스) | 3곳 | 0곳 |
+| SplitPanelContext 중복 | 2개 | 1개 (또는 명확 분리) |
diff --git a/docs/파이프라인_한계점_분석.md b/docs/파이프라인_한계점_분석.md
new file mode 100644
index 00000000..7ba10256
--- /dev/null
+++ b/docs/파이프라인_한계점_분석.md
@@ -0,0 +1,361 @@
+# Agent Pipeline 한계점 분석
+
+> 결재 시스템 같은 대규모 크로스도메인 프로젝트에서 현재 파이프라인이 왜 제대로 동작할 수 없는가
+
+---
+
+## 1. 에이전트 컨텍스트 격리 문제
+
+### 현상
+`executor.ts`의 `spawnAgent()`는 매번 새로운 Cursor Agent CLI 프로세스를 생성한다. 각 에이전트는 `systemPrompt + taskDescription + fileContext`만 받고, 이전 대화/결정/아키텍처 논의는 전혀 알지 못한다.
+
+```typescript
+// executor.ts:64-118
+function spawnAgent(agentType, prompt, model, workspacePath, timeoutMs) {
+  const child = spawn(agentPath, ['--model', model, '--print', '--trust'], {
+    cwd: workspacePath,
+    stdio: ['pipe', 'pipe', 'pipe'],
+  });
+  child.stdin.write(prompt);  // 이게 에이전트가 받는 전부
+  child.stdin.end();
+}
+```
+
+### 문제 본질
+- 에이전트는 **"왜 이렇게 만들어야 하는지"** 모른다. 단지 task description에 적힌 대로 만든다
+- 결재 시스템의 **설계 의도** (한국 기업 결재 문화, 자기결재/상신결재/합의결재/대결/후결)는 task description에 다 담을 수 없다
+- PM과 사용자 사이에 오간 **아키텍처 논의** (이벤트 훅 시스템, 제어관리 연동, 엔티티 조인으로 결재 상태 표시) 같은 결정 사항이 전달되지 않는다
+
+### 결재 시스템에서의 구체적 영향
+- "ApprovalRequestModal에 결재 유형 선택을 추가해라"라고 지시하면, 에이전트는 기존 모달 코드를 읽겠지만, **왜 그 UI가 그렇게 생겼는지, 다른 패널(TableListConfigPanel)의 Combobox 패턴을 왜 따라야 하는지** 모른다
+- 실제로 이 대화에서 Combobox UI가 4번 수정됐다. 매번 "다른 패널 참고해서 만들라"고 해도 패턴을 정확히 못 따라했다
+
+---
+
+## 2. 파일 컨텍스트 3000자 절삭
+
+### 현상
+```typescript
+// executor.ts:124-138
+async function readFileContexts(files, workspacePath) {
+  for (const file of files) {
+    const content = await readFile(fullPath, 'utf-8');
+    contents.push(`--- ${file} ---\n${content.substring(0, 3000)}`);  // 3000자 잘림
+  }
+}
+```
+
+### 문제 본질
+주요 파일들의 실제 크기:
+- `approvalController.ts`: ~800줄 (3000자로는 약 100줄, 12.5%만 보인다)
+- `improvedButtonActionExecutor.ts`: ~1500줄
+- `ButtonConfigPanel.tsx`: ~600줄
+- `ApprovalStepConfigPanel.tsx`: ~300줄
+
+에이전트가 수정해야 할 파일의 **전체 구조를 이해할 수 없다**. 앞부분만 보고 import 구문이나 초기 코드만 파악하고, 실제 수정 지점에 도달하지 못한다.
+
+### 결재 시스템에서의 구체적 영향
+- `approvalController.ts`를 수정하려면 기존 함수 구조, DB 쿼리 패턴, 에러 처리 방식, 멀티테넌시 적용 패턴을 전부 알아야 한다. 3000자로는 불가능
+- `improvedButtonActionExecutor.ts`의 제어관리 연동 패턴을 이해하려면 파일 전체를 봐야 한다
+- V2 컴포넌트 표준을 따르려면 기존 컴포넌트(`v2-table-list/` 등)의 전체 구조를 참고해야 한다
+
+---
+
+## 3. 에이전트 간 실시간 소통 부재
+
+### 현상
+병렬 실행 시 에이전트들은 **서로의 작업 결과를 실시간으로 공유하지 못한다**:
+
+```typescript
+// executor.ts:442-454
+if (state.config.parallel) {
+  const promises = readyTasks.map(async (task, index) => {
+    if (index > 0) await sleep(index * STAGGER_DELAY);  // 500ms 딜레이뿐
+    return executeAndTrack(task);
+  });
+  await Promise.all(promises);  // 완료까지 기다린 후 PM이 리뷰
+}
+```
+
+PM 에이전트가 라운드 후에 리뷰하지만, 이것도 **round-N.md의 텍스트 기반 리뷰**일 뿐이다.
+
+### 문제 본질
+- DB 에이전트가 스키마를 변경하면, Backend 에이전트가 그 결과를 **같은 라운드에서 즉시 반영할 수 없다**
+- Frontend 에이전트가 "이 API 응답 구조 좀 바꿔줘"라고 Backend에 요청할 수 없다
+- 협업 모드(`CollabMessage`)가 존재하지만, 이것도 **라운드 단위의 비동기 메시지**이지 실시간 대화가 아니다
+
+### 결재 시스템에서의 구체적 영향
+- DB가 `approval_proxy_settings` 테이블을 만들고, Backend가 대결 API를 만들고, Frontend가 대결 설정 UI를 만드는 과정이 **최소 3라운드**가 필요하다 (각 의존성 해소를 위해)
+- 실제로는 Backend가 DB 스키마를 보고 쿼리를 짜는 과정에서 "이 컬럼 타입이 좀 다른 것 같은데"라는 이슈가 생기면, 즉시 수정 불가하고 다음 라운드로 넘어간다
+- 라운드당 에이전트 호출 1~3분 + PM 리뷰 1~2분 = **라운드당 최소 3~5분**. 8개 phase를 3라운드씩 = **최소 72~120분 (1~2시간)**
+
+---
+
+## 4. 시스템 프롬프트의 한계 (프로젝트 특수 패턴 부재)
+
+### 현상
+`prompts.ts`의 시스템 프롬프트는 **범용적**이다:
+
+```typescript
+// prompts.ts:75-118
+export const BACKEND_PROMPT = `
+# Role
+You are a Backend specialist for ERP-node project.
+Stack: Node.js + Express + TypeScript + PostgreSQL Raw Query.
+// ... 멀티테넌시, 기본 코드 패턴만 포함
+`;
+```
+
+### 프로젝트 특수 패턴 중 프롬프트에 없는 것들
+
+| 필수 패턴 | 프롬프트 포함 여부 | 영향 |
+|-----------|:------------------:|------|
+| V2 컴포넌트 레지스트리 (`createComponentDefinition`, `AutoRegisteringComponentRenderer`) | 프론트엔드 프롬프트에 기본 구조만 | 컴포넌트 등록 방식 오류 가능 |
+| ConfigPanelBuilder / ConfigSection | 언급만 | 직접 JSX로 패널 만드는 실수 반복 |
+| Combobox UI 패턴 (Popover + Command) | 없음 | 실제로 4번 재수정 필요했음 |
+| 엔티티 조인 시스템 | 없음 | 결재 상태를 대상 테이블에 표시하는 핵심 기능 구현 불가 |
+| 제어관리(Node Flow) 연동 | 없음 | 결재 후 자동 액션 트리거 구현 불가 |
+| ButtonActionExecutor 패턴 | 없음 | 결재 버튼 액션 구현 시 기존 패턴 미준수 |
+| apiClient 사용법 (frontend/lib/api/) | 간략한 언급 | fetch 직접 사용 가능성 |
+| CustomEvent 기반 모달 오픈 | 없음 | approval-modal 열기 방식 이해 불가 |
+| 화면 디자이너 컨텍스트 | 없음 | screenTableName 같은 설계 시 컨텍스트 활용 불가 |
+
+### 결재 시스템에서의 구체적 영향
+- **이벤트 훅 시스템**을 만들려면 기존 `NodeFlowExecutionService`의 실행 패턴, 액션 타입 enum, 입력/출력 구조를 알아야 하는데, 프롬프트에 전혀 없다
+- **엔티티 조인으로 결재 상태 표시**하려면 기존 엔티티 조인 시스템이 어떻게 작동하는지(reverse lookup, join config) 알아야 하는데, 에이전트가 이 시스템 자체를 모른다
+
+---
+
+## 5. 단일 패스 실행 + 재시도의 비효율
+
+### 현상
+```typescript
+// executor.ts:240-288
+async function executeTaskWithRetry(task, state) {
+  while (task.attempts < task.maxRetries) {
+    const result = await executeTaskOnce(task, state, retryContext);
+    task.attempts++;
+    if (result.success) break;
+    // 검증 실패 → retryContext에 에러 메시지만 전달
+    retryContext = failResult.retryContext || `이전 시도 실패: ${result.agentOutput.substring(0, 500)}`;
+    await sleep(2000);
+  }
+}
+```
+
+### 문제 본질
+- 재시도 시 에이전트가 받는 건 **이전 에러 메시지 500자**뿐이다
+- "Combobox 패턴 대신 Select 박스를 썼다" 같은 **UI/UX 품질 문제**는 L1~L6 검증으로 잡을 수 없다 (빌드는 통과하니까)
+- 사용자의 실시간 피드백("이거 다른 패널이랑 UI가 다른데?")을 반영할 수 없다
+
+### 검증 피라미드(L1~L6)가 못 잡는 것들
+
+| 검증 레벨 | 잡을 수 있는 것 | 못 잡는 것 |
+|-----------|----------------|-----------|
+| L1 (TS 빌드) | 타입 에러, import 오류 | 로직 오류, 패턴 미준수 |
+| L2 (앱 빌드) | Next.js 빌드 에러 | 런타임 에러 |
+| L3 (API 호출) | 엔드포인트 존재 여부, 기본 응답 | 복잡한 비즈니스 로직 (다단계 결재 플로우) |
+| L4 (DB 검증) | 테이블 존재, 기본 CRUD | 결재 상태 전이 로직, 병렬 결재 집계 |
+| L5 (브라우저 E2E) | 화면 렌더링, 기본 클릭 | 결재 모달 Combobox UX, 대결 설정 UI 일관성 |
+| L6 (커스텀) | 명시적 조건 | 비명시적 품질 요구사항 |
+
+### 결재 시스템에서의 구체적 영향
+- "자기결재 시 즉시 approved로 처리"가 올바르게 동작하는지 L3/L4로 검증 가능하지만, **"자기결재 선택 시 결재자 선택 UI가 숨겨지고 즉시 처리된다"는 UX**는 L5 자연어로는 불충분
+- "합의결재(병렬)에서 3명 중 2명 승인 + 1명 반려 시 전체 반려" 같은 **엣지 케이스 비즈니스 로직**은 자동 검증이 어렵다
+- 결재 완료 후 이벤트 훅 → Node Flow 실행 → 이메일 발송 같은 **체이닝된 비동기 로직**은 E2E로 검증 불가
+
+---
+
+## 6. 태스크 분할의 구조적 한계
+
+### 현상: 파이프라인이 잘 되는 경우
+```
+[DB 테이블 생성] → [Backend CRUD API] → [Frontend 화면] → [UI 개선]
+```
+각 태스크가 **독립적**이고, 새 파일을 만들고, 의존성이 단방향이다.
+
+### 현상: 파이프라인이 안 되는 경우 (결재 시스템)
+```
+[DB 스키마 변경]
+    ↓ ↘
+[Controller 수정] [새 API 추가] ← 기존 코드 500줄 이해 필요
+    ↓     ↓      ↑
+[모달 수정] [새 화면] ← 기존 UI 패턴 준수 필요 + 엔티티 조인 시스템 이해
+    ↓
+[V2 컴포넌트 수정] ← 레지스트리 시스템 + ConfigPanelBuilder 패턴 이해
+    ↓
+[이벤트 훅 시스템] ← NodeFlowExecutionService 전체 이해 + 새 시스템 설계
+    ↓
+[엔티티 조인 등록] ← 기존 엔티티 조인 시스템 전체 이해
+```
+
+### 문제 본질
+- **기존 파일 수정**이 대부분이다. 새 파일 생성이 아니라 기존 코드에 기능을 끼워넣어야 한다
+- **패턴 준수**가 필수다. "돌아가기만 하면" 안 되고, 기존 시스템과 **일관된 방식**으로 구현해야 한다
+- **설계 결정**이 코드 작성보다 중요하다. "이벤트 훅을 어떻게 설계할까?"는 에이전트가 task description만 보고 결정할 수 없다
+
+---
+
+## 7. PM 에이전트의 역할 한계
+
+### 현상
+```typescript
+// pm-agent.ts:21-70
+const PM_SYSTEM_PROMPT = `
+# 판단 기준
+- 빌드만 통과하면 "complete" 아니다 -- 기능이 실제로 동작해야 "complete"
+- 같은 에러 2회 반복 -> instruction에 구체적 해결책 제시
+- 같은 에러 3회 반복 -> "fail" 판정
+`;
+```
+
+PM은 `round-N.md`(에이전트 응답 + git diff + 테스트 결과)와 `progress.md`만 보고 판단한다.
+
+### PM이 할 수 없는 것
+
+| 역할 | PM 가능 여부 | 이유 |
+|------|:----------:|------|
+| 빌드 실패 원인 파악 | 가능 | 에러 로그가 round-N.md에 있음 |
+| 비즈니스 로직 검증 | 불가 | 실제 코드를 읽지 않고 git diff만 봄 |
+| UI/UX 품질 판단 | 불가 | 스크린샷 없음, 렌더링 결과 못 봄 |
+| 아키텍처 일관성 검증 | 불가 | 전체 시스템 구조를 모름 |
+| 기존 패턴 준수 여부 | 불가 | 기존 코드를 참조하지 않음 |
+| 사용자 의도 반영 여부 | 불가 | 사용자와 대화 맥락 없음 |
+
+### 결재 시스템에서의 구체적 영향
+- PM이 "Backend task 성공, Frontend task 실패"라고 판정할 수는 있지만, **"Backend가 만든 API 응답 구조가 Frontend가 기대하는 것과 다르다"**를 파악할 수 없다
+- "이 모달의 Combobox가 다른 패널과 UI가 다르다"는 사용자만 판단 가능
+- "이벤트 훅 시스템의 트리거 타이밍이 잘못됐다"는 전체 아키텍처를 이해해야 판단 가능
+
+---
+
+## 8. 안전성 리스크
+
+### 역사적 사고
+> "과거 에이전트가 범위 밖 파일 50000줄 삭제하여 2800+ TS 에러 발생"  
+> — user rules
+
+### 결재 시스템의 리스크
+수정 대상 파일이 **시스템 핵심 파일**들이다:
+
+| 파일 | 리스크 |
+|------|--------|
+| `improvedButtonActionExecutor.ts` (~1500줄) | 모든 버튼 동작의 핵심. 잘못 건드리면 시스템 전체 버튼 동작 불능 |
+| `approvalController.ts` (~800줄) | 기존 결재 API 깨질 수 있음 |
+| `ButtonConfigPanel.tsx` (~600줄) | 화면 디자이너 설정 패널 전체에 영향 |
+| `v2-approval-step/` (5개 파일) | V2 컴포넌트 레지스트리 손상 가능 |
+| `AppLayout.tsx` | 전체 레이아웃 메뉴 깨질 수 있음 |
+| `UserDropdown.tsx` | 사용자 프로필 메뉴 깨질 수 있음 |
+
+`files` 필드로 범위를 제한하더라도, **에이전트가 `--trust` 모드로 실행**되기 때문에 실제로는 모든 파일에 접근 가능하다:
+
+```typescript
+// executor.ts:78
+const child = spawn(agentPath, ['--model', model, '--print', '--trust'], {
+```
+
+code-guard가 일부 보호하지만, **구조적 파괴(잘못된 import 삭제, 함수 시그니처 변경)는 코드 가드가 감지 불가**하다.
+
+---
+
+## 9. 종합: 파이프라인이 적합한 경우 vs 부적합한 경우
+
+### 적합한 경우 (현재 파이프라인)
+
+| 특성 | 예시 |
+|------|------|
+| 새 파일 생성 위주 | 새 CRUD 화면 만들기 |
+| 독립적 태스크 | 테이블 → API → 화면 순차 |
+| 패턴이 단순/반복적 | 표준 CRUD, 표준 Form |
+| 검증이 명확 | 빌드 + API 호출 + 브라우저 기본 확인 |
+| 컨텍스트 최소 | 기존 시스템 이해 불필요 |
+
+### 부적합한 경우 (결재 시스템)
+
+| 특성 | 결재 시스템 해당 여부 |
+|------|:-------------------:|
+| 기존 파일 대규모 수정 | 해당 (10+ 파일 수정) |
+| 크로스도메인 의존성 | 해당 (DB ↔ BE ↔ FE ↔ 기존 시스템) |
+| 복잡한 비즈니스 로직 | 해당 (5가지 결재 유형, 상태 전이, 이벤트 훅) |
+| 기존 시스템 깊은 이해 필요 | 해당 (제어관리, 엔티티 조인, 컴포넌트 레지스트리) |
+| UI/UX 일관성 필수 | 해당 (Combobox, 모달, 설정 패널 패턴 통일) |
+| 설계 결정이 선행 필요 | 해당 (이벤트 훅 아키텍처, 결재 타입 상태 머신) |
+| 사용자 피드백 반복 필요 | 해당 (실제로 4회 UI 수정 반복) |
+
+---
+
+## 10. 개선 방향 제안
+
+현재 파이프라인을 결재 시스템 같은 대규모 프로젝트에서 사용하려면 다음이 필요하다:
+
+### 10.1 컨텍스트 전달 강화
+- **프로젝트 컨텍스트 파일**: `.cursor/rules/` 수준의 프로젝트 규칙을 에이전트 프롬프트에 동적 주입
+- **아키텍처 결정 기록**: PM-사용자 간 논의된 설계 결정을 구조화된 형태로 에이전트에 전달
+- **패턴 레퍼런스 파일**: "이 파일을 참고해서 만들어라"를 task description이 아닌 시스템 차원에서 지원
+
+### 10.2 파일 컨텍스트 확대
+- 3000자 절삭 → **전체 파일 전달** 또는 최소 10000자 이상
+- 관련 파일 자동 탐지 (import 그래프 기반)
+- 참고 파일(reference files)과 수정 파일(target files) 구분
+
+### 10.3 에이전트 간 소통 채널
+- 라운드 내에서도 에이전트 간 **중간 결과 공유** 가능
+- "Backend가 API 스펙을 먼저 정의 → Frontend가 그 스펙 기반으로 구현" 같은 **단계적 소통**
+- 질문-응답 프로토콜 (현재 CollabMessage가 있지만 실질적으로 사용 안 됨)
+
+### 10.4 PM 에이전트 강화
+- **코드 리뷰 기능**: git diff만 보지 말고 실제 파일을 읽어서 패턴 준수 여부 확인
+- **아키텍처 검증**: 전체 시스템 구조와의 일관성 검증
+- **사용자 피드백 루프**: PM이 사용자에게 "이 부분 확인 필요합니다" 알림 가능
+
+### 10.5 검증 시스템 확장
+- **비즈니스 로직 검증**: 상태 전이 테스트 (결재 플로우 시나리오 자동 실행)
+- **UI 일관성 검증**: 스크린샷 비교, 컴포넌트 패턴 분석
+- **통합 테스트**: 단일 API 호출이 아닌 시나리오 기반 E2E
+
+### 10.6 안전성 강화
+- `--trust` 모드 대신 **파일 범위 제한된 실행 모드**
+- 라운드별 git diff 자동 리뷰 (의도치 않은 파일 변경 감지)
+- 롤백 자동화 (검증 실패 시 자동 `git checkout`)
+
+---
+
+## 부록: 결재 시스템 파이프라인 실행 시 예상 시나리오
+
+### 시도할 경우 예상되는 실패 패턴
+
+```
+Round 1: DB 마이그레이션 (task-1)
+  → 성공 가능 (신규 파일 생성이므로)
+
+Round 2: Backend Controller 수정 (task-2)
+  → approvalController.ts 3000자만 보고 수정 시도
+  → 기존 함수 구조 파악 실패
+  → L1 빌드 에러 (import 누락, 타입 불일치)
+  → 재시도 1: 에러 메시지 보고 고치지만, 기존 패턴과 다른 방식으로 구현
+  → L3 API 테스트 통과 (기능은 동작)
+  → 하지만 코드 품질/패턴 불일치 (PM이 감지 불가)
+
+Round 3: Frontend 모달 수정 (task-4)
+  → 기존 ApprovalRequestModal 3000자만 보고 수정
+  → Combobox 패턴 대신 기본 Select 사용 (다른 패널 참고 불가)
+  → L1 빌드 통과, L5 브라우저 테스트도 기본 동작 통과
+  → 하지만 UI 일관성 미달 (사용자가 보면 즉시 지적)
+
+Round 4-6: 이벤트 훅 시스템 (task-7)
+  → NodeFlowExecutionService 전체 이해 필요한데 3000자만 봄
+  → 기존 시스템과 연동 불가능한 독립적 구현 생산
+  → PM이 "빌드 통과했으니 complete" 판정
+  → 실제로는 기존 제어관리와 전혀 연결 안 됨
+
+최종: 8/8 task "성공" 판정
+→ 사용자가 확인: "이거 다 뜯어 고쳐야 하는데?"
+→ 파이프라인 2시간 + 사용자 수동 수정 3시간 = 5시간 낭비
+→ PM이 직접 했으면 2~3시간에 끝
+```
+
+---
+
+*작성일: 2026-03-03*
+*대상: Agent Pipeline v3.0 (`_local/agent-pipeline/`)*
+*맥락: 결재 시스템 v2 재설계 프로젝트 (`docs/결재시스템_구현_현황.md`)*
diff --git a/frontend/app/(auth)/login/page.tsx b/frontend/app/(auth)/login/page.tsx
index fe697cee..62e48e08 100644
--- a/frontend/app/(auth)/login/page.tsx
+++ b/frontend/app/(auth)/login/page.tsx
@@ -5,17 +5,13 @@ import { LoginHeader } from "@/components/auth/LoginHeader";
 import { LoginForm } from "@/components/auth/LoginForm";
 import { LoginFooter } from "@/components/auth/LoginFooter";
 
-/**
- * 로그인 페이지 컴포넌트
- * 비즈니스 로직은 useLogin 훅에서 처리하고, UI 컴포넌트들을 조합하여 구성
- */
 export default function LoginPage() {
   const { formData, isLoading, error, showPassword, handleInputChange, handleLogin, togglePasswordVisibility } =
     useLogin();
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-slate-50 to-slate-100 p-4">
-      <div className="w-full max-w-md space-y-8">
+    <div className="flex min-h-screen flex-col items-center justify-center bg-muted/40 p-4">
+      <div className="w-full max-w-md space-y-6">
         <LoginHeader />
 
         <LoginForm
diff --git a/frontend/app/(main)/admin/approvalBox/page.tsx b/frontend/app/(main)/admin/approvalBox/page.tsx
index 2a979829..e7488808 100644
--- a/frontend/app/(main)/admin/approvalBox/page.tsx
+++ b/frontend/app/(main)/admin/approvalBox/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useState, useEffect, useCallback, useRef } from "react";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
@@ -12,9 +12,12 @@ import {
 } from "@/components/ui/dialog";
 import { Textarea } from "@/components/ui/textarea";
 import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Switch } from "@/components/ui/switch";
 import { toast } from "sonner";
 import {
-  Loader2, Send, Inbox, CheckCircle, XCircle, Clock, Eye,
+  Loader2, Send, Inbox, CheckCircle, XCircle, Eye,
+  UserCog, Plus, Pencil, Trash2, Search,
 } from "lucide-react";
 import { ScrollToTop } from "@/components/common/ScrollToTop";
 import {
@@ -23,9 +26,16 @@ import {
   getMyPendingApprovals,
   processApprovalLine,
   cancelApprovalRequest,
+  getProxySettings,
+  createProxySetting,
+  updateProxySetting,
+  deleteProxySetting,
   type ApprovalRequest,
   type ApprovalLine,
+  type ApprovalProxySetting,
 } from "@/lib/api/approval";
+import { getUserList } from "@/lib/api/user";
+import { getCurrentUser } from "@/lib/api/client";
 
 const STATUS_MAP: Record<string, { label: string; variant: "default" | "secondary" | "destructive" | "outline" }> = {
   requested: { label: "요청", variant: "outline" },
@@ -63,8 +73,19 @@ function SentTab() {
 
   const fetchRequests = useCallback(async () => {
     setLoading(true);
-    const res = await getApprovalRequests({ my_approvals: false });
-    if (res.success && res.data) setRequests(res.data);
+    try {
+      // 현재 로그인 사용자 ID를 기반으로 내가 올린 결재만 조회
+      const userRes = await getCurrentUser();
+      if (userRes.success && userRes.data) {
+        const res = await getApprovalRequests({ requester_id: userRes.data.userId });
+        if (res.success && res.data) setRequests(res.data);
+      } else {
+        // 사용자 정보 없으면 빈 목록 표시
+        setRequests([]);
+      }
+    } catch {
+      setRequests([]);
+    }
     setLoading(false);
   }, []);
 
@@ -97,47 +118,126 @@ function SentTab() {
   return (
     <div className="space-y-4">
       {loading ? (
-        <div className="flex h-64 items-center justify-center">
-          <Loader2 className="text-muted-foreground h-6 w-6 animate-spin" />
-        </div>
+        <>
+          {/* 데스크톱 스켈레톤 */}
+          <div className="hidden rounded-lg border bg-card shadow-sm lg:block">
+            <Table>
+              <TableHeader>
+                <TableRow className="border-b bg-muted/50 hover:bg-muted/50">
+                  <TableHead className="h-12 text-sm font-semibold">제목</TableHead>
+                  <TableHead className="h-12 text-sm font-semibold">대상 테이블</TableHead>
+                  <TableHead className="h-12 w-[100px] text-center text-sm font-semibold">진행</TableHead>
+                  <TableHead className="h-12 w-[80px] text-center text-sm font-semibold">상태</TableHead>
+                  <TableHead className="h-12 w-[140px] text-sm font-semibold">요청일</TableHead>
+                  <TableHead className="h-12 w-[60px] text-center text-sm font-semibold">보기</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {Array.from({ length: 5 }).map((_, i) => (
+                  <TableRow key={i} className="border-b">
+                    <TableCell className="h-14"><div className="h-4 animate-pulse rounded bg-muted" /></TableCell>
+                    <TableCell className="h-14"><div className="h-4 w-24 animate-pulse rounded bg-muted" /></TableCell>
+                    <TableCell className="h-14"><div className="mx-auto h-4 w-12 animate-pulse rounded bg-muted" /></TableCell>
+                    <TableCell className="h-14"><div className="mx-auto h-5 w-16 animate-pulse rounded-full bg-muted" /></TableCell>
+                    <TableCell className="h-14"><div className="h-4 w-28 animate-pulse rounded bg-muted" /></TableCell>
+                    <TableCell className="h-14"><div className="mx-auto h-8 w-8 animate-pulse rounded bg-muted" /></TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+          {/* 모바일 스켈레톤 */}
+          <div className="grid gap-4 sm:grid-cols-2 lg:hidden">
+            {Array.from({ length: 4 }).map((_, i) => (
+              <div key={i} className="rounded-lg border bg-card p-4 shadow-sm">
+                <div className="mb-3 flex items-start justify-between">
+                  <div className="h-5 w-40 animate-pulse rounded bg-muted" />
+                  <div className="h-5 w-14 animate-pulse rounded-full bg-muted" />
+                </div>
+                <div className="space-y-2 border-t pt-3">
+                  {Array.from({ length: 3 }).map((_, j) => (
+                    <div key={j} className="flex justify-between">
+                      <div className="h-4 w-16 animate-pulse rounded bg-muted" />
+                      <div className="h-4 w-24 animate-pulse rounded bg-muted" />
+                    </div>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        </>
       ) : requests.length === 0 ? (
-        <div className="bg-card flex h-64 flex-col items-center justify-center rounded-lg border shadow-sm">
+        <div className="flex h-64 flex-col items-center justify-center rounded-lg border bg-card shadow-sm">
           <Send className="text-muted-foreground mb-2 h-8 w-8" />
           <p className="text-muted-foreground text-sm">상신한 결재가 없습니다.</p>
         </div>
       ) : (
-        <div className="bg-card rounded-lg border shadow-sm">
-          <Table>
-            <TableHeader>
-              <TableRow className="bg-muted/50 border-b hover:bg-muted/50">
-                <TableHead className="h-12 text-sm font-semibold">제목</TableHead>
-                <TableHead className="h-12 text-sm font-semibold">대상 테이블</TableHead>
-                <TableHead className="h-12 w-[100px] text-center text-sm font-semibold">진행</TableHead>
-                <TableHead className="h-12 w-[80px] text-center text-sm font-semibold">상태</TableHead>
-                <TableHead className="h-12 w-[140px] text-sm font-semibold">요청일</TableHead>
-                <TableHead className="h-12 w-[60px] text-center text-sm font-semibold">보기</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {requests.map((req) => (
-                <TableRow key={req.request_id} className="border-b transition-colors hover:bg-muted/50">
-                  <TableCell className="h-14 text-sm font-medium">{req.title}</TableCell>
-                  <TableCell className="text-muted-foreground h-14 text-sm">{req.target_table}</TableCell>
-                  <TableCell className="h-14 text-center text-sm">
-                    {req.current_step}/{req.total_steps}
-                  </TableCell>
-                  <TableCell className="h-14 text-center"><StatusBadge status={req.status} /></TableCell>
-                  <TableCell className="text-muted-foreground h-14 text-sm">{formatDate(req.created_at)}</TableCell>
-                  <TableCell className="h-14 text-center">
-                    <Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => openDetail(req)}>
-                      <Eye className="h-4 w-4" />
-                    </Button>
-                  </TableCell>
+        <>
+          {/* 데스크톱 테이블 */}
+          <div className="hidden rounded-lg border bg-card shadow-sm lg:block">
+            <Table>
+              <TableHeader>
+                <TableRow className="border-b bg-muted/50 hover:bg-muted/50">
+                  <TableHead className="h-12 text-sm font-semibold">제목</TableHead>
+                  <TableHead className="h-12 text-sm font-semibold">대상 테이블</TableHead>
+                  <TableHead className="h-12 w-[100px] text-center text-sm font-semibold">진행</TableHead>
+                  <TableHead className="h-12 w-[80px] text-center text-sm font-semibold">상태</TableHead>
+                  <TableHead className="h-12 w-[140px] text-sm font-semibold">요청일</TableHead>
+                  <TableHead className="h-12 w-[60px] text-center text-sm font-semibold">보기</TableHead>
                 </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        </div>
+              </TableHeader>
+              <TableBody>
+                {requests.map((req) => (
+                  <TableRow key={req.request_id} className="border-b transition-colors hover:bg-muted/50">
+                    <TableCell className="h-14 text-sm font-medium">{req.title}</TableCell>
+                    <TableCell className="text-muted-foreground h-14 text-sm">{req.target_table}</TableCell>
+                    <TableCell className="h-14 text-center text-sm">
+                      {req.current_step}/{req.total_steps}
+                    </TableCell>
+                    <TableCell className="h-14 text-center"><StatusBadge status={req.status} /></TableCell>
+                    <TableCell className="text-muted-foreground h-14 text-sm">{formatDate(req.created_at)}</TableCell>
+                    <TableCell className="h-14 text-center">
+                      <Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => openDetail(req)}>
+                        <Eye className="h-4 w-4" />
+                      </Button>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+          {/* 모바일 카드 */}
+          <div className="grid gap-4 sm:grid-cols-2 lg:hidden">
+            {requests.map((req) => (
+              <div key={req.request_id} className="rounded-lg border bg-card p-4 shadow-sm">
+                <div className="mb-3 flex items-start justify-between">
+                  <h3 className="text-base font-semibold">{req.title}</h3>
+                  <StatusBadge status={req.status} />
+                </div>
+                <div className="space-y-2 border-t pt-3">
+                  <div className="flex justify-between text-sm">
+                    <span className="text-muted-foreground">대상 테이블</span>
+                    <span className="font-medium">{req.target_table || "-"}</span>
+                  </div>
+                  <div className="flex justify-between text-sm">
+                    <span className="text-muted-foreground">진행</span>
+                    <span className="font-medium">{req.current_step}/{req.total_steps}</span>
+                  </div>
+                  <div className="flex justify-between text-sm">
+                    <span className="text-muted-foreground">요청일</span>
+                    <span>{formatDate(req.created_at)}</span>
+                  </div>
+                </div>
+                <div className="mt-3 border-t pt-3">
+                  <Button variant="outline" size="sm" className="h-9 w-full gap-2 text-sm" onClick={() => openDetail(req)}>
+                    <Eye className="h-4 w-4" />
+                    상세 보기
+                  </Button>
+                </div>
+              </div>
+            ))}
+          </div>
+        </>
       )}
 
       {/* 상세 모달 */}
@@ -233,22 +333,36 @@ function ReceivedTab() {
 
   const [processOpen, setProcessOpen] = useState(false);
   const [selectedLine, setSelectedLine] = useState<ApprovalLine | null>(null);
+  const [selectedRequest, setSelectedRequest] = useState<ApprovalRequest | null>(null);
+  const [detailLoading, setDetailLoading] = useState(false);
   const [comment, setComment] = useState("");
   const [isProcessing, setIsProcessing] = useState(false);
 
   const fetchPending = useCallback(async () => {
     setLoading(true);
-    const res = await getMyPendingApprovals();
-    if (res.success && res.data) setPendingLines(res.data);
+    try {
+      const res = await getMyPendingApprovals();
+      if (res.success && res.data) setPendingLines(res.data);
+    } catch {
+      setPendingLines([]);
+    }
     setLoading(false);
   }, []);
 
   useEffect(() => { fetchPending(); }, [fetchPending]);
 
-  const openProcess = (line: ApprovalLine) => {
+  const openProcess = async (line: ApprovalLine) => {
     setSelectedLine(line);
+    setSelectedRequest(null);
     setComment("");
     setProcessOpen(true);
+    // 결재 상세 내용(결재선 포함) 비동기 로드
+    if (line.request_id) {
+      setDetailLoading(true);
+      const res = await getApprovalRequest(line.request_id);
+      if (res.success && res.data) setSelectedRequest(res.data);
+      setDetailLoading(false);
+    }
   };
 
   const handleProcess = async (action: "approved" | "rejected") => {
@@ -271,64 +385,147 @@ function ReceivedTab() {
   return (
     <div className="space-y-4">
       {loading ? (
-        <div className="flex h-64 items-center justify-center">
-          <Loader2 className="text-muted-foreground h-6 w-6 animate-spin" />
-        </div>
+        <>
+          {/* 데스크톱 스켈레톤 */}
+          <div className="hidden rounded-lg border bg-card shadow-sm lg:block">
+            <Table>
+              <TableHeader>
+                <TableRow className="border-b bg-muted/50 hover:bg-muted/50">
+                  <TableHead className="h-12 text-sm font-semibold">제목</TableHead>
+                  <TableHead className="h-12 text-sm font-semibold">요청자</TableHead>
+                  <TableHead className="h-12 text-sm font-semibold">대상 테이블</TableHead>
+                  <TableHead className="h-12 w-[80px] text-center text-sm font-semibold">단계</TableHead>
+                  <TableHead className="h-12 w-[140px] text-sm font-semibold">요청일</TableHead>
+                  <TableHead className="h-12 w-[100px] text-center text-sm font-semibold">처리</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {Array.from({ length: 5 }).map((_, i) => (
+                  <TableRow key={i} className="border-b">
+                    <TableCell className="h-14"><div className="h-4 animate-pulse rounded bg-muted" /></TableCell>
+                    <TableCell className="h-14"><div className="h-4 w-20 animate-pulse rounded bg-muted" /></TableCell>
+                    <TableCell className="h-14"><div className="h-4 w-24 animate-pulse rounded bg-muted" /></TableCell>
+                    <TableCell className="h-14"><div className="mx-auto h-5 w-10 animate-pulse rounded-full bg-muted" /></TableCell>
+                    <TableCell className="h-14"><div className="h-4 w-28 animate-pulse rounded bg-muted" /></TableCell>
+                    <TableCell className="h-14"><div className="mx-auto h-8 w-20 animate-pulse rounded bg-muted" /></TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+          {/* 모바일 스켈레톤 */}
+          <div className="grid gap-4 sm:grid-cols-2 lg:hidden">
+            {Array.from({ length: 4 }).map((_, i) => (
+              <div key={i} className="rounded-lg border bg-card p-4 shadow-sm">
+                <div className="mb-3 flex items-start justify-between">
+                  <div className="h-5 w-40 animate-pulse rounded bg-muted" />
+                  <div className="h-5 w-10 animate-pulse rounded-full bg-muted" />
+                </div>
+                <div className="space-y-2 border-t pt-3">
+                  {Array.from({ length: 3 }).map((_, j) => (
+                    <div key={j} className="flex justify-between">
+                      <div className="h-4 w-16 animate-pulse rounded bg-muted" />
+                      <div className="h-4 w-24 animate-pulse rounded bg-muted" />
+                    </div>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        </>
       ) : pendingLines.length === 0 ? (
-        <div className="bg-card flex h-64 flex-col items-center justify-center rounded-lg border shadow-sm">
+        <div className="flex h-64 flex-col items-center justify-center rounded-lg border bg-card shadow-sm">
           <Inbox className="text-muted-foreground mb-2 h-8 w-8" />
           <p className="text-muted-foreground text-sm">결재 대기 건이 없습니다.</p>
         </div>
       ) : (
-        <div className="bg-card rounded-lg border shadow-sm">
-          <Table>
-            <TableHeader>
-              <TableRow className="bg-muted/50 border-b hover:bg-muted/50">
-                <TableHead className="h-12 text-sm font-semibold">제목</TableHead>
-                <TableHead className="h-12 text-sm font-semibold">요청자</TableHead>
-                <TableHead className="h-12 text-sm font-semibold">대상 테이블</TableHead>
-                <TableHead className="h-12 w-[80px] text-center text-sm font-semibold">단계</TableHead>
-                <TableHead className="h-12 w-[140px] text-sm font-semibold">요청일</TableHead>
-                <TableHead className="h-12 w-[100px] text-center text-sm font-semibold">처리</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {pendingLines.map((line) => (
-                <TableRow key={line.line_id} className="border-b transition-colors hover:bg-muted/50">
-                  <TableCell className="h-14 text-sm font-medium">{line.title || "-"}</TableCell>
-                  <TableCell className="h-14 text-sm">
-                    {line.requester_name || "-"}
-                    {line.requester_dept && (
-                      <span className="text-muted-foreground ml-1 text-xs">({line.requester_dept})</span>
-                    )}
-                  </TableCell>
-                  <TableCell className="text-muted-foreground h-14 text-sm">{line.target_table || "-"}</TableCell>
-                  <TableCell className="h-14 text-center text-sm">
-                    <Badge variant="outline">{line.step_order}차</Badge>
-                  </TableCell>
-                  <TableCell className="text-muted-foreground h-14 text-sm">{formatDate(line.request_created_at || line.created_at)}</TableCell>
-                  <TableCell className="h-14 text-center">
-                    <Button size="sm" className="h-8 text-xs" onClick={() => openProcess(line)}>
-                      결재하기
-                    </Button>
-                  </TableCell>
+        <>
+          {/* 데스크톱 테이블 */}
+          <div className="hidden rounded-lg border bg-card shadow-sm lg:block">
+            <Table>
+              <TableHeader>
+                <TableRow className="border-b bg-muted/50 hover:bg-muted/50">
+                  <TableHead className="h-12 text-sm font-semibold">제목</TableHead>
+                  <TableHead className="h-12 text-sm font-semibold">요청자</TableHead>
+                  <TableHead className="h-12 text-sm font-semibold">대상 테이블</TableHead>
+                  <TableHead className="h-12 w-[80px] text-center text-sm font-semibold">단계</TableHead>
+                  <TableHead className="h-12 w-[140px] text-sm font-semibold">요청일</TableHead>
+                  <TableHead className="h-12 w-[100px] text-center text-sm font-semibold">처리</TableHead>
                 </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        </div>
+              </TableHeader>
+              <TableBody>
+                {pendingLines.map((line) => (
+                  <TableRow key={line.line_id} className="border-b transition-colors hover:bg-muted/50">
+                    <TableCell className="h-14 text-sm font-medium">{line.title || "-"}</TableCell>
+                    <TableCell className="h-14 text-sm">
+                      {line.requester_name || "-"}
+                      {line.requester_dept && (
+                        <span className="text-muted-foreground ml-1 text-xs">({line.requester_dept})</span>
+                      )}
+                    </TableCell>
+                    <TableCell className="text-muted-foreground h-14 text-sm">{line.target_table || "-"}</TableCell>
+                    <TableCell className="h-14 text-center text-sm">
+                      <Badge variant="outline">{line.step_order}차</Badge>
+                    </TableCell>
+                    <TableCell className="text-muted-foreground h-14 text-sm">{formatDate(line.request_created_at || line.created_at)}</TableCell>
+                    <TableCell className="h-14 text-center">
+                      <Button size="sm" className="h-8 text-xs" onClick={() => openProcess(line)}>
+                        결재하기
+                      </Button>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+          {/* 모바일 카드 */}
+          <div className="grid gap-4 sm:grid-cols-2 lg:hidden">
+            {pendingLines.map((line) => (
+              <div key={line.line_id} className="rounded-lg border bg-card p-4 shadow-sm">
+                <div className="mb-3 flex items-start justify-between">
+                  <h3 className="text-base font-semibold">{line.title || "-"}</h3>
+                  <Badge variant="outline">{line.step_order}차</Badge>
+                </div>
+                <div className="space-y-2 border-t pt-3">
+                  <div className="flex justify-between text-sm">
+                    <span className="text-muted-foreground">요청자</span>
+                    <span className="font-medium">
+                      {line.requester_name || "-"}
+                      {line.requester_dept && (
+                        <span className="text-muted-foreground ml-1 text-xs">({line.requester_dept})</span>
+                      )}
+                    </span>
+                  </div>
+                  <div className="flex justify-between text-sm">
+                    <span className="text-muted-foreground">대상 테이블</span>
+                    <span>{line.target_table || "-"}</span>
+                  </div>
+                  <div className="flex justify-between text-sm">
+                    <span className="text-muted-foreground">요청일</span>
+                    <span>{formatDate(line.request_created_at || line.created_at)}</span>
+                  </div>
+                </div>
+                <div className="mt-3 border-t pt-3">
+                  <Button className="h-9 w-full text-sm" onClick={() => openProcess(line)}>
+                    결재하기
+                  </Button>
+                </div>
+              </div>
+            ))}
+          </div>
+        </>
       )}
 
       {/* 결재 처리 모달 */}
       <Dialog open={processOpen} onOpenChange={setProcessOpen}>
-        <DialogContent className="max-w-[95vw] sm:max-w-[450px]">
+        <DialogContent className="max-w-[95vw] sm:max-w-[520px]">
           <DialogHeader>
             <DialogTitle className="text-base sm:text-lg">결재 처리</DialogTitle>
             <DialogDescription className="text-xs sm:text-sm">
               {selectedLine?.title}
             </DialogDescription>
           </DialogHeader>
-          <div className="space-y-3">
+          <div className="max-h-[55vh] space-y-4 overflow-y-auto">
             <div className="grid grid-cols-2 gap-3 text-sm">
               <div>
                 <span className="text-muted-foreground text-xs">요청자</span>
@@ -338,18 +535,84 @@ function ReceivedTab() {
                 <span className="text-muted-foreground text-xs">결재 단계</span>
                 <p className="mt-1 font-medium">{selectedLine?.step_order}차 결재</p>
               </div>
+              {selectedLine?.target_table && (
+                <div>
+                  <span className="text-muted-foreground text-xs">대상 테이블</span>
+                  <p className="mt-1 font-medium">{selectedLine.target_table}</p>
+                </div>
+              )}
+              <div>
+                <span className="text-muted-foreground text-xs">요청일</span>
+                <p className="mt-1">{formatDate(selectedLine?.request_created_at || selectedLine?.created_at)}</p>
+              </div>
             </div>
+
+            {/* 결재선 상세 */}
+            {detailLoading ? (
+              <div className="flex items-center justify-center py-4">
+                <Loader2 className="text-muted-foreground h-4 w-4 animate-spin" />
+                <span className="text-muted-foreground ml-2 text-xs">결재선 로딩 중...</span>
+              </div>
+            ) : selectedRequest?.lines && selectedRequest.lines.length > 0 && (
+              <div>
+                <span className="text-muted-foreground text-xs">전체 결재선</span>
+                <div className="mt-2 space-y-2">
+                  {selectedRequest.lines
+                    .sort((a, b) => a.step_order - b.step_order)
+                    .map((line) => (
+                      <div
+                        key={line.line_id}
+                        className={`flex items-center justify-between rounded-md border p-2 ${
+                          line.line_id === selectedLine?.line_id ? "border-primary bg-primary/5" : "bg-muted/30"
+                        }`}
+                      >
+                        <div className="flex items-center gap-2">
+                          <Badge
+                            variant={line.line_id === selectedLine?.line_id ? "default" : "outline"}
+                            className="text-[10px]"
+                          >
+                            {line.step_order}차
+                          </Badge>
+                          <span className="text-sm font-medium">{line.approver_name || line.approver_id}</span>
+                          {line.approver_position && (
+                            <span className="text-muted-foreground text-xs">({line.approver_position})</span>
+                          )}
+                          {line.line_id === selectedLine?.line_id && (
+                            <Badge variant="secondary" className="text-[10px]">내 차례</Badge>
+                          )}
+                        </div>
+                        <div className="flex items-center gap-2">
+                          <StatusBadge status={line.status} />
+                          {line.processed_at && (
+                            <span className="text-muted-foreground text-[10px]">{formatDate(line.processed_at)}</span>
+                          )}
+                        </div>
+                      </div>
+                    ))}
+                </div>
+              </div>
+            )}
+
+            {/* 의견 입력 */}
             <div>
-              <Label className="text-xs sm:text-sm">의견</Label>
+              <Label className="text-xs sm:text-sm">결재 의견</Label>
               <Textarea
                 value={comment}
                 onChange={(e) => setComment(e.target.value)}
                 placeholder="결재 의견을 입력하세요 (선택사항)"
-                className="min-h-[80px] text-xs sm:text-sm"
+                className="mt-1 min-h-[80px] text-xs sm:text-sm"
               />
             </div>
           </div>
           <DialogFooter className="gap-2 sm:gap-0">
+            <Button
+              variant="outline"
+              onClick={() => setProcessOpen(false)}
+              disabled={isProcessing}
+              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+            >
+              취소
+            </Button>
             <Button
               variant="destructive"
               onClick={() => handleProcess("rejected")}
@@ -378,6 +641,670 @@ function ReceivedTab() {
   );
 }
 
+// ============================================================
+// 대결 설정
+// ============================================================
+
+interface UserSearchResult {
+  userId: string;
+  userName: string;
+  positionName?: string;
+  deptName?: string;
+}
+
+function formatDateOnly(dateStr?: string) {
+  if (!dateStr) return "-";
+  return new Date(dateStr).toLocaleDateString("ko-KR", {
+    year: "numeric", month: "2-digit", day: "2-digit",
+  });
+}
+
+function ProxyTab() {
+  const [proxies, setProxies] = useState<ApprovalProxySetting[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  // 등록/수정 모달 상태
+  const [modalOpen, setModalOpen] = useState(false);
+  const [editingProxy, setEditingProxy] = useState<ApprovalProxySetting | null>(null);
+  const [isSaving, setIsSaving] = useState(false);
+
+  // 폼 필드
+  const [formOriginalUserId, setFormOriginalUserId] = useState("");
+  const [formOriginalUserLabel, setFormOriginalUserLabel] = useState("");
+  const [formProxyUserId, setFormProxyUserId] = useState("");
+  const [formProxyUserLabel, setFormProxyUserLabel] = useState("");
+  const [formStartDate, setFormStartDate] = useState("");
+  const [formEndDate, setFormEndDate] = useState("");
+  const [formReason, setFormReason] = useState("");
+  const [formIsActive, setFormIsActive] = useState(true);
+
+  // 사용자 검색 상태 (원래 결재자)
+  const [origSearchQuery, setOrigSearchQuery] = useState("");
+  const [origSearchResults, setOrigSearchResults] = useState<UserSearchResult[]>([]);
+  const [origSearchOpen, setOrigSearchOpen] = useState(false);
+  const [origSearching, setOrigSearching] = useState(false);
+  const origTimerRef = useRef<NodeJS.Timeout | null>(null);
+
+  // 사용자 검색 상태 (대결자)
+  const [proxySearchQuery, setProxySearchQuery] = useState("");
+  const [proxySearchResults, setProxySearchResults] = useState<UserSearchResult[]>([]);
+  const [proxySearchOpen, setProxySearchOpen] = useState(false);
+  const [proxySearching, setProxySearching] = useState(false);
+  const proxyTimerRef = useRef<NodeJS.Timeout | null>(null);
+
+  // 삭제 확인 모달
+  const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);
+  const [deletingId, setDeletingId] = useState<number | null>(null);
+  const [isDeleting, setIsDeleting] = useState(false);
+
+  const fetchProxies = useCallback(async () => {
+    setLoading(true);
+    const res = await getProxySettings();
+    if (res.success && res.data) setProxies(res.data);
+    setLoading(false);
+  }, []);
+
+  useEffect(() => { fetchProxies(); }, [fetchProxies]);
+
+  // 사용자 검색 공통 로직
+  const searchUsers = useCallback(async (
+    query: string,
+    setResults: (r: UserSearchResult[]) => void,
+    setSearching: (b: boolean) => void,
+  ) => {
+    if (!query.trim() || query.trim().length < 1) {
+      setResults([]);
+      return;
+    }
+    setSearching(true);
+    try {
+      const res = await getUserList({ search: query.trim(), limit: 20 });
+      const data = res?.data || res || [];
+      const rawUsers: any[] = Array.isArray(data) ? data : [];
+      const users: UserSearchResult[] = rawUsers.map((u: any) => ({
+        userId: u.userId || u.user_id || "",
+        userName: u.userName || u.user_name || "",
+        positionName: u.positionName || u.position_name || "",
+        deptName: u.deptName || u.dept_name || "",
+      }));
+      setResults(users);
+    } catch {
+      setResults([]);
+    } finally {
+      setSearching(false);
+    }
+  }, []);
+
+  // 원래 결재자 검색 디바운스
+  useEffect(() => {
+    if (origTimerRef.current) clearTimeout(origTimerRef.current);
+    if (!origSearchQuery.trim()) { setOrigSearchResults([]); return; }
+    origTimerRef.current = setTimeout(() => {
+      searchUsers(origSearchQuery, setOrigSearchResults, setOrigSearching);
+    }, 300);
+    return () => { if (origTimerRef.current) clearTimeout(origTimerRef.current); };
+  }, [origSearchQuery, searchUsers]);
+
+  // 대결자 검색 디바운스
+  useEffect(() => {
+    if (proxyTimerRef.current) clearTimeout(proxyTimerRef.current);
+    if (!proxySearchQuery.trim()) { setProxySearchResults([]); return; }
+    proxyTimerRef.current = setTimeout(() => {
+      searchUsers(proxySearchQuery, setProxySearchResults, setProxySearching);
+    }, 300);
+    return () => { if (proxyTimerRef.current) clearTimeout(proxyTimerRef.current); };
+  }, [proxySearchQuery, searchUsers]);
+
+  const resetForm = () => {
+    setFormOriginalUserId("");
+    setFormOriginalUserLabel("");
+    setFormProxyUserId("");
+    setFormProxyUserLabel("");
+    setFormStartDate("");
+    setFormEndDate("");
+    setFormReason("");
+    setFormIsActive(true);
+    setOrigSearchQuery("");
+    setOrigSearchResults([]);
+    setOrigSearchOpen(false);
+    setProxySearchQuery("");
+    setProxySearchResults([]);
+    setProxySearchOpen(false);
+    setEditingProxy(null);
+  };
+
+  const openCreate = () => {
+    resetForm();
+    setModalOpen(true);
+  };
+
+  const openEdit = (proxy: ApprovalProxySetting) => {
+    setEditingProxy(proxy);
+    setFormOriginalUserId(proxy.original_user_id);
+    setFormOriginalUserLabel(
+      proxy.original_user_name
+        ? `${proxy.original_user_name}${proxy.original_dept_name ? ` (${proxy.original_dept_name})` : ""}`
+        : proxy.original_user_id
+    );
+    setFormProxyUserId(proxy.proxy_user_id);
+    setFormProxyUserLabel(
+      proxy.proxy_user_name
+        ? `${proxy.proxy_user_name}${proxy.proxy_dept_name ? ` (${proxy.proxy_dept_name})` : ""}`
+        : proxy.proxy_user_id
+    );
+    setFormStartDate(proxy.start_date?.split("T")[0] || "");
+    setFormEndDate(proxy.end_date?.split("T")[0] || "");
+    setFormReason(proxy.reason || "");
+    setFormIsActive(proxy.is_active === "Y");
+    setOrigSearchQuery("");
+    setOrigSearchResults([]);
+    setOrigSearchOpen(false);
+    setProxySearchQuery("");
+    setProxySearchResults([]);
+    setProxySearchOpen(false);
+    setModalOpen(true);
+  };
+
+  const handleSave = async () => {
+    if (!formOriginalUserId) { toast.error("원래 결재자를 선택해주세요."); return; }
+    if (!formProxyUserId) { toast.error("대결자를 선택해주세요."); return; }
+    if (!formStartDate) { toast.error("시작일을 입력해주세요."); return; }
+    if (!formEndDate) { toast.error("종료일을 입력해주세요."); return; }
+    if (formStartDate > formEndDate) { toast.error("종료일은 시작일 이후여야 합니다."); return; }
+    if (formOriginalUserId === formProxyUserId) { toast.error("원래 결재자와 대결자가 같을 수 없습니다."); return; }
+
+    setIsSaving(true);
+    try {
+      if (editingProxy) {
+        const res = await updateProxySetting(editingProxy.id, {
+          proxy_user_id: formProxyUserId,
+          start_date: formStartDate,
+          end_date: formEndDate,
+          reason: formReason.trim() || undefined,
+          is_active: formIsActive ? "Y" : "N",
+        });
+        if (res.success) {
+          toast.success("대결 설정이 수정되었습니다.");
+          setModalOpen(false);
+          resetForm();
+          fetchProxies();
+        } else {
+          toast.error(res.error || "수정 실패");
+        }
+      } else {
+        const res = await createProxySetting({
+          original_user_id: formOriginalUserId,
+          proxy_user_id: formProxyUserId,
+          start_date: formStartDate,
+          end_date: formEndDate,
+          reason: formReason.trim() || undefined,
+        });
+        if (res.success) {
+          toast.success("대결 설정이 등록되었습니다.");
+          setModalOpen(false);
+          resetForm();
+          fetchProxies();
+        } else {
+          toast.error(res.error || "등록 실패");
+        }
+      }
+    } catch {
+      toast.error("요청 처리 중 오류가 발생했습니다.");
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const confirmDelete = (id: number) => {
+    setDeletingId(id);
+    setDeleteConfirmOpen(true);
+  };
+
+  const handleDelete = async () => {
+    if (!deletingId) return;
+    setIsDeleting(true);
+    const res = await deleteProxySetting(deletingId);
+    setIsDeleting(false);
+    if (res.success) {
+      toast.success("대결 설정이 삭제되었습니다.");
+      setDeleteConfirmOpen(false);
+      setDeletingId(null);
+      fetchProxies();
+    } else {
+      toast.error(res.error || "삭제 실패");
+    }
+  };
+
+  const selectOrigUser = (user: UserSearchResult) => {
+    setFormOriginalUserId(user.userId);
+    setFormOriginalUserLabel(`${user.userName}${user.deptName ? ` (${user.deptName})` : ""}`);
+    setOrigSearchOpen(false);
+    setOrigSearchQuery("");
+    setOrigSearchResults([]);
+  };
+
+  const selectProxyUser = (user: UserSearchResult) => {
+    setFormProxyUserId(user.userId);
+    setFormProxyUserLabel(`${user.userName}${user.deptName ? ` (${user.deptName})` : ""}`);
+    setProxySearchOpen(false);
+    setProxySearchQuery("");
+    setProxySearchResults([]);
+  };
+
+  return (
+    <div className="space-y-4">
+      {/* 상단 액션 */}
+      <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+        <p className="text-muted-foreground text-sm">
+          결재자가 부재 시 대결자가 대신 결재를 처리합니다.
+        </p>
+        <Button onClick={openCreate} className="h-10 gap-2 text-sm font-medium">
+          <Plus className="h-4 w-4" />
+          대결 등록
+        </Button>
+      </div>
+
+      {/* 목록 */}
+      {loading ? (
+        <>
+          {/* 데스크톱 스켈레톤 */}
+          <div className="hidden rounded-lg border bg-card shadow-sm lg:block">
+            <Table>
+              <TableHeader>
+                <TableRow className="border-b bg-muted/50 hover:bg-muted/50">
+                  <TableHead className="h-12 text-sm font-semibold">원래 결재자</TableHead>
+                  <TableHead className="h-12 text-sm font-semibold">대결자</TableHead>
+                  <TableHead className="h-12 w-[120px] text-sm font-semibold">시작일</TableHead>
+                  <TableHead className="h-12 w-[120px] text-sm font-semibold">종료일</TableHead>
+                  <TableHead className="h-12 text-sm font-semibold">사유</TableHead>
+                  <TableHead className="h-12 w-[80px] text-center text-sm font-semibold">활성</TableHead>
+                  <TableHead className="h-12 w-[100px] text-center text-sm font-semibold">관리</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {Array.from({ length: 4 }).map((_, i) => (
+                  <TableRow key={i} className="border-b">
+                    <TableCell className="h-14"><div className="h-4 w-24 animate-pulse rounded bg-muted" /></TableCell>
+                    <TableCell className="h-14"><div className="h-4 w-24 animate-pulse rounded bg-muted" /></TableCell>
+                    <TableCell className="h-14"><div className="h-4 w-20 animate-pulse rounded bg-muted" /></TableCell>
+                    <TableCell className="h-14"><div className="h-4 w-20 animate-pulse rounded bg-muted" /></TableCell>
+                    <TableCell className="h-14"><div className="h-4 animate-pulse rounded bg-muted" /></TableCell>
+                    <TableCell className="h-14"><div className="mx-auto h-5 w-14 animate-pulse rounded-full bg-muted" /></TableCell>
+                    <TableCell className="h-14"><div className="mx-auto h-8 w-16 animate-pulse rounded bg-muted" /></TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+          {/* 모바일 스켈레톤 */}
+          <div className="grid gap-4 sm:grid-cols-2 lg:hidden">
+            {Array.from({ length: 4 }).map((_, i) => (
+              <div key={i} className="rounded-lg border bg-card p-4 shadow-sm">
+                <div className="mb-3 flex items-start justify-between">
+                  <div className="h-5 w-32 animate-pulse rounded bg-muted" />
+                  <div className="h-5 w-14 animate-pulse rounded-full bg-muted" />
+                </div>
+                <div className="space-y-2 border-t pt-3">
+                  {Array.from({ length: 4 }).map((_, j) => (
+                    <div key={j} className="flex justify-between">
+                      <div className="h-4 w-14 animate-pulse rounded bg-muted" />
+                      <div className="h-4 w-24 animate-pulse rounded bg-muted" />
+                    </div>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        </>
+      ) : proxies.length === 0 ? (
+        <div className="flex h-64 flex-col items-center justify-center rounded-lg border bg-card shadow-sm">
+          <UserCog className="text-muted-foreground mb-2 h-8 w-8" />
+          <p className="text-muted-foreground text-sm">등록된 대결 설정이 없습니다.</p>
+        </div>
+      ) : (
+        <>
+          {/* 데스크톱 테이블 */}
+          <div className="hidden rounded-lg border bg-card shadow-sm lg:block">
+            <Table>
+              <TableHeader>
+                <TableRow className="border-b bg-muted/50 hover:bg-muted/50">
+                  <TableHead className="h-12 text-sm font-semibold">원래 결재자</TableHead>
+                  <TableHead className="h-12 text-sm font-semibold">대결자</TableHead>
+                  <TableHead className="h-12 w-[120px] text-sm font-semibold">시작일</TableHead>
+                  <TableHead className="h-12 w-[120px] text-sm font-semibold">종료일</TableHead>
+                  <TableHead className="h-12 text-sm font-semibold">사유</TableHead>
+                  <TableHead className="h-12 w-[80px] text-center text-sm font-semibold">활성</TableHead>
+                  <TableHead className="h-12 w-[100px] text-center text-sm font-semibold">관리</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {proxies.map((proxy) => (
+                  <TableRow key={proxy.id} className="border-b transition-colors hover:bg-muted/50">
+                    <TableCell className="h-14 text-sm">
+                      <span className="font-medium">{proxy.original_user_name || proxy.original_user_id}</span>
+                      {proxy.original_dept_name && (
+                        <span className="text-muted-foreground ml-1 text-xs">({proxy.original_dept_name})</span>
+                      )}
+                    </TableCell>
+                    <TableCell className="h-14 text-sm">
+                      <span className="font-medium">{proxy.proxy_user_name || proxy.proxy_user_id}</span>
+                      {proxy.proxy_dept_name && (
+                        <span className="text-muted-foreground ml-1 text-xs">({proxy.proxy_dept_name})</span>
+                      )}
+                    </TableCell>
+                    <TableCell className="text-muted-foreground h-14 text-sm">
+                      {formatDateOnly(proxy.start_date)}
+                    </TableCell>
+                    <TableCell className="text-muted-foreground h-14 text-sm">
+                      {formatDateOnly(proxy.end_date)}
+                    </TableCell>
+                    <TableCell className="text-muted-foreground h-14 text-sm">
+                      {proxy.reason || "-"}
+                    </TableCell>
+                    <TableCell className="h-14 text-center">
+                      <Badge variant={proxy.is_active === "Y" ? "default" : "secondary"}>
+                        {proxy.is_active === "Y" ? "활성" : "비활성"}
+                      </Badge>
+                    </TableCell>
+                    <TableCell className="h-14 text-center">
+                      <div className="flex items-center justify-center gap-1">
+                        <Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => openEdit(proxy)}>
+                          <Pencil className="h-4 w-4" />
+                        </Button>
+                        <Button variant="ghost" size="icon" className="h-8 w-8 text-destructive hover:text-destructive" onClick={() => confirmDelete(proxy.id)}>
+                          <Trash2 className="h-4 w-4" />
+                        </Button>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+          {/* 모바일 카드 */}
+          <div className="grid gap-4 sm:grid-cols-2 lg:hidden">
+            {proxies.map((proxy) => (
+              <div key={proxy.id} className="rounded-lg border bg-card p-4 shadow-sm">
+                <div className="mb-3 flex items-start justify-between">
+                  <div>
+                    <h3 className="text-base font-semibold">
+                      {proxy.original_user_name || proxy.original_user_id}
+                    </h3>
+                    <p className="text-muted-foreground mt-0.5 text-sm">
+                      대결: {proxy.proxy_user_name || proxy.proxy_user_id}
+                    </p>
+                  </div>
+                  <Badge variant={proxy.is_active === "Y" ? "default" : "secondary"}>
+                    {proxy.is_active === "Y" ? "활성" : "비활성"}
+                  </Badge>
+                </div>
+                <div className="space-y-2 border-t pt-3">
+                  <div className="flex justify-between text-sm">
+                    <span className="text-muted-foreground">시작일</span>
+                    <span>{formatDateOnly(proxy.start_date)}</span>
+                  </div>
+                  <div className="flex justify-between text-sm">
+                    <span className="text-muted-foreground">종료일</span>
+                    <span>{formatDateOnly(proxy.end_date)}</span>
+                  </div>
+                  {proxy.reason && (
+                    <div className="flex justify-between text-sm">
+                      <span className="text-muted-foreground">사유</span>
+                      <span className="text-right">{proxy.reason}</span>
+                    </div>
+                  )}
+                </div>
+                <div className="mt-3 flex gap-2 border-t pt-3">
+                  <Button variant="outline" size="sm" className="h-9 flex-1 gap-1 text-sm" onClick={() => openEdit(proxy)}>
+                    <Pencil className="h-4 w-4" />
+                    수정
+                  </Button>
+                  <Button variant="outline" size="sm" className="h-9 flex-1 gap-1 text-sm text-destructive hover:text-destructive" onClick={() => confirmDelete(proxy.id)}>
+                    <Trash2 className="h-4 w-4" />
+                    삭제
+                  </Button>
+                </div>
+              </div>
+            ))}
+          </div>
+        </>
+      )}
+
+      {/* 등록/수정 모달 */}
+      <Dialog open={modalOpen} onOpenChange={(open) => { if (!open) { resetForm(); } setModalOpen(open); }}>
+        <DialogContent className="max-w-[95vw] sm:max-w-[500px]">
+          <DialogHeader>
+            <DialogTitle className="text-base sm:text-lg">
+              {editingProxy ? "대결 설정 수정" : "대결 설정 등록"}
+            </DialogTitle>
+            <DialogDescription className="text-xs sm:text-sm">
+              결재자 부재 시 대신 결재할 대결자를 설정합니다.
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-3 sm:space-y-4">
+            {/* 원래 결재자 */}
+            <div>
+              <Label htmlFor="originalUser" className="text-xs sm:text-sm">
+                원래 결재자 <span className="text-destructive">*</span>
+              </Label>
+              {editingProxy ? (
+                <Input
+                  value={formOriginalUserLabel}
+                  disabled
+                  className="mt-1 h-8 text-xs sm:h-10 sm:text-sm"
+                />
+              ) : (
+                <div className="relative mt-1">
+                  <div className="relative">
+                    <Search className="text-muted-foreground absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2" />
+                    <Input
+                      id="originalUser"
+                      value={formOriginalUserId ? formOriginalUserLabel : origSearchQuery}
+                      onChange={(e) => {
+                        if (formOriginalUserId) {
+                          setFormOriginalUserId("");
+                          setFormOriginalUserLabel("");
+                        }
+                        setOrigSearchQuery(e.target.value);
+                        setOrigSearchOpen(true);
+                      }}
+                      onFocus={() => { if (origSearchQuery.trim()) setOrigSearchOpen(true); }}
+                      placeholder="이름 또는 ID로 검색"
+                      className="h-8 pl-10 text-xs sm:h-10 sm:text-sm"
+                    />
+                  </div>
+                  {origSearchOpen && (origSearchResults.length > 0 || origSearching) && (
+                    <div className="bg-popover text-popover-foreground absolute top-full left-0 z-50 mt-1 w-full rounded-md border shadow-lg">
+                      {origSearching ? (
+                        <div className="flex items-center justify-center p-3">
+                          <Loader2 className="h-4 w-4 animate-spin" />
+                        </div>
+                      ) : (
+                        <div className="max-h-48 overflow-y-auto">
+                          {origSearchResults.map((user) => (
+                            <div
+                              key={user.userId}
+                              className="hover:bg-accent hover:text-accent-foreground flex cursor-pointer items-center gap-2 px-3 py-2 text-sm"
+                              onClick={() => selectOrigUser(user)}
+                            >
+                              <span className="font-medium">{user.userName}</span>
+                              <span className="text-muted-foreground text-xs">
+                                {user.userId}
+                                {user.deptName ? ` / ${user.deptName}` : ""}
+                                {user.positionName ? ` / ${user.positionName}` : ""}
+                              </span>
+                            </div>
+                          ))}
+                        </div>
+                      )}
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
+
+            {/* 대결자 */}
+            <div>
+              <Label htmlFor="proxyUser" className="text-xs sm:text-sm">
+                대결자 <span className="text-destructive">*</span>
+              </Label>
+              <div className="relative mt-1">
+                <div className="relative">
+                  <Search className="text-muted-foreground absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2" />
+                  <Input
+                    id="proxyUser"
+                    value={formProxyUserId ? formProxyUserLabel : proxySearchQuery}
+                    onChange={(e) => {
+                      if (formProxyUserId) {
+                        setFormProxyUserId("");
+                        setFormProxyUserLabel("");
+                      }
+                      setProxySearchQuery(e.target.value);
+                      setProxySearchOpen(true);
+                    }}
+                    onFocus={() => { if (proxySearchQuery.trim()) setProxySearchOpen(true); }}
+                    placeholder="이름 또는 ID로 검색"
+                    className="h-8 pl-10 text-xs sm:h-10 sm:text-sm"
+                  />
+                </div>
+                {proxySearchOpen && (proxySearchResults.length > 0 || proxySearching) && (
+                  <div className="bg-popover text-popover-foreground absolute top-full left-0 z-50 mt-1 w-full rounded-md border shadow-lg">
+                    {proxySearching ? (
+                      <div className="flex items-center justify-center p-3">
+                        <Loader2 className="h-4 w-4 animate-spin" />
+                      </div>
+                    ) : (
+                      <div className="max-h-48 overflow-y-auto">
+                        {proxySearchResults.map((user) => (
+                          <div
+                            key={user.userId}
+                            className="hover:bg-accent hover:text-accent-foreground flex cursor-pointer items-center gap-2 px-3 py-2 text-sm"
+                            onClick={() => selectProxyUser(user)}
+                          >
+                            <span className="font-medium">{user.userName}</span>
+                            <span className="text-muted-foreground text-xs">
+                              {user.userId}
+                              {user.deptName ? ` / ${user.deptName}` : ""}
+                              {user.positionName ? ` / ${user.positionName}` : ""}
+                            </span>
+                          </div>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                )}
+              </div>
+            </div>
+
+            {/* 시작일 / 종료일 */}
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <Label htmlFor="startDate" className="text-xs sm:text-sm">
+                  시작일 <span className="text-destructive">*</span>
+                </Label>
+                <Input
+                  id="startDate"
+                  type="date"
+                  value={formStartDate}
+                  onChange={(e) => setFormStartDate(e.target.value)}
+                  className="mt-1 h-8 text-xs sm:h-10 sm:text-sm"
+                />
+              </div>
+              <div>
+                <Label htmlFor="endDate" className="text-xs sm:text-sm">
+                  종료일 <span className="text-destructive">*</span>
+                </Label>
+                <Input
+                  id="endDate"
+                  type="date"
+                  value={formEndDate}
+                  onChange={(e) => setFormEndDate(e.target.value)}
+                  className="mt-1 h-8 text-xs sm:h-10 sm:text-sm"
+                />
+              </div>
+            </div>
+
+            {/* 사유 */}
+            <div>
+              <Label htmlFor="reason" className="text-xs sm:text-sm">사유</Label>
+              <Textarea
+                id="reason"
+                value={formReason}
+                onChange={(e) => setFormReason(e.target.value)}
+                placeholder="대결 사유를 입력하세요 (선택사항)"
+                className="mt-1 min-h-[60px] text-xs sm:text-sm"
+              />
+            </div>
+
+            {/* 활성 여부 (수정 시에만 표시) */}
+            {editingProxy && (
+              <div className="flex items-center justify-between">
+                <Label htmlFor="isActive" className="text-xs sm:text-sm">활성 여부</Label>
+                <Switch
+                  id="isActive"
+                  checked={formIsActive}
+                  onCheckedChange={setFormIsActive}
+                  aria-label="활성 여부 토글"
+                />
+              </div>
+            )}
+          </div>
+
+          <DialogFooter className="gap-2 sm:gap-0">
+            <Button
+              variant="outline"
+              onClick={() => { resetForm(); setModalOpen(false); }}
+              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+            >
+              취소
+            </Button>
+            <Button
+              onClick={handleSave}
+              disabled={isSaving}
+              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+            >
+              {isSaving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              {editingProxy ? "수정" : "등록"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 삭제 확인 모달 */}
+      <Dialog open={deleteConfirmOpen} onOpenChange={setDeleteConfirmOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-[400px]">
+          <DialogHeader>
+            <DialogTitle className="text-base sm:text-lg">대결 설정 삭제</DialogTitle>
+            <DialogDescription className="text-xs sm:text-sm">
+              정말로 이 대결 설정을 삭제하시겠습니까?
+              <br />삭제 후 복구할 수 없습니다.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter className="gap-2 sm:gap-0">
+            <Button
+              variant="outline"
+              onClick={() => { setDeleteConfirmOpen(false); setDeletingId(null); }}
+              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+            >
+              취소
+            </Button>
+            <Button
+              variant="destructive"
+              onClick={handleDelete}
+              disabled={isDeleting}
+              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+            >
+              {isDeleting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              삭제
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
+
 // ============================================================
 // 메인 페이지
 // ============================================================
@@ -402,6 +1329,10 @@ export default function ApprovalBoxPage() {
               <Send className="h-4 w-4" />
               상신함 (내가 올린)
             </TabsTrigger>
+            <TabsTrigger value="proxy" className="gap-2">
+              <UserCog className="h-4 w-4" />
+              대결 설정
+            </TabsTrigger>
           </TabsList>
 
           <TabsContent value="received">
@@ -410,6 +1341,9 @@ export default function ApprovalBoxPage() {
           <TabsContent value="sent">
             <SentTab />
           </TabsContent>
+          <TabsContent value="proxy">
+            <ProxyTab />
+          </TabsContent>
         </Tabs>
       </div>
 
diff --git a/frontend/app/(main)/admin/approvalTemplate/page.tsx b/frontend/app/(main)/admin/approvalTemplate/page.tsx
new file mode 100644
index 00000000..a69d198e
--- /dev/null
+++ b/frontend/app/(main)/admin/approvalTemplate/page.tsx
@@ -0,0 +1,963 @@
+"use client";
+
+import React, { useState, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { toast } from "sonner";
+import {
+  Plus,
+  Edit,
+  Trash2,
+  Search,
+  Loader2,
+  UserPlus,
+  GripVertical,
+} from "lucide-react";
+import { ScrollToTop } from "@/components/common/ScrollToTop";
+import {
+  type ApprovalDefinition,
+  type ApprovalLineTemplate,
+  type ApprovalLineTemplateStep,
+  getApprovalDefinitions,
+  getApprovalTemplates,
+  getApprovalTemplate,
+  createApprovalTemplate,
+  updateApprovalTemplate,
+  deleteApprovalTemplate,
+} from "@/lib/api/approval";
+import { getUserList } from "@/lib/api/user";
+import { ResponsiveDataView, RDVColumn, RDVCardField } from "@/components/common/ResponsiveDataView";
+
+// ============================================================
+// 타입 정의
+// ============================================================
+
+type StepType = "approval" | "consensus" | "notification";
+
+interface StepApprover {
+  approver_type: "user" | "position" | "dept";
+  approver_user_id?: string;
+  approver_position?: string;
+  approver_dept_code?: string;
+  approver_label?: string;
+}
+
+interface StepFormData {
+  step_order: number;
+  step_type: StepType;
+  approvers: StepApprover[];
+}
+
+interface TemplateFormData {
+  template_name: string;
+  description: string;
+  definition_id: number | null;
+  steps: StepFormData[];
+}
+
+const STEP_TYPE_OPTIONS: { value: StepType; label: string }[] = [
+  { value: "approval", label: "결재" },
+  { value: "consensus", label: "합의" },
+  { value: "notification", label: "통보" },
+];
+
+const STEP_TYPE_BADGE: Record<StepType, { label: string; variant: "default" | "secondary" | "outline" }> = {
+  approval: { label: "결재", variant: "default" },
+  consensus: { label: "합의", variant: "secondary" },
+  notification: { label: "통보", variant: "outline" },
+};
+
+const INITIAL_FORM: TemplateFormData = {
+  template_name: "",
+  description: "",
+  definition_id: null,
+  steps: [
+    {
+      step_order: 1,
+      step_type: "approval",
+      approvers: [{ approver_type: "user", approver_user_id: "", approver_label: "1차 결재자" }],
+    },
+  ],
+};
+
+// ============================================================
+// 사용자 검색 컴포넌트
+// ============================================================
+
+function UserSearchInput({
+  value,
+  label,
+  onSelect,
+  onLabelChange,
+}: {
+  value: string;
+  label: string;
+  onSelect: (userId: string, userName: string) => void;
+  onLabelChange: (label: string) => void;
+}) {
+  const [searchText, setSearchText] = useState("");
+  const [results, setResults] = useState<any[]>([]);
+  const [showResults, setShowResults] = useState(false);
+  const [searching, setSearching] = useState(false);
+  const containerRef = React.useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setShowResults(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  const handleSearch = useCallback(
+    async (text: string) => {
+      setSearchText(text);
+      if (text.length < 1) {
+        setResults([]);
+        setShowResults(false);
+        return;
+      }
+      setSearching(true);
+      try {
+        const res = await getUserList({ search: text, limit: 10 });
+        const users = res?.success !== false ? (res?.data || res || []) : [];
+        setResults(Array.isArray(users) ? users : []);
+        setShowResults(true);
+      } catch {
+        setResults([]);
+      } finally {
+        setSearching(false);
+      }
+    },
+    [],
+  );
+
+  const selectUser = (user: any) => {
+    const userId = user.user_id || user.userId || "";
+    const userName = user.user_name || user.userName || userId;
+    onSelect(userId, userName);
+    setSearchText("");
+    setShowResults(false);
+  };
+
+  return (
+    <div className="space-y-1.5">
+      <div className="grid grid-cols-2 gap-2">
+        <div>
+          <Label className="text-[10px]">결재자 ID</Label>
+          <div ref={containerRef} className="relative">
+            <Input
+              value={value || searchText}
+              onChange={(e) => {
+                if (value) {
+                  onSelect("", "");
+                }
+                handleSearch(e.target.value);
+              }}
+              placeholder="ID 또는 이름 검색"
+              className="h-7 text-xs"
+            />
+            {showResults && results.length > 0 && (
+              <div className="absolute z-50 mt-1 max-h-40 w-full overflow-y-auto rounded-md border bg-popover shadow-md">
+                {results.map((user, i) => (
+                  <button
+                    key={i}
+                    type="button"
+                    className="flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs hover:bg-accent"
+                    onClick={() => selectUser(user)}
+                  >
+                    <span className="font-medium">{user.user_name || user.userName}</span>
+                    <span className="text-muted-foreground">({user.user_id || user.userId})</span>
+                  </button>
+                ))}
+              </div>
+            )}
+            {showResults && results.length === 0 && !searching && searchText.length > 0 && (
+              <div className="absolute z-50 mt-1 w-full rounded-md border bg-popover p-2 text-center text-xs text-muted-foreground shadow-md">
+                검색 결과 없음
+              </div>
+            )}
+          </div>
+        </div>
+        <div>
+          <Label className="text-[10px]">표시 라벨</Label>
+          <Input
+            value={label}
+            onChange={(e) => onLabelChange(e.target.value)}
+            placeholder="예: 팀장"
+            className="h-7 text-xs"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ============================================================
+// 단계 편집 행 컴포넌트
+// ============================================================
+
+function StepEditor({
+  step,
+  stepIndex,
+  onUpdate,
+  onRemove,
+}: {
+  step: StepFormData;
+  stepIndex: number;
+  onUpdate: (stepIndex: number, updated: StepFormData) => void;
+  onRemove: (stepIndex: number) => void;
+}) {
+  const updateStepType = (newType: StepType) => {
+    const updated = { ...step, step_type: newType };
+    if (newType === "notification" && updated.approvers.length > 1) {
+      updated.approvers = [updated.approvers[0]];
+    }
+    onUpdate(stepIndex, updated);
+  };
+
+  const addApprover = () => {
+    onUpdate(stepIndex, {
+      ...step,
+      approvers: [
+        ...step.approvers,
+        { approver_type: "user", approver_user_id: "", approver_label: "" },
+      ],
+    });
+  };
+
+  const removeApprover = (approverIdx: number) => {
+    if (step.approvers.length <= 1) return;
+    onUpdate(stepIndex, {
+      ...step,
+      approvers: step.approvers.filter((_, i) => i !== approverIdx),
+    });
+  };
+
+  const updateApprover = (approverIdx: number, field: string, value: string) => {
+    onUpdate(stepIndex, {
+      ...step,
+      approvers: step.approvers.map((a, i) =>
+        i === approverIdx ? { ...a, [field]: value } : a,
+      ),
+    });
+  };
+
+  const handleUserSelect = (approverIdx: number, userId: string, userName: string) => {
+    onUpdate(stepIndex, {
+      ...step,
+      approvers: step.approvers.map((a, i) =>
+        i === approverIdx
+          ? { ...a, approver_user_id: userId, approver_label: a.approver_label || userName }
+          : a,
+      ),
+    });
+  };
+
+  const badgeInfo = STEP_TYPE_BADGE[step.step_type];
+
+  return (
+    <div className="rounded-md border bg-muted/30 p-3 space-y-2">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <GripVertical className="h-4 w-4 text-muted-foreground" />
+          <span className="text-xs font-semibold">{step.step_order}단계</span>
+          <Badge variant={badgeInfo.variant} className="text-[10px]">
+            {badgeInfo.label}
+          </Badge>
+        </div>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-6 w-6 text-destructive"
+          onClick={() => onRemove(stepIndex)}
+        >
+          <Trash2 className="h-3 w-3" />
+        </Button>
+      </div>
+
+      <div>
+        <Label className="text-[10px]">결재 유형</Label>
+        <Select value={step.step_type} onValueChange={(v) => updateStepType(v as StepType)}>
+          <SelectTrigger className="h-7 text-xs">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {STEP_TYPE_OPTIONS.map((opt) => (
+              <SelectItem key={opt.value} value={opt.value} className="text-xs">
+                {opt.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      {step.step_type === "notification" && (
+        <p className="text-[10px] text-muted-foreground italic">
+          (자동 처리됩니다 - 통보 대상자에게 알림만 발송)
+        </p>
+      )}
+
+      <div className="space-y-2">
+        {step.approvers.map((approver, aIdx) => (
+          <div key={aIdx} className="rounded border bg-background p-2 space-y-1.5">
+            <div className="flex items-center justify-between">
+              <span className="text-[10px] font-medium text-muted-foreground">
+                {step.step_type === "consensus"
+                  ? `합의자 ${aIdx + 1}`
+                  : step.step_type === "notification"
+                    ? "통보 대상"
+                    : "결재자"}
+              </span>
+              {step.approvers.length > 1 && (
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-5 w-5 text-destructive"
+                  onClick={() => removeApprover(aIdx)}
+                >
+                  <Trash2 className="h-3 w-3" />
+                </Button>
+              )}
+            </div>
+            <div>
+              <Label className="text-[10px]">결재자 유형</Label>
+              <Select
+                value={approver.approver_type}
+                onValueChange={(v) => updateApprover(aIdx, "approver_type", v)}
+              >
+                <SelectTrigger className="h-7 text-xs">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="user" className="text-xs">사용자 지정</SelectItem>
+                  <SelectItem value="position" className="text-xs">직급 지정</SelectItem>
+                  <SelectItem value="dept" className="text-xs">부서 지정</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            {approver.approver_type === "user" && (
+              <UserSearchInput
+                value={approver.approver_user_id || ""}
+                label={approver.approver_label || ""}
+                onSelect={(userId, userName) => handleUserSelect(aIdx, userId, userName)}
+                onLabelChange={(label) => updateApprover(aIdx, "approver_label", label)}
+              />
+            )}
+            {approver.approver_type === "position" && (
+              <div className="grid grid-cols-2 gap-2">
+                <div>
+                  <Label className="text-[10px]">직급</Label>
+                  <Input
+                    value={approver.approver_position || ""}
+                    onChange={(e) => updateApprover(aIdx, "approver_position", e.target.value)}
+                    placeholder="예: 부장, 이사"
+                    className="h-7 text-xs"
+                  />
+                </div>
+                <div>
+                  <Label className="text-[10px]">표시 라벨</Label>
+                  <Input
+                    value={approver.approver_label || ""}
+                    onChange={(e) => updateApprover(aIdx, "approver_label", e.target.value)}
+                    placeholder="예: 팀장"
+                    className="h-7 text-xs"
+                  />
+                </div>
+              </div>
+            )}
+            {approver.approver_type === "dept" && (
+              <div className="grid grid-cols-2 gap-2">
+                <div>
+                  <Label className="text-[10px]">부서 코드</Label>
+                  <Input
+                    value={approver.approver_dept_code || ""}
+                    onChange={(e) => updateApprover(aIdx, "approver_dept_code", e.target.value)}
+                    placeholder="예: DEPT001"
+                    className="h-7 text-xs"
+                  />
+                </div>
+                <div>
+                  <Label className="text-[10px]">표시 라벨</Label>
+                  <Input
+                    value={approver.approver_label || ""}
+                    onChange={(e) => updateApprover(aIdx, "approver_label", e.target.value)}
+                    placeholder="예: 경영지원팀"
+                    className="h-7 text-xs"
+                  />
+                </div>
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+
+      {step.step_type === "consensus" && (
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={addApprover}
+          className="h-6 w-full gap-1 text-[10px]"
+        >
+          <UserPlus className="h-3 w-3" />
+          합의자 추가
+        </Button>
+      )}
+    </div>
+  );
+}
+
+// ============================================================
+// 메인 페이지
+// ============================================================
+
+export default function ApprovalTemplatePage() {
+  const [templates, setTemplates] = useState<ApprovalLineTemplate[]>([]);
+  const [definitions, setDefinitions] = useState<ApprovalDefinition[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [searchTerm, setSearchTerm] = useState("");
+
+  const [editOpen, setEditOpen] = useState(false);
+  const [editingTpl, setEditingTpl] = useState<ApprovalLineTemplate | null>(null);
+  const [saving, setSaving] = useState(false);
+  const [formData, setFormData] = useState<TemplateFormData>({ ...INITIAL_FORM });
+
+  const [deleteTarget, setDeleteTarget] = useState<ApprovalLineTemplate | null>(null);
+
+  const fetchData = useCallback(async () => {
+    setLoading(true);
+    const [tplRes, defRes] = await Promise.all([
+      getApprovalTemplates(),
+      getApprovalDefinitions({ is_active: "Y" }),
+    ]);
+    if (tplRes.success && tplRes.data) setTemplates(tplRes.data);
+    if (defRes.success && defRes.data) setDefinitions(defRes.data);
+    setLoading(false);
+  }, []);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  const stepsToFormData = (steps: ApprovalLineTemplateStep[]): StepFormData[] => {
+    const stepMap = new Map<number, StepFormData>();
+
+    const sorted = [...steps].sort((a, b) => a.step_order - b.step_order);
+    for (const s of sorted) {
+      const existing = stepMap.get(s.step_order);
+      const approver: StepApprover = {
+        approver_type: s.approver_type,
+        approver_user_id: s.approver_user_id,
+        approver_position: s.approver_position,
+        approver_dept_code: s.approver_dept_code,
+        approver_label: s.approver_label,
+      };
+
+      if (existing) {
+        existing.approvers.push(approver);
+        if (s.step_type) existing.step_type = s.step_type;
+      } else {
+        stepMap.set(s.step_order, {
+          step_order: s.step_order,
+          step_type: s.step_type || "approval",
+          approvers: [approver],
+        });
+      }
+    }
+
+    return Array.from(stepMap.values()).sort((a, b) => a.step_order - b.step_order);
+  };
+
+  const formDataToSteps = (
+    steps: StepFormData[],
+  ): Omit<ApprovalLineTemplateStep, "step_id" | "template_id" | "company_code">[] => {
+    const result: Omit<ApprovalLineTemplateStep, "step_id" | "template_id" | "company_code">[] = [];
+    for (const step of steps) {
+      for (const approver of step.approvers) {
+        result.push({
+          step_order: step.step_order,
+          step_type: step.step_type,
+          approver_type: approver.approver_type,
+          approver_user_id: approver.approver_user_id || undefined,
+          approver_position: approver.approver_position || undefined,
+          approver_dept_code: approver.approver_dept_code || undefined,
+          approver_label: approver.approver_label || undefined,
+        });
+      }
+    }
+    return result;
+  };
+
+  const openCreate = () => {
+    setEditingTpl(null);
+    setFormData({
+      template_name: "",
+      description: "",
+      definition_id: null,
+      steps: [
+        {
+          step_order: 1,
+          step_type: "approval",
+          approvers: [{ approver_type: "user", approver_user_id: "", approver_label: "1차 결재자" }],
+        },
+      ],
+    });
+    setEditOpen(true);
+  };
+
+  const openEdit = async (tpl: ApprovalLineTemplate) => {
+    const res = await getApprovalTemplate(tpl.template_id);
+    if (!res.success || !res.data) {
+      toast.error("템플릿 정보를 불러올 수 없습니다.");
+      return;
+    }
+    const detail = res.data;
+    setEditingTpl(detail);
+    setFormData({
+      template_name: detail.template_name,
+      description: detail.description || "",
+      definition_id: detail.definition_id || null,
+      steps:
+        detail.steps && detail.steps.length > 0
+          ? stepsToFormData(detail.steps)
+          : [
+              {
+                step_order: 1,
+                step_type: "approval",
+                approvers: [{ approver_type: "user", approver_user_id: "", approver_label: "1차 결재자" }],
+              },
+            ],
+    });
+    setEditOpen(true);
+  };
+
+  const addStep = () => {
+    setFormData((p) => ({
+      ...p,
+      steps: [
+        ...p.steps,
+        {
+          step_order: p.steps.length + 1,
+          step_type: "approval",
+          approvers: [
+            {
+              approver_type: "user",
+              approver_user_id: "",
+              approver_label: `${p.steps.length + 1}차 결재자`,
+            },
+          ],
+        },
+      ],
+    }));
+  };
+
+  const removeStep = (idx: number) => {
+    setFormData((p) => ({
+      ...p,
+      steps: p.steps
+        .filter((_, i) => i !== idx)
+        .map((s, i) => ({ ...s, step_order: i + 1 })),
+    }));
+  };
+
+  const updateStep = (idx: number, updated: StepFormData) => {
+    setFormData((p) => ({
+      ...p,
+      steps: p.steps.map((s, i) => (i === idx ? updated : s)),
+    }));
+  };
+
+  const handleSave = async () => {
+    if (!formData.template_name.trim()) {
+      toast.warning("템플릿명을 입력해주세요.");
+      return;
+    }
+    if (formData.steps.length === 0) {
+      toast.warning("결재 단계를 최소 1개 추가해주세요.");
+      return;
+    }
+
+    const hasEmptyApprover = formData.steps.some((step) =>
+      step.approvers.some((a) => {
+        if (a.approver_type === "user" && !a.approver_user_id) return true;
+        if (a.approver_type === "position" && !a.approver_position) return true;
+        if (a.approver_type === "dept" && !a.approver_dept_code) return true;
+        return false;
+      }),
+    );
+
+    if (hasEmptyApprover) {
+      toast.warning("모든 결재자 정보를 입력해주세요.");
+      return;
+    }
+
+    setSaving(true);
+    const payload = {
+      template_name: formData.template_name,
+      description: formData.description || undefined,
+      definition_id: formData.definition_id || undefined,
+      steps: formDataToSteps(formData.steps),
+    };
+
+    let res;
+    if (editingTpl) {
+      res = await updateApprovalTemplate(editingTpl.template_id, payload);
+    } else {
+      res = await createApprovalTemplate(payload);
+    }
+
+    setSaving(false);
+    if (res.success) {
+      toast.success(editingTpl ? "수정되었습니다." : "등록되었습니다.");
+      setEditOpen(false);
+      fetchData();
+    } else {
+      toast.error(res.error || "저장 실패");
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!deleteTarget) return;
+    const res = await deleteApprovalTemplate(deleteTarget.template_id);
+    if (res.success) {
+      toast.success("삭제되었습니다.");
+      setDeleteTarget(null);
+      fetchData();
+    } else {
+      toast.error(res.error || "삭제 실패");
+    }
+  };
+
+  const filtered = templates.filter(
+    (t) =>
+      t.template_name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      (t.description || "").toLowerCase().includes(searchTerm.toLowerCase()),
+  );
+
+  const renderStepSummary = (tpl: ApprovalLineTemplate) => {
+    if (!tpl.steps || tpl.steps.length === 0) return <span className="text-muted-foreground">-</span>;
+
+    const stepMap = new Map<number, { type: StepType; count: number }>();
+    for (const s of tpl.steps) {
+      const existing = stepMap.get(s.step_order);
+      if (existing) {
+        existing.count++;
+      } else {
+        stepMap.set(s.step_order, { type: s.step_type || "approval", count: 1 });
+      }
+    }
+
+    return (
+      <div className="flex flex-wrap gap-1">
+        {Array.from(stepMap.entries())
+          .sort(([a], [b]) => a - b)
+          .map(([order, info]) => {
+            const badge = STEP_TYPE_BADGE[info.type];
+            return (
+              <Badge key={order} variant={badge.variant} className="text-[10px]">
+                {order}단계 {badge.label}
+                {info.count > 1 && ` (${info.count}명)`}
+              </Badge>
+            );
+          })}
+      </div>
+    );
+  };
+
+  const formatDate = (dateStr: string) => {
+    if (!dateStr) return "-";
+    const d = new Date(dateStr);
+    return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+  };
+
+  const columns: RDVColumn<ApprovalLineTemplate>[] = [
+    {
+      key: "template_name",
+      label: "템플릿명",
+      render: (_val, tpl) => (
+        <span className="font-medium">{tpl.template_name}</span>
+      ),
+    },
+    {
+      key: "description",
+      label: "설명",
+      hideOnMobile: true,
+      render: (_val, tpl) => (
+        <span className="text-muted-foreground">{tpl.description || "-"}</span>
+      ),
+    },
+    {
+      key: "steps",
+      label: "단계 구성",
+      render: (_val, tpl) => renderStepSummary(tpl),
+    },
+    {
+      key: "definition_name",
+      label: "연결된 유형",
+      width: "120px",
+      hideOnMobile: true,
+      render: (_val, tpl) => (
+        <span>{tpl.definition_name || "-"}</span>
+      ),
+    },
+    {
+      key: "created_at",
+      label: "생성일",
+      width: "100px",
+      hideOnMobile: true,
+      className: "text-center",
+      render: (_val, tpl) => (
+        <span className="text-center">{formatDate(tpl.created_at)}</span>
+      ),
+    },
+  ];
+
+  const cardFields: RDVCardField<ApprovalLineTemplate>[] = [
+    {
+      label: "단계 구성",
+      render: (tpl) => renderStepSummary(tpl),
+    },
+    {
+      label: "생성일",
+      render: (tpl) => formatDate(tpl.created_at),
+    },
+  ];
+
+  return (
+    <div className="bg-background flex min-h-screen flex-col">
+      <div className="space-y-6 p-6">
+        {/* 페이지 헤더 */}
+        <div className="space-y-2 border-b pb-4">
+          <h1 className="text-3xl font-bold tracking-tight">결재 템플릿 관리</h1>
+          <p className="text-muted-foreground text-sm">
+            결재선 템플릿의 단계 구성 및 결재자를 관리합니다.
+          </p>
+        </div>
+
+        {/* 검색 + 신규 등록 버튼 */}
+        <div className="relative flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+          <div className="flex items-center gap-3">
+            <div className="relative w-full sm:w-[300px]">
+              <Search className="text-muted-foreground absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2" />
+              <Input
+                placeholder="템플릿명 또는 설명 검색..."
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                className="h-10 pl-10 text-sm"
+              />
+            </div>
+            <span className="text-muted-foreground text-sm">
+              총 <span className="text-foreground font-semibold">{filtered.length}</span> 건
+            </span>
+          </div>
+          <Button onClick={openCreate} className="h-10 gap-2 text-sm font-medium">
+            <Plus className="h-4 w-4" />
+            신규 등록
+          </Button>
+        </div>
+
+        <ResponsiveDataView<ApprovalLineTemplate>
+          data={filtered}
+          columns={columns}
+          keyExtractor={(tpl) => String(tpl.template_id)}
+          isLoading={loading}
+          emptyMessage="등록된 결재 템플릿이 없습니다."
+          skeletonCount={5}
+          cardTitle={(tpl) => tpl.template_name}
+          cardSubtitle={(tpl) => tpl.description ? (
+            <span className="text-muted-foreground text-sm">{tpl.description}</span>
+          ) : undefined}
+          cardHeaderRight={(tpl) => tpl.definition_name ? (
+            <Badge variant="outline" className="text-xs">{tpl.definition_name}</Badge>
+          ) : undefined}
+          cardFields={cardFields}
+          actionsLabel="관리"
+          actionsWidth="100px"
+          renderActions={(tpl) => (
+            <>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-8 w-8"
+                onClick={() => openEdit(tpl)}
+              >
+                <Edit className="h-4 w-4" />
+              </Button>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-8 w-8 text-destructive"
+                onClick={() => setDeleteTarget(tpl)}
+              >
+                <Trash2 className="h-4 w-4" />
+              </Button>
+            </>
+          )}
+        />
+      </div>
+
+      {/* 등록/수정 Dialog */}
+      <Dialog open={editOpen} onOpenChange={setEditOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-[600px]">
+          <DialogHeader>
+            <DialogTitle className="text-base sm:text-lg">
+              {editingTpl ? "결재 템플릿 수정" : "결재 템플릿 등록"}
+            </DialogTitle>
+            <DialogDescription className="text-xs sm:text-sm">
+              결재선의 기본 정보와 단계별 결재자를 설정합니다.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="max-h-[60vh] space-y-3 overflow-y-auto sm:space-y-4">
+            <div>
+              <Label htmlFor="template_name" className="text-xs sm:text-sm">
+                템플릿 이름 *
+              </Label>
+              <Input
+                id="template_name"
+                value={formData.template_name}
+                onChange={(e) => setFormData((p) => ({ ...p, template_name: e.target.value }))}
+                placeholder="예: 일반 3단계 결재선"
+                className="h-8 text-xs sm:h-10 sm:text-sm"
+              />
+            </div>
+            <div>
+              <Label htmlFor="description" className="text-xs sm:text-sm">
+                설명
+              </Label>
+              <Textarea
+                id="description"
+                value={formData.description}
+                onChange={(e) => setFormData((p) => ({ ...p, description: e.target.value }))}
+                placeholder="템플릿에 대한 설명을 입력하세요"
+                rows={2}
+                className="text-xs sm:text-sm"
+              />
+            </div>
+            <div>
+              <Label className="text-xs sm:text-sm">결재 유형 연결</Label>
+              <Select
+                value={formData.definition_id ? String(formData.definition_id) : "none"}
+                onValueChange={(v) =>
+                  setFormData((p) => ({ ...p, definition_id: v === "none" ? null : Number(v) }))
+                }
+              >
+                <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
+                  <SelectValue placeholder="결재 유형 선택 (선택사항)" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="none">연결 없음</SelectItem>
+                  {definitions.map((d) => (
+                    <SelectItem key={d.definition_id} value={String(d.definition_id)}>
+                      {d.definition_name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <p className="text-muted-foreground mt-1 text-[10px] sm:text-xs">
+                특정 결재 유형에 이 템플릿을 연결할 수 있습니다.
+              </p>
+            </div>
+
+            <div className="space-y-3">
+              <div className="flex items-center justify-between">
+                <Label className="text-xs font-semibold sm:text-sm">결재 단계</Label>
+                <Button variant="outline" size="sm" onClick={addStep} className="h-7 gap-1 text-xs">
+                  <Plus className="h-3 w-3" />
+                  단계 추가
+                </Button>
+              </div>
+
+              {formData.steps.length === 0 && (
+                <p className="text-muted-foreground py-4 text-center text-xs">
+                  결재 단계를 추가해주세요.
+                </p>
+              )}
+
+              {formData.steps.map((step, idx) => (
+                <StepEditor
+                  key={`step-${idx}-${step.step_order}`}
+                  step={step}
+                  stepIndex={idx}
+                  onUpdate={updateStep}
+                  onRemove={removeStep}
+                />
+              ))}
+            </div>
+          </div>
+          <DialogFooter className="gap-2 sm:gap-0">
+            <Button
+              variant="outline"
+              onClick={() => setEditOpen(false)}
+              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+            >
+              취소
+            </Button>
+            <Button
+              onClick={handleSave}
+              disabled={saving}
+              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+            >
+              {saving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              {editingTpl ? "수정" : "등록"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 삭제 확인 Dialog */}
+      <AlertDialog open={!!deleteTarget} onOpenChange={() => setDeleteTarget(null)}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>결재 템플릿 삭제</AlertDialogTitle>
+            <AlertDialogDescription>
+              &quot;{deleteTarget?.template_name}&quot;을(를) 삭제하시겠습니까?
+              <br />
+              이 작업은 되돌릴 수 없습니다.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>취소</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleDelete}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            >
+              삭제
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      <ScrollToTop />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/admin/audit-log/page.tsx b/frontend/app/(main)/admin/audit-log/page.tsx
index a6f4493d..74cb550b 100644
--- a/frontend/app/(main)/admin/audit-log/page.tsx
+++ b/frontend/app/(main)/admin/audit-log/page.tsx
@@ -69,33 +69,33 @@ const RESOURCE_TYPE_CONFIG: Record<
   string,
   { label: string; icon: React.ElementType; color: string }
 > = {
-  MENU: { label: "메뉴", icon: Layout, color: "bg-blue-100 text-blue-700" },
+  MENU: { label: "메뉴", icon: Layout, color: "bg-primary/10 text-primary" },
   SCREEN: { label: "화면", icon: Monitor, color: "bg-purple-100 text-purple-700" },
   SCREEN_LAYOUT: { label: "레이아웃", icon: Monitor, color: "bg-purple-100 text-purple-700" },
-  FLOW: { label: "플로우", icon: GitBranch, color: "bg-green-100 text-green-700" },
-  FLOW_STEP: { label: "플로우 스텝", icon: GitBranch, color: "bg-green-100 text-green-700" },
-  USER: { label: "사용자", icon: User, color: "bg-orange-100 text-orange-700" },
-  ROLE: { label: "권한", icon: Shield, color: "bg-red-100 text-red-700" },
-  PERMISSION: { label: "권한", icon: Shield, color: "bg-red-100 text-red-700" },
+  FLOW: { label: "플로우", icon: GitBranch, color: "bg-emerald-100 text-emerald-700" },
+  FLOW_STEP: { label: "플로우 스텝", icon: GitBranch, color: "bg-emerald-100 text-emerald-700" },
+  USER: { label: "사용자", icon: User, color: "bg-amber-100 text-orange-700" },
+  ROLE: { label: "권한", icon: Shield, color: "bg-destructive/10 text-destructive" },
+  PERMISSION: { label: "권한", icon: Shield, color: "bg-destructive/10 text-destructive" },
   COMPANY: { label: "회사", icon: Building2, color: "bg-indigo-100 text-indigo-700" },
   CODE_CATEGORY: { label: "코드 카테고리", icon: Hash, color: "bg-cyan-100 text-cyan-700" },
   CODE: { label: "코드", icon: Hash, color: "bg-cyan-100 text-cyan-700" },
-  DATA: { label: "데이터", icon: Database, color: "bg-gray-100 text-gray-700" },
-  TABLE: { label: "테이블", icon: Database, color: "bg-gray-100 text-gray-700" },
+  DATA: { label: "데이터", icon: Database, color: "bg-muted text-foreground" },
+  TABLE: { label: "테이블", icon: Database, color: "bg-muted text-foreground" },
   NUMBERING_RULE: { label: "채번 규칙", icon: FileText, color: "bg-amber-100 text-amber-700" },
   BATCH: { label: "배치", icon: RefreshCw, color: "bg-teal-100 text-teal-700" },
 };
 
 const ACTION_CONFIG: Record<string, { label: string; color: string }> = {
   CREATE: { label: "생성", color: "bg-emerald-100 text-emerald-700" },
-  UPDATE: { label: "수정", color: "bg-blue-100 text-blue-700" },
-  DELETE: { label: "삭제", color: "bg-red-100 text-red-700" },
+  UPDATE: { label: "수정", color: "bg-primary/10 text-primary" },
+  DELETE: { label: "삭제", color: "bg-destructive/10 text-destructive" },
   COPY: { label: "복사", color: "bg-violet-100 text-violet-700" },
-  LOGIN: { label: "로그인", color: "bg-gray-100 text-gray-700" },
+  LOGIN: { label: "로그인", color: "bg-muted text-foreground" },
   STATUS_CHANGE: { label: "상태변경", color: "bg-amber-100 text-amber-700" },
   BATCH_CREATE: { label: "배치생성", color: "bg-emerald-100 text-emerald-700" },
-  BATCH_UPDATE: { label: "배치수정", color: "bg-blue-100 text-blue-700" },
-  BATCH_DELETE: { label: "배치삭제", color: "bg-red-100 text-red-700" },
+  BATCH_UPDATE: { label: "배치수정", color: "bg-primary/10 text-primary" },
+  BATCH_DELETE: { label: "배치삭제", color: "bg-destructive/10 text-destructive" },
 };
 
 function formatDateTime(dateStr: string): string {
@@ -203,12 +203,12 @@ function renderChanges(changes: Record<string, unknown>) {
           <tr className="bg-muted/50">
             <th className="px-3 py-1.5 text-left font-medium">항목</th>
             {hasBefore && (
-              <th className="px-3 py-1.5 text-left font-medium text-red-600">
+              <th className="px-3 py-1.5 text-left font-medium text-destructive">
                 변경 전
               </th>
             )}
             {hasAfter && (
-              <th className="px-3 py-1.5 text-left font-medium text-blue-600">
+              <th className="px-3 py-1.5 text-left font-medium text-primary">
                 변경 후
               </th>
             )}
@@ -234,7 +234,7 @@ function renderChanges(changes: Record<string, unknown>) {
                   {hasBefore && (
                     <td className="px-3 py-1.5">
                       {row.beforeVal !== null ? (
-                        <span className="rounded bg-red-50 px-1.5 py-0.5 text-red-700">
+                        <span className="rounded bg-destructive/10 px-1.5 py-0.5 text-destructive">
                           {row.beforeVal}
                         </span>
                       ) : (
@@ -245,7 +245,7 @@ function renderChanges(changes: Record<string, unknown>) {
                   {hasAfter && (
                     <td className="px-3 py-1.5">
                       {row.afterVal !== null ? (
-                        <span className="rounded bg-blue-50 px-1.5 py-0.5 text-blue-700">
+                        <span className="rounded bg-primary/10 px-1.5 py-0.5 text-primary">
                           {row.afterVal}
                         </span>
                       ) : (
@@ -460,9 +460,9 @@ export default function AuditLogPage() {
         <CardContent className="p-4">
           <form
             onSubmit={handleSearch}
-            className="flex flex-wrap items-end gap-3"
+            className="flex flex-col gap-3 sm:flex-wrap sm:flex-row sm:items-end"
           >
-            <div className="min-w-[120px] flex-1">
+            <div className="w-full sm:min-w-[120px] sm:flex-1">
               <label className="text-xs font-medium">검색어</label>
               <div className="relative">
                 <Search className="text-muted-foreground absolute left-2.5 top-2.5 h-4 w-4" />
@@ -475,7 +475,7 @@ export default function AuditLogPage() {
               </div>
             </div>
 
-            <div className="w-[130px]">
+            <div className="w-full sm:w-[130px]">
               <label className="text-xs font-medium">유형</label>
               <Select
                 value={filters.resourceType || "all"}
@@ -497,7 +497,7 @@ export default function AuditLogPage() {
               </Select>
             </div>
 
-            <div className="w-[120px]">
+            <div className="w-full sm:w-[120px]">
               <label className="text-xs font-medium">동작</label>
               <Select
                 value={filters.action || "all"}
@@ -520,7 +520,7 @@ export default function AuditLogPage() {
             </div>
 
             {isSuperAdmin && (
-              <div className="w-[160px]">
+              <div className="w-full sm:w-[160px]">
                 <label className="text-xs font-medium">회사</label>
                 <Popover open={companyComboOpen} onOpenChange={setCompanyComboOpen}>
                   <PopoverTrigger asChild>
@@ -604,7 +604,7 @@ export default function AuditLogPage() {
               </div>
             )}
 
-            <div className="w-[160px]">
+            <div className="w-full sm:w-[160px]">
               <label className="text-xs font-medium">사용자</label>
               <Popover open={userComboOpen} onOpenChange={setUserComboOpen}>
                 <PopoverTrigger asChild>
@@ -685,7 +685,7 @@ export default function AuditLogPage() {
               </Popover>
             </div>
 
-            <div className="w-[130px]">
+            <div className="w-full sm:w-[130px]">
               <label className="text-xs font-medium">시작일</label>
               <Input
                 type="date"
@@ -695,7 +695,7 @@ export default function AuditLogPage() {
               />
             </div>
 
-            <div className="w-[130px]">
+            <div className="w-full sm:w-[130px]">
               <label className="text-xs font-medium">종료일</label>
               <Input
                 type="date"
@@ -705,7 +705,7 @@ export default function AuditLogPage() {
               />
             </div>
 
-            <Button type="submit" size="sm" className="h-9">
+            <Button type="submit" size="sm" className="h-9 w-full sm:w-auto">
               <Filter className="mr-1 h-4 w-4" />
               필터 적용
             </Button>
diff --git a/frontend/app/(main)/admin/automaticMng/batchmngList/create/page.tsx b/frontend/app/(main)/admin/automaticMng/batchmngList/create/page.tsx
index 1647523e..a4e1095c 100644
--- a/frontend/app/(main)/admin/automaticMng/batchmngList/create/page.tsx
+++ b/frontend/app/(main)/admin/automaticMng/batchmngList/create/page.tsx
@@ -311,10 +311,10 @@ export default function BatchCreatePage() {
       {/* 매핑 설정 */}
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
         {/* FROM 섹션 */}
-        <Card className="border-green-200">
-          <CardHeader className="bg-green-50">
-            <CardTitle className="text-green-700">FROM (원본 데이터베이스)</CardTitle>
-            <p className="text-sm text-green-600">
+        <Card className="border-emerald-200">
+          <CardHeader className="bg-emerald-50">
+            <CardTitle className="text-emerald-700">FROM (원본 데이터베이스)</CardTitle>
+            <p className="text-sm text-emerald-600">
               1단계: 커넥션을 선택하세요 → 2단계: 테이블을 선택하세요 → 3단계: 컬럼을 클릭해서 매핑하세요
             </p>
           </CardHeader>
@@ -365,7 +365,7 @@ export default function BatchCreatePage() {
             {/* FROM 컬럼 목록 */}
             {fromTable && (
               <div className="space-y-2">
-                <Label className="text-blue-600 font-semibold">{fromTable} 테이블</Label>
+                <Label className="text-primary font-semibold">{fromTable} 테이블</Label>
                 <div className="border rounded-lg p-4 max-h-80 overflow-y-auto space-y-2">
                   {fromColumns.map((column) => (
                     <div
@@ -373,16 +373,16 @@ export default function BatchCreatePage() {
                       onClick={() => handleFromColumnClick(column)}
                       className={`p-3 border rounded cursor-pointer transition-colors ${
                         selectedFromColumn?.column_name === column.column_name
-                          ? 'bg-green-100 border-green-300'
-                          : 'hover:bg-gray-50 border-gray-200'
+                          ? 'bg-emerald-100 border-green-300'
+                          : 'hover:bg-muted border-border'
                       }`}
                     >
                       <div className="font-medium">{column.column_name}</div>
-                      <div className="text-sm text-gray-500">{column.data_type}</div>
+                      <div className="text-sm text-muted-foreground">{column.data_type}</div>
                     </div>
                   ))}
                   {fromColumns.length === 0 && fromTable && (
-                    <div className="text-center text-gray-500 py-4">
+                    <div className="text-center text-muted-foreground py-4">
                       컬럼을 불러오는 중...
                     </div>
                   )}
@@ -393,10 +393,10 @@ export default function BatchCreatePage() {
         </Card>
 
         {/* TO 섹션 */}
-        <Card className="border-red-200">
-          <CardHeader className="bg-red-50">
-            <CardTitle className="text-red-700">TO (대상 데이터베이스)</CardTitle>
-            <p className="text-sm text-red-600">
+        <Card className="border-destructive/20">
+          <CardHeader className="bg-destructive/10">
+            <CardTitle className="text-destructive">TO (대상 데이터베이스)</CardTitle>
+            <p className="text-sm text-destructive">
               FROM에서 컬럼을 선택한 후, 여기서 대상 컬럼을 클릭하면 매핑됩니다
             </p>
           </CardHeader>
@@ -447,7 +447,7 @@ export default function BatchCreatePage() {
             {/* TO 컬럼 목록 */}
             {toTable && (
               <div className="space-y-2">
-                <Label className="text-blue-600 font-semibold">{toTable} 테이블</Label>
+                <Label className="text-primary font-semibold">{toTable} 테이블</Label>
                 <div className="border rounded-lg p-4 max-h-80 overflow-y-auto space-y-2">
                   {toColumns.map((column) => (
                     <div
@@ -455,16 +455,16 @@ export default function BatchCreatePage() {
                       onClick={() => handleToColumnClick(column)}
                       className={`p-3 border rounded cursor-pointer transition-colors ${
                         selectedFromColumn 
-                          ? 'hover:bg-red-50 border-gray-200'
-                          : 'bg-gray-100 border-gray-300 cursor-not-allowed'
+                          ? 'hover:bg-destructive/10 border-border'
+                          : 'bg-muted border-input cursor-not-allowed'
                       }`}
                     >
                       <div className="font-medium">{column.column_name}</div>
-                      <div className="text-sm text-gray-500">{column.data_type}</div>
+                      <div className="text-sm text-muted-foreground">{column.data_type}</div>
                     </div>
                   ))}
                   {toColumns.length === 0 && toTable && (
-                    <div className="text-center text-gray-500 py-4">
+                    <div className="text-center text-muted-foreground py-4">
                       컬럼을 불러오는 중...
                     </div>
                   )}
@@ -484,22 +484,22 @@ export default function BatchCreatePage() {
           <CardContent>
             <div className="space-y-3">
               {mappings.map((mapping, index) => (
-                <div key={index} className="flex items-center justify-between p-4 border rounded-lg bg-yellow-50">
+                <div key={index} className="flex items-center justify-between p-4 border rounded-lg bg-amber-50">
                   <div className="flex items-center space-x-4">
                     <div className="text-sm">
                       <div className="font-medium">
                         {mapping.from_table_name}.{mapping.from_column_name}
                       </div>
-                      <div className="text-gray-500">
+                      <div className="text-muted-foreground">
                         {mapping.from_column_type}
                       </div>
                     </div>
-                    <ArrowRight className="h-4 w-4 text-gray-400" />
+                    <ArrowRight className="h-4 w-4 text-muted-foreground/70" />
                     <div className="text-sm">
                       <div className="font-medium">
                         {mapping.to_table_name}.{mapping.to_column_name}
                       </div>
-                      <div className="text-gray-500">
+                      <div className="text-muted-foreground">
                         {mapping.to_column_type}
                       </div>
                     </div>
@@ -508,7 +508,7 @@ export default function BatchCreatePage() {
                     variant="ghost"
                     size="sm"
                     onClick={() => removeMapping(index)}
-                    className="text-red-600 hover:text-red-700"
+                    className="text-destructive hover:text-destructive"
                   >
                     <Trash2 className="h-4 w-4" />
                   </Button>
diff --git a/frontend/app/(main)/admin/automaticMng/batchmngList/edit/[id]/page.tsx b/frontend/app/(main)/admin/automaticMng/batchmngList/edit/[id]/page.tsx
index c72bfc40..554cd9a5 100644
--- a/frontend/app/(main)/admin/automaticMng/batchmngList/edit/[id]/page.tsx
+++ b/frontend/app/(main)/admin/automaticMng/batchmngList/edit/[id]/page.tsx
@@ -815,7 +815,7 @@ export default function BatchEditPage() {
                       </SelectContent>
                     </Select>
                   )}
-                  <p className="mt-1 text-xs text-gray-500">
+                  <p className="mt-1 text-xs text-muted-foreground">
                     {authTokenMode === "direct"
                       ? "API 호출 시 Authorization 헤더에 사용할 토큰을 입력하세요."
                       : "auth_tokens 테이블에서 선택한 서비스의 최신 토큰을 사용합니다."}
@@ -874,7 +874,7 @@ export default function BatchEditPage() {
                     onChange={(e) => setDataArrayPath(e.target.value)}
                     placeholder="response (예: data.items, results)"
                   />
-                  <p className="mt-1 text-xs text-gray-500">
+                  <p className="mt-1 text-xs text-muted-foreground">
                     API 응답에서 배열 데이터가 있는 경로를 입력하세요. 비워두면 응답 전체를 사용합니다.
                     <br />
                     예시: response, data.items, result.list
@@ -902,7 +902,7 @@ export default function BatchEditPage() {
                       className="min-h-[100px]"
                       rows={5}
                     />
-                    <p className="mt-1 text-xs text-gray-500">API 호출 시 함께 전송할 JSON 데이터를 입력하세요.</p>
+                    <p className="mt-1 text-xs text-muted-foreground">API 호출 시 함께 전송할 JSON 데이터를 입력하세요.</p>
                   </div>
                 )}
 
@@ -910,7 +910,7 @@ export default function BatchEditPage() {
                 <div className="space-y-4">
                   <div className="border-t pt-4">
                     <Label className="text-base font-medium">API 파라미터 설정</Label>
-                    <p className="mt-1 text-sm text-gray-600">특정 사용자나 조건으로 데이터를 조회할 때 사용합니다.</p>
+                    <p className="mt-1 text-sm text-muted-foreground">특정 사용자나 조건으로 데이터를 조회할 때 사용합니다.</p>
                   </div>
 
                   <div>
@@ -967,26 +967,26 @@ export default function BatchEditPage() {
                           }
                         />
                         {apiParamSource === "dynamic" && (
-                          <p className="mt-1 text-xs text-gray-500">
+                          <p className="mt-1 text-xs text-muted-foreground">
                             동적값은 배치 실행 시 설정된 값으로 치환됩니다. 예: {"{{user_id}}"} → 실제 사용자 ID
                           </p>
                         )}
                       </div>
 
                       {apiParamType === "url" && (
-                        <div className="rounded-lg bg-blue-50 p-3">
-                          <div className="text-sm font-medium text-blue-800">URL 파라미터 예시</div>
-                          <div className="mt-1 text-sm text-blue-700">
+                        <div className="rounded-lg bg-primary/10 p-3">
+                          <div className="text-sm font-medium text-primary">URL 파라미터 예시</div>
+                          <div className="mt-1 text-sm text-primary">
                             엔드포인트: /api/users/{`{${apiParamName || "userId"}}`}
                           </div>
-                          <div className="text-sm text-blue-700">실제 호출: /api/users/{apiParamValue || "123"}</div>
+                          <div className="text-sm text-primary">실제 호출: /api/users/{apiParamValue || "123"}</div>
                         </div>
                       )}
 
                       {apiParamType === "query" && (
-                        <div className="rounded-lg bg-green-50 p-3">
-                          <div className="text-sm font-medium text-green-800">쿼리 파라미터 예시</div>
-                          <div className="mt-1 text-sm text-green-700">
+                        <div className="rounded-lg bg-emerald-50 p-3">
+                          <div className="text-sm font-medium text-emerald-800">쿼리 파라미터 예시</div>
+                          <div className="mt-1 text-sm text-emerald-700">
                             실제 호출: {mappings[0]?.from_table_name || "/api/users"}?{apiParamName || "userId"}=
                             {apiParamValue || "123"}
                           </div>
diff --git a/frontend/app/(main)/admin/automaticMng/exCallConfList/page.tsx b/frontend/app/(main)/admin/automaticMng/exCallConfList/page.tsx
index f98a98d1..94a83225 100644
--- a/frontend/app/(main)/admin/automaticMng/exCallConfList/page.tsx
+++ b/frontend/app/(main)/admin/automaticMng/exCallConfList/page.tsx
@@ -3,10 +3,8 @@
 import React, { useState, useEffect } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
-import { Plus, Search, Edit, Trash2, TestTube, Filter } from "lucide-react";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Plus, Search, Edit, Trash2, TestTube } from "lucide-react";
 import { toast } from "sonner";
 import { showErrorToast } from "@/lib/utils/toastUtils";
 import {
@@ -29,9 +27,16 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
+import { ResponsiveDataView, RDVColumn, RDVCardField } from "@/components/common/ResponsiveDataView";
+import { ScrollToTop } from "@/components/common/ScrollToTop";
+
+// API 응답에 실제로 포함되는 필드를 위한 확장 타입
+type ExternalCallConfigWithDate = ExternalCallConfig & {
+  created_date?: string;
+};
 
 export default function ExternalCallConfigsPage() {
-  const [configs, setConfigs] = useState<ExternalCallConfig[]>([]);
+  const [configs, setConfigs] = useState<ExternalCallConfigWithDate[]>([]);
   const [loading, setLoading] = useState(true);
   const [searchQuery, setSearchQuery] = useState("");
   const [filter, setFilter] = useState<ExternalCallConfigFilter>({
@@ -50,15 +55,17 @@ export default function ExternalCallConfigsPage() {
   const fetchConfigs = async () => {
     try {
       setLoading(true);
-      const response = await ExternalCallConfigAPI.getConfigs({
-        ...filter,
-        search: searchQuery.trim() || undefined,
-      });
+      const filterWithSearch: Record<string, string | undefined> = { ...filter };
+      const trimmed = searchQuery.trim();
+      if (trimmed) {
+        filterWithSearch.search = trimmed;
+      }
+      const response = await ExternalCallConfigAPI.getConfigs(filterWithSearch as ExternalCallConfigFilter);
 
       if (response.success) {
-        setConfigs(response.data || []);
+        setConfigs((response.data || []) as ExternalCallConfigWithDate[]);
       } else {
-        showErrorToast("외부 호출 설정 조회에 실패했습니다", response.message, {
+        showErrorToast("외부 호출 설정 조회에 실패했습니다", response.error, {
           guidance: "네트워크 연결을 확인하고 다시 시도해 주세요.",
         });
       }
@@ -72,9 +79,10 @@ export default function ExternalCallConfigsPage() {
     }
   };
 
-  // 초기 로드 및 필터/검색 변경 시 재조회
+  // 초기 로드 및 필터 변경 시 재조회
   useEffect(() => {
     fetchConfigs();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [filter]);
 
   // 검색 실행
@@ -118,7 +126,7 @@ export default function ExternalCallConfigsPage() {
         toast.success("외부 호출 설정이 삭제되었습니다.");
         fetchConfigs();
       } else {
-        showErrorToast("외부 호출 설정 삭제에 실패했습니다", response.message, {
+        showErrorToast("외부 호출 설정 삭제에 실패했습니다", response.error, {
           guidance: "잠시 후 다시 시도해 주세요.",
         });
       }
@@ -140,10 +148,10 @@ export default function ExternalCallConfigsPage() {
     try {
       const response = await ExternalCallConfigAPI.testConfig(config.id);
 
-      if (response.success && response.data?.success) {
-        toast.success(`테스트 성공: ${response.data.message}`);
+      if (response.success) {
+        toast.success(`테스트 성공: ${response.message || "정상"}`);
       } else {
-        toast.error(`테스트 실패: ${response.data?.message || response.message}`);
+        toast.error(`테스트 실패: ${response.message || response.error || "알 수 없는 오류"}`);
       }
     } catch (error) {
       console.error("외부 호출 설정 테스트 오류:", error);
@@ -171,244 +179,283 @@ export default function ExternalCallConfigsPage() {
     return API_TYPE_OPTIONS.find((option) => option.value === apiType)?.label || apiType;
   };
 
+  // ResponsiveDataView 컬럼 정의
+  const columns: RDVColumn<ExternalCallConfigWithDate>[] = [
+    {
+      key: "config_name",
+      label: "설정명",
+      render: (_v, row) => <span className="font-medium">{row.config_name}</span>,
+    },
+    {
+      key: "call_type",
+      label: "호출 타입",
+      width: "120px",
+      render: (_v, row) => <Badge variant="outline">{getCallTypeLabel(row.call_type)}</Badge>,
+    },
+    {
+      key: "api_type",
+      label: "API 타입",
+      width: "120px",
+      render: (_v, row) =>
+        row.api_type ? (
+          <Badge variant="secondary">{getApiTypeLabel(row.api_type)}</Badge>
+        ) : (
+          <span className="text-muted-foreground">-</span>
+        ),
+    },
+    {
+      key: "description",
+      label: "설명",
+      render: (_v, row) =>
+        row.description ? (
+          <span className="block max-w-xs truncate text-muted-foreground" title={row.description}>
+            {row.description}
+          </span>
+        ) : (
+          <span className="text-muted-foreground">-</span>
+        ),
+    },
+    {
+      key: "is_active",
+      label: "상태",
+      width: "80px",
+      render: (_v, row) => (
+        <Badge variant={row.is_active === "Y" ? "default" : "destructive"}>
+          {row.is_active === "Y" ? "활성" : "비활성"}
+        </Badge>
+      ),
+    },
+    {
+      key: "created_date",
+      label: "생성일",
+      width: "120px",
+      render: (_v, row) =>
+        row.created_date ? new Date(row.created_date).toLocaleDateString() : "-",
+    },
+  ];
+
+  // 모바일 카드 필드 정의
+  const cardFields: RDVCardField<ExternalCallConfigWithDate>[] = [
+    {
+      label: "호출 타입",
+      render: (c) => <Badge variant="outline">{getCallTypeLabel(c.call_type)}</Badge>,
+    },
+    {
+      label: "API 타입",
+      render: (c) =>
+        c.api_type ? (
+          <Badge variant="secondary">{getApiTypeLabel(c.api_type)}</Badge>
+        ) : (
+          <span className="text-muted-foreground">-</span>
+        ),
+    },
+    {
+      label: "설명",
+      render: (c) => (
+        <span className="max-w-[200px] truncate">{c.description || "-"}</span>
+      ),
+    },
+    {
+      label: "생성일",
+      render: (c) =>
+        c.created_date ? new Date(c.created_date).toLocaleDateString() : "-",
+    },
+  ];
+
   return (
     <div className="flex min-h-screen flex-col bg-background">
-      <div className="space-y-6 p-6">
+      <div className="space-y-6 p-4 sm:p-6">
         {/* 페이지 헤더 */}
         <div className="space-y-2 border-b pb-4">
           <h1 className="text-3xl font-bold tracking-tight">외부 호출 관리</h1>
           <p className="text-sm text-muted-foreground">Discord, Slack, 카카오톡 등 외부 호출 설정을 관리합니다.</p>
         </div>
 
-        {/* 검색 및 필터 영역 */}
-        <div className="space-y-4">
-          {/* 첫 번째 줄: 검색 + 추가 버튼 */}
-          <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
-            <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
-              <div className="w-full sm:w-[320px]">
-                <div className="relative">
-                  <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-                  <Input
-                    placeholder="설정 이름 또는 설명으로 검색..."
-                    value={searchQuery}
-                    onChange={(e) => setSearchQuery(e.target.value)}
-                    onKeyPress={handleSearchKeyPress}
-                    className="h-10 pl-10 text-sm"
-                  />
-                </div>
-              </div>
-              <Button onClick={handleSearch} variant="outline" className="h-10 gap-2 text-sm font-medium">
-                <Search className="h-4 w-4" />
-                검색
-              </Button>
+        {/* 검색 및 필터 영역 (반응형) */}
+        <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+          <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
+            <div className="relative w-full sm:w-[300px]">
+              <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+              <Input
+                placeholder="설정 이름 또는 설명으로 검색..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                onKeyPress={handleSearchKeyPress}
+                className="h-10 pl-10 text-sm"
+              />
             </div>
-            <Button onClick={handleAddConfig} className="h-10 gap-2 text-sm font-medium">
-              <Plus className="h-4 w-4" />
-              새 외부 호출 추가
+            <Button onClick={handleSearch} variant="outline" className="h-10 gap-2 text-sm font-medium">
+              <Search className="h-4 w-4" />
+              검색
             </Button>
           </div>
-
-          {/* 두 번째 줄: 필터 */}
-          <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
-            <Select
-              value={filter.call_type || "all"}
-              onValueChange={(value) =>
-                setFilter((prev) => ({
-                  ...prev,
-                  call_type: value === "all" ? undefined : value,
-                }))
-              }
-            >
-              <SelectTrigger className="h-10">
-                <SelectValue placeholder="호출 타입" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="all">전체</SelectItem>
-                {CALL_TYPE_OPTIONS.map((option) => (
-                  <SelectItem key={option.value} value={option.value}>
-                    {option.label}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-
-            <Select
-              value={filter.api_type || "all"}
-              onValueChange={(value) =>
-                setFilter((prev) => ({
-                  ...prev,
-                  api_type: value === "all" ? undefined : value,
-                }))
-              }
-            >
-              <SelectTrigger className="h-10">
-                <SelectValue placeholder="API 타입" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="all">전체</SelectItem>
-                {API_TYPE_OPTIONS.map((option) => (
-                  <SelectItem key={option.value} value={option.value}>
-                    {option.label}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-
-            <Select
-              value={filter.is_active || "Y"}
-              onValueChange={(value) =>
-                setFilter((prev) => ({
-                  ...prev,
-                  is_active: value,
-                }))
-              }
-            >
-              <SelectTrigger className="h-10">
-                <SelectValue placeholder="상태" />
-              </SelectTrigger>
-              <SelectContent>
-                {ACTIVE_STATUS_OPTIONS.map((option) => (
-                  <SelectItem key={option.value} value={option.value}>
-                    {option.label}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </div>
+          <Button onClick={handleAddConfig} className="h-10 gap-2 text-sm font-medium">
+            <Plus className="h-4 w-4" />
+            새 외부 호출 추가
+          </Button>
         </div>
 
-        {/* 설정 목록 */}
-        <div className="rounded-lg border bg-card shadow-sm">
-          {loading ? (
-            // 로딩 상태
-            <div className="flex h-64 items-center justify-center">
-              <div className="text-sm text-muted-foreground">로딩 중...</div>
-            </div>
-          ) : configs.length === 0 ? (
-            // 빈 상태
-            <div className="flex h-64 flex-col items-center justify-center">
-              <div className="flex flex-col items-center gap-2 text-center">
-                <p className="text-sm text-muted-foreground">등록된 외부 호출 설정이 없습니다.</p>
-                <p className="text-xs text-muted-foreground">새 외부 호출을 추가해보세요.</p>
-              </div>
-            </div>
-          ) : (
-            // 설정 테이블 목록
-            <Table>
-              <TableHeader>
-                <TableRow className="border-b bg-muted/50 hover:bg-muted/50">
-                  <TableHead className="h-12 text-sm font-semibold">설정명</TableHead>
-                  <TableHead className="h-12 text-sm font-semibold">호출 타입</TableHead>
-                  <TableHead className="h-12 text-sm font-semibold">API 타입</TableHead>
-                  <TableHead className="h-12 text-sm font-semibold">설명</TableHead>
-                  <TableHead className="h-12 text-sm font-semibold">상태</TableHead>
-                  <TableHead className="h-12 text-sm font-semibold">생성일</TableHead>
-                  <TableHead className="h-12 text-center text-sm font-semibold">작업</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {configs.map((config) => (
-                  <TableRow key={config.id} className="border-b transition-colors hover:bg-muted/50">
-                    <TableCell className="h-16 text-sm font-medium">{config.config_name}</TableCell>
-                    <TableCell className="h-16 text-sm">
-                      <Badge variant="outline">{getCallTypeLabel(config.call_type)}</Badge>
-                    </TableCell>
-                    <TableCell className="h-16 text-sm">
-                      {config.api_type ? (
-                        <Badge variant="secondary">{getApiTypeLabel(config.api_type)}</Badge>
-                      ) : (
-                        <span className="text-muted-foreground">-</span>
-                      )}
-                    </TableCell>
-                    <TableCell className="h-16 text-sm">
-                      <div className="max-w-xs">
-                        {config.description ? (
-                          <span className="block truncate text-muted-foreground" title={config.description}>
-                            {config.description}
-                          </span>
-                        ) : (
-                          <span className="text-muted-foreground">-</span>
-                        )}
-                      </div>
-                    </TableCell>
-                    <TableCell className="h-16 text-sm">
-                      <Badge variant={config.is_active === "Y" ? "default" : "destructive"}>
-                        {config.is_active === "Y" ? "활성" : "비활성"}
-                      </Badge>
-                    </TableCell>
-                    <TableCell className="h-16 text-sm text-muted-foreground">
-                      {config.created_date ? new Date(config.created_date).toLocaleDateString() : "-"}
-                    </TableCell>
-                    <TableCell className="h-16 text-sm">
-                      <div className="flex justify-center gap-1">
-                        <Button 
-                          variant="ghost" 
-                          size="icon" 
-                          className="h-8 w-8" 
-                          onClick={() => handleTestConfig(config)} 
-                          title="테스트"
-                        >
-                          <TestTube className="h-4 w-4" />
-                        </Button>
-                        <Button 
-                          variant="ghost" 
-                          size="icon" 
-                          className="h-8 w-8" 
-                          onClick={() => handleEditConfig(config)} 
-                          title="편집"
-                        >
-                          <Edit className="h-4 w-4" />
-                        </Button>
-                        <Button
-                          variant="ghost"
-                          size="icon"
-                          className="h-8 w-8 text-destructive hover:text-destructive"
-                          onClick={() => handleDeleteConfig(config)}
-                          title="삭제"
-                        >
-                          <Trash2 className="h-4 w-4" />
-                        </Button>
-                      </div>
-                    </TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
+        {/* 필터 영역 */}
+        <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
+          <Select
+            value={filter.call_type || "all"}
+            onValueChange={(value) =>
+              setFilter((prev) => ({
+                ...prev,
+                call_type: value === "all" ? undefined : value,
+              }))
+            }
+          >
+            <SelectTrigger className="h-10">
+              <SelectValue placeholder="호출 타입" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">전체</SelectItem>
+              {CALL_TYPE_OPTIONS.map((option) => (
+                <SelectItem key={option.value} value={option.value}>
+                  {option.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+
+          <Select
+            value={filter.api_type || "all"}
+            onValueChange={(value) =>
+              setFilter((prev) => ({
+                ...prev,
+                api_type: value === "all" ? undefined : value,
+              }))
+            }
+          >
+            <SelectTrigger className="h-10">
+              <SelectValue placeholder="API 타입" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">전체</SelectItem>
+              {API_TYPE_OPTIONS.map((option) => (
+                <SelectItem key={option.value} value={option.value}>
+                  {option.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+
+          <Select
+            value={filter.is_active || "Y"}
+            onValueChange={(value) =>
+              setFilter((prev) => ({
+                ...prev,
+                is_active: value,
+              }))
+            }
+          >
+            <SelectTrigger className="h-10">
+              <SelectValue placeholder="상태" />
+            </SelectTrigger>
+            <SelectContent>
+              {ACTIVE_STATUS_OPTIONS.map((option) => (
+                <SelectItem key={option.value} value={option.value}>
+                  {option.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        {/* 설정 목록 (ResponsiveDataView) */}
+        <ResponsiveDataView<ExternalCallConfigWithDate>
+          data={configs}
+          columns={columns}
+          keyExtractor={(c) => String(c.id || c.config_name)}
+          isLoading={loading}
+          emptyMessage="등록된 외부 호출 설정이 없습니다."
+          skeletonCount={5}
+          cardTitle={(c) => c.config_name}
+          cardSubtitle={(c) => c.description || "설명 없음"}
+          cardHeaderRight={(c) => (
+            <Badge variant={c.is_active === "Y" ? "default" : "destructive"}>
+              {c.is_active === "Y" ? "활성" : "비활성"}
+            </Badge>
           )}
-        </div>
+          cardFields={cardFields}
+          renderActions={(c) => (
+            <>
+              <Button
+                variant="outline"
+                size="sm"
+                className="h-9 flex-1 gap-2 text-sm"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  handleTestConfig(c);
+                }}
+              >
+                <TestTube className="h-4 w-4" />
+                테스트
+              </Button>
+              <Button
+                variant="outline"
+                size="sm"
+                className="h-9 flex-1 gap-2 text-sm"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  handleEditConfig(c);
+                }}
+              >
+                <Edit className="h-4 w-4" />
+                편집
+              </Button>
+              <Button
+                variant="outline"
+                size="sm"
+                className="text-destructive hover:bg-destructive/10 hover:text-destructive h-9 gap-2 text-sm"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  handleDeleteConfig(c);
+                }}
+              >
+                <Trash2 className="h-4 w-4" />
+              </Button>
+            </>
+          )}
+          actionsWidth="200px"
+        />
 
-      {/* 외부 호출 설정 모달 */}
-      <ExternalCallConfigModal
-        isOpen={isModalOpen}
-        onClose={() => setIsModalOpen(false)}
-        onSave={handleModalSave}
-        editingConfig={editingConfig}
-      />
+        {/* 외부 호출 설정 모달 */}
+        <ExternalCallConfigModal
+          isOpen={isModalOpen}
+          onClose={() => setIsModalOpen(false)}
+          onSave={handleModalSave}
+          editingConfig={editingConfig}
+        />
 
-      {/* 삭제 확인 다이얼로그 */}
-      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
-        <AlertDialogContent className="max-w-[95vw] sm:max-w-[500px]">
-          <AlertDialogHeader>
-            <AlertDialogTitle className="text-base sm:text-lg">외부 호출 설정 삭제</AlertDialogTitle>
-            <AlertDialogDescription className="text-xs sm:text-sm">
-              "{configToDelete?.config_name}" 설정을 삭제하시겠습니까?
-              <br />이 작업은 되돌릴 수 없습니다.
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter className="gap-2 sm:gap-0">
-            <AlertDialogCancel className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
-              취소
-            </AlertDialogCancel>
-            <AlertDialogAction 
-              onClick={confirmDeleteConfig} 
-              className="h-8 flex-1 bg-destructive text-xs hover:bg-destructive/90 sm:h-10 sm:flex-none sm:text-sm"
-            >
-              삭제
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
+        {/* 삭제 확인 다이얼로그 */}
+        <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+          <AlertDialogContent className="max-w-[95vw] sm:max-w-[500px]">
+            <AlertDialogHeader>
+              <AlertDialogTitle className="text-base sm:text-lg">외부 호출 설정 삭제</AlertDialogTitle>
+              <AlertDialogDescription className="text-xs sm:text-sm">
+                &quot;{configToDelete?.config_name}&quot; 설정을 삭제하시겠습니까?
+                <br />이 작업은 되돌릴 수 없습니다.
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter className="gap-2 sm:gap-0">
+              <AlertDialogCancel className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
+                취소
+              </AlertDialogCancel>
+              <AlertDialogAction
+                onClick={confirmDeleteConfig}
+                className="h-8 flex-1 bg-destructive text-xs hover:bg-destructive/90 sm:h-10 sm:flex-none sm:text-sm"
+              >
+                삭제
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
       </div>
+
+      {/* Scroll to Top 버튼 */}
+      <ScrollToTop />
     </div>
   );
 }
diff --git a/frontend/app/(main)/admin/automaticMng/exconList/page.tsx b/frontend/app/(main)/admin/automaticMng/exconList/page.tsx
index 0ab2fbeb..89ecba46 100644
--- a/frontend/app/(main)/admin/automaticMng/exconList/page.tsx
+++ b/frontend/app/(main)/admin/automaticMng/exconList/page.tsx
@@ -4,10 +4,8 @@ import React, { useState, useEffect } from "react";
 import { Plus, Search, Pencil, Trash2, Database, Terminal, Globe } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Card, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import {
   AlertDialog,
@@ -24,11 +22,12 @@ import {
   ExternalDbConnectionAPI,
   ExternalDbConnection,
   ExternalDbConnectionFilter,
-  ConnectionTestRequest,
 } from "@/lib/api/externalDbConnection";
 import { ExternalDbConnectionModal } from "@/components/admin/ExternalDbConnectionModal";
 import { SqlQueryModal } from "@/components/admin/SqlQueryModal";
 import { RestApiConnectionList } from "@/components/admin/RestApiConnectionList";
+import { ResponsiveDataView, RDVColumn, RDVCardField } from "@/components/common/ResponsiveDataView";
+import { ScrollToTop } from "@/components/common/ScrollToTop";
 
 type ConnectionTabType = "database" | "rest-api";
 
@@ -102,7 +101,6 @@ export default function ExternalConnectionsPage() {
       setSupportedDbTypes([{ value: "ALL", label: "전체" }, ...types]);
     } catch (error) {
       console.error("지원 DB 타입 로딩 오류:", error);
-      // 실패 시 기본값 사용
       setSupportedDbTypes([
         { value: "ALL", label: "전체" },
         { value: "mysql", label: "MySQL" },
@@ -114,45 +112,36 @@ export default function ExternalConnectionsPage() {
     }
   };
 
-  // 초기 데이터 로딩
   useEffect(() => {
     loadConnections();
     loadSupportedDbTypes();
   }, []);
 
-  // 필터 변경 시 데이터 재로딩
   useEffect(() => {
     loadConnections();
   }, [searchTerm, dbTypeFilter, activeStatusFilter]);
 
-  // 새 연결 추가
   const handleAddConnection = () => {
     setEditingConnection(undefined);
     setIsModalOpen(true);
   };
 
-  // 연결 편집
   const handleEditConnection = (connection: ExternalDbConnection) => {
     setEditingConnection(connection);
     setIsModalOpen(true);
   };
 
-  // 연결 삭제 확인 다이얼로그 열기
   const handleDeleteConnection = (connection: ExternalDbConnection) => {
     setConnectionToDelete(connection);
     setDeleteDialogOpen(true);
   };
 
-  // 연결 삭제 실행
   const confirmDeleteConnection = async () => {
     if (!connectionToDelete?.id) return;
 
     try {
       await ExternalDbConnectionAPI.deleteConnection(connectionToDelete.id);
-      toast({
-        title: "성공",
-        description: "연결이 삭제되었습니다.",
-      });
+      toast({ title: "성공", description: "연결이 삭제되었습니다." });
       loadConnections();
     } catch (error) {
       console.error("연결 삭제 오류:", error);
@@ -167,13 +156,11 @@ export default function ExternalConnectionsPage() {
     }
   };
 
-  // 연결 삭제 취소
   const cancelDeleteConnection = () => {
     setDeleteDialogOpen(false);
     setConnectionToDelete(null);
   };
 
-  // 연결 테스트
   const handleTestConnection = async (connection: ExternalDbConnection) => {
     if (!connection.id) return;
 
@@ -181,14 +168,10 @@ export default function ExternalConnectionsPage() {
 
     try {
       const result = await ExternalDbConnectionAPI.testConnection(connection.id);
-
       setTestResults((prev) => new Map(prev).set(connection.id!, result.success));
 
       if (result.success) {
-        toast({
-          title: "연결 성공",
-          description: `${connection.connection_name} 연결이 성공했습니다.`,
-        });
+        toast({ title: "연결 성공", description: `${connection.connection_name} 연결이 성공했습니다.` });
       } else {
         toast({
           title: "연결 실패",
@@ -199,11 +182,7 @@ export default function ExternalConnectionsPage() {
     } catch (error) {
       console.error("연결 테스트 오류:", error);
       setTestResults((prev) => new Map(prev).set(connection.id!, false));
-      toast({
-        title: "연결 테스트 오류",
-        description: "연결 테스트 중 오류가 발생했습니다.",
-        variant: "destructive",
-      });
+      toast({ title: "연결 테스트 오류", description: "연결 테스트 중 오류가 발생했습니다.", variant: "destructive" });
     } finally {
       setTestingConnections((prev) => {
         const newSet = new Set(prev);
@@ -213,19 +192,77 @@ export default function ExternalConnectionsPage() {
     }
   };
 
-  // 모달 저장 처리
   const handleModalSave = () => {
     setIsModalOpen(false);
     setEditingConnection(undefined);
     loadConnections();
   };
 
-  // 모달 취소 처리
   const handleModalCancel = () => {
     setIsModalOpen(false);
     setEditingConnection(undefined);
   };
 
+  // 테이블 컬럼 정의
+  const columns: RDVColumn<ExternalDbConnection>[] = [
+    { key: "connection_name", label: "연결명",
+      render: (v) => <span className="font-medium">{v}</span> },
+    { key: "company_code", label: "회사", width: "100px",
+      render: (_v, row) => (row as any).company_name || row.company_code },
+    { key: "db_type", label: "DB 타입", width: "120px",
+      render: (v) => <Badge variant="outline">{DB_TYPE_LABELS[v] || v}</Badge> },
+    { key: "host", label: "호스트:포트", width: "180px", hideOnMobile: true,
+      render: (_v, row) => <span className="font-mono">{row.host}:{row.port}</span> },
+    { key: "database_name", label: "데이터베이스", width: "140px", hideOnMobile: true,
+      render: (v) => <span className="font-mono">{v}</span> },
+    { key: "username", label: "사용자", width: "100px", hideOnMobile: true,
+      render: (v) => <span className="font-mono">{v}</span> },
+    { key: "is_active", label: "상태", width: "80px",
+      render: (v) => (
+        <Badge variant={v === "Y" ? "default" : "secondary"}>
+          {v === "Y" ? "활성" : "비활성"}
+        </Badge>
+      ) },
+    { key: "created_date", label: "생성일", width: "100px", hideOnMobile: true,
+      render: (v) => (
+        <span className="text-muted-foreground">
+          {v ? new Date(v).toLocaleDateString() : "N/A"}
+        </span>
+      ) },
+    { key: "id", label: "연결 테스트", width: "150px", hideOnMobile: true,
+      render: (_v, row) => (
+        <div className="flex items-center gap-2">
+          <Button variant="outline" size="sm"
+            onClick={(e) => { e.stopPropagation(); handleTestConnection(row); }}
+            disabled={testingConnections.has(row.id!)}
+            className="h-9 text-sm">
+            {testingConnections.has(row.id!) ? "테스트 중..." : "테스트"}
+          </Button>
+          {testResults.has(row.id!) && (
+            <Badge variant={testResults.get(row.id!) ? "default" : "destructive"}>
+              {testResults.get(row.id!) ? "성공" : "실패"}
+            </Badge>
+          )}
+        </div>
+      ) },
+  ];
+
+  // 모바일 카드 필드 정의
+  const cardFields: RDVCardField<ExternalDbConnection>[] = [
+    { label: "DB 타입",
+      render: (c) => <Badge variant="outline">{DB_TYPE_LABELS[c.db_type] || c.db_type}</Badge> },
+    { label: "호스트",
+      render: (c) => <span className="font-mono text-xs">{c.host}:{c.port}</span> },
+    { label: "데이터베이스",
+      render: (c) => <span className="font-mono text-xs">{c.database_name}</span> },
+    { label: "상태",
+      render: (c) => (
+        <Badge variant={c.is_active === "Y" ? "default" : "secondary"}>
+          {c.is_active === "Y" ? "활성" : "비활성"}
+        </Badge>
+      ) },
+  ];
+
   return (
     <div className="flex min-h-screen flex-col bg-background">
       <div className="space-y-6 p-6">
@@ -237,7 +274,7 @@ export default function ExternalConnectionsPage() {
 
         {/* 탭 */}
         <Tabs value={activeTab} onValueChange={(value) => setActiveTab(value as ConnectionTabType)}>
-          <TabsList className="grid w-[400px] grid-cols-2">
+          <TabsList className="grid w-full max-w-[400px] grid-cols-2">
             <TabsTrigger value="database" className="flex items-center gap-2">
               <Database className="h-4 w-4" />
               데이터베이스 연결
@@ -252,8 +289,7 @@ export default function ExternalConnectionsPage() {
           <TabsContent value="database" className="space-y-6">
             {/* 검색 및 필터 */}
             <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
-              <div className="flex flex-col gap-4 sm:flex-row sm:items-center">
-                {/* 검색 */}
+              <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
                 <div className="relative w-full sm:w-[300px]">
                   <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                   <Input
@@ -263,8 +299,6 @@ export default function ExternalConnectionsPage() {
                     className="h-10 pl-10 text-sm"
                   />
                 </div>
-
-                {/* DB 타입 필터 */}
                 <Select value={dbTypeFilter} onValueChange={setDbTypeFilter}>
                   <SelectTrigger className="h-10 w-full sm:w-[160px]">
                     <SelectValue placeholder="DB 타입" />
@@ -277,8 +311,6 @@ export default function ExternalConnectionsPage() {
                     ))}
                   </SelectContent>
                 </Select>
-
-                {/* 활성 상태 필터 */}
                 <Select value={activeStatusFilter} onValueChange={setActiveStatusFilter}>
                   <SelectTrigger className="h-10 w-full sm:w-[120px]">
                     <SelectValue placeholder="상태" />
@@ -292,126 +324,63 @@ export default function ExternalConnectionsPage() {
                   </SelectContent>
                 </Select>
               </div>
-
-              {/* 추가 버튼 */}
               <Button onClick={handleAddConnection} className="h-10 gap-2 text-sm font-medium">
                 <Plus className="h-4 w-4" />
                 새 연결 추가
               </Button>
             </div>
 
-            {/* 연결 목록 */}
-            {loading ? (
-              <div className="flex h-64 items-center justify-center bg-card">
-                <div className="text-sm text-muted-foreground">로딩 중...</div>
-              </div>
-            ) : connections.length === 0 ? (
-              <div className="flex h-64 flex-col items-center justify-center bg-card">
-                <div className="flex flex-col items-center gap-2 text-center">
-                  <p className="text-sm text-muted-foreground">등록된 연결이 없습니다</p>
-                </div>
-              </div>
-            ) : (
-              <div className="bg-card">
-                <Table>
-                    <TableHeader>
-                      <TableRow className="bg-background">
-                        <TableHead className="h-12 px-6 py-3 text-sm font-semibold">연결명</TableHead>
-                        <TableHead className="h-12 px-6 py-3 text-sm font-semibold">회사</TableHead>
-                        <TableHead className="h-12 px-6 py-3 text-sm font-semibold">DB 타입</TableHead>
-                        <TableHead className="h-12 px-6 py-3 text-sm font-semibold">호스트:포트</TableHead>
-                        <TableHead className="h-12 px-6 py-3 text-sm font-semibold">데이터베이스</TableHead>
-                        <TableHead className="h-12 px-6 py-3 text-sm font-semibold">사용자</TableHead>
-                        <TableHead className="h-12 px-6 py-3 text-sm font-semibold">상태</TableHead>
-                        <TableHead className="h-12 px-6 py-3 text-sm font-semibold">생성일</TableHead>
-                        <TableHead className="h-12 px-6 py-3 text-sm font-semibold">연결 테스트</TableHead>
-                        <TableHead className="h-12 px-6 py-3 text-right text-sm font-semibold">작업</TableHead>
-                      </TableRow>
-                    </TableHeader>
-                    <TableBody>
-                      {connections.map((connection) => (
-                        <TableRow key={connection.id} className="bg-background transition-colors hover:bg-muted/50">
-                          <TableCell className="h-16 px-6 py-3 text-sm">
-                            <div className="font-medium">{connection.connection_name}</div>
-                          </TableCell>
-                          <TableCell className="h-16 px-6 py-3 text-sm">
-                            {(connection as any).company_name || connection.company_code}
-                          </TableCell>
-                          <TableCell className="h-16 px-6 py-3 text-sm">
-                            <Badge variant="outline">
-                              {DB_TYPE_LABELS[connection.db_type] || connection.db_type}
-                            </Badge>
-                          </TableCell>
-                          <TableCell className="h-16 px-6 py-3 font-mono text-sm">
-                            {connection.host}:{connection.port}
-                          </TableCell>
-                          <TableCell className="h-16 px-6 py-3 font-mono text-sm">{connection.database_name}</TableCell>
-                          <TableCell className="h-16 px-6 py-3 font-mono text-sm">{connection.username}</TableCell>
-                          <TableCell className="h-16 px-6 py-3 text-sm">
-                            <Badge variant={connection.is_active === "Y" ? "default" : "secondary"}>
-                              {connection.is_active === "Y" ? "활성" : "비활성"}
-                            </Badge>
-                          </TableCell>
-                          <TableCell className="h-16 px-6 py-3 text-sm">
-                            {connection.created_date ? new Date(connection.created_date).toLocaleDateString() : "N/A"}
-                          </TableCell>
-                          <TableCell className="h-16 px-6 py-3 text-sm">
-                            <div className="flex items-center gap-2">
-                              <Button
-                                variant="outline"
-                                size="sm"
-                                onClick={() => handleTestConnection(connection)}
-                                disabled={testingConnections.has(connection.id!)}
-                                className="h-9 text-sm"
-                              >
-                                {testingConnections.has(connection.id!) ? "테스트 중..." : "테스트"}
-                              </Button>
-                              {testResults.has(connection.id!) && (
-                                <Badge variant={testResults.get(connection.id!) ? "default" : "destructive"}>
-                                  {testResults.get(connection.id!) ? "성공" : "실패"}
-                                </Badge>
-                              )}
-                            </div>
-                          </TableCell>
-                          <TableCell className="h-16 px-6 py-3 text-right">
-                            <div className="flex justify-end gap-2">
-                              <Button
-                                variant="ghost"
-                                size="icon"
-                                onClick={() => {
-                                  console.log("SQL 쿼리 실행 버튼 클릭 - connection:", connection);
-                                  setSelectedConnection(connection);
-                                  setSqlModalOpen(true);
-                                }}
-                                className="h-8 w-8"
-                                title="SQL 쿼리 실행"
-                              >
-                                <Terminal className="h-4 w-4" />
-                              </Button>
-                              <Button
-                                variant="ghost"
-                                size="icon"
-                                onClick={() => handleEditConnection(connection)}
-                                className="h-8 w-8"
-                              >
-                                <Pencil className="h-4 w-4" />
-                              </Button>
-                              <Button
-                                variant="ghost"
-                                size="icon"
-                                onClick={() => handleDeleteConnection(connection)}
-                                className="h-8 w-8 text-destructive hover:bg-destructive/10"
-                              >
-                                <Trash2 className="h-4 w-4" />
-                              </Button>
-                            </div>
-                          </TableCell>
-                        </TableRow>
-                      ))}
-                    </TableBody>
-                  </Table>
-                </div>
-            )}
+            {/* 연결 목록 - ResponsiveDataView */}
+            <ResponsiveDataView
+              data={connections}
+              columns={columns}
+              keyExtractor={(c) => String(c.id || c.connection_name)}
+              isLoading={loading}
+              emptyMessage="등록된 연결이 없습니다"
+              skeletonCount={5}
+              cardTitle={(c) => c.connection_name}
+              cardSubtitle={(c) => <span className="font-mono text-xs">{c.host}:{c.port}/{c.database_name}</span>}
+              cardHeaderRight={(c) => (
+                <Badge variant={c.is_active === "Y" ? "default" : "secondary"}>
+                  {c.is_active === "Y" ? "활성" : "비활성"}
+                </Badge>
+              )}
+              cardFields={cardFields}
+              renderActions={(c) => (
+                <>
+                  <Button variant="outline" size="sm"
+                    onClick={(e) => { e.stopPropagation(); handleTestConnection(c); }}
+                    disabled={testingConnections.has(c.id!)}
+                    className="h-9 flex-1 gap-2 text-sm">
+                    {testingConnections.has(c.id!) ? "테스트 중..." : "테스트"}
+                  </Button>
+                  <Button variant="outline" size="sm"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setSelectedConnection(c);
+                      setSqlModalOpen(true);
+                    }}
+                    className="h-9 flex-1 gap-2 text-sm">
+                    <Terminal className="h-4 w-4" />
+                    SQL
+                  </Button>
+                  <Button variant="outline" size="sm"
+                    onClick={(e) => { e.stopPropagation(); handleEditConnection(c); }}
+                    className="h-9 flex-1 gap-2 text-sm">
+                    <Pencil className="h-4 w-4" />
+                    편집
+                  </Button>
+                  <Button variant="outline" size="sm"
+                    onClick={(e) => { e.stopPropagation(); handleDeleteConnection(c); }}
+                    className="text-destructive hover:bg-destructive/10 hover:text-destructive h-9 flex-1 gap-2 text-sm">
+                    <Trash2 className="h-4 w-4" />
+                    삭제
+                  </Button>
+                </>
+              )}
+              actionsLabel="작업"
+              actionsWidth="180px"
+            />
 
             {/* 연결 설정 모달 */}
             {isModalOpen && (
@@ -430,7 +399,7 @@ export default function ExternalConnectionsPage() {
                 <AlertDialogHeader>
                   <AlertDialogTitle className="text-base sm:text-lg">연결 삭제 확인</AlertDialogTitle>
                   <AlertDialogDescription className="text-xs sm:text-sm">
-                    "{connectionToDelete?.connection_name}" 연결을 삭제하시겠습니까?
+                    &ldquo;{connectionToDelete?.connection_name}&rdquo; 연결을 삭제하시겠습니까?
                     <br />
                     이 작업은 되돌릴 수 없습니다.
                   </AlertDialogDescription>
@@ -472,6 +441,7 @@ export default function ExternalConnectionsPage() {
           </TabsContent>
         </Tabs>
       </div>
+      <ScrollToTop />
     </div>
   );
 }
diff --git a/frontend/app/(main)/admin/automaticMng/flowMgmtList/[id]/page.tsx b/frontend/app/(main)/admin/automaticMng/flowMgmtList/[id]/page.tsx
index c492a526..65acd785 100644
--- a/frontend/app/(main)/admin/automaticMng/flowMgmtList/[id]/page.tsx
+++ b/frontend/app/(main)/admin/automaticMng/flowMgmtList/[id]/page.tsx
@@ -294,7 +294,7 @@ export default function FlowEditorPage() {
           onNodeDragStop={handleNodeDragStop}
           nodeTypes={nodeTypes}
           fitView
-          className="bg-gray-50"
+          className="bg-muted"
         >
           <Background />
           <Controls />
diff --git a/frontend/app/(main)/admin/automaticMng/flowMgmtList/page.tsx b/frontend/app/(main)/admin/automaticMng/flowMgmtList/page.tsx
index d283f72d..9ade5843 100644
--- a/frontend/app/(main)/admin/automaticMng/flowMgmtList/page.tsx
+++ b/frontend/app/(main)/admin/automaticMng/flowMgmtList/page.tsx
@@ -9,7 +9,7 @@
 
 import { useState, useEffect } from "react";
 import { useRouter } from "next/navigation";
-import { Plus, Edit2, Trash2, Workflow, Table, Calendar, User, Check, ChevronsUpDown } from "lucide-react";
+import { Plus, Edit2, Trash2, Workflow, Search, Check, ChevronsUpDown } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import {
@@ -33,8 +33,9 @@ import { cn } from "@/lib/utils";
 import { formatErrorMessage } from "@/lib/utils/errorUtils";
 import { tableManagementApi } from "@/lib/api/tableManagement";
 import { ScrollToTop } from "@/components/common/ScrollToTop";
-import { ExternalDbConnectionAPI } from "@/lib/api/externalDbConnection";
+import { ExternalDbConnectionAPI, ExternalDbConnection } from "@/lib/api/externalDbConnection";
 import { ExternalRestApiConnectionAPI, ExternalRestApiConnection } from "@/lib/api/externalRestApiConnection";
+import { ResponsiveDataView, RDVColumn, RDVCardField } from "@/components/common/ResponsiveDataView";
 
 export default function FlowManagementPage() {
   const router = useRouter();
@@ -55,9 +56,7 @@ export default function FlowManagementPage() {
   const [openTableCombobox, setOpenTableCombobox] = useState(false);
   // 데이터 소스 타입: "internal" (내부 DB), "external_db_숫자" (외부 DB), "restapi_숫자" (REST API)
   const [selectedDbSource, setSelectedDbSource] = useState<string>("internal");
-  const [externalConnections, setExternalConnections] = useState<
-    Array<{ id: number; connection_name: string; db_type: string }>
-  >([]);
+  const [externalConnections, setExternalConnections] = useState<ExternalDbConnection[]>([]);
   const [externalTableList, setExternalTableList] = useState<string[]>([]);
   const [loadingExternalTables, setLoadingExternalTables] = useState(false);
 
@@ -254,7 +253,7 @@ export default function FlowManagementPage() {
           .map((t: string | { tableName?: string; table_name?: string; tablename?: string; name?: string }) =>
             typeof t === "string" ? t : t.tableName || t.table_name || t.tablename || t.name,
           )
-          .filter(Boolean);
+          .filter((v): v is string => Boolean(v));
         setMultiDbTableLists(prev => ({ ...prev, [connectionId]: tableNames }));
       }
     } catch (error) {
@@ -446,7 +445,7 @@ export default function FlowManagementPage() {
       }
 
       console.log("✅ Calling createFlowDefinition with:", requestData);
-      const response = await createFlowDefinition(requestData as Parameters<typeof createFlowDefinition>[0]);
+      const response = await createFlowDefinition(requestData as unknown as Parameters<typeof createFlowDefinition>[0]);
       if (response.success && response.data) {
         toast({
           title: "생성 완료",
@@ -513,6 +512,81 @@ export default function FlowManagementPage() {
     router.push(`/admin/flow-management/${flowId}`);
   };
 
+  // 검색 필터 상태
+  const [searchText, setSearchText] = useState("");
+
+  // 검색 필터링된 플로우 목록
+  const filteredFlows = searchText
+    ? flows.filter(
+        (f) =>
+          f.name.toLowerCase().includes(searchText.toLowerCase()) ||
+          f.tableName?.toLowerCase().includes(searchText.toLowerCase()) ||
+          f.description?.toLowerCase().includes(searchText.toLowerCase()),
+      )
+    : flows;
+
+  // ResponsiveDataView 컬럼 정의
+  const columns: RDVColumn<FlowDefinition>[] = [
+    {
+      key: "name",
+      label: "플로우명",
+      render: (_v, row) => (
+        <div className="flex items-center gap-2">
+          <button
+            onClick={() => handleEdit(row.id)}
+            className="hover:text-primary truncate text-left font-medium transition-colors hover:underline"
+          >
+            {row.name}
+          </button>
+          {row.isActive && (
+            <Badge variant="default" className="shrink-0">활성</Badge>
+          )}
+        </div>
+      ),
+    },
+    {
+      key: "description",
+      label: "설명",
+      render: (_v, row) => (
+        <span className="text-muted-foreground line-clamp-1">
+          {row.description || "-"}
+        </span>
+      ),
+    },
+    {
+      key: "tableName",
+      label: "연결 테이블",
+      render: (_v, row) => (
+        <span className="text-muted-foreground font-mono text-xs">{row.tableName}</span>
+      ),
+    },
+    {
+      key: "createdBy",
+      label: "생성자",
+      width: "120px",
+    },
+    {
+      key: "updatedAt",
+      label: "수정일",
+      width: "120px",
+      render: (_v, row) => new Date(row.updatedAt).toLocaleDateString("ko-KR"),
+    },
+  ];
+
+  // 모바일 카드 필드 정의
+  const cardFields: RDVCardField<FlowDefinition>[] = [
+    { label: "설명", render: (f) => f.description || "-" },
+    {
+      label: "테이블",
+      render: (f) => <span className="font-mono text-xs">{f.tableName}</span>,
+    },
+    { label: "생성자", render: (f) => f.createdBy },
+    {
+      label: "수정일",
+      render: (f) => new Date(f.updatedAt).toLocaleDateString("ko-KR"),
+    },
+  ];
+
   return (
     <div className="bg-background flex min-h-screen flex-col">
       <div className="space-y-6 p-4 sm:p-6">
@@ -522,123 +596,74 @@ export default function FlowManagementPage() {
           <p className="text-muted-foreground text-sm">업무 프로세스 플로우를 생성하고 관리합니다</p>
         </div>
 
-        {/* 액션 버튼 영역 */}
-        <div className="flex items-center justify-end">
+        {/* 검색 툴바 (반응형) */}
+        <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+          <div className="flex items-center gap-4">
+            <div className="relative w-full sm:w-[300px]">
+              <Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
+              <Input
+                placeholder="플로우명, 테이블, 설명으로 검색..."
+                value={searchText}
+                onChange={(e) => setSearchText(e.target.value)}
+                className="h-10 pl-10 text-sm"
+              />
+            </div>
+            <div className="text-muted-foreground hidden text-sm sm:block">
+              총 <span className="text-foreground font-semibold">{filteredFlows.length}</span> 건
+            </div>
+          </div>
           <Button onClick={() => setIsCreateDialogOpen(true)} className="h-10 gap-2 text-sm font-medium">
             <Plus className="h-4 w-4" />새 플로우 생성
           </Button>
         </div>
 
-        {/* 플로우 카드 목록 */}
-        {loading ? (
-          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-            {Array.from({ length: 6 }).map((_, index) => (
-              <div key={index} className="bg-card rounded-lg border p-6 shadow-sm">
-                <div className="mb-4 space-y-2">
-                  <div className="bg-muted h-5 w-32 animate-pulse rounded"></div>
-                  <div className="bg-muted h-4 w-full animate-pulse rounded"></div>
-                  <div className="bg-muted h-4 w-3/4 animate-pulse rounded"></div>
-                </div>
-                <div className="space-y-2 border-t pt-4">
-                  {Array.from({ length: 3 }).map((_, i) => (
-                    <div key={i} className="flex items-center gap-2">
-                      <div className="bg-muted h-4 w-4 animate-pulse rounded"></div>
-                      <div className="bg-muted h-4 flex-1 animate-pulse rounded"></div>
-                    </div>
-                  ))}
-                </div>
-                <div className="mt-4 flex gap-2 border-t pt-4">
-                  <div className="bg-muted h-9 flex-1 animate-pulse rounded"></div>
-                  <div className="bg-muted h-9 w-9 animate-pulse rounded"></div>
-                </div>
-              </div>
-            ))}
-          </div>
-        ) : flows.length === 0 ? (
-          <div className="bg-card flex h-64 flex-col items-center justify-center rounded-lg border shadow-sm">
-            <div className="flex flex-col items-center gap-2 text-center">
-              <div className="bg-muted flex h-16 w-16 items-center justify-center rounded-full">
-                <Workflow className="text-muted-foreground h-8 w-8" />
-              </div>
-              <h3 className="text-lg font-semibold">생성된 플로우가 없습니다</h3>
-              <p className="text-muted-foreground max-w-sm text-sm">
-                새 플로우를 생성하여 업무 프로세스를 관리해보세요.
-              </p>
-              <Button onClick={() => setIsCreateDialogOpen(true)} className="mt-4 h-10 gap-2 text-sm font-medium">
-                <Plus className="h-4 w-4" />첫 플로우 만들기
-              </Button>
-            </div>
-          </div>
-        ) : (
-          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-            {flows.map((flow) => (
-              <div
-                key={flow.id}
-                className="bg-card hover:bg-muted/50 cursor-pointer rounded-lg border p-6 shadow-sm transition-colors"
-                onClick={() => handleEdit(flow.id)}
+        {/* 플로우 목록 (ResponsiveDataView) */}
+        <ResponsiveDataView<FlowDefinition>
+          data={filteredFlows}
+          columns={columns}
+          keyExtractor={(f) => String(f.id)}
+          isLoading={loading}
+          emptyMessage="생성된 플로우가 없습니다."
+          skeletonCount={6}
+          cardTitle={(f) => f.name}
+          cardSubtitle={(f) => f.description || "설명 없음"}
+          cardHeaderRight={(f) =>
+            f.isActive ? (
+              <Badge variant="default" className="shrink-0">활성</Badge>
+            ) : null
+          }
+          cardFields={cardFields}
+          onRowClick={(f) => handleEdit(f.id)}
+          renderActions={(f) => (
+            <>
+              <Button
+                variant="outline"
+                size="sm"
+                className="h-9 flex-1 gap-2 text-sm"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  handleEdit(f.id);
+                }}
               >
-                {/* 헤더 */}
-                <div className="mb-4 flex items-start justify-between">
-                  <div className="min-w-0 flex-1">
-                    <div className="flex items-center gap-2">
-                      <h3 className="truncate text-base font-semibold">{flow.name}</h3>
-                      {flow.isActive && (
-                        <Badge className="shrink-0 bg-emerald-500 text-white hover:bg-emerald-600">활성</Badge>
-                      )}
-                    </div>
-                    <p className="text-muted-foreground mt-1 line-clamp-2 text-sm">{flow.description || "설명 없음"}</p>
-                  </div>
-                </div>
-
-                {/* 정보 */}
-                <div className="space-y-2 border-t pt-4">
-                  <div className="flex items-center gap-2 text-sm">
-                    <Table className="text-muted-foreground h-4 w-4 shrink-0" />
-                    <span className="text-muted-foreground truncate">{flow.tableName}</span>
-                  </div>
-                  <div className="flex items-center gap-2 text-sm">
-                    <User className="text-muted-foreground h-4 w-4 shrink-0" />
-                    <span className="text-muted-foreground truncate">생성자: {flow.createdBy}</span>
-                  </div>
-                  <div className="flex items-center gap-2 text-sm">
-                    <Calendar className="text-muted-foreground h-4 w-4 shrink-0" />
-                    <span className="text-muted-foreground">
-                      {new Date(flow.updatedAt).toLocaleDateString("ko-KR")}
-                    </span>
-                  </div>
-                </div>
-
-                {/* 액션 */}
-                <div className="mt-4 flex gap-2 border-t pt-4">
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    className="h-9 flex-1 gap-2 text-sm"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      handleEdit(flow.id);
-                    }}
-                  >
-                    <Edit2 className="h-4 w-4" />
-                    편집
-                  </Button>
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    className="h-9 w-9 p-0"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      setSelectedFlow(flow);
-                      setIsDeleteDialogOpen(true);
-                    }}
-                  >
-                    <Trash2 className="h-4 w-4" />
-                  </Button>
-                </div>
-              </div>
-            ))}
-          </div>
-        )}
+                <Edit2 className="h-4 w-4" />
+                편집
+              </Button>
+              <Button
+                variant="outline"
+                size="sm"
+                className="h-9 w-9 p-0"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setSelectedFlow(f);
+                  setIsDeleteDialogOpen(true);
+                }}
+              >
+                <Trash2 className="h-4 w-4" />
+              </Button>
+            </>
+          )}
+          actionsWidth="160px"
+        />
 
         {/* 생성 다이얼로그 */}
         <Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
@@ -996,7 +1021,7 @@ export default function FlowManagementPage() {
                                     <div className="flex flex-col">
                                       <span className="font-medium">{table.displayName || table.tableName}</span>
                                       {table.description && (
-                                        <span className="text-[10px] text-gray-500">{table.description}</span>
+                                        <span className="text-[10px] text-muted-foreground">{table.description}</span>
                                       )}
                                     </div>
                                   </CommandItem>
diff --git a/frontend/app/(main)/admin/automaticMng/mail/bulk-send/page.tsx b/frontend/app/(main)/admin/automaticMng/mail/bulk-send/page.tsx
index e6a85942..4dc9626d 100644
--- a/frontend/app/(main)/admin/automaticMng/mail/bulk-send/page.tsx
+++ b/frontend/app/(main)/admin/automaticMng/mail/bulk-send/page.tsx
@@ -409,7 +409,7 @@ example2@example.com,김철수,XYZ회사`;
                 {recipients.length > 0 && (
                   <div className="rounded-md border bg-muted p-4">
                     <div className="flex items-center gap-2 text-sm">
-                      <CheckCircle2 className="h-4 w-4 text-green-600" />
+                      <CheckCircle2 className="h-4 w-4 text-emerald-600" />
                       <span className="font-medium">{recipients.length}명의 수신자</span>
                     </div>
                     <p className="mt-1 text-xs text-muted-foreground">
diff --git a/frontend/app/(main)/admin/automaticMng/mail/dashboardList/page.tsx b/frontend/app/(main)/admin/automaticMng/mail/dashboardList/page.tsx
index b51a464f..a6d48424 100644
--- a/frontend/app/(main)/admin/automaticMng/mail/dashboardList/page.tsx
+++ b/frontend/app/(main)/admin/automaticMng/mail/dashboardList/page.tsx
@@ -101,8 +101,8 @@ export default function MailDashboardPage() {
       value: stats.totalAccounts,
       icon: Users,
       color: "blue",
-      bgColor: "bg-blue-100",
-      iconColor: "text-blue-600",
+      bgColor: "bg-primary/10",
+      iconColor: "text-primary",
       href: "/admin/mail/accounts",
     },
     {
@@ -110,8 +110,8 @@ export default function MailDashboardPage() {
       value: stats.totalTemplates,
       icon: FileText,
       color: "green",
-      bgColor: "bg-green-100",
-      iconColor: "text-green-600",
+      bgColor: "bg-emerald-100",
+      iconColor: "text-emerald-600",
       href: "/admin/mail/templates",
     },
     {
@@ -119,8 +119,8 @@ export default function MailDashboardPage() {
       value: stats.sentToday,
       icon: Send,
       color: "orange",
-      bgColor: "bg-orange-100",
-      iconColor: "text-orange-600",
+      bgColor: "bg-amber-100",
+      iconColor: "text-amber-600",
       href: "/admin/mail/sent",
     },
     {
diff --git a/frontend/app/(main)/admin/automaticMng/mail/receive/page.tsx b/frontend/app/(main)/admin/automaticMng/mail/receive/page.tsx
index bcb2775b..9e11fca7 100644
--- a/frontend/app/(main)/admin/automaticMng/mail/receive/page.tsx
+++ b/frontend/app/(main)/admin/automaticMng/mail/receive/page.tsx
@@ -438,8 +438,8 @@ export default function MailReceivePage() {
               <div
                 className={`mt-4 p-3 rounded-lg flex items-center gap-2 ${
                   testResult.success
-                    ? "bg-green-50 text-green-800 border border-green-200"
-                    : "bg-red-50 text-red-800 border border-red-200"
+                    ? "bg-emerald-50 text-emerald-800 border border-emerald-200"
+                    : "bg-destructive/10 text-red-800 border border-destructive/20"
                 }`}
               >
                 {testResult.success ? (
@@ -460,7 +460,7 @@ export default function MailReceivePage() {
               <div className="flex flex-col md:flex-row gap-3">
                 {/* 검색 */}
                 <div className="flex-1 relative">
-                  <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
+                  <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground/70" />
                   <input
                     type="text"
                     value={searchTerm}
@@ -511,7 +511,7 @@ export default function MailReceivePage() {
                   {filteredAndSortedMails.length}개의 메일이 검색되었습니다
                   {searchTerm && (
                     <span className="ml-2">
-                      (검색어: <span className="font-medium text-orange-600">{searchTerm}</span>)
+                      (검색어: <span className="font-medium text-amber-600">{searchTerm}</span>)
                     </span>
                   )}
                 </div>
@@ -527,14 +527,14 @@ export default function MailReceivePage() {
             {loading ? (
               <Card className="">
                 <CardContent className="flex justify-center items-center py-16">
-                  <Loader2 className="w-8 h-8 animate-spin text-orange-500" />
+                  <Loader2 className="w-8 h-8 animate-spin text-amber-500" />
                   <span className="ml-3 text-muted-foreground">메일을 불러오는 중...</span>
                 </CardContent>
               </Card>
             ) : filteredAndSortedMails.length === 0 ? (
               <Card className="text-center py-16 bg-card ">
                 <CardContent className="pt-6">
-                  <Mail className="w-16 h-16 mx-auto mb-4 text-gray-300" />
+                  <Mail className="w-16 h-16 mx-auto mb-4 text-muted-foreground/50" />
                   <p className="text-muted-foreground mb-4">
                     {!selectedAccountId
                       ? "메일 계정을 선택하세요"
@@ -560,9 +560,9 @@ export default function MailReceivePage() {
               </Card>
             ) : (
               <Card className="">
-                <CardHeader className="bg-gradient-to-r from-slate-50 to-gray-50 border-b">
+                <CardHeader className="bg-gradient-to-r from-slate-50 to-muted border-b">
                   <CardTitle className="flex items-center gap-2">
-                    <Inbox className="w-5 h-5 text-orange-500" />
+                    <Inbox className="w-5 h-5 text-amber-500" />
                     받은 메일함 ({filteredAndSortedMails.length}/{mails.length}개)
                   </CardTitle>
                 </CardHeader>
@@ -573,14 +573,14 @@ export default function MailReceivePage() {
                         key={mail.id}
                         onClick={() => handleMailClick(mail)}
                         className={`p-4 hover:bg-background transition-colors cursor-pointer ${
-                          !mail.isRead ? "bg-blue-50/30" : ""
+                          !mail.isRead ? "bg-primary/10/30" : ""
                         } ${selectedMailId === mail.id ? "bg-accent border-l-4 border-l-primary" : ""}`}
                       >
                         <div className="flex items-start gap-4">
                           {/* 읽음 표시 */}
                           <div className="flex-shrink-0 w-2 h-2 mt-2">
                             {!mail.isRead && (
-                              <div className="w-2 h-2 bg-blue-500 rounded-full"></div>
+                              <div className="w-2 h-2 bg-primary rounded-full"></div>
                             )}
                           </div>
 
@@ -598,7 +598,7 @@ export default function MailReceivePage() {
                               </span>
                               <div className="flex items-center gap-2">
                                 {mail.hasAttachments && (
-                                  <Paperclip className="w-4 h-4 text-gray-400" />
+                                  <Paperclip className="w-4 h-4 text-muted-foreground/70" />
                                 )}
                                 <span className="text-xs text-muted-foreground">
                                   {formatDate(mail.date)}
@@ -882,14 +882,14 @@ export default function MailReceivePage() {
             ) : loadingDetail ? (
               <Card className="sticky top-6">
                 <CardContent className="flex justify-center items-center py-16">
-                  <Loader2 className="w-8 h-8 animate-spin text-orange-500" />
+                  <Loader2 className="w-8 h-8 animate-spin text-amber-500" />
                   <span className="ml-3 text-muted-foreground">메일을 불러오는 중...</span>
                 </CardContent>
               </Card>
             ) : (
               <Card className="sticky top-6">
                 <CardContent className="flex flex-col justify-center items-center py-16 text-center">
-                  <Mail className="w-16 h-16 mb-4 text-gray-300" />
+                  <Mail className="w-16 h-16 mb-4 text-muted-foreground/50" />
                   <p className="text-muted-foreground">
                     메일을 선택하면 내용이 표시됩니다
                   </p>
@@ -900,10 +900,10 @@ export default function MailReceivePage() {
         </div>
 
         {/* 안내 정보 */}
-        <Card className="bg-gradient-to-r from-green-50 to-emerald-50 border-green-200 ">
+        <Card className="bg-gradient-to-r from-green-50 to-emerald-50 border-emerald-200 ">
           <CardHeader>
             <CardTitle className="text-lg flex items-center">
-              <CheckCircle className="w-5 h-5 mr-2 text-green-600" />
+              <CheckCircle className="w-5 h-5 mr-2 text-emerald-600" />
               메일 수신 기능 완성! 🎉
             </CardTitle>
           </CardHeader>
@@ -913,81 +913,81 @@ export default function MailReceivePage() {
             </p>
             <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
               <div>
-                <p className="font-medium text-gray-800 mb-2">📬 기본 기능</p>
+                <p className="font-medium text-foreground mb-2">📬 기본 기능</p>
                 <ul className="space-y-1 text-sm text-muted-foreground">
                   <li className="flex items-start">
-                    <span className="text-green-500 mr-2">✓</span>
+                    <span className="text-emerald-500 mr-2">✓</span>
                     <span>IMAP 프로토콜 메일 수신</span>
                   </li>
                   <li className="flex items-start">
-                    <span className="text-green-500 mr-2">✓</span>
+                    <span className="text-emerald-500 mr-2">✓</span>
                     <span>메일 목록 표시</span>
                   </li>
                   <li className="flex items-start">
-                    <span className="text-green-500 mr-2">✓</span>
+                    <span className="text-emerald-500 mr-2">✓</span>
                     <span>읽음/안읽음 상태</span>
                   </li>
                   <li className="flex items-start">
-                    <span className="text-green-500 mr-2">✓</span>
+                    <span className="text-emerald-500 mr-2">✓</span>
                     <span>첨부파일 유무 표시</span>
                   </li>
                 </ul>
               </div>
               <div>
-                <p className="font-medium text-gray-800 mb-2">📄 상세보기</p>
+                <p className="font-medium text-foreground mb-2">📄 상세보기</p>
                 <ul className="space-y-1 text-sm text-muted-foreground">
                   <li className="flex items-start">
-                    <span className="text-green-500 mr-2">✓</span>
+                    <span className="text-emerald-500 mr-2">✓</span>
                     <span>HTML 본문 렌더링</span>
                   </li>
                   <li className="flex items-start">
-                    <span className="text-green-500 mr-2">✓</span>
+                    <span className="text-emerald-500 mr-2">✓</span>
                     <span>텍스트 본문 보기</span>
                   </li>
                   <li className="flex items-start">
-                    <span className="text-green-500 mr-2">✓</span>
+                    <span className="text-emerald-500 mr-2">✓</span>
                     <span>자동 읽음 처리</span>
                   </li>
                   <li className="flex items-start">
-                    <span className="text-green-500 mr-2">✓</span>
+                    <span className="text-emerald-500 mr-2">✓</span>
                     <span>첨부파일 다운로드</span>
                   </li>
                 </ul>
               </div>
               <div>
-                <p className="font-medium text-gray-800 mb-2">🔍 고급 기능</p>
+                <p className="font-medium text-foreground mb-2">🔍 고급 기능</p>
                 <ul className="space-y-1 text-sm text-muted-foreground">
                   <li className="flex items-start">
-                    <span className="text-green-500 mr-2">✓</span>
+                    <span className="text-emerald-500 mr-2">✓</span>
                     <span>통합 검색 (제목/발신자/내용)</span>
                   </li>
                   <li className="flex items-start">
-                    <span className="text-green-500 mr-2">✓</span>
+                    <span className="text-emerald-500 mr-2">✓</span>
                     <span>필터링 (읽음/첨부파일)</span>
                   </li>
                   <li className="flex items-start">
-                    <span className="text-green-500 mr-2">✓</span>
+                    <span className="text-emerald-500 mr-2">✓</span>
                     <span>정렬 (날짜/발신자)</span>
                   </li>
                   <li className="flex items-start">
-                    <span className="text-green-500 mr-2">✓</span>
+                    <span className="text-emerald-500 mr-2">✓</span>
                     <span>자동 새로고침 (30초)</span>
                   </li>
                 </ul>
               </div>
               <div>
-                <p className="font-medium text-gray-800 mb-2">🔒 보안</p>
+                <p className="font-medium text-foreground mb-2">🔒 보안</p>
                 <ul className="space-y-1 text-sm text-muted-foreground">
                   <li className="flex items-start">
-                    <span className="text-green-500 mr-2">✓</span>
+                    <span className="text-emerald-500 mr-2">✓</span>
                     <span>XSS 방지 (DOMPurify)</span>
                   </li>
                   <li className="flex items-start">
-                    <span className="text-green-500 mr-2">✓</span>
+                    <span className="text-emerald-500 mr-2">✓</span>
                     <span>비밀번호 암호화</span>
                   </li>
                   <li className="flex items-start">
-                    <span className="text-green-500 mr-2">✓</span>
+                    <span className="text-emerald-500 mr-2">✓</span>
                     <span>안전한 파일명 생성</span>
                   </li>
                 </ul>
diff --git a/frontend/app/(main)/admin/automaticMng/mail/send/page.tsx b/frontend/app/(main)/admin/automaticMng/mail/send/page.tsx
index cdd8feae..ad80ff48 100644
--- a/frontend/app/(main)/admin/automaticMng/mail/send/page.tsx
+++ b/frontend/app/(main)/admin/automaticMng/mail/send/page.tsx
@@ -516,12 +516,12 @@ ${data.originalBody}`;
       toast({
         title: (
           <div className="flex items-center gap-2">
-            <CheckCircle2 className="w-5 h-5 text-green-500" />
+            <CheckCircle2 className="w-5 h-5 text-emerald-500" />
             <span>메일 발송 완료!</span>
           </div>
         ) as any,
         description: `${to.length}명${cc.length > 0 ? ` (참조 ${cc.length}명)` : ""}${bcc.length > 0 ? ` (숨은참조 ${bcc.length}명)` : ""}${attachments.length > 0 ? ` (첨부파일 ${attachments.length}개)` : ""}에게 메일이 성공적으로 발송되었습니다.`,
-        className: "border-green-500 bg-green-50",
+        className: "border-emerald-500 bg-emerald-50",
       });
 
       // 알림 갱신 이벤트 발생
@@ -544,7 +544,7 @@ ${data.originalBody}`;
       toast({
         title: (
           <div className="flex items-center gap-2">
-            <AlertCircle className="w-5 h-5 text-red-500" />
+            <AlertCircle className="w-5 h-5 text-destructive" />
             <span>메일 발송 실패</span>
           </div>
         ) as any,
@@ -781,7 +781,7 @@ ${data.originalBody}`;
                   </>
                 ) : (
                   <>
-                    <CheckCircle2 className="w-4 h-4 text-green-500" />
+                    <CheckCircle2 className="w-4 h-4 text-emerald-500" />
                     <span>
                       {new Date(lastSaved).toLocaleTimeString('ko-KR', {
                         hour: '2-digit',
@@ -895,7 +895,7 @@ ${data.originalBody}`;
                     {to.map((email) => (
                       <div
                         key={email}
-                        className="flex items-center gap-1 px-2 py-1 bg-blue-100 text-blue-700 rounded-md text-sm"
+                        className="flex items-center gap-1 px-2 py-1 bg-primary/10 text-primary rounded-md text-sm"
                       >
                         <span>{email}</span>
                         <button
@@ -933,12 +933,12 @@ ${data.originalBody}`;
                     {cc.map((email) => (
                       <div
                         key={email}
-                        className="flex items-center gap-1 px-2 py-1 bg-green-100 text-green-700 rounded-md text-sm"
+                        className="flex items-center gap-1 px-2 py-1 bg-emerald-100 text-emerald-700 rounded-md text-sm"
                       >
                         <span>{email}</span>
                         <button
                           onClick={() => removeEmail(email, "cc")}
-                          className="hover:bg-green-200 rounded p-0.5"
+                          className="hover:bg-emerald-200 rounded p-0.5"
                         >
                           <X className="w-3 h-3" />
                         </button>
@@ -1222,7 +1222,7 @@ ${data.originalBody}`;
                                 <div 
                                   key={component.id} 
                                   style={{ height: `${component.height || 20}px` }}
-                                  className="bg-background rounded flex items-center justify-center text-xs text-gray-400"
+                                  className="bg-background rounded flex items-center justify-center text-xs text-muted-foreground/70"
                                 >
                                   여백
                                 </div>
@@ -1236,7 +1236,7 @@ ${data.originalBody}`;
                                       {component.logoSrc && <img src={component.logoSrc} alt="로고" className="h-10" />}
                                       <span className="font-bold text-lg">{component.brandName}</span>
                                     </div>
-                                    <span className="text-sm text-gray-500">{component.sendDate}</span>
+                                    <span className="text-sm text-muted-foreground">{component.sendDate}</span>
                                   </div>
                                 </div>
                               );
@@ -1245,13 +1245,13 @@ ${data.originalBody}`;
                               return (
                                 <div key={component.id} className="border rounded-lg overflow-hidden">
                                   {component.tableTitle && (
-                                    <div className="bg-gray-50 px-4 py-2 font-semibold border-b">{component.tableTitle}</div>
+                                    <div className="bg-muted px-4 py-2 font-semibold border-b">{component.tableTitle}</div>
                                   )}
                                   <table className="w-full">
                                     <tbody>
                                       {component.rows?.map((row: any, i: number) => (
-                                        <tr key={i} className={i % 2 === 0 ? 'bg-white' : 'bg-gray-50'}>
-                                          <td className="px-4 py-2 font-medium text-gray-600 w-1/3 border-r">{row.label}</td>
+                                        <tr key={i} className={i % 2 === 0 ? 'bg-white' : 'bg-muted'}>
+                                          <td className="px-4 py-2 font-medium text-muted-foreground w-1/3 border-r">{row.label}</td>
                                           <td className="px-4 py-2">{row.value}</td>
                                         </tr>
                                       ))}
@@ -1263,9 +1263,9 @@ ${data.originalBody}`;
                             case 'alertBox':
                               return (
                                 <div key={component.id} className={`p-4 rounded-lg border-l-4 ${
-                                  component.alertType === 'info' ? 'bg-blue-50 border-blue-500 text-blue-800' :
+                                  component.alertType === 'info' ? 'bg-primary/10 border-primary text-primary' :
                                   component.alertType === 'warning' ? 'bg-amber-50 border-amber-500 text-amber-800' :
-                                  component.alertType === 'danger' ? 'bg-red-50 border-red-500 text-red-800' :
+                                  component.alertType === 'danger' ? 'bg-destructive/10 border-destructive text-red-800' :
                                   'bg-emerald-50 border-emerald-500 text-emerald-800'
                                 }`}>
                                   {component.alertTitle && <div className="font-bold mb-1">{component.alertTitle}</div>}
@@ -1275,13 +1275,13 @@ ${data.originalBody}`;
 
                             case 'divider':
                               return (
-                                <hr key={component.id} className="border-gray-300" style={{ borderWidth: `${component.height || 1}px` }} />
+                                <hr key={component.id} className="border-input" style={{ borderWidth: `${component.height || 1}px` }} />
                               );
 
                             case 'footer':
                               return (
-                                <div key={component.id} className="text-center text-sm text-gray-500 py-4 border-t bg-gray-50">
-                                  {component.companyName && <div className="font-semibold text-gray-700">{component.companyName}</div>}
+                                <div key={component.id} className="text-center text-sm text-muted-foreground py-4 border-t bg-muted">
+                                  {component.companyName && <div className="font-semibold text-foreground">{component.companyName}</div>}
                                   {(component.ceoName || component.businessNumber) && (
                                     <div className="mt-1">
                                       {component.ceoName && <span>대표: {component.ceoName}</span>}
@@ -1297,7 +1297,7 @@ ${data.originalBody}`;
                                       {component.email && <span>Email: {component.email}</span>}
                                     </div>
                                   )}
-                                  {component.copyright && <div className="mt-2 text-xs text-gray-400">{component.copyright}</div>}
+                                  {component.copyright && <div className="mt-2 text-xs text-muted-foreground/70">{component.copyright}</div>}
                                 </div>
                               );
 
@@ -1318,9 +1318,9 @@ ${data.originalBody}`;
                           }
                         })}
                       </div>
-                      <div className="bg-gradient-to-r from-green-50 to-emerald-50 px-4 py-3 border-t border-green-200">
-                        <p className="text-sm text-green-800 flex items-center gap-2 font-medium">
-                          <CheckCircle2 className="w-4 h-4 text-green-600" />
+                      <div className="bg-gradient-to-r from-green-50 to-emerald-50 px-4 py-3 border-t border-emerald-200">
+                        <p className="text-sm text-emerald-800 flex items-center gap-2 font-medium">
+                          <CheckCircle2 className="w-4 h-4 text-emerald-600" />
                           위 내용으로 메일이 발송됩니다
                         </p>
                       </div>
@@ -1396,7 +1396,7 @@ ${data.originalBody}`;
                   onChange={handleFileSelect}
                   className="hidden"
                 />
-                <Upload className="w-12 h-12 mx-auto text-gray-400 mb-3" />
+                <Upload className="w-12 h-12 mx-auto text-muted-foreground/70 mb-3" />
                 <p className="text-sm text-muted-foreground mb-1">
                   파일을 드래그하거나 클릭하여 선택하세요
                 </p>
@@ -1430,7 +1430,7 @@ ${data.originalBody}`;
                           variant="ghost"
                           size="sm"
                           onClick={() => removeFile(index)}
-                          className="flex-shrink-0 text-red-500 hover:text-red-600 hover:bg-red-50"
+                          className="flex-shrink-0 text-destructive hover:text-destructive hover:bg-destructive/10"
                         >
                           <X className="w-4 h-4" />
                         </Button>
@@ -1530,7 +1530,7 @@ ${data.originalBody}`;
                             <div key={index} className="flex items-center gap-2 text-xs text-muted-foreground">
                               <File className="w-3 h-3" />
                               <span className="truncate">{file.name}</span>
-                              <span className="text-gray-400">({formatFileSize(file.size)})</span>
+                              <span className="text-muted-foreground/70">({formatFileSize(file.size)})</span>
                             </div>
                           ))}
                         </div>
diff --git a/frontend/app/(main)/admin/automaticMng/mail/sent/page.tsx b/frontend/app/(main)/admin/automaticMng/mail/sent/page.tsx
index 229217d2..1af1c562 100644
--- a/frontend/app/(main)/admin/automaticMng/mail/sent/page.tsx
+++ b/frontend/app/(main)/admin/automaticMng/mail/sent/page.tsx
@@ -371,8 +371,8 @@ export default function SentMailPage() {
                   {stats.successCount}
                 </p>
               </div>
-              <div className="p-3 bg-green-500/10 rounded-lg">
-                <CheckCircle2 className="w-6 h-6 text-green-600" />
+              <div className="p-3 bg-emerald-500/10 rounded-lg">
+                <CheckCircle2 className="w-6 h-6 text-emerald-600" />
               </div>
             </div>
           </CardContent>
@@ -387,8 +387,8 @@ export default function SentMailPage() {
                   {stats.failedCount}
                 </p>
               </div>
-              <div className="p-3 bg-red-500/10 rounded-lg">
-                <XCircle className="w-6 h-6 text-red-600" />
+              <div className="p-3 bg-destructive/10 rounded-lg">
+                <XCircle className="w-6 h-6 text-destructive" />
               </div>
             </div>
           </CardContent>
@@ -403,8 +403,8 @@ export default function SentMailPage() {
                   {stats.todayCount}
                 </p>
               </div>
-              <div className="p-3 bg-blue-500/10 rounded-lg">
-                <Calendar className="w-6 h-6 text-blue-600" />
+              <div className="p-3 bg-primary/10 rounded-lg">
+                <Calendar className="w-6 h-6 text-primary" />
               </div>
             </div>
           </CardContent>
diff --git a/frontend/app/(main)/admin/batch-management-new/page.tsx b/frontend/app/(main)/admin/batch-management-new/page.tsx
index 6b282ed4..b7eeb969 100644
--- a/frontend/app/(main)/admin/batch-management-new/page.tsx
+++ b/frontend/app/(main)/admin/batch-management-new/page.tsx
@@ -592,19 +592,19 @@ export default function BatchManagementNewPage() {
                 <div
                   key={option.value}
                   className={`cursor-pointer rounded-lg border p-3 transition-all ${
-                    batchType === option.value ? "border-blue-500 bg-blue-50" : "border-gray-200 hover:border-gray-300"
+                    batchType === option.value ? "border-primary bg-primary/10" : "border-border hover:border-input"
                   }`}
                   onClick={() => setBatchType(option.value)}
                 >
                   <div className="flex items-center space-x-2">
                     {option.value === "restapi-to-db" ? (
-                      <Globe className="h-4 w-4 text-blue-600" />
+                      <Globe className="h-4 w-4 text-primary" />
                     ) : (
-                      <Database className="h-4 w-4 text-green-600" />
+                      <Database className="h-4 w-4 text-emerald-600" />
                     )}
                     <div>
                       <div className="text-sm font-medium">{option.label}</div>
-                      <div className="mt-1 text-xs text-gray-500">{option.description}</div>
+                      <div className="mt-1 text-xs text-muted-foreground">{option.description}</div>
                     </div>
                   </div>
                 </div>
@@ -739,7 +739,7 @@ export default function BatchManagementNewPage() {
                       </SelectContent>
                     </Select>
                   )}
-                  <p className="mt-1 text-xs text-gray-500">
+                  <p className="mt-1 text-xs text-muted-foreground">
                     {authTokenMode === "direct"
                       ? "API 호출 시 Authorization 헤더에 사용할 토큰을 입력하세요."
                       : "auth_tokens 테이블에서 선택한 서비스의 최신 토큰을 사용합니다."}
@@ -782,7 +782,7 @@ export default function BatchManagementNewPage() {
                     onChange={(e) => setDataArrayPath(e.target.value)}
                     placeholder="response (예: data.items, results)"
                   />
-                  <p className="mt-1 text-xs text-gray-500">
+                  <p className="mt-1 text-xs text-muted-foreground">
                     API 응답에서 배열 데이터가 있는 경로를 입력하세요. 비워두면 응답 전체를 사용합니다.
                     <br />
                     예시: response, data.items, result.list
@@ -801,7 +801,7 @@ export default function BatchManagementNewPage() {
                       className="min-h-[100px]"
                       rows={5}
                     />
-                    <p className="mt-1 text-xs text-gray-500">API 호출 시 함께 전송할 JSON 데이터를 입력하세요.</p>
+                    <p className="mt-1 text-xs text-muted-foreground">API 호출 시 함께 전송할 JSON 데이터를 입력하세요.</p>
                   </div>
                 )}
 
@@ -809,7 +809,7 @@ export default function BatchManagementNewPage() {
                 <div className="space-y-4">
                   <div className="border-t pt-4">
                     <Label className="text-base font-medium">API 파라미터 설정</Label>
-                    <p className="mt-1 text-sm text-gray-600">특정 사용자나 조건으로 데이터를 조회할 때 사용합니다.</p>
+                    <p className="mt-1 text-sm text-muted-foreground">특정 사용자나 조건으로 데이터를 조회할 때 사용합니다.</p>
                   </div>
 
                   <div>
@@ -868,26 +868,26 @@ export default function BatchManagementNewPage() {
                           }
                         />
                         {apiParamSource === "dynamic" && (
-                          <p className="mt-1 text-xs text-gray-500">
+                          <p className="mt-1 text-xs text-muted-foreground">
                             동적값은 배치 실행 시 설정된 값으로 치환됩니다. 예: {"{{user_id}}"} → 실제 사용자 ID
                           </p>
                         )}
                       </div>
 
                       {apiParamType === "url" && (
-                        <div className="rounded-lg bg-blue-50 p-3">
-                          <div className="text-sm font-medium text-blue-800">URL 파라미터 예시</div>
-                          <div className="mt-1 text-sm text-blue-700">
+                        <div className="rounded-lg bg-primary/10 p-3">
+                          <div className="text-sm font-medium text-primary">URL 파라미터 예시</div>
+                          <div className="mt-1 text-sm text-primary">
                             엔드포인트: /api/users/{`{${apiParamName || "userId"}}`}
                           </div>
-                          <div className="text-sm text-blue-700">실제 호출: /api/users/{apiParamValue || "123"}</div>
+                          <div className="text-sm text-primary">실제 호출: /api/users/{apiParamValue || "123"}</div>
                         </div>
                       )}
 
                       {apiParamType === "query" && (
-                        <div className="rounded-lg bg-green-50 p-3">
-                          <div className="text-sm font-medium text-green-800">쿼리 파라미터 예시</div>
-                          <div className="mt-1 text-sm text-green-700">
+                        <div className="rounded-lg bg-emerald-50 p-3">
+                          <div className="text-sm font-medium text-emerald-800">쿼리 파라미터 예시</div>
+                          <div className="mt-1 text-sm text-emerald-700">
                             실제 호출: {fromEndpoint || "/api/users"}?{apiParamName || "userId"}=
                             {apiParamValue || "123"}
                           </div>
@@ -899,9 +899,9 @@ export default function BatchManagementNewPage() {
 
                 {/* API 호출 미리보기 정보 */}
                 {fromApiUrl && fromEndpoint && (
-                  <div className="rounded-lg bg-gray-50 p-3">
-                    <div className="text-sm font-medium text-gray-700">API 호출 정보</div>
-                    <div className="mt-1 text-sm text-gray-600">
+                  <div className="rounded-lg bg-muted p-3">
+                    <div className="text-sm font-medium text-foreground">API 호출 정보</div>
+                    <div className="mt-1 text-sm text-muted-foreground">
                       {fromApiMethod} {fromApiUrl}
                       {apiParamType === "url" && apiParamName && apiParamValue
                         ? fromEndpoint.replace(`{${apiParamName}}`, apiParamValue) || fromEndpoint + `/${apiParamValue}`
@@ -911,14 +911,14 @@ export default function BatchManagementNewPage() {
                         : ""}
                     </div>
                     {((authTokenMode === "direct" && fromApiKey) || (authTokenMode === "db" && authServiceName)) && (
-                      <div className="mt-1 text-xs text-gray-500">
+                      <div className="mt-1 text-xs text-muted-foreground">
                         {authTokenMode === "direct"
                           ? `Authorization: Bearer ${fromApiKey.substring(0, 15)}...`
                           : `Authorization: DB 토큰 (${authServiceName})`}
                       </div>
                     )}
                     {apiParamType !== "none" && apiParamName && apiParamValue && (
-                      <div className="mt-1 text-xs text-blue-600">
+                      <div className="mt-1 text-xs text-primary">
                         파라미터: {apiParamName} = {apiParamValue} ({apiParamSource === "static" ? "고정값" : "동적값"})
                       </div>
                     )}
@@ -988,7 +988,7 @@ export default function BatchManagementNewPage() {
                                 setSelectedColumns(selectedColumns.filter((col) => col !== column.column_name));
                               }
                             }}
-                            className="rounded border-gray-300"
+                            className="rounded border-input"
                           />
                           <label
                             htmlFor={`col-${column.column_name}`}
@@ -1002,14 +1002,14 @@ export default function BatchManagementNewPage() {
                     </div>
 
                     {/* 선택된 컬럼 개수 표시 */}
-                    <div className="mt-2 text-xs text-gray-500">
+                    <div className="mt-2 text-xs text-muted-foreground">
                       선택된 컬럼: {selectedColumns.length}개 / 전체: {fromColumns.length}개
                     </div>
 
                     {/* 빠른 매핑 버튼들 */}
                     {selectedColumns.length > 0 && toApiFields.length > 0 && (
-                      <div className="mt-3 rounded-lg border border-green-200 bg-green-50 p-3">
-                        <div className="mb-2 text-sm font-medium text-green-800">빠른 매핑</div>
+                      <div className="mt-3 rounded-lg border border-emerald-200 bg-emerald-50 p-3">
+                        <div className="mb-2 text-sm font-medium text-emerald-800">빠른 매핑</div>
                         <div className="flex flex-wrap gap-2">
                           <button
                             type="button"
@@ -1051,7 +1051,7 @@ export default function BatchManagementNewPage() {
                               setDbToApiFieldMapping(mapping);
                               toast.success(`${Object.keys(mapping).length}개 컬럼이 자동 매핑되었습니다.`);
                             }}
-                            className="rounded bg-blue-600 px-3 py-1 text-xs text-white hover:bg-blue-700"
+                            className="rounded bg-primary px-3 py-1 text-xs text-white hover:bg-primary/90"
                           >
                             스마트 자동 매핑
                           </button>
@@ -1061,7 +1061,7 @@ export default function BatchManagementNewPage() {
                               setDbToApiFieldMapping({});
                               toast.success("매핑이 초기화되었습니다.");
                             }}
-                            className="rounded bg-gray-600 px-3 py-1 text-xs text-white hover:bg-gray-700"
+                            className="rounded bg-foreground/80 px-3 py-1 text-xs text-white hover:bg-foreground/90"
                           >
                             매핑 초기화
                           </button>
@@ -1071,9 +1071,9 @@ export default function BatchManagementNewPage() {
 
                     {/* 자동 생성된 JSON 미리보기 */}
                     {selectedColumns.length > 0 && (
-                      <div className="mt-3 rounded-lg border border-blue-200 bg-blue-50 p-3">
-                        <div className="mb-2 text-sm font-medium text-blue-800">자동 생성된 JSON 구조</div>
-                        <pre className="overflow-x-auto font-mono text-xs text-blue-600">
+                      <div className="mt-3 rounded-lg border border-primary/20 bg-primary/10 p-3">
+                        <div className="mb-2 text-sm font-medium text-primary">자동 생성된 JSON 구조</div>
+                        <pre className="overflow-x-auto font-mono text-xs text-primary">
                           {JSON.stringify(
                             selectedColumns.reduce(
                               (obj, col) => {
@@ -1105,7 +1105,7 @@ export default function BatchManagementNewPage() {
                             setToApiBody(autoJson);
                             toast.success("Request Body에 자동 생성된 JSON이 적용되었습니다.");
                           }}
-                          className="mt-2 rounded bg-blue-600 px-3 py-1 text-xs text-white hover:bg-blue-700"
+                          className="mt-2 rounded bg-primary px-3 py-1 text-xs text-white hover:bg-primary/90"
                         >
                           Request Body에 적용
                         </button>
@@ -1231,7 +1231,7 @@ export default function BatchManagementNewPage() {
                       ))}
                     </SelectContent>
                   </Select>
-                  <p className="mt-1 text-xs text-gray-500">
+                  <p className="mt-1 text-xs text-muted-foreground">
                     이 컬럼 값이 같으면 UPDATE, 없으면 INSERT 합니다. (예: device_serial_number)
                   </p>
                 </div>
@@ -1273,7 +1273,7 @@ export default function BatchManagementNewPage() {
                     placeholder="/api/users"
                   />
                   {(toApiMethod === "PUT" || toApiMethod === "DELETE") && (
-                    <p className="mt-1 text-xs text-gray-500">
+                    <p className="mt-1 text-xs text-muted-foreground">
                       실제 URL: {toEndpoint}/{urlPathColumn ? `{${urlPathColumn}}` : "{ID}"}
                     </p>
                   )}
@@ -1310,7 +1310,7 @@ export default function BatchManagementNewPage() {
                         ))}
                       </SelectContent>
                     </Select>
-                    <p className="mt-1 text-xs text-gray-500">
+                    <p className="mt-1 text-xs text-muted-foreground">
                       PUT/DELETE 요청 시 URL 경로에 포함될 컬럼을 선택하세요. (예: USER_ID → /api/users/user123)
                     </p>
                   </div>
@@ -1321,7 +1321,7 @@ export default function BatchManagementNewPage() {
                   <button
                     type="button"
                     onClick={previewToApiData}
-                    className="flex items-center space-x-2 rounded-md bg-green-600 px-4 py-2 text-white hover:bg-green-700"
+                    className="flex items-center space-x-2 rounded-md bg-emerald-600 px-4 py-2 text-white hover:bg-green-700"
                   >
                     <Eye className="h-4 w-4" />
                     <span>API 필드 미리보기</span>
@@ -1330,13 +1330,13 @@ export default function BatchManagementNewPage() {
 
                 {/* TO API 필드 표시 */}
                 {toApiFields.length > 0 && (
-                  <div className="rounded-lg border border-green-200 bg-green-50 p-3">
-                    <div className="mb-2 text-sm font-medium text-green-800">
+                  <div className="rounded-lg border border-emerald-200 bg-emerald-50 p-3">
+                    <div className="mb-2 text-sm font-medium text-emerald-800">
                       API 필드 목록 ({toApiFields.length}개)
                     </div>
                     <div className="flex flex-wrap gap-2">
                       {toApiFields.map((field) => (
-                        <span key={field} className="rounded bg-green-100 px-2 py-1 text-xs text-green-700">
+                        <span key={field} className="rounded bg-emerald-100 px-2 py-1 text-xs text-emerald-700">
                           {field}
                         </span>
                       ))}
@@ -1355,7 +1355,7 @@ export default function BatchManagementNewPage() {
                       placeholder='{"id": "{{id}}", "name": "{{name}}", "email": "{{email}}"}'
                       className="h-24 w-full rounded-md border p-2 font-mono text-sm"
                     />
-                    <div className="mt-1 text-xs text-gray-500">
+                    <div className="mt-1 text-xs text-muted-foreground">
                       DB 컬럼 값을 {"{{컬럼명}}"} 형태로 매핑하세요. 예: {"{{user_id}}, {{user_name}}"}
                     </div>
                   </div>
@@ -1363,15 +1363,15 @@ export default function BatchManagementNewPage() {
 
                 {/* API 호출 정보 */}
                 {toApiUrl && toApiKey && toEndpoint && (
-                  <div className="rounded-lg bg-gray-50 p-3">
-                    <div className="text-sm font-medium text-gray-700">API 호출 정보</div>
-                    <div className="mt-1 text-sm text-gray-600">
+                  <div className="rounded-lg bg-muted p-3">
+                    <div className="text-sm font-medium text-foreground">API 호출 정보</div>
+                    <div className="mt-1 text-sm text-muted-foreground">
                       {toApiMethod} {toApiUrl}
                       {toEndpoint}
                     </div>
-                    <div className="mt-1 text-xs text-gray-500">Headers: X-API-Key: {toApiKey.substring(0, 10)}...</div>
+                    <div className="mt-1 text-xs text-muted-foreground">Headers: X-API-Key: {toApiKey.substring(0, 10)}...</div>
                     {toApiBody && (
-                      <div className="mt-1 text-xs text-blue-600">Body: {toApiBody.substring(0, 50)}...</div>
+                      <div className="mt-1 text-xs text-primary">Body: {toApiBody.substring(0, 50)}...</div>
                     )}
                   </div>
                 )}
@@ -1394,7 +1394,7 @@ export default function BatchManagementNewPage() {
             데이터 불러오고 매핑하기
           </Button>
           {(!fromApiUrl || !fromEndpoint || !toTable) && (
-            <p className="ml-4 flex items-center text-xs text-gray-500">
+            <p className="ml-4 flex items-center text-xs text-muted-foreground">
               FROM 섹션과 TO 섹션의 필수 값을 모두 입력해야 합니다.
             </p>
           )}
@@ -1693,17 +1693,17 @@ const DbToRestApiMappingCard = memo(function DbToRestApiMappingCard({
       <CardContent>
         <div className="max-h-96 space-y-3 overflow-y-auto rounded-lg border p-4">
           {selectedColumnObjects.map((column) => (
-            <div key={column.column_name} className="flex items-center space-x-4 rounded-lg bg-gray-50 p-3">
+            <div key={column.column_name} className="flex items-center space-x-4 rounded-lg bg-muted p-3">
               {/* DB 컬럼 정보 */}
               <div className="flex-1">
                 <div className="text-sm font-medium">{column.column_name}</div>
-                <div className="text-xs text-gray-500">
+                <div className="text-xs text-muted-foreground">
                   타입: {column.data_type} | NULL: {column.is_nullable ? "Y" : "N"}
                 </div>
               </div>
 
               {/* 화살표 */}
-              <div className="text-gray-400">→</div>
+              <div className="text-muted-foreground/70">→</div>
 
               {/* API 필드 선택 드롭다운 */}
               <div className="flex-1">
@@ -1735,7 +1735,7 @@ const DbToRestApiMappingCard = memo(function DbToRestApiMappingCard({
                   <input
                     type="text"
                     placeholder="API 필드명을 직접 입력하세요"
-                    className="mt-2 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
+                    className="mt-2 w-full rounded-md border border-input px-3 py-2 text-sm focus:ring-2 focus:ring-ring focus:outline-none"
                     onChange={(e) => {
                       setDbToApiFieldMapping((prev) => ({
                         ...prev,
@@ -1745,7 +1745,7 @@ const DbToRestApiMappingCard = memo(function DbToRestApiMappingCard({
                   />
                 )}
 
-                <div className="mt-1 text-xs text-gray-500">
+                <div className="mt-1 text-xs text-muted-foreground">
                   {dbToApiFieldMapping[column.column_name]
                     ? `매핑: ${column.column_name} → ${dbToApiFieldMapping[column.column_name]}`
                     : `기본값: ${column.column_name} (DB 컬럼명 사용)`}
@@ -1755,32 +1755,32 @@ const DbToRestApiMappingCard = memo(function DbToRestApiMappingCard({
               {/* 템플릿 미리보기 */}
               <div className="flex-1">
                 <div className="rounded border bg-white p-2 font-mono text-sm">{`{{${column.column_name}}}`}</div>
-                <div className="mt-1 text-xs text-gray-500">실제 DB 값으로 치환됩니다</div>
+                <div className="mt-1 text-xs text-muted-foreground">실제 DB 값으로 치환됩니다</div>
               </div>
             </div>
           ))}
         </div>
 
         {selectedColumns.length > 0 && (
-          <div className="mt-4 rounded-lg border border-blue-200 bg-blue-50 p-3">
-            <div className="text-sm font-medium text-blue-800">자동 생성된 JSON 구조</div>
-            <pre className="mt-1 overflow-x-auto font-mono text-xs text-blue-600">{autoJsonPreview}</pre>
+          <div className="mt-4 rounded-lg border border-primary/20 bg-primary/10 p-3">
+            <div className="text-sm font-medium text-primary">자동 생성된 JSON 구조</div>
+            <pre className="mt-1 overflow-x-auto font-mono text-xs text-primary">{autoJsonPreview}</pre>
             <button
               type="button"
               onClick={() => {
                 setToApiBody(autoJsonPreview);
                 toast.success("Request Body에 자동 생성된 JSON이 적용되었습니다.");
               }}
-              className="mt-2 rounded bg-blue-600 px-3 py-1 text-xs text-white hover:bg-blue-700"
+              className="mt-2 rounded bg-primary px-3 py-1 text-xs text-white hover:bg-primary/90"
             >
               Request Body에 적용
             </button>
           </div>
         )}
 
-        <div className="mt-4 rounded-lg border border-blue-200 bg-blue-50 p-3">
-          <div className="text-sm font-medium text-blue-800">매핑 사용 예시</div>
-          <div className="mt-1 font-mono text-xs text-blue-600">
+        <div className="mt-4 rounded-lg border border-primary/20 bg-primary/10 p-3">
+          <div className="text-sm font-medium text-primary">매핑 사용 예시</div>
+          <div className="mt-1 font-mono text-xs text-primary">
             {'{"id": "{{id}}", "name": "{{user_name}}", "email": "{{email}}"}'}
           </div>
         </div>
diff --git a/frontend/app/(main)/admin/batch-management/page.tsx b/frontend/app/(main)/admin/batch-management/page.tsx
index b9ed4230..d78f1c29 100644
--- a/frontend/app/(main)/admin/batch-management/page.tsx
+++ b/frontend/app/(main)/admin/batch-management/page.tsx
@@ -13,14 +13,6 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -43,6 +35,8 @@ import {
 import { toast } from "sonner";
 import { BatchAPI, BatchJob } from "@/lib/api/batch";
 import BatchJobModal from "@/components/admin/BatchJobModal";
+import { showErrorToast } from "@/lib/utils/toastUtils";
+import { ResponsiveDataView, RDVColumn, RDVCardField } from "@/components/common/ResponsiveDataView";
 
 export default function BatchManagementPage() {
   const router = useRouter();
@@ -54,7 +48,6 @@ export default function BatchManagementPage() {
   const [typeFilter, setTypeFilter] = useState("all");
   const [jobTypes, setJobTypes] = useState<Array<{ value: string; label: string }>>([]);
   
-  // 모달 상태
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [selectedJob, setSelectedJob] = useState<BatchJob | null>(null);
   const [isBatchTypeModalOpen, setIsBatchTypeModalOpen] = useState(false);
@@ -84,7 +77,7 @@ export default function BatchManagementPage() {
   const loadJobTypes = async () => {
     try {
       const types = await BatchAPI.getSupportedJobTypes();
-      setJobTypes(types);
+      setJobTypes(types.map(t => ({ value: t, label: t })));
     } catch (error) {
       console.error("작업 타입 조회 오류:", error);
     }
@@ -93,7 +86,6 @@ export default function BatchManagementPage() {
   const filterJobs = () => {
     let filtered = jobs;
 
-    // 검색어 필터
     if (searchTerm) {
       filtered = filtered.filter(job =>
         job.job_name.toLowerCase().includes(searchTerm.toLowerCase()) ||
@@ -101,12 +93,10 @@ export default function BatchManagementPage() {
       );
     }
 
-    // 상태 필터
     if (statusFilter !== "all") {
       filtered = filtered.filter(job => job.is_active === statusFilter);
     }
 
-    // 타입 필터
     if (typeFilter !== "all") {
       filtered = filtered.filter(job => job.job_type === typeFilter);
     }
@@ -123,12 +113,10 @@ export default function BatchManagementPage() {
     setIsBatchTypeModalOpen(false);
     
     if (type === 'db-to-db') {
-      // 기존 배치 생성 모달 열기
       console.log("DB → DB 배치 모달 열기");
       setSelectedJob(null);
       setIsModalOpen(true);
     } else if (type === 'restapi-to-db') {
-      // 새로운 REST API 배치 페이지로 이동
       console.log("REST API → DB 페이지로 이동:", '/admin/batch-management-new');
       router.push('/admin/batch-management-new');
     }
@@ -170,41 +158,167 @@ export default function BatchManagementPage() {
 
   const getStatusBadge = (isActive: string) => {
     return isActive === "Y" ? (
-      <Badge className="bg-green-100 text-green-800">활성</Badge>
+      <Badge variant="default">활성</Badge>
     ) : (
-      <Badge className="bg-red-100 text-red-800">비활성</Badge>
+      <Badge variant="secondary">비활성</Badge>
     );
   };
 
   const getTypeBadge = (type: string) => {
     const option = jobTypes.find(opt => opt.value === type);
-    const colors = {
-      collection: "bg-blue-100 text-blue-800",
-      sync: "bg-purple-100 text-purple-800",
-      cleanup: "bg-orange-100 text-orange-800",
-      custom: "bg-gray-100 text-gray-800",
-    };
-    
-    const icons = {
-      collection: "📥",
-      sync: "🔄",
-      cleanup: "🧹",
-      custom: "⚙️",
-    };
-
     return (
-      <Badge className={colors[type as keyof typeof colors] || "bg-gray-100 text-gray-800"}>
-        <span className="mr-1">{icons[type as keyof typeof icons] || "📋"}</span>
-        {option?.label || type}
-      </Badge>
+      <Badge variant="outline">{option?.label || type}</Badge>
     );
   };
 
   const getSuccessRate = (job: BatchJob) => {
-    if (job.execution_count === 0) return 100;
-    return Math.round((job.success_count / job.execution_count) * 100);
+    if (!job.execution_count) return 100;
+    return Math.round(((job.success_count ?? 0) / job.execution_count) * 100);
   };
 
+  const getSuccessRateColor = (rate: number) => {
+    if (rate >= 90) return 'text-success';
+    if (rate >= 70) return 'text-warning';
+    return 'text-destructive';
+  };
+
+  const columns: RDVColumn<BatchJob>[] = [
+    {
+      key: "job_name",
+      label: "작업명",
+      render: (_val, job) => (
+        <div>
+          <div className="font-medium">{job.job_name}</div>
+          {job.description && (
+            <div className="text-xs text-muted-foreground">{job.description}</div>
+          )}
+        </div>
+      ),
+    },
+    {
+      key: "job_type",
+      label: "타입",
+      hideOnMobile: true,
+      render: (_val, job) => getTypeBadge(job.job_type),
+    },
+    {
+      key: "schedule_cron",
+      label: "스케줄",
+      hideOnMobile: true,
+      render: (_val, job) => (
+        <span className="font-mono">{job.schedule_cron || "-"}</span>
+      ),
+    },
+    {
+      key: "is_active",
+      label: "상태",
+      width: "100px",
+      render: (_val, job) => getStatusBadge(job.is_active),
+    },
+    {
+      key: "execution_count",
+      label: "실행",
+      hideOnMobile: true,
+      render: (_val, job) => (
+        <div>
+          <div>총 {job.execution_count}회</div>
+          <div className="text-xs text-muted-foreground">
+            성공 {job.success_count} / 실패 {job.failure_count}
+          </div>
+        </div>
+      ),
+    },
+    {
+      key: "success_rate",
+      label: "성공률",
+      hideOnMobile: true,
+      render: (_val, job) => {
+        const rate = getSuccessRate(job);
+        return (
+          <span className={`font-medium ${getSuccessRateColor(rate)}`}>
+            {rate}%
+          </span>
+        );
+      },
+    },
+    {
+      key: "last_executed_at",
+      label: "마지막 실행",
+      render: (_val, job) => (
+        <span>
+          {job.last_executed_at
+            ? new Date(job.last_executed_at).toLocaleString()
+            : "-"}
+        </span>
+      ),
+    },
+  ];
+
+  const cardFields: RDVCardField<BatchJob>[] = [
+    {
+      label: "타입",
+      render: (job) => getTypeBadge(job.job_type),
+    },
+    {
+      label: "스케줄",
+      render: (job) => (
+        <span className="font-mono text-xs">{job.schedule_cron || "-"}</span>
+      ),
+    },
+    {
+      label: "실행 횟수",
+      render: (job) => <span className="font-medium">{job.execution_count}회</span>,
+    },
+    {
+      label: "성공률",
+      render: (job) => {
+        const rate = getSuccessRate(job);
+        return (
+          <span className={`font-medium ${getSuccessRateColor(rate)}`}>
+            {rate}%
+          </span>
+        );
+      },
+    },
+    {
+      label: "마지막 실행",
+      render: (job) => (
+        <span className="text-xs">
+          {job.last_executed_at
+            ? new Date(job.last_executed_at).toLocaleDateString()
+            : "-"}
+        </span>
+      ),
+    },
+  ];
+
+  const renderDropdownActions = (job: BatchJob) => (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" className="h-8 w-8 p-0">
+          <MoreHorizontal className="h-4 w-4" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => handleEdit(job)}>
+          <Edit className="h-4 w-4 mr-2" />
+          수정
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          onClick={() => handleExecute(job)}
+          disabled={job.is_active !== "Y"}
+        >
+          <Play className="h-4 w-4 mr-2" />
+          실행
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => handleDelete(job)}>
+          <Trash2 className="h-4 w-4 mr-2" />
+          삭제
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+
   return (
     <div className="space-y-6">
       {/* 헤더 */}
@@ -228,11 +342,10 @@ export default function BatchManagementPage() {
       </div>
 
       {/* 통계 카드 */}
-      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+      <div className="grid grid-cols-2 gap-4 lg:grid-cols-4">
         <Card>
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
             <CardTitle className="text-sm font-medium">총 작업</CardTitle>
-            <div className="text-2xl">📋</div>
           </CardHeader>
           <CardContent>
             <div className="text-2xl font-bold">{jobs.length}</div>
@@ -245,11 +358,10 @@ export default function BatchManagementPage() {
         <Card>
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
             <CardTitle className="text-sm font-medium">총 실행</CardTitle>
-            <div className="text-2xl">▶️</div>
           </CardHeader>
           <CardContent>
             <div className="text-2xl font-bold">
-              {jobs.reduce((sum, job) => sum + job.execution_count, 0)}
+              {jobs.reduce((sum, job) => sum + (job.execution_count ?? 0), 0)}
             </div>
             <p className="text-xs text-muted-foreground">누적 실행 횟수</p>
           </CardContent>
@@ -258,11 +370,10 @@ export default function BatchManagementPage() {
         <Card>
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
             <CardTitle className="text-sm font-medium">성공</CardTitle>
-            <div className="text-2xl">✅</div>
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold text-green-600">
-              {jobs.reduce((sum, job) => sum + job.success_count, 0)}
+            <div className="text-2xl font-bold text-success">
+              {jobs.reduce((sum, job) => sum + (job.success_count ?? 0), 0)}
             </div>
             <p className="text-xs text-muted-foreground">총 성공 횟수</p>
           </CardContent>
@@ -271,11 +382,10 @@ export default function BatchManagementPage() {
         <Card>
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
             <CardTitle className="text-sm font-medium">실패</CardTitle>
-            <div className="text-2xl">❌</div>
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold text-red-600">
-              {jobs.reduce((sum, job) => sum + job.failure_count, 0)}
+            <div className="text-2xl font-bold text-destructive">
+              {jobs.reduce((sum, job) => sum + (job.failure_count ?? 0), 0)}
             </div>
             <p className="text-xs text-muted-foreground">총 실패 횟수</p>
           </CardContent>
@@ -283,203 +393,109 @@ export default function BatchManagementPage() {
       </div>
 
       {/* 필터 및 검색 */}
-      <Card>
-        <CardHeader>
-          <CardTitle>필터 및 검색</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <div className="flex flex-col md:flex-row gap-4">
-            <div className="flex-1">
-              <div className="relative">
-                <Search className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
-                <Input
-                  placeholder="작업명, 설명으로 검색..."
-                  value={searchTerm}
-                  onChange={(e) => setSearchTerm(e.target.value)}
-                  className="pl-10"
-                />
-              </div>
-            </div>
-            
-            <Select value={statusFilter} onValueChange={setStatusFilter}>
-              <SelectTrigger className="w-32">
-                <SelectValue placeholder="상태" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="all">전체</SelectItem>
-                <SelectItem value="Y">활성</SelectItem>
-                <SelectItem value="N">비활성</SelectItem>
-              </SelectContent>
-            </Select>
-
-            <Select value={typeFilter} onValueChange={setTypeFilter}>
-              <SelectTrigger className="w-40">
-                <SelectValue placeholder="작업 타입" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="all">전체 타입</SelectItem>
-                {jobTypes.map((type) => (
-                  <SelectItem key={type.value} value={type.value}>
-                    {type.label}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-
-            <Button variant="outline" onClick={loadJobs} disabled={isLoading}>
-              <RefreshCw className={`h-4 w-4 mr-2 ${isLoading ? 'animate-spin' : ''}`} />
-              새로고침
-            </Button>
+      <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+        <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
+          <div className="relative w-full sm:w-[300px]">
+            <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+            <Input
+              placeholder="작업명, 설명으로 검색..."
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              className="h-10 pl-10 text-sm"
+            />
           </div>
-        </CardContent>
-      </Card>
 
-      {/* 배치 작업 목록 */}
-      <Card>
-        <CardHeader>
-          <CardTitle>배치 작업 목록 ({filteredJobs.length}개)</CardTitle>
-        </CardHeader>
-        <CardContent>
-          {isLoading ? (
-            <div className="text-center py-8">
-              <RefreshCw className="h-8 w-8 animate-spin mx-auto mb-2" />
-              <p>배치 작업을 불러오는 중...</p>
-            </div>
-          ) : filteredJobs.length === 0 ? (
-            <div className="text-center py-8 text-muted-foreground">
-              {jobs.length === 0 ? "배치 작업이 없습니다." : "검색 결과가 없습니다."}
-            </div>
-          ) : (
-            <Table>
-              <TableHeader>
-                <TableRow>
-                  <TableHead className="h-12 px-6 py-3 text-sm font-semibold">작업명</TableHead>
-                  <TableHead className="h-12 px-6 py-3 text-sm font-semibold">타입</TableHead>
-                  <TableHead className="h-12 px-6 py-3 text-sm font-semibold">스케줄</TableHead>
-                  <TableHead className="h-12 px-6 py-3 text-sm font-semibold">상태</TableHead>
-                  <TableHead className="h-12 px-6 py-3 text-sm font-semibold">실행 통계</TableHead>
-                  <TableHead className="h-12 px-6 py-3 text-sm font-semibold">성공률</TableHead>
-                  <TableHead className="h-12 px-6 py-3 text-sm font-semibold">마지막 실행</TableHead>
-                  <TableHead className="h-12 px-6 py-3 text-sm font-semibold">작업</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {filteredJobs.map((job) => (
-                  <TableRow key={job.id}>
-                    <TableCell>
-                      <div>
-                        <div className="font-medium">{job.job_name}</div>
-                        {job.description && (
-                          <div className="text-sm text-muted-foreground">
-                            {job.description}
-                          </div>
-                        )}
-                      </div>
-                    </TableCell>
-                    <TableCell>
-                      {getTypeBadge(job.job_type)}
-                    </TableCell>
-                    <TableCell className="font-mono text-sm">
-                      {job.schedule_cron || "-"}
-                    </TableCell>
-                    <TableCell>
-                      {getStatusBadge(job.is_active)}
-                    </TableCell>
-                    <TableCell>
-                      <div className="text-sm">
-                        <div>총 {job.execution_count}회</div>
-                        <div className="text-muted-foreground">
-                          성공 {job.success_count} / 실패 {job.failure_count}
-                        </div>
-                      </div>
-                    </TableCell>
-                    <TableCell>
-                      <div className="flex items-center gap-2">
-                        <div className={`text-sm font-medium ${
-                          getSuccessRate(job) >= 90 ? 'text-green-600' :
-                          getSuccessRate(job) >= 70 ? 'text-yellow-600' : 'text-red-600'
-                        }`}>
-                          {getSuccessRate(job)}%
-                        </div>
-                      </div>
-                    </TableCell>
-                    <TableCell>
-                      {job.last_executed_at
-                        ? new Date(job.last_executed_at).toLocaleString()
-                        : "-"}
-                    </TableCell>
-                    <TableCell>
-                      <DropdownMenu>
-                        <DropdownMenuTrigger asChild>
-                          <Button variant="ghost" className="h-8 w-8 p-0">
-                            <MoreHorizontal className="h-4 w-4" />
-                          </Button>
-                        </DropdownMenuTrigger>
-                        <DropdownMenuContent align="end">
-                          <DropdownMenuItem onClick={() => handleEdit(job)}>
-                            <Edit className="h-4 w-4 mr-2" />
-                            수정
-                          </DropdownMenuItem>
-                          <DropdownMenuItem 
-                            onClick={() => handleExecute(job)}
-                            disabled={job.is_active !== "Y"}
-                          >
-                            <Play className="h-4 w-4 mr-2" />
-                            실행
-                          </DropdownMenuItem>
-                          <DropdownMenuItem onClick={() => handleDelete(job)}>
-                            <Trash2 className="h-4 w-4 mr-2" />
-                            삭제
-                          </DropdownMenuItem>
-                        </DropdownMenuContent>
-                      </DropdownMenu>
-                    </TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          )}
-        </CardContent>
-      </Card>
+          <Select value={statusFilter} onValueChange={setStatusFilter}>
+            <SelectTrigger className="h-10 w-full sm:w-[160px]">
+              <SelectValue placeholder="상태" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">전체</SelectItem>
+              <SelectItem value="Y">활성</SelectItem>
+              <SelectItem value="N">비활성</SelectItem>
+            </SelectContent>
+          </Select>
+
+          <Select value={typeFilter} onValueChange={setTypeFilter}>
+            <SelectTrigger className="h-10 w-full sm:w-[160px]">
+              <SelectValue placeholder="작업 타입" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">전체 타입</SelectItem>
+              {jobTypes.map((type) => (
+                <SelectItem key={type.value} value={type.value}>
+                  {type.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        <Button variant="outline" onClick={loadJobs} disabled={isLoading} className="h-10 w-full sm:w-auto">
+          <RefreshCw className={`mr-2 h-4 w-4 ${isLoading ? 'animate-spin' : ''}`} />
+          새로고침
+        </Button>
+      </div>
+
+      {/* 배치 작업 목록 제목 */}
+      <div className="text-sm text-muted-foreground">
+        총 <span className="font-semibold text-foreground">{filteredJobs.length}</span>개
+      </div>
+
+      <ResponsiveDataView<BatchJob>
+        data={filteredJobs}
+        columns={columns}
+        keyExtractor={(job) => String(job.id)}
+        isLoading={isLoading}
+        emptyMessage={jobs.length === 0 ? "배치 작업이 없습니다." : "검색 결과가 없습니다."}
+        skeletonCount={5}
+        cardTitle={(job) => job.job_name}
+        cardSubtitle={(job) => job.description ? (
+          <span className="truncate text-sm text-muted-foreground">{job.description}</span>
+        ) : undefined}
+        cardHeaderRight={(job) => getStatusBadge(job.is_active)}
+        cardFields={cardFields}
+        actionsLabel="작업"
+        actionsWidth="80px"
+        renderActions={renderDropdownActions}
+      />
 
       {/* 배치 타입 선택 모달 */}
       {isBatchTypeModalOpen && (
-        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-          <Card className="w-full max-w-2xl mx-4">
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+          <Card className="mx-4 w-full max-w-2xl">
             <CardHeader>
               <CardTitle className="text-center">배치 타입 선택</CardTitle>
             </CardHeader>
             <CardContent className="space-y-4">
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                {/* DB → DB */}
+              <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
                 <div
-                  className="p-6 border rounded-lg cursor-pointer transition-all hover:border-blue-500 hover:bg-blue-50"
+                  className="cursor-pointer rounded-lg border p-6 transition-all hover:border-primary hover:bg-muted/50"
                   onClick={() => handleBatchTypeSelect('db-to-db')}
                 >
-                  <div className="flex items-center justify-center mb-4">
-                    <Database className="w-8 h-8 text-blue-600 mr-2" />
-                    <ArrowRight className="w-6 h-6 text-gray-400 mr-2" />
-                    <Database className="w-8 h-8 text-blue-600" />
+                  <div className="mb-4 flex items-center justify-center">
+                    <Database className="mr-2 h-8 w-8 text-primary" />
+                    <ArrowRight className="mr-2 h-6 w-6 text-muted-foreground" />
+                    <Database className="h-8 w-8 text-primary" />
                   </div>
                   <div className="text-center">
-                    <div className="font-medium text-lg mb-2">DB → DB</div>
-                    <div className="text-sm text-gray-500">데이터베이스 간 데이터 동기화</div>
+                    <div className="mb-2 text-lg font-medium">DB → DB</div>
+                    <div className="text-sm text-muted-foreground">데이터베이스 간 데이터 동기화</div>
                   </div>
                 </div>
 
-                {/* REST API → DB */}
                 <div
-                  className="p-6 border rounded-lg cursor-pointer transition-all hover:border-green-500 hover:bg-green-50"
+                  className="cursor-pointer rounded-lg border p-6 transition-all hover:border-primary hover:bg-muted/50"
                   onClick={() => handleBatchTypeSelect('restapi-to-db')}
                 >
-                  <div className="flex items-center justify-center mb-4">
-                    <Globe className="w-8 h-8 text-green-600 mr-2" />
-                    <ArrowRight className="w-6 h-6 text-gray-400 mr-2" />
-                    <Database className="w-8 h-8 text-green-600" />
+                  <div className="mb-4 flex items-center justify-center">
+                    <Globe className="mr-2 h-8 w-8 text-success" />
+                    <ArrowRight className="mr-2 h-6 w-6 text-muted-foreground" />
+                    <Database className="h-8 w-8 text-success" />
                   </div>
                   <div className="text-center">
-                    <div className="font-medium text-lg mb-2">REST API → DB</div>
-                    <div className="text-sm text-gray-500">REST API에서 데이터베이스로 데이터 수집</div>
+                    <div className="mb-2 text-lg font-medium">REST API → DB</div>
+                    <div className="text-sm text-muted-foreground">REST API에서 데이터베이스로 데이터 수집</div>
                   </div>
                 </div>
               </div>
diff --git a/frontend/app/(main)/admin/cascading-management/tabs/AutoFillTab.tsx b/frontend/app/(main)/admin/cascading-management/tabs/AutoFillTab.tsx
index b93e1797..d5b58018 100644
--- a/frontend/app/(main)/admin/cascading-management/tabs/AutoFillTab.tsx
+++ b/frontend/app/(main)/admin/cascading-management/tabs/AutoFillTab.tsx
@@ -381,7 +381,7 @@ export default function AutoFillTab() {
                         <Pencil className="h-4 w-4" />
                       </Button>
                       <Button variant="ghost" size="icon" onClick={() => handleDeleteConfirm(group.groupCode)}>
-                        <Trash2 className="h-4 w-4 text-red-500" />
+                        <Trash2 className="h-4 w-4 text-destructive" />
                       </Button>
                     </TableCell>
                   </TableRow>
@@ -676,7 +676,7 @@ export default function AutoFillTab() {
           </AlertDialogHeader>
           <AlertDialogFooter>
             <AlertDialogCancel>취소</AlertDialogCancel>
-            <AlertDialogAction onClick={handleDelete} className="bg-red-500 hover:bg-red-600">
+            <AlertDialogAction onClick={handleDelete} className="bg-destructive hover:bg-destructive">
               삭제
             </AlertDialogAction>
           </AlertDialogFooter>
diff --git a/frontend/app/(main)/admin/cascading-management/tabs/CascadingRelationsTab.tsx b/frontend/app/(main)/admin/cascading-management/tabs/CascadingRelationsTab.tsx
index 9cdfc1c1..e540a20b 100644
--- a/frontend/app/(main)/admin/cascading-management/tabs/CascadingRelationsTab.tsx
+++ b/frontend/app/(main)/admin/cascading-management/tabs/CascadingRelationsTab.tsx
@@ -577,9 +577,9 @@ export default function CascadingRelationsTab() {
                       </TableCell>
                       <TableCell>
                         <div className="flex items-center gap-2 text-sm">
-                          <span className="rounded bg-blue-100 px-2 py-0.5 text-blue-700">{relation.parent_table}</span>
+                          <span className="rounded bg-primary/10 px-2 py-0.5 text-primary">{relation.parent_table}</span>
                           <ChevronRight className="text-muted-foreground h-4 w-4" />
-                          <span className="rounded bg-green-100 px-2 py-0.5 text-green-700">
+                          <span className="rounded bg-emerald-100 px-2 py-0.5 text-emerald-700">
                             {relation.child_table}
                           </span>
                         </div>
@@ -619,7 +619,7 @@ export default function CascadingRelationsTab() {
           <div className="space-y-4">
             {/* Step 1: 부모 테이블 */}
             <div className="rounded-lg border p-4">
-              <h4 className="mb-3 text-sm font-semibold text-blue-600">1. 부모 (상위 선택)</h4>
+              <h4 className="mb-3 text-sm font-semibold text-primary">1. 부모 (상위 선택)</h4>
               <div className="grid grid-cols-2 gap-3">
                 <div className="space-y-1.5">
                   <Label className="text-xs">테이블</Label>
@@ -696,7 +696,7 @@ export default function CascadingRelationsTab() {
 
             {/* Step 2: 자식 테이블 */}
             <div className="rounded-lg border p-4">
-              <h4 className="mb-3 text-sm font-semibold text-green-600">2. 자식 (하위 옵션)</h4>
+              <h4 className="mb-3 text-sm font-semibold text-emerald-600">2. 자식 (하위 옵션)</h4>
               <div className="grid grid-cols-2 gap-3">
                 <div className="space-y-1.5">
                   <Label className="text-xs">테이블</Label>
diff --git a/frontend/app/(main)/admin/cascading-management/tabs/ConditionTab.tsx b/frontend/app/(main)/admin/cascading-management/tabs/ConditionTab.tsx
index 3bc452c9..c4fa67e6 100644
--- a/frontend/app/(main)/admin/cascading-management/tabs/ConditionTab.tsx
+++ b/frontend/app/(main)/admin/cascading-management/tabs/ConditionTab.tsx
@@ -304,7 +304,7 @@ export default function ConditionTab() {
                     <TableCell>
                       <div className="text-sm">
                         <span className="text-muted-foreground">{condition.conditionField}</span>
-                        <span className="mx-1 text-blue-600">{getOperatorLabel(condition.conditionOperator)}</span>
+                        <span className="mx-1 text-primary">{getOperatorLabel(condition.conditionOperator)}</span>
                         <span className="font-medium">{condition.conditionValue}</span>
                       </div>
                     </TableCell>
@@ -329,7 +329,7 @@ export default function ConditionTab() {
                         size="icon"
                         onClick={() => handleDeleteConfirm(condition.conditionId!)}
                       >
-                        <Trash2 className="h-4 w-4 text-red-500" />
+                        <Trash2 className="h-4 w-4 text-destructive" />
                       </Button>
                     </TableCell>
                   </TableRow>
@@ -491,7 +491,7 @@ export default function ConditionTab() {
           </AlertDialogHeader>
           <AlertDialogFooter>
             <AlertDialogCancel>취소</AlertDialogCancel>
-            <AlertDialogAction onClick={handleDelete} className="bg-red-500 hover:bg-red-600">
+            <AlertDialogAction onClick={handleDelete} className="bg-destructive hover:bg-destructive">
               삭제
             </AlertDialogAction>
           </AlertDialogFooter>
diff --git a/frontend/app/(main)/admin/cascading-management/tabs/HierarchyTab.tsx b/frontend/app/(main)/admin/cascading-management/tabs/HierarchyTab.tsx
index 2e5d7172..ebc0342b 100644
--- a/frontend/app/(main)/admin/cascading-management/tabs/HierarchyTab.tsx
+++ b/frontend/app/(main)/admin/cascading-management/tabs/HierarchyTab.tsx
@@ -501,7 +501,7 @@ export default function HierarchyTab() {
                           <Pencil className="h-4 w-4" />
                         </Button>
                         <Button variant="ghost" size="icon" onClick={() => handleDeleteConfirm(group.groupCode)}>
-                          <Trash2 className="h-4 w-4 text-red-500" />
+                          <Trash2 className="h-4 w-4 text-destructive" />
                         </Button>
                       </div>
                     </div>
@@ -548,7 +548,7 @@ export default function HierarchyTab() {
                                     size="icon"
                                     onClick={() => handleDeleteLevel(level.levelId!, group.groupCode)}
                                   >
-                                    <Trash2 className="h-4 w-4 text-red-500" />
+                                    <Trash2 className="h-4 w-4 text-destructive" />
                                   </Button>
                                 </TableCell>
                               </TableRow>
@@ -836,7 +836,7 @@ export default function HierarchyTab() {
           </AlertDialogHeader>
           <AlertDialogFooter>
             <AlertDialogCancel>취소</AlertDialogCancel>
-            <AlertDialogAction onClick={handleDelete} className="bg-red-500 hover:bg-red-600">
+            <AlertDialogAction onClick={handleDelete} className="bg-destructive hover:bg-destructive">
               삭제
             </AlertDialogAction>
           </AlertDialogFooter>
diff --git a/frontend/app/(main)/admin/cascading-management/tabs/MutualExclusionTab.tsx b/frontend/app/(main)/admin/cascading-management/tabs/MutualExclusionTab.tsx
index 92210818..b9cc9220 100644
--- a/frontend/app/(main)/admin/cascading-management/tabs/MutualExclusionTab.tsx
+++ b/frontend/app/(main)/admin/cascading-management/tabs/MutualExclusionTab.tsx
@@ -354,7 +354,7 @@ export default function MutualExclusionTab() {
                         <Pencil className="h-4 w-4" />
                       </Button>
                       <Button variant="ghost" size="icon" onClick={() => handleDeleteConfirm(exclusion.exclusionId!)}>
-                        <Trash2 className="h-4 w-4 text-red-500" />
+                        <Trash2 className="h-4 w-4 text-destructive" />
                       </Button>
                     </TableCell>
                   </TableRow>
@@ -404,7 +404,7 @@ export default function MutualExclusionTab() {
                     />
                     {fieldList.length > 2 && (
                       <Button variant="ghost" size="icon" onClick={() => removeField(index)}>
-                        <Trash2 className="h-4 w-4 text-red-500" />
+                        <Trash2 className="h-4 w-4 text-destructive" />
                       </Button>
                     )}
                   </div>
@@ -571,7 +571,7 @@ export default function MutualExclusionTab() {
           </AlertDialogHeader>
           <AlertDialogFooter>
             <AlertDialogCancel>취소</AlertDialogCancel>
-            <AlertDialogAction onClick={handleDelete} className="bg-red-500 hover:bg-red-600">
+            <AlertDialogAction onClick={handleDelete} className="bg-destructive hover:bg-destructive">
               삭제
             </AlertDialogAction>
           </AlertDialogFooter>
diff --git a/frontend/app/(main)/admin/debug-layout/page.tsx b/frontend/app/(main)/admin/debug-layout/page.tsx
index 30674bca..736d5283 100644
--- a/frontend/app/(main)/admin/debug-layout/page.tsx
+++ b/frontend/app/(main)/admin/debug-layout/page.tsx
@@ -133,7 +133,7 @@ export default function DebugLayoutPage() {
       <h1 className="mb-4 text-2xl font-bold">관리자 레이아웃 디버깅</h1>
 
       <div className="space-y-4">
-        <div className="rounded bg-green-100 p-4">
+        <div className="rounded bg-emerald-100 p-4">
           <h2 className="mb-2 font-semibold">토큰 상태</h2>
           <p>토큰 존재: {debugInfo.hasToken ? "✅ 예" : "❌ 아니오"}</p>
           <p>토큰 길이: {debugInfo.tokenLength}</p>
@@ -142,14 +142,14 @@ export default function DebugLayoutPage() {
           <p>SessionStorage 토큰: {debugInfo.sessionToken ? "✅ 존재" : "❌ 없음"}</p>
         </div>
 
-        <div className="rounded bg-blue-100 p-4">
+        <div className="rounded bg-primary/10 p-4">
           <h2 className="mb-2 font-semibold">페이지 정보</h2>
           <p>현재 URL: {debugInfo.currentUrl}</p>
           <p>Pathname: {debugInfo.pathname}</p>
           <p>시간: {debugInfo.timestamp}</p>
         </div>
 
-        <div className="rounded bg-yellow-100 p-4">
+        <div className="rounded bg-amber-100 p-4">
           <h2 className="mb-2 font-semibold">토큰 관리</h2>
           <div className="space-x-2">
             <button
@@ -157,11 +157,11 @@ export default function DebugLayoutPage() {
                 const token = localStorage.getItem("authToken");
                 alert(`토큰: ${token ? "존재" : "없음"}\n길이: ${token ? token.length : 0}`);
               }}
-              className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600"
+              className="rounded bg-primary px-4 py-2 text-white hover:bg-primary"
             >
               토큰 확인
             </button>
-            <button onClick={handleTokenSync} className="rounded bg-green-500 px-4 py-2 text-white hover:bg-green-600">
+            <button onClick={handleTokenSync} className="rounded bg-emerald-500 px-4 py-2 text-white hover:bg-emerald-600">
               토큰 동기화
             </button>
             <button
@@ -173,13 +173,13 @@ export default function DebugLayoutPage() {
           </div>
         </div>
 
-        <div className="rounded bg-orange-100 p-4">
+        <div className="rounded bg-amber-100 p-4">
           <h2 className="mb-2 font-semibold">API 테스트</h2>
           <div className="mb-4 space-x-2">
-            <button onClick={handleApiTest} className="rounded bg-orange-500 px-4 py-2 text-white hover:bg-orange-600">
+            <button onClick={handleApiTest} className="rounded bg-amber-500 px-4 py-2 text-white hover:bg-orange-600">
               인증 상태 API 테스트
             </button>
-            <button onClick={handleUserApiTest} className="rounded bg-red-500 px-4 py-2 text-white hover:bg-red-600">
+            <button onClick={handleUserApiTest} className="rounded bg-destructive px-4 py-2 text-white hover:bg-destructive">
               사용자 API 테스트
             </button>
             <button
@@ -194,7 +194,7 @@ export default function DebugLayoutPage() {
             <div
               className={`rounded p-3 ${
                 apiTestResult.status === "success"
-                  ? "bg-green-200"
+                  ? "bg-emerald-200"
                   : apiTestResult.status === "error"
                     ? "bg-red-200"
                     : "bg-yellow-200"
diff --git a/frontend/app/(main)/admin/debug-simple/page.tsx b/frontend/app/(main)/admin/debug-simple/page.tsx
index 7861bfb5..5a9d65be 100644
--- a/frontend/app/(main)/admin/debug-simple/page.tsx
+++ b/frontend/app/(main)/admin/debug-simple/page.tsx
@@ -28,27 +28,27 @@ export default function SimpleDebugPage() {
       <h1 className="mb-4 text-2xl font-bold">간단한 토큰 디버깅</h1>
 
       <div className="space-y-4">
-        <div className="rounded bg-green-100 p-4">
+        <div className="rounded bg-emerald-100 p-4">
           <h2 className="mb-2 font-semibold">토큰 상태</h2>
           <p>토큰 존재: {tokenInfo.hasToken ? "✅ 예" : "❌ 아니오"}</p>
           <p>토큰 길이: {tokenInfo.tokenLength}</p>
           <p>토큰 시작: {tokenInfo.tokenStart}</p>
         </div>
 
-        <div className="rounded bg-blue-100 p-4">
+        <div className="rounded bg-primary/10 p-4">
           <h2 className="mb-2 font-semibold">페이지 정보</h2>
           <p>현재 URL: {tokenInfo.currentUrl}</p>
           <p>시간: {tokenInfo.timestamp}</p>
         </div>
 
-        <div className="rounded bg-yellow-100 p-4">
+        <div className="rounded bg-amber-100 p-4">
           <h2 className="mb-2 font-semibold">테스트 버튼</h2>
           <button
             onClick={() => {
               const token = localStorage.getItem("authToken");
               alert(`토큰: ${token ? "존재" : "없음"}\n길이: ${token ? token.length : 0}`);
             }}
-            className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600"
+            className="rounded bg-primary px-4 py-2 text-white hover:bg-primary"
           >
             토큰 확인
           </button>
diff --git a/frontend/app/(main)/admin/debug/page.tsx b/frontend/app/(main)/admin/debug/page.tsx
index eb3174f5..4e3646b4 100644
--- a/frontend/app/(main)/admin/debug/page.tsx
+++ b/frontend/app/(main)/admin/debug/page.tsx
@@ -15,16 +15,16 @@ export default function AdminDebugPage() {
         <h1 className="mb-4 text-2xl font-bold">어드민 권한 디버깅</h1>
 
         <div className="space-y-4">
-          <div className="rounded bg-gray-100 p-4">
+          <div className="rounded bg-muted p-4">
             <h2 className="mb-2 font-semibold">인증 상태</h2>
             <p>로딩: {loading ? "예" : "아니오"}</p>
             <p>로그인: {isLoggedIn ? "예" : "아니오"}</p>
             <p>관리자: {isAdmin ? "예" : "아니오"}</p>
-            {error && <p className="text-red-500">에러: {error}</p>}
+            {error && <p className="text-destructive">에러: {error}</p>}
           </div>
 
           {user && (
-            <div className="rounded bg-blue-100 p-4">
+            <div className="rounded bg-primary/10 p-4">
               <h2 className="mb-2 font-semibold">사용자 정보</h2>
               <p>ID: {user.userId}</p>
               <p>이름: {user.userName}</p>
@@ -34,7 +34,7 @@ export default function AdminDebugPage() {
             </div>
           )}
 
-          <div className="rounded bg-green-100 p-4">
+          <div className="rounded bg-emerald-100 p-4">
             <h2 className="mb-2 font-semibold">토큰 정보</h2>
             <p>
               localStorage 토큰: {typeof window !== "undefined" && localStorage.getItem("authToken") ? "존재" : "없음"}
diff --git a/frontend/app/(main)/admin/layouts/page.tsx b/frontend/app/(main)/admin/layouts/page.tsx
index 6f7da62a..322db584 100644
--- a/frontend/app/(main)/admin/layouts/page.tsx
+++ b/frontend/app/(main)/admin/layouts/page.tsx
@@ -220,13 +220,13 @@ export default function LayoutManagementPage() {
   };
 
   return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-muted">
       <div className="w-full max-w-none px-4 py-8 space-y-8">
         {/* 페이지 제목 */}
         <div className="flex items-center justify-between bg-white rounded-lg shadow-sm border p-6">
           <div>
-            <h1 className="text-3xl font-bold text-gray-900">레이아웃 관리</h1>
-            <p className="mt-2 text-gray-600">화면 레이아웃을 생성하고 관리합니다</p>
+            <h1 className="text-3xl font-bold text-foreground">레이아웃 관리</h1>
+            <p className="mt-2 text-muted-foreground">화면 레이아웃을 생성하고 관리합니다</p>
           </div>
           <Button className="flex items-center gap-2 shadow-sm" onClick={() => setCreateModalOpen(true)}>
             <Plus className="h-4 w-4" />새 레이아웃
@@ -239,7 +239,7 @@ export default function LayoutManagementPage() {
           <div className="flex items-center gap-4">
             <div className="flex-1">
               <div className="relative">
-                <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform text-gray-400" />
+                <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform text-muted-foreground/70" />
                 <Input
                   placeholder="레이아웃 이름 또는 설명으로 검색..."
                   value={searchTerm}
@@ -276,7 +276,7 @@ export default function LayoutManagementPage() {
           {loading ? (
             <div className="py-8 text-center">로딩 중...</div>
           ) : layouts.length === 0 ? (
-            <div className="py-8 text-center text-gray-500">레이아웃이 없습니다.</div>
+            <div className="py-8 text-center text-muted-foreground">레이아웃이 없습니다.</div>
           ) : (
             <>
               {/* 레이아웃 그리드 */}
@@ -288,7 +288,7 @@ export default function LayoutManagementPage() {
                       <CardHeader className="pb-3">
                         <div className="flex items-start justify-between">
                           <div className="flex items-center gap-2">
-                            <CategoryIcon className="h-5 w-5 text-gray-600" />
+                            <CategoryIcon className="h-5 w-5 text-muted-foreground" />
                             <Badge variant="secondary">
                               {CATEGORY_NAMES[layout.category as keyof typeof CATEGORY_NAMES]}
                             </Badge>
@@ -312,7 +312,7 @@ export default function LayoutManagementPage() {
                                 <Copy className="mr-2 h-4 w-4" />
                                 복제
                               </DropdownMenuItem>
-                              <DropdownMenuItem onClick={() => handleDelete(layout)} className="text-red-600">
+                              <DropdownMenuItem onClick={() => handleDelete(layout)} className="text-destructive">
                                 <Trash2 className="mr-2 h-4 w-4" />
                                 삭제
                               </DropdownMenuItem>
@@ -321,17 +321,17 @@ export default function LayoutManagementPage() {
                         </div>
                         <CardTitle className="text-lg">{layout.layoutName}</CardTitle>
                         {layout.description && (
-                          <p className="line-clamp-2 text-sm text-gray-600">{layout.description}</p>
+                          <p className="line-clamp-2 text-sm text-muted-foreground">{layout.description}</p>
                         )}
                       </CardHeader>
                       <CardContent>
                         <div className="space-y-2">
                           <div className="flex items-center justify-between text-sm">
-                            <span className="text-gray-500">타입:</span>
+                            <span className="text-muted-foreground">타입:</span>
                             <Badge variant="outline">{layout.layoutType}</Badge>
                           </div>
                           <div className="flex items-center justify-between text-sm">
-                            <span className="text-gray-500">존 개수:</span>
+                            <span className="text-muted-foreground">존 개수:</span>
                             <span>{layout.zonesConfig.length}개</span>
                           </div>
                           {layout.isPublic === "Y" && (
@@ -397,7 +397,7 @@ export default function LayoutManagementPage() {
           </AlertDialogHeader>
           <AlertDialogFooter>
             <AlertDialogCancel>취소</AlertDialogCancel>
-            <AlertDialogAction onClick={confirmDelete} className="bg-red-600 hover:bg-red-700">
+            <AlertDialogAction onClick={confirmDelete} className="bg-destructive hover:bg-red-700">
               삭제
             </AlertDialogAction>
           </AlertDialogFooter>
diff --git a/frontend/app/(main)/admin/monitoring/page.tsx b/frontend/app/(main)/admin/monitoring/page.tsx
index 7be9d405..48b3501c 100644
--- a/frontend/app/(main)/admin/monitoring/page.tsx
+++ b/frontend/app/(main)/admin/monitoring/page.tsx
@@ -59,25 +59,25 @@ export default function MonitoringPage() {
   const getStatusIcon = (status: string) => {
     switch (status) {
       case 'completed':
-        return <CheckCircle className="h-4 w-4 text-green-500" />;
+        return <CheckCircle className="h-4 w-4 text-emerald-500" />;
       case 'failed':
-        return <AlertCircle className="h-4 w-4 text-red-500" />;
+        return <AlertCircle className="h-4 w-4 text-destructive" />;
       case 'running':
-        return <Play className="h-4 w-4 text-blue-500" />;
+        return <Play className="h-4 w-4 text-primary" />;
       case 'pending':
-        return <Clock className="h-4 w-4 text-yellow-500" />;
+        return <Clock className="h-4 w-4 text-amber-500" />;
       default:
-        return <Clock className="h-4 w-4 text-gray-500" />;
+        return <Clock className="h-4 w-4 text-muted-foreground" />;
     }
   };
 
   const getStatusBadge = (status: string) => {
     const variants = {
-      completed: "bg-green-100 text-green-800",
+      completed: "bg-emerald-100 text-emerald-800",
       failed: "bg-destructive/20 text-red-800",
-      running: "bg-primary/20 text-blue-800",
-      pending: "bg-yellow-100 text-yellow-800",
-      cancelled: "bg-gray-100 text-gray-800",
+      running: "bg-primary/20 text-primary",
+      pending: "bg-amber-100 text-yellow-800",
+      cancelled: "bg-muted text-foreground",
     };
 
     const labels = {
@@ -120,7 +120,7 @@ export default function MonitoringPage() {
   }
 
   return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-muted">
       <div className="w-full max-w-none px-4 py-8 space-y-8">
         {/* 헤더 */}
         <div>
@@ -191,7 +191,7 @@ export default function MonitoringPage() {
                 <div className="text-2xl">✅</div>
               </CardHeader>
               <CardContent>
-                <div className="text-2xl font-bold text-green-600">{monitoring.successful_jobs_today}</div>
+                <div className="text-2xl font-bold text-emerald-600">{monitoring.successful_jobs_today}</div>
                 <p className="text-xs text-muted-foreground">
                   성공률: {getSuccessRate()}%
                 </p>
diff --git a/frontend/app/(main)/admin/screenMng/barcodeList/designer/[labelId]/page.tsx b/frontend/app/(main)/admin/screenMng/barcodeList/designer/[labelId]/page.tsx
index 8d55ca5c..2906dbb2 100644
--- a/frontend/app/(main)/admin/screenMng/barcodeList/designer/[labelId]/page.tsx
+++ b/frontend/app/(main)/admin/screenMng/barcodeList/designer/[labelId]/page.tsx
@@ -16,7 +16,7 @@ export default function BarcodeLabelDesignerPage() {
   return (
     <DndProvider backend={HTML5Backend}>
       <BarcodeDesignerProvider labelId={labelId}>
-        <div className="flex h-screen flex-col overflow-hidden bg-gray-50">
+        <div className="flex h-screen flex-col overflow-hidden bg-muted">
           <BarcodeDesignerToolbar />
           <div className="flex flex-1 overflow-hidden">
             <BarcodeDesignerLeftPanel />
diff --git a/frontend/app/(main)/admin/screenMng/barcodeList/page.tsx b/frontend/app/(main)/admin/screenMng/barcodeList/page.tsx
index eba94895..460fa220 100644
--- a/frontend/app/(main)/admin/screenMng/barcodeList/page.tsx
+++ b/frontend/app/(main)/admin/screenMng/barcodeList/page.tsx
@@ -32,12 +32,12 @@ export default function BarcodeLabelManagementPage() {
   };
 
   return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-muted">
       <div className="w-full max-w-none space-y-8 px-4 py-8">
         <div className="flex items-center justify-between rounded-lg border bg-white p-6 shadow-sm">
           <div>
-            <h1 className="text-3xl font-bold text-gray-900">바코드 라벨 관리</h1>
-            <p className="mt-2 text-gray-600">ZD421 등 바코드 프린터용 라벨을 작성하고 출력합니다</p>
+            <h1 className="text-3xl font-bold text-foreground">바코드 라벨 관리</h1>
+            <p className="mt-2 text-muted-foreground">ZD421 등 바코드 프린터용 라벨을 작성하고 출력합니다</p>
           </div>
           <Button onClick={handleCreateNew} className="gap-2">
             <Plus className="h-4 w-4" />
@@ -46,7 +46,7 @@ export default function BarcodeLabelManagementPage() {
         </div>
 
         <Card className="shadow-sm">
-          <CardHeader className="bg-gray-50/50">
+          <CardHeader className="bg-muted/50">
             <CardTitle className="flex items-center gap-2">
               <Search className="h-5 w-5" />
               검색
@@ -105,7 +105,7 @@ export default function BarcodeLabelManagementPage() {
         </Card>
 
         <Card className="shadow-sm">
-          <CardHeader className="bg-gray-50/50">
+          <CardHeader className="bg-muted/50">
             <CardTitle className="flex items-center justify-between">
               <span className="flex items-center gap-2">
                 바코드 라벨 목록
diff --git a/frontend/app/(main)/admin/screenMng/dashboardList/page.tsx b/frontend/app/(main)/admin/screenMng/dashboardList/page.tsx
index c346dc54..c72bf73e 100644
--- a/frontend/app/(main)/admin/screenMng/dashboardList/page.tsx
+++ b/frontend/app/(main)/admin/screenMng/dashboardList/page.tsx
@@ -6,7 +6,6 @@ import { dashboardApi } from "@/lib/api/dashboard";
 import { Dashboard } from "@/lib/api/dashboard";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -16,6 +15,8 @@ import {
 import { useToast } from "@/hooks/use-toast";
 import { Pagination, PaginationInfo } from "@/components/common/Pagination";
 import { DeleteConfirmModal } from "@/components/common/DeleteConfirmModal";
+import { ResponsiveDataView, RDVColumn, RDVCardField } from "@/components/common/ResponsiveDataView";
+import { ScrollToTop } from "@/components/common/ScrollToTop";
 import { Plus, Search, Edit, Trash2, Copy, MoreVertical, AlertCircle, RefreshCw } from "lucide-react";
 
 /**
@@ -30,7 +31,7 @@ export default function DashboardListPage() {
   
   // 상태 관리
   const [dashboards, setDashboards] = useState<Dashboard[]>([]);
-  const [loading, setLoading] = useState(true); // CSR이므로 초기 로딩 true
+  const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [searchTerm, setSearchTerm] = useState("");
 
@@ -83,52 +84,36 @@ export default function DashboardListPage() {
     endItem: Math.min(currentPage * pageSize, totalCount),
   };
 
-  // 페이지 변경 핸들러
-  const handlePageChange = (page: number) => {
-    setCurrentPage(page);
-  };
+  const handlePageChange = (page: number) => setCurrentPage(page);
 
-  // 페이지 크기 변경 핸들러
   const handlePageSizeChange = (size: number) => {
     setPageSize(size);
-    setCurrentPage(1); // 페이지 크기 변경 시 첫 페이지로
+    setCurrentPage(1);
   };
 
-  // 대시보드 삭제 확인 모달 열기
   const handleDeleteClick = (id: string, title: string) => {
     setDeleteTarget({ id, title });
     setDeleteDialogOpen(true);
   };
 
-  // 대시보드 삭제 실행
   const handleDeleteConfirm = async () => {
     if (!deleteTarget) return;
-
     try {
       await dashboardApi.deleteDashboard(deleteTarget.id);
       setDeleteDialogOpen(false);
       setDeleteTarget(null);
-      toast({
-        title: "성공",
-        description: "대시보드가 삭제되었습니다.",
-      });
+      toast({ title: "성공", description: "대시보드가 삭제되었습니다." });
       loadDashboards();
     } catch (err) {
       console.error("Failed to delete dashboard:", err);
       setDeleteDialogOpen(false);
-      toast({
-        title: "오류",
-        description: "대시보드 삭제에 실패했습니다.",
-        variant: "destructive",
-      });
+      toast({ title: "오류", description: "대시보드 삭제에 실패했습니다.", variant: "destructive" });
     }
   };
 
-  // 대시보드 복사
   const handleCopy = async (dashboard: Dashboard) => {
     try {
       const fullDashboard = await dashboardApi.getDashboard(dashboard.id);
-
       await dashboardApi.createDashboard({
         title: `${fullDashboard.title} (복사본)`,
         description: fullDashboard.description,
@@ -138,40 +123,85 @@ export default function DashboardListPage() {
         category: fullDashboard.category,
         settings: fullDashboard.settings as { resolution?: string; backgroundColor?: string },
       });
-      toast({
-        title: "성공",
-        description: "대시보드가 복사되었습니다.",
-      });
+      toast({ title: "성공", description: "대시보드가 복사되었습니다." });
       loadDashboards();
     } catch (err) {
       console.error("Failed to copy dashboard:", err);
-      toast({
-        title: "오류",
-        description: "대시보드 복사에 실패했습니다.",
-        variant: "destructive",
-      });
+      toast({ title: "오류", description: "대시보드 복사에 실패했습니다.", variant: "destructive" });
     }
   };
 
-  // 포맷팅 헬퍼
-  const formatDate = (dateString: string) => {
-    return new Date(dateString).toLocaleDateString("ko-KR", {
+  const formatDate = (dateString: string) =>
+    new Date(dateString).toLocaleDateString("ko-KR", {
       year: "numeric",
       month: "2-digit",
       day: "2-digit",
     });
-  };
+
+  // ResponsiveDataView 컬럼 정의
+  const columns: RDVColumn<Dashboard>[] = [
+    {
+      key: "title",
+      label: "제목",
+      render: (_v, row) => (
+        <button
+          onClick={() => router.push(`/admin/screenMng/dashboardList/${row.id}`)}
+          className="hover:text-primary cursor-pointer text-left font-medium transition-colors hover:underline"
+        >
+          {row.title}
+        </button>
+      ),
+    },
+    {
+      key: "description",
+      label: "설명",
+      render: (_v, row) => (
+        <span className="text-muted-foreground max-w-md truncate">{row.description || "-"}</span>
+      ),
+    },
+    {
+      key: "createdByName",
+      label: "생성자",
+      width: "120px",
+      render: (_v, row) => row.createdByName || row.createdBy || "-",
+    },
+    {
+      key: "createdAt",
+      label: "생성일",
+      width: "120px",
+      render: (_v, row) => formatDate(row.createdAt),
+    },
+    {
+      key: "updatedAt",
+      label: "수정일",
+      width: "120px",
+      render: (_v, row) => formatDate(row.updatedAt),
+    },
+  ];
+
+  // 모바일 카드 필드 정의
+  const cardFields: RDVCardField<Dashboard>[] = [
+    {
+      label: "설명",
+      render: (d) => (
+        <span className="max-w-[200px] truncate">{d.description || "-"}</span>
+      ),
+    },
+    { label: "생성자", render: (d) => d.createdByName || d.createdBy || "-" },
+    { label: "생성일", render: (d) => formatDate(d.createdAt) },
+    { label: "수정일", render: (d) => formatDate(d.updatedAt) },
+  ];
 
   return (
     <div className="bg-background flex min-h-screen flex-col">
-      <div className="space-y-6 p-6">
+      <div className="space-y-6 p-4 sm:p-6">
         {/* 페이지 헤더 */}
         <div className="space-y-2 border-b pb-4">
           <h1 className="text-3xl font-bold tracking-tight">대시보드 관리</h1>
           <p className="text-muted-foreground text-sm">대시보드를 생성하고 관리할 수 있습니다</p>
         </div>
 
-        {/* 검색 및 액션 */}
+        {/* 검색 및 액션 (반응형) */}
         <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
           <div className="flex items-center gap-4">
             <div className="relative w-full sm:w-[300px]">
@@ -183,7 +213,7 @@ export default function DashboardListPage() {
                 className="h-10 pl-10 text-sm"
               />
             </div>
-            <div className="text-muted-foreground text-sm">
+            <div className="text-muted-foreground hidden text-sm sm:block">
               총 <span className="text-foreground font-semibold">{totalCount.toLocaleString()}</span> 건
             </div>
           </div>
@@ -194,71 +224,7 @@ export default function DashboardListPage() {
         </div>
 
         {/* 대시보드 목록 */}
-        {loading ? (
-          <>
-            {/* 데스크톱 테이블 스켈레톤 */}
-            <div className="bg-card hidden shadow-sm lg:block">
-              <Table>
-                <TableHeader>
-                  <TableRow className="bg-muted/50 hover:bg-muted/50 border-b">
-                    <TableHead className="h-12 text-sm font-semibold">제목</TableHead>
-                    <TableHead className="h-12 text-sm font-semibold">설명</TableHead>
-                    <TableHead className="h-12 text-sm font-semibold">생성자</TableHead>
-                    <TableHead className="h-12 text-sm font-semibold">생성일</TableHead>
-                    <TableHead className="h-12 text-sm font-semibold">수정일</TableHead>
-                    <TableHead className="h-12 text-right text-sm font-semibold">작업</TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {Array.from({ length: 10 }).map((_, index) => (
-                    <TableRow key={index} className="border-b">
-                      <TableCell className="h-16">
-                        <div className="bg-muted h-4 animate-pulse rounded"></div>
-                      </TableCell>
-                      <TableCell className="h-16">
-                        <div className="bg-muted h-4 animate-pulse rounded"></div>
-                      </TableCell>
-                      <TableCell className="h-16">
-                        <div className="bg-muted h-4 w-20 animate-pulse rounded"></div>
-                      </TableCell>
-                      <TableCell className="h-16">
-                        <div className="bg-muted h-4 w-24 animate-pulse rounded"></div>
-                      </TableCell>
-                      <TableCell className="h-16">
-                        <div className="bg-muted h-4 w-24 animate-pulse rounded"></div>
-                      </TableCell>
-                      <TableCell className="h-16 text-right">
-                        <div className="bg-muted ml-auto h-8 w-8 animate-pulse rounded"></div>
-                      </TableCell>
-                    </TableRow>
-                  ))}
-                </TableBody>
-              </Table>
-            </div>
-
-            {/* 모바일/태블릿 카드 스켈레톤 */}
-            <div className="grid gap-4 sm:grid-cols-2 lg:hidden">
-              {Array.from({ length: 6 }).map((_, index) => (
-                <div key={index} className="bg-card rounded-lg border p-4 shadow-sm">
-                  <div className="mb-4 flex items-start justify-between">
-                    <div className="flex-1 space-y-2">
-                      <div className="bg-muted h-5 w-32 animate-pulse rounded"></div>
-                      <div className="bg-muted h-4 w-24 animate-pulse rounded"></div>
-                    </div>
-                  </div>
-                  <div className="space-y-2 border-t pt-4">
-                    {Array.from({ length: 3 }).map((_, i) => (
-                      <div key={i} className="flex justify-between">
-                        <div className="bg-muted h-4 w-16 animate-pulse rounded"></div>
-                        <div className="bg-muted h-4 w-32 animate-pulse rounded"></div>
-                      </div>
-                    ))}
-                  </div>
-                </div>
-              ))}
-            </div>
-          </>
-        ) : error ? (
+        {error ? (
           <div className="border-destructive/50 bg-destructive/10 flex flex-col items-center justify-center rounded-lg border p-12">
             <div className="flex flex-col items-center gap-4 text-center">
               <div className="bg-destructive/20 flex h-16 w-16 items-center justify-center rounded-full">
@@ -274,158 +240,50 @@ export default function DashboardListPage() {
               </Button>
             </div>
           </div>
-        ) : dashboards.length === 0 ? (
-          <div className="bg-card flex h-64 flex-col items-center justify-center shadow-sm">
-            <div className="flex flex-col items-center gap-2 text-center">
-              <p className="text-muted-foreground text-sm">대시보드가 없습니다</p>
-            </div>
-          </div>
         ) : (
-          <>
-            {/* 데스크톱 테이블 뷰 (lg 이상) */}
-            <div className="bg-card hidden shadow-sm lg:block">
-              <Table>
-                <TableHeader>
-                  <TableRow className="bg-muted/50 hover:bg-muted/50 border-b">
-                    <TableHead className="h-12 text-sm font-semibold">제목</TableHead>
-                    <TableHead className="h-12 text-sm font-semibold">설명</TableHead>
-                    <TableHead className="h-12 text-sm font-semibold">생성자</TableHead>
-                    <TableHead className="h-12 text-sm font-semibold">생성일</TableHead>
-                    <TableHead className="h-12 text-sm font-semibold">수정일</TableHead>
-                    <TableHead className="h-12 text-right text-sm font-semibold">작업</TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {dashboards.map((dashboard) => (
-                    <TableRow key={dashboard.id} className="hover:bg-muted/50 border-b transition-colors">
-                      <TableCell className="h-16 text-sm font-medium">
-                      <button
-                        onClick={() => router.push(`/admin/screenMng/dashboardList/${dashboard.id}`)}
-                        className="hover:text-primary cursor-pointer text-left transition-colors hover:underline"
-                      >
-                        {dashboard.title}
-                      </button>
-                      </TableCell>
-                      <TableCell className="text-muted-foreground h-16 max-w-md truncate text-sm">
-                        {dashboard.description || "-"}
-                      </TableCell>
-                      <TableCell className="text-muted-foreground h-16 text-sm">
-                        {dashboard.createdByName || dashboard.createdBy || "-"}
-                      </TableCell>
-                      <TableCell className="text-muted-foreground h-16 text-sm">
-                        {formatDate(dashboard.createdAt)}
-                      </TableCell>
-                      <TableCell className="text-muted-foreground h-16 text-sm">
-                        {formatDate(dashboard.updatedAt)}
-                      </TableCell>
-                      <TableCell className="h-16 text-right">
-                        <DropdownMenu>
-                          <DropdownMenuTrigger asChild>
-                            <Button variant="ghost" size="icon" className="h-8 w-8">
-                              <MoreVertical className="h-4 w-4" />
-                            </Button>
-                          </DropdownMenuTrigger>
-                          <DropdownMenuContent align="end">
-                            <DropdownMenuItem
-                              onClick={() => router.push(`/admin/screenMng/dashboardList/${dashboard.id}`)}
-                              className="gap-2 text-sm"
-                            >
-                              <Edit className="h-4 w-4" />
-                              편집
-                            </DropdownMenuItem>
-                            <DropdownMenuItem onClick={() => handleCopy(dashboard)} className="gap-2 text-sm">
-                              <Copy className="h-4 w-4" />
-                              복사
-                            </DropdownMenuItem>
-                            <DropdownMenuItem
-                              onClick={() => handleDeleteClick(dashboard.id, dashboard.title)}
-                              className="text-destructive focus:text-destructive gap-2 text-sm"
-                            >
-                              <Trash2 className="h-4 w-4" />
-                              삭제
-                            </DropdownMenuItem>
-                          </DropdownMenuContent>
-                        </DropdownMenu>
-                      </TableCell>
-                    </TableRow>
-                  ))}
-                </TableBody>
-              </Table>
-            </div>
-
-            {/* 모바일/태블릿 카드 뷰 (lg 미만) */}
-            <div className="grid gap-4 sm:grid-cols-2 lg:hidden">
-              {dashboards.map((dashboard) => (
-                <div
-                  key={dashboard.id}
-                  className="bg-card hover:bg-muted/50 rounded-lg border p-4 shadow-sm transition-colors"
-                >
-                  {/* 헤더 */}
-                  <div className="mb-4 flex items-start justify-between">
-                    <div className="flex-1">
-                      <button
-                        onClick={() => router.push(`/admin/screenMng/dashboardList/${dashboard.id}`)}
-                        className="hover:text-primary cursor-pointer text-left transition-colors hover:underline"
-                      >
-                        <h3 className="text-base font-semibold">{dashboard.title}</h3>
-                      </button>
-                      <p className="text-muted-foreground mt-1 text-sm">{dashboard.id}</p>
-                    </div>
-                  </div>
-
-                  {/* 정보 */}
-                  <div className="space-y-2 border-t pt-4">
-                    <div className="flex justify-between text-sm">
-                      <span className="text-muted-foreground">설명</span>
-                      <span className="max-w-[200px] truncate font-medium">{dashboard.description || "-"}</span>
-                    </div>
-                    <div className="flex justify-between text-sm">
-                      <span className="text-muted-foreground">생성자</span>
-                      <span className="font-medium">{dashboard.createdByName || dashboard.createdBy || "-"}</span>
-                    </div>
-                    <div className="flex justify-between text-sm">
-                      <span className="text-muted-foreground">생성일</span>
-                      <span className="font-medium">{formatDate(dashboard.createdAt)}</span>
-                    </div>
-                    <div className="flex justify-between text-sm">
-                      <span className="text-muted-foreground">수정일</span>
-                      <span className="font-medium">{formatDate(dashboard.updatedAt)}</span>
-                    </div>
-                  </div>
-
-                  {/* 액션 */}
-                  <div className="mt-4 flex gap-2 border-t pt-4">
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      className="h-9 flex-1 gap-2 text-sm"
-                      onClick={() => router.push(`/admin/screenMng/dashboardList/${dashboard.id}`)}
-                    >
-                      <Edit className="h-4 w-4" />
-                      편집
-                    </Button>
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      className="h-9 flex-1 gap-2 text-sm"
-                      onClick={() => handleCopy(dashboard)}
-                    >
-                      <Copy className="h-4 w-4" />
-                      복사
-                    </Button>
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      className="text-destructive hover:bg-destructive/10 hover:text-destructive h-9 gap-2 text-sm"
-                      onClick={() => handleDeleteClick(dashboard.id, dashboard.title)}
-                    >
-                      <Trash2 className="h-4 w-4" />
-                    </Button>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </>
+          <ResponsiveDataView<Dashboard>
+            data={dashboards}
+            columns={columns}
+            keyExtractor={(d) => d.id}
+            isLoading={loading}
+            emptyMessage="대시보드가 없습니다."
+            skeletonCount={10}
+            cardTitle={(d) => d.title}
+            cardSubtitle={(d) => d.id}
+            cardFields={cardFields}
+            onRowClick={(d) => router.push(`/admin/screenMng/dashboardList/${d.id}`)}
+            renderActions={(d) => (
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button variant="ghost" size="icon" className="h-8 w-8" onClick={(e) => e.stopPropagation()}>
+                    <MoreVertical className="h-4 w-4" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                  <DropdownMenuItem
+                    onClick={() => router.push(`/admin/screenMng/dashboardList/${d.id}`)}
+                    className="gap-2 text-sm"
+                  >
+                    <Edit className="h-4 w-4" />
+                    편집
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => handleCopy(d)} className="gap-2 text-sm">
+                    <Copy className="h-4 w-4" />
+                    복사
+                  </DropdownMenuItem>
+                  <DropdownMenuItem
+                    onClick={() => handleDeleteClick(d.id, d.title)}
+                    className="text-destructive focus:text-destructive gap-2 text-sm"
+                  >
+                    <Trash2 className="h-4 w-4" />
+                    삭제
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            )}
+            actionsLabel="작업"
+            actionsWidth="80px"
+          />
         )}
 
         {/* 페이지네이션 */}
@@ -453,6 +311,9 @@ export default function DashboardListPage() {
           onConfirm={handleDeleteConfirm}
         />
       </div>
+
+      {/* Scroll to Top 버튼 */}
+      <ScrollToTop />
     </div>
   );
 }
diff --git a/frontend/app/(main)/admin/screenMng/reportList/designer/[reportId]/page.tsx b/frontend/app/(main)/admin/screenMng/reportList/designer/[reportId]/page.tsx
index 55972a18..1375eeb3 100644
--- a/frontend/app/(main)/admin/screenMng/reportList/designer/[reportId]/page.tsx
+++ b/frontend/app/(main)/admin/screenMng/reportList/designer/[reportId]/page.tsx
@@ -67,7 +67,7 @@ export default function ReportDesignerPage() {
   return (
     <DndProvider backend={HTML5Backend}>
       <ReportDesignerProvider reportId={reportId}>
-        <div className="flex h-screen flex-col overflow-hidden bg-gray-50">
+        <div className="flex h-screen flex-col overflow-hidden bg-muted">
           {/* 상단 툴바 */}
           <ReportDesignerToolbar />
 
diff --git a/frontend/app/(main)/admin/screenMng/reportList/page.tsx b/frontend/app/(main)/admin/screenMng/reportList/page.tsx
index 4b3816be..e3f1e890 100644
--- a/frontend/app/(main)/admin/screenMng/reportList/page.tsx
+++ b/frontend/app/(main)/admin/screenMng/reportList/page.tsx
@@ -30,13 +30,13 @@ export default function ReportManagementPage() {
   };
 
   return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-muted">
       <div className="w-full max-w-none space-y-8 px-4 py-8">
         {/* 페이지 제목 */}
         <div className="flex items-center justify-between rounded-lg border bg-white p-6 shadow-sm">
           <div>
-            <h1 className="text-3xl font-bold text-gray-900">리포트 관리</h1>
-            <p className="mt-2 text-gray-600">리포트를 생성하고 관리합니다</p>
+            <h1 className="text-3xl font-bold text-foreground">리포트 관리</h1>
+            <p className="mt-2 text-muted-foreground">리포트를 생성하고 관리합니다</p>
           </div>
           <Button onClick={handleCreateNew} className="gap-2">
             <Plus className="h-4 w-4" />새 리포트
@@ -45,7 +45,7 @@ export default function ReportManagementPage() {
 
         {/* 검색 영역 */}
         <Card className="shadow-sm">
-          <CardHeader className="bg-gray-50/50">
+          <CardHeader className="bg-muted/50">
             <CardTitle className="flex items-center gap-2">
               <Search className="h-5 w-5" />
               검색
@@ -78,7 +78,7 @@ export default function ReportManagementPage() {
 
         {/* 리포트 목록 */}
         <Card className="shadow-sm">
-          <CardHeader className="bg-gray-50/50">
+          <CardHeader className="bg-muted/50">
             <CardTitle className="flex items-center justify-between">
               <span className="flex items-center gap-2">
                 📋 리포트 목록
diff --git a/frontend/app/(main)/admin/standards/[webType]/edit/page.tsx b/frontend/app/(main)/admin/standards/[webType]/edit/page.tsx
index f9475759..cbe0cc97 100644
--- a/frontend/app/(main)/admin/standards/[webType]/edit/page.tsx
+++ b/frontend/app/(main)/admin/standards/[webType]/edit/page.tsx
@@ -204,7 +204,7 @@ export default function EditWebTypePage() {
   }
 
   return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-muted">
       <div className="w-full max-w-none px-4 py-8 space-y-8">
       {/* 헤더 */}
       <div className="mb-6 flex items-center gap-4">
@@ -244,7 +244,7 @@ export default function EditWebTypePage() {
             <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
               <div className="space-y-2">
                 <Label htmlFor="type_name">
-                  웹타입명 <span className="text-red-500">*</span>
+                  웹타입명 <span className="text-destructive">*</span>
                 </Label>
                 <Input
                   id="type_name"
@@ -267,7 +267,7 @@ export default function EditWebTypePage() {
             {/* 카테고리 */}
             <div className="space-y-2">
               <Label htmlFor="category">
-                카테고리 <span className="text-red-500">*</span>
+                카테고리 <span className="text-destructive">*</span>
               </Label>
               <Select value={formData.category || ""} onValueChange={(value) => handleInputChange("category", value)}>
                 <SelectTrigger>
@@ -286,7 +286,7 @@ export default function EditWebTypePage() {
             {/* 연결된 컴포넌트 */}
             <div className="space-y-2">
               <Label htmlFor="component_name">
-                연결된 컴포넌트 <span className="text-red-500">*</span>
+                연결된 컴포넌트 <span className="text-destructive">*</span>
               </Label>
               <Select
                 value={formData.component_name || "TextWidget"}
@@ -338,15 +338,15 @@ export default function EditWebTypePage() {
                 </SelectContent>
               </Select>
               {formData.config_panel && (
-                <div className="rounded-lg border border-green-200 bg-green-50 p-3">
+                <div className="rounded-lg border border-emerald-200 bg-emerald-50 p-3">
                   <div className="flex items-center gap-2">
-                    <div className="h-2 w-2 rounded-full bg-green-500"></div>
-                    <span className="text-sm font-medium text-green-700">
+                    <div className="h-2 w-2 rounded-full bg-emerald-500"></div>
+                    <span className="text-sm font-medium text-emerald-700">
                       현재 선택: {getConfigPanelInfo(formData.config_panel)?.label || formData.config_panel}
                     </span>
                   </div>
                   {getConfigPanelInfo(formData.config_panel)?.description && (
-                    <p className="mt-1 ml-4 text-xs text-green-600">
+                    <p className="mt-1 ml-4 text-xs text-emerald-600">
                       {getConfigPanelInfo(formData.config_panel)?.description}
                     </p>
                   )}
@@ -427,7 +427,7 @@ export default function EditWebTypePage() {
                   rows={4}
                   className="font-mono text-xs"
                 />
-                {jsonErrors.default_config && <p className="text-xs text-red-500">{jsonErrors.default_config}</p>}
+                {jsonErrors.default_config && <p className="text-xs text-destructive">{jsonErrors.default_config}</p>}
               </div>
 
               {/* 유효성 검사 규칙 */}
@@ -441,7 +441,7 @@ export default function EditWebTypePage() {
                   rows={4}
                   className="font-mono text-xs"
                 />
-                {jsonErrors.validation_rules && <p className="text-xs text-red-500">{jsonErrors.validation_rules}</p>}
+                {jsonErrors.validation_rules && <p className="text-xs text-destructive">{jsonErrors.validation_rules}</p>}
               </div>
 
               {/* 기본 스타일 */}
@@ -455,7 +455,7 @@ export default function EditWebTypePage() {
                   rows={4}
                   className="font-mono text-xs"
                 />
-                {jsonErrors.default_style && <p className="text-xs text-red-500">{jsonErrors.default_style}</p>}
+                {jsonErrors.default_style && <p className="text-xs text-destructive">{jsonErrors.default_style}</p>}
               </div>
 
               {/* 입력 속성 */}
@@ -469,7 +469,7 @@ export default function EditWebTypePage() {
                   rows={4}
                   className="font-mono text-xs"
                 />
-                {jsonErrors.input_properties && <p className="text-xs text-red-500">{jsonErrors.input_properties}</p>}
+                {jsonErrors.input_properties && <p className="text-xs text-destructive">{jsonErrors.input_properties}</p>}
               </div>
             </div>
           </CardContent>
@@ -498,8 +498,8 @@ export default function EditWebTypePage() {
 
       {/* 에러 메시지 */}
       {updateError && (
-        <div className="mt-4 rounded-md border border-red-200 bg-red-50 p-4">
-          <p className="text-red-600">
+        <div className="mt-4 rounded-md border border-destructive/20 bg-destructive/10 p-4">
+          <p className="text-destructive">
             수정 중 오류가 발생했습니다: {updateError instanceof Error ? updateError.message : "알 수 없는 오류"}
           </p>
         </div>
diff --git a/frontend/app/(main)/admin/standards/[webType]/page.tsx b/frontend/app/(main)/admin/standards/[webType]/page.tsx
index 36b660cf..fd6f5a89 100644
--- a/frontend/app/(main)/admin/standards/[webType]/page.tsx
+++ b/frontend/app/(main)/admin/standards/[webType]/page.tsx
@@ -56,7 +56,7 @@ export default function WebTypeDetailPage() {
     return (
       <div className="flex h-96 items-center justify-center">
         <div className="text-center">
-          <div className="mb-2 text-lg text-red-600">웹타입 정보를 불러오는데 실패했습니다.</div>
+          <div className="mb-2 text-lg text-destructive">웹타입 정보를 불러오는데 실패했습니다.</div>
           <Link href="/admin/standards">
             <Button variant="outline">목록으로 돌아가기</Button>
           </Link>
@@ -80,7 +80,7 @@ export default function WebTypeDetailPage() {
   }
 
   return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-muted">
       <div className="w-full max-w-none px-4 py-8 space-y-8">
       {/* 헤더 */}
       <div className="mb-6 flex items-center justify-between">
diff --git a/frontend/app/(main)/admin/standards/new/page.tsx b/frontend/app/(main)/admin/standards/new/page.tsx
index 31d02312..9ae45447 100644
--- a/frontend/app/(main)/admin/standards/new/page.tsx
+++ b/frontend/app/(main)/admin/standards/new/page.tsx
@@ -159,7 +159,7 @@ export default function NewWebTypePage() {
   };
 
   return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-muted">
       <div className="w-full max-w-none px-4 py-8 space-y-8">
       {/* 헤더 */}
       <div className="mb-6 flex items-center gap-4">
@@ -186,7 +186,7 @@ export default function NewWebTypePage() {
             {/* 웹타입 코드 */}
             <div className="space-y-2">
               <Label htmlFor="web_type">
-                웹타입 코드 <span className="text-red-500">*</span>
+                웹타입 코드 <span className="text-destructive">*</span>
               </Label>
               <Input
                 id="web_type"
@@ -202,7 +202,7 @@ export default function NewWebTypePage() {
             <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
               <div className="space-y-2">
                 <Label htmlFor="type_name">
-                  웹타입명 <span className="text-red-500">*</span>
+                  웹타입명 <span className="text-destructive">*</span>
                 </Label>
                 <Input
                   id="type_name"
@@ -225,7 +225,7 @@ export default function NewWebTypePage() {
             {/* 카테고리 */}
             <div className="space-y-2">
               <Label htmlFor="category">
-                카테고리 <span className="text-red-500">*</span>
+                카테고리 <span className="text-destructive">*</span>
               </Label>
               <Select value={formData.category} onValueChange={(value) => handleInputChange("category", value)}>
                 <SelectTrigger>
@@ -244,7 +244,7 @@ export default function NewWebTypePage() {
             {/* 연결된 컴포넌트 */}
             <div className="space-y-2">
               <Label htmlFor="component_name">
-                연결된 컴포넌트 <span className="text-red-500">*</span>
+                연결된 컴포넌트 <span className="text-destructive">*</span>
               </Label>
               <Select
                 value={formData.component_name || "TextWidget"}
@@ -296,15 +296,15 @@ export default function NewWebTypePage() {
                 </SelectContent>
               </Select>
               {formData.config_panel && (
-                <div className="rounded-lg border border-green-200 bg-green-50 p-3">
+                <div className="rounded-lg border border-emerald-200 bg-emerald-50 p-3">
                   <div className="flex items-center gap-2">
-                    <div className="h-2 w-2 rounded-full bg-green-500"></div>
-                    <span className="text-sm font-medium text-green-700">
+                    <div className="h-2 w-2 rounded-full bg-emerald-500"></div>
+                    <span className="text-sm font-medium text-emerald-700">
                       현재 선택: {getConfigPanelInfo(formData.config_panel)?.label || formData.config_panel}
                     </span>
                   </div>
                   {getConfigPanelInfo(formData.config_panel)?.description && (
-                    <p className="mt-1 ml-4 text-xs text-green-600">
+                    <p className="mt-1 ml-4 text-xs text-emerald-600">
                       {getConfigPanelInfo(formData.config_panel)?.description}
                     </p>
                   )}
@@ -385,7 +385,7 @@ export default function NewWebTypePage() {
                   rows={4}
                   className="font-mono text-xs"
                 />
-                {jsonErrors.default_config && <p className="text-xs text-red-500">{jsonErrors.default_config}</p>}
+                {jsonErrors.default_config && <p className="text-xs text-destructive">{jsonErrors.default_config}</p>}
               </div>
 
               {/* 유효성 검사 규칙 */}
@@ -399,7 +399,7 @@ export default function NewWebTypePage() {
                   rows={4}
                   className="font-mono text-xs"
                 />
-                {jsonErrors.validation_rules && <p className="text-xs text-red-500">{jsonErrors.validation_rules}</p>}
+                {jsonErrors.validation_rules && <p className="text-xs text-destructive">{jsonErrors.validation_rules}</p>}
               </div>
 
               {/* 기본 스타일 */}
@@ -413,7 +413,7 @@ export default function NewWebTypePage() {
                   rows={4}
                   className="font-mono text-xs"
                 />
-                {jsonErrors.default_style && <p className="text-xs text-red-500">{jsonErrors.default_style}</p>}
+                {jsonErrors.default_style && <p className="text-xs text-destructive">{jsonErrors.default_style}</p>}
               </div>
 
               {/* 입력 속성 */}
@@ -427,7 +427,7 @@ export default function NewWebTypePage() {
                   rows={4}
                   className="font-mono text-xs"
                 />
-                {jsonErrors.input_properties && <p className="text-xs text-red-500">{jsonErrors.input_properties}</p>}
+                {jsonErrors.input_properties && <p className="text-xs text-destructive">{jsonErrors.input_properties}</p>}
               </div>
             </div>
           </CardContent>
@@ -448,8 +448,8 @@ export default function NewWebTypePage() {
 
       {/* 에러 메시지 */}
       {createError && (
-        <div className="mt-4 rounded-md border border-red-200 bg-red-50 p-4">
-          <p className="text-red-600">
+        <div className="mt-4 rounded-md border border-destructive/20 bg-destructive/10 p-4">
+          <p className="text-destructive">
             생성 중 오류가 발생했습니다: {createError instanceof Error ? createError.message : "알 수 없는 오류"}
           </p>
         </div>
diff --git a/frontend/app/(main)/admin/standards/page.tsx b/frontend/app/(main)/admin/standards/page.tsx
index 71a63371..8a91f3f3 100644
--- a/frontend/app/(main)/admin/standards/page.tsx
+++ b/frontend/app/(main)/admin/standards/page.tsx
@@ -4,8 +4,6 @@ import React, { useState, useMemo } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Badge } from "@/components/ui/badge";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import {
   AlertDialog,
@@ -20,9 +18,11 @@ import {
 } from "@/components/ui/alert-dialog";
 import { toast } from "sonner";
 import { showErrorToast } from "@/lib/utils/toastUtils";
-import { Plus, Search, Edit, Trash2, Eye, Filter, RotateCcw, Settings, SortAsc, SortDesc } from "lucide-react";
+import { Plus, Search, Edit, Trash2, Eye, RotateCcw, SortAsc, SortDesc } from "lucide-react";
 import { useWebTypes } from "@/hooks/admin/useWebTypes";
 import Link from "next/link";
+import { ResponsiveDataView, RDVColumn, RDVCardField } from "@/components/common/ResponsiveDataView";
+import type { WebTypeStandard } from "@/hooks/admin/useWebTypes";
 
 export default function WebTypesManagePage() {
   const [searchTerm, setSearchTerm] = useState("");
@@ -31,35 +31,29 @@ export default function WebTypesManagePage() {
   const [sortField, setSortField] = useState<string>("sort_order");
   const [sortDirection, setSortDirection] = useState<"asc" | "desc">("asc");
 
-  // 웹타입 데이터 조회
   const { webTypes, isLoading, error, deleteWebType, isDeleting, deleteError, refetch } = useWebTypes({
     active: activeFilter === "all" ? undefined : activeFilter,
     search: searchTerm || undefined,
     category: categoryFilter === "all" ? undefined : categoryFilter,
   });
 
-  // 카테고리 목록 생성
   const categories = useMemo(() => {
     const uniqueCategories = Array.from(new Set(webTypes.map((wt) => wt.category).filter(Boolean)));
     return uniqueCategories.sort();
   }, [webTypes]);
 
-  // 필터링 및 정렬된 데이터
   const filteredAndSortedWebTypes = useMemo(() => {
     let filtered = [...webTypes];
 
-    // 정렬
     filtered.sort((a, b) => {
       let aValue: any = a[sortField as keyof typeof a];
       let bValue: any = b[sortField as keyof typeof b];
 
-      // 숫자 필드 처리
       if (sortField === "sort_order") {
         aValue = aValue || 0;
         bValue = bValue || 0;
       }
 
-      // 문자열 필드 처리
       if (typeof aValue === "string") {
         aValue = aValue.toLowerCase();
       }
@@ -75,17 +69,6 @@ export default function WebTypesManagePage() {
     return filtered;
   }, [webTypes, sortField, sortDirection]);
 
-  // 정렬 변경 핸들러
-  const handleSort = (field: string) => {
-    if (sortField === field) {
-      setSortDirection(sortDirection === "asc" ? "desc" : "asc");
-    } else {
-      setSortField(field);
-      setSortDirection("asc");
-    }
-  };
-
-  // 삭제 핸들러
   const handleDelete = async (webType: string, typeName: string) => {
     try {
       await deleteWebType(webType);
@@ -95,7 +78,6 @@ export default function WebTypesManagePage() {
     }
   };
 
-  // 필터 초기화
   const resetFilters = () => {
     setSearchTerm("");
     setCategoryFilter("all");
@@ -104,267 +86,266 @@ export default function WebTypesManagePage() {
     setSortDirection("asc");
   };
 
-  // 로딩 상태
-  if (isLoading) {
-    return (
-      <div className="flex h-96 items-center justify-center">
-        <div className="text-lg">웹타입 목록을 불러오는 중...</div>
-      </div>
-    );
-  }
+  // 삭제 AlertDialog 렌더 헬퍼
+  const renderDeleteDialog = (wt: WebTypeStandard) => (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button variant="ghost" size="sm">
+          <Trash2 className="h-4 w-4 text-destructive" />
+        </Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>웹타입 삭제</AlertDialogTitle>
+          <AlertDialogDescription>
+            &apos;{wt.type_name}&apos; 웹타입을 삭제하시겠습니까?
+            <br />이 작업은 되돌릴 수 없습니다.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>취소</AlertDialogCancel>
+          <AlertDialogAction
+            onClick={() => handleDelete(wt.web_type, wt.type_name)}
+            disabled={isDeleting}
+            className="bg-destructive hover:bg-destructive/90"
+          >
+            {isDeleting ? "삭제 중..." : "삭제"}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
 
-  // 에러 상태
-  if (error) {
-    return (
-      <div className="flex h-96 items-center justify-center">
-        <div className="text-center">
-          <div className="mb-2 text-lg text-destructive">웹타입 목록을 불러오는데 실패했습니다.</div>
-          <Button onClick={() => refetch()} variant="outline">
+  const columns: RDVColumn<WebTypeStandard>[] = [
+    {
+      key: "sort_order",
+      label: "순서",
+      width: "80px",
+      render: (_val, wt) => <span className="font-mono">{wt.sort_order || 0}</span>,
+    },
+    {
+      key: "web_type",
+      label: "웹타입 코드",
+      hideOnMobile: true,
+      render: (_val, wt) => <span className="font-mono">{wt.web_type}</span>,
+    },
+    {
+      key: "type_name",
+      label: "웹타입명",
+      render: (_val, wt) => (
+        <div>
+          <div className="font-medium">{wt.type_name}</div>
+          {wt.type_name_eng && (
+            <div className="text-xs text-muted-foreground">{wt.type_name_eng}</div>
+          )}
+        </div>
+      ),
+    },
+    {
+      key: "category",
+      label: "카테고리",
+      render: (_val, wt) => <Badge variant="secondary">{wt.category}</Badge>,
+    },
+    {
+      key: "description",
+      label: "설명",
+      hideOnMobile: true,
+      render: (_val, wt) => (
+        <span className="max-w-xs truncate">{wt.description || "-"}</span>
+      ),
+    },
+    {
+      key: "is_active",
+      label: "상태",
+      render: (_val, wt) => (
+        <Badge variant={wt.is_active === "Y" ? "default" : "secondary"}>
+          {wt.is_active === "Y" ? "활성화" : "비활성화"}
+        </Badge>
+      ),
+    },
+    {
+      key: "updated_date",
+      label: "최종 수정일",
+      hideOnMobile: true,
+      render: (_val, wt) => (
+        <span className="text-muted-foreground">
+          {wt.updated_date ? new Date(wt.updated_date).toLocaleDateString("ko-KR") : "-"}
+        </span>
+      ),
+    },
+  ];
+
+  const cardFields: RDVCardField<WebTypeStandard>[] = [
+    {
+      label: "카테고리",
+      render: (wt) => <Badge variant="secondary">{wt.category}</Badge>,
+    },
+    {
+      label: "순서",
+      render: (wt) => String(wt.sort_order || 0),
+    },
+    {
+      label: "설명",
+      render: (wt) => wt.description || "-",
+      hideEmpty: true,
+    },
+    {
+      label: "수정일",
+      render: (wt) =>
+        wt.updated_date ? new Date(wt.updated_date).toLocaleDateString("ko-KR") : "-",
+    },
+  ];
+
+  return (
+    <div className="space-y-6">
+      {/* 페이지 헤더 */}
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+        <div>
+          <h1 className="text-2xl font-bold">웹타입 관리</h1>
+          <p className="text-sm text-muted-foreground">화면관리에서 사용할 웹타입들을 관리합니다</p>
+        </div>
+        <Link href="/admin/standards/new">
+          <Button className="w-full sm:w-auto">
+            <Plus className="mr-2 h-4 w-4" />새 웹타입 추가
+          </Button>
+        </Link>
+      </div>
+
+      {/* 에러 상태 */}
+      {error && (
+        <div className="rounded-lg border border-destructive/50 bg-destructive/10 p-4">
+          <p className="text-sm font-semibold text-destructive">웹타입 목록을 불러오는데 실패했습니다.</p>
+          <Button onClick={() => refetch()} variant="outline" size="sm" className="mt-2">
             다시 시도
           </Button>
         </div>
-      </div>
-    );
-  }
+      )}
 
-  return (
-    <div className="min-h-screen bg-background">
-      <div className="w-full max-w-none px-4 py-8 space-y-8">
-        {/* 페이지 제목 */}
-        <div className="flex items-center justify-between bg-background rounded-lg shadow-sm border p-6">
-          <div>
-            <h1 className="text-3xl font-bold text-foreground">웹타입 관리</h1>
-            <p className="mt-2 text-muted-foreground">화면관리에서 사용할 웹타입들을 관리합니다</p>
+      {/* 검색 툴바 */}
+      <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+        <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
+          <div className="relative w-full sm:w-[300px]">
+            <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+            <Input
+              placeholder="웹타입명, 설명 검색..."
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              className="h-10 pl-10 text-sm"
+            />
           </div>
-          <Link href="/admin/standards/new">
-            <Button className="shadow-sm">
-              <Plus className="mr-2 h-4 w-4" />새 웹타입 추가
-            </Button>
-          </Link>
-        </div>
 
-        {/* 필터 및 검색 */}
-        <Card className="shadow-sm">
-          <CardHeader className="bg-muted/50">
-            <CardTitle className="flex items-center gap-2 text-lg">
-              <Filter className="h-5 w-5 text-muted-foreground" />
-              필터 및 검색
-            </CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-              {/* 검색 */}
-              <div className="relative">
-                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-                <Input
-                  placeholder="웹타입명, 설명 검색..."
-                  value={searchTerm}
-                  onChange={(e) => setSearchTerm(e.target.value)}
-                  className="pl-10"
-                />
-              </div>
+          <Select value={categoryFilter} onValueChange={setCategoryFilter}>
+            <SelectTrigger className="h-10 w-full sm:w-[160px]">
+              <SelectValue placeholder="카테고리 선택" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">전체 카테고리</SelectItem>
+              {categories.map((category) => (
+                <SelectItem key={category} value={category}>
+                  {category}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
 
-              {/* 카테고리 필터 */}
-              <Select value={categoryFilter} onValueChange={setCategoryFilter}>
-                <SelectTrigger>
-                  <SelectValue placeholder="카테고리 선택" />
-                </SelectTrigger>
+          <Select value={activeFilter} onValueChange={setActiveFilter}>
+            <SelectTrigger className="h-10 w-full sm:w-[160px]">
+              <SelectValue placeholder="상태 선택" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">전체</SelectItem>
+              <SelectItem value="Y">활성화</SelectItem>
+              <SelectItem value="N">비활성화</SelectItem>
+            </SelectContent>
+          </Select>
+
+          {/* 정렬 선택 */}
+          <div className="flex items-center gap-2">
+            <Select value={sortField} onValueChange={(v) => { setSortField(v); }}>
+              <SelectTrigger className="h-10 w-full sm:w-[140px]">
+                <SelectValue placeholder="정렬 기준" />
+              </SelectTrigger>
               <SelectContent>
-                <SelectItem value="all">전체 카테고리</SelectItem>
-                {categories.map((category) => (
-                  <SelectItem key={category} value={category}>
-                    {category}
-                  </SelectItem>
-                ))}
+                <SelectItem value="sort_order">순서</SelectItem>
+                <SelectItem value="web_type">웹타입 코드</SelectItem>
+                <SelectItem value="type_name">웹타입명</SelectItem>
+                <SelectItem value="category">카테고리</SelectItem>
+                <SelectItem value="is_active">상태</SelectItem>
+                <SelectItem value="updated_date">수정일</SelectItem>
               </SelectContent>
             </Select>
-
-              {/* 활성화 상태 필터 */}
-              <Select value={activeFilter} onValueChange={setActiveFilter}>
-                <SelectTrigger>
-                  <SelectValue placeholder="상태 선택" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="all">전체</SelectItem>
-                  <SelectItem value="Y">활성화</SelectItem>
-                  <SelectItem value="N">비활성화</SelectItem>
-                </SelectContent>
-              </Select>
-
-              {/* 초기화 버튼 */}
-              <Button variant="outline" onClick={resetFilters}>
-                <RotateCcw className="mr-2 h-4 w-4" />
-                초기화
-              </Button>
+            <Button
+              variant="outline"
+              size="icon"
+              onClick={() => setSortDirection(sortDirection === "asc" ? "desc" : "asc")}
+              className="h-10 w-10 shrink-0"
+              title={sortDirection === "asc" ? "오름차순" : "내림차순"}
+            >
+              {sortDirection === "asc" ? <SortAsc className="h-4 w-4" /> : <SortDesc className="h-4 w-4" />}
+            </Button>
           </div>
-        </CardContent>
-      </Card>
-
-        {/* 결과 통계 */}
-        <div className="bg-background rounded-lg border px-4 py-3">
-          <p className="text-foreground text-sm font-medium">총 {filteredAndSortedWebTypes.length}개의 웹타입이 있습니다.</p>
         </div>
 
-        {/* 웹타입 목록 테이블 */}
-        <div className="bg-card shadow-sm">
-          <Table>
-            <TableHeader>
-              <TableRow className="bg-background">
-                <TableHead className="h-12 px-6 py-3 text-sm font-semibold cursor-pointer hover:bg-muted/50" onClick={() => handleSort("sort_order")}>
-                  <div className="flex items-center gap-2">
-                    순서
-                    {sortField === "sort_order" &&
-                      (sortDirection === "asc" ? <SortAsc className="h-4 w-4" /> : <SortDesc className="h-4 w-4" />)}
-                  </div>
-                </TableHead>
-                <TableHead className="h-12 px-6 py-3 text-sm font-semibold cursor-pointer hover:bg-muted/50" onClick={() => handleSort("web_type")}>
-                  <div className="flex items-center gap-2">
-                    웹타입 코드
-                    {sortField === "web_type" &&
-                      (sortDirection === "asc" ? <SortAsc className="h-4 w-4" /> : <SortDesc className="h-4 w-4" />)}
-                  </div>
-                </TableHead>
-                <TableHead className="h-12 px-6 py-3 text-sm font-semibold cursor-pointer hover:bg-muted/50" onClick={() => handleSort("type_name")}>
-                  <div className="flex items-center gap-2">
-                    웹타입명
-                    {sortField === "type_name" &&
-                      (sortDirection === "asc" ? <SortAsc className="h-4 w-4" /> : <SortDesc className="h-4 w-4" />)}
-                  </div>
-                </TableHead>
-                <TableHead className="h-12 px-6 py-3 text-sm font-semibold cursor-pointer hover:bg-muted/50" onClick={() => handleSort("category")}>
-                  <div className="flex items-center gap-2">
-                    카테고리
-                    {sortField === "category" &&
-                      (sortDirection === "asc" ? <SortAsc className="h-4 w-4" /> : <SortDesc className="h-4 w-4" />)}
-                  </div>
-                </TableHead>
-                <TableHead className="h-12 px-6 py-3 text-sm font-semibold">설명</TableHead>
-                <TableHead className="h-12 px-6 py-3 text-sm font-semibold cursor-pointer hover:bg-muted/50" onClick={() => handleSort("component_name")}>
-                  <div className="flex items-center gap-2">
-                    연결된 컴포넌트
-                    {sortField === "component_name" &&
-                      (sortDirection === "asc" ? <SortAsc className="h-4 w-4" /> : <SortDesc className="h-4 w-4" />)}
-                  </div>
-                </TableHead>
-                <TableHead className="h-12 px-6 py-3 text-sm font-semibold cursor-pointer hover:bg-muted/50" onClick={() => handleSort("config_panel")}>
-                  <div className="flex items-center gap-2">
-                    설정 패널
-                    {sortField === "config_panel" &&
-                      (sortDirection === "asc" ? <SortAsc className="h-4 w-4" /> : <SortDesc className="h-4 w-4" />)}
-                  </div>
-                </TableHead>
-                <TableHead className="h-12 px-6 py-3 text-sm font-semibold cursor-pointer hover:bg-muted/50" onClick={() => handleSort("is_active")}>
-                  <div className="flex items-center gap-2">
-                    상태
-                    {sortField === "is_active" &&
-                      (sortDirection === "asc" ? <SortAsc className="h-4 w-4" /> : <SortDesc className="h-4 w-4" />)}
-                  </div>
-                </TableHead>
-                <TableHead className="h-12 px-6 py-3 text-sm font-semibold cursor-pointer hover:bg-muted/50" onClick={() => handleSort("updated_date")}>
-                  <div className="flex items-center gap-2">
-                    최종 수정일
-                    {sortField === "updated_date" &&
-                      (sortDirection === "asc" ? <SortAsc className="h-4 w-4" /> : <SortDesc className="h-4 w-4" />)}
-                  </div>
-                </TableHead>
-                <TableHead className="h-12 px-6 py-3 text-sm font-semibold text-center">작업</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {filteredAndSortedWebTypes.length === 0 ? (
-                <TableRow>
-                  <TableCell colSpan={10} className="py-8 text-center">
-                    조건에 맞는 웹타입이 없습니다.
-                  </TableCell>
-                </TableRow>
-              ) : (
-                filteredAndSortedWebTypes.map((webType) => (
-                  <TableRow key={webType.web_type} className="bg-background transition-colors hover:bg-muted/50">
-                    <TableCell className="h-16 px-6 py-3 font-mono text-sm">{webType.sort_order || 0}</TableCell>
-                    <TableCell className="h-16 px-6 py-3 font-mono text-sm">{webType.web_type}</TableCell>
-                    <TableCell className="h-16 px-6 py-3 font-medium text-sm">
-                      {webType.type_name}
-                      {webType.type_name_eng && (
-                        <div className="text-muted-foreground text-xs">{webType.type_name_eng}</div>
-                      )}
-                    </TableCell>
-                    <TableCell className="h-16 px-6 py-3 text-sm">
-                      <Badge variant="secondary">{webType.category}</Badge>
-                    </TableCell>
-                    <TableCell className="h-16 px-6 py-3 max-w-xs truncate text-sm">{webType.description || "-"}</TableCell>
-                    <TableCell className="h-16 px-6 py-3 text-sm">
-                      <Badge variant="outline" className="font-mono text-xs">
-                        {webType.component_name || "TextWidget"}
-                      </Badge>
-                    </TableCell>
-                    <TableCell className="h-16 px-6 py-3 text-sm">
-                      <Badge variant="secondary" className="font-mono text-xs">
-                        {webType.config_panel === "none" || !webType.config_panel ? "기본 설정" : webType.config_panel}
-                      </Badge>
-                    </TableCell>
-                    <TableCell className="h-16 px-6 py-3 text-sm">
-                      <Badge variant={webType.is_active === "Y" ? "default" : "secondary"}>
-                        {webType.is_active === "Y" ? "활성화" : "비활성화"}
-                      </Badge>
-                    </TableCell>
-                    <TableCell className="h-16 px-6 py-3 text-muted-foreground text-sm">
-                      {webType.updated_date ? new Date(webType.updated_date).toLocaleDateString("ko-KR") : "-"}
-                    </TableCell>
-                    <TableCell className="h-16 px-6 py-3 text-sm">
-                          <div className="flex items-center gap-2">
-                            <Link href={`/admin/standards/${webType.web_type}`}>
-                              <Button variant="ghost" size="sm">
-                                <Eye className="h-4 w-4" />
-                              </Button>
-                            </Link>
-                            <Link href={`/admin/standards/${webType.web_type}/edit`}>
-                              <Button variant="ghost" size="sm">
-                                <Edit className="h-4 w-4" />
-                              </Button>
-                            </Link>
-                            <AlertDialog>
-                              <AlertDialogTrigger asChild>
-                                <Button variant="ghost" size="sm">
-                                  <Trash2 className="h-4 w-4 text-destructive" />
-                                </Button>
-                              </AlertDialogTrigger>
-                          <AlertDialogContent>
-                            <AlertDialogHeader>
-                              <AlertDialogTitle>웹타입 삭제</AlertDialogTitle>
-                              <AlertDialogDescription>
-                                '{webType.type_name}' 웹타입을 삭제하시겠습니까?
-                                <br />이 작업은 되돌릴 수 없습니다.
-                              </AlertDialogDescription>
-                            </AlertDialogHeader>
-                            <AlertDialogFooter>
-                              <AlertDialogCancel>취소</AlertDialogCancel>
-                              <AlertDialogAction
-                                onClick={() => handleDelete(webType.web_type, webType.type_name)}
-                                disabled={isDeleting}
-                                className="bg-destructive hover:bg-destructive/90"
-                              >
-                                {isDeleting ? "삭제 중..." : "삭제"}
-                              </AlertDialogAction>
-                            </AlertDialogFooter>
-                          </AlertDialogContent>
-                        </AlertDialog>
-                      </div>
-                    </TableCell>
-                  </TableRow>
-                ))
-              )}
-            </TableBody>
-          </Table>
-        </div>
+        <Button variant="outline" onClick={resetFilters} className="h-10 w-full sm:w-auto">
+          <RotateCcw className="mr-2 h-4 w-4" />
+          초기화
+        </Button>
+      </div>
 
+      {/* 결과 수 */}
+      <div className="text-sm text-muted-foreground">
+        총 <span className="font-semibold text-foreground">{filteredAndSortedWebTypes.length}</span>개의 웹타입
+      </div>
+
+      {/* 삭제 에러 */}
       {deleteError && (
-        <div className="mt-4 rounded-md border border-destructive/30 bg-destructive/10 p-4">
-          <p className="text-destructive">
+        <div className="rounded-lg border border-destructive/50 bg-destructive/10 p-4">
+          <p className="text-sm text-destructive">
             삭제 중 오류가 발생했습니다: {deleteError instanceof Error ? deleteError.message : "알 수 없는 오류"}
           </p>
         </div>
       )}
-      </div>
+
+      <ResponsiveDataView<WebTypeStandard>
+        data={filteredAndSortedWebTypes}
+        columns={columns}
+        keyExtractor={(wt) => wt.web_type}
+        isLoading={isLoading}
+        emptyMessage="조건에 맞는 웹타입이 없습니다."
+        skeletonCount={6}
+        cardTitle={(wt) => wt.type_name}
+        cardSubtitle={(wt) => (
+          <>
+            {wt.type_name_eng && (
+              <span className="text-xs text-muted-foreground">{wt.type_name_eng} / </span>
+            )}
+            <span className="font-mono text-xs text-muted-foreground">{wt.web_type}</span>
+          </>
+        )}
+        cardHeaderRight={(wt) => (
+          <Badge variant={wt.is_active === "Y" ? "default" : "secondary"} className="shrink-0">
+            {wt.is_active === "Y" ? "활성화" : "비활성화"}
+          </Badge>
+        )}
+        cardFields={cardFields}
+        actionsLabel="작업"
+        actionsWidth="140px"
+        renderActions={(wt) => (
+          <>
+            <Link href={`/admin/standards/${wt.web_type}`}>
+              <Button variant="ghost" size="sm">
+                <Eye className="h-4 w-4" />
+              </Button>
+            </Link>
+            <Link href={`/admin/standards/${wt.web_type}/edit`}>
+              <Button variant="ghost" size="sm">
+                <Edit className="h-4 w-4" />
+              </Button>
+            </Link>
+            {renderDeleteDialog(wt)}
+          </>
+        )}
+      />
     </div>
   );
 }
diff --git a/frontend/app/(main)/admin/system-notices/page.tsx b/frontend/app/(main)/admin/system-notices/page.tsx
new file mode 100644
index 00000000..56fd99aa
--- /dev/null
+++ b/frontend/app/(main)/admin/system-notices/page.tsx
@@ -0,0 +1,504 @@
+"use client";
+
+import React, { useState, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { Plus, Pencil, Trash2, Search, RefreshCw } from "lucide-react";
+import { ScrollToTop } from "@/components/common/ScrollToTop";
+import {
+  SystemNotice,
+  CreateSystemNoticePayload,
+  getSystemNotices,
+  createSystemNotice,
+  updateSystemNotice,
+  deleteSystemNotice,
+} from "@/lib/api/systemNotice";
+import { ResponsiveDataView, RDVColumn, RDVCardField } from "@/components/common/ResponsiveDataView";
+
+function getPriorityLabel(priority: number): { label: string; variant: "default" | "secondary" | "destructive" | "outline" } {
+  if (priority >= 3) return { label: "높음", variant: "destructive" };
+  if (priority === 2) return { label: "보통", variant: "default" };
+  return { label: "낮음", variant: "secondary" };
+}
+
+function formatDate(dateStr: string): string {
+  if (!dateStr) return "-";
+  return new Date(dateStr).toLocaleDateString("ko-KR", {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+  });
+}
+
+const EMPTY_FORM: CreateSystemNoticePayload = {
+  title: "",
+  content: "",
+  is_active: true,
+  priority: 1,
+};
+
+export default function SystemNoticesPage() {
+  const [notices, setNotices] = useState<SystemNotice[]>([]);
+  const [filteredNotices, setFilteredNotices] = useState<SystemNotice[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [errorMsg, setErrorMsg] = useState<string | null>(null);
+
+  const [searchText, setSearchText] = useState("");
+  const [statusFilter, setStatusFilter] = useState<string>("all");
+
+  const [isFormOpen, setIsFormOpen] = useState(false);
+  const [editTarget, setEditTarget] = useState<SystemNotice | null>(null);
+  const [formData, setFormData] = useState<CreateSystemNoticePayload>(EMPTY_FORM);
+  const [isSaving, setIsSaving] = useState(false);
+
+  const [deleteTarget, setDeleteTarget] = useState<SystemNotice | null>(null);
+  const [isDeleting, setIsDeleting] = useState(false);
+
+  const loadNotices = useCallback(async () => {
+    setIsLoading(true);
+    setErrorMsg(null);
+    const result = await getSystemNotices();
+    if (result.success && result.data) {
+      setNotices(result.data);
+    } else {
+      setErrorMsg(result.message || "공지사항 목록을 불러오는 데 실패했습니다.");
+    }
+    setIsLoading(false);
+  }, []);
+
+  useEffect(() => {
+    loadNotices();
+  }, [loadNotices]);
+
+  useEffect(() => {
+    let result = [...notices];
+
+    if (statusFilter !== "all") {
+      const isActive = statusFilter === "active";
+      result = result.filter((n) => n.is_active === isActive);
+    }
+
+    if (searchText.trim()) {
+      const keyword = searchText.toLowerCase();
+      result = result.filter(
+        (n) =>
+          n.title.toLowerCase().includes(keyword) ||
+          n.content.toLowerCase().includes(keyword)
+      );
+    }
+
+    setFilteredNotices(result);
+  }, [notices, searchText, statusFilter]);
+
+  const handleOpenCreate = () => {
+    setEditTarget(null);
+    setFormData(EMPTY_FORM);
+    setIsFormOpen(true);
+  };
+
+  const handleOpenEdit = (notice: SystemNotice) => {
+    setEditTarget(notice);
+    setFormData({
+      title: notice.title,
+      content: notice.content,
+      is_active: notice.is_active,
+      priority: notice.priority,
+    });
+    setIsFormOpen(true);
+  };
+
+  const handleSave = async () => {
+    if (!formData.title.trim()) {
+      alert("제목을 입력해주세요.");
+      return;
+    }
+    if (!formData.content.trim()) {
+      alert("내용을 입력해주세요.");
+      return;
+    }
+
+    setIsSaving(true);
+    let result;
+
+    if (editTarget) {
+      result = await updateSystemNotice(editTarget.id, formData);
+    } else {
+      result = await createSystemNotice(formData);
+    }
+
+    if (result.success) {
+      setIsFormOpen(false);
+      await loadNotices();
+    } else {
+      alert(result.message || "저장에 실패했습니다.");
+    }
+    setIsSaving(false);
+  };
+
+  const handleDelete = async () => {
+    if (!deleteTarget) return;
+    setIsDeleting(true);
+    const result = await deleteSystemNotice(deleteTarget.id);
+    if (result.success) {
+      setDeleteTarget(null);
+      await loadNotices();
+    } else {
+      alert(result.message || "삭제에 실패했습니다.");
+    }
+    setIsDeleting(false);
+  };
+
+  const columns: RDVColumn<SystemNotice>[] = [
+    {
+      key: "title",
+      label: "제목",
+      render: (_val, notice) => (
+        <span className="font-medium">{notice.title}</span>
+      ),
+    },
+    {
+      key: "is_active",
+      label: "상태",
+      width: "100px",
+      render: (_val, notice) => (
+        <Badge variant={notice.is_active ? "default" : "secondary"}>
+          {notice.is_active ? "활성" : "비활성"}
+        </Badge>
+      ),
+    },
+    {
+      key: "priority",
+      label: "우선순위",
+      width: "100px",
+      render: (_val, notice) => {
+        const p = getPriorityLabel(notice.priority);
+        return <Badge variant={p.variant}>{p.label}</Badge>;
+      },
+    },
+    {
+      key: "created_by",
+      label: "작성자",
+      width: "120px",
+      hideOnMobile: true,
+      render: (_val, notice) => (
+        <span className="text-muted-foreground">{notice.created_by || "-"}</span>
+      ),
+    },
+    {
+      key: "created_at",
+      label: "작성일",
+      width: "120px",
+      hideOnMobile: true,
+      render: (_val, notice) => (
+        <span className="text-muted-foreground">{formatDate(notice.created_at)}</span>
+      ),
+    },
+  ];
+
+  const cardFields: RDVCardField<SystemNotice>[] = [
+    {
+      label: "작성자",
+      render: (notice) => notice.created_by || "-",
+    },
+    {
+      label: "작성일",
+      render: (notice) => formatDate(notice.created_at),
+    },
+  ];
+
+  return (
+    <div className="flex min-h-screen flex-col bg-background">
+      <div className="space-y-6 p-6">
+        {/* 페이지 헤더 */}
+        <div className="space-y-2 border-b pb-4">
+          <h1 className="text-3xl font-bold tracking-tight">시스템 공지사항</h1>
+          <p className="text-sm text-muted-foreground">
+            시스템 사용자에게 전달할 공지사항을 관리합니다.
+          </p>
+        </div>
+
+        {/* 에러 메시지 */}
+        {errorMsg && (
+          <div className="rounded-lg border border-destructive/50 bg-destructive/10 p-4">
+            <div className="flex items-center justify-between">
+              <p className="text-sm font-semibold text-destructive">오류가 발생했습니다</p>
+              <button
+                onClick={() => setErrorMsg(null)}
+                className="text-destructive transition-colors hover:text-destructive/80"
+                aria-label="에러 메시지 닫기"
+              >
+                ✕
+              </button>
+            </div>
+            <p className="mt-1.5 text-sm text-destructive/80">{errorMsg}</p>
+          </div>
+        )}
+
+        {/* 검색 툴바 */}
+        <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+          <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
+            <div className="w-full sm:w-[160px]">
+              <Select value={statusFilter} onValueChange={setStatusFilter}>
+                <SelectTrigger className="h-10">
+                  <SelectValue placeholder="상태 필터" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">전체</SelectItem>
+                  <SelectItem value="active">활성</SelectItem>
+                  <SelectItem value="inactive">비활성</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="relative w-full sm:w-[300px]">
+              <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+              <Input
+                placeholder="제목 또는 내용으로 검색..."
+                value={searchText}
+                onChange={(e) => setSearchText(e.target.value)}
+                className="h-10 pl-10 text-sm"
+              />
+            </div>
+          </div>
+
+          <div className="flex items-center gap-3">
+            <span className="text-sm text-muted-foreground">
+              총 <span className="font-semibold text-foreground">{filteredNotices.length}</span> 건
+            </span>
+            <Button
+              variant="outline"
+              size="icon"
+              className="h-10 w-10"
+              onClick={loadNotices}
+              aria-label="새로고침"
+            >
+              <RefreshCw className="h-4 w-4" />
+            </Button>
+            <Button className="h-10 gap-2 text-sm font-medium" onClick={handleOpenCreate}>
+              <Plus className="h-4 w-4" />
+              등록
+            </Button>
+          </div>
+        </div>
+
+        <ResponsiveDataView<SystemNotice>
+          data={filteredNotices}
+          columns={columns}
+          keyExtractor={(n) => String(n.id)}
+          isLoading={isLoading}
+          emptyMessage="공지사항이 없습니다."
+          skeletonCount={5}
+          cardTitle={(n) => n.title}
+          cardHeaderRight={(n) => (
+            <div className="flex items-center gap-1">
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-8 w-8"
+                onClick={() => handleOpenEdit(n)}
+                aria-label="수정"
+              >
+                <Pencil className="h-4 w-4" />
+              </Button>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-8 w-8 text-destructive hover:text-destructive"
+                onClick={() => setDeleteTarget(n)}
+                aria-label="삭제"
+              >
+                <Trash2 className="h-4 w-4" />
+              </Button>
+            </div>
+          )}
+          cardSubtitle={(n) => {
+            const p = getPriorityLabel(n.priority);
+            return (
+              <span className="flex flex-wrap gap-2 pt-1">
+                <Badge variant={n.is_active ? "default" : "secondary"}>
+                  {n.is_active ? "활성" : "비활성"}
+                </Badge>
+                <Badge variant={p.variant}>{p.label}</Badge>
+              </span>
+            );
+          }}
+          cardFields={cardFields}
+          actionsLabel="관리"
+          actionsWidth="120px"
+          renderActions={(notice) => (
+            <>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-8 w-8"
+                onClick={() => handleOpenEdit(notice)}
+                aria-label="수정"
+              >
+                <Pencil className="h-4 w-4" />
+              </Button>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-8 w-8 text-destructive hover:text-destructive"
+                onClick={() => setDeleteTarget(notice)}
+                aria-label="삭제"
+              >
+                <Trash2 className="h-4 w-4" />
+              </Button>
+            </>
+          )}
+        />
+      </div>
+
+      {/* 등록/수정 모달 */}
+      <Dialog open={isFormOpen} onOpenChange={setIsFormOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-[540px]">
+          <DialogHeader>
+            <DialogTitle className="text-base sm:text-lg">
+              {editTarget ? "공지사항 수정" : "공지사항 등록"}
+            </DialogTitle>
+            <DialogDescription className="text-xs sm:text-sm">
+              {editTarget ? "공지사항 내용을 수정합니다." : "새로운 공지사항을 등록합니다."}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-4">
+            <div>
+              <Label htmlFor="notice-title" className="text-xs sm:text-sm">
+                제목 <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                id="notice-title"
+                value={formData.title}
+                onChange={(e) => setFormData((prev) => ({ ...prev, title: e.target.value }))}
+                placeholder="공지사항 제목을 입력하세요"
+                className="mt-1 h-8 text-xs sm:h-10 sm:text-sm"
+              />
+            </div>
+
+            <div>
+              <Label htmlFor="notice-content" className="text-xs sm:text-sm">
+                내용 <span className="text-destructive">*</span>
+              </Label>
+              <Textarea
+                id="notice-content"
+                value={formData.content}
+                onChange={(e) => setFormData((prev) => ({ ...prev, content: e.target.value }))}
+                placeholder="공지사항 내용을 입력하세요"
+                className="mt-1 min-h-[120px] text-xs sm:text-sm"
+              />
+            </div>
+
+            <div>
+              <Label htmlFor="notice-priority" className="text-xs sm:text-sm">
+                우선순위
+              </Label>
+              <Select
+                value={String(formData.priority)}
+                onValueChange={(val) =>
+                  setFormData((prev) => ({ ...prev, priority: Number(val) }))
+                }
+              >
+                <SelectTrigger id="notice-priority" className="mt-1 h-8 text-xs sm:h-10 sm:text-sm">
+                  <SelectValue placeholder="우선순위 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="1">낮음</SelectItem>
+                  <SelectItem value="2">보통</SelectItem>
+                  <SelectItem value="3">높음</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="flex items-center gap-2">
+              <Checkbox
+                id="notice-active"
+                checked={formData.is_active}
+                onCheckedChange={(checked) =>
+                  setFormData((prev) => ({ ...prev, is_active: !!checked }))
+                }
+              />
+              <Label htmlFor="notice-active" className="cursor-pointer text-xs sm:text-sm">
+                활성화 (체크 시 공지사항이 사용자에게 표시됩니다)
+              </Label>
+            </div>
+          </div>
+
+          <DialogFooter className="gap-2 sm:gap-0">
+            <Button
+              variant="outline"
+              onClick={() => setIsFormOpen(false)}
+              disabled={isSaving}
+              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+            >
+              취소
+            </Button>
+            <Button
+              onClick={handleSave}
+              disabled={isSaving}
+              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+            >
+              {isSaving ? "저장 중..." : "저장"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 삭제 확인 모달 */}
+      <Dialog open={!!deleteTarget} onOpenChange={(open) => !open && setDeleteTarget(null)}>
+        <DialogContent className="max-w-[95vw] sm:max-w-[440px]">
+          <DialogHeader>
+            <DialogTitle className="text-base sm:text-lg">공지사항 삭제</DialogTitle>
+            <DialogDescription className="text-xs sm:text-sm">
+              아래 공지사항을 삭제하시겠습니까?
+              <br />이 작업은 되돌릴 수 없습니다.
+              <br />
+              <span className="mt-2 block font-medium text-foreground">
+                &quot;{deleteTarget?.title}&quot;
+              </span>
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter className="gap-2 sm:gap-0">
+            <Button
+              variant="outline"
+              onClick={() => setDeleteTarget(null)}
+              disabled={isDeleting}
+              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+            >
+              취소
+            </Button>
+            <Button
+              variant="destructive"
+              onClick={handleDelete}
+              disabled={isDeleting}
+              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+            >
+              {isDeleting ? "삭제 중..." : "삭제"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <ScrollToTop />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/admin/systemMng/collection-managementList/page.tsx b/frontend/app/(main)/admin/systemMng/collection-managementList/page.tsx
index 0b211a79..9d9b2905 100644
--- a/frontend/app/(main)/admin/systemMng/collection-managementList/page.tsx
+++ b/frontend/app/(main)/admin/systemMng/collection-managementList/page.tsx
@@ -142,28 +142,28 @@ export default function CollectionManagementPage() {
 
   const getStatusBadge = (isActive: string) => {
     return isActive === "Y" ? (
-      <Badge className="bg-green-100 text-green-800">활성</Badge>
+      <Badge className="bg-emerald-100 text-emerald-800">활성</Badge>
     ) : (
-      <Badge className="bg-red-100 text-red-800">비활성</Badge>
+      <Badge className="bg-destructive/10 text-red-800">비활성</Badge>
     );
   };
 
   const getTypeBadge = (type: string) => {
     const option = collectionTypeOptions.find(opt => opt.value === type);
     const colors = {
-      full: "bg-blue-100 text-blue-800",
+      full: "bg-primary/10 text-primary",
       incremental: "bg-purple-100 text-purple-800",
-      delta: "bg-orange-100 text-orange-800",
+      delta: "bg-amber-100 text-orange-800",
     };
     return (
-      <Badge className={colors[type as keyof typeof colors] || "bg-gray-100 text-gray-800"}>
+      <Badge className={colors[type as keyof typeof colors] || "bg-muted text-foreground"}>
         {option?.label || type}
       </Badge>
     );
   };
 
   return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-muted">
       <div className="w-full max-w-none px-4 py-8 space-y-8">
         {/* 헤더 */}
         <div className="flex items-center justify-between">
diff --git a/frontend/app/(main)/admin/systemMng/dataflow/edit/[diagramId]/page.tsx b/frontend/app/(main)/admin/systemMng/dataflow/edit/[diagramId]/page.tsx
index 94ea23a8..f3a8a895 100644
--- a/frontend/app/(main)/admin/systemMng/dataflow/edit/[diagramId]/page.tsx
+++ b/frontend/app/(main)/admin/systemMng/dataflow/edit/[diagramId]/page.tsx
@@ -51,8 +51,8 @@ export default function DataFlowEditPage() {
     return (
       <div className="flex h-64 items-center justify-center">
         <div className="text-center">
-          <div className="mx-auto mb-4 h-8 w-8 animate-spin rounded-full border-b-2 border-blue-600"></div>
-          <p className="text-gray-500">관계도 정보를 불러오는 중...</p>
+          <div className="mx-auto mb-4 h-8 w-8 animate-spin rounded-full border-b-2 border-primary"></div>
+          <p className="text-muted-foreground">관계도 정보를 불러오는 중...</p>
         </div>
       </div>
     );
@@ -68,16 +68,16 @@ export default function DataFlowEditPage() {
             <span>목록으로</span>
           </Button>
           <div>
-            <h1 className="text-2xl font-bold text-gray-900">📊 관계도 편집</h1>
-            <p className="mt-1 text-gray-600">
-              <span className="font-medium text-blue-600">{diagramName}</span> 관계도를 편집하고 있습니다
+            <h1 className="text-2xl font-bold text-foreground">📊 관계도 편집</h1>
+            <p className="mt-1 text-muted-foreground">
+              <span className="font-medium text-primary">{diagramName}</span> 관계도를 편집하고 있습니다
             </p>
           </div>
         </div>
       </div>
 
       {/* 데이터플로우 디자이너 */}
-      <div className="rounded-lg border border-gray-200 bg-white">
+      <div className="rounded-lg border border-border bg-white">
         <DataFlowDesigner
           key={diagramId}
           selectedDiagram={diagramName}
diff --git a/frontend/app/(main)/admin/systemMng/dataflow/node-editorList/page.tsx b/frontend/app/(main)/admin/systemMng/dataflow/node-editorList/page.tsx
index 55435ab2..5930ecb9 100644
--- a/frontend/app/(main)/admin/systemMng/dataflow/node-editorList/page.tsx
+++ b/frontend/app/(main)/admin/systemMng/dataflow/node-editorList/page.tsx
@@ -17,8 +17,8 @@ export default function NodeEditorPage() {
   }, [router]);
 
   return (
-    <div className="flex h-screen items-center justify-center bg-gray-50">
-      <div className="text-gray-500">제어 관리 페이지로 이동중...</div>
+    <div className="flex h-screen items-center justify-center bg-muted">
+      <div className="text-muted-foreground">제어 관리 페이지로 이동중...</div>
     </div>
   );
 }
diff --git a/frontend/app/(main)/admin/systemMng/i18nList/page.tsx b/frontend/app/(main)/admin/systemMng/i18nList/page.tsx
index 79264d72..0ce088fb 100644
--- a/frontend/app/(main)/admin/systemMng/i18nList/page.tsx
+++ b/frontend/app/(main)/admin/systemMng/i18nList/page.tsx
@@ -528,14 +528,14 @@ export default function I18nPage() {
             ? "공통"
             : companies.find((c) => c.code === row.original.companyCode)?.name || row.original.companyCode;
 
-        return <span className={row.original.isActive === "N" ? "text-gray-400" : ""}>{companyName}</span>;
+        return <span className={row.original.isActive === "N" ? "text-muted-foreground/70" : ""}>{companyName}</span>;
       },
     },
     {
       accessorKey: "menuName",
       header: "메뉴명",
       cell: ({ row }: any) => (
-        <span className={row.original.isActive === "N" ? "text-gray-400" : ""}>{row.original.menuName}</span>
+        <span className={row.original.isActive === "N" ? "text-muted-foreground/70" : ""}>{row.original.menuName}</span>
       ),
     },
     {
@@ -543,8 +543,8 @@ export default function I18nPage() {
       header: "언어 키",
       cell: ({ row }: any) => (
         <div
-          className={`cursor-pointer rounded p-1 hover:bg-gray-100 ${
-            row.original.isActive === "N" ? "text-gray-400" : ""
+          className={`cursor-pointer rounded p-1 hover:bg-muted ${
+            row.original.isActive === "N" ? "text-muted-foreground/70" : ""
           }`}
           onDoubleClick={() => handleEditKey(row.original)}
         >
@@ -556,7 +556,7 @@ export default function I18nPage() {
       accessorKey: "description",
       header: "설명",
       cell: ({ row }: any) => (
-        <span className={row.original.isActive === "N" ? "text-gray-400" : ""}>{row.original.description}</span>
+        <span className={row.original.isActive === "N" ? "text-muted-foreground/70" : ""}>{row.original.description}</span>
       ),
     },
     {
@@ -567,8 +567,8 @@ export default function I18nPage() {
           onClick={() => handleToggleStatus(row.original.keyId)}
           className={`rounded px-2 py-1 text-xs font-medium transition-colors ${
             row.original.isActive === "Y"
-              ? "bg-green-100 text-green-800 hover:bg-green-200"
-              : "bg-gray-100 text-gray-800 hover:bg-gray-200"
+              ? "bg-emerald-100 text-emerald-800 hover:bg-emerald-200"
+              : "bg-muted text-foreground hover:bg-muted/80"
           }`}
         >
           {row.original.isActive === "Y" ? "활성" : "비활성"}
@@ -605,8 +605,8 @@ export default function I18nPage() {
       header: "언어 코드",
       cell: ({ row }: any) => (
         <div
-          className={`cursor-pointer rounded p-1 hover:bg-gray-100 ${
-            row.original.isActive === "N" ? "text-gray-400" : ""
+          className={`cursor-pointer rounded p-1 hover:bg-muted ${
+            row.original.isActive === "N" ? "text-muted-foreground/70" : ""
           }`}
           onDoubleClick={() => handleEditLanguage(row.original)}
         >
@@ -618,14 +618,14 @@ export default function I18nPage() {
       accessorKey: "langName",
       header: "언어명 (영문)",
       cell: ({ row }: any) => (
-        <span className={row.original.isActive === "N" ? "text-gray-400" : ""}>{row.original.langName}</span>
+        <span className={row.original.isActive === "N" ? "text-muted-foreground/70" : ""}>{row.original.langName}</span>
       ),
     },
     {
       accessorKey: "langNative",
       header: "언어명 (원어)",
       cell: ({ row }: any) => (
-        <span className={row.original.isActive === "N" ? "text-gray-400" : ""}>{row.original.langNative}</span>
+        <span className={row.original.isActive === "N" ? "text-muted-foreground/70" : ""}>{row.original.langNative}</span>
       ),
     },
     {
@@ -636,8 +636,8 @@ export default function I18nPage() {
           onClick={() => handleToggleLanguageStatus(row.original.langCode)}
           className={`rounded px-2 py-1 text-xs font-medium transition-colors ${
             row.original.isActive === "Y"
-              ? "bg-green-100 text-green-800 hover:bg-green-200"
-              : "bg-gray-100 text-gray-800 hover:bg-gray-200"
+              ? "bg-emerald-100 text-emerald-800 hover:bg-emerald-200"
+              : "bg-muted text-foreground hover:bg-muted/80"
           }`}
         >
           {row.original.isActive === "Y" ? "활성" : "비활성"}
@@ -651,7 +651,7 @@ export default function I18nPage() {
   }
 
   return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-muted">
       <div className="w-full max-w-none px-4 py-8">
         <div className="container mx-auto p-2">
           {/* 탭 네비게이션 */}
@@ -659,7 +659,7 @@ export default function I18nPage() {
             <button
               onClick={() => setActiveTab("keys")}
               className={`rounded-t-lg px-3 py-1.5 text-sm font-medium transition-colors ${
-                activeTab === "keys" ? "bg-accent0 text-white" : "bg-gray-100 text-gray-700 hover:bg-gray-200"
+                activeTab === "keys" ? "bg-accent0 text-white" : "bg-muted text-foreground hover:bg-muted/80"
               }`}
             >
               다국어 키 관리
@@ -667,7 +667,7 @@ export default function I18nPage() {
             <button
               onClick={() => setActiveTab("languages")}
               className={`rounded-t-lg px-3 py-1.5 text-sm font-medium transition-colors ${
-                activeTab === "languages" ? "bg-accent0 text-white" : "bg-gray-100 text-gray-700 hover:bg-gray-200"
+                activeTab === "languages" ? "bg-accent0 text-white" : "bg-muted text-foreground hover:bg-muted/80"
               }`}
             >
               언어 관리
@@ -854,7 +854,7 @@ export default function I18nPage() {
                         </div>
                       </div>
                     ) : (
-                      <div className="flex h-64 items-center justify-center text-gray-500">
+                      <div className="flex h-64 items-center justify-center text-muted-foreground">
                         <div className="text-center">
                           <div className="mb-2 text-lg font-medium">언어 키를 선택하세요</div>
                           <div className="text-sm">좌측 목록에서 편집할 언어 키를 클릭하세요</div>
diff --git a/frontend/app/(main)/admin/systemMng/tableMngList/page.tsx b/frontend/app/(main)/admin/systemMng/tableMngList/page.tsx
index ec6aabae..3064e4e5 100644
--- a/frontend/app/(main)/admin/systemMng/tableMngList/page.tsx
+++ b/frontend/app/(main)/admin/systemMng/tableMngList/page.tsx
@@ -21,6 +21,7 @@ import {
   ChevronsUpDown,
   Loader2,
 } from "lucide-react";
+import { ResponsiveSplitPanel } from "@/components/common/ResponsiveSplitPanel";
 import { cn } from "@/lib/utils";
 import { LoadingSpinner } from "@/components/common/LoadingSpinner";
 import { toast } from "sonner";
@@ -1409,9 +1410,8 @@ export default function TableManagementPage() {
           </div>
         </div>
 
-        <div className="flex h-full flex-1 gap-6 overflow-hidden">
-          {/* 좌측 사이드바: 테이블 목록 (20%) */}
-          <div className="flex h-full w-[20%] flex-col border-r pr-4">
+        <ResponsiveSplitPanel
+          left={
             <div className="flex h-full flex-col space-y-4">
               {/* 검색 */}
               <div className="flex-shrink-0">
@@ -1530,10 +1530,8 @@ export default function TableManagementPage() {
                 )}
               </div>
             </div>
-          </div>
-
-          {/* 우측 메인 영역: 컬럼 타입 관리 (80%) */}
-          <div className="flex h-full w-[80%] flex-col overflow-hidden pl-0">
+          }
+          right={
             <div className="flex h-full flex-col overflow-hidden">
               {!selectedTable ? (
                 <div className="bg-card flex h-64 flex-col items-center justify-center rounded-lg border">
@@ -1878,7 +1876,7 @@ export default function TableManagementPage() {
                                                   {referenceTableColumns[column.referenceTable]?.map((refCol) => (
                                                     <CommandItem
                                                       key={refCol.columnName}
-                                                      value={`${refCol.columnLabel || ""} ${refCol.columnName}`}
+                                                      value={`${refCol.displayName || ""} ${refCol.columnName}`}
                                                       onSelect={() => {
                                                         handleDetailSettingsChange(
                                                           column.columnName,
@@ -1905,9 +1903,9 @@ export default function TableManagementPage() {
                                                       />
                                                       <div className="flex flex-col">
                                                         <span className="font-medium">{refCol.columnName}</span>
-                                                        {refCol.columnLabel && (
+                                                        {refCol.displayName && (
                                                           <span className="text-muted-foreground text-[10px]">
-                                                            {refCol.columnLabel}
+                                                            {refCol.displayName}
                                                           </span>
                                                         )}
                                                       </div>
@@ -2006,8 +2004,14 @@ export default function TableManagementPage() {
                 </>
               )}
             </div>
-          </div>
-        </div>
+          }
+          leftTitle="테이블 목록"
+          leftWidth={20}
+          minLeftWidth={10}
+          maxLeftWidth={35}
+          height="100%"
+          className="flex-1 overflow-hidden"
+        />
 
         {/* DDL 모달 컴포넌트들 */}
         {isSuperAdmin && (
diff --git a/frontend/app/(main)/admin/templates/page.tsx b/frontend/app/(main)/admin/templates/page.tsx
index 151bb9b4..8c6123de 100644
--- a/frontend/app/(main)/admin/templates/page.tsx
+++ b/frontend/app/(main)/admin/templates/page.tsx
@@ -120,12 +120,12 @@ export default function TemplatesManagePage() {
 
     // 간단한 아이콘 매핑 (실제로는 더 복잡한 시스템 필요)
     const iconMap: Record<string, JSX.Element> = {
-      table: <div className="h-4 w-4 border border-gray-400" />,
-      "mouse-pointer": <div className="h-4 w-4 rounded bg-blue-500" />,
-      upload: <div className="h-4 w-4 border-2 border-dashed border-gray-400" />,
+      table: <div className="h-4 w-4 border border-input" />,
+      "mouse-pointer": <div className="h-4 w-4 rounded bg-primary" />,
+      upload: <div className="h-4 w-4 border-2 border-dashed border-input" />,
     };
 
-    return iconMap[iconName] || <div className="h-4 w-4 rounded bg-gray-300" />;
+    return iconMap[iconName] || <div className="h-4 w-4 rounded bg-muted/60" />;
   };
 
   if (error) {
@@ -133,7 +133,7 @@ export default function TemplatesManagePage() {
       <div className="w-full max-w-none px-4 py-8">
         <Card>
           <CardContent className="flex flex-col items-center justify-center py-8">
-            <p className="mb-4 text-red-600">템플릿 목록을 불러오는 중 오류가 발생했습니다.</p>
+            <p className="mb-4 text-destructive">템플릿 목록을 불러오는 중 오류가 발생했습니다.</p>
             <Button onClick={() => refetch()} variant="outline">
               <RefreshCw className="mr-2 h-4 w-4" />
               다시 시도
@@ -145,13 +145,13 @@ export default function TemplatesManagePage() {
   }
 
   return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-muted">
       <div className="w-full max-w-none px-4 py-8 space-y-8">
         {/* 페이지 제목 */}
         <div className="flex items-center justify-between bg-white rounded-lg shadow-sm border p-6">
           <div>
-            <h1 className="text-3xl font-bold text-gray-900">템플릿 관리</h1>
-            <p className="mt-2 text-gray-600">화면 디자이너에서 사용할 템플릿을 관리합니다</p>
+            <h1 className="text-3xl font-bold text-foreground">템플릿 관리</h1>
+            <p className="mt-2 text-muted-foreground">화면 디자이너에서 사용할 템플릿을 관리합니다</p>
           </div>
           <div className="flex space-x-2">
             <Button asChild className="shadow-sm">
@@ -164,9 +164,9 @@ export default function TemplatesManagePage() {
 
       {/* 필터 및 검색 */}
       <Card className="shadow-sm">
-        <CardHeader className="bg-gray-50/50">
+        <CardHeader className="bg-muted/50">
           <CardTitle className="flex items-center">
-            <Filter className="mr-2 h-5 w-5 text-gray-600" />
+            <Filter className="mr-2 h-5 w-5 text-muted-foreground" />
             필터 및 검색
           </CardTitle>
         </CardHeader>
@@ -176,7 +176,7 @@ export default function TemplatesManagePage() {
             <div className="space-y-2">
               <label className="text-sm font-medium">검색</label>
               <div className="relative">
-                <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400" />
+                <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-muted-foreground/70" />
                 <Input
                   placeholder="템플릿명, 설명 검색..."
                   value={searchTerm}
@@ -232,7 +232,7 @@ export default function TemplatesManagePage() {
 
       {/* 템플릿 목록 테이블 */}
       <Card className="shadow-sm">
-        <CardHeader className="bg-gray-50/50">
+        <CardHeader className="bg-muted/50">
           <CardTitle>템플릿 목록 ({filteredAndSortedTemplates.length}개)</CardTitle>
         </CardHeader>
         <CardContent>
@@ -293,7 +293,7 @@ export default function TemplatesManagePage() {
                   </TableRow>
                 ) : filteredAndSortedTemplates.length === 0 ? (
                   <TableRow>
-                    <TableCell colSpan={11} className="py-8 text-center text-gray-500">
+                    <TableCell colSpan={11} className="py-8 text-center text-muted-foreground">
                       검색 조건에 맞는 템플릿이 없습니다.
                     </TableCell>
                   </TableRow>
@@ -357,7 +357,7 @@ export default function TemplatesManagePage() {
                           </Button>
                           <AlertDialog>
                             <AlertDialogTrigger asChild>
-                              <Button size="sm" variant="ghost" className="text-red-600 hover:text-red-700">
+                              <Button size="sm" variant="ghost" className="text-destructive hover:text-destructive">
                                 <Trash2 className="h-4 w-4" />
                               </Button>
                             </AlertDialogTrigger>
@@ -373,7 +373,7 @@ export default function TemplatesManagePage() {
                                 <AlertDialogCancel>취소</AlertDialogCancel>
                                 <AlertDialogAction
                                   onClick={() => handleDelete(template.template_code, template.template_name)}
-                                  className="bg-red-600 hover:bg-red-700"
+                                  className="bg-destructive hover:bg-red-700"
                                   disabled={isDeleting}
                                 >
                                   삭제
diff --git a/frontend/app/(main)/admin/test/page.tsx b/frontend/app/(main)/admin/test/page.tsx
index e1ee0e58..5d8c6df0 100644
--- a/frontend/app/(main)/admin/test/page.tsx
+++ b/frontend/app/(main)/admin/test/page.tsx
@@ -25,27 +25,27 @@ export default function TestPage() {
       <h1 className="mb-4 text-2xl font-bold">토큰 테스트 페이지</h1>
 
       <div className="space-y-4">
-        <div className="rounded bg-green-100 p-4">
+        <div className="rounded bg-emerald-100 p-4">
           <h2 className="mb-2 font-semibold">토큰 상태</h2>
           <p>토큰 존재: {tokenInfo.hasToken ? "✅ 예" : "❌ 아니오"}</p>
           <p>토큰 길이: {tokenInfo.tokenLength}</p>
           <p>토큰 시작: {tokenInfo.tokenStart}</p>
         </div>
 
-        <div className="rounded bg-blue-100 p-4">
+        <div className="rounded bg-primary/10 p-4">
           <h2 className="mb-2 font-semibold">페이지 정보</h2>
           <p>현재 URL: {tokenInfo.currentUrl}</p>
           <p>시간: {tokenInfo.timestamp}</p>
         </div>
 
-        <div className="rounded bg-yellow-100 p-4">
+        <div className="rounded bg-amber-100 p-4">
           <h2 className="mb-2 font-semibold">테스트 버튼</h2>
           <button
             onClick={() => {
               const token = localStorage.getItem("authToken");
               alert(`토큰: ${token ? "존재" : "없음"}\n길이: ${token ? token.length : 0}`);
             }}
-            className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600"
+            className="rounded bg-primary px-4 py-2 text-white hover:bg-primary"
           >
             토큰 확인
           </button>
diff --git a/frontend/app/(main)/admin/token-test/page.tsx b/frontend/app/(main)/admin/token-test/page.tsx
index f931b7cc..6c2916e6 100644
--- a/frontend/app/(main)/admin/token-test/page.tsx
+++ b/frontend/app/(main)/admin/token-test/page.tsx
@@ -31,12 +31,12 @@ export default function TokenTestPage() {
       <h1 className="mb-4 text-2xl font-bold">토큰 상태 테스트</h1>
 
       <div className="space-y-4">
-        <div className="rounded bg-gray-100 p-4">
+        <div className="rounded bg-muted p-4">
           <h2 className="mb-2 font-semibold">토큰 정보</h2>
           <pre className="text-sm">{JSON.stringify(tokenInfo, null, 2)}</pre>
         </div>
 
-        <div className="rounded bg-blue-100 p-4">
+        <div className="rounded bg-primary/10 p-4">
           <h2 className="mb-2 font-semibold">테스트 버튼</h2>
           <button
             onClick={() => {
@@ -44,7 +44,7 @@ export default function TokenTestPage() {
               console.log("현재 토큰:", token);
               alert(`토큰: ${token ? "존재" : "없음"}`);
             }}
-            className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600"
+            className="rounded bg-primary px-4 py-2 text-white hover:bg-primary"
           >
             토큰 확인
           </button>
diff --git a/frontend/app/(main)/admin/userMng/rolesList/[id]/page.tsx b/frontend/app/(main)/admin/userMng/rolesList/[id]/page.tsx
index 30552af4..4609312c 100644
--- a/frontend/app/(main)/admin/userMng/rolesList/[id]/page.tsx
+++ b/frontend/app/(main)/admin/userMng/rolesList/[id]/page.tsx
@@ -259,7 +259,7 @@ export default function RoleDetailPage({ params }: { params: Promise<{ id: strin
             </div>
             <span
               className={`rounded-full px-3 py-1 text-sm font-medium ${
-                roleGroup.status === "active" ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"
+                roleGroup.status === "active" ? "bg-emerald-100 text-emerald-800" : "bg-muted text-foreground"
               }`}
             >
               {roleGroup.status === "active" ? "활성" : "비활성"}
diff --git a/frontend/app/(main)/admin/userMng/rolesList/page.tsx b/frontend/app/(main)/admin/userMng/rolesList/page.tsx
index eeac1dec..48a4ff32 100644
--- a/frontend/app/(main)/admin/userMng/rolesList/page.tsx
+++ b/frontend/app/(main)/admin/userMng/rolesList/page.tsx
@@ -273,7 +273,7 @@ export default function RolesPage() {
                     </div>
                     <span
                       className={`rounded-full px-2 py-1 text-xs font-medium ${
-                        role.status === "active" ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"
+                        role.status === "active" ? "bg-emerald-100 text-emerald-800" : "bg-muted text-foreground"
                       }`}
                     >
                       {role.status === "active" ? "활성" : "비활성"}
diff --git a/frontend/app/(main)/admin/validation-demo/page.tsx b/frontend/app/(main)/admin/validation-demo/page.tsx
index a4607ec0..8f8b7e18 100644
--- a/frontend/app/(main)/admin/validation-demo/page.tsx
+++ b/frontend/app/(main)/admin/validation-demo/page.tsx
@@ -388,7 +388,7 @@ export default function ValidationDemoPage() {
                 <CardDescription>실시간 검증이 적용된 폼입니다. 입력하면서 검증 결과를 확인해보세요.</CardDescription>
               </CardHeader>
               <CardContent>
-                <div className="relative min-h-[400px] rounded-lg border border-dashed border-gray-300 p-4">
+                <div className="relative min-h-[400px] rounded-lg border border-dashed border-input p-4">
                   <EnhancedInteractiveScreenViewer
                     component={TEST_COMPONENTS[0]} // container
                     allComponents={TEST_COMPONENTS}
@@ -485,7 +485,7 @@ export default function ValidationDemoPage() {
 
               <div className="space-y-2">
                 <h4 className="font-semibold">폼 데이터</h4>
-                <pre className="max-h-60 overflow-auto rounded-md bg-gray-100 p-3 text-sm">
+                <pre className="max-h-60 overflow-auto rounded-md bg-muted p-3 text-sm">
                   {JSON.stringify(formData, null, 2)}
                 </pre>
               </div>
@@ -493,15 +493,15 @@ export default function ValidationDemoPage() {
               <div className="space-y-2">
                 <h4 className="font-semibold">검증 통계</h4>
                 <div className="grid grid-cols-2 gap-4">
-                  <div className="rounded-md bg-green-50 p-3">
-                    <div className="text-lg font-bold text-green-600">
+                  <div className="rounded-md bg-emerald-50 p-3">
+                    <div className="text-lg font-bold text-emerald-600">
                       {Object.values(validationState.fieldStates).filter((f) => f.status === "valid").length}
                     </div>
-                    <div className="text-sm text-green-700">유효한 필드</div>
+                    <div className="text-sm text-emerald-700">유효한 필드</div>
                   </div>
-                  <div className="rounded-md bg-red-50 p-3">
-                    <div className="text-lg font-bold text-red-600">{validationState.errors.length}</div>
-                    <div className="text-sm text-red-700">오류 개수</div>
+                  <div className="rounded-md bg-destructive/10 p-3">
+                    <div className="text-lg font-bold text-destructive">{validationState.errors.length}</div>
+                    <div className="text-sm text-destructive">오류 개수</div>
                   </div>
                 </div>
               </div>
diff --git a/frontend/app/(main)/approval/page.tsx b/frontend/app/(main)/approval/page.tsx
index 26af713c..4b57371b 100644
--- a/frontend/app/(main)/approval/page.tsx
+++ b/frontend/app/(main)/approval/page.tsx
@@ -29,7 +29,7 @@ const statusConfig: Record<string, { label: string; variant: "default" | "second
 const lineStatusConfig: Record<string, { label: string; icon: React.ReactNode }> = {
   waiting: { label: "대기", icon: <Clock className="h-3 w-3 text-muted-foreground" /> },
   pending: { label: "진행 중", icon: <Clock className="h-3 w-3 text-primary" /> },
-  approved: { label: "승인", icon: <CheckCircle2 className="h-3 w-3 text-green-600" /> },
+  approved: { label: "승인", icon: <CheckCircle2 className="h-3 w-3 text-emerald-600" /> },
   rejected: { label: "반려", icon: <XCircle className="h-3 w-3 text-destructive" /> },
   skipped: { label: "건너뜀", icon: <Clock className="h-3 w-3 text-muted-foreground" /> },
 };
diff --git a/frontend/app/(main)/dashboard/[dashboardId]/page.tsx b/frontend/app/(main)/dashboard/[dashboardId]/page.tsx
index 44ca30b2..26385e75 100644
--- a/frontend/app/(main)/dashboard/[dashboardId]/page.tsx
+++ b/frontend/app/(main)/dashboard/[dashboardId]/page.tsx
@@ -107,18 +107,18 @@ export default function DashboardViewPage({ params }: DashboardViewPageProps) {
   return (
     <div className="h-screen">
       {/* 대시보드 헤더 - 보기 모드에서는 숨김 */}
-      {/* <div className="border-b border-gray-200 bg-white px-6 py-4">
+      {/* <div className="border-b border-border bg-white px-6 py-4">
         <div className="flex items-center justify-between">
           <div>
-            <h1 className="text-2xl font-bold text-gray-800">{dashboard.title}</h1>
-            {dashboard.description && <p className="mt-1 text-sm text-gray-600">{dashboard.description}</p>}
+            <h1 className="text-2xl font-bold text-foreground">{dashboard.title}</h1>
+            {dashboard.description && <p className="mt-1 text-sm text-muted-foreground">{dashboard.description}</p>}
           </div>
 
           <div className="flex items-center gap-3">
             {/* 새로고침 버튼 *\/}
             <button
               onClick={loadDashboard}
-              className="rounded-lg border border-gray-300 px-3 py-2 text-gray-600 hover:bg-gray-50 hover:text-gray-800"
+              className="rounded-lg border border-input px-3 py-2 text-muted-foreground hover:bg-muted hover:text-foreground"
               title="새로고침"
             >
               🔄
@@ -133,7 +133,7 @@ export default function DashboardViewPage({ params }: DashboardViewPageProps) {
                   document.documentElement.requestFullscreen();
                 }
               }}
-              className="rounded-lg border border-gray-300 px-3 py-2 text-gray-600 hover:bg-gray-50 hover:text-gray-800"
+              className="rounded-lg border border-input px-3 py-2 text-muted-foreground hover:bg-muted hover:text-foreground"
               title="전체화면"
             >
               ⛶
@@ -144,7 +144,7 @@ export default function DashboardViewPage({ params }: DashboardViewPageProps) {
               onClick={() => {
                 router.push(`/admin/screenMng/dashboardList?load=${resolvedParams.dashboardId}`);
               }}
-              className="rounded-lg bg-blue-500 px-4 py-2 text-white hover:bg-blue-600"
+              className="rounded-lg bg-primary px-4 py-2 text-white hover:bg-primary"
             >
               편집
             </button>
@@ -152,7 +152,7 @@ export default function DashboardViewPage({ params }: DashboardViewPageProps) {
         </div>
 
         {/* 메타 정보 *\/}
-        <div className="mt-2 flex items-center gap-4 text-xs text-gray-500">
+        <div className="mt-2 flex items-center gap-4 text-xs text-muted-foreground">
           <span>생성: {new Date(dashboard.createdAt).toLocaleString()}</span>
           <span>수정: {new Date(dashboard.updatedAt).toLocaleString()}</span>
           <span>요소: {dashboard.elements.length}개</span>
diff --git a/frontend/app/(main)/main/page.tsx b/frontend/app/(main)/main/page.tsx
index 56558f7e..615aaf70 100644
--- a/frontend/app/(main)/main/page.tsx
+++ b/frontend/app/(main)/main/page.tsx
@@ -1,29 +1,93 @@
 "use client";
 
-import { Card, CardContent } from "@/components/ui/card";
-import { Badge } from "@/components/ui/badge";
+import { useRouter } from "next/navigation";
+import { useAuth } from "@/hooks/useAuth";
+import { FileCheck, Menu, Users, Bell, FileText, Layout, Server, Shield, Calendar } from "lucide-react";
+
+const quickAccessItems = [
+  { label: "결재함", icon: FileCheck, href: "/admin/approvalBox", color: "text-primary bg-primary/10" },
+  { label: "메뉴 관리", icon: Menu, href: "/admin/menu", color: "text-violet-600 bg-violet-50" },
+  { label: "사용자 관리", icon: Users, href: "/admin/userMng", color: "text-emerald-600 bg-emerald-50" },
+  { label: "공지사항", icon: Bell, href: "/admin/system-notices", color: "text-amber-600 bg-amber-50" },
+  { label: "감사 로그", icon: FileText, href: "/admin/audit-log", color: "text-rose-600 bg-rose-50" },
+  { label: "화면 관리", icon: Layout, href: "/admin/screenMng", color: "text-cyan-600 bg-cyan-50" },
+];
 
-/**
- * 메인 페이지 컴포넌트
- * 대시보드 내용만 포함
- */
 export default function MainPage() {
+  const router = useRouter();
+  const { user } = useAuth();
+
+  const userName = user?.userName || "사용자";
+  const today = new Date();
+  const dateStr = today.toLocaleDateString("ko-KR", { year: "numeric", month: "long", day: "numeric", weekday: "long" });
+
   return (
-    <div className="space-y-6 p-4">
-      {/* Welcome Message */}
-      <Card>
-        <CardContent className="pt-6">
-          <div className="space-y-6 text-center">
-            <h3 className="text-lg font-semibold">Vexplor에 오신 것을 환영합니다!</h3>
-            <p className="text-muted-foreground">제품 수명 주기 관리 시스템을 통해 효율적인 업무를 시작하세요.</p>
-            <div className="flex justify-center space-x-2">
-              <Badge variant="secondary">Node.js</Badge>
-              <Badge variant="secondary">Next.js</Badge>
-              <Badge variant="secondary">Shadcn/ui</Badge>
+    <div className="space-y-6 p-4 sm:p-6 lg:p-8">
+      {/* 헤더 영역 */}
+      <div className="flex flex-col gap-1">
+        <h1 className="text-2xl font-bold tracking-tight sm:text-3xl">
+          {userName}님, 좋은 하루 되세요
+        </h1>
+        <p className="text-sm text-muted-foreground">{dateStr}</p>
+      </div>
+
+      {/* 바로가기 */}
+      <div>
+        <h2 className="mb-3 text-base font-semibold text-foreground">바로가기</h2>
+        <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-6">
+          {quickAccessItems.map((item) => {
+            const Icon = item.icon;
+            return (
+              <button
+                key={item.href}
+                onClick={() => router.push(item.href)}
+                className="group flex flex-col items-center gap-2.5 rounded-lg border bg-card p-4 transition-all hover:shadow-md"
+              >
+                <div className={`flex h-10 w-10 items-center justify-center rounded-lg ${item.color} transition-transform group-hover:scale-105`}>
+                  <Icon className="h-5 w-5" />
+                </div>
+                <span className="text-xs font-medium text-foreground">{item.label}</span>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* 시스템 정보 */}
+      <div className="rounded-lg border bg-card p-4 sm:p-5">
+        <h2 className="mb-3 text-base font-semibold text-foreground">시스템 정보</h2>
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
+          <div className="flex items-center gap-3">
+            <div className="flex h-9 w-9 items-center justify-center rounded-md bg-muted">
+              <Server className="h-4 w-4 text-muted-foreground" />
+            </div>
+            <div>
+              <p className="text-xs text-muted-foreground">플랫폼</p>
+              <p className="text-sm font-medium">WACE ERP/PLM</p>
             </div>
           </div>
-        </CardContent>
-      </Card>
+          <div className="flex items-center gap-3">
+            <div className="flex h-9 w-9 items-center justify-center rounded-md bg-muted">
+              <Shield className="h-4 w-4 text-muted-foreground" />
+            </div>
+            <div>
+              <p className="text-xs text-muted-foreground">버전</p>
+              <p className="text-sm font-medium">v2.0.0</p>
+            </div>
+          </div>
+          <div className="flex items-center gap-3">
+            <div className="flex h-9 w-9 items-center justify-center rounded-md bg-muted">
+              <Calendar className="h-4 w-4 text-muted-foreground" />
+            </div>
+            <div>
+              <p className="text-xs text-muted-foreground">오늘 날짜</p>
+              <p className="text-sm font-medium">
+                {today.toLocaleDateString("ko-KR", { year: "numeric", month: "long", day: "numeric" })}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/frontend/app/(main)/multilang/page.tsx b/frontend/app/(main)/multilang/page.tsx
index 34a51ec0..93fbc1b0 100644
--- a/frontend/app/(main)/multilang/page.tsx
+++ b/frontend/app/(main)/multilang/page.tsx
@@ -385,13 +385,13 @@ export default function MultiLangPage() {
                   </div>
 
                   <div className="flex items-end">
-                    <div className="text-sm text-gray-600">검색 결과: {filteredLangKeys.length}건</div>
+                    <div className="text-sm text-muted-foreground">검색 결과: {filteredLangKeys.length}건</div>
                   </div>
                 </div>
               </div>
 
               <div className="mb-4 flex items-center justify-between">
-                <div className="text-sm text-gray-600">전체: {filteredLangKeys.length}건</div>
+                <div className="text-sm text-muted-foreground">전체: {filteredLangKeys.length}건</div>
               </div>
 
               <DataTable
@@ -417,7 +417,7 @@ export default function MultiLangPage() {
                 {languages.map((lang) => (
                   <div key={lang.langCode} className="rounded-lg border p-4">
                     <div className="font-semibold">{lang.langName}</div>
-                    <div className="text-sm text-gray-600">{lang.langNative}</div>
+                    <div className="text-sm text-muted-foreground">{lang.langNative}</div>
                     <Badge variant={lang.isActive === "Y" ? "default" : "secondary"} className="mt-2">
                       {lang.isActive === "Y" ? "활성" : "비활성"}
                     </Badge>
@@ -440,7 +440,7 @@ export default function MultiLangPage() {
                     <h3 className="mb-2 font-semibold">{company.name}</h3>
                     <div className="space-y-1">
                       {menus.map((menu) => (
-                        <div key={menu.code} className="text-sm text-gray-600">
+                        <div key={menu.code} className="text-sm text-muted-foreground">
                           {menu.name}
                         </div>
                       ))}
diff --git a/frontend/app/(main)/page.tsx b/frontend/app/(main)/page.tsx
index f5d7a153..292e4bbd 100644
--- a/frontend/app/(main)/page.tsx
+++ b/frontend/app/(main)/page.tsx
@@ -1,18 +1,91 @@
-export default function MainHomePage() {
-  return (
-    <div className="space-y-6 p-4">
-      {/* 대시보드 컨텐츠 */}
-      <div className="rounded-lg border bg-background p-6 shadow-sm">
-        <h3 className="mb-4 text-lg font-semibold">WACE 솔루션에 오신 것을 환영합니다!</h3>
-        <p className="mb-6 text-muted-foreground">제품 수명 주기 관리 시스템을 통해 효율적인 업무를 시작하세요.</p>
+"use client";
 
-        <div className="flex gap-2">
-          <span className="inline-flex items-center rounded-md bg-success/10 px-2 py-1 text-xs font-medium text-success ring-1 ring-success/10 ring-inset">
-            Next.js
-          </span>
-          <span className="inline-flex items-center rounded-md bg-primary/10 px-2 py-1 text-xs font-medium text-primary ring-1 ring-primary/10 ring-inset">
-            Shadcn/ui
-          </span>
+import { useRouter } from "next/navigation";
+import { useAuth } from "@/hooks/useAuth";
+import { FileCheck, Menu, Users, Bell, FileText, Layout, Server, Shield, Calendar, ArrowRight } from "lucide-react";
+
+const quickAccessItems = [
+  { label: "결재함", icon: FileCheck, href: "/admin/approvalBox", color: "text-primary bg-primary/10" },
+  { label: "메뉴 관리", icon: Menu, href: "/admin/menu", color: "text-violet-600 bg-violet-50" },
+  { label: "사용자 관리", icon: Users, href: "/admin/userMng", color: "text-emerald-600 bg-emerald-50" },
+  { label: "공지사항", icon: Bell, href: "/admin/system-notices", color: "text-amber-600 bg-amber-50" },
+  { label: "감사 로그", icon: FileText, href: "/admin/audit-log", color: "text-rose-600 bg-rose-50" },
+  { label: "화면 관리", icon: Layout, href: "/admin/screenMng", color: "text-cyan-600 bg-cyan-50" },
+];
+
+export default function MainHomePage() {
+  const router = useRouter();
+  const { user } = useAuth();
+
+  const userName = user?.userName || "사용자";
+  const today = new Date();
+  const dateStr = today.toLocaleDateString("ko-KR", { year: "numeric", month: "long", day: "numeric", weekday: "long" });
+
+  return (
+    <div className="space-y-6 p-4 sm:p-6 lg:p-8">
+      {/* 헤더 영역 */}
+      <div className="flex flex-col gap-1">
+        <h1 className="text-2xl font-bold tracking-tight sm:text-3xl">
+          {userName}님, 좋은 하루 되세요
+        </h1>
+        <p className="text-sm text-muted-foreground">{dateStr}</p>
+      </div>
+
+      {/* 바로가기 */}
+      <div>
+        <h2 className="mb-3 text-base font-semibold text-foreground">바로가기</h2>
+        <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-6">
+          {quickAccessItems.map((item) => {
+            const Icon = item.icon;
+            return (
+              <button
+                key={item.href}
+                onClick={() => router.push(item.href)}
+                className="group flex flex-col items-center gap-2.5 rounded-lg border bg-card p-4 transition-all hover:shadow-md"
+              >
+                <div className={`flex h-10 w-10 items-center justify-center rounded-lg ${item.color} transition-transform group-hover:scale-105`}>
+                  <Icon className="h-5 w-5" />
+                </div>
+                <span className="text-xs font-medium text-foreground">{item.label}</span>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* 시스템 정보 */}
+      <div className="rounded-lg border bg-card p-4 sm:p-5">
+        <h2 className="mb-3 text-base font-semibold text-foreground">시스템 정보</h2>
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
+          <div className="flex items-center gap-3">
+            <div className="flex h-9 w-9 items-center justify-center rounded-md bg-muted">
+              <Server className="h-4 w-4 text-muted-foreground" />
+            </div>
+            <div>
+              <p className="text-xs text-muted-foreground">플랫폼</p>
+              <p className="text-sm font-medium">WACE ERP/PLM</p>
+            </div>
+          </div>
+          <div className="flex items-center gap-3">
+            <div className="flex h-9 w-9 items-center justify-center rounded-md bg-muted">
+              <Shield className="h-4 w-4 text-muted-foreground" />
+            </div>
+            <div>
+              <p className="text-xs text-muted-foreground">버전</p>
+              <p className="text-sm font-medium">v2.0.0</p>
+            </div>
+          </div>
+          <div className="flex items-center gap-3">
+            <div className="flex h-9 w-9 items-center justify-center rounded-md bg-muted">
+              <Calendar className="h-4 w-4 text-muted-foreground" />
+            </div>
+            <div>
+              <p className="text-xs text-muted-foreground">오늘 날짜</p>
+              <p className="text-sm font-medium">
+                {today.toLocaleDateString("ko-KR", { year: "numeric", month: "long", day: "numeric" })}
+              </p>
+            </div>
+          </div>
         </div>
       </div>
     </div>
diff --git a/frontend/app/(main)/screens/[screenId]/page.tsx b/frontend/app/(main)/screens/[screenId]/page.tsx
index d65b7884..efcef2a4 100644
--- a/frontend/app/(main)/screens/[screenId]/page.tsx
+++ b/frontend/app/(main)/screens/[screenId]/page.tsx
@@ -3,43 +3,52 @@
 import React, { useEffect, useState, useMemo } from "react";
 import { useParams, useSearchParams } from "next/navigation";
 import { Button } from "@/components/ui/button";
-import { Loader2 } from "lucide-react";
+import { Loader2, FileQuestion, AlertTriangle } from "lucide-react";
 import { screenApi } from "@/lib/api/screen";
 import { ScreenDefinition, LayoutData, ComponentData } from "@/types/screen";
 import { LayerDefinition } from "@/types/screen-management";
 import { useRouter } from "next/navigation";
-import { toast } from "sonner";
 import { showErrorToast } from "@/lib/utils/toastUtils";
 import { initializeComponents } from "@/lib/registry/components";
 import { EditModal } from "@/components/screen/EditModal";
 import { RealtimePreview } from "@/components/screen/RealtimePreviewDynamic";
-import { FlowButtonGroup } from "@/components/screen/widgets/FlowButtonGroup";
-import { FlowVisibilityConfig } from "@/types/control-management";
-import { findAllButtonGroups } from "@/lib/utils/flowButtonGroupUtils";
-import { DynamicComponentRenderer } from "@/lib/registry/DynamicComponentRenderer";
 import { ScreenPreviewProvider } from "@/contexts/ScreenPreviewContext";
-import { useAuth } from "@/hooks/useAuth"; // 🆕 사용자 정보
-import { useResponsive } from "@/lib/hooks/useResponsive"; // 🆕 반응형 감지
-import { TableOptionsProvider } from "@/contexts/TableOptionsContext"; // 테이블 옵션
-import { TableSearchWidgetHeightProvider, useTableSearchWidgetHeight } from "@/contexts/TableSearchWidgetHeightContext"; // 높이 관리
-import { ScreenContextProvider } from "@/contexts/ScreenContext"; // 컴포넌트 간 통신
-import { SplitPanelProvider } from "@/lib/registry/components/split-panel-layout/SplitPanelContext"; // 분할 패널 리사이즈
-import { ActiveTabProvider } from "@/contexts/ActiveTabContext"; // 활성 탭 관리
-import { evaluateConditional } from "@/lib/utils/conditionalEvaluator"; // 조건부 표시 평가
-import { ScreenMultiLangProvider } from "@/contexts/ScreenMultiLangContext"; // 화면 다국어
-import { convertV2ToLegacy, isValidV2Layout } from "@/lib/utils/layoutV2Converter"; // V2 Zod 기반 변환
-import { useScheduleGenerator, ScheduleConfirmDialog } from "@/lib/v2-core/services/ScheduleGeneratorService"; // 스케줄 자동 생성
+import { useAuth } from "@/hooks/useAuth";
+import { TableOptionsProvider } from "@/contexts/TableOptionsContext";
+import { TableSearchWidgetHeightProvider } from "@/contexts/TableSearchWidgetHeightContext";
+import { ScreenContextProvider } from "@/contexts/ScreenContext";
+import { SplitPanelProvider } from "@/lib/registry/components/split-panel-layout/SplitPanelContext";
+import { ActiveTabProvider } from "@/contexts/ActiveTabContext";
+import { evaluateConditional } from "@/lib/utils/conditionalEvaluator";
+import { ScreenMultiLangProvider } from "@/contexts/ScreenMultiLangContext";
+import { convertV2ToLegacy, isValidV2Layout } from "@/lib/utils/layoutV2Converter";
+import { useScheduleGenerator, ScheduleConfirmDialog } from "@/lib/v2-core/services/ScheduleGeneratorService";
+import { ResponsiveGridRenderer } from "@/components/screen/ResponsiveGridRenderer";
+import { useTabId } from "@/contexts/TabIdContext";
+import { useTabStore } from "@/stores/tabStore";
 
-function ScreenViewPage() {
+export interface ScreenViewPageProps {
+  screenIdProp?: number;
+  menuObjidProp?: number;
+}
+
+function ScreenViewPage({ screenIdProp, menuObjidProp }: ScreenViewPageProps = {}) {
   // 스케줄 자동 생성 서비스 활성화
-  const { showConfirmDialog, previewResult, handleConfirm, closeDialog, isLoading: scheduleLoading } = useScheduleGenerator();
+  const {
+    showConfirmDialog,
+    previewResult,
+    handleConfirm,
+    closeDialog,
+    isLoading: scheduleLoading,
+  } = useScheduleGenerator();
   const params = useParams();
   const searchParams = useSearchParams();
   const router = useRouter();
-  const screenId = parseInt(params.screenId as string);
+  const screenId = screenIdProp ?? parseInt(params.screenId as string);
 
-  // URL 쿼리에서 menuObjid 가져오기 (메뉴 스코프)
-  const menuObjid = searchParams.get("menuObjid") ? parseInt(searchParams.get("menuObjid")!) : undefined;
+  // props 우선, 없으면 URL 쿼리에서 menuObjid 가져오기
+  const menuObjid =
+    menuObjidProp ?? (searchParams.get("menuObjid") ? parseInt(searchParams.get("menuObjid")!) : undefined);
 
   // URL 쿼리에서 프리뷰용 company_code 가져오기
   const previewCompanyCode = searchParams.get("company_code");
@@ -47,18 +56,11 @@ function ScreenViewPage() {
   // 프리뷰 모드 감지 (iframe에서 로드될 때)
   const isPreviewMode = searchParams.get("preview") === "true";
 
-  // 🆕 현재 로그인한 사용자 정보
   const { user, userName, companyCode: authCompanyCode } = useAuth();
 
   // 프리뷰 모드에서는 URL 파라미터의 company_code 우선 사용
   const companyCode = previewCompanyCode || authCompanyCode;
 
-  // 🆕 모바일 환경 감지
-  const { isMobile } = useResponsive();
-
-  // 🆕 TableSearchWidget 높이 관리
-  const { getHeightDiff } = useTableSearchWidgetHeight();
-
   const [screen, setScreen] = useState<ScreenDefinition | null>(null);
   const [layout, setLayout] = useState<LayoutData | null>(null);
   const [loading, setLoading] = useState(true);
@@ -73,19 +75,18 @@ function ScreenViewPage() {
   const [tableSortBy, setTableSortBy] = useState<string | undefined>();
   const [tableSortOrder, setTableSortOrder] = useState<"asc" | "desc">("asc");
   const [tableColumnOrder, setTableColumnOrder] = useState<string[] | undefined>();
-  const [tableDisplayData, setTableDisplayData] = useState<any[]>([]); // 화면에 표시된 데이터 (컬럼 순서 포함)
 
   // 플로우에서 선택된 데이터 (버튼 액션에 전달)
   const [flowSelectedData, setFlowSelectedData] = useState<any[]>([]);
   const [flowSelectedStepId, setFlowSelectedStepId] = useState<number | null>(null);
 
-  // 테이블 새로고침을 위한 키 (값이 변경되면 테이블이 리렌더링됨)
+  // 테이블 새로고침 키
   const [tableRefreshKey, setTableRefreshKey] = useState(0);
 
-  // 플로우 새로고침을 위한 키 (값이 변경되면 플로우 데이터가 리렌더링됨)
+  // 플로우 새로고침 키
   const [flowRefreshKey, setFlowRefreshKey] = useState(0);
 
-  // 🆕 조건부 컨테이너 높이 추적 (컴포넌트 ID → 높이)
+  // 조건부 컨테이너 높이 추적 (컴포넌트 ID → 높이)
   const [conditionalContainerHeights, setConditionalContainerHeights] = useState<Record<string, number>>({});
 
   // 레이어 시스템 지원
@@ -106,12 +107,10 @@ function ScreenViewPage() {
     modalDescription?: string;
   }>({});
 
-  // 레이아웃 준비 완료 상태 (버튼 위치 계산 완료 후 화면 표시)
-  const [layoutReady, setLayoutReady] = useState(true);
+  // 레이아웃 준비 완료 상태
+  const [layoutReady, setLayoutReady] = useState(false);
 
   const containerRef = React.useRef<HTMLDivElement>(null);
-  const [scale, setScale] = useState(1);
-  const [containerWidth, setContainerWidth] = useState(0);
 
   useEffect(() => {
     const initComponents = async () => {
@@ -125,10 +124,13 @@ function ScreenViewPage() {
     initComponents();
   }, []);
 
-  // 편집 모달 이벤트 리스너 등록
+  // 편집 모달 이벤트 리스너 등록 (활성 탭에서만 처리)
+  const tabId = useTabId();
   useEffect(() => {
     const handleOpenEditModal = (event: CustomEvent) => {
-      // console.log("🎭 편집 모달 열기 이벤트 수신:", event.detail);
+      const state = useTabStore.getState();
+      const currentActiveTabId = state[state.mode].activeTabId;
+      if (tabId && tabId !== currentActiveTabId) return;
 
       setEditModalConfig({
         screenId: event.detail.screenId,
@@ -148,26 +150,23 @@ function ScreenViewPage() {
       // @ts-expect-error - CustomEvent type
       window.removeEventListener("openEditModal", handleOpenEditModal);
     };
-  }, []);
+  }, [tabId]);
 
   useEffect(() => {
     const loadScreen = async () => {
       try {
         setLoading(true);
-        setLayoutReady(false); // 화면 로드 시 레이아웃 준비 초기화
+        setLayoutReady(false);
         setError(null);
 
-        // 화면 정보 로드
         const screenData = await screenApi.getScreen(screenId);
         setScreen(screenData);
 
         // 레이아웃 로드 (V2 우선, Zod 기반 기본값 병합)
         try {
-          // V2 API 먼저 시도
           const v2Response = await screenApi.getLayoutV2(screenId);
 
           if (v2Response && isValidV2Layout(v2Response)) {
-            // V2 레이아웃: Zod 기반 변환 (기본값 병합)
             const convertedLayout = convertV2ToLegacy(v2Response);
             if (convertedLayout) {
               setLayout({
@@ -178,7 +177,6 @@ function ScreenViewPage() {
               throw new Error("V2 레이아웃 변환 실패");
             }
           } else {
-            // V1 레이아웃 또는 빈 레이아웃
             const layoutData = await screenApi.getLayout(screenId);
             if (layoutData?.components?.length > 0) {
               setLayout(layoutData);
@@ -220,9 +218,12 @@ function ScreenViewPage() {
       } catch (error) {
         console.error("화면 로드 실패:", error);
         setError("화면을 불러오는데 실패했습니다.");
-        showErrorToast("화면을 불러오는 데 실패했습니다", error, { guidance: "화면 설정을 확인하거나 잠시 후 다시 시도해 주세요." });
+        showErrorToast("화면을 불러오는 데 실패했습니다", error, {
+          guidance: "화면 설정을 확인하거나 잠시 후 다시 시도해 주세요.",
+        });
       } finally {
         setLoading(false);
+        setLayoutReady(true);
       }
     };
 
@@ -231,17 +232,17 @@ function ScreenViewPage() {
     }
   }, [screenId]);
 
-  // 🆕 조건부 레이어 + Zone 로드
+  // 조건부 레이어 + Zone 로드
   useEffect(() => {
     const loadConditionalLayersAndZones = async () => {
       if (!screenId || !layout) return;
 
       try {
-        // 1. Zone 로드
+        // Zone 로드
         const loadedZones = await screenApi.getScreenZones(screenId);
         setZones(loadedZones);
 
-        // 2. 모든 레이어 목록 조회
+        // 모든 레이어 목록 조회
         const allLayers = await screenApi.getScreenLayers(screenId);
         const nonBaseLayers = allLayers.filter((l: any) => l.layer_id > 1);
 
@@ -250,7 +251,7 @@ function ScreenViewPage() {
           return;
         }
 
-        // 3. 각 레이어의 레이아웃 데이터 로드
+        // 각 레이어의 레이아웃 데이터 로드
         const layerDefinitions: LayerDefinition[] = [];
 
         for (const layerInfo of nonBaseLayers) {
@@ -258,7 +259,6 @@ function ScreenViewPage() {
             const layerData = await screenApi.getLayerLayout(screenId, layerInfo.layer_id);
             const condConfig = layerInfo.condition_config || layerData?.conditionConfig || {};
 
-            // 레이어 컴포넌트 변환 (V2 → Legacy)
             let layerComponents: any[] = [];
             const rawComponents = layerData?.components;
             if (rawComponents && Array.isArray(rawComponents) && rawComponents.length > 0) {
@@ -276,12 +276,10 @@ function ScreenViewPage() {
               }
             }
 
-            // Zone 기반 condition_config 처리
             const zoneId = condConfig.zone_id;
             const conditionValue = condConfig.condition_value;
             const zone = zoneId ? loadedZones.find((z: any) => z.zone_id === zoneId) : null;
 
-            // LayerDefinition 생성
             const layerDef: LayerDefinition = {
               id: String(layerInfo.layer_id),
               name: layerInfo.layer_name || `레이어 ${layerInfo.layer_id}`,
@@ -289,20 +287,24 @@ function ScreenViewPage() {
               zIndex: layerInfo.layer_id * 10,
               isVisible: false,
               isLocked: false,
-              // Zone 기반 조건 (Zone에서 트리거 정보를 가져옴)
-              condition: zone ? {
-                targetComponentId: zone.trigger_component_id || "",
-                operator: (zone.trigger_operator as "eq" | "neq" | "in") || "eq",
-                value: conditionValue,
-              } : condConfig.targetComponentId ? {
-                targetComponentId: condConfig.targetComponentId,
-                operator: condConfig.operator || "eq",
-                value: condConfig.value,
-              } : undefined,
-              // Zone 기반: displayRegion은 Zone에서 가져옴
+              condition: zone
+                ? {
+                    targetComponentId: zone.trigger_component_id || "",
+                    operator: (zone.trigger_operator as "eq" | "neq" | "in") || "eq",
+                    value: conditionValue,
+                  }
+                : condConfig.targetComponentId
+                  ? {
+                      targetComponentId: condConfig.targetComponentId,
+                      operator: condConfig.operator || "eq",
+                      value: condConfig.value,
+                    }
+                  : undefined,
               zoneId: zoneId || undefined,
               conditionValue: conditionValue || undefined,
-              displayRegion: zone ? { x: zone.x, y: zone.y, width: zone.width, height: zone.height } : condConfig.displayRegion || undefined,
+              displayRegion: zone
+                ? { x: zone.x, y: zone.y, width: zone.width, height: zone.height }
+                : condConfig.displayRegion || undefined,
               components: layerComponents,
             };
 
@@ -312,20 +314,6 @@ function ScreenViewPage() {
           }
         }
 
-        console.log("🔄 조건부 레이어 로드 완료:", layerDefinitions.length, "개", layerDefinitions.map(l => ({
-          id: l.id, name: l.name, zoneId: l.zoneId, conditionValue: l.conditionValue,
-          componentCount: l.components.length,
-          condition: l.condition ? {
-            targetComponentId: l.condition.targetComponentId,
-            operator: l.condition.operator,
-            value: l.condition.value,
-          } : "없음",
-        })));
-        console.log("🗺️ Zone 정보:", loadedZones.map(z => ({
-          zone_id: z.zone_id,
-          trigger_component_id: z.trigger_component_id,
-          trigger_operator: z.trigger_operator,
-        })));
         setConditionalLayers(layerDefinitions);
       } catch (error) {
         console.error("레이어/Zone 로드 실패:", error);
@@ -335,7 +323,7 @@ function ScreenViewPage() {
     loadConditionalLayersAndZones();
   }, [screenId, layout]);
 
-  // 🆕 조건부 레이어 조건 평가 (formData 변경 시 동기적으로 즉시 계산)
+  // 조건부 레이어 조건 평가 (formData 변경 시 동기적으로 즉시 계산)
   const activeLayerIds = useMemo(() => {
     if (conditionalLayers.length === 0 || !layout) return [] as string[];
 
@@ -346,13 +334,10 @@ function ScreenViewPage() {
       if (layer.condition) {
         const { targetComponentId, operator, value } = layer.condition;
 
-        // 빈 targetComponentId는 무시
         if (!targetComponentId) return;
 
-        // 트리거 컴포넌트 찾기 (기본 레이어에서)
         const targetComponent = allComponents.find((c) => c.id === targetComponentId);
 
-        // columnName으로 formData에서 값 조회
         const fieldKey =
           (targetComponent as any)?.columnName ||
           (targetComponent as any)?.componentConfig?.columnName ||
@@ -363,7 +348,6 @@ function ScreenViewPage() {
         let isMatch = false;
         switch (operator) {
           case "eq":
-            // 문자열로 변환하여 비교 (타입 불일치 방지)
             isMatch = String(targetValue ?? "") === String(value ?? "");
             break;
           case "neq":
@@ -371,35 +355,22 @@ function ScreenViewPage() {
             break;
           case "in":
             if (Array.isArray(value)) {
-              isMatch = value.some(v => String(v) === String(targetValue ?? ""));
+              isMatch = value.some((v) => String(v) === String(targetValue ?? ""));
             } else if (typeof value === "string" && value.includes(",")) {
-              // 쉼표로 구분된 문자열도 지원
-              isMatch = value.split(",").map(v => v.trim()).includes(String(targetValue ?? ""));
+              isMatch = value
+                .split(",")
+                .map((v) => v.trim())
+                .includes(String(targetValue ?? ""));
             }
             break;
         }
 
-        // 디버그 로깅 (값이 존재할 때만)
-        if (targetValue !== undefined && targetValue !== "") {
-          console.log("🔍 [레이어 조건 평가]", {
-            layerId: layer.id,
-            layerName: layer.name,
-            targetComponentId,
-            fieldKey,
-            targetValue: String(targetValue),
-            conditionValue: String(value),
-            operator,
-            isMatch,
-          });
-        }
-
         if (isMatch) {
           newActiveIds.push(layer.id);
         }
       }
     });
 
-    // 강제 활성화된 레이어 ID 병합
     for (const forcedId of forceActivatedLayerIds) {
       if (!newActiveIds.includes(forcedId)) {
         newActiveIds.push(forcedId);
@@ -415,23 +386,15 @@ function ScreenViewPage() {
       const { componentId, targetLayerId } = (e as CustomEvent).detail || {};
       if (!componentId && !targetLayerId) return;
 
-      // targetLayerId가 직접 지정된 경우
       if (targetLayerId) {
-        setForceActivatedLayerIds((prev) =>
-          prev.includes(targetLayerId) ? prev : [...prev, targetLayerId],
-        );
-        console.log(`🔓 [레이어 강제 활성화] layerId: ${targetLayerId}`);
+        setForceActivatedLayerIds((prev) => (prev.includes(targetLayerId) ? prev : [...prev, targetLayerId]));
         return;
       }
 
-      // componentId로 해당 컴포넌트가 속한 레이어를 찾아 활성화
       for (const layer of conditionalLayers) {
         const found = layer.components.some((comp) => comp.id === componentId);
         if (found) {
-          setForceActivatedLayerIds((prev) =>
-            prev.includes(layer.id) ? prev : [...prev, layer.id],
-          );
-          console.log(`🔓 [레이어 강제 활성화] componentId: ${componentId} → layerId: ${layer.id}`);
+          setForceActivatedLayerIds((prev) => (prev.includes(layer.id) ? prev : [...prev, layer.id]));
           return;
         }
       }
@@ -455,28 +418,26 @@ function ScreenViewPage() {
         return;
       }
 
-      // 테이블 위젯이 없는 경우에만 자동 로드 (테이블이 있으면 행 선택으로 데이터 로드)
+      // 테이블 위젯이 있으면 자동 로드 건너뜀 (테이블 행 선택으로 데이터 로드)
       const hasTableWidget = layout.components.some(
-        (comp: any) => 
-          comp.componentType === "table-list" || 
-          comp.componentType === "v2-table-list" ||
-          comp.widgetType === "table"
+        (comp: any) =>
+          comp.componentType === "table-list" || comp.componentType === "v2-table-list" || comp.widgetType === "table",
       );
 
       if (hasTableWidget) {
         return;
       }
 
-      // 인풋 컴포넌트들 중 메인 테이블의 컬럼을 사용하는 것들 찾기
       const inputComponents = layout.components.filter((comp: any) => {
         const compType = comp.componentType || comp.widgetType;
-        const isInputType = compType?.includes("input") || 
-                           compType?.includes("select") || 
-                           compType?.includes("textarea") ||
-                           compType?.includes("v2-input") ||
-                           compType?.includes("v2-select") ||
-                           compType?.includes("v2-media") ||
-                           compType?.includes("file-upload"); // 🆕 레거시 파일 업로드 포함
+        const isInputType =
+          compType?.includes("input") ||
+          compType?.includes("select") ||
+          compType?.includes("textarea") ||
+          compType?.includes("v2-input") ||
+          compType?.includes("v2-select") ||
+          compType?.includes("v2-media") ||
+          compType?.includes("file-upload");
         const hasColumnName = !!(comp as any).columnName;
         return isInputType && hasColumnName;
       });
@@ -485,22 +446,12 @@ function ScreenViewPage() {
         return;
       }
 
-      // 메인 테이블에서 현재 회사의 데이터 조회
       try {
         const { tableTypeApi } = await import("@/lib/api/screen");
-        
-        // company_code로 필터링하여 단일 레코드 조회
-        const result = await tableTypeApi.getTableRecord(
-          mainTableName,
-          "company_code",
-          companyCode,
-          "*" // 모든 컬럼
-        );
+
+        const result = await tableTypeApi.getTableRecord(mainTableName, "company_code", companyCode, "*");
 
         if (result && result.record) {
-          console.log("📦 메인 테이블 데이터 자동 로드:", mainTableName, result.record);
-          
-          // 각 인풋 컴포넌트에 해당하는 데이터 채우기
           const newFormData: Record<string, any> = {};
           inputComponents.forEach((comp: any) => {
             const columnName = comp.columnName;
@@ -518,14 +469,13 @@ function ScreenViewPage() {
         }
       } catch (error) {
         console.log("메인 테이블 자동 로드 실패 (정상일 수 있음):", error);
-        // 에러는 무시 - 데이터가 없거나 권한이 없을 수 있음
       }
     };
 
     loadMainTableData();
   }, [screen, layout, companyCode]);
 
-  // 🆕 개별 autoFill 처리 (메인 테이블과 다른 테이블에서 조회하는 경우)
+  // 개별 autoFill 처리
   useEffect(() => {
     const initAutoFill = async () => {
       if (!layout || !layout.components || !user) {
@@ -533,20 +483,16 @@ function ScreenViewPage() {
       }
 
       for (const comp of layout.components) {
-        // type: "component" 또는 type: "widget" 모두 처리
         if (comp.type === "widget" || comp.type === "component") {
           const widget = comp as any;
           const fieldName = widget.columnName || widget.id;
 
-          // autoFill 처리 (명시적으로 설정된 경우만)
           if (widget.autoFill?.enabled || (comp as any).autoFill?.enabled) {
             const autoFillConfig = widget.autoFill || (comp as any).autoFill;
             const currentValue = formData[fieldName];
 
             if (currentValue === undefined || currentValue === "") {
               const { sourceTable, filterColumn, userField, displayColumn } = autoFillConfig;
-
-              // 사용자 정보에서 필터 값 가져오기
               const userValue = user?.[userField as keyof typeof user];
 
               if (userValue && sourceTable && filterColumn && displayColumn) {
@@ -571,12 +517,10 @@ function ScreenViewPage() {
     initAutoFill();
   }, [layout, user]);
 
-  // 🆕 조건부 비활성화/숨김 시 해당 필드 값 초기화
-  // 조건 필드들의 값을 추적하여 변경 시에만 실행
+  // 조건부 비활성화/숨김 시 해당 필드 값 초기화
   const conditionalFieldValues = useMemo(() => {
     if (!layout?.components) return "";
 
-    // 조건부 설정에 사용되는 필드들의 현재 값을 JSON 문자열로 만들어 비교
     const conditionFields = new Set<string>();
     layout.components.forEach((component) => {
       const conditional = (component as any).conditional;
@@ -604,19 +548,16 @@ function ScreenViewPage() {
 
       const conditionalResult = evaluateConditional(conditional, formData as Record<string, any>, layout.components);
 
-      // 숨김 또는 비활성화 상태인 경우
       if (!conditionalResult.visible || conditionalResult.disabled) {
         const fieldName = (component as any).columnName || component.id;
         const currentValue = (formData as Record<string, any>)[fieldName];
 
-        // 값이 있으면 초기화 대상에 추가
         if (currentValue !== undefined && currentValue !== "" && currentValue !== null) {
           fieldsToReset.push(fieldName);
         }
       }
     });
 
-    // 초기화할 필드가 있으면 한 번에 처리
     if (fieldsToReset.length > 0) {
       setFormData((prev) => {
         const updated = { ...prev };
@@ -628,79 +569,57 @@ function ScreenViewPage() {
     }
   }, [conditionalFieldValues, layout?.components]);
 
-  // 캔버스 비율 조정 (사용자 화면에 맞게 자동 스케일) - 초기 로딩 시에만 계산
-  // 브라우저 배율 조정 시 메뉴와 화면이 함께 축소/확대되도록 resize 이벤트는 감지하지 않음
-  useEffect(() => {
-    // 모바일 환경에서는 스케일 조정 비활성화 (반응형만 작동)
-    if (isMobile) {
-      setScale(1);
-      setLayoutReady(true); // 모바일에서도 레이아웃 준비 완료 표시
-      return;
-    }
+  // 화면 해상도 정보
+  const screenWidth = layout?.screenResolution?.width || 1200;
+  const screenHeight = layout?.screenResolution?.height || 800;
 
-    const updateScale = () => {
-      if (containerRef.current && layout) {
-        const designWidth = layout?.screenResolution?.width || 1200;
-        const designHeight = layout?.screenResolution?.height || 800;
-
-        // 컨테이너의 실제 크기 (프리뷰 모드에서는 window 크기 사용)
-        let containerWidth: number;
-        let containerHeight: number;
-
-        if (isPreviewMode) {
-          // iframe에서는 window 크기를 직접 사용
-          containerWidth = window.innerWidth;
-          containerHeight = window.innerHeight;
-        } else {
-          containerWidth = containerRef.current.offsetWidth;
-          containerHeight = containerRef.current.offsetHeight;
-        }
-
-        let newScale: number;
-
-        if (isPreviewMode) {
-          // 프리뷰 모드: 가로/세로 모두 fit하도록 (여백 없이)
-          const scaleX = containerWidth / designWidth;
-          const scaleY = containerHeight / designHeight;
-          newScale = Math.min(scaleX, scaleY, 1); // 최대 1배율
-        } else {
-          // 일반 모드: 가로 기준 스케일 (좌우 여백 16px씩 고정)
-          const MARGIN_X = 32;
-          const availableWidth = containerWidth - MARGIN_X;
-          newScale = availableWidth / designWidth;
-        }
-
-        // console.log("📐 스케일 계산:", {
-        //   containerWidth,
-        //   containerHeight,
-        //   designWidth,
-        //   designHeight,
-        //   finalScale: newScale,
-        //   isPreviewMode,
-        // });
-
-        setScale(newScale);
-        // 컨테이너 너비 업데이트
-        setContainerWidth(containerWidth);
-
-        // 스케일 계산 완료 후 레이아웃 준비 완료 표시
-        setLayoutReady(true);
-      }
-    };
-
-    // 초기 측정 (한 번만 실행)
-    const timer = setTimeout(updateScale, 100);
-
-    // resize 이벤트는 감지하지 않음 - 브라우저 배율 조정 시 메뉴와 화면이 함께 변경되도록
-    return () => {
-      clearTimeout(timer);
-    };
-  }, [layout, isMobile, isPreviewMode]);
+  // RealtimePreview에 전달할 공통 props 빌더
+  const buildRealtimePreviewProps = (component: ComponentData, extraProps?: Record<string, any>) => ({
+    component,
+    isSelected: false,
+    isDesignMode: false,
+    onClick: () => {},
+    menuObjid,
+    screenId,
+    tableName: screen?.tableName,
+    userId: user?.userId,
+    userName,
+    companyCode,
+    selectedRowsData,
+    sortBy: tableSortBy,
+    sortOrder: tableSortOrder,
+    columnOrder: tableColumnOrder,
+    flowSelectedData,
+    flowSelectedStepId,
+    onFlowSelectedDataChange: (selectedData: any[], stepId: number | null) => {
+      setFlowSelectedData(selectedData);
+      setFlowSelectedStepId(stepId);
+    },
+    refreshKey: tableRefreshKey,
+    onRefresh: () => {
+      setTableRefreshKey((prev) => prev + 1);
+      setSelectedRowsData([]);
+    },
+    flowRefreshKey,
+    onFlowRefresh: () => {
+      setFlowRefreshKey((prev) => prev + 1);
+      setFlowSelectedData([]);
+      setFlowSelectedStepId(null);
+    },
+    formData,
+    onFormDataChange: (fieldName: string, value: any) => {
+      setFormData((prev) => ({ ...prev, [fieldName]: value }));
+    },
+    onSelectedRowsChange: (_: any[], selectedData: any[]) => {
+      setSelectedRowsData(selectedData);
+    },
+    ...extraProps,
+  });
 
   if (loading) {
     return (
-      <div className="from-muted to-muted/50 flex h-full min-h-[400px] w-full items-center justify-center bg-gradient-to-br">
-        <div className="border-border bg-background rounded-xl border p-8 text-center shadow-lg">
+      <div className="bg-muted/30 flex h-full min-h-[400px] w-full items-center justify-center">
+        <div className="border-border bg-background rounded-lg border p-8 text-center">
           <Loader2 className="text-primary mx-auto h-10 w-10 animate-spin" />
           <p className="text-foreground mt-4 font-medium">화면을 불러오는 중...</p>
         </div>
@@ -710,10 +629,10 @@ function ScreenViewPage() {
 
   if (error || !screen) {
     return (
-      <div className="from-muted to-muted/50 flex h-full min-h-[400px] w-full items-center justify-center bg-gradient-to-br">
-        <div className="border-border bg-background max-w-md rounded-xl border p-8 text-center shadow-lg">
-          <div className="from-destructive/20 to-warning/20 mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-gradient-to-br shadow-sm">
-            <span className="text-3xl">⚠️</span>
+      <div className="bg-muted/30 flex h-full min-h-[400px] w-full items-center justify-center">
+        <div className="border-border bg-background max-w-md rounded-lg border p-8 text-center">
+          <div className="bg-destructive/10 mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full">
+            <AlertTriangle className="text-destructive h-10 w-10" />
           </div>
           <h2 className="text-foreground mb-3 text-xl font-bold">화면을 찾을 수 없습니다</h2>
           <p className="text-muted-foreground mb-6 leading-relaxed">{error || "요청하신 화면이 존재하지 않습니다."}</p>
@@ -725,10 +644,6 @@ function ScreenViewPage() {
     );
   }
 
-  // 화면 해상도 정보가 있으면 해당 크기로, 없으면 기본 크기 사용
-  const screenWidth = layout?.screenResolution?.width || 1200;
-  const screenHeight = layout?.screenResolution?.height || 800;
-
   return (
     <ScreenPreviewProvider isPreviewMode={false}>
       <ActiveTabProvider>
@@ -739,565 +654,130 @@ function ScreenViewPage() {
           >
             {/* 레이아웃 준비 중 로딩 표시 */}
             {!layoutReady && (
-              <div className="from-muted to-muted/50 flex h-full w-full items-center justify-center bg-gradient-to-br">
-                <div className="border-border bg-background rounded-xl border p-8 text-center shadow-lg">
+              <div className="bg-muted/30 flex h-full w-full items-center justify-center">
+                <div className="border-border bg-background rounded-lg border p-8 text-center">
                   <Loader2 className="text-primary mx-auto h-8 w-8 animate-spin" />
                   <p className="text-foreground mt-4 text-sm font-medium">화면 준비 중...</p>
                 </div>
               </div>
             )}
 
-            {/* 절대 위치 기반 렌더링 (화면관리와 동일한 방식) */}
+            {/* 반응형 그리드 렌더링 */}
             {layoutReady && layout && layout.components.length > 0 ? (
               <ScreenMultiLangProvider components={layout.components} companyCode={companyCode}>
-                <div
-                  data-screen-runtime="true"
-                  className="bg-background relative"
-                  style={{
-                    width: `${screenWidth}px`,
-                    height: `${screenHeight}px`,
-                    minWidth: `${screenWidth}px`,
-                    maxWidth: `${screenWidth}px`,
-                    minHeight: `${screenHeight}px`,
-                    maxHeight: `${screenHeight}px`,
-                    flexShrink: 0,
-                    transform: `scale(${scale})`,
-                    transformOrigin: "top left",
-                    overflow: "visible",
-                  }}
-                >
-                  {/* 최상위 컴포넌트들 렌더링 */}
-                  {(() => {
-                    // 🆕 플로우 버튼 그룹 감지 및 처리
-                    const topLevelComponents = layout.components.filter((component) => !component.parentId);
+                {/* 기본 레이어: ResponsiveGridRenderer로 렌더링 */}
+                <ResponsiveGridRenderer
+                  components={layout.components}
+                  canvasWidth={screenWidth}
+                  canvasHeight={screenHeight}
+                  renderComponent={(component) => {
+                    // 조건부 표시 평가
+                    const conditional = (component as any).conditional;
+                    let conditionalDisabled = false;
 
-                    // 화면 관리에서 설정한 해상도를 사용하므로 widthOffset 계산 불필요
-                    // 모든 컴포넌트는 원본 위치 그대로 사용
-                    const widthOffset = 0;
+                    if (conditional?.enabled) {
+                      const conditionalResult = evaluateConditional(
+                        conditional,
+                        formData as Record<string, any>,
+                        layout?.components || [],
+                      );
 
-                    const buttonGroups: Record<string, any[]> = {};
-                    const processedButtonIds = new Set<string>();
-                    // 🔍 전체 버튼 목록 확인
-                    const allButtons = topLevelComponents.filter((component) => {
-                      const isButton =
-                        (component.type === "component" &&
-                          ["button-primary", "button-secondary"].includes((component as any).componentType)) ||
-                        (component.type === "widget" && (component as any).widgetType === "button");
-                      return isButton;
-                    });
-
-                    topLevelComponents.forEach((component) => {
-                      const isButton =
-                        (component.type === "component" &&
-                          ["button-primary", "button-secondary"].includes((component as any).componentType)) ||
-                        (component.type === "widget" && (component as any).widgetType === "button");
-
-                      if (isButton) {
-                        const flowConfig = (component as any).webTypeConfig?.flowVisibilityConfig as
-                          | FlowVisibilityConfig
-                          | undefined;
-
-                        // 🔧 임시: 버튼 그룹 기능 완전 비활성화
-                        // TODO: 사용자가 명시적으로 그룹을 원하는 경우에만 활성화하도록 UI 개선 필요
-                        const DISABLE_BUTTON_GROUPS = false;
-
-                        if (
-                          !DISABLE_BUTTON_GROUPS &&
-                          flowConfig?.enabled &&
-                          flowConfig.layoutBehavior === "auto-compact" &&
-                          flowConfig.groupId
-                        ) {
-                          if (!buttonGroups[flowConfig.groupId]) {
-                            buttonGroups[flowConfig.groupId] = [];
-                          }
-                          buttonGroups[flowConfig.groupId].push(component);
-                          processedButtonIds.add(component.id);
-                        }
-                        // else: 모든 버튼을 개별 렌더링
-                      }
-                    });
-
-                    const regularComponents = topLevelComponents.filter((c) => !processedButtonIds.has(c.id));
-
-                    // TableSearchWidget들을 먼저 찾기
-                    const tableSearchWidgets = regularComponents.filter(
-                      (c) => (c as any).componentId === "table-search-widget",
-                    );
-
-                    // 조건부 컨테이너들을 찾기
-                    const conditionalContainers = regularComponents.filter(
-                      (c) =>
-                        (c as any).componentId === "conditional-container" ||
-                        (c as any).componentType === "conditional-container",
-                    );
-
-                    // 🆕 같은 X 영역(섹션)에서 컴포넌트들이 겹치지 않도록 자동 수직 정렬
-                    // ⚠️ V2 레이아웃에서는 사용자가 배치한 위치를 존중하므로 자동 정렬 비활성화
-                    const autoLayoutComponents = regularComponents;
-
-                    // TableSearchWidget 및 조건부 컨테이너 높이 차이를 계산하여 Y 위치 추가 조정
-                    const adjustedComponents = autoLayoutComponents.map((component) => {
-                      const isTableSearchWidget = (component as any).componentId === "table-search-widget";
-                      const isConditionalContainer = (component as any).componentId === "conditional-container";
-
-                      if (isTableSearchWidget || isConditionalContainer) {
-                        // 자기 자신은 조정하지 않음
-                        return component;
+                      if (!conditionalResult.visible) {
+                        return null;
                       }
 
-                      let totalHeightAdjustment = 0;
-
-                      // TableSearchWidget 높이 조정
-                      for (const widget of tableSearchWidgets) {
-                        const isBelow = component.position.y > widget.position.y;
-                        const heightDiff = getHeightDiff(screenId, widget.id);
-
-                        if (isBelow && heightDiff > 0) {
-                          totalHeightAdjustment += heightDiff;
-                        }
-                      }
-
-                      // 조건부 컨테이너 높이 조정
-                      for (const container of conditionalContainers) {
-                        const isBelow = component.position.y > container.position.y;
-                        const actualHeight = conditionalContainerHeights[container.id];
-                        const originalHeight = container.size?.height || 200;
-                        const heightDiff = actualHeight ? actualHeight - originalHeight : 0;
-
-                        if (isBelow && heightDiff > 0) {
-                          totalHeightAdjustment += heightDiff;
-                        }
-                      }
-
-                      // 🆕 Zone 기반 높이 조정
-                      // Zone 단위로 활성 여부를 판단하여 Y 오프셋 계산
-                      // Zone은 겹치지 않으므로 merge 로직이 불필요 (단순 boolean 판단)
-                      for (const zone of zones) {
-                        const zoneBottom = zone.y + zone.height;
-                        // 컴포넌트가 Zone 하단보다 아래에 있는 경우
-                        if (component.position.y >= zoneBottom) {
-                          // Zone에 매칭되는 활성 레이어가 있는지 확인
-                          const hasActiveLayer = conditionalLayers.some(
-                            l => l.zoneId === zone.zone_id && activeLayerIds.includes(l.id)
-                          );
-                          if (!hasActiveLayer) {
-                            // Zone에 활성 레이어 없음: Zone 높이만큼 위로 당김 (빈 공간 제거)
-                            totalHeightAdjustment -= zone.height;
-                          }
-                        }
-                      }
-
-                      if (totalHeightAdjustment !== 0) {
-                        return {
-                          ...component,
-                          position: {
-                            ...component.position,
-                            y: component.position.y + totalHeightAdjustment,
-                          },
-                        };
-                      }
-
-                      return component;
-                    });
+                      conditionalDisabled = conditionalResult.disabled;
+                    }
 
                     return (
-                      <>
-                        {/* 일반 컴포넌트들 */}
-                        {adjustedComponents.map((component) => {
-                          // 조건부 표시 설정이 있는 경우에만 평가
-                          const conditional = (component as any).conditional;
-                          let conditionalDisabled = false;
-
-                          if (conditional?.enabled) {
-                            const conditionalResult = evaluateConditional(
-                              conditional,
-                              formData as Record<string, any>,
-                              layout?.components || [],
-                            );
-
-                            // 조건에 따라 숨김 처리
-                            if (!conditionalResult.visible) {
-                              return null;
-                            }
-
-                            // 조건에 따라 비활성화 처리
-                            conditionalDisabled = conditionalResult.disabled;
-                          }
-
-                          // 화면 관리 해상도를 사용하므로 위치 조정 불필요
-                          return (
-                            <RealtimePreview
-                              conditionalDisabled={conditionalDisabled}
-                              key={component.id}
-                              component={component}
-                              isSelected={false}
-                              isDesignMode={false}
-                              onClick={() => {}}
-                              menuObjid={menuObjid}
-                              screenId={screenId}
-                              tableName={screen?.tableName}
-                              userId={user?.userId}
-                              userName={userName}
-                              companyCode={companyCode}
-                              menuObjid={menuObjid}
-                              selectedRowsData={selectedRowsData}
-                              sortBy={tableSortBy}
-                              sortOrder={tableSortOrder}
-                              columnOrder={tableColumnOrder}
-                              tableDisplayData={tableDisplayData}
-                              onSelectedRowsChange={(
-                                _,
-                                selectedData,
-                                sortBy,
-                                sortOrder,
-                                columnOrder,
-                                tableDisplayData,
-                              ) => {
-                                setSelectedRowsData(selectedData);
-                                setTableSortBy(sortBy);
-                                setTableSortOrder(sortOrder || "asc");
-                                setTableColumnOrder(columnOrder);
-                                setTableDisplayData(tableDisplayData || []);
-                              }}
-                              flowSelectedData={flowSelectedData}
-                              flowSelectedStepId={flowSelectedStepId}
-                              onFlowSelectedDataChange={(selectedData: any[], stepId: number | null) => {
-                                setFlowSelectedData(selectedData);
-                                setFlowSelectedStepId(stepId);
-                              }}
-                              refreshKey={tableRefreshKey}
-                              onRefresh={() => {
-                                setTableRefreshKey((prev) => prev + 1);
-                                setSelectedRowsData([]); // 선택 해제
-                              }}
-                              flowRefreshKey={flowRefreshKey}
-                              onFlowRefresh={() => {
-                                setFlowRefreshKey((prev) => prev + 1);
-                                setFlowSelectedData([]); // 선택 해제
-                                setFlowSelectedStepId(null);
-                              }}
-                              formData={formData}
-                              onFormDataChange={(fieldName, value) => {
-                                setFormData((prev) => ({ ...prev, [fieldName]: value }));
-                              }}
-                              onHeightChange={(componentId, newHeight) => {
-                                setConditionalContainerHeights((prev) => ({
-                                  ...prev,
-                                  [componentId]: newHeight,
-                                }));
-                              }}
-                            >
-                              {/* 자식 컴포넌트들 */}
-                              {(component.type === "group" ||
-                                component.type === "container" ||
-                                component.type === "area") &&
-                                layout.components
-                                  .filter((child) => child.parentId === component.id)
-                                  .map((child) => {
-                                    // 자식 컴포넌트의 위치를 부모 기준 상대 좌표로 조정
-                                    const relativeChildComponent = {
-                                      ...child,
-                                      position: {
-                                        x: child.position.x - component.position.x,
-                                        y: child.position.y - component.position.y,
-                                        z: child.position.z || 1,
-                                      },
-                                    };
-
-                                    return (
-                                      <RealtimePreview
-                                        key={child.id}
-                                        component={relativeChildComponent}
-                                        isSelected={false}
-                                        isDesignMode={false}
-                                        onClick={() => {}}
-                                        menuObjid={menuObjid}
-                                        screenId={screenId}
-                                        tableName={screen?.tableName}
-                                        userId={user?.userId}
-                                        userName={userName}
-                                        companyCode={companyCode}
-                                        menuObjid={menuObjid}
-                                        selectedRowsData={selectedRowsData}
-                                        sortBy={tableSortBy}
-                                        sortOrder={tableSortOrder}
-                                        columnOrder={tableColumnOrder}
-                                        tableDisplayData={tableDisplayData}
-                                        onSelectedRowsChange={(
-                                          _,
-                                          selectedData,
-                                          sortBy,
-                                          sortOrder,
-                                          columnOrder,
-                                          tableDisplayData,
-                                        ) => {
-                                          setSelectedRowsData(selectedData);
-                                          setTableSortBy(sortBy);
-                                          setTableSortOrder(sortOrder || "asc");
-                                          setTableColumnOrder(columnOrder);
-                                          setTableDisplayData(tableDisplayData || []);
-                                        }}
-                                        refreshKey={tableRefreshKey}
-                                        onRefresh={() => {
-                                          setTableRefreshKey((prev) => prev + 1);
-                                          setSelectedRowsData([]); // 선택 해제
-                                        }}
-                                        formData={formData}
-                                        onFormDataChange={(fieldName, value) => {
-                                          setFormData((prev) => ({ ...prev, [fieldName]: value }));
-                                        }}
-                                      />
-                                    );
-                                  })}
-                            </RealtimePreview>
-                          );
+                      <RealtimePreview
+                        {...buildRealtimePreviewProps(component, {
+                          conditionalDisabled,
+                          onHeightChange: (componentId: string, newHeight: number) => {
+                            setConditionalContainerHeights((prev) => ({
+                              ...prev,
+                              [componentId]: newHeight,
+                            }));
+                          },
                         })}
+                      >
+                        {/* 자식 컴포넌트들 (그룹/컨테이너/영역) */}
+                        {(component.type === "group" || component.type === "container" || component.type === "area") &&
+                          layout.components
+                            .filter((child) => child.parentId === component.id)
+                            .map((child) => {
+                              // 자식 컴포넌트의 위치를 부모 기준 상대 좌표로 조정
+                              const relativeChildComponent = {
+                                ...child,
+                                position: {
+                                  x: child.position.x - component.position.x,
+                                  y: child.position.y - component.position.y,
+                                  z: child.position.z || 1,
+                                },
+                              };
 
-                        {/* 🆕 플로우 버튼 그룹들 */}
-                        {Object.entries(buttonGroups).map(([groupId, buttons]) => {
-                          if (buttons.length === 0) return null;
-
-                          const firstButton = buttons[0];
-                          const groupConfig = (firstButton as any).webTypeConfig
-                            ?.flowVisibilityConfig as FlowVisibilityConfig;
-
-                          // 🔍 버튼 그룹 설정 확인
-                          console.log("🔍 버튼 그룹 설정:", {
-                            groupId,
-                            buttonCount: buttons.length,
-                            buttons: buttons.map((b) => ({
-                              id: b.id,
-                              label: b.label,
-                              x: b.position.x,
-                              y: b.position.y,
-                            })),
-                            groupConfig: {
-                              layoutBehavior: groupConfig.layoutBehavior,
-                              groupDirection: groupConfig.groupDirection,
-                              groupAlign: groupConfig.groupAlign,
-                              groupGap: groupConfig.groupGap,
-                            },
-                          });
-
-                          // 🔧 수정: 그룹 컨테이너는 첫 번째 버튼 위치를 기준으로 하되,
-                          // 각 버튼의 상대 위치는 원래 위치를 유지
-                          const firstButtonPosition = {
-                            x: buttons[0].position.x,
-                            y: buttons[0].position.y,
-                            z: buttons[0].position.z || 2,
-                          };
-
-                          // 버튼 그룹 위치에도 widthOffset 적용
-                          const adjustedGroupPosition = {
-                            ...firstButtonPosition,
-                            x: firstButtonPosition.x + widthOffset,
-                          };
-
-                          // 그룹의 크기 계산: 버튼들의 실제 크기 + 간격을 기준으로 계산
-                          const direction = groupConfig.groupDirection || "horizontal";
-                          const gap = groupConfig.groupGap ?? 8;
-
-                          let groupWidth = 0;
-                          let groupHeight = 0;
-
-                          if (direction === "horizontal") {
-                            groupWidth = buttons.reduce((total, button, index) => {
-                              const buttonWidth = button.size?.width || 100;
-                              const gapWidth = index < buttons.length - 1 ? gap : 0;
-                              return total + buttonWidth + gapWidth;
-                            }, 0);
-                            groupHeight = Math.max(...buttons.map((b) => b.size?.height || 40));
-                          } else {
-                            groupWidth = Math.max(...buttons.map((b) => b.size?.width || 100));
-                            groupHeight = buttons.reduce((total, button, index) => {
-                              const buttonHeight = button.size?.height || 40;
-                              const gapHeight = index < buttons.length - 1 ? gap : 0;
-                              return total + buttonHeight + gapHeight;
-                            }, 0);
-                          }
-
-                          return (
-                            <div
-                              key={`flow-button-group-${groupId}`}
-                              style={{
-                                position: "absolute",
-                                left: `${adjustedGroupPosition.x}px`,
-                                top: `${adjustedGroupPosition.y}px`,
-                                zIndex: adjustedGroupPosition.z,
-                                width: `${groupWidth}px`,
-                                height: `${groupHeight}px`,
-                              }}
-                            >
-                              <FlowButtonGroup
-                                buttons={buttons}
-                                groupConfig={groupConfig}
-                                isDesignMode={false}
-                                renderButton={(button) => {
-                                  // 🔧 각 버튼의 상대 위치 = 버튼의 원래 위치 - 첫 번째 버튼 위치
-                                  const relativeButton = {
-                                    ...button,
-                                    position: {
-                                      x: button.position.x - firstButtonPosition.x,
-                                      y: button.position.y - firstButtonPosition.y,
-                                      z: button.position.z || 1,
-                                    },
-                                  };
-
-                                  return (
-                                    <div
-                                      key={button.id}
-                                      style={{
-                                        position: "relative",
-                                        display: "inline-block",
-                                        width: button.size?.width || 100,
-                                        minWidth: button.size?.width || 100,
-                                        height: button.size?.height || 40,
-                                        flexShrink: 0,
-                                      }}
-                                    >
-                                      <div style={{ width: "100%", height: "100%" }}>
-                                        <DynamicComponentRenderer
-                                          component={relativeButton}
-                                          isDesignMode={false}
-                                          isInteractive={true}
-                                          formData={formData}
-                                          onDataflowComplete={() => {}}
-                                          screenId={screenId}
-                                          tableName={screen?.tableName}
-                                          userId={user?.userId}
-                                          userName={userName}
-                                          companyCode={companyCode}
-                                          tableDisplayData={tableDisplayData}
-                                          selectedRowsData={selectedRowsData}
-                                          sortBy={tableSortBy}
-                                          sortOrder={tableSortOrder}
-                                          columnOrder={tableColumnOrder}
-                                          onSelectedRowsChange={(_, selectedData, sortBy, sortOrder, columnOrder) => {
-                                            setSelectedRowsData(selectedData);
-                                            setTableSortBy(sortBy);
-                                            setTableSortOrder(sortOrder || "asc");
-                                            setTableColumnOrder(columnOrder);
-                                          }}
-                                          flowSelectedData={flowSelectedData}
-                                          flowSelectedStepId={flowSelectedStepId}
-                                          onFlowSelectedDataChange={(selectedData: any[], stepId: number | null) => {
-                                            setFlowSelectedData(selectedData);
-                                            setFlowSelectedStepId(stepId);
-                                          }}
-                                          refreshKey={tableRefreshKey}
-                                          onRefresh={() => {
-                                            setTableRefreshKey((prev) => prev + 1);
-                                            setSelectedRowsData([]);
-                                          }}
-                                          flowRefreshKey={flowRefreshKey}
-                                          onFlowRefresh={() => {
-                                            setFlowRefreshKey((prev) => prev + 1);
-                                            setFlowSelectedData([]);
-                                            setFlowSelectedStepId(null);
-                                          }}
-                                          onFormDataChange={(fieldName, value) => {
-                                            setFormData((prev) => ({ ...prev, [fieldName]: value }));
-                                          }}
-                                        />
-                                      </div>
-                                    </div>
-                                  );
-                                }}
-                              />
-                            </div>
-                          );
-                        })}
-
-                        {/* 🆕 조건부 레이어 컴포넌트 렌더링 (Zone 기반) */}
-                        {conditionalLayers.map((layer) => {
-                          const isActive = activeLayerIds.includes(layer.id);
-                          if (!isActive || !layer.components || layer.components.length === 0) return null;
-
-                          // Zone 기반: zoneId로 Zone 찾아서 위치/크기 결정
-                          const zone = layer.zoneId ? zones.find(z => z.zone_id === layer.zoneId) : null;
-                          const region = zone 
-                            ? { x: zone.x, y: zone.y, width: zone.width, height: zone.height }
-                            : layer.displayRegion;
-
-                          return (
-                            <div
-                              key={`conditional-layer-${layer.id}`}
-                              data-conditional-layer="true"
-                              style={{
-                                position: "absolute",
-                                left: region ? `${region.x}px` : "0px",
-                                top: region ? `${region.y}px` : "0px",
-                                width: region ? `${region.width}px` : "100%",
-                                height: region ? `${region.height}px` : "auto",
-                                zIndex: layer.zIndex || 20,
-                                overflow: "hidden",
-                                transition: "none",
-                              }}
-                            >
-                              {layer.components
-                                .filter((comp) => !comp.parentId)
-                                .map((comp) => (
-                                  <RealtimePreview
-                                    key={comp.id}
-                                    component={comp}
-                                    isSelected={false}
-                                    isDesignMode={false}
-                                    onClick={() => {}}
-                                    menuObjid={menuObjid}
-                                    screenId={screenId}
-                                    tableName={screen?.tableName}
-                                    userId={user?.userId}
-                                    userName={userName}
-                                    companyCode={companyCode}
-                                    selectedRowsData={selectedRowsData}
-                                    sortBy={tableSortBy}
-                                    sortOrder={tableSortOrder}
-                                    columnOrder={tableColumnOrder}
-                                    tableDisplayData={tableDisplayData}
-                                    onSelectedRowsChange={(
-                                      _,
-                                      selectedData,
-                                      sortBy,
-                                      sortOrder,
-                                      columnOrder,
-                                      tableDisplayData,
-                                    ) => {
-                                      setSelectedRowsData(selectedData);
-                                      setTableSortBy(sortBy);
-                                      setTableSortOrder(sortOrder || "asc");
-                                      setTableColumnOrder(columnOrder);
-                                      setTableDisplayData(tableDisplayData || []);
-                                    }}
-                                    refreshKey={tableRefreshKey}
-                                    onRefresh={() => {
-                                      setTableRefreshKey((prev) => prev + 1);
-                                      setSelectedRowsData([]);
-                                    }}
-                                    formData={formData}
-                                    onFormDataChange={(fieldName, value) => {
-                                      setFormData((prev) => ({ ...prev, [fieldName]: value }));
-                                    }}
-                                  />
-                                ))}
-                            </div>
-                          );
-                        })}
-                      </>
+                              return (
+                                <RealtimePreview
+                                  key={child.id}
+                                  {...buildRealtimePreviewProps(relativeChildComponent)}
+                                />
+                              );
+                            })}
+                      </RealtimePreview>
                     );
-                  })()}
-                </div>
+                  }}
+                />
+
+                {/* 조건부 레이어 (Zone 기반) */}
+                {conditionalLayers.map((layer) => {
+                  const isActive = activeLayerIds.includes(layer.id);
+                  if (!isActive || !layer.components || layer.components.length === 0) return null;
+
+                  const zone = layer.zoneId ? zones.find((z) => z.zone_id === layer.zoneId) : null;
+                  const region = zone
+                    ? { x: zone.x, y: zone.y, width: zone.width, height: zone.height }
+                    : layer.displayRegion;
+
+                  return (
+                    <div
+                      key={`conditional-layer-${layer.id}`}
+                      data-conditional-layer="true"
+                      style={{
+                        position: "absolute",
+                        left: region ? `${region.x}px` : "0px",
+                        top: region ? `${region.y}px` : "0px",
+                        width: region ? `${region.width}px` : "100%",
+                        height: region ? `${region.height}px` : "auto",
+                        zIndex: layer.zIndex || 20,
+                        overflow: "hidden",
+                        transition: "none",
+                      }}
+                    >
+                      <ResponsiveGridRenderer
+                        components={layer.components.filter((comp) => !comp.parentId)}
+                        canvasWidth={region?.width || screenWidth}
+                        canvasHeight={region?.height || screenHeight}
+                        renderComponent={(comp) => (
+                          <RealtimePreview key={comp.id} {...buildRealtimePreviewProps(comp)} />
+                        )}
+                      />
+                    </div>
+                  );
+                })}
               </ScreenMultiLangProvider>
             ) : (
               // 빈 화면일 때
-              <div className="bg-background flex items-center justify-center" style={{ minHeight: screenHeight }}>
-                <div className="text-center">
-                  <div className="bg-muted mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full shadow-sm">
-                    <span className="text-2xl">📄</span>
+              layoutReady && (
+                <div className="bg-background flex items-center justify-center" style={{ minHeight: screenHeight }}>
+                  <div className="text-center">
+                    <div className="bg-muted mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full">
+                      <FileQuestion className="text-muted-foreground h-8 w-8" />
+                    </div>
+                    <h2 className="text-foreground mb-2 text-xl font-semibold">화면이 비어있습니다</h2>
+                    <p className="text-muted-foreground">이 화면에는 아직 설계된 컴포넌트가 없습니다.</p>
                   </div>
-                  <h2 className="text-foreground mb-2 text-xl font-semibold">화면이 비어있습니다</h2>
-                  <p className="text-muted-foreground">이 화면에는 아직 설계된 컴포넌트가 없습니다.</p>
                 </div>
-              </div>
+              )
             )}
 
             {/* 편집 모달 */}
@@ -1314,16 +794,10 @@ function ScreenViewPage() {
               modalTitle={editModalConfig.modalTitle}
               modalDescription={editModalConfig.modalDescription}
               onDataChange={(changedFormData) => {
-                console.log("📝 EditModal에서 데이터 변경 수신:", changedFormData);
-                // 변경된 데이터를 메인 폼에 반영
-                setFormData((prev) => {
-                  const updatedFormData = {
-                    ...prev,
-                    ...changedFormData, // 변경된 필드들만 업데이트
-                  };
-                  console.log("📊 메인 폼 데이터 업데이트:", updatedFormData);
-                  return updatedFormData;
-                });
+                setFormData((prev) => ({
+                  ...prev,
+                  ...changedFormData,
+                }));
               }}
             />
 
@@ -1344,16 +818,17 @@ function ScreenViewPage() {
 }
 
 // 실제 컴포넌트를 Provider로 감싸기
-function ScreenViewPageWrapper() {
+function ScreenViewPageWrapper({ screenIdProp, menuObjidProp }: ScreenViewPageProps = {}) {
   return (
     <TableSearchWidgetHeightProvider>
       <ScreenContextProvider>
         <SplitPanelProvider>
-          <ScreenViewPage />
+          <ScreenViewPage screenIdProp={screenIdProp} menuObjidProp={menuObjidProp} />
         </SplitPanelProvider>
       </ScreenContextProvider>
     </TableSearchWidgetHeightProvider>
   );
 }
 
+export { ScreenViewPageWrapper };
 export default ScreenViewPageWrapper;
diff --git a/frontend/app/(pop)/pop/screens/[screenId]/page.tsx b/frontend/app/(pop)/pop/screens/[screenId]/page.tsx
index bbc2182e..ec16c27d 100644
--- a/frontend/app/(pop)/pop/screens/[screenId]/page.tsx
+++ b/frontend/app/(pop)/pop/screens/[screenId]/page.tsx
@@ -174,10 +174,10 @@ function PopScreenViewPage() {
 
   if (loading) {
     return (
-      <div className="flex h-screen w-full items-center justify-center bg-gray-100">
+      <div className="flex h-screen w-full items-center justify-center bg-muted">
         <div className="text-center">
-          <Loader2 className="mx-auto h-10 w-10 animate-spin text-blue-500" />
-          <p className="mt-4 text-gray-600">POP 화면 로딩 중...</p>
+          <Loader2 className="mx-auto h-10 w-10 animate-spin text-primary" />
+          <p className="mt-4 text-muted-foreground">POP 화면 로딩 중...</p>
         </div>
       </div>
     );
@@ -185,13 +185,13 @@ function PopScreenViewPage() {
 
   if (error || !screen) {
     return (
-      <div className="flex h-screen w-full items-center justify-center bg-gray-100">
+      <div className="flex h-screen w-full items-center justify-center bg-muted">
         <div className="text-center max-w-md p-6">
-          <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-red-100">
+          <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-destructive/10">
             <span className="text-2xl">!</span>
           </div>
-          <h2 className="mb-2 text-xl font-bold text-gray-800">화면을 찾을 수 없습니다</h2>
-          <p className="mb-4 text-gray-600">{error || "요청하신 POP 화면이 존재하지 않습니다."}</p>
+          <h2 className="mb-2 text-xl font-bold text-foreground">화면을 찾을 수 없습니다</h2>
+          <p className="mb-4 text-muted-foreground">{error || "요청하신 POP 화면이 존재하지 않습니다."}</p>
           <Button onClick={() => router.back()} variant="outline">
             <ArrowLeft className="mr-2 h-4 w-4" />
             돌아가기
@@ -205,7 +205,7 @@ function PopScreenViewPage() {
     <ScreenPreviewProvider isPreviewMode={isPreviewMode}>
       <ActiveTabProvider>
         <TableOptionsProvider>
-          <div className="h-screen bg-gray-100 flex flex-col">
+          <div className="h-screen bg-muted flex flex-col">
             {/* 상단 툴바 (프리뷰 모드에서만) */}
             {isPreviewMode && (
               <div className="sticky top-0 z-50 bg-white border-b shadow-sm">
@@ -216,13 +216,13 @@ function PopScreenViewPage() {
                       닫기
                     </Button>
                     <span className="text-sm font-medium">{screen.screenName}</span>
-                    <span className="text-xs text-gray-400">
+                    <span className="text-xs text-muted-foreground/70">
                       ({currentModeKey.replace("_", " ")})
                     </span>
                   </div>
 
                   <div className="flex items-center gap-2">
-                    <div className="flex items-center gap-1 bg-gray-100 rounded-lg p-1">
+                    <div className="flex items-center gap-1 bg-muted rounded-lg p-1">
                       <Button
                         variant={deviceType === "mobile" ? "default" : "ghost"}
                         size="sm"
@@ -243,7 +243,7 @@ function PopScreenViewPage() {
                       </Button>
                     </div>
 
-                    <div className="flex items-center gap-1 bg-gray-100 rounded-lg p-1">
+                    <div className="flex items-center gap-1 bg-muted rounded-lg p-1">
                       <Button
                         variant={isLandscape ? "default" : "ghost"}
                         size="sm"
@@ -295,7 +295,7 @@ function PopScreenViewPage() {
               )}
 
               <div
-                className={`bg-white transition-all duration-300 ${isPreviewMode ? "shadow-2xl rounded-3xl overflow-auto border-8 border-gray-800" : "w-full min-h-full"}`}
+                className={`bg-white transition-all duration-300 ${isPreviewMode ? "shadow-2xl rounded-3xl overflow-auto border-8 border-foreground" : "w-full min-h-full"}`}
                 style={isPreviewMode ? {
                   width: currentDevice.width,
                   maxHeight: "80vh",
@@ -333,13 +333,13 @@ function PopScreenViewPage() {
                 ) : (
                   // 빈 화면
                   <div className="flex flex-col items-center justify-center min-h-[400px] p-8 text-center">
-                    <div className="w-16 h-16 rounded-full bg-gray-100 flex items-center justify-center mb-4">
-                      <Smartphone className="h-8 w-8 text-gray-400" />
+                    <div className="w-16 h-16 rounded-full bg-muted flex items-center justify-center mb-4">
+                      <Smartphone className="h-8 w-8 text-muted-foreground/70" />
                     </div>
-                    <h3 className="text-lg font-semibold text-gray-800 mb-2">
+                    <h3 className="text-lg font-semibold text-foreground mb-2">
                       화면이 비어있습니다
                     </h3>
-                    <p className="text-sm text-gray-500 max-w-xs">
+                    <p className="text-sm text-muted-foreground max-w-xs">
                       POP 화면 디자이너에서 컴포넌트를 추가하여 화면을 구성하세요.
                     </p>
                   </div>
diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index 7276f5b0..abcbd2f8 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -65,28 +65,28 @@
   --radius-xl: calc(var(--radius) + 4px);
 }
 
-/* ===== CSS Variables (shadcn/ui Official) ===== */
+/* ===== CSS Variables (Vivid Blue Theme) ===== */
 :root {
   /* Light Theme Colors - HSL Format */
   --background: 0 0% 100%;
-  --foreground: 222.2 84% 4.9%;
+  --foreground: 224 71% 4%;
   --card: 0 0% 100%;
-  --card-foreground: 222.2 84% 4.9%;
+  --card-foreground: 224 71% 4%;
   --popover: 0 0% 100%;
-  --popover-foreground: 222.2 84% 4.9%;
-  --primary: 222.2 47.4% 11.2%;
-  --primary-foreground: 210 40% 98%;
-  --secondary: 210 40% 96.1%;
-  --secondary-foreground: 222.2 47.4% 11.2%;
-  --muted: 210 40% 96.1%;
-  --muted-foreground: 215.4 16.3% 46.9%;
-  --accent: 210 40% 96.1%;
-  --accent-foreground: 222.2 47.4% 11.2%;
+  --popover-foreground: 224 71% 4%;
+  --primary: 217.2 91.2% 59.8%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 220 14.3% 95.9%;
+  --secondary-foreground: 220.9 39.3% 11%;
+  --muted: 220 14.3% 95.9%;
+  --muted-foreground: 220 8.9% 46.1%;
+  --accent: 220 14.3% 95.9%;
+  --accent-foreground: 220.9 39.3% 11%;
   --destructive: 0 84.2% 60.2%;
-  --destructive-foreground: 210 40% 98%;
-  --border: 214.3 31.8% 91.4%;
-  --input: 214.3 31.8% 91.4%;
-  --ring: 222.2 84% 4.9%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 220 13% 88%;
+  --input: 220 13% 88%;
+  --ring: 217.2 91.2% 59.8%;
 
   /* Success Colors (Emerald) */
   --success: 142 76% 36%;
@@ -111,66 +111,83 @@
   --radius: 0.5rem;
 
   /* Sidebar Colors */
-  --sidebar-background: 0 0% 98%;
-  --sidebar-foreground: 240 5.3% 26.1%;
-  --sidebar-primary: 240 5.9% 10%;
-  --sidebar-primary-foreground: 0 0% 98%;
-  --sidebar-accent: 240 4.8% 95.9%;
-  --sidebar-accent-foreground: 240 5.9% 10%;
+  --sidebar-background: 220 20% 97%;
+  --sidebar-foreground: 224 71% 4%;
+  --sidebar-primary: 217.2 91.2% 59.8%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 220 14.3% 95.9%;
+  --sidebar-accent-foreground: 220.9 39.3% 11%;
   --sidebar-border: 220 13% 91%;
   --sidebar-ring: 217.2 91.2% 59.8%;
 }
 
-/* ===== Dark Theme ===== */
+/* ===== Dark Theme (Palantir-Inspired) ===== */
 .dark {
-  --background: 222.2 84% 4.9%;
-  --foreground: 210 40% 98%;
-  --card: 222.2 84% 4.9%;
-  --card-foreground: 210 40% 98%;
-  --popover: 222.2 84% 4.9%;
-  --popover-foreground: 210 40% 98%;
-  --primary: 210 40% 98%;
-  --primary-foreground: 222.2 47.4% 11.2%;
-  --secondary: 217.2 32.6% 17.5%;
-  --secondary-foreground: 210 40% 98%;
-  --muted: 217.2 32.6% 17.5%;
-  --muted-foreground: 215 20.2% 65.1%;
-  --accent: 217.2 32.6% 17.5%;
-  --accent-foreground: 210 40% 98%;
-  --destructive: 0 62.8% 30.6%;
-  --destructive-foreground: 210 40% 98%;
-  --border: 217.2 32.6% 17.5%;
-  --input: 217.2 32.6% 17.5%;
-  --ring: 212.7 26.8% 83.9%;
+  /* 배경: 팔란티어 스타일 깊은 네이비 */
+  --background: 222 47% 6%;
+  --foreground: 210 20% 95%;
 
-  /* Success Colors (Emerald) - Dark */
-  --success: 142 76% 36%;
+  /* 카드: 배경보다 약간 밝게 (레이어 구분) */
+  --card: 220 40% 9%;
+  --card-foreground: 210 20% 95%;
+
+  /* 팝오버: 카드와 동일 */
+  --popover: 220 40% 9%;
+  --popover-foreground: 210 20% 95%;
+
+  /* Primary: 다크 배경에서 약간 더 밝은 블루 */
+  --primary: 217 91% 65%;
+  --primary-foreground: 0 0% 100%;
+
+  /* Secondary: 어두운 슬레이트 */
+  --secondary: 220 25% 14%;
+  --secondary-foreground: 210 20% 90%;
+
+  /* Muted: 차분한 회색-네이비 */
+  --muted: 220 20% 13%;
+  --muted-foreground: 215 15% 58%;
+
+  /* Accent: secondary와 유사 */
+  --accent: 220 25% 16%;
+  --accent-foreground: 210 20% 90%;
+
+  /* Destructive: 다크에서 더 밝은 레드 */
+  --destructive: 0 72% 51%;
+  --destructive-foreground: 0 0% 100%;
+
+  /* Border: 팔란티어 스타일 - 보더가 더 잘 보임 */
+  --border: 220 20% 18%;
+  --input: 220 20% 18%;
+  --ring: 217 91% 65%;
+
+  /* Success (Emerald) - 다크 배경용 밝기 조정 */
+  --success: 142 70% 42%;
   --success-foreground: 0 0% 100%;
 
-  /* Warning Colors (Amber) - Dark */
-  --warning: 38 92% 50%;
-  --warning-foreground: 0 0% 100%;
+  /* Warning (Amber) - 다크 배경용 밝기 조정 */
+  --warning: 38 92% 55%;
+  --warning-foreground: 0 0% 10%;
 
-  /* Info Colors (Cyan) - Dark */
-  --info: 188 94% 43%;
+  /* Info (Cyan) - 다크 배경용 밝기 조정 */
+  --info: 188 90% 48%;
   --info-foreground: 0 0% 100%;
 
-  /* Chart Colors - Dark */
-  --chart-1: 220 70% 50%;
-  --chart-2: 160 60% 45%;
-  --chart-3: 30 80% 55%;
-  --chart-4: 280 65% 60%;
-  --chart-5: 340 75% 55%;
+  /* Chart Colors - 다크 배경에서 선명한 컬러 */
+  --chart-1: 220 70% 55%;
+  --chart-2: 160 60% 48%;
+  --chart-3: 30 80% 58%;
+  --chart-4: 280 65% 63%;
+  --chart-5: 340 75% 58%;
 
-  /* Sidebar Colors - Dark */
-  --sidebar-background: 222.2 84% 4.9%;
-  --sidebar-foreground: 210 40% 98%;
-  --sidebar-primary: 217.2 91.2% 59.8%;
-  --sidebar-primary-foreground: 222.2 47.4% 11.2%;
-  --sidebar-accent: 217.2 32.6% 17.5%;
-  --sidebar-accent-foreground: 210 40% 98%;
-  --sidebar-border: 217.2 32.6% 17.5%;
-  --sidebar-ring: 217.2 91.2% 59.8%;
+  /* Sidebar - 메인 배경보다 약간 어둡게 */
+  --sidebar-background: 222 47% 5%;
+  --sidebar-foreground: 210 20% 90%;
+  --sidebar-primary: 217 91% 65%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 220 25% 14%;
+  --sidebar-accent-foreground: 210 20% 90%;
+  --sidebar-border: 220 20% 16%;
+  --sidebar-ring: 217 91% 65%;
 }
 
 /* ===== Base Styles ===== */
@@ -424,4 +441,201 @@ select {
   }
 }
 
+/* ===== 모달 필수 입력 검증 ===== */
+@keyframes validationShake {
+  0%, 100% { transform: translateX(0); }
+  20%, 60% { transform: translateX(-4px); }
+  40%, 80% { transform: translateX(4px); }
+}
+
+/* 흔들림 애니메이션 (일회성) */
+[data-validation-highlight] {
+  animation: validationShake 400ms ease-in-out;
+}
+
+/* 빨간 테두리 (값 입력 전까지 유지) */
+[data-validation-error] {
+  border-color: hsl(var(--destructive)) !important;
+}
+
+/* 필수 입력 경고 문구 (입력 필드 아래, 레이아웃 영향 없음) */
+.validation-error-msg-wrapper {
+  height: 0;
+  overflow: visible;
+  position: relative;
+}
+
+.validation-error-msg-wrapper > p {
+  position: absolute;
+  top: 1px;
+  left: 0;
+  font-size: 11px;
+  color: hsl(var(--destructive));
+  white-space: nowrap;
+  pointer-events: none;
+}
+
 /* ===== End of Global Styles ===== */
+
+/* ===== Dark Mode Compatibility Layer ===== */
+/* 하드코딩된 Tailwind 색상 → 다크 모드 자동 변환 */
+/* 개별 컴포넌트 수정 없이, 이 한 곳에서 전체 프로젝트 커버 */
+
+/* --- 1. 배경색: white/gray → 시맨틱 토큰 --- */
+.dark .bg-white { background-color: hsl(var(--card)) !important; }
+.dark .bg-gray-50 { background-color: hsl(var(--muted)) !important; }
+.dark .bg-gray-100 { background-color: hsl(var(--muted)) !important; }
+.dark .bg-gray-200 { background-color: hsl(var(--accent)) !important; }
+
+/* --- 2. 텍스트: gray → 시맨틱 토큰 --- */
+.dark .text-gray-400 { color: hsl(var(--muted-foreground)) !important; }
+.dark .text-gray-500 { color: hsl(var(--muted-foreground)) !important; }
+.dark .text-gray-600 { color: hsl(var(--foreground) / 0.7) !important; }
+.dark .text-gray-700 { color: hsl(var(--foreground) / 0.8) !important; }
+.dark .text-gray-800 { color: hsl(var(--foreground) / 0.9) !important; }
+.dark .text-gray-900 { color: hsl(var(--foreground)) !important; }
+
+/* --- 3. 보더: gray → 시맨틱 토큰 --- */
+.dark .border-gray-100 { border-color: hsl(var(--border)) !important; }
+.dark .border-gray-200 { border-color: hsl(var(--border)) !important; }
+.dark .border-gray-300 { border-color: hsl(var(--border)) !important; }
+.dark .divide-gray-200 > * + * { border-color: hsl(var(--border)) !important; }
+
+/* --- 4. 호버: gray → 시맨틱 토큰 --- */
+.dark .hover\:bg-gray-50:hover { background-color: hsl(var(--muted)) !important; }
+.dark .hover\:bg-gray-100:hover { background-color: hsl(var(--accent)) !important; }
+.dark .hover\:bg-gray-200:hover { background-color: hsl(var(--accent)) !important; }
+
+/* --- 5. Emerald (성공/완료 상태) --- */
+.dark .bg-emerald-50 { background-color: hsl(142 40% 12%) !important; }
+.dark .bg-emerald-100 { background-color: hsl(142 40% 15%) !important; }
+.dark .text-emerald-600 { color: hsl(142 70% 55%) !important; }
+.dark .text-emerald-700 { color: hsl(142 70% 50%) !important; }
+.dark .text-emerald-800 { color: hsl(142 70% 60%) !important; }
+.dark .text-emerald-900 { color: hsl(142 70% 65%) !important; }
+.dark .border-emerald-200 { border-color: hsl(142 40% 25%) !important; }
+.dark .border-emerald-300 { border-color: hsl(142 40% 30%) !important; }
+.dark .ring-emerald-200 { --tw-ring-color: hsl(142 40% 25%) !important; }
+
+/* --- 6. Amber/Yellow (경고/주의 상태) --- */
+.dark .bg-amber-50 { background-color: hsl(38 40% 12%) !important; }
+.dark .bg-amber-100 { background-color: hsl(38 40% 15%) !important; }
+.dark .bg-yellow-50 { background-color: hsl(48 40% 12%) !important; }
+.dark .bg-yellow-100 { background-color: hsl(48 40% 15%) !important; }
+.dark .text-amber-600 { color: hsl(38 90% 58%) !important; }
+.dark .text-amber-700 { color: hsl(38 90% 55%) !important; }
+.dark .text-amber-800 { color: hsl(38 90% 60%) !important; }
+.dark .text-amber-900 { color: hsl(38 90% 65%) !important; }
+.dark .text-yellow-600 { color: hsl(48 90% 55%) !important; }
+.dark .text-yellow-700 { color: hsl(48 90% 50%) !important; }
+.dark .text-yellow-800 { color: hsl(48 90% 60%) !important; }
+.dark .border-amber-200 { border-color: hsl(38 40% 25%) !important; }
+.dark .border-amber-300 { border-color: hsl(38 40% 30%) !important; }
+.dark .border-yellow-200 { border-color: hsl(48 40% 25%) !important; }
+.dark .ring-amber-200 { --tw-ring-color: hsl(38 40% 25%) !important; }
+
+/* --- 7. Blue (정보/프라이머리 상태) --- */
+.dark .bg-blue-50 { background-color: hsl(217 40% 12%) !important; }
+.dark .bg-blue-100 { background-color: hsl(217 40% 15%) !important; }
+.dark .text-blue-600 { color: hsl(217 90% 65%) !important; }
+.dark .text-blue-700 { color: hsl(217 90% 60%) !important; }
+.dark .text-blue-800 { color: hsl(217 90% 65%) !important; }
+.dark .border-blue-200 { border-color: hsl(217 40% 25%) !important; }
+.dark .ring-blue-200 { --tw-ring-color: hsl(217 40% 25%) !important; }
+
+/* --- 8. Red (에러/삭제 상태) --- */
+.dark .bg-red-50 { background-color: hsl(0 40% 12%) !important; }
+.dark .bg-red-100 { background-color: hsl(0 40% 15%) !important; }
+.dark .text-red-600 { color: hsl(0 75% 60%) !important; }
+.dark .text-red-700 { color: hsl(0 75% 55%) !important; }
+.dark .text-red-800 { color: hsl(0 75% 60%) !important; }
+.dark .border-red-200 { border-color: hsl(0 40% 25%) !important; }
+.dark .ring-red-200 { --tw-ring-color: hsl(0 40% 25%) !important; }
+
+/* --- 9. Green (성공 - emerald 변형) --- */
+.dark .bg-green-50 { background-color: hsl(142 40% 12%) !important; }
+.dark .bg-green-100 { background-color: hsl(142 40% 15%) !important; }
+.dark .text-green-600 { color: hsl(142 70% 55%) !important; }
+.dark .text-green-700 { color: hsl(142 70% 50%) !important; }
+.dark .border-green-200 { border-color: hsl(142 40% 25%) !important; }
+
+/* --- 10. Slate (gray 변형) --- */
+.dark .bg-slate-50 { background-color: hsl(var(--muted)) !important; }
+.dark .bg-slate-100 { background-color: hsl(var(--muted)) !important; }
+.dark .text-slate-500 { color: hsl(var(--muted-foreground)) !important; }
+.dark .text-slate-600 { color: hsl(var(--foreground) / 0.7) !important; }
+.dark .text-slate-700 { color: hsl(var(--foreground) / 0.8) !important; }
+.dark .border-slate-200 { border-color: hsl(var(--border)) !important; }
+
+/* --- 11. bg-white opacity 변형 --- */
+.dark .bg-white\/30 { background-color: hsl(var(--card) / 0.3) !important; }
+.dark .bg-white\/50 { background-color: hsl(var(--card) / 0.5) !important; }
+.dark .bg-white\/80 { background-color: hsl(var(--card) / 0.8) !important; }
+.dark .bg-white\/90 { background-color: hsl(var(--card) / 0.9) !important; }
+.dark .hover\:bg-white:hover { background-color: hsl(var(--card)) !important; }
+
+/* --- 12. text-black → foreground --- */
+.dark .text-black { color: hsl(var(--foreground)) !important; }
+
+/* --- 13. bg/text/border - purple (관리 UI) --- */
+.dark .bg-purple-50 { background-color: hsl(270 40% 12%) !important; }
+.dark .bg-purple-100 { background-color: hsl(270 40% 15%) !important; }
+.dark .bg-purple-200 { background-color: hsl(270 40% 20%) !important; }
+.dark .text-purple-500 { color: hsl(270 70% 60%) !important; }
+.dark .text-purple-600 { color: hsl(270 70% 55%) !important; }
+.dark .text-purple-700 { color: hsl(270 70% 50%) !important; }
+.dark .border-purple-200 { border-color: hsl(270 40% 25%) !important; }
+.dark .border-purple-300 { border-color: hsl(270 40% 30%) !important; }
+
+/* --- 14. bg/text/border - indigo --- */
+.dark .bg-indigo-50 { background-color: hsl(231 40% 12%) !important; }
+.dark .bg-indigo-100 { background-color: hsl(231 40% 15%) !important; }
+.dark .text-indigo-600 { color: hsl(231 70% 60%) !important; }
+.dark .text-indigo-700 { color: hsl(231 70% 55%) !important; }
+.dark .border-indigo-200 { border-color: hsl(231 40% 25%) !important; }
+
+/* --- 15. bg/text - pink/rose (상태 뱃지) --- */
+.dark .bg-pink-50 { background-color: hsl(330 40% 12%) !important; }
+.dark .bg-pink-100 { background-color: hsl(330 40% 15%) !important; }
+.dark .text-pink-600 { color: hsl(330 70% 60%) !important; }
+.dark .text-pink-700 { color: hsl(330 70% 55%) !important; }
+.dark .bg-rose-50 { background-color: hsl(350 40% 12%) !important; }
+.dark .bg-rose-100 { background-color: hsl(350 40% 15%) !important; }
+.dark .text-rose-600 { color: hsl(350 70% 60%) !important; }
+.dark .text-rose-700 { color: hsl(350 70% 55%) !important; }
+
+/* --- 16. bg/text - cyan/teal (정보/상태) --- */
+.dark .bg-cyan-50 { background-color: hsl(187 40% 12%) !important; }
+.dark .bg-cyan-100 { background-color: hsl(187 40% 15%) !important; }
+.dark .text-cyan-600 { color: hsl(187 70% 55%) !important; }
+.dark .text-cyan-700 { color: hsl(187 70% 50%) !important; }
+.dark .bg-teal-50 { background-color: hsl(162 40% 12%) !important; }
+.dark .bg-teal-100 { background-color: hsl(162 40% 15%) !important; }
+.dark .text-teal-600 { color: hsl(162 70% 55%) !important; }
+.dark .text-teal-700 { color: hsl(162 70% 50%) !important; }
+
+/* --- 17. bg/text - orange (경고 변형) --- */
+.dark .bg-orange-50 { background-color: hsl(25 40% 12%) !important; }
+.dark .bg-orange-100 { background-color: hsl(25 40% 15%) !important; }
+.dark .bg-orange-200 { background-color: hsl(25 40% 20%) !important; }
+.dark .text-orange-600 { color: hsl(25 90% 65%) !important; }
+.dark .text-orange-700 { color: hsl(25 90% 70%) !important; }
+.dark .border-orange-200 { border-color: hsl(25 40% 25%) !important; }
+.dark .border-orange-300 { border-color: hsl(25 40% 30%) !important; }
+
+/* --- 18. bg/text/border - violet (필터/관계 표시) --- */
+.dark .bg-violet-50 { background-color: hsl(263 40% 12%) !important; }
+.dark .bg-violet-100 { background-color: hsl(263 40% 18%) !important; }
+.dark .bg-violet-200 { background-color: hsl(263 40% 22%) !important; }
+.dark .text-violet-500 { color: hsl(263 80% 70%) !important; }
+.dark .text-violet-600 { color: hsl(263 80% 65%) !important; }
+.dark .text-violet-700 { color: hsl(263 80% 72%) !important; }
+.dark .border-violet-200 { border-color: hsl(263 40% 30%) !important; }
+.dark .border-violet-300 { border-color: hsl(263 40% 35%) !important; }
+
+/* --- 19. bg/text/border - amber (조인/경고) --- */
+.dark .bg-amber-200 { background-color: hsl(38 40% 20%) !important; }
+.dark .text-amber-500 { color: hsl(38 90% 60%) !important; }
+.dark .text-amber-600 { color: hsl(38 90% 65%) !important; }
+
+/* ===== End Dark Mode Compatibility Layer ===== */
diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx
index 0661f649..2c5f1fa3 100644
--- a/frontend/app/layout.tsx
+++ b/frontend/app/layout.tsx
@@ -1,10 +1,10 @@
 import type { Metadata, Viewport } from "next";
 import { Inter, JetBrains_Mono } from "next/font/google";
 import "./globals.css";
+import { ThemeProvider } from "@/components/providers/ThemeProvider";
 import { QueryProvider } from "@/providers/QueryProvider";
 import { RegistryProvider } from "./registry-provider";
 import { Toaster } from "sonner";
-import ScreenModal from "@/components/common/ScreenModal";
 
 const inter = Inter({
   subsets: ["latin"],
@@ -39,14 +39,15 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="ko" className="h-full">
-      <body className={`${inter.variable} ${jetbrainsMono.variable} h-full bg-white font-sans antialiased`}>
+    <html lang="ko" className="h-full" suppressHydrationWarning>
+      <body className={`${inter.variable} ${jetbrainsMono.variable} bg-background h-full font-sans antialiased`}>
         <div id="root" className="h-full">
-          <QueryProvider>
-            <RegistryProvider>{children}</RegistryProvider>
-            <Toaster position="top-right" />
-            <ScreenModal />
-          </QueryProvider>
+          <ThemeProvider>
+            <QueryProvider>
+              <RegistryProvider>{children}</RegistryProvider>
+              <Toaster position="top-right" />
+            </QueryProvider>
+          </ThemeProvider>
           {/* Portal 컨테이너 */}
           <div id="portal-root" data-radix-portal="true" />
         </div>
diff --git a/frontend/app/test-type-safety/simple-test.tsx b/frontend/app/test-type-safety/simple-test.tsx
index 99f9b372..f9387d8a 100644
--- a/frontend/app/test-type-safety/simple-test.tsx
+++ b/frontend/app/test-type-safety/simple-test.tsx
@@ -227,9 +227,9 @@ export default function SimpleTypeSafetyTest() {
             </div>
 
             {passedTests === totalTests && totalTests > 0 && (
-              <div className="mt-4 rounded-lg border border-green-200 bg-green-50 p-4">
-                <div className="font-medium text-green-800">🎉 모든 타입 안전성 테스트가 통과되었습니다!</div>
-                <div className="mt-2 text-sm text-green-600">
+              <div className="mt-4 rounded-lg border border-emerald-200 bg-emerald-50 p-4">
+                <div className="font-medium text-emerald-800">🎉 모든 타입 안전성 테스트가 통과되었습니다!</div>
+                <div className="mt-2 text-sm text-emerald-600">
                   화면관리, 제어관리, 테이블타입관리 시스템이 안전하게 작동합니다.
                 </div>
               </div>
diff --git a/frontend/app/test-type-safety/stress-test.tsx b/frontend/app/test-type-safety/stress-test.tsx
index 5d780f29..26dd11ff 100644
--- a/frontend/app/test-type-safety/stress-test.tsx
+++ b/frontend/app/test-type-safety/stress-test.tsx
@@ -138,7 +138,7 @@ export default function StressTestPage() {
       <div className="space-y-4 text-center">
         <h1 className="text-3xl font-bold">🔥 타입 시스템 스트레스 테스트</h1>
         <p className="text-muted-foreground">극한 상황에서 타입 시스템의 견고함과 성능을 검증합니다</p>
-        <div className="rounded-lg bg-orange-50 p-3 text-sm text-orange-600">
+        <div className="rounded-lg bg-amber-50 p-3 text-sm text-amber-600">
           ⚠️ 주의: 이 테스트는 시스템에 높은 부하를 가할 수 있습니다
         </div>
 
@@ -184,19 +184,19 @@ export default function StressTestPage() {
             <CardContent className="space-y-4">
               <div className="grid grid-cols-2 gap-4 md:grid-cols-4">
                 <div className="text-center">
-                  <div className="text-2xl font-bold text-green-600">{testResults.passedTests}</div>
+                  <div className="text-2xl font-bold text-emerald-600">{testResults.passedTests}</div>
                   <div className="text-muted-foreground text-sm">통과</div>
                 </div>
                 <div className="text-center">
-                  <div className="text-2xl font-bold text-red-600">{testResults.failedTests}</div>
+                  <div className="text-2xl font-bold text-destructive">{testResults.failedTests}</div>
                   <div className="text-muted-foreground text-sm">실패</div>
                 </div>
                 <div className="text-center">
-                  <div className="text-2xl font-bold text-yellow-600">{testResults.warningTests}</div>
+                  <div className="text-2xl font-bold text-amber-600">{testResults.warningTests}</div>
                   <div className="text-muted-foreground text-sm">경고</div>
                 </div>
                 <div className="text-center">
-                  <div className="text-2xl font-bold text-blue-600">{Math.round(testResults.totalDuration)}ms</div>
+                  <div className="text-2xl font-bold text-primary">{Math.round(testResults.totalDuration)}ms</div>
                   <div className="text-muted-foreground text-sm">총 소요시간</div>
                 </div>
               </div>
@@ -212,16 +212,16 @@ export default function StressTestPage() {
               </div>
 
               {testResults.success ? (
-                <div className="rounded-lg border border-green-200 bg-green-50 p-4">
-                  <div className="font-medium text-green-800">🎉 모든 스트레스 테스트 통과!</div>
-                  <div className="mt-2 text-sm text-green-600">
+                <div className="rounded-lg border border-emerald-200 bg-emerald-50 p-4">
+                  <div className="font-medium text-emerald-800">🎉 모든 스트레스 테스트 통과!</div>
+                  <div className="mt-2 text-sm text-emerald-600">
                     타입 시스템이 극한 상황에서도 안정적으로 작동합니다.
                   </div>
                 </div>
               ) : (
-                <div className="rounded-lg border border-red-200 bg-red-50 p-4">
+                <div className="rounded-lg border border-destructive/20 bg-destructive/10 p-4">
                   <div className="font-medium text-red-800">⚠️ 일부 스트레스 테스트 실패</div>
-                  <div className="mt-2 text-sm text-red-600">
+                  <div className="mt-2 text-sm text-destructive">
                     개선이 필요한 영역이 있습니다. 아래 권장사항을 확인하세요.
                   </div>
                 </div>
@@ -253,7 +253,7 @@ export default function StressTestPage() {
 
                   {/* 메트릭스 표시 */}
                   {result.metrics && (
-                    <div className="mt-3 rounded bg-gray-50 p-3 text-xs">
+                    <div className="mt-3 rounded bg-muted p-3 text-xs">
                       <div className="mb-1 font-medium">📊 상세 메트릭스:</div>
                       <div className="grid grid-cols-2 gap-2">
                         {Object.entries(result.metrics).map(([key, value]) => (
@@ -286,7 +286,7 @@ export default function StressTestPage() {
                 <ul className="space-y-2">
                   {testResults.recommendation.map((rec, index) => (
                     <li key={index} className="flex items-start gap-2">
-                      <span className="mt-0.5 text-blue-500">•</span>
+                      <span className="mt-0.5 text-primary">•</span>
                       <span className="text-sm">{rec}</span>
                     </li>
                   ))}
@@ -304,7 +304,7 @@ export default function StressTestPage() {
             <CardTitle className="text-lg">📋 테스트 로그 (최근 10개)</CardTitle>
           </CardHeader>
           <CardContent>
-            <div className="h-40 overflow-y-auto rounded bg-black p-4 font-mono text-xs text-green-400">
+            <div className="h-40 overflow-y-auto rounded bg-black p-4 font-mono text-xs text-emerald-400">
               {testLogs.slice(-10).map((log, index) => (
                 <div key={index}>{log}</div>
               ))}
diff --git a/frontend/components/GlobalFileViewer.tsx b/frontend/components/GlobalFileViewer.tsx
index 34cf8e60..be0f306c 100644
--- a/frontend/components/GlobalFileViewer.tsx
+++ b/frontend/components/GlobalFileViewer.tsx
@@ -66,10 +66,10 @@ export const GlobalFileViewer: React.FC<GlobalFileViewerProps> = ({
       return <Video {...iconProps} className="text-purple-600" />;
     }
     if (['mp3', 'wav', 'flac', 'aac', 'ogg'].includes(extension)) {
-      return <Music {...iconProps} className="text-green-600" />;
+      return <Music {...iconProps} className="text-emerald-600" />;
     }
     if (['zip', 'rar', '7z', 'tar', 'gz'].includes(extension)) {
-      return <Archive {...iconProps} className="text-yellow-600" />;
+      return <Archive {...iconProps} className="text-amber-600" />;
     }
     if (['txt', 'md', 'doc', 'docx', 'pdf', 'rtf'].includes(extension)) {
       return <FileText {...iconProps} className="text-destructive" />;
@@ -192,7 +192,7 @@ export const GlobalFileViewer: React.FC<GlobalFileViewerProps> = ({
           {showControls && (
             <div className="flex items-center gap-2">
               <div className="relative flex-1">
-                <Search className="absolute left-2 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
+                <Search className="absolute left-2 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground/70" />
                 <Input
                   placeholder="파일명으로 검색..."
                   value={searchQuery}
@@ -219,7 +219,7 @@ export const GlobalFileViewer: React.FC<GlobalFileViewerProps> = ({
                 style={{ maxHeight }}
               >
                 {filteredFiles.length === 0 ? (
-                  <div className="text-center py-8 text-gray-500">
+                  <div className="text-center py-8 text-muted-foreground">
                     {searchQuery ? "검색 결과가 없습니다." : "저장된 파일이 없습니다."}
                   </div>
                 ) : (
@@ -232,7 +232,7 @@ export const GlobalFileViewer: React.FC<GlobalFileViewerProps> = ({
                             <div className="font-medium truncate">
                               {file.realFileName || file.savedFileName}
                             </div>
-                            <div className="text-sm text-gray-500 flex items-center gap-2">
+                            <div className="text-sm text-muted-foreground flex items-center gap-2">
                               <span>{formatFileSize(file.fileSize)}</span>
                               <div className="flex items-center gap-1">
                                 <Clock className="w-3 h-3" />
@@ -273,7 +273,7 @@ export const GlobalFileViewer: React.FC<GlobalFileViewerProps> = ({
                             variant="ghost"
                             size="sm"
                             onClick={() => handleRemove(file)}
-                            className="flex items-center gap-1 text-destructive hover:text-red-700"
+                            className="flex items-center gap-1 text-destructive hover:text-destructive"
                           >
                             <Trash2 className="w-3 h-3" />
                           </Button>
diff --git a/frontend/components/admin/AddColumnModal.tsx b/frontend/components/admin/AddColumnModal.tsx
index 550c46fc..92ab76ea 100644
--- a/frontend/components/admin/AddColumnModal.tsx
+++ b/frontend/components/admin/AddColumnModal.tsx
@@ -225,7 +225,7 @@ export function AddColumnModal({ isOpen, onClose, tableName, onSuccess }: AddCol
           <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
             <div className="space-y-2">
               <Label htmlFor="columnName">
-                컬럼명 <span className="text-red-500">*</span>
+                컬럼명 <span className="text-destructive">*</span>
               </Label>
               <Input
                 id="columnName"
@@ -233,7 +233,7 @@ export function AddColumnModal({ isOpen, onClose, tableName, onSuccess }: AddCol
                 onChange={(e) => updateColumn({ name: e.target.value })}
                 placeholder="column_name"
                 disabled={loading}
-                className={validationErrors.some((e) => e.includes("컬럼명")) ? "border-red-300" : ""}
+                className={validationErrors.some((e) => e.includes("컬럼명")) ? "border-destructive/30" : ""}
               />
               <p className="text-muted-foreground text-xs">영문자로 시작, 영문자/숫자/언더스코어만 사용 가능</p>
             </div>
@@ -255,7 +255,7 @@ export function AddColumnModal({ isOpen, onClose, tableName, onSuccess }: AddCol
           <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
             <div className="space-y-2">
               <Label>
-                입력타입 <span className="text-red-500">*</span>
+                입력타입 <span className="text-destructive">*</span>
               </Label>
               <Select value={column.inputType} onValueChange={handleInputTypeChange} disabled={loading}>
                 <SelectTrigger>
@@ -354,7 +354,7 @@ export function AddColumnModal({ isOpen, onClose, tableName, onSuccess }: AddCol
           <Button
             onClick={handleAddColumn}
             disabled={!isFormValid || loading}
-            className="bg-blue-600 hover:bg-blue-700"
+            className="bg-primary hover:bg-primary/90"
           >
             {loading ? (
               <>
diff --git a/frontend/components/admin/AuthenticationConfig.tsx b/frontend/components/admin/AuthenticationConfig.tsx
index da403add..cbfb8471 100644
--- a/frontend/components/admin/AuthenticationConfig.tsx
+++ b/frontend/components/admin/AuthenticationConfig.tsx
@@ -49,7 +49,7 @@ export function AuthenticationConfig({
 
       {/* 인증 타입별 설정 필드 */}
       {authType === "api-key" && (
-        <div className="space-y-4 rounded-md border bg-gray-50 p-4">
+        <div className="space-y-4 rounded-md border bg-muted p-4">
           <h4 className="text-sm font-medium">API Key 설정</h4>
 
           {/* 키 위치 */}
@@ -96,7 +96,7 @@ export function AuthenticationConfig({
       )}
 
       {authType === "bearer" && (
-        <div className="space-y-4 rounded-md border bg-gray-50 p-4">
+        <div className="space-y-4 rounded-md border bg-muted p-4">
           <h4 className="text-sm font-medium">Bearer Token 설정</h4>
 
           {/* 토큰 */}
@@ -111,14 +111,14 @@ export function AuthenticationConfig({
             />
           </div>
 
-          <p className="text-xs text-gray-500">
+          <p className="text-xs text-muted-foreground">
             * Authorization 헤더에 &quot;Bearer &#123;token&#125;&quot; 형식으로 전송됩니다.
           </p>
         </div>
       )}
 
       {authType === "basic" && (
-        <div className="space-y-4 rounded-md border bg-gray-50 p-4">
+        <div className="space-y-4 rounded-md border bg-muted p-4">
           <h4 className="text-sm font-medium">Basic Auth 설정</h4>
 
           {/* 사용자명 */}
@@ -145,12 +145,12 @@ export function AuthenticationConfig({
             />
           </div>
 
-          <p className="text-xs text-gray-500">* Authorization 헤더에 Base64 인코딩된 인증 정보가 전송됩니다.</p>
+          <p className="text-xs text-muted-foreground">* Authorization 헤더에 Base64 인코딩된 인증 정보가 전송됩니다.</p>
         </div>
       )}
 
       {authType === "oauth2" && (
-        <div className="space-y-4 rounded-md border bg-gray-50 p-4">
+        <div className="space-y-4 rounded-md border bg-muted p-4">
           <h4 className="text-sm font-medium">OAuth 2.0 설정</h4>
 
           {/* Client ID */}
@@ -189,12 +189,12 @@ export function AuthenticationConfig({
             />
           </div>
 
-          <p className="text-xs text-gray-500">* OAuth 2.0 Client Credentials Grant 방식을 사용합니다.</p>
+          <p className="text-xs text-muted-foreground">* OAuth 2.0 Client Credentials Grant 방식을 사용합니다.</p>
         </div>
       )}
 
       {authType === "db-token" && (
-        <div className="space-y-4 rounded-md border bg-gray-50 p-4">
+        <div className="space-y-4 rounded-md border bg-muted p-4">
           <h4 className="text-sm font-medium">DB 기반 토큰 설정</h4>
 
           <div className="space-y-2">
@@ -275,14 +275,14 @@ export function AuthenticationConfig({
             />
           </div>
 
-          <p className="text-xs text-gray-500">
+          <p className="text-xs text-muted-foreground">
             company_code는 현재 로그인한 사용자의 회사 코드로 자동 필터링됩니다.
           </p>
         </div>
       )}
 
       {authType === "none" && (
-        <div className="rounded-md border border-dashed p-4 text-center text-sm text-gray-500">
+        <div className="rounded-md border border-dashed p-4 text-center text-sm text-muted-foreground">
           인증이 필요하지 않은 공개 API입니다.
         </div>
       )}
diff --git a/frontend/components/admin/CompanySwitcher.tsx b/frontend/components/admin/CompanySwitcher.tsx
index 3d53accc..c37d82a5 100644
--- a/frontend/components/admin/CompanySwitcher.tsx
+++ b/frontend/components/admin/CompanySwitcher.tsx
@@ -132,7 +132,7 @@ export function CompanySwitcher({ onClose, isOpen = false }: CompanySwitcherProp
   return (
     <div className="space-y-4">
       {/* 현재 회사 정보 */}
-      <div className="rounded-lg border bg-gradient-to-r from-primary/10 to-primary/5 p-4">
+      <div className="rounded-lg border bg-muted/40 p-4">
         <div className="flex items-center gap-3">
           <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/20">
             <Building2 className="h-5 w-5 text-primary" />
diff --git a/frontend/components/admin/CompanyTable.tsx b/frontend/components/admin/CompanyTable.tsx
index 9c253765..e20fb806 100644
--- a/frontend/components/admin/CompanyTable.tsx
+++ b/frontend/components/admin/CompanyTable.tsx
@@ -1,8 +1,7 @@
 import { Edit, Trash2, HardDrive, FileText, Users } from "lucide-react";
 import { Company } from "@/types/company";
-import { COMPANY_TABLE_COLUMNS } from "@/constants/company";
 import { Button } from "@/components/ui/button";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { ResponsiveDataView, RDVColumn, RDVCardField } from "@/components/common/ResponsiveDataView";
 import { useRouter } from "next/navigation";
 
 interface CompanyTableProps {
@@ -14,8 +13,6 @@ interface CompanyTableProps {
 
 /**
  * 회사 목록 테이블 컴포넌트
- * 데스크톱: 테이블 뷰
- * 모바일/태블릿: 카드 뷰
  */
 export function CompanyTable({ companies, isLoading, onEdit, onDelete }: CompanyTableProps) {
   const router = useRouter();
@@ -52,206 +49,88 @@ export function CompanyTable({ companies, isLoading, onEdit, onDelete }: Company
     );
   };
 
-  // 로딩 상태 렌더링
-  if (isLoading) {
-    return (
-      <>
-        {/* 데스크톱 테이블 스켈레톤 */}
-        <div className="bg-card hidden shadow-sm lg:block">
-          <Table>
-            <TableHeader>
-              <TableRow>
-                {COMPANY_TABLE_COLUMNS.map((column) => (
-                  <TableHead key={column.key} className="h-12 px-6 py-3 text-sm font-semibold">
-                    {column.label}
-                  </TableHead>
-                ))}
-                <TableHead className="h-12 px-6 py-3 text-sm font-semibold">디스크 사용량</TableHead>
-                <TableHead className="h-12 px-6 py-3 text-sm font-semibold">작업</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {Array.from({ length: 10 }).map((_, index) => (
-                <TableRow key={index}>
-                  <TableCell className="h-16">
-                    <div className="bg-muted h-4 animate-pulse rounded"></div>
-                  </TableCell>
-                  <TableCell className="h-16">
-                    <div className="bg-muted h-4 animate-pulse rounded"></div>
-                  </TableCell>
-                  <TableCell className="h-16">
-                    <div className="bg-muted h-4 animate-pulse rounded"></div>
-                  </TableCell>
-                  <TableCell className="h-16">
-                    <div className="bg-muted h-4 animate-pulse rounded"></div>
-                  </TableCell>
-                  <TableCell className="h-16">
-                    <div className="flex gap-2">
-                      <div className="bg-muted h-8 w-8 animate-pulse rounded"></div>
-                      <div className="bg-muted h-8 w-8 animate-pulse rounded"></div>
-                    </div>
-                  </TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        </div>
+  // 데스크톱 테이블 컬럼 정의
+  const columns: RDVColumn<Company>[] = [
+    {
+      key: "company_code",
+      label: "회사코드",
+      width: "150px",
+      render: (value) => <span className="font-mono">{value}</span>,
+    },
+    {
+      key: "company_name",
+      label: "회사명",
+      render: (value) => <span className="font-medium">{value}</span>,
+    },
+    {
+      key: "writer",
+      label: "등록자",
+      width: "200px",
+    },
+    {
+      key: "diskUsage",
+      label: "디스크 사용량",
+      hideOnMobile: true,
+      render: (_value, row) => formatDiskUsage(row),
+    },
+  ];
 
-        {/* 모바일/태블릿 카드 스켈레톤 */}
-        <div className="grid gap-4 sm:grid-cols-2 lg:hidden">
-          {Array.from({ length: 6 }).map((_, index) => (
-            <div key={index} className="bg-card rounded-lg border p-4 shadow-sm">
-              <div className="mb-4 flex items-start justify-between">
-                <div className="flex-1 space-y-2">
-                  <div className="bg-muted h-5 w-32 animate-pulse rounded"></div>
-                  <div className="bg-muted h-4 w-24 animate-pulse rounded"></div>
-                </div>
-              </div>
-              <div className="space-y-2 border-t pt-4">
-                {Array.from({ length: 3 }).map((_, i) => (
-                  <div key={i} className="flex justify-between">
-                    <div className="bg-muted h-4 w-16 animate-pulse rounded"></div>
-                    <div className="bg-muted h-4 w-32 animate-pulse rounded"></div>
-                  </div>
-                ))}
-              </div>
-            </div>
-          ))}
-        </div>
-      </>
-    );
-  }
+  // 모바일 카드 필드 정의
+  const cardFields: RDVCardField<Company>[] = [
+    {
+      label: "작성자",
+      render: (company) => <span className="font-medium">{company.writer}</span>,
+    },
+    {
+      label: "디스크 사용량",
+      render: (company) => formatDiskUsage(company),
+    },
+  ];
 
-  // 데이터가 없을 때
-  if (companies.length === 0) {
-    return (
-      <div className="bg-card flex h-64 flex-col items-center justify-center shadow-sm">
-        <div className="flex flex-col items-center gap-2 text-center">
-          <p className="text-muted-foreground text-sm">등록된 회사가 없습니다.</p>
-        </div>
-      </div>
-    );
-  }
-
-  // 실제 데이터 렌더링
   return (
-    <>
-      {/* 데스크톱 테이블 뷰 (lg 이상) */}
-      <div className="bg-card hidden lg:block">
-        <Table>
-          <TableHeader>
-            <TableRow>
-              {COMPANY_TABLE_COLUMNS.map((column) => (
-                <TableHead key={column.key} className="h-12 px-6 py-3 text-sm font-semibold">
-                  {column.label}
-                </TableHead>
-              ))}
-              <TableHead className="h-12 px-6 py-3 text-sm font-semibold">디스크 사용량</TableHead>
-              <TableHead className="h-12 px-6 py-3 text-sm font-semibold">작업</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {companies.map((company) => (
-              <TableRow
-                key={company.regdate + company.company_code}
-                className="bg-background hover:bg-muted/50 transition-colors"
-              >
-                <TableCell className="h-16 px-6 py-3 font-mono text-sm">{company.company_code}</TableCell>
-                <TableCell className="h-16 px-6 py-3 text-sm font-medium">{company.company_name}</TableCell>
-                <TableCell className="h-16 px-6 py-3 text-sm">{company.writer}</TableCell>
-                <TableCell className="h-16 px-6 py-3">{formatDiskUsage(company)}</TableCell>
-                <TableCell className="h-16 px-6 py-3">
-                  <div className="flex gap-2">
-                    {/* <Button
-                      variant="ghost"
-                      size="icon"
-                      onClick={() => handleManageDepartments(company)}
-                      className="h-8 w-8"
-                      aria-label="부서관리"
-                    >
-                      <Users className="h-4 w-4" />
-                    </Button> */}
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      onClick={() => onEdit(company)}
-                      className="h-8 w-8"
-                      aria-label="수정"
-                    >
-                      <Edit className="h-4 w-4" />
-                    </Button>
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      onClick={() => onDelete(company)}
-                      className="text-destructive hover:bg-destructive/10 hover:text-destructive h-8 w-8"
-                      aria-label="삭제"
-                    >
-                      <Trash2 className="h-4 w-4" />
-                    </Button>
-                  </div>
-                </TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </div>
-
-      {/* 모바일/태블릿 카드 뷰 (lg 미만) */}
-      <div className="grid gap-4 sm:grid-cols-2 lg:hidden">
-        {companies.map((company) => (
-          <div
-            key={company.regdate + company.company_code}
-            className="bg-card hover:bg-muted/50 rounded-lg border p-4 shadow-sm transition-colors"
+    <ResponsiveDataView<Company>
+      data={companies}
+      columns={columns}
+      keyExtractor={(c) => c.regdate + c.company_code}
+      isLoading={isLoading}
+      emptyMessage="등록된 회사가 없습니다."
+      skeletonCount={10}
+      cardTitle={(c) => c.company_name}
+      cardSubtitle={(c) => <span className="font-mono">{c.company_code}</span>}
+      cardFields={cardFields}
+      actionsLabel="작업"
+      actionsWidth="180px"
+      renderActions={(company) => (
+        <>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() => handleManageDepartments(company)}
+            className="h-8 w-8"
+            aria-label="부서관리"
           >
-            {/* 헤더 */}
-            <div className="mb-4 flex items-start justify-between">
-              <div className="flex-1">
-                <h3 className="text-base font-semibold">{company.company_name}</h3>
-                <p className="text-muted-foreground mt-1 font-mono text-sm">{company.company_code}</p>
-              </div>
-            </div>
-
-            {/* 정보 */}
-            <div className="space-y-2 border-t pt-4">
-              <div className="flex justify-between text-sm">
-                <span className="text-muted-foreground">작성자</span>
-                <span className="font-medium">{company.writer}</span>
-              </div>
-              <div className="flex justify-between text-sm">
-                <span className="text-muted-foreground">디스크 사용량</span>
-                <div>{formatDiskUsage(company)}</div>
-              </div>
-            </div>
-
-            {/* 액션 */}
-            <div className="mt-4 flex gap-2 border-t pt-4">
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => handleManageDepartments(company)}
-                className="h-9 flex-1 gap-2 text-sm"
-              >
-                <Users className="h-4 w-4" />
-                부서
-              </Button>
-              <Button variant="outline" size="sm" onClick={() => onEdit(company)} className="h-9 flex-1 gap-2 text-sm">
-                <Edit className="h-4 w-4" />
-                수정
-              </Button>
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => onDelete(company)}
-                className="text-destructive hover:bg-destructive/10 hover:text-destructive h-9 flex-1 gap-2 text-sm"
-              >
-                <Trash2 className="h-4 w-4" />
-                삭제
-              </Button>
-            </div>
-          </div>
-        ))}
-      </div>
-    </>
+            <Users className="h-4 w-4" />
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() => onEdit(company)}
+            className="h-8 w-8"
+            aria-label="수정"
+          >
+            <Edit className="h-4 w-4" />
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() => onDelete(company)}
+            className="text-destructive hover:bg-destructive/10 hover:text-destructive h-8 w-8"
+            aria-label="삭제"
+          >
+            <Trash2 className="h-4 w-4" />
+          </Button>
+        </>
+      )}
+    />
   );
 }
diff --git a/frontend/components/admin/CreateTableModal.tsx b/frontend/components/admin/CreateTableModal.tsx
index 63d42c88..a237f47a 100644
--- a/frontend/components/admin/CreateTableModal.tsx
+++ b/frontend/components/admin/CreateTableModal.tsx
@@ -341,14 +341,14 @@ export function CreateTableModal({
           <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
             <div className="space-y-2">
               <Label htmlFor="tableName">
-                테이블명 <span className="text-red-500">*</span>
+                테이블명 <span className="text-destructive">*</span>
               </Label>
               <Input
                 id="tableName"
                 value={tableName}
                 onChange={(e) => handleTableNameChange(e.target.value)}
                 placeholder="예: customer_info"
-                className={tableNameError ? "border-red-300" : ""}
+                className={tableNameError ? "border-destructive/30" : ""}
               />
               {tableNameError && <p className="text-destructive text-sm">{tableNameError}</p>}
               <p className="text-muted-foreground text-xs">영문자로 시작, 영문자/숫자/언더스코어만 사용 가능</p>
@@ -369,7 +369,7 @@ export function CreateTableModal({
           <div className="space-y-3">
             <div className="flex items-center justify-between">
               <Label>
-                컬럼 정의 <span className="text-red-500">*</span>
+                컬럼 정의 <span className="text-destructive">*</span>
               </Label>
               <Button type="button" variant="outline" size="sm" onClick={addColumn} disabled={loading}>
                 <Plus className="mr-1 h-4 w-4" />
@@ -440,7 +440,7 @@ export function CreateTableModal({
                     <div className="font-medium">경고:</div>
                     <ul className="list-inside list-disc space-y-1">
                       {validationResult.warnings.map((warning: string, index: number) => (
-                        <li key={index} className="text-sm text-orange-600">
+                        <li key={index} className="text-sm text-amber-600">
                           {warning}
                         </li>
                       ))}
@@ -471,7 +471,7 @@ export function CreateTableModal({
           <Button
             onClick={handleCreateTable}
             disabled={!isFormValid || loading || (validationResult && !validationResult.isValid)}
-            className="bg-green-600 hover:bg-green-700"
+            className="bg-emerald-600 hover:bg-green-700"
           >
             {loading ? (
               <>
diff --git a/frontend/components/admin/DDLLogViewer.tsx b/frontend/components/admin/DDLLogViewer.tsx
index 0889f1bc..e8949be4 100644
--- a/frontend/components/admin/DDLLogViewer.tsx
+++ b/frontend/components/admin/DDLLogViewer.tsx
@@ -276,11 +276,11 @@ export function DDLLogViewer({ isOpen, onClose }: DDLLogViewerProps) {
                           <TableCell>
                             <div className="flex items-center gap-2">
                               {log.success ? (
-                                <CheckCircle2 className="h-4 w-4 text-green-600" />
+                                <CheckCircle2 className="h-4 w-4 text-emerald-600" />
                               ) : (
                                 <XCircle className="h-4 w-4 text-destructive" />
                               )}
-                              <span className={log.success ? "text-green-600" : "text-destructive"}>
+                              <span className={log.success ? "text-emerald-600" : "text-destructive"}>
                                 {log.success ? "성공" : "실패"}
                               </span>
                             </div>
@@ -323,7 +323,7 @@ export function DDLLogViewer({ isOpen, onClose }: DDLLogViewerProps) {
                       <CardTitle className="text-sm font-medium">성공</CardTitle>
                     </CardHeader>
                     <CardContent>
-                      <div className="text-2xl font-bold text-green-600">{statistics.successfulExecutions}</div>
+                      <div className="text-2xl font-bold text-emerald-600">{statistics.successfulExecutions}</div>
                     </CardContent>
                   </Card>
 
diff --git a/frontend/components/admin/ExternalDbConnectionModal.tsx b/frontend/components/admin/ExternalDbConnectionModal.tsx
index f5631297..28b2ad46 100644
--- a/frontend/components/admin/ExternalDbConnectionModal.tsx
+++ b/frontend/components/admin/ExternalDbConnectionModal.tsx
@@ -484,7 +484,7 @@ export const ExternalDbConnectionModal: React.FC<ExternalDbConnectionModalProps>
                 <div
                   className={`rounded-md border p-3 text-sm ${
                     testResult.success
-                      ? "border-green-200 bg-green-50 text-green-800"
+                      ? "border-emerald-200 bg-emerald-50 text-emerald-800"
                       : "border-destructive/20 bg-destructive/10 text-red-800"
                   }`}
                 >
@@ -527,7 +527,7 @@ export const ExternalDbConnectionModal: React.FC<ExternalDbConnectionModalProps>
             </Button>
 
             {showAdvanced && (
-              <div className="space-y-4 border-l-2 border-gray-200 pl-6">
+              <div className="space-y-4 border-l-2 border-border pl-6">
                 <div className="grid grid-cols-3 gap-4">
                   <div>
                     <Label htmlFor="connection_timeout">연결 타임아웃 (초)</Label>
diff --git a/frontend/components/admin/HeadersManager.tsx b/frontend/components/admin/HeadersManager.tsx
index 2a7e1f16..d9d04391 100644
--- a/frontend/components/admin/HeadersManager.tsx
+++ b/frontend/components/admin/HeadersManager.tsx
@@ -116,7 +116,7 @@ export function HeadersManager({ headers, onChange }: HeadersManagerProps) {
                       variant="ghost"
                       size="sm"
                       onClick={() => removeHeader(index)}
-                      className="h-8 w-8 p-0 text-red-600 hover:bg-red-50 hover:text-red-700"
+                      className="h-8 w-8 p-0 text-destructive hover:bg-destructive/10 hover:text-destructive"
                     >
                       <Trash2 className="h-4 w-4" />
                     </Button>
@@ -127,12 +127,12 @@ export function HeadersManager({ headers, onChange }: HeadersManagerProps) {
           </Table>
         </div>
       ) : (
-        <div className="rounded-md border border-dashed p-4 text-center text-sm text-gray-500">
+        <div className="rounded-md border border-dashed p-4 text-center text-sm text-muted-foreground">
           헤더가 없습니다. 헤더 추가 버튼을 클릭하여 추가하세요.
         </div>
       )}
 
-      <p className="text-xs text-gray-500">
+      <p className="text-xs text-muted-foreground">
         * 공통으로 사용할 HTTP 헤더를 설정합니다. 인증 헤더는 별도의 인증 설정에서 관리됩니다.
       </p>
     </div>
diff --git a/frontend/components/admin/LayoutFormModal.tsx b/frontend/components/admin/LayoutFormModal.tsx
index ad17198d..3a5b3b19 100644
--- a/frontend/components/admin/LayoutFormModal.tsx
+++ b/frontend/components/admin/LayoutFormModal.tsx
@@ -239,30 +239,30 @@ export const LayoutFormModal: React.FC<LayoutFormModalProps> = ({ open, onOpenCh
         <div className="mb-6 flex items-center justify-center">
           <div className="flex items-center gap-4">
             <div
-              className={`flex items-center gap-2 ${step === "basic" ? "text-primary" : step === "template" || step === "advanced" ? "text-green-600" : "text-gray-400"}`}
+              className={`flex items-center gap-2 ${step === "basic" ? "text-primary" : step === "template" || step === "advanced" ? "text-emerald-600" : "text-muted-foreground/70"}`}
             >
               <div
-                className={`flex h-8 w-8 items-center justify-center rounded-full text-sm font-medium ${step === "basic" ? "bg-primary/20 text-primary" : step === "template" || step === "advanced" ? "bg-green-100 text-green-600" : "bg-gray-100"}`}
+                className={`flex h-8 w-8 items-center justify-center rounded-full text-sm font-medium ${step === "basic" ? "bg-primary/20 text-primary" : step === "template" || step === "advanced" ? "bg-emerald-100 text-emerald-600" : "bg-muted"}`}
               >
                 1
               </div>
               <span className="text-sm font-medium">기본 정보</span>
             </div>
-            <div className="h-px w-8 bg-gray-300" />
+            <div className="h-px w-8 bg-muted/60" />
             <div
-              className={`flex items-center gap-2 ${step === "template" ? "text-primary" : step === "advanced" ? "text-green-600" : "text-gray-400"}`}
+              className={`flex items-center gap-2 ${step === "template" ? "text-primary" : step === "advanced" ? "text-emerald-600" : "text-muted-foreground/70"}`}
             >
               <div
-                className={`flex h-8 w-8 items-center justify-center rounded-full text-sm font-medium ${step === "template" ? "bg-primary/20 text-primary" : step === "advanced" ? "bg-green-100 text-green-600" : "bg-gray-100"}`}
+                className={`flex h-8 w-8 items-center justify-center rounded-full text-sm font-medium ${step === "template" ? "bg-primary/20 text-primary" : step === "advanced" ? "bg-emerald-100 text-emerald-600" : "bg-muted"}`}
               >
                 2
               </div>
               <span className="text-sm font-medium">템플릿 선택</span>
             </div>
-            <div className="h-px w-8 bg-gray-300" />
-            <div className={`flex items-center gap-2 ${step === "advanced" ? "text-primary" : "text-gray-400"}`}>
+            <div className="h-px w-8 bg-muted/60" />
+            <div className={`flex items-center gap-2 ${step === "advanced" ? "text-primary" : "text-muted-foreground/70"}`}>
               <div
-                className={`flex h-8 w-8 items-center justify-center rounded-full text-sm font-medium ${step === "advanced" ? "bg-primary/20 text-primary" : "bg-gray-100"}`}
+                className={`flex h-8 w-8 items-center justify-center rounded-full text-sm font-medium ${step === "advanced" ? "bg-primary/20 text-primary" : "bg-muted"}`}
               >
                 3
               </div>
@@ -305,7 +305,7 @@ export const LayoutFormModal: React.FC<LayoutFormModalProps> = ({ open, onOpenCh
                       <Card
                         key={category.id}
                         className={`cursor-pointer transition-all ${
-                          formData.category === category.id ? "bg-accent ring-2 ring-blue-500" : "hover:bg-gray-50"
+                          formData.category === category.id ? "bg-accent ring-2 ring-ring" : "hover:bg-muted"
                         }`}
                         onClick={() => setFormData((prev) => ({ ...prev, category: category.id }))}
                       >
@@ -314,7 +314,7 @@ export const LayoutFormModal: React.FC<LayoutFormModalProps> = ({ open, onOpenCh
                             <IconComponent className="h-5 w-5 text-muted-foreground" />
                             <div>
                               <div className="font-medium">{category.name}</div>
-                              <div className="text-xs text-gray-500">{category.description}</div>
+                              <div className="text-xs text-muted-foreground">{category.description}</div>
                             </div>
                           </div>
                         </CardContent>
@@ -341,13 +341,13 @@ export const LayoutFormModal: React.FC<LayoutFormModalProps> = ({ open, onOpenCh
             <div className="space-y-4">
               <div>
                 <Label>레이아웃 템플릿 *</Label>
-                <p className="mb-3 text-sm text-gray-500">원하는 레이아웃 구조를 선택하세요</p>
+                <p className="mb-3 text-sm text-muted-foreground">원하는 레이아웃 구조를 선택하세요</p>
                 <div className="grid grid-cols-2 gap-3">
                   {LAYOUT_TEMPLATES.map((template) => (
                     <Card
                       key={template.id}
                       className={`cursor-pointer transition-all ${
-                        formData.template === template.id ? "bg-accent ring-2 ring-blue-500" : "hover:bg-gray-50"
+                        formData.template === template.id ? "bg-accent ring-2 ring-ring" : "hover:bg-muted"
                       }`}
                       onClick={() =>
                         setFormData((prev) => ({
@@ -364,8 +364,8 @@ export const LayoutFormModal: React.FC<LayoutFormModalProps> = ({ open, onOpenCh
                             <Badge variant="secondary">{template.zones}개 영역</Badge>
                           </div>
                           <div className="text-sm text-muted-foreground">{template.description}</div>
-                          <div className="text-xs text-gray-500">예: {template.example}</div>
-                          <div className="rounded bg-gray-100 p-2 text-center font-mono text-xs">{template.icon}</div>
+                          <div className="text-xs text-muted-foreground">예: {template.example}</div>
+                          <div className="rounded bg-muted p-2 text-center font-mono text-xs">{template.icon}</div>
                         </div>
                       </CardContent>
                     </Card>
@@ -418,7 +418,7 @@ export const LayoutFormModal: React.FC<LayoutFormModalProps> = ({ open, onOpenCh
                   >
                     <Plus className="h-4 w-4" />
                   </Button>
-                  <span className="text-sm text-gray-500">개 영역</span>
+                  <span className="text-sm text-muted-foreground">개 영역</span>
                 </div>
               </div>
             </div>
@@ -428,17 +428,17 @@ export const LayoutFormModal: React.FC<LayoutFormModalProps> = ({ open, onOpenCh
             <div className="space-y-4">
               {generationResult ? (
                 <Alert
-                  className={generationResult.success ? "border-green-200 bg-green-50" : "border-destructive/20 bg-destructive/10"}
+                  className={generationResult.success ? "border-emerald-200 bg-emerald-50" : "border-destructive/20 bg-destructive/10"}
                 >
                   <Info className="h-4 w-4" />
-                  <AlertDescription className={generationResult.success ? "text-green-800" : "text-red-800"}>
+                  <AlertDescription className={generationResult.success ? "text-emerald-800" : "text-red-800"}>
                     {generationResult.message}
                     {generationResult.success && generationResult.files && (
                       <div className="mt-2">
                         <div className="text-sm font-medium">생성된 파일들:</div>
                         <ul className="mt-1 space-y-1 text-xs">
                           {generationResult.files.map((file, index) => (
-                            <li key={index} className="text-green-700">
+                            <li key={index} className="text-emerald-700">
                               • {file}
                             </li>
                           ))}
diff --git a/frontend/components/admin/MenuFormModal.tsx b/frontend/components/admin/MenuFormModal.tsx
index c9940d78..7771ed76 100644
--- a/frontend/components/admin/MenuFormModal.tsx
+++ b/frontend/components/admin/MenuFormModal.tsx
@@ -748,7 +748,7 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
               </SelectContent>
             </Select>
             {!isEdit && level !== 1 && (
-              <p className="text-xs text-gray-500">{getText(MENU_MANAGEMENT_KEYS.FORM_COMPANY_SUBMENU_NOTE)}</p>
+              <p className="text-xs text-muted-foreground">{getText(MENU_MANAGEMENT_KEYS.FORM_COMPANY_SUBMENU_NOTE)}</p>
             )}
           </div>
 
@@ -817,7 +817,7 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
                           }}
                         >
                           <div className="font-medium">{key.langKey}</div>
-                          {key.description && <div className="text-xs text-gray-500">{key.description}</div>}
+                          {key.description && <div className="text-xs text-muted-foreground">{key.description}</div>}
                         </div>
                       ))}
                   </div>
@@ -825,7 +825,7 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
               )}
             </div>
             {selectedLangKeyInfo && (
-              <p className="text-xs text-gray-500">
+              <p className="text-xs text-muted-foreground">
                 {getText(MENU_MANAGEMENT_KEYS.FORM_LANG_KEY_SELECTED)
                   .replace("{key}", selectedLangKeyInfo.langKey)
                   .replace("{description}", selectedLangKeyInfo.description)}
@@ -896,7 +896,7 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
                       {/* 검색 입력 */}
                       <div className="sticky top-0 border-b bg-white p-2">
                         <div className="relative">
-                          <Search className="absolute top-1/2 left-2 h-4 w-4 -translate-y-1/2 text-gray-400" />
+                          <Search className="absolute top-1/2 left-2 h-4 w-4 -translate-y-1/2 text-muted-foreground/70" />
                           <Input
                             placeholder="화면 검색..."
                             value={screenSearchText}
@@ -918,14 +918,14 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
                             <div
                               key={`screen-${screen.screenId || screen.id || index}-${screen.screenCode || index}`}
                               onClick={() => handleScreenSelect(screen)}
-                              className="cursor-pointer border-b px-3 py-2 last:border-b-0 hover:bg-gray-100"
+                              className="cursor-pointer border-b px-3 py-2 last:border-b-0 hover:bg-muted"
                             >
                               <div className="flex items-center justify-between">
                                 <div>
                                   <div className="text-sm font-medium">{screen.screenName}</div>
-                                  <div className="text-xs text-gray-500">{screen.screenCode}</div>
+                                  <div className="text-xs text-muted-foreground">{screen.screenCode}</div>
                                 </div>
-                                <div className="text-xs text-gray-400">ID: {screen.screenId || screen.id || "N/A"}</div>
+                                <div className="text-xs text-muted-foreground/70">ID: {screen.screenId || screen.id || "N/A"}</div>
                               </div>
                             </div>
                           ))}
@@ -933,7 +933,7 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
                           (screen) =>
                             screen.screenName.toLowerCase().includes(screenSearchText.toLowerCase()) ||
                             screen.screenCode.toLowerCase().includes(screenSearchText.toLowerCase()),
-                        ).length === 0 && <div className="px-3 py-2 text-sm text-gray-500">검색 결과가 없습니다.</div>}
+                        ).length === 0 && <div className="px-3 py-2 text-sm text-muted-foreground">검색 결과가 없습니다.</div>}
                       </div>
                     </div>
                   )}
@@ -942,7 +942,7 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
                 {/* 선택된 화면 정보 표시 */}
                 {selectedScreen && (
                   <div className="bg-accent rounded-md border p-3">
-                    <div className="text-sm font-medium text-blue-900">{selectedScreen.screenName}</div>
+                    <div className="text-sm font-medium text-primary">{selectedScreen.screenName}</div>
                     <div className="text-primary text-xs">코드: {selectedScreen.screenCode}</div>
                     <div className="text-primary text-xs">생성된 URL: {formData.menuUrl}</div>
                   </div>
@@ -971,7 +971,7 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
                       {/* 검색창 */}
                       <div className="border-b p-2">
                         <div className="relative">
-                          <Search className="absolute top-2.5 left-2 h-4 w-4 text-gray-400" />
+                          <Search className="absolute top-2.5 left-2 h-4 w-4 text-muted-foreground/70" />
                           <Input
                             type="text"
                             placeholder="대시보드 검색..."
@@ -995,13 +995,13 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
                             <div
                               key={dashboard.id}
                               onClick={() => handleDashboardSelect(dashboard)}
-                              className="cursor-pointer border-b px-3 py-2 last:border-b-0 hover:bg-gray-100"
+                              className="cursor-pointer border-b px-3 py-2 last:border-b-0 hover:bg-muted"
                             >
                               <div className="flex items-center justify-between">
                                 <div>
                                   <div className="text-sm font-medium">{dashboard.title}</div>
                                   {dashboard.description && (
-                                    <div className="text-xs text-gray-500">{dashboard.description}</div>
+                                    <div className="text-xs text-muted-foreground">{dashboard.description}</div>
                                   )}
                                 </div>
                               </div>
@@ -1012,7 +1012,7 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
                             dashboard.title.toLowerCase().includes(dashboardSearchText.toLowerCase()) ||
                             (dashboard.description &&
                               dashboard.description.toLowerCase().includes(dashboardSearchText.toLowerCase())),
-                        ).length === 0 && <div className="px-3 py-2 text-sm text-gray-500">검색 결과가 없습니다.</div>}
+                        ).length === 0 && <div className="px-3 py-2 text-sm text-muted-foreground">검색 결과가 없습니다.</div>}
                       </div>
                     </div>
                   )}
@@ -1021,7 +1021,7 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
                 {/* 선택된 대시보드 정보 표시 */}
                 {selectedDashboard && (
                   <div className="bg-accent rounded-md border p-3">
-                    <div className="text-sm font-medium text-blue-900">{selectedDashboard.title}</div>
+                    <div className="text-sm font-medium text-primary">{selectedDashboard.title}</div>
                     {selectedDashboard.description && (
                       <div className="text-primary text-xs">설명: {selectedDashboard.description}</div>
                     )}
diff --git a/frontend/components/admin/MenuPermissionsTable.tsx b/frontend/components/admin/MenuPermissionsTable.tsx
index 6cc887d2..61a7d577 100644
--- a/frontend/components/admin/MenuPermissionsTable.tsx
+++ b/frontend/components/admin/MenuPermissionsTable.tsx
@@ -745,7 +745,7 @@ export function MenuPermissionsTable({ permissions, onPermissionsChange, roleGro
                     <span>생성 (C)</span>
                     <Checkbox
                       onCheckedChange={(checked) => handleSelectAll("createYn", checked as boolean)}
-                      className="data-[state=checked]:bg-green-600"
+                      className="data-[state=checked]:bg-emerald-600"
                     />
                   </div>
                 </TableHead>
@@ -754,7 +754,7 @@ export function MenuPermissionsTable({ permissions, onPermissionsChange, roleGro
                     <span>조회 (R)</span>
                     <Checkbox
                       onCheckedChange={(checked) => handleSelectAll("readYn", checked as boolean)}
-                      className="data-[state=checked]:bg-blue-600"
+                      className="data-[state=checked]:bg-primary"
                     />
                   </div>
                 </TableHead>
@@ -772,7 +772,7 @@ export function MenuPermissionsTable({ permissions, onPermissionsChange, roleGro
                     <span>삭제 (D)</span>
                     <Checkbox
                       onCheckedChange={(checked) => handleSelectAll("deleteYn", checked as boolean)}
-                      className="data-[state=checked]:bg-red-600"
+                      className="data-[state=checked]:bg-destructive"
                     />
                   </div>
                 </TableHead>
@@ -834,7 +834,7 @@ export function MenuPermissionsTable({ permissions, onPermissionsChange, roleGro
                     <Checkbox
                       checked={menu.createYn === "Y"}
                       onCheckedChange={(checked) => handlePermissionChange(menu.menuObjid, "createYn", checked as boolean)}
-                      className="data-[state=checked]:bg-green-600"
+                      className="data-[state=checked]:bg-emerald-600"
                     />
                   </div>
                   <div className="flex items-center justify-between text-sm">
@@ -842,7 +842,7 @@ export function MenuPermissionsTable({ permissions, onPermissionsChange, roleGro
                     <Checkbox
                       checked={menu.readYn === "Y"}
                       onCheckedChange={(checked) => handlePermissionChange(menu.menuObjid, "readYn", checked as boolean)}
-                      className="data-[state=checked]:bg-blue-600"
+                      className="data-[state=checked]:bg-primary"
                     />
                   </div>
                   <div className="flex items-center justify-between text-sm">
@@ -858,7 +858,7 @@ export function MenuPermissionsTable({ permissions, onPermissionsChange, roleGro
                     <Checkbox
                       checked={menu.deleteYn === "Y"}
                       onCheckedChange={(checked) => handlePermissionChange(menu.menuObjid, "deleteYn", checked as boolean)}
-                      className="data-[state=checked]:bg-red-600"
+                      className="data-[state=checked]:bg-destructive"
                     />
                   </div>
                 </div>
diff --git a/frontend/components/admin/RestApiConnectionModal.tsx b/frontend/components/admin/RestApiConnectionModal.tsx
index 4c60c5af..eae5677d 100644
--- a/frontend/components/admin/RestApiConnectionModal.tsx
+++ b/frontend/components/admin/RestApiConnectionModal.tsx
@@ -564,7 +564,7 @@ export function RestApiConnectionModal({ isOpen, onClose, onSave, connection }:
             {testResult && (
               <div
                 className={`rounded-md border p-4 ${
-                  testResult.success ? "border-green-200 bg-green-50" : "border-red-200 bg-red-50"
+                  testResult.success ? "border-emerald-200 bg-emerald-50" : "border-destructive/20 bg-destructive/10"
                 }`}
               >
                 <div className="mb-2 flex items-center justify-between">
@@ -572,17 +572,17 @@ export function RestApiConnectionModal({ isOpen, onClose, onSave, connection }:
                     {testResult.success ? "성공" : "실패"}
                   </Badge>
                   {testResult.response_time && (
-                    <span className="text-sm text-gray-600">응답 시간: {testResult.response_time}ms</span>
+                    <span className="text-sm text-muted-foreground">응답 시간: {testResult.response_time}ms</span>
                   )}
                 </div>
 
                 <p className="text-sm">{testResult.message}</p>
 
                 {testResult.status_code && (
-                  <p className="mt-1 text-xs text-gray-500">상태 코드: {testResult.status_code}</p>
+                  <p className="mt-1 text-xs text-muted-foreground">상태 코드: {testResult.status_code}</p>
                 )}
 
-                {testResult.error_details && <p className="mt-2 text-xs text-red-600">{testResult.error_details}</p>}
+                {testResult.error_details && <p className="mt-2 text-xs text-destructive">{testResult.error_details}</p>}
               </div>
             )}
           </div>
diff --git a/frontend/components/admin/RoleDeleteModal.tsx b/frontend/components/admin/RoleDeleteModal.tsx
index 9f3cf75a..8f7c6d3b 100644
--- a/frontend/components/admin/RoleDeleteModal.tsx
+++ b/frontend/components/admin/RoleDeleteModal.tsx
@@ -79,9 +79,9 @@ export function RoleDeleteModal({ isOpen, onClose, onSuccess, role }: RoleDelete
 
         <div className="space-y-4">
           {/* 경고 메시지 */}
-          <div className="rounded-lg border border-orange-300 bg-orange-50 p-4">
+          <div className="rounded-lg border border-orange-300 bg-amber-50 p-4">
             <div className="flex items-start gap-3">
-              <AlertTriangle className="mt-0.5 h-5 w-5 flex-shrink-0 text-orange-600" />
+              <AlertTriangle className="mt-0.5 h-5 w-5 flex-shrink-0 text-amber-600" />
               <div className="space-y-2">
                 <p className="text-sm font-semibold text-orange-900">정말로 삭제하시겠습니까?</p>
                 <p className="text-xs text-orange-800">
@@ -124,7 +124,7 @@ export function RoleDeleteModal({ isOpen, onClose, onSuccess, role }: RoleDelete
             <div
               className={`rounded-lg border p-3 text-sm ${
                 alertType === "success"
-                  ? "border-green-300 bg-green-50 text-green-800"
+                  ? "border-green-300 bg-emerald-50 text-emerald-800"
                   : "border-destructive/50 bg-destructive/10 text-destructive"
               }`}
             >
diff --git a/frontend/components/admin/RoleFormModal.tsx b/frontend/components/admin/RoleFormModal.tsx
index cdeeccc5..b6e0fd0b 100644
--- a/frontend/components/admin/RoleFormModal.tsx
+++ b/frontend/components/admin/RoleFormModal.tsx
@@ -194,7 +194,7 @@ export function RoleFormModal({ isOpen, onClose, onSuccess, editingRole }: RoleF
           {/* 권한 그룹명 */}
           <div>
             <Label htmlFor="authName" className="text-xs sm:text-sm">
-              권한 그룹명 <span className="text-red-500">*</span>
+              권한 그룹명 <span className="text-destructive">*</span>
             </Label>
             <Input
               id="authName"
@@ -210,7 +210,7 @@ export function RoleFormModal({ isOpen, onClose, onSuccess, editingRole }: RoleF
           {/* 권한 코드 */}
           <div>
             <Label htmlFor="authCode" className="text-xs sm:text-sm">
-              권한 코드 <span className="text-red-500">*</span>
+              권한 코드 <span className="text-destructive">*</span>
             </Label>
             <Input
               id="authCode"
@@ -243,7 +243,7 @@ export function RoleFormModal({ isOpen, onClose, onSuccess, editingRole }: RoleF
           ) : (
             <div>
               <Label htmlFor="companyCode" className="text-xs sm:text-sm">
-                회사 <span className="text-red-500">*</span>
+                회사 <span className="text-destructive">*</span>
               </Label>
               {isSuperAdmin ? (
                 <>
@@ -345,10 +345,10 @@ export function RoleFormModal({ isOpen, onClose, onSuccess, editingRole }: RoleF
             <div
               className={`rounded-lg border p-3 text-sm ${
                 alertType === "success"
-                  ? "border-green-300 bg-green-50 text-green-800"
+                  ? "border-green-300 bg-emerald-50 text-emerald-800"
                   : alertType === "error"
                     ? "border-destructive/50 bg-destructive/10 text-destructive"
-                    : "border-blue-300 bg-blue-50 text-blue-800"
+                    : "border-primary/40 bg-primary/10 text-primary"
               }`}
             >
               <div className="flex items-start gap-2">
diff --git a/frontend/components/admin/ScreenAssignmentTab.tsx b/frontend/components/admin/ScreenAssignmentTab.tsx
index 8513e410..f97bcaf5 100644
--- a/frontend/components/admin/ScreenAssignmentTab.tsx
+++ b/frontend/components/admin/ScreenAssignmentTab.tsx
@@ -223,7 +223,7 @@ export const ScreenAssignmentTab: React.FC<ScreenAssignmentTabProps> = ({ menus
             </div>
 
             {selectedMenu && (
-              <div className="rounded-lg border bg-gray-50 p-4">
+              <div className="rounded-lg border bg-muted p-4">
                 <div className="flex items-center justify-between">
                   <div>
                     <h3 className="font-medium">
@@ -267,7 +267,7 @@ export const ScreenAssignmentTab: React.FC<ScreenAssignmentTabProps> = ({ menus
                 <Monitor className="h-5 w-5" />
                 할당된 화면 ({assignedScreens.length}개)
               </CardTitle>
-              <Button onClick={openAssignDialog} className="bg-blue-600 hover:bg-blue-700">
+              <Button onClick={openAssignDialog} className="bg-primary hover:bg-primary/90">
                 <Plus className="mr-2 h-4 w-4" />
                 화면 할당
               </Button>
@@ -275,15 +275,15 @@ export const ScreenAssignmentTab: React.FC<ScreenAssignmentTabProps> = ({ menus
           </CardHeader>
           <CardContent>
             {loading ? (
-              <div className="py-8 text-center text-gray-500">로딩 중...</div>
+              <div className="py-8 text-center text-muted-foreground">로딩 중...</div>
             ) : assignedScreens.length === 0 ? (
-              <div className="py-8 text-center text-gray-500">할당된 화면이 없습니다. 화면을 할당해보세요.</div>
+              <div className="py-8 text-center text-muted-foreground">할당된 화면이 없습니다. 화면을 할당해보세요.</div>
             ) : (
               <div className="space-y-3">
                 {assignedScreens.map((screen) => (
                   <div
                     key={screen.screenId}
-                    className="flex items-center justify-between rounded-lg border p-4 hover:bg-gray-50"
+                    className="flex items-center justify-between rounded-lg border p-4 hover:bg-muted"
                   >
                     <div className="flex-1">
                       <div className="flex items-center gap-3">
@@ -298,7 +298,7 @@ export const ScreenAssignmentTab: React.FC<ScreenAssignmentTabProps> = ({ menus
                       <p className="mt-1 text-sm text-muted-foreground">
                         테이블: {screen.tableName} | 생성일: {screen.createdDate.toLocaleDateString()}
                       </p>
-                      {screen.description && <p className="mt-1 text-sm text-gray-500">{screen.description}</p>}
+                      {screen.description && <p className="mt-1 text-sm text-muted-foreground">{screen.description}</p>}
                     </div>
                     <Button
                       variant="outline"
@@ -307,7 +307,7 @@ export const ScreenAssignmentTab: React.FC<ScreenAssignmentTabProps> = ({ menus
                         setSelectedScreen(screen);
                         setShowUnassignDialog(true);
                       }}
-                      className="text-destructive hover:text-red-700"
+                      className="text-destructive hover:text-destructive"
                     >
                       <X className="h-4 w-4" />
                     </Button>
@@ -330,7 +330,7 @@ export const ScreenAssignmentTab: React.FC<ScreenAssignmentTabProps> = ({ menus
           <div className="space-y-4">
             {/* 검색 */}
             <div className="relative">
-              <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform text-gray-400" />
+              <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform text-muted-foreground/70" />
               <Input
                 placeholder="화면명 또는 코드로 검색..."
                 value={searchTerm}
@@ -342,13 +342,13 @@ export const ScreenAssignmentTab: React.FC<ScreenAssignmentTabProps> = ({ menus
             {/* 화면 목록 */}
             <div className="max-h-64 space-y-2 overflow-y-auto">
               {filteredAvailableScreens.length === 0 ? (
-                <div className="py-4 text-center text-gray-500">할당 가능한 화면이 없습니다.</div>
+                <div className="py-4 text-center text-muted-foreground">할당 가능한 화면이 없습니다.</div>
               ) : (
                 filteredAvailableScreens.map((screen) => (
                   <div
                     key={screen.screenId}
                     className={`cursor-pointer rounded-lg border p-3 transition-colors ${
-                      selectedScreen?.screenId === screen.screenId ? "border-primary bg-accent" : "hover:bg-gray-50"
+                      selectedScreen?.screenId === screen.screenId ? "border-primary bg-accent" : "hover:bg-muted"
                     }`}
                     onClick={() => setSelectedScreen(screen)}
                   >
@@ -385,7 +385,7 @@ export const ScreenAssignmentTab: React.FC<ScreenAssignmentTabProps> = ({ menus
           </AlertDialogHeader>
           <AlertDialogFooter>
             <AlertDialogCancel onClick={() => setSelectedScreen(null)}>취소</AlertDialogCancel>
-            <AlertDialogAction onClick={handleUnassignScreen} className="bg-red-600 hover:bg-red-700">
+            <AlertDialogAction onClick={handleUnassignScreen} className="bg-destructive hover:bg-red-700">
               할당 해제
             </AlertDialogAction>
           </AlertDialogFooter>
diff --git a/frontend/components/admin/SortableCodeItem.tsx b/frontend/components/admin/SortableCodeItem.tsx
index 6d6da7d8..ade1a49e 100644
--- a/frontend/components/admin/SortableCodeItem.tsx
+++ b/frontend/components/admin/SortableCodeItem.tsx
@@ -116,7 +116,7 @@ export function SortableCodeItem({
                   }}
                   onPointerDown={(e) => e.stopPropagation()}
                   onMouseDown={(e) => e.stopPropagation()}
-                  className="text-muted-foreground hover:text-foreground -ml-1 flex h-5 w-5 items-center justify-center rounded transition-colors hover:bg-gray-100"
+                  className="text-muted-foreground hover:text-foreground -ml-1 flex h-5 w-5 items-center justify-center rounded transition-colors hover:bg-muted"
                   title={isExpanded ? "접기" : "펼치기"}
                 >
                   {isExpanded ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
@@ -135,12 +135,12 @@ export function SortableCodeItem({
                 </Badge>
               )}
               {depth === 2 && (
-                <Badge variant="outline" className="bg-blue-50 px-1.5 py-0 text-[10px] text-blue-600">
+                <Badge variant="outline" className="bg-primary/10 px-1.5 py-0 text-[10px] text-primary">
                   중분류
                 </Badge>
               )}
               {depth === 3 && (
-                <Badge variant="outline" className="bg-green-50 px-1.5 py-0 text-[10px] text-green-600">
+                <Badge variant="outline" className="bg-emerald-50 px-1.5 py-0 text-[10px] text-emerald-600">
                   소분류
                 </Badge>
               )}
@@ -196,7 +196,7 @@ export function SortableCodeItem({
                   onAddChild();
                 }}
                 title="하위 코드 추가"
-                className="text-blue-600 hover:bg-blue-50 hover:text-blue-700"
+                className="text-primary hover:bg-primary/10 hover:text-primary"
               >
                 <Plus className="h-3 w-3" />
               </Button>
diff --git a/frontend/components/admin/TableLogViewer.tsx b/frontend/components/admin/TableLogViewer.tsx
index 9f0541b6..f5c7cf32 100644
--- a/frontend/components/admin/TableLogViewer.tsx
+++ b/frontend/components/admin/TableLogViewer.tsx
@@ -102,11 +102,11 @@ export function TableLogViewer({ tableName, open, onOpenChange }: TableLogViewer
   const getOperationBadge = (type: string) => {
     switch (type) {
       case "INSERT":
-        return <Badge className="bg-green-500">추가</Badge>;
+        return <Badge className="bg-emerald-500">추가</Badge>;
       case "UPDATE":
-        return <Badge className="bg-blue-500">수정</Badge>;
+        return <Badge className="bg-primary">수정</Badge>;
       case "DELETE":
-        return <Badge className="bg-red-500">삭제</Badge>;
+        return <Badge className="bg-destructive">삭제</Badge>;
       default:
         return <Badge>{type}</Badge>;
     }
@@ -150,7 +150,7 @@ export function TableLogViewer({ tableName, open, onOpenChange }: TableLogViewer
 
           <div className="grid grid-cols-2 gap-3 md:grid-cols-3">
             <div>
-              <label className="mb-1 block text-sm text-gray-600">작업 유형</label>
+              <label className="mb-1 block text-sm text-muted-foreground">작업 유형</label>
               {/* Radix UI Select v2.x: 빈 문자열 value="" 금지 → "__all__" 사용 */}
               <Select 
                 value={operationType || "__all__"} 
@@ -169,22 +169,22 @@ export function TableLogViewer({ tableName, open, onOpenChange }: TableLogViewer
             </div>
 
             <div>
-              <label className="mb-1 block text-sm text-gray-600">시작 날짜</label>
+              <label className="mb-1 block text-sm text-muted-foreground">시작 날짜</label>
               <Input type="date" value={startDate} onChange={(e) => setStartDate(e.target.value)} />
             </div>
 
             <div>
-              <label className="mb-1 block text-sm text-gray-600">종료 날짜</label>
+              <label className="mb-1 block text-sm text-muted-foreground">종료 날짜</label>
               <Input type="date" value={endDate} onChange={(e) => setEndDate(e.target.value)} />
             </div>
 
             <div>
-              <label className="mb-1 block text-sm text-gray-600">변경자</label>
+              <label className="mb-1 block text-sm text-muted-foreground">변경자</label>
               <Input placeholder="사용자 ID" value={changedBy} onChange={(e) => setChangedBy(e.target.value)} />
             </div>
 
             <div>
-              <label className="mb-1 block text-sm text-gray-600">원본 ID</label>
+              <label className="mb-1 block text-sm text-muted-foreground">원본 ID</label>
               <Input placeholder="레코드 ID" value={originalId} onChange={(e) => setOriginalId(e.target.value)} />
             </div>
 
@@ -204,7 +204,7 @@ export function TableLogViewer({ tableName, open, onOpenChange }: TableLogViewer
               <LoadingSpinner />
             </div>
           ) : logs.length === 0 ? (
-            <div className="flex h-64 items-center justify-center text-gray-500">변경 이력이 없습니다.</div>
+            <div className="flex h-64 items-center justify-center text-muted-foreground">변경 이력이 없습니다.</div>
           ) : (
             <Table>
               <TableHeader>
@@ -243,7 +243,7 @@ export function TableLogViewer({ tableName, open, onOpenChange }: TableLogViewer
 
         {/* 페이지네이션 */}
         <div className="flex items-center justify-between border-t pt-4">
-          <div className="text-sm text-gray-600">
+          <div className="text-sm text-muted-foreground">
             전체 {total}건 (페이지 {page} / {totalPages})
           </div>
           <div className="flex gap-2">
diff --git a/frontend/components/admin/TemplateImportExport.tsx b/frontend/components/admin/TemplateImportExport.tsx
index e11dada6..5f3ff17e 100644
--- a/frontend/components/admin/TemplateImportExport.tsx
+++ b/frontend/components/admin/TemplateImportExport.tsx
@@ -157,12 +157,12 @@ export function TemplateImportExport({ onTemplateImported }: TemplateImportExpor
               </CardHeader>
               <CardContent className="space-y-4">
                 <div
-                  className="cursor-pointer rounded-lg border-2 border-dashed border-gray-300 p-8 text-center transition-colors hover:border-gray-400"
+                  className="cursor-pointer rounded-lg border-2 border-dashed border-input p-8 text-center transition-colors hover:border-input"
                   onClick={triggerFileSelect}
                 >
-                  <Upload className="mx-auto mb-4 h-12 w-12 text-gray-400" />
-                  <p className="mb-2 text-lg font-medium text-gray-900">템플릿 JSON 파일을 선택하세요</p>
-                  <p className="text-sm text-gray-500">또는 아래에 JSON 내용을 직접 입력하세요</p>
+                  <Upload className="mx-auto mb-4 h-12 w-12 text-muted-foreground/70" />
+                  <p className="mb-2 text-lg font-medium text-foreground">템플릿 JSON 파일을 선택하세요</p>
+                  <p className="text-sm text-muted-foreground">또는 아래에 JSON 내용을 직접 입력하세요</p>
                 </div>
                 <input ref={fileInputRef} type="file" accept=".json" onChange={handleFileUpload} className="hidden" />
               </CardContent>
@@ -196,7 +196,7 @@ export function TemplateImportExport({ onTemplateImported }: TemplateImportExpor
               <Card>
                 <CardHeader>
                   <CardTitle className="flex items-center text-lg">
-                    <CheckCircle className="mr-2 h-5 w-5 text-green-600" />
+                    <CheckCircle className="mr-2 h-5 w-5 text-emerald-600" />
                     3. 템플릿 미리보기
                   </CardTitle>
                 </CardHeader>
diff --git a/frontend/components/admin/UserAuthEditModal.tsx b/frontend/components/admin/UserAuthEditModal.tsx
index 34379b64..7ce04f4c 100644
--- a/frontend/components/admin/UserAuthEditModal.tsx
+++ b/frontend/components/admin/UserAuthEditModal.tsx
@@ -54,28 +54,28 @@ export function UserAuthEditModal({ isOpen, onClose, onSuccess, user }: UserAuth
       label: "회사 관리자",
       description: "자기 회사 데이터 및 사용자 관리 가능",
       icon: <Building2 className="h-4 w-4" />,
-      color: "text-blue-600",
+      color: "text-primary",
     },
     {
       value: "USER",
       label: "일반 사용자",
       description: "자기 회사 데이터 조회/수정만 가능",
       icon: <User className="h-4 w-4" />,
-      color: "text-gray-600",
+      color: "text-muted-foreground",
     },
     {
       value: "GUEST",
       label: "게스트",
       description: "제한된 조회 권한",
       icon: <Users className="h-4 w-4" />,
-      color: "text-green-600",
+      color: "text-emerald-600",
     },
     {
       value: "PARTNER",
       label: "협력업체",
       description: "협력업체 전용 권한",
       icon: <Shield className="h-4 w-4" />,
-      color: "text-orange-600",
+      color: "text-amber-600",
     },
   ];
 
@@ -158,7 +158,7 @@ export function UserAuthEditModal({ isOpen, onClose, onSuccess, user }: UserAuth
           {/* 권한 선택 */}
           <div className="space-y-2">
             <Label htmlFor="userType" className="text-sm font-medium">
-              새로운 권한 <span className="text-red-500">*</span>
+              새로운 권한 <span className="text-destructive">*</span>
             </Label>
             <Select value={selectedUserType} onValueChange={setSelectedUserType}>
               <SelectTrigger className="h-10">
@@ -180,9 +180,9 @@ export function UserAuthEditModal({ isOpen, onClose, onSuccess, user }: UserAuth
 
           {/* SUPER_ADMIN 경고 */}
           {showConfirmation && selectedUserType === "SUPER_ADMIN" && (
-            <div className="rounded-lg border border-orange-300 bg-orange-50 p-4">
+            <div className="rounded-lg border border-orange-300 bg-amber-50 p-4">
               <div className="flex items-start gap-3">
-                <AlertTriangle className="mt-0.5 h-5 w-5 flex-shrink-0 text-orange-600" />
+                <AlertTriangle className="mt-0.5 h-5 w-5 flex-shrink-0 text-amber-600" />
                 <div className="space-y-2">
                   <p className="text-sm font-semibold text-orange-900">최고 관리자 권한 부여 경고</p>
                   <p className="text-xs text-orange-800">
diff --git a/frontend/components/admin/UserAuthTable.tsx b/frontend/components/admin/UserAuthTable.tsx
index c4d0b7c4..50e7d889 100644
--- a/frontend/components/admin/UserAuthTable.tsx
+++ b/frontend/components/admin/UserAuthTable.tsx
@@ -1,10 +1,10 @@
 "use client";
 
 import React from "react";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Shield, ShieldCheck, User as UserIcon, Users, Building2 } from "lucide-react";
+import { ResponsiveDataView, RDVColumn, RDVCardField } from "@/components/common/ResponsiveDataView";
 
 interface UserAuthTableProps {
   users: any[];
@@ -72,158 +72,94 @@ export function UserAuthTable({ users, isLoading, paginationInfo, onEditAuth, on
     return (paginationInfo.currentPage - 1) * paginationInfo.pageSize + index + 1;
   };
 
-  // 로딩 스켈레톤
-  if (isLoading) {
-    return (
-      <div className="bg-card hidden lg:block">
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead className="h-12 w-[80px] text-center text-sm font-semibold">No</TableHead>
-              <TableHead className="h-12 text-sm font-semibold">사용자 ID</TableHead>
-              <TableHead className="h-12 text-sm font-semibold">사용자명</TableHead>
-              <TableHead className="h-12 text-sm font-semibold">회사</TableHead>
-              <TableHead className="h-12 text-sm font-semibold">부서</TableHead>
-              <TableHead className="h-12 text-center text-sm font-semibold">현재 권한</TableHead>
-              <TableHead className="h-12 w-[120px] text-center text-sm font-semibold">액션</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-              {Array.from({ length: 10 }).map((_, index) => (
-                <TableRow key={index}>
-                <TableCell className="h-16">
-                  <div className="bg-muted h-4 animate-pulse rounded"></div>
-                </TableCell>
-                <TableCell className="h-16">
-                  <div className="bg-muted h-4 animate-pulse rounded"></div>
-                </TableCell>
-                <TableCell className="h-16">
-                  <div className="bg-muted h-4 animate-pulse rounded"></div>
-                </TableCell>
-                <TableCell className="h-16">
-                  <div className="bg-muted h-4 animate-pulse rounded"></div>
-                </TableCell>
-                <TableCell className="h-16">
-                  <div className="bg-muted h-4 animate-pulse rounded"></div>
-                </TableCell>
-                <TableCell className="h-16">
-                  <div className="bg-muted mx-auto h-6 w-24 animate-pulse rounded-full"></div>
-                </TableCell>
-                <TableCell className="h-16">
-                  <div className="bg-muted mx-auto h-8 w-20 animate-pulse rounded"></div>
-                </TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </div>
-    );
-  }
+  // 데스크톱 테이블 컬럼 정의
+  const columns: RDVColumn<any>[] = [
+    {
+      key: "no",
+      label: "No",
+      width: "80px",
+      className: "text-center",
+      render: (_value, _row, index) => <span>{getRowNumber(index)}</span>,
+    },
+    {
+      key: "userId",
+      label: "사용자 ID",
+      render: (value) => <span className="font-mono">{value}</span>,
+    },
+    {
+      key: "userName",
+      label: "사용자명",
+    },
+    {
+      key: "companyName",
+      label: "회사",
+      hideOnMobile: true,
+      render: (_value, row) => <span>{row.companyName || row.companyCode}</span>,
+    },
+    {
+      key: "deptName",
+      label: "부서",
+      hideOnMobile: true,
+      render: (value) => <span>{value || "-"}</span>,
+    },
+    {
+      key: "userType",
+      label: "현재 권한",
+      className: "text-center",
+      render: (_value, row) => {
+        const typeInfo = getUserTypeInfo(row.userType);
+        return (
+          <Badge variant="outline" className={`gap-1 ${typeInfo.className}`}>
+            {typeInfo.icon}
+            {typeInfo.label}
+          </Badge>
+        );
+      },
+    },
+  ];
 
-  // 빈 상태
-  if (users.length === 0) {
-    return (
-      <div className="bg-card flex h-64 flex-col items-center justify-center">
-        <p className="text-muted-foreground text-sm">등록된 사용자가 없습니다.</p>
-      </div>
-    );
-  }
+  // 모바일 카드 필드 정의
+  const cardFields: RDVCardField<any>[] = [
+    {
+      label: "회사",
+      render: (user) => <span>{user.companyName || user.companyCode}</span>,
+    },
+    {
+      label: "부서",
+      render: (user) => <span>{user.deptName || "-"}</span>,
+    },
+  ];
 
-  // 실제 데이터 렌더링
   return (
     <div className="space-y-4">
-      {/* 데스크톱 테이블 */}
-      <div className="bg-card hidden lg:block">
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead className="h-12 w-[80px] text-center text-sm font-semibold">No</TableHead>
-              <TableHead className="h-12 text-sm font-semibold">사용자 ID</TableHead>
-              <TableHead className="h-12 text-sm font-semibold">사용자명</TableHead>
-              <TableHead className="h-12 text-sm font-semibold">회사</TableHead>
-              <TableHead className="h-12 text-sm font-semibold">부서</TableHead>
-              <TableHead className="h-12 text-center text-sm font-semibold">현재 권한</TableHead>
-              <TableHead className="h-12 w-[120px] text-center text-sm font-semibold">액션</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {users.map((user, index) => {
-              const typeInfo = getUserTypeInfo(user.userType);
-              return (
-                <TableRow key={user.userId} className="hover:bg-muted/50 transition-colors">
-                  <TableCell className="h-16 text-center text-sm">{getRowNumber(index)}</TableCell>
-                  <TableCell className="h-16 font-mono text-sm">{user.userId}</TableCell>
-                  <TableCell className="h-16 text-sm">{user.userName}</TableCell>
-                  <TableCell className="h-16 text-sm">{user.companyName || user.companyCode}</TableCell>
-                  <TableCell className="h-16 text-sm">{user.deptName || "-"}</TableCell>
-                  <TableCell className="h-16 text-center">
-                    <Badge variant="outline" className={`gap-1 ${typeInfo.className}`}>
-                      {typeInfo.icon}
-                      {typeInfo.label}
-                    </Badge>
-                  </TableCell>
-                  <TableCell className="h-16 text-center">
-                    <Button variant="outline" size="sm" onClick={() => onEditAuth(user)} className="h-8 gap-1 text-sm">
-                      <Shield className="h-3 w-3" />
-                      권한 변경
-                    </Button>
-                  </TableCell>
-                </TableRow>
-              );
-            })}
-          </TableBody>
-        </Table>
-      </div>
-
-      {/* 모바일 카드 뷰 */}
-      <div className="grid gap-4 sm:grid-cols-2 lg:hidden">
-        {users.map((user, index) => {
-          const typeInfo = getUserTypeInfo(user.userType);
+      <ResponsiveDataView<any>
+        data={users}
+        columns={columns}
+        keyExtractor={(u) => u.userId}
+        isLoading={isLoading}
+        emptyMessage="등록된 사용자가 없습니다."
+        skeletonCount={10}
+        cardTitle={(u) => u.userName}
+        cardSubtitle={(u) => <span className="font-mono">{u.userId}</span>}
+        cardHeaderRight={(u) => {
+          const typeInfo = getUserTypeInfo(u.userType);
           return (
-            <div
-              key={user.userId}
-              className="bg-card hover:bg-muted/50 rounded-lg border p-4 transition-colors"
-            >
-              {/* 헤더 */}
-              <div className="mb-4 flex items-start justify-between">
-                <div className="flex-1">
-                  <h3 className="text-base font-semibold">{user.userName}</h3>
-                  <p className="text-muted-foreground mt-1 font-mono text-sm">{user.userId}</p>
-                </div>
-                <Badge variant="outline" className={`gap-1 ${typeInfo.className}`}>
-                  {typeInfo.icon}
-                  {typeInfo.label}
-                </Badge>
-              </div>
-
-              {/* 정보 */}
-              <div className="space-y-2 border-t pt-4">
-                <div className="flex justify-between text-sm">
-                  <span className="text-muted-foreground">회사</span>
-                  <span className="font-medium">{user.companyName || user.companyCode}</span>
-                </div>
-                <div className="flex justify-between text-sm">
-                  <span className="text-muted-foreground">부서</span>
-                  <span className="font-medium">{user.deptName || "-"}</span>
-                </div>
-              </div>
-
-              {/* 액션 */}
-              <div className="mt-4 border-t pt-4">
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={() => onEditAuth(user)}
-                  className="h-9 w-full gap-2 text-sm"
-                >
-                  <Shield className="h-4 w-4" />
-                  권한 변경
-                </Button>
-              </div>
-            </div>
+            <Badge variant="outline" className={`gap-1 ${typeInfo.className}`}>
+              {typeInfo.icon}
+              {typeInfo.label}
+            </Badge>
           );
-        })}
-      </div>
+        }}
+        cardFields={cardFields}
+        actionsLabel="액션"
+        actionsWidth="120px"
+        renderActions={(user) => (
+          <Button variant="outline" size="sm" onClick={() => onEditAuth(user)} className="h-8 gap-1 text-sm">
+            <Shield className="h-3 w-3" />
+            권한 변경
+          </Button>
+        )}
+      />
 
       {/* 페이지네이션 */}
       {paginationInfo.totalPages > 1 && (
diff --git a/frontend/components/admin/UserFormModal.tsx b/frontend/components/admin/UserFormModal.tsx
index 39bbefbc..eef0c538 100644
--- a/frontend/components/admin/UserFormModal.tsx
+++ b/frontend/components/admin/UserFormModal.tsx
@@ -23,7 +23,7 @@ function AlertModal({ isOpen, onClose, title, message, type = "info" }: AlertMod
   const getTypeColor = () => {
     switch (type) {
       case "success":
-        return "text-green-600";
+        return "text-emerald-600";
       case "error":
         return "text-destructive";
       default:
@@ -446,7 +446,7 @@ export function UserFormModal({ isOpen, onClose, onSuccess, editingUser }: UserF
             <div className="grid grid-cols-2 gap-4">
               <div className="space-y-2">
                 <Label htmlFor="userId" className="text-sm font-medium">
-                  사용자 ID <span className="text-red-500">*</span>
+                  사용자 ID <span className="text-destructive">*</span>
                 </Label>
                 {isEditMode ? (
                   <Input id="userId" value={formData.userId} disabled className="bg-muted cursor-not-allowed" />
@@ -474,7 +474,7 @@ export function UserFormModal({ isOpen, onClose, onSuccess, editingUser }: UserF
                     {/* 중복확인 결과 메시지 */}
                     {duplicateCheckMessage && (
                       <div
-                        className={`mt-1 text-sm ${duplicateCheckType === "success" ? "text-green-600" : "text-destructive"}`}
+                        className={`mt-1 text-sm ${duplicateCheckType === "success" ? "text-emerald-600" : "text-destructive"}`}
                       >
                         {duplicateCheckMessage}
                       </div>
@@ -485,7 +485,7 @@ export function UserFormModal({ isOpen, onClose, onSuccess, editingUser }: UserF
 
               <div className="space-y-2">
                 <Label htmlFor="userName" className="text-sm font-medium">
-                  사용자명 <span className="text-red-500">*</span>
+                  사용자명 <span className="text-destructive">*</span>
                 </Label>
                 <Input
                   id="userName"
@@ -501,7 +501,7 @@ export function UserFormModal({ isOpen, onClose, onSuccess, editingUser }: UserF
             {!isEditMode && (
               <div className="space-y-2">
                 <Label htmlFor="userPassword" className="text-sm font-medium">
-                  비밀번호 <span className="text-red-500">*</span>
+                  비밀번호 <span className="text-destructive">*</span>
                 </Label>
                 <div className="relative">
                   <Input
@@ -532,7 +532,7 @@ export function UserFormModal({ isOpen, onClose, onSuccess, editingUser }: UserF
             {/* 회사 선택 */}
             <div className="space-y-2">
               <Label htmlFor="companyCode" className="text-sm font-medium">
-                회사 <span className="text-red-500">*</span>
+                회사 <span className="text-destructive">*</span>
               </Label>
               {isSuperAdmin ? (
                 <>
diff --git a/frontend/components/admin/UserPasswordResetModal.tsx b/frontend/components/admin/UserPasswordResetModal.tsx
index 086b1556..e79d09ff 100644
--- a/frontend/components/admin/UserPasswordResetModal.tsx
+++ b/frontend/components/admin/UserPasswordResetModal.tsx
@@ -136,7 +136,7 @@ export function UserPasswordResetModal({ isOpen, onClose, userId, userName, onSu
         <div className="space-y-4" onKeyDown={handleKeyDown}>
           {/* 대상 사용자 정보 */}
           <div>
-            <Label className="text-sm font-medium text-gray-700">
+            <Label className="text-sm font-medium text-foreground">
               대상 사용자:{" "}
               <span className="font-semibold">
                 {userName} ({userId})
@@ -197,10 +197,10 @@ export function UserPasswordResetModal({ isOpen, onClose, userId, userName, onSu
 
             {/* 비밀번호 일치 여부 표시 */}
             {showMismatchError && <p className="text-sm text-destructive">비밀번호가 일치하지 않습니다.</p>}
-            {isPasswordMatch && <p className="text-sm text-green-600">비밀번호가 일치합니다.</p>}
+            {isPasswordMatch && <p className="text-sm text-emerald-600">비밀번호가 일치합니다.</p>}
           </div>
 
-          <div className="text-xs text-gray-500">* 비밀번호는 영문, 숫자, 특수문자만 사용할 수 있습니다.</div>
+          <div className="text-xs text-muted-foreground">* 비밀번호는 영문, 숫자, 특수문자만 사용할 수 있습니다.</div>
         </div>
 
         <div className="mt-6 flex justify-end space-x-2">
diff --git a/frontend/components/admin/UserTable.tsx b/frontend/components/admin/UserTable.tsx
index 1d6d6d46..a0073f4f 100644
--- a/frontend/components/admin/UserTable.tsx
+++ b/frontend/components/admin/UserTable.tsx
@@ -1,11 +1,10 @@
 import { Key, History, Edit } from "lucide-react";
 import { useState } from "react";
 import { User } from "@/types/user";
-import { USER_TABLE_COLUMNS } from "@/constants/user";
 import { Button } from "@/components/ui/button";
 import { Switch } from "@/components/ui/switch";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { PaginationInfo } from "@/components/common/Pagination";
+import { ResponsiveDataView, RDVColumn, RDVCardField } from "@/components/common/ResponsiveDataView";
 import { UserStatusConfirmDialog } from "./UserStatusConfirmDialog";
 import { UserHistoryModal } from "./UserHistoryModal";
 
@@ -59,7 +58,7 @@ export function UserTable({
   // 날짜 포맷팅 함수
   const formatDate = (dateString: string) => {
     if (!dateString) return "-";
-    return dateString.split(" ")[0]; // "2024-01-15 14:30:00" -> "2024-01-15"
+    return dateString.split(" ")[0];
   };
 
   // 상태 토글 핸들러 (확인 모달 표시)
@@ -103,254 +102,190 @@ export function UserTable({
     });
   };
 
-  // 로딩 상태 렌더링
-  if (isLoading) {
-    return (
-      <>
-        {/* 데스크톱 테이블 스켈레톤 */}
-        <div className="bg-card hidden shadow-sm lg:block">
-          <Table>
-            <TableHeader>
-              <TableRow>
-                {USER_TABLE_COLUMNS.map((column) => (
-                  <TableHead key={column.key} style={{ width: column.width }} className="h-12 px-6 py-3 text-sm font-semibold">
-                    {column.label}
-                  </TableHead>
-                ))}
-                <TableHead className="h-12 px-6 py-3 w-[200px] text-sm font-semibold">작업</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {Array.from({ length: 10 }).map((_, index) => (
-                <TableRow key={index}>
-                  {USER_TABLE_COLUMNS.map((column) => (
-                    <TableCell key={column.key} className="h-16">
-                      <div className="bg-muted h-4 animate-pulse rounded"></div>
-                    </TableCell>
-                  ))}
-                  <TableCell className="h-16">
-                    <div className="flex gap-2">
-                      {Array.from({ length: 2 }).map((_, i) => (
-                        <div key={i} className="bg-muted h-8 w-8 animate-pulse rounded"></div>
-                      ))}
-                    </div>
-                  </TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
+  // 데스크톱 테이블 컬럼 정의
+  const columns: RDVColumn<User>[] = [
+    {
+      key: "no",
+      label: "No",
+      width: "60px",
+      render: (_value, _row, index) => (
+        <span className="font-mono font-medium">{getRowNumber(index)}</span>
+      ),
+    },
+    {
+      key: "sabun",
+      label: "사번",
+      width: "80px",
+      hideOnMobile: true,
+      render: (value) => <span className="font-mono">{value || "-"}</span>,
+    },
+    {
+      key: "companyCode",
+      label: "회사",
+      width: "120px",
+      hideOnMobile: true,
+      render: (value) => <span className="font-medium">{value || "-"}</span>,
+    },
+    {
+      key: "deptName",
+      label: "부서명",
+      width: "120px",
+      hideOnMobile: true,
+      render: (value) => <span className="font-medium">{value || "-"}</span>,
+    },
+    {
+      key: "positionName",
+      label: "직책",
+      width: "100px",
+      hideOnMobile: true,
+      render: (value) => <span className="font-medium">{value || "-"}</span>,
+    },
+    {
+      key: "userId",
+      label: "사용자 ID",
+      width: "120px",
+      hideOnMobile: true,
+      render: (value) => <span className="font-mono">{value}</span>,
+    },
+    {
+      key: "userName",
+      label: "사용자명",
+      width: "100px",
+      hideOnMobile: true,
+      render: (value) => <span className="font-medium">{value}</span>,
+    },
+    {
+      key: "tel",
+      label: "전화번호",
+      width: "120px",
+      hideOnMobile: true,
+      render: (_value, row) => <span>{row.tel || row.cellPhone || "-"}</span>,
+    },
+    {
+      key: "email",
+      label: "이메일",
+      width: "200px",
+      hideOnMobile: true,
+      className: "max-w-[200px] truncate",
+      render: (value, row) => (
+        <span title={row.email}>{value || "-"}</span>
+      ),
+    },
+    {
+      key: "regDate",
+      label: "등록일",
+      width: "100px",
+      hideOnMobile: true,
+      render: (value) => <span>{formatDate(value || "")}</span>,
+    },
+    {
+      key: "status",
+      label: "상태",
+      width: "120px",
+      hideOnMobile: true,
+      render: (_value, row) => (
+        <div className="flex items-center">
+          <Switch
+            checked={row.status === "active"}
+            onCheckedChange={(checked) => handleStatusToggle(row, checked)}
+            aria-label={`${row.userName} 상태 토글`}
+          />
         </div>
+      ),
+    },
+  ];
 
-        {/* 모바일/태블릿 카드 스켈레톤 */}
-        <div className="grid gap-4 sm:grid-cols-2 lg:hidden">
-          {Array.from({ length: 6 }).map((_, index) => (
-            <div key={index} className="bg-card rounded-lg border p-4 shadow-sm">
-              <div className="mb-4 flex items-start justify-between">
-                <div className="flex-1 space-y-2">
-                  <div className="bg-muted h-5 w-32 animate-pulse rounded"></div>
-                  <div className="bg-muted h-4 w-24 animate-pulse rounded"></div>
-                </div>
-                <div className="bg-muted h-6 w-11 animate-pulse rounded-full"></div>
-              </div>
-              <div className="space-y-2 border-t pt-4">
-                {Array.from({ length: 5 }).map((_, i) => (
-                  <div key={i} className="flex justify-between">
-                    <div className="bg-muted h-4 w-16 animate-pulse rounded"></div>
-                    <div className="bg-muted h-4 w-32 animate-pulse rounded"></div>
-                  </div>
-                ))}
-              </div>
-              <div className="mt-4 flex gap-2 border-t pt-4">
-                <div className="bg-muted h-9 flex-1 animate-pulse rounded"></div>
-                <div className="bg-muted h-9 flex-1 animate-pulse rounded"></div>
-              </div>
-            </div>
-          ))}
-        </div>
-      </>
-    );
-  }
+  // 모바일 카드 필드 정의
+  const cardFields: RDVCardField<User>[] = [
+    {
+      label: "사번",
+      render: (user) => <span className="font-mono font-medium">{user.sabun || "-"}</span>,
+      hideEmpty: true,
+    },
+    {
+      label: "회사",
+      render: (user) => <span className="font-medium">{user.companyCode || ""}</span>,
+      hideEmpty: true,
+    },
+    {
+      label: "부서",
+      render: (user) => <span className="font-medium">{user.deptName || ""}</span>,
+      hideEmpty: true,
+    },
+    {
+      label: "직책",
+      render: (user) => <span className="font-medium">{user.positionName || ""}</span>,
+      hideEmpty: true,
+    },
+    {
+      label: "연락처",
+      render: (user) => <span>{user.tel || user.cellPhone || ""}</span>,
+      hideEmpty: true,
+    },
+    {
+      label: "이메일",
+      render: (user) => <span className="break-all">{user.email || ""}</span>,
+      hideEmpty: true,
+    },
+    {
+      label: "등록일",
+      render: (user) => <span>{formatDate(user.regDate || "")}</span>,
+    },
+  ];
 
-  // 데이터가 없을 때
-  if (users.length === 0) {
-    return (
-      <div className="bg-card flex h-64 flex-col items-center justify-center shadow-sm">
-        <div className="flex flex-col items-center gap-2 text-center">
-          <p className="text-muted-foreground text-sm">등록된 사용자가 없습니다.</p>
-        </div>
-      </div>
-    );
-  }
-
-  // 실제 데이터 렌더링
   return (
     <>
-      {/* 데스크톱 테이블 뷰 (lg 이상) */}
-      <div className="bg-card hidden lg:block">
-        <Table>
-            <TableHeader>
-              <TableRow>
-                {USER_TABLE_COLUMNS.map((column) => (
-                  <TableHead key={column.key} style={{ width: column.width }} className="h-12 px-6 py-3 text-sm font-semibold">
-                    {column.label}
-                  </TableHead>
-                ))}
-                <TableHead className="h-12 px-6 py-3 w-[200px] text-sm font-semibold">작업</TableHead>
-              </TableRow>
-            </TableHeader>
-          <TableBody>
-            {users.map((user, index) => (
-              <TableRow key={`${user.userId}-${index}`} className="bg-background transition-colors hover:bg-muted/50">
-                <TableCell className="h-16 px-6 py-3 font-mono text-sm font-medium">{getRowNumber(index)}</TableCell>
-                <TableCell className="h-16 px-6 py-3 font-mono text-sm">{user.sabun || "-"}</TableCell>
-                <TableCell className="h-16 px-6 py-3 text-sm font-medium">{user.companyCode || "-"}</TableCell>
-                <TableCell className="h-16 px-6 py-3 text-sm font-medium">{user.deptName || "-"}</TableCell>
-                <TableCell className="h-16 px-6 py-3 text-sm font-medium">{user.positionName || "-"}</TableCell>
-                <TableCell className="h-16 px-6 py-3 font-mono text-sm">{user.userId}</TableCell>
-                <TableCell className="h-16 px-6 py-3 text-sm font-medium">{user.userName}</TableCell>
-                <TableCell className="h-16 px-6 py-3 text-sm">{user.tel || user.cellPhone || "-"}</TableCell>
-                <TableCell className="h-16 px-6 py-3 max-w-[200px] truncate text-sm" title={user.email}>
-                  {user.email || "-"}
-                </TableCell>
-                <TableCell className="h-16 px-6 py-3 text-sm">{formatDate(user.regDate || "")}</TableCell>
-                <TableCell className="h-16 px-6 py-3">
-                  <div className="flex items-center">
-                    <Switch
-                      checked={user.status === "active"}
-                      onCheckedChange={(checked) => handleStatusToggle(user, checked)}
-                      aria-label={`${user.userName} 상태 토글`}
-                    />
-                  </div>
-                </TableCell>
-                <TableCell className="h-16 px-6 py-3">
-                  <div className="flex gap-2">
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      onClick={() => onEdit(user)}
-                      className="h-8 w-8"
-                      title="사용자 정보 수정"
-                    >
-                      <Edit className="h-4 w-4" />
-                    </Button>
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      onClick={() => onPasswordReset(user.userId, user.userName || user.userId)}
-                      className="h-8 w-8"
-                      title="비밀번호 초기화"
-                    >
-                      <Key className="h-4 w-4" />
-                    </Button>
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      onClick={() => handleOpenHistoryModal(user)}
-                      className="h-8 w-8"
-                      title="변경이력 조회"
-                    >
-                      <History className="h-4 w-4" />
-                    </Button>
-                  </div>
-                </TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </div>
-
-      {/* 모바일/태블릿 카드 뷰 (lg 미만) */}
-      <div className="grid gap-4 sm:grid-cols-2 lg:hidden">
-        {users.map((user, index) => (
-          <div
-            key={`${user.userId}-${index}`}
-            className="bg-card hover:bg-muted/50 rounded-lg border p-4 shadow-sm transition-colors"
-          >
-            {/* 헤더: 이름과 상태 */}
-            <div className="mb-4 flex items-start justify-between">
-              <div className="flex-1">
-                <h3 className="text-base font-semibold">{user.userName}</h3>
-                <p className="text-muted-foreground mt-1 font-mono text-sm">{user.userId}</p>
-              </div>
-              <Switch
-                checked={user.status === "active"}
-                onCheckedChange={(checked) => handleStatusToggle(user, checked)}
-                aria-label={`${user.userName} 상태 토글`}
-              />
-            </div>
-
-            {/* 정보 그리드 */}
-            <div className="space-y-2 border-t pt-4">
-              {user.sabun && (
-                <div className="flex justify-between text-sm">
-                  <span className="text-muted-foreground">사번</span>
-                  <span className="font-mono font-medium">{user.sabun}</span>
-                </div>
-              )}
-              {user.companyCode && (
-                <div className="flex justify-between text-sm">
-                  <span className="text-muted-foreground">회사</span>
-                  <span className="font-medium">{user.companyCode}</span>
-                </div>
-              )}
-              {user.deptName && (
-                <div className="flex justify-between text-sm">
-                  <span className="text-muted-foreground">부서</span>
-                  <span className="font-medium">{user.deptName}</span>
-                </div>
-              )}
-              {user.positionName && (
-                <div className="flex justify-between text-sm">
-                  <span className="text-muted-foreground">직책</span>
-                  <span className="font-medium">{user.positionName}</span>
-                </div>
-              )}
-              {(user.tel || user.cellPhone) && (
-                <div className="flex justify-between text-sm">
-                  <span className="text-muted-foreground">연락처</span>
-                  <span>{user.tel || user.cellPhone}</span>
-                </div>
-              )}
-              {user.email && (
-                <div className="flex flex-col gap-1 text-sm">
-                  <span className="text-muted-foreground">이메일</span>
-                  <span className="break-all">{user.email}</span>
-                </div>
-              )}
-              <div className="flex justify-between text-sm">
-                <span className="text-muted-foreground">등록일</span>
-                <span>{formatDate(user.regDate || "")}</span>
-              </div>
-            </div>
-
-            {/* 액션 버튼 */}
-            <div className="mt-4 flex gap-2 border-t pt-4">
-              <Button variant="outline" size="sm" onClick={() => onEdit(user)} className="h-9 flex-1 gap-2 text-sm">
-                <Edit className="h-4 w-4" />
-                수정
-              </Button>
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => onPasswordReset(user.userId, user.userName || user.userId)}
-                className="h-9 w-9 p-0"
-                title="비밀번호 초기화"
-              >
-                <Key className="h-4 w-4" />
-              </Button>
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => handleOpenHistoryModal(user)}
-                className="h-9 w-9 p-0"
-                title="변경이력"
-              >
-                <History className="h-4 w-4" />
-              </Button>
-            </div>
-          </div>
-        ))}
-      </div>
+      <ResponsiveDataView<User>
+        data={users}
+        columns={columns}
+        keyExtractor={(u) => u.userId}
+        isLoading={isLoading}
+        emptyMessage="등록된 사용자가 없습니다."
+        skeletonCount={10}
+        cardTitle={(u) => u.userName || ""}
+        cardSubtitle={(u) => <span className="font-mono">{u.userId}</span>}
+        cardHeaderRight={(u) => (
+          <Switch
+            checked={u.status === "active"}
+            onCheckedChange={(checked) => handleStatusToggle(u, checked)}
+            aria-label={`${u.userName} 상태 토글`}
+          />
+        )}
+        cardFields={cardFields}
+        actionsLabel="작업"
+        actionsWidth="200px"
+        renderActions={(user) => (
+          <>
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => onEdit(user)}
+              className="h-8 w-8"
+              title="사용자 정보 수정"
+            >
+              <Edit className="h-4 w-4" />
+            </Button>
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => onPasswordReset(user.userId, user.userName || user.userId)}
+              className="h-8 w-8"
+              title="비밀번호 초기화"
+            >
+              <Key className="h-4 w-4" />
+            </Button>
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => handleOpenHistoryModal(user)}
+              className="h-8 w-8"
+              title="변경이력 조회"
+            >
+              <History className="h-4 w-4" />
+            </Button>
+          </>
+        )}
+      />
 
       {/* 상태 변경 확인 모달 */}
       <UserStatusConfirmDialog
diff --git a/frontend/components/admin/dashboard/widgets/DriverListView.tsx b/frontend/components/admin/dashboard/widgets/DriverListView.tsx
index 51862926..4f70e65b 100644
--- a/frontend/components/admin/dashboard/widgets/DriverListView.tsx
+++ b/frontend/components/admin/dashboard/widgets/DriverListView.tsx
@@ -59,7 +59,7 @@ export function DriverListView({ drivers, config, isCompact = false }: DriverLis
 
   return (
     <div className="h-full w-full overflow-auto">
-      <table className="min-w-full divide-y divide-gray-200">
+      <table className="min-w-full divide-y divide-border">
         <thead className="sticky top-0 z-10 bg-muted">
           <tr>
             {visibleColumns.includes("status") && (
@@ -96,7 +96,7 @@ export function DriverListView({ drivers, config, isCompact = false }: DriverLis
             )}
           </tr>
         </thead>
-        <tbody className="divide-y divide-gray-200 bg-background">
+        <tbody className="divide-y divide-border bg-background">
           {drivers.map((driver) => {
             const statusColors = getStatusColor(driver.status);
             return (
diff --git a/frontend/components/admin/dashboard/widgets/ListWidget.tsx b/frontend/components/admin/dashboard/widgets/ListWidget.tsx
index 194f7210..0561a38d 100644
--- a/frontend/components/admin/dashboard/widgets/ListWidget.tsx
+++ b/frontend/components/admin/dashboard/widgets/ListWidget.tsx
@@ -180,16 +180,16 @@ export function ListWidget({ element, onConfigUpdate }: ListWidgetProps) {
   const renderIcon = (icon?: string, color?: string) => {
     const colorClass =
       color === "blue"
-        ? "text-blue-600"
+        ? "text-primary"
         : color === "orange"
-          ? "text-orange-600"
+          ? "text-amber-600"
           : color === "green"
-            ? "text-green-600"
+            ? "text-emerald-600"
             : color === "red"
-              ? "text-red-600"
+              ? "text-destructive"
               : color === "purple"
                 ? "text-purple-600"
-                : "text-gray-600";
+                : "text-muted-foreground";
 
     switch (icon) {
       case "truck":
@@ -209,16 +209,16 @@ export function ListWidget({ element, onConfigUpdate }: ListWidgetProps) {
   const renderFieldGroup = (group: FieldGroup, data: Record<string, any>) => {
     const colorClass =
       group.color === "blue"
-        ? "text-blue-600"
+        ? "text-primary"
         : group.color === "orange"
-          ? "text-orange-600"
+          ? "text-amber-600"
           : group.color === "green"
-            ? "text-green-600"
+            ? "text-emerald-600"
             : group.color === "red"
-              ? "text-red-600"
+              ? "text-destructive"
               : group.color === "purple"
                 ? "text-purple-600"
-                : "text-gray-600";
+                : "text-muted-foreground";
 
     return (
       <div key={group.id} className="rounded-lg border p-4">
diff --git a/frontend/components/admin/dashboard/widgets/yard-3d/DigitalTwinEditor.tsx b/frontend/components/admin/dashboard/widgets/yard-3d/DigitalTwinEditor.tsx
index 6ee36ca1..e4fd9a8a 100644
--- a/frontend/components/admin/dashboard/widgets/yard-3d/DigitalTwinEditor.tsx
+++ b/frontend/components/admin/dashboard/widgets/yard-3d/DigitalTwinEditor.tsx
@@ -1592,11 +1592,11 @@ export default function DigitalTwinEditor({ layoutId, layoutName, onBack }: Digi
       <div className="bg-muted flex items-center justify-center gap-2 border-b p-4">
         <span className="text-muted-foreground text-sm font-medium">도구:</span>
         {[
-          { type: "area" as ToolType, label: "영역", icon: Grid3x3, color: "text-blue-500" },
-          { type: "location-bed" as ToolType, label: "베드", icon: Package, color: "text-blue-600" },
-          { type: "location-stp" as ToolType, label: "정차", icon: Move, color: "text-gray-500" },
-          // { type: "crane-gantry" as ToolType, label: "겐트리", icon: Combine, color: "text-green-500" },
-          { type: "crane-mobile" as ToolType, label: "크레인", icon: Truck, color: "text-yellow-500" },
+          { type: "area" as ToolType, label: "영역", icon: Grid3x3, color: "text-primary" },
+          { type: "location-bed" as ToolType, label: "베드", icon: Package, color: "text-primary" },
+          { type: "location-stp" as ToolType, label: "정차", icon: Move, color: "text-muted-foreground" },
+          // { type: "crane-gantry" as ToolType, label: "겐트리", icon: Combine, color: "text-emerald-500" },
+          { type: "crane-mobile" as ToolType, label: "크레인", icon: Truck, color: "text-amber-500" },
           { type: "rack" as ToolType, label: "랙", icon: Box, color: "text-purple-500" },
         ].map((tool) => {
           const Icon = tool.icon;
@@ -1919,7 +1919,7 @@ export default function DigitalTwinEditor({ layoutId, layoutName, onBack }: Digi
                             </div>
                           </div>
                           {isLocationPlaced ? (
-                            <Check className="h-4 w-4 text-green-500" />
+                            <Check className="h-4 w-4 text-emerald-500" />
                           ) : locationType === "location-stp" ? (
                             <ParkingCircle className="text-muted-foreground h-4 w-4" />
                           ) : (
@@ -2052,7 +2052,7 @@ export default function DigitalTwinEditor({ layoutId, layoutName, onBack }: Digi
         </div>
 
         {/* 중앙: 3D 캔버스 */}
-        <div className="relative h-full flex-1 bg-gray-100">
+        <div className="relative h-full flex-1 bg-muted">
           {isLoading ? (
             <div className="flex h-full items-center justify-center">
               <Loader2 className="text-muted-foreground h-8 w-8 animate-spin" />
diff --git a/frontend/components/admin/dashboard/widgets/yard-3d/DigitalTwinViewer.tsx b/frontend/components/admin/dashboard/widgets/yard-3d/DigitalTwinViewer.tsx
index ae98c795..cbb2517e 100644
--- a/frontend/components/admin/dashboard/widgets/yard-3d/DigitalTwinViewer.tsx
+++ b/frontend/components/admin/dashboard/widgets/yard-3d/DigitalTwinViewer.tsx
@@ -716,7 +716,7 @@ export default function DigitalTwinViewer({ layoutId }: DigitalTwinViewerProps)
                                   </p>
                                 )}
                                 {obj.materialCount !== undefined && obj.materialCount > 0 && (
-                                  <p className="text-xs text-yellow-600">
+                                  <p className="text-xs text-amber-600">
                                     자재: <span className="font-semibold">{obj.materialCount}개</span>
                                   </p>
                                 )}
@@ -802,7 +802,7 @@ export default function DigitalTwinViewer({ layoutId }: DigitalTwinViewerProps)
                                         </p>
                                       )}
                                       {locationObj.materialCount !== undefined && locationObj.materialCount > 0 && (
-                                        <p className="mt-0.5 text-[10px] text-yellow-600">
+                                        <p className="mt-0.5 text-[10px] text-amber-600">
                                           자재: <span className="font-semibold">{locationObj.materialCount}개</span>
                                         </p>
                                       )}
diff --git a/frontend/components/admin/dashboard/widgets/yard-3d/Yard3DCanvas.tsx b/frontend/components/admin/dashboard/widgets/yard-3d/Yard3DCanvas.tsx
index ad8add20..c6fde7aa 100644
--- a/frontend/components/admin/dashboard/widgets/yard-3d/Yard3DCanvas.tsx
+++ b/frontend/components/admin/dashboard/widgets/yard-3d/Yard3DCanvas.tsx
@@ -1239,7 +1239,7 @@ export default function Yard3DCanvas({
   };
 
   return (
-    <div className="h-full w-full bg-gray-100" onClick={handleCanvasClick}>
+    <div className="h-full w-full bg-muted" onClick={handleCanvasClick}>
       <Canvas
         camera={{
           position: [50, 30, 50],
diff --git a/frontend/components/admin/dashboard/widgets/yard-3d/constants.ts b/frontend/components/admin/dashboard/widgets/yard-3d/constants.ts
index d4959a6c..fe40ddc2 100644
--- a/frontend/components/admin/dashboard/widgets/yard-3d/constants.ts
+++ b/frontend/components/admin/dashboard/widgets/yard-3d/constants.ts
@@ -15,16 +15,16 @@ export const OBJECT_COLORS: Record<string, string> = {
 
 // Tailwind 색상 클래스 매핑 (아이콘용)
 export const OBJECT_COLOR_CLASSES: Record<string, string> = {
-  area: "text-blue-500",
-  "location-bed": "text-blue-600",
-  "location-stp": "text-gray-500",
-  "location-temp": "text-orange-500",
+  area: "text-primary",
+  "location-bed": "text-primary",
+  "location-stp": "text-muted-foreground",
+  "location-temp": "text-amber-500",
   "location-dest": "text-emerald-500",
   "crane-mobile": "text-purple-500",
-  rack: "text-red-500",
+  rack: "text-destructive",
 };
 
 // 기본 색상
 export const DEFAULT_COLOR = "#3b82f6";
-export const DEFAULT_COLOR_CLASS = "text-blue-500";
+export const DEFAULT_COLOR_CLASS = "text-primary";
 
diff --git a/frontend/components/admin/multilang/CategoryTree.tsx b/frontend/components/admin/multilang/CategoryTree.tsx
index 2e1238cf..9dca27ce 100644
--- a/frontend/components/admin/multilang/CategoryTree.tsx
+++ b/frontend/components/admin/multilang/CategoryTree.tsx
@@ -71,7 +71,7 @@ function CategoryNode({
             <Folder className="h-4 w-4 shrink-0 text-amber-500" />
           )
         ) : (
-          <Tag className="h-4 w-4 shrink-0 text-blue-500" />
+          <Tag className="h-4 w-4 shrink-0 text-primary" />
         )}
 
         {/* 카테고리 이름 */}
diff --git a/frontend/components/admin/multilang/KeyGenerateModal.tsx b/frontend/components/admin/multilang/KeyGenerateModal.tsx
index c595adbc..536915ef 100644
--- a/frontend/components/admin/multilang/KeyGenerateModal.tsx
+++ b/frontend/components/admin/multilang/KeyGenerateModal.tsx
@@ -309,8 +309,8 @@ export function KeyGenerateModal({
               preview?.exists 
                 ? "border-destructive bg-destructive/10"
                 : preview?.isOverride
-                ? "border-blue-500 bg-blue-500/10"
-                : "border-green-500 bg-green-500/10"
+                ? "border-primary bg-primary/10"
+                : "border-emerald-500 bg-emerald-500/10"
             )}>
               <div className="flex items-center gap-2">
                 {previewLoading ? (
@@ -318,9 +318,9 @@ export function KeyGenerateModal({
                 ) : preview?.exists ? (
                   <AlertCircle className="h-4 w-4 text-destructive" />
                 ) : preview?.isOverride ? (
-                  <Info className="h-4 w-4 text-blue-500" />
+                  <Info className="h-4 w-4 text-primary" />
                 ) : (
-                  <CheckCircle2 className="h-4 w-4 text-green-500" />
+                  <CheckCircle2 className="h-4 w-4 text-emerald-500" />
                 )}
                 <code className="text-xs font-mono sm:text-sm">
                   {generatedKeyPreview}
@@ -332,7 +332,7 @@ export function KeyGenerateModal({
                 </p>
               )}
               {preview?.isOverride && !preview?.exists && (
-                <p className="mt-1 text-xs text-blue-600">
+                <p className="mt-1 text-xs text-primary">
                   공통 키가 존재합니다. 회사별 오버라이드로 생성됩니다.
                 </p>
               )}
diff --git a/frontend/components/approval/ApprovalRequestModal.tsx b/frontend/components/approval/ApprovalRequestModal.tsx
index ea7fdfa3..45c7ef86 100644
--- a/frontend/components/approval/ApprovalRequestModal.tsx
+++ b/frontend/components/approval/ApprovalRequestModal.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState, useEffect, useCallback, useRef } from "react";
+import React, { useState, useEffect } from "react";
 import {
   Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle,
 } from "@/components/ui/dialog";
@@ -9,20 +9,42 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 import { Badge } from "@/components/ui/badge";
-import { Plus, X, Loader2, Search, GripVertical, Users, ArrowDown, Layers } from "lucide-react";
+import {
+  Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
+} from "@/components/ui/select";
+import { Plus, X, Loader2, GripVertical, Users, ArrowDown, Layers, FileText, ChevronsUpDown } from "lucide-react";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { toast } from "sonner";
-import { createApprovalRequest } from "@/lib/api/approval";
+import {
+  createApprovalRequest,
+  getApprovalTemplates,
+  getTemplateSteps,
+  type ApprovalLineTemplate,
+} from "@/lib/api/approval";
 import { getUserList } from "@/lib/api/user";
 
 // 결재 방식
 type ApprovalMode = "sequential" | "parallel";
 
+// 결재 유형
+type ApprovalType = "self" | "escalation" | "consensus" | "post";
+
+// step_type 라벨 매핑
+const STEP_TYPE_LABEL: Record<string, { label: string; variant: "default" | "secondary" | "outline" }> = {
+  approval: { label: "결재", variant: "default" },
+  consensus: { label: "합의", variant: "secondary" },
+  notification: { label: "통보", variant: "outline" },
+};
+
 interface ApproverRow {
   id: string;
   user_id: string;
   user_name: string;
   position_name: string;
   dept_name: string;
+  step_type?: "approval" | "consensus" | "notification";
+  step_order?: number;
 }
 
 export interface ApprovalModalEventDetail {
@@ -69,13 +91,19 @@ export const ApprovalRequestModal: React.FC<ApprovalRequestModalProps> = ({
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
-  // 사용자 검색 상태
-  const [searchOpen, setSearchOpen] = useState(false);
-  const [searchQuery, setSearchQuery] = useState("");
-  const [searchResults, setSearchResults] = useState<UserSearchResult[]>([]);
-  const [isSearching, setIsSearching] = useState(false);
-  const searchInputRef = useRef<HTMLInputElement>(null);
-  const searchTimerRef = useRef<NodeJS.Timeout | null>(null);
+  // 결재 유형 상태
+  const [approvalType, setApprovalType] = useState<ApprovalType>("escalation");
+
+  // 템플릿 상태
+  const [templates, setTemplates] = useState<ApprovalLineTemplate[]>([]);
+  const [selectedTemplateId, setSelectedTemplateId] = useState<number | null>(null);
+  const [showTemplatePopover, setShowTemplatePopover] = useState(false);
+  const [isLoadingTemplates, setIsLoadingTemplates] = useState(false);
+
+  // 결재자 Combobox 상태
+  const [comboboxOpen, setComboboxOpen] = useState(false);
+  const [allUsers, setAllUsers] = useState<UserSearchResult[]>([]);
+  const [isLoadingUsers, setIsLoadingUsers] = useState(false);
 
   // 모달 닫힐 때 초기화
   useEffect(() => {
@@ -83,24 +111,28 @@ export const ApprovalRequestModal: React.FC<ApprovalRequestModalProps> = ({
       setTitle("");
       setDescription("");
       setApprovalMode("sequential");
+      setApprovalType("escalation");
       setApprovers([]);
       setError(null);
-      setSearchOpen(false);
-      setSearchQuery("");
-      setSearchResults([]);
+      setComboboxOpen(false);
+      setAllUsers([]);
+      setSelectedTemplateId(null);
+      setShowTemplatePopover(false);
     }
   }, [open]);
 
-  // 사용자 검색 (디바운스)
-  const searchUsers = useCallback(async (query: string) => {
-    if (!query.trim() || query.trim().length < 1) {
-      setSearchResults([]);
-      return;
+  // 모달 열릴 때 템플릿 + 사용자 목록 로드
+  useEffect(() => {
+    if (open) {
+      loadTemplates();
+      loadUsers();
     }
+  }, [open]);
 
-    setIsSearching(true);
+  const loadUsers = async () => {
+    setIsLoadingUsers(true);
     try {
-      const res = await getUserList({ search: query.trim(), limit: 20 });
+      const res = await getUserList({ limit: 100 });
       const data = res?.data || res || [];
       const rawUsers: any[] = Array.isArray(data) ? data : [];
       const users: UserSearchResult[] = rawUsers.map((u: any) => ({
@@ -111,28 +143,68 @@ export const ApprovalRequestModal: React.FC<ApprovalRequestModalProps> = ({
         deptCode: u.deptCode || u.dept_code || "",
         email: u.email || "",
       }));
-      const existingIds = new Set(approvers.map((a) => a.user_id));
-      setSearchResults(users.filter((u) => u.userId && !existingIds.has(u.userId)));
+      setAllUsers(users.filter((u) => u.userId));
     } catch {
-      setSearchResults([]);
+      setAllUsers([]);
     } finally {
-      setIsSearching(false);
+      setIsLoadingUsers(false);
     }
-  }, [approvers]);
+  };
 
-  useEffect(() => {
-    if (searchTimerRef.current) clearTimeout(searchTimerRef.current);
-    if (!searchQuery.trim()) {
-      setSearchResults([]);
-      return;
+  const loadTemplates = async () => {
+    setIsLoadingTemplates(true);
+    try {
+      const res = await getApprovalTemplates({ is_active: "Y" });
+      if (res.success && res.data) {
+        setTemplates(res.data);
+      }
+    } catch {
+      // 템플릿 로드 실패는 무시 (선택사항이므로)
+    } finally {
+      setIsLoadingTemplates(false);
     }
-    searchTimerRef.current = setTimeout(() => {
-      searchUsers(searchQuery);
-    }, 300);
-    return () => {
-      if (searchTimerRef.current) clearTimeout(searchTimerRef.current);
-    };
-  }, [searchQuery, searchUsers]);
+  };
+
+  // 템플릿 선택 시 결재자 리스트에 반영
+  const applyTemplate = async (templateId: number) => {
+    try {
+      const res = await getTemplateSteps(templateId);
+      if (!res.success || !res.data || res.data.length === 0) {
+        toast.error("템플릿에 설정된 결재 단계가 없습니다.");
+        return;
+      }
+
+      const steps = res.data;
+      const hasMultipleTypes = new Set(steps.map((s) => s.step_type || "approval")).size > 1;
+
+      // step_type이 혼합이면 escalation으로 설정
+      if (hasMultipleTypes) {
+        setApprovalType("escalation");
+      }
+
+      const newApprovers: ApproverRow[] = steps.map((step) => ({
+        id: genId(),
+        user_id: step.approver_user_id || "",
+        user_name: step.approver_label || step.approver_user_id || "",
+        position_name: step.approver_position || "",
+        dept_name: step.approver_dept_code || "",
+        step_type: step.step_type || "approval",
+        step_order: step.step_order,
+      }));
+
+      setApprovers(newApprovers);
+      setSelectedTemplateId(templateId);
+      setShowTemplatePopover(false);
+      toast.success("템플릿이 적용되었습니다.");
+    } catch {
+      toast.error("템플릿 적용 중 오류가 발생했습니다.");
+    }
+  };
+
+  // Combobox에서 이미 선택된 사용자 제외한 목록
+  const availableUsers = allUsers.filter(
+    (u) => !approvers.some((a) => a.user_id === u.userId)
+  );
 
   const addApprover = (user: UserSearchResult) => {
     setApprovers((prev) => [
@@ -145,9 +217,7 @@ export const ApprovalRequestModal: React.FC<ApprovalRequestModalProps> = ({
         dept_name: user.deptName || "",
       },
     ]);
-    setSearchQuery("");
-    setSearchResults([]);
-    setSearchOpen(false);
+    setComboboxOpen(false);
   };
 
   const removeApprover = (id: string) => {
@@ -169,7 +239,8 @@ export const ApprovalRequestModal: React.FC<ApprovalRequestModalProps> = ({
       setError("결재 제목을 입력해주세요.");
       return;
     }
-    if (approvers.length === 0) {
+    // 자기결재가 아닌 경우 결재자 필수
+    if (approvalType !== "self" && approvers.length === 0) {
       setError("결재자를 1명 이상 추가해주세요.");
       return;
     }
@@ -181,25 +252,35 @@ export const ApprovalRequestModal: React.FC<ApprovalRequestModalProps> = ({
     setIsSubmitting(true);
     setError(null);
 
+    // 혼합형 여부: approvers에 step_type이 설정된 경우
+    const hasMixedStepTypes = approvers.some((a) => a.step_type);
+
     const res = await createApprovalRequest({
       title: title.trim(),
       description: description.trim() || undefined,
+      template_id: selectedTemplateId || undefined,
       target_table: eventDetail.targetTable,
       target_record_id: eventDetail.targetRecordId || undefined,
       target_record_data: eventDetail.targetRecordData,
-      approval_mode: approvalMode,
+      approval_mode: approvalType === "consensus" ? "parallel" : approvalMode,
+      approval_type: approvalType,
       screen_id: eventDetail.screenId,
       button_component_id: eventDetail.buttonComponentId,
-      approvers: approvers.map((a, idx) => ({
-        approver_id: a.user_id,
-        approver_name: a.user_name,
-        approver_position: a.position_name || undefined,
-        approver_dept: a.dept_name || undefined,
-        approver_label:
-          approvalMode === "sequential"
-            ? `${idx + 1}차 결재`
-            : "동시 결재",
-      })),
+      approvers: approvalType === "self"
+        ? []
+        : approvers.map((a, idx) => ({
+            approver_id: a.user_id,
+            approver_name: a.user_name,
+            approver_position: a.position_name || undefined,
+            approver_dept: a.dept_name || undefined,
+            step_type: hasMixedStepTypes ? (a.step_type || "approval") : undefined,
+            step_order: hasMixedStepTypes ? (a.step_order ?? idx + 1) : undefined,
+            approver_label: hasMixedStepTypes
+              ? STEP_TYPE_LABEL[a.step_type || "approval"]?.label
+              : approvalMode === "sequential"
+                ? `${idx + 1}차 결재`
+                : "동시 결재",
+          })),
     });
 
     setIsSubmitting(false);
@@ -251,198 +332,306 @@ export const ApprovalRequestModal: React.FC<ApprovalRequestModalProps> = ({
             />
           </div>
 
-          {/* 결재 방식 */}
+          {/* 결재 유형 + 템플릿 불러오기 */}
           <div>
-            <Label className="text-xs sm:text-sm">결재 방식</Label>
-            <div className="mt-1.5 grid grid-cols-2 gap-2">
-              <button
-                type="button"
-                onClick={() => setApprovalMode("sequential")}
-                className={`flex items-center gap-2 rounded-md border p-3 text-left transition-colors ${
-                  approvalMode === "sequential"
-                    ? "border-primary bg-primary/5 ring-1 ring-primary"
-                    : "hover:bg-muted/50"
-                }`}
-              >
-                <ArrowDown className="h-4 w-4 shrink-0" />
-                <div>
-                  <p className="text-xs font-medium sm:text-sm">다단 결재</p>
-                  <p className="text-muted-foreground text-[10px]">순차적으로 결재</p>
-                </div>
-              </button>
-              <button
-                type="button"
-                onClick={() => setApprovalMode("parallel")}
-                className={`flex items-center gap-2 rounded-md border p-3 text-left transition-colors ${
-                  approvalMode === "parallel"
-                    ? "border-primary bg-primary/5 ring-1 ring-primary"
-                    : "hover:bg-muted/50"
-                }`}
-              >
-                <Layers className="h-4 w-4 shrink-0" />
-                <div>
-                  <p className="text-xs font-medium sm:text-sm">동시 결재</p>
-                  <p className="text-muted-foreground text-[10px]">모든 결재자 동시 진행</p>
-                </div>
-              </button>
-            </div>
-          </div>
-
-          {/* 결재자 추가 (사용자 검색) */}
-          <div>
-            <div className="mb-2 flex items-center justify-between">
-              <Label className="text-xs sm:text-sm">
-                결재자 <span className="text-destructive">*</span>
-              </Label>
-              <span className="text-muted-foreground text-[10px]">
-                {approvers.length}명 선택됨
-              </span>
+            <div className="flex items-end gap-2">
+              <div className="flex-1">
+                <Label className="text-xs sm:text-sm">결재 유형</Label>
+                <Select
+                  value={approvalType}
+                  onValueChange={(v) => setApprovalType(v as ApprovalType)}
+                >
+                  <SelectTrigger size="default" className="mt-1 h-8 text-xs sm:h-10 sm:text-sm">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="escalation">상신결재</SelectItem>
+                    <SelectItem value="self">자기결재 (전결)</SelectItem>
+                    <SelectItem value="consensus">합의결재</SelectItem>
+                    <SelectItem value="post">후결</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              {templates.length > 0 && (
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  className="h-8 shrink-0 text-xs sm:h-10 sm:text-sm"
+                  onClick={() => setShowTemplatePopover(!showTemplatePopover)}
+                >
+                  <FileText className="mr-1 h-3.5 w-3.5" />
+                  템플릿
+                </Button>
+              )}
             </div>
 
-            {/* 검색 입력 */}
-            <div className="relative">
-              <Search className="text-muted-foreground absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2" />
-              <Input
-                ref={searchInputRef}
-                value={searchQuery}
-                onChange={(e) => {
-                  setSearchQuery(e.target.value);
-                  setSearchOpen(true);
-                }}
-                onFocus={() => setSearchOpen(true)}
-                placeholder="이름 또는 사번으로 검색..."
-                className="h-8 pl-9 text-xs sm:h-10 sm:text-sm"
-              />
-
-              {/* 검색 결과 드롭다운 */}
-              {searchOpen && searchQuery.trim() && (
-                <div className="absolute top-full left-0 z-50 mt-1 w-full rounded-md border bg-popover shadow-lg">
-                  {isSearching ? (
-                    <div className="flex items-center justify-center p-4">
+            {/* 템플릿 선택 드롭다운 */}
+            {showTemplatePopover && (
+              <>
+                <div
+                  className="fixed inset-0 z-40"
+                  onClick={() => setShowTemplatePopover(false)}
+                />
+                <div className="relative z-50 mt-2 rounded-md border bg-popover p-2 shadow-lg">
+                  <p className="text-muted-foreground mb-2 text-[10px] font-medium">결재선 템플릿 선택</p>
+                  {isLoadingTemplates ? (
+                    <div className="flex items-center justify-center p-3">
                       <Loader2 className="text-muted-foreground h-4 w-4 animate-spin" />
-                      <span className="text-muted-foreground ml-2 text-xs">검색 중...</span>
-                    </div>
-                  ) : searchResults.length === 0 ? (
-                    <div className="p-4 text-center">
-                      <p className="text-muted-foreground text-xs">검색 결과가 없습니다.</p>
                     </div>
+                  ) : templates.length === 0 ? (
+                    <p className="text-muted-foreground p-3 text-center text-xs">등록된 템플릿이 없습니다.</p>
                   ) : (
-                    <div className="max-h-48 overflow-y-auto">
-                      {searchResults.map((user) => (
+                    <div className="max-h-40 space-y-1 overflow-y-auto">
+                      {templates.map((tpl) => (
                         <button
-                          key={user.userId}
+                          key={tpl.template_id}
                           type="button"
-                          onClick={() => addApprover(user)}
-                          className="flex w-full items-center gap-3 px-3 py-2 text-left transition-colors hover:bg-accent"
+                          onClick={() => applyTemplate(tpl.template_id)}
+                          className={`flex w-full items-center gap-2 rounded-md px-3 py-2 text-left text-xs transition-colors hover:bg-accent ${
+                            selectedTemplateId === tpl.template_id ? "bg-accent" : ""
+                          }`}
                         >
-                          <div className="bg-muted flex h-8 w-8 shrink-0 items-center justify-center rounded-full">
-                            <Users className="h-4 w-4" />
-                          </div>
+                          <FileText className="text-muted-foreground h-3.5 w-3.5 shrink-0" />
                           <div className="min-w-0 flex-1">
-                            <p className="truncate text-xs font-medium sm:text-sm">
-                              {user.userName}
-                              <span className="text-muted-foreground ml-1 text-[10px]">
-                                ({user.userId})
-                              </span>
-                            </p>
-                            <p className="text-muted-foreground truncate text-[10px]">
-                              {[user.deptName, user.positionName].filter(Boolean).join(" / ") || "-"}
-                            </p>
+                            <p className="truncate font-medium">{tpl.template_name}</p>
+                            {tpl.description && (
+                              <p className="text-muted-foreground truncate text-[10px]">{tpl.description}</p>
+                            )}
                           </div>
-                          <Plus className="text-muted-foreground h-4 w-4 shrink-0" />
                         </button>
                       ))}
                     </div>
                   )}
                 </div>
-              )}
-            </div>
-
-            {/* 클릭 외부 영역 닫기 */}
-            {searchOpen && (
-              <div
-                className="fixed inset-0 z-40"
-                onClick={() => setSearchOpen(false)}
-              />
-            )}
-
-            {/* 선택된 결재자 목록 */}
-            {approvers.length === 0 ? (
-              <p className="text-muted-foreground mt-3 rounded-md border border-dashed p-4 text-center text-xs">
-                위 검색창에서 결재자를 검색하여 추가하세요
-              </p>
-            ) : (
-              <div className="mt-3 space-y-2">
-                {approvers.map((approver, idx) => (
-                  <div
-                    key={approver.id}
-                    className="bg-muted/30 flex items-center gap-2 rounded-md border p-2"
-                  >
-                    {/* 순서 표시 */}
-                    {approvalMode === "sequential" ? (
-                      <div className="flex shrink-0 flex-col items-center gap-0.5">
-                        <button
-                          type="button"
-                          onClick={() => moveApprover(idx, "up")}
-                          disabled={idx === 0}
-                          className="text-muted-foreground hover:text-foreground disabled:opacity-30"
-                        >
-                          <GripVertical className="h-3 w-3 rotate-90" />
-                        </button>
-                        <Badge variant="outline" className="h-5 min-w-[24px] justify-center px-1 text-[10px]">
-                          {idx + 1}
-                        </Badge>
-                        <button
-                          type="button"
-                          onClick={() => moveApprover(idx, "down")}
-                          disabled={idx === approvers.length - 1}
-                          className="text-muted-foreground hover:text-foreground disabled:opacity-30"
-                        >
-                          <GripVertical className="h-3 w-3 rotate-90" />
-                        </button>
-                      </div>
-                    ) : (
-                      <Badge variant="secondary" className="h-5 shrink-0 px-1.5 text-[10px]">
-                        동시
-                      </Badge>
-                    )}
-
-                    {/* 사용자 정보 */}
-                    <div className="min-w-0 flex-1">
-                      <p className="truncate text-xs font-medium">
-                        {approver.user_name}
-                        <span className="text-muted-foreground ml-1 text-[10px]">
-                          ({approver.user_id})
-                        </span>
-                      </p>
-                      <p className="text-muted-foreground truncate text-[10px]">
-                        {[approver.dept_name, approver.position_name].filter(Boolean).join(" / ") || "-"}
-                      </p>
-                    </div>
-
-                    {/* 제거 버튼 */}
-                    <Button
-                      type="button"
-                      variant="ghost"
-                      size="icon"
-                      className="h-6 w-6 shrink-0"
-                      onClick={() => removeApprover(approver.id)}
-                    >
-                      <X className="h-3 w-3" />
-                    </Button>
-                  </div>
-                ))}
-
-                {/* 결재 흐름 시각화 */}
-                {approvalMode === "sequential" && approvers.length > 1 && (
-                  <p className="text-muted-foreground text-center text-[10px]">
-                    {approvers.map((a) => a.user_name).join(" → ")}
-                  </p>
-                )}
-              </div>
+              </>
             )}
           </div>
 
+          {/* 후결 안내 배너 */}
+          {approvalType === "post" && (
+            <div className="rounded-md border border-warning/30 bg-warning/10 p-3 text-sm text-warning">
+              먼저 처리 후 나중에 결재받습니다. 결재 반려 시 별도 조치가 필요할 수 있습니다.
+            </div>
+          )}
+
+          {/* 자기결재: 결재자 섹션 대신 안내 메시지 */}
+          {approvalType === "self" ? (
+            <div className="bg-muted text-muted-foreground rounded-md p-4 text-sm">
+              본인이 직접 승인합니다.
+            </div>
+          ) : (
+            <>
+              {/* 결재 방식 (escalation, post에서만 표시. consensus는 순서 무관) */}
+              {approvalType !== "consensus" && (
+                <div>
+                  <Label className="text-xs sm:text-sm">결재 방식</Label>
+                  <div className="mt-1.5 grid grid-cols-2 gap-2">
+                    <button
+                      type="button"
+                      onClick={() => setApprovalMode("sequential")}
+                      className={`flex items-center gap-2 rounded-md border p-3 text-left transition-colors ${
+                        approvalMode === "sequential"
+                          ? "border-primary bg-primary/5 ring-1 ring-primary"
+                          : "hover:bg-muted/50"
+                      }`}
+                    >
+                      <ArrowDown className="h-4 w-4 shrink-0" />
+                      <div>
+                        <p className="text-xs font-medium sm:text-sm">다단 결재</p>
+                        <p className="text-muted-foreground text-[10px]">순차적으로 결재</p>
+                      </div>
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => setApprovalMode("parallel")}
+                      className={`flex items-center gap-2 rounded-md border p-3 text-left transition-colors ${
+                        approvalMode === "parallel"
+                          ? "border-primary bg-primary/5 ring-1 ring-primary"
+                          : "hover:bg-muted/50"
+                      }`}
+                    >
+                      <Layers className="h-4 w-4 shrink-0" />
+                      <div>
+                        <p className="text-xs font-medium sm:text-sm">동시 결재</p>
+                        <p className="text-muted-foreground text-[10px]">모든 결재자 동시 진행</p>
+                      </div>
+                    </button>
+                  </div>
+                </div>
+              )}
+
+              {/* 결재자 추가 (사용자 검색) */}
+              <div>
+                <div className="mb-2 flex items-center justify-between">
+                  <Label className="text-xs sm:text-sm">
+                    {approvalType === "consensus" ? "합의 결재자" : "결재자"}{" "}
+                    <span className="text-destructive">*</span>
+                  </Label>
+                  <span className="text-muted-foreground text-[10px]">
+                    {approvers.length}명 선택됨
+                  </span>
+                </div>
+
+                {/* 결재자 Combobox (Select + 검색) */}
+                <Popover open={comboboxOpen} onOpenChange={setComboboxOpen}>
+                  <PopoverTrigger asChild>
+                    <Button
+                      variant="outline"
+                      role="combobox"
+                      aria-expanded={comboboxOpen}
+                      disabled={isLoadingUsers}
+                      className="h-8 w-full justify-between text-xs sm:h-10 sm:text-sm"
+                    >
+                      {isLoadingUsers ? (
+                        <span className="flex items-center gap-2">
+                          <Loader2 className="h-3 w-3 animate-spin" />
+                          사용자 목록 로딩 중...
+                        </span>
+                      ) : (
+                        <span className="text-muted-foreground">결재자를 선택하세요...</span>
+                      )}
+                      <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent
+                    className="p-0"
+                    style={{ width: "var(--radix-popover-trigger-width)" }}
+                    align="start"
+                  >
+                    <Command>
+                      <CommandInput
+                        placeholder="이름 또는 사번으로 검색..."
+                        className="text-xs sm:text-sm"
+                      />
+                      <CommandList>
+                        <CommandEmpty className="py-4 text-center text-xs">
+                          검색 결과가 없습니다.
+                        </CommandEmpty>
+                        <CommandGroup>
+                          {availableUsers.map((user) => (
+                            <CommandItem
+                              key={user.userId}
+                              value={`${user.userName} ${user.userId} ${user.deptName || ""} ${user.positionName || ""}`}
+                              onSelect={() => addApprover(user)}
+                              className="flex cursor-pointer items-center gap-3 px-3 py-2 text-xs sm:text-sm"
+                            >
+                              <div className="bg-muted flex h-7 w-7 shrink-0 items-center justify-center rounded-full">
+                                <Users className="h-3.5 w-3.5" />
+                              </div>
+                              <div className="min-w-0 flex-1">
+                                <p className="truncate font-medium">
+                                  {user.userName}
+                                  <span className="text-muted-foreground ml-1 text-[10px]">
+                                    ({user.userId})
+                                  </span>
+                                </p>
+                                <p className="text-muted-foreground truncate text-[10px]">
+                                  {[user.deptName, user.positionName].filter(Boolean).join(" / ") || "-"}
+                                </p>
+                              </div>
+                              <Plus className="text-muted-foreground h-4 w-4 shrink-0" />
+                            </CommandItem>
+                          ))}
+                        </CommandGroup>
+                      </CommandList>
+                    </Command>
+                  </PopoverContent>
+                </Popover>
+
+                {/* 선택된 결재자 목록 */}
+                {approvers.length === 0 ? (
+                  <p className="text-muted-foreground mt-3 rounded-md border border-dashed p-4 text-center text-xs">
+                    위 선택창에서 결재자를 선택하여 추가하세요
+                  </p>
+                ) : (
+                  <div className="mt-3 space-y-2">
+                    {approvers.map((approver, idx) => (
+                      <div
+                        key={approver.id}
+                        className="bg-muted/30 flex items-center gap-2 rounded-md border p-2"
+                      >
+                        {/* 순서 표시: consensus에서는 drag 숨김 */}
+                        {approvalType === "consensus" ? (
+                          <Badge variant="secondary" className="h-5 shrink-0 px-1.5 text-[10px]">
+                            합의
+                          </Badge>
+                        ) : approvalMode === "sequential" ? (
+                          <div className="flex shrink-0 flex-col items-center gap-0.5">
+                            <button
+                              type="button"
+                              onClick={() => moveApprover(idx, "up")}
+                              disabled={idx === 0}
+                              className="text-muted-foreground hover:text-foreground disabled:opacity-30"
+                            >
+                              <GripVertical className="h-3 w-3 rotate-90" />
+                            </button>
+                            <Badge variant="outline" className="h-5 min-w-[24px] justify-center px-1 text-[10px]">
+                              {idx + 1}
+                            </Badge>
+                            <button
+                              type="button"
+                              onClick={() => moveApprover(idx, "down")}
+                              disabled={idx === approvers.length - 1}
+                              className="text-muted-foreground hover:text-foreground disabled:opacity-30"
+                            >
+                              <GripVertical className="h-3 w-3 rotate-90" />
+                            </button>
+                          </div>
+                        ) : (
+                          <Badge variant="secondary" className="h-5 shrink-0 px-1.5 text-[10px]">
+                            동시
+                          </Badge>
+                        )}
+
+                        {/* step_type 뱃지 (템플릿에서 불러온 혼합형일 때) */}
+                        {approver.step_type && (
+                          <Badge
+                            variant={STEP_TYPE_LABEL[approver.step_type]?.variant || "outline"}
+                            className="h-5 shrink-0 px-1.5 text-[10px]"
+                          >
+                            {STEP_TYPE_LABEL[approver.step_type]?.label || approver.step_type}
+                          </Badge>
+                        )}
+
+                        {/* 사용자 정보 */}
+                        <div className="min-w-0 flex-1">
+                          <p className="truncate text-xs font-medium">
+                            {approver.user_name}
+                            <span className="text-muted-foreground ml-1 text-[10px]">
+                              ({approver.user_id})
+                            </span>
+                          </p>
+                          <p className="text-muted-foreground truncate text-[10px]">
+                            {[approver.dept_name, approver.position_name].filter(Boolean).join(" / ") || "-"}
+                          </p>
+                        </div>
+
+                        {/* 제거 버튼 */}
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="icon"
+                          className="h-6 w-6 shrink-0"
+                          onClick={() => removeApprover(approver.id)}
+                        >
+                          <X className="h-3 w-3" />
+                        </Button>
+                      </div>
+                    ))}
+
+                    {/* 결재 흐름 시각화 (consensus가 아니고 sequential일 때만) */}
+                    {approvalType !== "consensus" && approvalMode === "sequential" && approvers.length > 1 && (
+                      <p className="text-muted-foreground text-center text-[10px]">
+                        {approvers.map((a) => a.user_name).join(" → ")}
+                      </p>
+                    )}
+                  </div>
+                )}
+              </div>
+            </>
+          )}
+
           {/* 에러 메시지 */}
           {error && (
             <div className="bg-destructive/10 rounded-md p-2">
@@ -462,7 +651,7 @@ export const ApprovalRequestModal: React.FC<ApprovalRequestModalProps> = ({
           </Button>
           <Button
             onClick={handleSubmit}
-            disabled={isSubmitting || approvers.length === 0}
+            disabled={isSubmitting || (approvalType !== "self" && approvers.length === 0)}
             className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
           >
             {isSubmitting ? (
@@ -470,6 +659,8 @@ export const ApprovalRequestModal: React.FC<ApprovalRequestModalProps> = ({
                 <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                 요청 중...
               </>
+            ) : approvalType === "self" ? (
+              "전결 처리"
             ) : (
               `결재 상신 (${approvers.length}명)`
             )}
diff --git a/frontend/components/auth/ErrorMessage.tsx b/frontend/components/auth/ErrorMessage.tsx
index 039c2ccd..ba4846a2 100644
--- a/frontend/components/auth/ErrorMessage.tsx
+++ b/frontend/components/auth/ErrorMessage.tsx
@@ -9,6 +9,6 @@ export function ErrorMessage({ message }: ErrorMessageProps) {
   if (!message) return null;
 
   return (
-    <div className="my-4 rounded-lg border border-destructive/20 bg-destructive/10 px-4 py-3 text-sm text-red-700">{message}</div>
+    <div className="my-4 rounded-lg border border-destructive/20 bg-destructive/10 px-4 py-3 text-sm text-destructive">{message}</div>
   );
 }
diff --git a/frontend/components/auth/LoginFooter.tsx b/frontend/components/auth/LoginFooter.tsx
index 99b5da16..473d58e5 100644
--- a/frontend/components/auth/LoginFooter.tsx
+++ b/frontend/components/auth/LoginFooter.tsx
@@ -5,7 +5,7 @@ import { UI_CONFIG } from "@/constants/auth";
  */
 export function LoginFooter() {
   return (
-    <div className="text-center text-sm text-slate-500">
+    <div className="text-center text-sm text-muted-foreground">
       <p>{UI_CONFIG.COPYRIGHT}</p>
       <p className="mt-1">{UI_CONFIG.POWERED_BY}</p>
     </div>
diff --git a/frontend/components/auth/LoginForm.tsx b/frontend/components/auth/LoginForm.tsx
index dda3736f..d0ddd1a5 100644
--- a/frontend/components/auth/LoginForm.tsx
+++ b/frontend/components/auth/LoginForm.tsx
@@ -29,7 +29,7 @@ export function LoginForm({
   onTogglePassword,
 }: LoginFormProps) {
   return (
-    <Card className="border-0 shadow-xl">
+    <Card className="border shadow-lg">
       <CardHeader className="space-y-1">
         <CardTitle className="text-center text-2xl">로그인</CardTitle>
         <CardDescription className="text-center">계정 정보를 입력해주세요</CardDescription>
@@ -74,7 +74,7 @@ export function LoginForm({
               <button
                 type="button"
                 onClick={onTogglePassword}
-                className="absolute top-1/2 right-3 -translate-y-1/2 transform text-slate-400 transition-colors hover:text-slate-600"
+                className="absolute top-1/2 right-3 -translate-y-1/2 transform text-muted-foreground transition-colors hover:text-foreground"
                 disabled={isLoading}
               >
                 {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
@@ -85,7 +85,7 @@ export function LoginForm({
           {/* 로그인 버튼 */}
           <Button
             type="submit"
-            className="h-11 w-full bg-slate-900 font-medium text-white hover:bg-slate-800"
+            className="h-11 w-full font-medium"
             disabled={isLoading}
           >
             {isLoading ? (
diff --git a/frontend/components/barcode/designer/BarcodeComponentPalette.tsx b/frontend/components/barcode/designer/BarcodeComponentPalette.tsx
index 947ee2ed..e227dc12 100644
--- a/frontend/components/barcode/designer/BarcodeComponentPalette.tsx
+++ b/frontend/components/barcode/designer/BarcodeComponentPalette.tsx
@@ -66,7 +66,7 @@ function DraggableItem({
   return (
     <div
       ref={drag}
-      className={`flex cursor-move items-center gap-2 rounded border p-2 text-sm hover:border-blue-500 hover:bg-blue-50 ${
+      className={`flex cursor-move items-center gap-2 rounded border p-2 text-sm hover:border-primary hover:bg-primary/10 ${
         isDragging ? "opacity-50" : ""
       }`}
     >
diff --git a/frontend/components/barcode/designer/BarcodeDesignerCanvas.tsx b/frontend/components/barcode/designer/BarcodeDesignerCanvas.tsx
index dabc6fcd..a4a575c6 100644
--- a/frontend/components/barcode/designer/BarcodeDesignerCanvas.tsx
+++ b/frontend/components/barcode/designer/BarcodeDesignerCanvas.tsx
@@ -15,15 +15,8 @@ export function BarcodeDesignerCanvas() {
   const containerRef = useRef<HTMLDivElement>(null);
   const canvasRef = useRef<HTMLDivElement>(null);
   const [scale, setScale] = useState(1);
-  const {
-    widthMm,
-    heightMm,
-    components,
-    addComponent,
-    selectComponent,
-    showGrid,
-    snapValueToGrid,
-  } = useBarcodeDesigner();
+  const { widthMm, heightMm, components, addComponent, selectComponent, showGrid, snapValueToGrid } =
+    useBarcodeDesigner();
 
   const widthPx = widthMm * MM_TO_PX;
   const heightPx = heightMm * MM_TO_PX;
@@ -55,49 +48,46 @@ export function BarcodeDesignerCanvas() {
     return () => observer.disconnect();
   }, [widthPx, heightPx]);
 
-  const [{ isOver }, drop] = useDrop(() => ({
-    accept: "barcode-component",
-    drop: (item: { component: BarcodeLabelComponent }, monitor) => {
-      const canvasEl = canvasRef.current;
-      if (!canvasEl) return;
-      const offset = monitor.getClientOffset();
-      const rect = canvasEl.getBoundingClientRect();
-      if (!offset) return;
-      // 스케일 적용된 좌표 → 실제 캔버스 좌표
-      const s = scale;
-      let x = (offset.x - rect.left) / s;
-      let y = (offset.y - rect.top) / s;
-      x -= item.component.width / 2;
-      y -= item.component.height / 2;
-      x = Math.max(0, Math.min(x, widthPx - item.component.width));
-      y = Math.max(0, Math.min(y, heightPx - item.component.height));
+  const [{ isOver }, drop] = useDrop(
+    () => ({
+      accept: "barcode-component",
+      drop: (item: { component: BarcodeLabelComponent }, monitor) => {
+        const canvasEl = canvasRef.current;
+        if (!canvasEl) return;
+        const offset = monitor.getClientOffset();
+        const rect = canvasEl.getBoundingClientRect();
+        if (!offset) return;
+        // 스케일 적용된 좌표 → 실제 캔버스 좌표
+        const s = scale;
+        let x = (offset.x - rect.left) / s;
+        let y = (offset.y - rect.top) / s;
+        x -= item.component.width / 2;
+        y -= item.component.height / 2;
+        x = Math.max(0, Math.min(x, widthPx - item.component.width));
+        y = Math.max(0, Math.min(y, heightPx - item.component.height));
 
-      const newComp: BarcodeLabelComponent = {
-        ...item.component,
-        id: `comp_${uuidv4()}`,
-        x: snapValueToGrid(x),
-        y: snapValueToGrid(y),
-        zIndex: components.length,
-      };
-      addComponent(newComp);
-    },
-    collect: (m) => ({ isOver: m.isOver() }),
-  }), [widthPx, heightPx, scale, components.length, addComponent, snapValueToGrid]);
+        const newComp: BarcodeLabelComponent = {
+          ...item.component,
+          id: `comp_${uuidv4()}`,
+          x: snapValueToGrid(x),
+          y: snapValueToGrid(y),
+          zIndex: components.length,
+        };
+        addComponent(newComp);
+      },
+      collect: (m) => ({ isOver: m.isOver() }),
+    }),
+    [widthPx, heightPx, scale, components.length, addComponent, snapValueToGrid],
+  );
 
   // 스케일된 캔버스가 컨테이너 안에 들어가도록 fit (하단 잘림 방지)
   const scaledW = widthPx * scale;
   const scaledH = heightPx * scale;
 
   return (
-    <div
-      ref={containerRef}
-      className="flex min-h-0 flex-1 items-center justify-center overflow-auto bg-gray-100 p-6"
-    >
+    <div ref={containerRef} className="bg-muted flex flex-1 items-center justify-center overflow-auto p-6">
       {/* 래퍼: 스케일된 크기만큼 차지해서 flex로 정확히 가운데 + 하단 잘림 방지 */}
-      <div
-        className="flex shrink-0 items-center justify-center"
-        style={{ width: scaledW, height: scaledH }}
-      >
+      <div className="flex shrink-0 items-center justify-center" style={{ width: scaledW, height: scaledH }}>
         <div
           style={{
             transform: `scale(${scale})`,
diff --git a/frontend/components/barcode/designer/BarcodeLabelCanvasComponent.tsx b/frontend/components/barcode/designer/BarcodeLabelCanvasComponent.tsx
index 3552f5fe..3567d916 100644
--- a/frontend/components/barcode/designer/BarcodeLabelCanvasComponent.tsx
+++ b/frontend/components/barcode/designer/BarcodeLabelCanvasComponent.tsx
@@ -202,7 +202,7 @@ export function BarcodeLabelCanvasComponent({ component }: Props) {
             }}
           />
         ) : (
-          <div className="flex h-full w-full items-center justify-center bg-gray-100 text-xs text-gray-400">
+          <div className="flex h-full w-full items-center justify-center bg-muted text-xs text-muted-foreground/70">
             이미지
           </div>
         );
@@ -244,7 +244,7 @@ export function BarcodeLabelCanvasComponent({ component }: Props) {
       {selected && component.type !== "line" && (
         <div
           data-resize-handle
-          className="absolute bottom-0 right-0 h-2 w-2 cursor-se-resize bg-blue-500"
+          className="absolute bottom-0 right-0 h-2 w-2 cursor-se-resize bg-primary"
           onMouseDown={(e) => {
             e.stopPropagation();
             setIsResizing(true);
diff --git a/frontend/components/barcode/designer/BarcodePrintPreviewModal.tsx b/frontend/components/barcode/designer/BarcodePrintPreviewModal.tsx
index 0db9b65e..e732118c 100644
--- a/frontend/components/barcode/designer/BarcodePrintPreviewModal.tsx
+++ b/frontend/components/barcode/designer/BarcodePrintPreviewModal.tsx
@@ -151,7 +151,7 @@ export function BarcodePrintPreviewModal({
           </p>
 
           {/* 미리보기 캔버스 (축소) */}
-          <div className="flex justify-center rounded border bg-gray-100 p-4">
+          <div className="flex justify-center rounded border bg-muted p-4">
             <div
               className="relative bg-white shadow"
               style={{
diff --git a/frontend/components/common/AlertModal.tsx b/frontend/components/common/AlertModal.tsx
index bca7c76b..f9deca57 100644
--- a/frontend/components/common/AlertModal.tsx
+++ b/frontend/components/common/AlertModal.tsx
@@ -27,26 +27,26 @@ interface AlertModalProps {
 const alertConfig = {
   success: {
     icon: CheckCircle,
-    iconColor: "text-green-500",
-    titleColor: "text-green-700",
+    iconColor: "text-emerald-500",
+    titleColor: "text-emerald-700",
     buttonVariant: "default" as const,
   },
   error: {
     icon: XCircle,
-    iconColor: "text-red-500",
-    titleColor: "text-red-700",
+    iconColor: "text-destructive",
+    titleColor: "text-destructive",
     buttonVariant: "destructive" as const,
   },
   warning: {
     icon: AlertTriangle,
-    iconColor: "text-yellow-500",
+    iconColor: "text-amber-500",
     titleColor: "text-yellow-700",
     buttonVariant: "default" as const,
   },
   info: {
     icon: Info,
-    iconColor: "text-blue-500",
-    titleColor: "text-blue-700",
+    iconColor: "text-primary",
+    titleColor: "text-primary",
     buttonVariant: "default" as const,
   },
 };
diff --git a/frontend/components/common/DataTable.tsx b/frontend/components/common/DataTable.tsx
index a1a3f03e..54da4617 100644
--- a/frontend/components/common/DataTable.tsx
+++ b/frontend/components/common/DataTable.tsx
@@ -65,17 +65,17 @@ export function DataTable<TData, TValue>({
 
   return (
     <div className={cn("space-y-4", className)}>
-      {/* 테이블 상단 툴바 */}
-      <div className="flex items-center justify-between">
-        <div className="flex items-center space-x-2">
+      {/* 테이블 상단 툴바 - 모바일: 세로 스택, sm 이상: 가로 배치 */}
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:space-x-2">
           {searchable && (
             <div className="relative">
-              <Search className="absolute top-2.5 left-2.5 h-4 w-4 text-slate-500" />
+              <Search className="absolute top-2.5 left-2.5 h-4 w-4 text-muted-foreground" />
               <Input
                 placeholder={searchPlaceholder}
                 value={globalFilter ?? ""}
                 onChange={(event) => setGlobalFilter(event.target.value)}
-                className="w-64 pl-8"
+                className="w-full pl-8 sm:w-64"
               />
             </div>
           )}
@@ -98,15 +98,15 @@ export function DataTable<TData, TValue>({
         </div>
       </div>
 
-      {/* 테이블 */}
-      <div className="rounded-md border">
+      {/* 테이블 - 가로 스크롤 지원 */}
+      <div className="overflow-x-auto rounded-md border">
         <Table>
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
               <TableRow key={headerGroup.id}>
                 {headerGroup.headers.map((header) => {
                   return (
-                    <TableHead key={header.id} className="bg-slate-50">
+                    <TableHead key={header.id} className="bg-muted/50">
                       {header.isPlaceholder ? null : (
                         <div
                           className={cn(
@@ -143,7 +143,7 @@ export function DataTable<TData, TValue>({
                 <TableRow
                   key={row.id}
                   data-state={row.getIsSelected() && "selected"}
-                  className={cn(onRowClick ? "cursor-pointer hover:bg-slate-50" : "")}
+                  className={cn(onRowClick ? "cursor-pointer hover:bg-muted/50" : "")}
                   onClick={() => onRowClick?.(row.original)}
                 >
                   {row.getVisibleCells().map((cell) => (
@@ -162,16 +162,17 @@ export function DataTable<TData, TValue>({
         </Table>
       </div>
 
-      {/* 페이지네이션 */}
-      <div className="flex items-center justify-between px-2">
-        <div className="flex-1 text-sm text-slate-600">
+      {/* 페이지네이션 - 모바일: 세로 스택, sm 이상: 가로 배치 */}
+      <div className="flex flex-col gap-3 px-2 sm:flex-row sm:items-center sm:justify-between">
+        <div className="text-center text-sm text-muted-foreground sm:text-left">
           {table.getFilteredSelectedRowModel().rows.length}개 중 {table.getFilteredRowModel().rows.length}개 표시
         </div>
-        <div className="flex items-center space-x-6 lg:space-x-8">
+        <div className="flex flex-col items-center gap-3 sm:flex-row sm:gap-6 lg:gap-8">
           <div className="flex items-center space-x-2">
-            <p className="text-sm font-medium">페이지당 행 수</p>
+            {/* 모바일에서 "페이지당 행 수" 텍스트 숨김 */}
+            <p className="hidden text-sm font-medium sm:block">페이지당 행 수</p>
             <select
-              className="h-8 w-16 rounded border border-slate-300 text-sm"
+              className="h-8 w-16 rounded border border-input text-sm"
               value={table.getState().pagination.pageSize}
               onChange={(e) => {
                 table.setPageSize(Number(e.target.value));
@@ -184,10 +185,10 @@ export function DataTable<TData, TValue>({
               ))}
             </select>
           </div>
-          <div className="flex w-24 items-center justify-center text-sm font-medium">
-            페이지 {table.getState().pagination.pageIndex + 1} / {table.getPageCount()}
-          </div>
-          <div className="flex items-center space-x-2">
+          <div className="flex items-center gap-1">
+            <div className="flex w-24 items-center justify-center text-sm font-medium">
+              페이지 {table.getState().pagination.pageIndex + 1} / {table.getPageCount()}
+            </div>
             <Button
               variant="outline"
               className="h-8 w-8 p-0"
@@ -258,12 +259,12 @@ export const createStatusColumn = (accessorKey: string, header: string) => ({
           className={cn(
             "inline-flex items-center rounded-full px-2 py-1 text-xs font-medium",
             status === "active" || status === "활성"
-              ? "bg-green-50 text-green-700"
+              ? "bg-success/10 text-success"
               : status === "inactive" || status === "비활성"
-                ? "bg-gray-50 text-gray-700"
+                ? "bg-muted text-muted-foreground"
                 : status === "pending" || status === "대기"
-                  ? "bg-yellow-50 text-yellow-700"
-                  : "bg-destructive/10 text-red-700",
+                  ? "bg-warning/10 text-warning"
+                  : "bg-destructive/10 text-destructive",
           )}
         >
           {status || "-"}
diff --git a/frontend/components/common/DualListBox.tsx b/frontend/components/common/DualListBox.tsx
index 36582e8d..c5d25a2e 100644
--- a/frontend/components/common/DualListBox.tsx
+++ b/frontend/components/common/DualListBox.tsx
@@ -5,7 +5,7 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Checkbox } from "@/components/ui/checkbox";
-import { ChevronRight, ChevronLeft, ChevronsRight, ChevronsLeft, Search } from "lucide-react";
+import { ChevronRight, ChevronLeft, ChevronDown, ChevronUp, ChevronsRight, ChevronsLeft, ChevronsDown, ChevronsUp, Search } from "lucide-react";
 import { cn } from "@/lib/utils";
 
 /**
@@ -197,9 +197,9 @@ export function DualListBox({
   const itemRenderer = renderItem || defaultRenderItem;
 
   return (
-    <div className={cn("flex gap-4", className)}>
+    <div className={cn("flex flex-col gap-4 sm:flex-row", className)}>
       {/* 좌측 리스트 (사용 가능한 항목) */}
-      <div className="flex flex-1 flex-col gap-2">
+      <div className="flex w-full flex-col gap-2 sm:flex-1">
         <Label className="text-sm font-semibold">{availableLabel}</Label>
 
         {/* 검색 */}
@@ -210,7 +210,7 @@ export function DualListBox({
               placeholder="검색..."
               value={leftSearch}
               onChange={(e) => setLeftSearch(e.target.value)}
-              className="h-9 pl-9 text-sm"
+              className="h-9 w-full pl-9 text-sm"
               disabled={disabled}
             />
           </div>
@@ -263,55 +263,57 @@ export function DualListBox({
         </div>
       </div>
 
-      {/* 중앙 버튼 (이동) */}
-      <div
-        className="flex flex-col items-center justify-center gap-2"
-        style={{ marginTop: enableSearch ? "80px" : "48px" }}
-      >
+      {/* 중앙 버튼 (이동) - 모바일: 가로 배치, 데스크톱: 세로 배치 */}
+      <div className="flex flex-row items-center justify-center gap-2 sm:flex-col sm:justify-center">
+        {/* 모두 이동: 모바일은 아래/위, 데스크톱은 오른쪽/왼쪽 */}
         <Button
           variant="outline"
           size="icon"
           onClick={moveAllToRight}
           disabled={disabled || available.length === 0}
-          title="모두 오른쪽으로 이동"
+          title="모두 이동"
           className="h-9 w-9"
         >
-          <ChevronsRight className="h-4 w-4" />
+          <ChevronsDown className="h-4 w-4 sm:hidden" />
+          <ChevronsRight className="hidden h-4 w-4 sm:inline-flex" />
         </Button>
         <Button
           variant="outline"
           size="icon"
           onClick={moveToRight}
           disabled={disabled || leftChecked.size === 0}
-          title="선택된 항목 오른쪽으로 이동"
+          title="선택된 항목 이동"
           className="h-9 w-9"
         >
-          <ChevronRight className="h-4 w-4" />
+          <ChevronDown className="h-4 w-4 sm:hidden" />
+          <ChevronRight className="hidden h-4 w-4 sm:inline-flex" />
         </Button>
         <Button
           variant="outline"
           size="icon"
           onClick={moveToLeft}
           disabled={disabled || rightChecked.size === 0}
-          title="선택된 항목 왼쪽으로 이동"
+          title="선택된 항목 되돌리기"
           className="h-9 w-9"
         >
-          <ChevronLeft className="h-4 w-4" />
+          <ChevronUp className="h-4 w-4 sm:hidden" />
+          <ChevronLeft className="hidden h-4 w-4 sm:inline-flex" />
         </Button>
         <Button
           variant="outline"
           size="icon"
           onClick={moveAllToLeft}
           disabled={disabled || selectedItems.length === 0}
-          title="모두 왼쪽으로 이동"
+          title="모두 되돌리기"
           className="h-9 w-9"
         >
-          <ChevronsLeft className="h-4 w-4" />
+          <ChevronsUp className="h-4 w-4 sm:hidden" />
+          <ChevronsLeft className="hidden h-4 w-4 sm:inline-flex" />
         </Button>
       </div>
 
       {/* 우측 리스트 (선택된 항목) */}
-      <div className="flex flex-1 flex-col gap-2">
+      <div className="flex w-full flex-col gap-2 sm:flex-1">
         <Label className="text-sm font-semibold">{selectedLabel}</Label>
 
         {/* 검색 */}
@@ -322,7 +324,7 @@ export function DualListBox({
               placeholder="검색..."
               value={rightSearch}
               onChange={(e) => setRightSearch(e.target.value)}
-              className="h-9 pl-9 text-sm"
+              className="h-9 w-full pl-9 text-sm"
               disabled={disabled}
             />
           </div>
diff --git a/frontend/components/common/EditableSpreadsheet.tsx b/frontend/components/common/EditableSpreadsheet.tsx
index 67e7f80b..a5d44b4f 100644
--- a/frontend/components/common/EditableSpreadsheet.tsx
+++ b/frontend/components/common/EditableSpreadsheet.tsx
@@ -894,7 +894,7 @@ export const EditableSpreadsheet: React.FC<EditableSpreadsheetProps> = ({
             const colName = columns[col];
             const increment = columnIncrements.get(col);
             
-            if (increment !== null) {
+            if (typeof increment === 'number') {
               // 숫자 패턴 증가 모드
               // 마지막 선택 행의 값을 기준으로 증가
               const lastValue = String(data[norm.endRow]?.[colName] ?? "");
@@ -929,7 +929,7 @@ export const EditableSpreadsheet: React.FC<EditableSpreadsheetProps> = ({
             const colName = columns[col];
             const increment = columnIncrements.get(col);
             
-            if (increment !== null) {
+            if (typeof increment === 'number') {
               // 숫자 패턴 감소 모드
               const firstValue = String(data[norm.startRow]?.[colName] ?? "");
               const step = (targetRow - norm.startRow) * increment;
@@ -992,10 +992,10 @@ export const EditableSpreadsheet: React.FC<EditableSpreadsheetProps> = ({
     <div
       ref={tableRef}
       tabIndex={0}
-      className="overflow-auto rounded-md border border-border select-none outline-none focus:ring-2 focus:ring-primary/20"
+      className="overflow-x-auto overflow-y-auto rounded-md border border-border select-none outline-none focus:ring-2 focus:ring-primary/20"
       style={{ maxHeight }}
     >
-      <table className="min-w-full border-collapse text-xs">
+      <table className="min-w-[600px] border-collapse text-xs">
         {/* 열 인덱스 헤더 (A, B, C, ...) */}
         <thead className="sticky top-0 z-10 bg-muted">
           <tr>
@@ -1066,7 +1066,7 @@ export const EditableSpreadsheet: React.FC<EditableSpreadsheetProps> = ({
                     onChange={(e) => setEditValue(e.target.value)}
                     onKeyDown={handleKeyDown}
                     onBlur={finishEditing}
-                    className="w-full bg-white px-2 py-1 text-xs font-medium text-primary outline-none"
+                    className="min-w-[80px] w-full bg-white px-2 py-1 text-xs font-medium text-primary outline-none"
                   />
                 ) : (
                   <div className="px-2 py-1">{colName || <span className="text-muted-foreground/50 italic">빈 헤더</span>}</div>
@@ -1124,7 +1124,7 @@ export const EditableSpreadsheet: React.FC<EditableSpreadsheetProps> = ({
                         onChange={(e) => setEditValue(e.target.value)}
                         onKeyDown={handleKeyDown}
                         onBlur={finishEditing}
-                        className="w-full bg-white px-2 py-1 text-xs outline-none"
+                        className="min-w-[80px] w-full bg-white px-2 py-1 text-xs outline-none"
                       />
                     ) : (
                       <div
diff --git a/frontend/components/common/ExcelUploadModal.tsx b/frontend/components/common/ExcelUploadModal.tsx
index f5bfc5f9..d3a4b187 100644
--- a/frontend/components/common/ExcelUploadModal.tsx
+++ b/frontend/components/common/ExcelUploadModal.tsx
@@ -24,6 +24,7 @@ import {
   FileSpreadsheet,
   AlertCircle,
   CheckCircle2,
+  XCircle,
   ArrowRight,
   Zap,
   Copy,
@@ -136,6 +137,10 @@ export const ExcelUploadModal: React.FC<ExcelUploadModalProps> = ({
   // 중복 처리 방법 (전역 설정)
   const [duplicateAction, setDuplicateAction] = useState<"overwrite" | "skip">("skip");
 
+  // 엑셀 데이터 사전 검증 결과
+  const [isDataValidating, setIsDataValidating] = useState(false);
+  const [validationResult, setValidationResult] = useState<import("@/lib/api/tableManagement").ExcelValidationResult | null>(null);
+
   // 카테고리 검증 관련
   const [showCategoryValidation, setShowCategoryValidation] = useState(false);
   const [isCategoryValidating, setIsCategoryValidating] = useState(false);
@@ -874,6 +879,43 @@ export const ExcelUploadModal: React.FC<ExcelUploadModalProps> = ({
         setShowCategoryValidation(true);
         return;
       }
+
+      // 데이터 사전 검증 (NOT NULL 값 누락, UNIQUE 중복)
+      setIsDataValidating(true);
+      try {
+        const { validateExcelData: validateExcel } = await import("@/lib/api/tableManagement");
+
+        // 매핑된 데이터 구성
+        const mappedForValidation = allData.map((row) => {
+          const mapped: Record<string, any> = {};
+          columnMappings.forEach((m) => {
+            if (m.systemColumn) {
+              let colName = m.systemColumn;
+              if (isMasterDetail && colName.includes(".")) {
+                colName = colName.split(".")[1];
+              }
+              mapped[colName] = row[m.excelColumn];
+            }
+          });
+          return mapped;
+        }).filter((row) => Object.values(row).some((v) => v !== null && v !== undefined && String(v).trim() !== ""));
+
+        if (mappedForValidation.length > 0) {
+          const result = await validateExcel(tableName, mappedForValidation);
+          if (result.success && result.data) {
+            setValidationResult(result.data);
+          } else {
+            setValidationResult(null);
+          }
+        } else {
+          setValidationResult(null);
+        }
+      } catch (err) {
+        console.warn("데이터 사전 검증 실패 (무시):", err);
+        setValidationResult(null);
+      } finally {
+        setIsDataValidating(false);
+      }
     }
 
     setCurrentStep((prev) => Math.min(prev + 1, 3));
@@ -1301,6 +1343,9 @@ export const ExcelUploadModal: React.FC<ExcelUploadModalProps> = ({
       setSystemColumns([]);
       setColumnMappings([]);
       setDuplicateAction("skip");
+      // 검증 상태 초기화
+      setValidationResult(null);
+      setIsDataValidating(false);
       // 카테고리 검증 초기화
       setShowCategoryValidation(false);
       setCategoryMismatches({});
@@ -1329,7 +1374,7 @@ export const ExcelUploadModal: React.FC<ExcelUploadModalProps> = ({
             <FileSpreadsheet className="h-5 w-5" />
             엑셀 데이터 업로드
             {isMasterDetail && (
-              <span className="ml-2 rounded bg-blue-100 px-2 py-0.5 text-xs font-normal text-blue-700">
+              <span className="ml-2 rounded bg-primary/10 px-2 py-0.5 text-xs font-normal text-primary">
                 마스터-디테일
               </span>
             )}
@@ -1520,15 +1565,15 @@ export const ExcelUploadModal: React.FC<ExcelUploadModalProps> = ({
                     isDragOver
                       ? "border-primary bg-primary/5"
                       : file
-                        ? "border-green-500 bg-green-50"
+                        ? "border-emerald-500 bg-emerald-50"
                         : "border-muted-foreground/25 hover:border-primary hover:bg-muted/50"
                   )}
                 >
                   {file ? (
                     <div className="flex items-center gap-3">
-                      <FileSpreadsheet className="h-8 w-8 text-green-600" />
+                      <FileSpreadsheet className="h-8 w-8 text-emerald-600" />
                       <div>
-                        <p className="text-sm font-medium text-green-700">{file.name}</p>
+                        <p className="text-sm font-medium text-emerald-700">{file.name}</p>
                         <p className="text-xs text-muted-foreground">
                           클릭하여 다른 파일 선택
                         </p>
@@ -1759,11 +1804,11 @@ export const ExcelUploadModal: React.FC<ExcelUploadModalProps> = ({
 
               {/* 중복 체크 안내 */}
               {duplicateCheckCount > 0 ? (
-                <div className="rounded-md border border-blue-200 bg-blue-50 p-3">
+                <div className="rounded-md border border-primary/20 bg-primary/10 p-3">
                   <div className="flex items-start justify-between gap-4">
                     <div className="flex items-start gap-2">
-                      <Copy className="mt-0.5 h-4 w-4 text-blue-600" />
-                      <div className="text-[10px] text-blue-700 sm:text-xs">
+                      <Copy className="mt-0.5 h-4 w-4 text-primary" />
+                      <div className="text-[10px] text-primary sm:text-xs">
                         <p className="font-medium">
                           중복 키: {columnMappings
                             .filter((m) => m.checkDuplicate && m.systemColumn)
@@ -1779,12 +1824,12 @@ export const ExcelUploadModal: React.FC<ExcelUploadModalProps> = ({
                       </div>
                     </div>
                     <div className="flex items-center gap-2 shrink-0">
-                      <span className="text-[10px] text-blue-700 sm:text-xs">중복 시:</span>
+                      <span className="text-[10px] text-primary sm:text-xs">중복 시:</span>
                       <Select
                         value={duplicateAction}
                         onValueChange={(value) => setDuplicateAction(value as "overwrite" | "skip")}
                       >
-                        <SelectTrigger className="h-7 w-[100px] text-[10px] sm:text-xs border-blue-300 bg-white">
+                        <SelectTrigger className="h-7 w-[100px] text-[10px] sm:text-xs border-primary/40 bg-white">
                           <SelectValue />
                         </SelectTrigger>
                         <SelectContent>
@@ -1870,6 +1915,100 @@ export const ExcelUploadModal: React.FC<ExcelUploadModalProps> = ({
                 </div>
               </div>
 
+              {/* 데이터 검증 결과 */}
+              {validationResult && !validationResult.isValid && (
+                <div className="space-y-3">
+                  {/* NOT NULL 에러 */}
+                  {validationResult.notNullErrors.length > 0 && (
+                    <div className="rounded-md border border-destructive bg-destructive/10 p-4">
+                      <h3 className="flex items-center gap-2 text-sm font-medium text-destructive sm:text-base">
+                        <XCircle className="h-4 w-4" />
+                        필수값 누락 ({validationResult.notNullErrors.length}건)
+                      </h3>
+                      <div className="mt-2 max-h-[150px] space-y-0.5 overflow-y-auto text-[10px] text-destructive sm:text-xs">
+                        {(() => {
+                          const grouped = new Map<string, number[]>();
+                          for (const err of validationResult.notNullErrors) {
+                            const key = err.label;
+                            if (!grouped.has(key)) grouped.set(key, []);
+                            grouped.get(key)!.push(err.row);
+                          }
+                          return Array.from(grouped).map(([label, rows]) => (
+                            <p key={label}>
+                              <span className="font-medium">{label}</span>: {rows.length > 5 ? `행 ${rows.slice(0, 5).join(", ")} 외 ${rows.length - 5}건` : `행 ${rows.join(", ")}`}
+                            </p>
+                          ));
+                        })()}
+                      </div>
+                    </div>
+                  )}
+
+                  {/* 엑셀 내부 중복 */}
+                  {validationResult.uniqueInExcelErrors.length > 0 && (
+                    <div className="rounded-md border border-warning bg-warning/10 p-4">
+                      <h3 className="flex items-center gap-2 text-sm font-medium text-warning sm:text-base">
+                        <AlertCircle className="h-4 w-4" />
+                        엑셀 내 중복 ({validationResult.uniqueInExcelErrors.length}건)
+                      </h3>
+                      <div className="mt-2 max-h-[150px] space-y-0.5 overflow-y-auto text-[10px] text-warning sm:text-xs">
+                        {validationResult.uniqueInExcelErrors.slice(0, 10).map((err, i) => (
+                          <p key={i}>
+                            <span className="font-medium">{err.label}</span> "{err.value}": 행 {err.rows.join(", ")}
+                          </p>
+                        ))}
+                        {validationResult.uniqueInExcelErrors.length > 10 && (
+                          <p className="font-medium">...외 {validationResult.uniqueInExcelErrors.length - 10}건</p>
+                        )}
+                      </div>
+                    </div>
+                  )}
+
+                  {/* DB 기존 데이터 중복 */}
+                  {validationResult.uniqueInDbErrors.length > 0 && (
+                    <div className="rounded-md border border-destructive bg-destructive/10 p-4">
+                      <h3 className="flex items-center gap-2 text-sm font-medium text-destructive sm:text-base">
+                        <XCircle className="h-4 w-4" />
+                        DB 기존 데이터와 중복 ({validationResult.uniqueInDbErrors.length}건)
+                      </h3>
+                      <div className="mt-2 max-h-[150px] space-y-0.5 overflow-y-auto text-[10px] text-destructive sm:text-xs">
+                        {(() => {
+                          const grouped = new Map<string, { value: string; rows: number[] }[]>();
+                          for (const err of validationResult.uniqueInDbErrors) {
+                            const key = err.label;
+                            if (!grouped.has(key)) grouped.set(key, []);
+                            const existing = grouped.get(key)!.find((e) => e.value === err.value);
+                            if (existing) existing.rows.push(err.row);
+                            else grouped.get(key)!.push({ value: err.value, rows: [err.row] });
+                          }
+                          return Array.from(grouped).map(([label, items]) => (
+                            <div key={label}>
+                              {items.slice(0, 5).map((item, i) => (
+                                <p key={i}>
+                                  <span className="font-medium">{label}</span> "{item.value}": 행 {item.rows.join(", ")}
+                                </p>
+                              ))}
+                              {items.length > 5 && <p className="font-medium">...외 {items.length - 5}건</p>}
+                            </div>
+                          ));
+                        })()}
+                      </div>
+                    </div>
+                  )}
+                </div>
+              )}
+
+              {validationResult?.isValid && (
+                <div className="rounded-md border border-success bg-success/10 p-4">
+                  <h3 className="flex items-center gap-2 text-sm font-medium text-success sm:text-base">
+                    <CheckCircle2 className="h-4 w-4" />
+                    데이터 검증 통과
+                  </h3>
+                  <p className="mt-1 text-[10px] text-success sm:text-xs">
+                    필수값 및 중복 검사를 통과했습니다.
+                  </p>
+                </div>
+              )}
+
               <div className="rounded-md border border-border bg-muted/50 p-4">
                 <h3 className="text-sm font-medium sm:text-base">컬럼 매핑</h3>
                 <div className="mt-2 space-y-1 text-[10px] text-muted-foreground sm:text-xs">
@@ -1884,7 +2023,7 @@ export const ExcelUploadModal: React.FC<ExcelUploadModalProps> = ({
                           <span className="font-medium">{mapping.excelColumn}</span> →{" "}
                           {col?.label || mapping.systemColumn}
                           {mapping.checkDuplicate && (
-                            <span className="ml-2 text-blue-600">
+                            <span className="ml-2 text-primary">
                               (중복 체크: {mapping.duplicateAction === "overwrite" ? "덮어쓰기" : "건너뛰기"})
                             </span>
                           )}
@@ -1899,9 +2038,9 @@ export const ExcelUploadModal: React.FC<ExcelUploadModalProps> = ({
 
               {/* 중복 체크 요약 */}
               {duplicateCheckCount > 0 && (
-                <div className="rounded-md border border-blue-200 bg-blue-50 p-4">
-                  <h3 className="text-sm font-medium text-blue-800 sm:text-base">중복 체크 설정</h3>
-                  <div className="mt-2 space-y-1 text-[10px] text-blue-700 sm:text-xs">
+                <div className="rounded-md border border-primary/20 bg-primary/10 p-4">
+                  <h3 className="text-sm font-medium text-primary sm:text-base">중복 체크 설정</h3>
+                  <div className="mt-2 space-y-1 text-[10px] text-primary sm:text-xs">
                     <p>
                       <span className="font-medium">중복 키:</span>{" "}
                       {columnMappings
@@ -1948,10 +2087,10 @@ export const ExcelUploadModal: React.FC<ExcelUploadModalProps> = ({
           {currentStep < 3 ? (
             <Button
               onClick={handleNext}
-              disabled={isUploading || isCategoryValidating || (currentStep === 1 && !file)}
+              disabled={isUploading || isCategoryValidating || isDataValidating || (currentStep === 1 && !file)}
               className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
             >
-              {isCategoryValidating ? (
+              {isCategoryValidating || isDataValidating ? (
                 <>
                   <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                   검증 중...
@@ -1964,11 +2103,13 @@ export const ExcelUploadModal: React.FC<ExcelUploadModalProps> = ({
             <Button
               onClick={handleUpload}
               disabled={
-                isUploading || columnMappings.filter((m) => m.systemColumn).length === 0
+                isUploading ||
+                columnMappings.filter((m) => m.systemColumn).length === 0 ||
+                (validationResult !== null && !validationResult.isValid)
               }
               className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
             >
-              {isUploading ? "업로드 중..." : "업로드"}
+              {isUploading ? "업로드 중..." : validationResult && !validationResult.isValid ? "검증 실패 - 이전으로 돌아가 수정" : "업로드"}
             </Button>
           )}
         </DialogFooter>
diff --git a/frontend/components/common/FormValidationIndicator.tsx b/frontend/components/common/FormValidationIndicator.tsx
index a907fa28..3d445020 100644
--- a/frontend/components/common/FormValidationIndicator.tsx
+++ b/frontend/components/common/FormValidationIndicator.tsx
@@ -140,9 +140,9 @@ const CompactValidationIndicator: React.FC<{
           <span className="text-destructive">{validationState.errors.length}개 오류</span>
         )}
         {validationState.warnings.length > 0 && (
-          <span className="ml-2 text-orange-600">{validationState.warnings.length}개 경고</span>
+          <span className="ml-2 text-amber-600">{validationState.warnings.length}개 경고</span>
         )}
-        {validationState.isValid && <span className="text-green-600">검증 통과</span>}
+        {validationState.isValid && <span className="text-emerald-600">검증 통과</span>}
       </div>
 
       <Button size="sm" onClick={onSave} disabled={!canSave || saveState.status === "saving"} className="h-8">
@@ -176,7 +176,7 @@ const ValidationStatusBadge: React.FC<{ status: FormValidationState["status"] }>
           variant: "default" as const,
           icon: CheckCircle,
           text: "유효함",
-          className: "bg-green-500 hover:bg-green-600",
+          className: "bg-emerald-500 hover:bg-emerald-600",
         };
       case "invalid":
         return {
@@ -238,14 +238,14 @@ const ValidationSummary: React.FC<{ validationState: FormValidationState }> = ({
         )}
 
         {validationState.warnings.length > 0 && (
-          <div className="flex items-center gap-1 text-orange-600">
+          <div className="flex items-center gap-1 text-amber-600">
             <AlertTriangle className="h-4 w-4" />
             <span>{validationState.warnings.length}개 경고</span>
           </div>
         )}
 
         {validationState.isValid && validationState.errors.length === 0 && validationState.warnings.length === 0 && (
-          <div className="flex items-center gap-1 text-green-600">
+          <div className="flex items-center gap-1 text-emerald-600">
             <CheckCircle className="h-4 w-4" />
             <span>모든 검증 통과</span>
           </div>
@@ -307,8 +307,8 @@ const ValidationErrorItem: React.FC<{ error: ValidationError }> = ({ error }) =>
  */
 const ValidationWarningItem: React.FC<{ warning: ValidationWarning }> = ({ warning }) => {
   return (
-    <Alert className="border-orange-200 bg-orange-50 py-2">
-      <AlertTriangle className="h-4 w-4 text-orange-600" />
+    <Alert className="border-orange-200 bg-amber-50 py-2">
+      <AlertTriangle className="h-4 w-4 text-amber-600" />
       <AlertDescription className="text-sm">
         <span className="font-medium">{warning.field}:</span> {warning.message}
         {warning.suggestion && <span className="mt-1 block text-xs text-orange-700">💡 {warning.suggestion}</span>}
@@ -364,15 +364,15 @@ export const FieldValidationIndicator: React.FC<{
       {showIcon && (
         <>
           {status === "validating" && <Clock className="text-muted-foreground h-3 w-3 animate-spin" />}
-          {status === "valid" && !error && <CheckCircle className="h-3 w-3 text-green-600" />}
+          {status === "valid" && !error && <CheckCircle className="h-3 w-3 text-emerald-600" />}
           {error && <AlertCircle className="text-destructive h-3 w-3" />}
-          {warning && !error && <AlertTriangle className="h-3 w-3 text-orange-600" />}
+          {warning && !error && <AlertTriangle className="h-3 w-3 text-amber-600" />}
         </>
       )}
 
       {error && <span className="text-destructive">{error.message}</span>}
 
-      {warning && !error && <span className="text-orange-600">{warning.message}</span>}
+      {warning && !error && <span className="text-amber-600">{warning.message}</span>}
     </div>
   );
 };
diff --git a/frontend/components/common/ResponsiveDataView.tsx b/frontend/components/common/ResponsiveDataView.tsx
new file mode 100644
index 00000000..226225f4
--- /dev/null
+++ b/frontend/components/common/ResponsiveDataView.tsx
@@ -0,0 +1,328 @@
+"use client";
+
+import React, { ReactNode } from "react";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+
+// 컬럼 정의 타입
+export interface RDVColumn<T> {
+  key: string;
+  label: string;
+  width?: string;
+  render?: (value: any, row: T, index: number) => ReactNode;
+  hideOnMobile?: boolean;
+  className?: string;
+}
+
+// 카드 필드 타입
+export interface RDVCardField<T> {
+  label: string;
+  render: (item: T) => ReactNode;
+  hideEmpty?: boolean;
+}
+
+// 메인 Props 타입
+export interface ResponsiveDataViewProps<T> {
+  data: T[];
+  columns: RDVColumn<T>[];
+  keyExtractor: (item: T) => string;
+
+  // 로딩/빈 상태
+  isLoading?: boolean;
+  emptyMessage?: string;
+  skeletonCount?: number;
+
+  // 카드 설정 (모바일)
+  cardTitle: (item: T) => ReactNode;
+  cardSubtitle?: (item: T) => ReactNode;
+  cardHeaderRight?: (item: T) => ReactNode;
+  cardFields?: RDVCardField<T>[] | ((item: T) => RDVCardField<T>[]);
+
+  // 액션 (테이블 마지막 컬럼 + 카드 하단)
+  renderActions?: (item: T) => ReactNode;
+  actionsLabel?: string;
+  actionsWidth?: string;
+
+  // 행 클릭
+  onRowClick?: (item: T) => void;
+
+  // 스타일 커스터마이징
+  tableContainerClassName?: string;
+  cardContainerClassName?: string;
+}
+
+// 중첩 객체에서 키 경로로 값을 꺼내는 헬퍼
+function getNestedValue(obj: any, path: string): any {
+  return path.split(".").reduce((acc, key) => acc?.[key], obj);
+}
+
+export function ResponsiveDataView<T>({
+  data,
+  columns,
+  keyExtractor,
+  isLoading = false,
+  emptyMessage,
+  skeletonCount = 5,
+  cardTitle,
+  cardSubtitle,
+  cardHeaderRight,
+  cardFields,
+  renderActions,
+  actionsLabel,
+  actionsWidth,
+  onRowClick,
+  tableContainerClassName,
+  cardContainerClassName,
+}: ResponsiveDataViewProps<T>) {
+  // cardFields 미지정 시 columns에서 자동 생성
+  function resolveCardFields(item: T): RDVCardField<T>[] {
+    if (typeof cardFields === "function") return cardFields(item);
+    if (Array.isArray(cardFields)) return cardFields;
+    return columns
+      .filter((col) => !col.hideOnMobile)
+      .map((col) => ({
+        label: col.label,
+        render: (row: T) =>
+          col.render
+            ? col.render(getNestedValue(row, col.key), row, 0)
+            : String(getNestedValue(row, col.key) ?? "-"),
+      }));
+  }
+
+  // --- 로딩 스켈레톤 ---
+  if (isLoading) {
+    return (
+      <>
+        {/* 데스크톱 테이블 스켈레톤 */}
+        <div
+          className={cn(
+            "hidden rounded-lg border bg-card shadow-sm lg:block",
+            tableContainerClassName
+          )}
+        >
+          <Table>
+            <TableHeader>
+              <TableRow className="border-b bg-muted/50 hover:bg-muted/50">
+                {columns.map((col) => (
+                  <TableHead
+                    key={col.key}
+                    style={col.width ? { width: col.width } : undefined}
+                    className="h-12 text-sm font-semibold"
+                  >
+                    {col.label}
+                  </TableHead>
+                ))}
+                {renderActions && (
+                  <TableHead
+                    style={{ width: actionsWidth || "120px" }}
+                    className="h-12 text-sm font-semibold"
+                  >
+                    {actionsLabel || "작업"}
+                  </TableHead>
+                )}
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {Array.from({ length: skeletonCount }).map((_, rowIdx) => (
+                <TableRow key={rowIdx} className="border-b">
+                  {columns.map((col) => (
+                    <TableCell key={col.key} className="h-16">
+                      <div className="h-4 animate-pulse rounded bg-muted" />
+                    </TableCell>
+                  ))}
+                  {renderActions && (
+                    <TableCell className="h-16">
+                      <div className="flex gap-2">
+                        <div className="h-8 w-8 animate-pulse rounded bg-muted" />
+                        <div className="h-8 w-8 animate-pulse rounded bg-muted" />
+                      </div>
+                    </TableCell>
+                  )}
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+
+        {/* 모바일 카드 스켈레톤 */}
+        <div
+          className={cn(
+            "grid gap-4 sm:grid-cols-2 lg:hidden",
+            cardContainerClassName
+          )}
+        >
+          {Array.from({ length: skeletonCount }).map((_, i) => (
+            <div
+              key={i}
+              className="rounded-lg border bg-card p-4 shadow-sm"
+            >
+              <div className="mb-3 flex items-start justify-between">
+                <div className="flex-1 space-y-2">
+                  <div className="h-5 w-32 animate-pulse rounded bg-muted" />
+                  <div className="h-4 w-24 animate-pulse rounded bg-muted" />
+                </div>
+                <div className="h-6 w-12 animate-pulse rounded bg-muted" />
+              </div>
+              <div className="space-y-2 border-t pt-3">
+                {Array.from({ length: 3 }).map((_, j) => (
+                  <div key={j} className="flex justify-between">
+                    <div className="h-4 w-16 animate-pulse rounded bg-muted" />
+                    <div className="h-4 w-24 animate-pulse rounded bg-muted" />
+                  </div>
+                ))}
+              </div>
+              {renderActions && (
+                <div className="mt-3 flex gap-2 border-t pt-3">
+                  <div className="h-9 flex-1 animate-pulse rounded bg-muted" />
+                  <div className="h-9 flex-1 animate-pulse rounded bg-muted" />
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      </>
+    );
+  }
+
+  // --- 빈 상태 ---
+  if (data.length === 0) {
+    return (
+      <div className="flex h-32 items-center justify-center rounded-lg border bg-card text-sm text-muted-foreground">
+        {emptyMessage || "데이터가 없습니다."}
+      </div>
+    );
+  }
+
+  // --- 실제 데이터 렌더링 ---
+  return (
+    <>
+      {/* 데스크톱 테이블 (lg 이상) */}
+      <div
+        className={cn(
+          "hidden rounded-lg border bg-card shadow-sm lg:block",
+          tableContainerClassName
+        )}
+      >
+        <Table>
+          <TableHeader>
+            <TableRow className="border-b bg-muted/50 hover:bg-muted/50">
+              {columns.map((col) => (
+                <TableHead
+                  key={col.key}
+                  style={col.width ? { width: col.width } : undefined}
+                  className="h-12 text-sm font-semibold"
+                >
+                  {col.label}
+                </TableHead>
+              ))}
+              {renderActions && (
+                <TableHead
+                  style={{ width: actionsWidth || "120px" }}
+                  className="h-12 text-sm font-semibold"
+                >
+                  {actionsLabel || "작업"}
+                </TableHead>
+              )}
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {data.map((item, index) => (
+              <TableRow
+                key={keyExtractor(item)}
+                className={cn(
+                  "border-b transition-colors hover:bg-muted/50",
+                  onRowClick && "cursor-pointer"
+                )}
+                onClick={() => onRowClick?.(item)}
+              >
+                {columns.map((col) => (
+                  <TableCell
+                    key={col.key}
+                    className={cn("h-16 text-sm", col.className)}
+                  >
+                    {col.render
+                      ? col.render(getNestedValue(item, col.key), item, index)
+                      : String(getNestedValue(item, col.key) ?? "-")}
+                  </TableCell>
+                ))}
+                {renderActions && (
+                  <TableCell className="h-16 text-sm">
+                    <div className="flex gap-2">{renderActions(item)}</div>
+                  </TableCell>
+                )}
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+
+      {/* 모바일 카드 (lg 미만) */}
+      <div
+        className={cn(
+          "grid gap-4 sm:grid-cols-2 lg:hidden",
+          cardContainerClassName
+        )}
+      >
+        {data.map((item) => {
+          const fields = resolveCardFields(item);
+          return (
+            <div
+              key={keyExtractor(item)}
+              className={cn(
+                "rounded-lg border bg-card p-4 shadow-sm transition-colors hover:bg-muted/50",
+                onRowClick && "cursor-pointer"
+              )}
+              onClick={() => onRowClick?.(item)}
+            >
+              {/* 카드 헤더 */}
+              <div className="mb-3 flex items-start justify-between">
+                <div className="min-w-0 flex-1">
+                  <h3 className="truncate text-base font-semibold">
+                    {cardTitle(item)}
+                  </h3>
+                  {cardSubtitle && (
+                    <p className="mt-0.5 truncate text-sm text-muted-foreground">
+                      {cardSubtitle(item)}
+                    </p>
+                  )}
+                </div>
+                {cardHeaderRight && (
+                  <div className="ml-2 shrink-0">{cardHeaderRight(item)}</div>
+                )}
+              </div>
+
+              {/* 카드 필드 */}
+              {fields.length > 0 && (
+                <div className="space-y-1.5 border-t pt-3">
+                  {fields.map((field, i) => (
+                    <div key={i} className="flex justify-between text-sm">
+                      <span className="text-muted-foreground">
+                        {field.label}
+                      </span>
+                      <span className="font-medium">{field.render(item)}</span>
+                    </div>
+                  ))}
+                </div>
+              )}
+
+              {/* 카드 액션 */}
+              {renderActions && (
+                <div className="mt-3 flex gap-2 border-t pt-3">
+                  {renderActions(item)}
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </>
+  );
+}
+
diff --git a/frontend/components/common/ResponsiveSplitPanel.tsx b/frontend/components/common/ResponsiveSplitPanel.tsx
new file mode 100644
index 00000000..7b0f6031
--- /dev/null
+++ b/frontend/components/common/ResponsiveSplitPanel.tsx
@@ -0,0 +1,281 @@
+"use client";
+
+import React, { useState, useRef, useCallback, useEffect, ReactNode } from "react";
+import { GripVertical, ChevronDown, ChevronRight, PanelLeftClose, PanelLeftOpen } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+export interface ResponsiveSplitPanelProps {
+  left: ReactNode;
+  right: ReactNode;
+
+  leftTitle?: string;
+  leftWidth?: number;
+  minLeftWidth?: number;
+  maxLeftWidth?: number;
+
+  showResizer?: boolean;
+  collapsedOnMobile?: boolean;
+
+  height?: string;
+  className?: string;
+  leftClassName?: string;
+  rightClassName?: string;
+}
+
+type ViewMode = "desktop" | "tablet" | "mobile";
+
+const DESKTOP_BREAKPOINT = 1280;
+const TABLET_BREAKPOINT = 768;
+
+function getViewMode(width: number): ViewMode {
+  if (width >= DESKTOP_BREAKPOINT) return "desktop";
+  if (width >= TABLET_BREAKPOINT) return "tablet";
+  return "mobile";
+}
+
+function getAdaptiveLeftWidth(
+  baseWidth: number,
+  containerWidth: number,
+  minPx: number
+): number {
+  const currentPx = (baseWidth / 100) * containerWidth;
+  if (currentPx < minPx) {
+    return Math.min((minPx / containerWidth) * 100, 50);
+  }
+  return baseWidth;
+}
+
+export function ResponsiveSplitPanel({
+  left,
+  right,
+  leftTitle = "목록",
+  leftWidth: initialLeftWidth = 25,
+  minLeftWidth = 10,
+  maxLeftWidth = 50,
+  showResizer = true,
+  collapsedOnMobile = true,
+  height = "100%",
+  className,
+  leftClassName,
+  rightClassName,
+}: ResponsiveSplitPanelProps) {
+  const [userLeftWidth, setUserLeftWidth] = useState(initialLeftWidth);
+  const [viewMode, setViewMode] = useState<ViewMode>("desktop");
+  const [leftCollapsed, setLeftCollapsed] = useState(false);
+  const [containerWidth, setContainerWidth] = useState(0);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const isDraggingRef = useRef(false);
+  const prevViewModeRef = useRef<ViewMode>("desktop");
+
+  // 컨테이너 크기 + 뷰 모드 실시간 감지
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (!entry) return;
+      const w = entry.contentRect.width;
+      setContainerWidth(w);
+
+      const newMode = getViewMode(window.innerWidth);
+      setViewMode((prev) => {
+        if (prev !== newMode) {
+          if (newMode === "mobile" && collapsedOnMobile) {
+            setLeftCollapsed(true);
+          } else if (newMode === "tablet") {
+            setLeftCollapsed(true);
+          } else if (newMode === "desktop" && prev !== "desktop") {
+            setLeftCollapsed(false);
+          }
+        }
+        return newMode;
+      });
+    });
+
+    observer.observe(container);
+    setContainerWidth(container.offsetWidth);
+    const initialMode = getViewMode(window.innerWidth);
+    setViewMode(initialMode);
+    if (initialMode === "mobile" && collapsedOnMobile) {
+      setLeftCollapsed(true);
+    } else if (initialMode === "tablet") {
+      setLeftCollapsed(true);
+    }
+
+    return () => observer.disconnect();
+  }, [collapsedOnMobile]);
+
+  // window resize도 감지 (viewport 변화)
+  useEffect(() => {
+    const handleResize = () => {
+      const newMode = getViewMode(window.innerWidth);
+      setViewMode((prev) => {
+        if (prev !== newMode) {
+          if (newMode === "mobile" && collapsedOnMobile) {
+            setLeftCollapsed(true);
+          } else if (newMode === "tablet") {
+            setLeftCollapsed(true);
+          } else if (newMode === "desktop") {
+            setLeftCollapsed(false);
+          }
+        }
+        return newMode;
+      });
+    };
+
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, [collapsedOnMobile]);
+
+  // 리사이저
+  const handleMouseDown = useCallback(() => {
+    isDraggingRef.current = true;
+    document.body.style.cursor = "col-resize";
+    document.body.style.userSelect = "none";
+  }, []);
+
+  const handleMouseMove = useCallback(
+    (e: MouseEvent) => {
+      if (!isDraggingRef.current || !containerRef.current) return;
+      const rect = containerRef.current.getBoundingClientRect();
+      const pct = ((e.clientX - rect.left) / rect.width) * 100;
+      if (pct >= minLeftWidth && pct <= maxLeftWidth) {
+        setUserLeftWidth(pct);
+      }
+    },
+    [minLeftWidth, maxLeftWidth]
+  );
+
+  const handleMouseUp = useCallback(() => {
+    isDraggingRef.current = false;
+    document.body.style.cursor = "";
+    document.body.style.userSelect = "";
+  }, []);
+
+  useEffect(() => {
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [handleMouseMove, handleMouseUp]);
+
+  // 좌측 패널 최소 px 보장 (200px 이하로 줄어들지 않게)
+  const MIN_LEFT_PX = 200;
+  const effectiveLeftWidth =
+    containerWidth > 0
+      ? getAdaptiveLeftWidth(userLeftWidth, containerWidth, MIN_LEFT_PX)
+      : userLeftWidth;
+
+  // --- 모바일: 세로 스택 ---
+  if (viewMode === "mobile") {
+    return (
+      <div ref={containerRef} className={cn("flex flex-col gap-0", className)} style={{ height }}>
+        <button
+          onClick={() => setLeftCollapsed(!leftCollapsed)}
+          className={cn(
+            "flex w-full items-center justify-between border-b px-3 py-2.5",
+            "bg-muted/50 hover:bg-muted transition-colors",
+            "text-sm font-medium"
+          )}
+        >
+          <span>{leftTitle}</span>
+          {leftCollapsed ? (
+            <ChevronRight className="text-muted-foreground h-4 w-4" />
+          ) : (
+            <ChevronDown className="text-muted-foreground h-4 w-4" />
+          )}
+        </button>
+
+        {!leftCollapsed && (
+          <div className={cn("max-h-[40vh] overflow-y-auto border-b", leftClassName)}>
+            {left}
+          </div>
+        )}
+
+        <div className={cn("min-h-0 flex-1 overflow-y-auto", rightClassName)}>
+          {right}
+        </div>
+      </div>
+    );
+  }
+
+  // --- 태블릿 + 데스크톱: 좌우 분할 ---
+  return (
+    <div
+      ref={containerRef}
+      className={cn("flex gap-0 overflow-hidden", className)}
+      style={{ height }}
+    >
+      {/* 좌측 패널 */}
+      {!leftCollapsed ? (
+        <>
+          <div
+            style={{ width: `${effectiveLeftWidth}%` }}
+            className={cn(
+              "flex h-full flex-col overflow-hidden border-r pr-1 transition-[width] duration-200",
+              leftClassName
+            )}
+          >
+            <div className="flex-1 overflow-y-auto">{left}</div>
+          </div>
+
+          {/* 리사이저 (데스크톱만) */}
+          {showResizer && viewMode === "desktop" && (
+            <div
+              onMouseDown={handleMouseDown}
+              className="group hover:bg-accent/50 relative flex h-full w-2 shrink-0 cursor-col-resize items-center justify-center transition-colors"
+            >
+              <GripVertical className="text-muted-foreground group-hover:text-foreground h-4 w-4 transition-colors" />
+            </div>
+          )}
+        </>
+      ) : (
+        <div className="flex h-full w-10 shrink-0 flex-col items-center border-r pt-2">
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-7 w-7"
+            onClick={() => setLeftCollapsed(false)}
+            title={`${leftTitle} 열기`}
+          >
+            <PanelLeftOpen className="h-4 w-4" />
+          </Button>
+        </div>
+      )}
+
+      {/* 우측 패널 */}
+      <div
+        style={{
+          width: leftCollapsed
+            ? "calc(100% - 40px)"
+            : `${100 - effectiveLeftWidth}%`,
+        }}
+        className={cn(
+          "flex h-full flex-col overflow-hidden pl-2 transition-[width] duration-200",
+          rightClassName
+        )}
+      >
+        {!leftCollapsed && (
+          <div className="mb-1 flex justify-start">
+            <Button
+              variant="ghost"
+              size="icon"
+              className="text-muted-foreground hover:text-foreground h-6 w-6"
+              onClick={() => setLeftCollapsed(true)}
+              title={`${leftTitle} 접기`}
+            >
+              <PanelLeftClose className="h-3.5 w-3.5" />
+            </Button>
+          </div>
+        )}
+        <div className="min-h-0 flex-1 overflow-y-auto">{right}</div>
+      </div>
+    </div>
+  );
+}
+
+export default ResponsiveSplitPanel;
diff --git a/frontend/components/common/ScreenModal.tsx b/frontend/components/common/ScreenModal.tsx
index f75ded8f..dca348c2 100644
--- a/frontend/components/common/ScreenModal.tsx
+++ b/frontend/components/common/ScreenModal.tsx
@@ -27,6 +27,8 @@ import { ActiveTabProvider } from "@/contexts/ActiveTabContext";
 import { convertV2ToLegacy, isValidV2Layout } from "@/lib/utils/layoutV2Converter";
 import { ConditionalZone, LayerDefinition } from "@/types/screen-management";
 import { ScreenContextProvider } from "@/contexts/ScreenContext";
+import { useTabStore } from "@/stores/tabStore";
+import { useTabId } from "@/contexts/TabIdContext";
 
 interface ScreenModalState {
   isOpen: boolean;
@@ -43,6 +45,8 @@ interface ScreenModalProps {
 export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
   const { userId, userName, user } = useAuth();
   const splitPanelContext = useSplitPanelContext();
+  const tabId = useTabId();
+  const activeTabId = useTabStore((s) => s[s.mode].activeTabId);
 
   const [modalState, setModalState] = useState<ScreenModalState>({
     isOpen: false,
@@ -170,6 +174,11 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
   // 전역 모달 이벤트 리스너
   useEffect(() => {
     const handleOpenModal = (event: CustomEvent) => {
+      // 활성 탭에서만 이벤트 처리 (다른 탭의 ScreenModal 인스턴스는 무시)
+      const storeState = useTabStore.getState();
+      const currentActiveTabId = storeState[storeState.mode].activeTabId;
+      if (tabId && tabId !== currentActiveTabId) return;
+
       const {
         screenId,
         title,
@@ -191,7 +200,7 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
         isCreateMode,
       });
 
-      // 🆕 모달 열린 시간 기록
+      // 모달 열린 시간 기록
       modalOpenedAtRef.current = Date.now();
 
       // 폼 변경 추적 초기화
@@ -443,7 +452,7 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
       window.removeEventListener("closeSaveModal", handleCloseModal);
       window.removeEventListener("saveSuccessInModal", handleSaveSuccess);
     };
-  }, [continuousMode]); // continuousMode 의존성 추가
+  }, [tabId, continuousMode]);
 
   // 화면 데이터 로딩
   useEffect(() => {
@@ -852,7 +861,7 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
     } else {
       handleCloseInternal();
     }
-  }, []);
+  }, [tabId]);
 
   // 확인 후 실제로 모달을 닫는 함수
   const handleConfirmClose = useCallback(() => {
@@ -990,7 +999,6 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
     <Dialog
       open={modalState.isOpen}
       onOpenChange={(open) => {
-        // X 버튼 클릭 시에도 확인 다이얼로그 표시
         if (!open) {
           handleCloseAttempt();
         }
@@ -1028,7 +1036,7 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
           {loading ? (
             <div className="flex h-full items-center justify-center">
               <div className="text-center">
-                <div className="mx-auto mb-4 h-8 w-8 animate-spin rounded-full border-b-2 border-blue-600"></div>
+                <div className="mx-auto mb-4 h-8 w-8 animate-spin rounded-full border-b-2 border-primary"></div>
                 <p className="text-muted-foreground">화면을 불러오는 중...</p>
               </div>
             </div>
@@ -1217,6 +1225,7 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
                         userId={userId}
                         userName={userName}
                         companyCode={user?.companyCode}
+                        isInModal={true}
                       />
                     );
                   });
@@ -1260,6 +1269,7 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
                         userId={userId}
                         userName={userName}
                         companyCode={user?.companyCode}
+                        isInModal={true}
                       />
                     );
                   })}
diff --git a/frontend/components/common/TableHistoryModal.tsx b/frontend/components/common/TableHistoryModal.tsx
index 91299457..a08fff3d 100644
--- a/frontend/components/common/TableHistoryModal.tsx
+++ b/frontend/components/common/TableHistoryModal.tsx
@@ -102,26 +102,26 @@ export function TableHistoryModal({
   const getOperationIcon = (type: string) => {
     switch (type) {
       case "INSERT":
-        return <Plus className="h-4 w-4 text-green-600" />;
+        return <Plus className="h-4 w-4 text-emerald-600" />;
       case "UPDATE":
-        return <FileEdit className="h-4 w-4 text-blue-600" />;
+        return <FileEdit className="h-4 w-4 text-primary" />;
       case "DELETE":
-        return <Trash2 className="h-4 w-4 text-red-600" />;
+        return <Trash2 className="h-4 w-4 text-destructive" />;
       default:
-        return <Clock className="h-4 w-4 text-gray-600" />;
+        return <Clock className="h-4 w-4 text-muted-foreground" />;
     }
   };
 
   const getOperationBadge = (type: string) => {
     switch (type) {
       case "INSERT":
-        return <span className="text-sm font-medium text-green-600">추가</span>;
+        return <span className="text-sm font-medium text-emerald-600">추가</span>;
       case "UPDATE":
-        return <span className="text-sm font-medium text-blue-600">수정</span>;
+        return <span className="text-sm font-medium text-primary">수정</span>;
       case "DELETE":
-        return <span className="text-sm font-medium text-red-600">삭제</span>;
+        return <span className="text-sm font-medium text-destructive">삭제</span>;
       default:
-        return <span className="text-sm font-medium text-gray-600">{type}</span>;
+        return <span className="text-sm font-medium text-muted-foreground">{type}</span>;
     }
   };
 
@@ -301,8 +301,8 @@ export function TableHistoryModal({
                 ) : (
                   <div className="space-y-6">
                     {timeline.map((event, index) => (
-                      <div key={index} className="relative border-l-2 border-gray-200 pb-6 pl-8 last:border-l-0">
-                        <div className="absolute top-0 -left-3 rounded-full border-2 border-gray-200 bg-white p-1">
+                      <div key={index} className="relative border-l-2 border-border pb-6 pl-8 last:border-l-0">
+                        <div className="absolute top-0 -left-3 rounded-full border-2 border-border bg-white p-1">
                           {getOperationIcon(event.operation_type)}
                         </div>
 
@@ -325,12 +325,12 @@ export function TableHistoryModal({
                               <p className="text-muted-foreground text-xs font-medium">변경된 항목:</p>
                               <div className="space-y-1">
                                 {event.changes.map((change, idx) => (
-                                  <div key={idx} className="rounded bg-gray-50 p-2 text-xs">
+                                  <div key={idx} className="rounded bg-muted p-2 text-xs">
                                     <span className="font-mono font-medium">{change.column}</span>
                                     <div className="mt-1 flex items-center gap-2">
-                                      <span className="text-red-600 line-through">{change.oldValue || "(없음)"}</span>
+                                      <span className="text-destructive line-through">{change.oldValue || "(없음)"}</span>
                                       <span>→</span>
-                                      <span className="font-medium text-green-600">{change.newValue || "(없음)"}</span>
+                                      <span className="font-medium text-emerald-600">{change.newValue || "(없음)"}</span>
                                     </div>
                                   </div>
                                 ))}
@@ -355,7 +355,7 @@ export function TableHistoryModal({
                   </div>
                 ) : (
                   <table className="w-full text-xs">
-                    <thead className="sticky top-0 border-b bg-gray-50">
+                    <thead className="sticky top-0 border-b bg-muted">
                       <tr>
                         {!recordId && <th className="p-2 text-left font-medium">레코드</th>}
                         <th className="p-2 text-left font-medium">작업</th>
@@ -370,11 +370,11 @@ export function TableHistoryModal({
                       {detailRecords.map((record) => {
                         const displayValue = getDisplayValue(record);
                         return (
-                          <tr key={record.log_id} className="border-b hover:bg-gray-50">
+                          <tr key={record.log_id} className="border-b hover:bg-muted">
                             {!recordId && (
                               <td className="p-2">
                                 {displayValue ? (
-                                  <span className="font-medium text-gray-900">{displayValue}</span>
+                                  <span className="font-medium text-foreground">{displayValue}</span>
                                 ) : (
                                   <span className="text-muted-foreground text-xs">-</span>
                                 )}
@@ -382,8 +382,8 @@ export function TableHistoryModal({
                             )}
                             <td className="p-2">{getOperationBadge(record.operation_type)}</td>
                             <td className="p-2 font-mono">{record.changed_column}</td>
-                            <td className="max-w-[200px] truncate p-2 text-red-600">{record.old_value || "-"}</td>
-                            <td className="max-w-[200px] truncate p-2 text-green-600">{record.new_value || "-"}</td>
+                            <td className="max-w-[200px] truncate p-2 text-destructive">{record.old_value || "-"}</td>
+                            <td className="max-w-[200px] truncate p-2 text-emerald-600">{record.new_value || "-"}</td>
                             <td className="p-2">{record.changed_by}</td>
                             <td className="text-muted-foreground p-2">{formatDate(record.changed_at)}</td>
                           </tr>
diff --git a/frontend/components/common/ValidationMessage.tsx b/frontend/components/common/ValidationMessage.tsx
index b46653b7..e524dd38 100644
--- a/frontend/components/common/ValidationMessage.tsx
+++ b/frontend/components/common/ValidationMessage.tsx
@@ -10,7 +10,7 @@ interface ValidationMessageProps {
 
 export function ValidationMessage({ message, isValid, isLoading, className }: ValidationMessageProps) {
   if (isLoading) {
-    return <p className={cn("text-sm text-gray-500", className)}>검사 중...</p>;
+    return <p className={cn("text-sm text-muted-foreground", className)}>검사 중...</p>;
   }
 
   if (!message) {
@@ -18,6 +18,6 @@ export function ValidationMessage({ message, isValid, isLoading, className }: Va
   }
 
   return (
-    <p className={cn("text-sm transition-colors", isValid ? "text-green-600" : "text-destructive", className)}>{message}</p>
+    <p className={cn("text-sm transition-colors", isValid ? "text-emerald-600" : "text-destructive", className)}>{message}</p>
   );
 }
diff --git a/frontend/components/dashboard/DashboardViewer.tsx b/frontend/components/dashboard/DashboardViewer.tsx
index b9346ba7..94e6aa8a 100644
--- a/frontend/components/dashboard/DashboardViewer.tsx
+++ b/frontend/components/dashboard/DashboardViewer.tsx
@@ -171,10 +171,10 @@ function renderWidget(element: DashboardElement) {
     // === 기본 fallback ===
     default:
       return (
-        <div className="from-muted to-muted-foreground flex h-full w-full items-center justify-center bg-gradient-to-br p-4 text-white">
+        <div className="flex h-full w-full items-center justify-center bg-muted/30 p-4">
           <div className="text-center">
             <div className="mb-2 text-3xl">❓</div>
-            <div className="text-sm">알 수 없는 위젯 타입: {element.subtype}</div>
+            <div className="text-sm text-muted-foreground">알 수 없는 위젯 타입: {element.subtype}</div>
           </div>
         </div>
       );
@@ -274,7 +274,6 @@ export function DashboardViewer({
 
         console.log("📸 html-to-image 로딩 중...");
         // html-to-image 동적 import
-        // @ts-expect-error - html-to-image 타입 선언 누락
         const { toPng } = await import("html-to-image");
 
         console.log("📸 캔버스 캡처 중...");
diff --git a/frontend/components/dashboard/widgets/DeliveryStatusWidget.tsx b/frontend/components/dashboard/widgets/DeliveryStatusWidget.tsx
index 637e299e..1acf795c 100644
--- a/frontend/components/dashboard/widgets/DeliveryStatusWidget.tsx
+++ b/frontend/components/dashboard/widgets/DeliveryStatusWidget.tsx
@@ -293,7 +293,7 @@ export default function DeliveryStatusWidget({ element, refreshInterval = 60000
   };
 
   return (
-    <div className="h-full w-full overflow-auto bg-gradient-to-br from-background to-primary/10 p-4">
+    <div className="h-full w-full overflow-auto bg-card p-4">
       {/* 헤더 */}
       <div className="mb-3 flex items-center justify-between">
         <div>
diff --git a/frontend/components/dashboard/widgets/DeliveryTodayStatsWidget.tsx b/frontend/components/dashboard/widgets/DeliveryTodayStatsWidget.tsx
index 5db1372c..ac01e4ef 100644
--- a/frontend/components/dashboard/widgets/DeliveryTodayStatsWidget.tsx
+++ b/frontend/components/dashboard/widgets/DeliveryTodayStatsWidget.tsx
@@ -140,7 +140,7 @@ export default function DeliveryTodayStatsWidget({ element }: DeliveryTodayStats
       {/* 통계 카드 */}
       <div className="flex flex-1 flex-col gap-4">
         {/* 오늘 발송 */}
-        <div className="flex flex-1 flex-col items-center justify-center rounded-lg bg-gradient-to-br from-primary/10 to-primary/20 p-6">
+        <div className="flex flex-1 flex-col items-center justify-center rounded-lg border bg-primary/5 p-6">
           <div className="mb-2 text-4xl">📤</div>
           <p className="text-sm font-medium text-primary">오늘 발송</p>
           <p className="mt-2 text-4xl font-bold text-primary">{todayStats.shipped.toLocaleString()}</p>
@@ -148,7 +148,7 @@ export default function DeliveryTodayStatsWidget({ element }: DeliveryTodayStats
         </div>
 
         {/* 오늘 도착 */}
-        <div className="flex flex-1 flex-col items-center justify-center rounded-lg bg-gradient-to-br from-success/10 to-success/20 p-6">
+        <div className="flex flex-1 flex-col items-center justify-center rounded-lg border bg-success/5 p-6">
           <div className="mb-2 text-4xl">📥</div>
           <p className="text-sm font-medium text-success">오늘 도착</p>
           <p className="mt-2 text-4xl font-bold text-success">{todayStats.delivered.toLocaleString()}</p>
diff --git a/frontend/components/dashboard/widgets/ExchangeWidget.tsx b/frontend/components/dashboard/widgets/ExchangeWidget.tsx
index 9369eb83..d9d9b63b 100644
--- a/frontend/components/dashboard/widgets/ExchangeWidget.tsx
+++ b/frontend/components/dashboard/widgets/ExchangeWidget.tsx
@@ -251,9 +251,9 @@ export default function ExchangeWidget({
             </div>
             
             <div className="flex items-center justify-center gap-2">
-              <div className="h-px flex-1 bg-gradient-to-r from-transparent via-border to-transparent" />
+              <div className="h-px flex-1 bg-border" />
               <span className="text-xs text-muted-foreground">▼</span>
-              <div className="h-px flex-1 bg-gradient-to-r from-transparent via-border to-transparent" />
+              <div className="h-px flex-1 bg-border" />
             </div>
 
             <div className="flex items-center gap-2">
diff --git a/frontend/components/dashboard/widgets/ListSummaryWidget.tsx b/frontend/components/dashboard/widgets/ListSummaryWidget.tsx
index 4bb1f1d5..6ab2edeb 100644
--- a/frontend/components/dashboard/widgets/ListSummaryWidget.tsx
+++ b/frontend/components/dashboard/widgets/ListSummaryWidget.tsx
@@ -249,7 +249,7 @@ export default function ListSummaryWidget({ element }: ListSummaryWidgetProps) {
   }
 
   return (
-    <div className="flex h-full w-full flex-col overflow-hidden bg-gradient-to-br from-background to-primary/10 p-2">
+    <div className="flex h-full w-full flex-col overflow-hidden bg-card p-2">
       {/* 헤더 */}
       <div className="mb-2 flex flex-shrink-0 items-center justify-between">
         <div className="flex-1">
diff --git a/frontend/components/dashboard/widgets/ListTestWidget.tsx b/frontend/components/dashboard/widgets/ListTestWidget.tsx
index d1303d10..bc735833 100644
--- a/frontend/components/dashboard/widgets/ListTestWidget.tsx
+++ b/frontend/components/dashboard/widgets/ListTestWidget.tsx
@@ -212,16 +212,16 @@ export function ListTestWidget({ element }: ListTestWidgetProps) {
   const renderIcon = (icon?: string, color?: string) => {
     const colorClass =
       color === "blue"
-        ? "text-blue-600"
+        ? "text-primary"
         : color === "orange"
-          ? "text-orange-600"
+          ? "text-amber-600"
           : color === "green"
-            ? "text-green-600"
+            ? "text-emerald-600"
             : color === "red"
-              ? "text-red-600"
+              ? "text-destructive"
               : color === "purple"
                 ? "text-purple-600"
-                : "text-gray-600";
+                : "text-muted-foreground";
 
     switch (icon) {
       case "truck":
@@ -241,16 +241,16 @@ export function ListTestWidget({ element }: ListTestWidgetProps) {
   const renderFieldGroup = (group: FieldGroup, groupData: Record<string, any>) => {
     const colorClass =
       group.color === "blue"
-        ? "text-blue-600"
+        ? "text-primary"
         : group.color === "orange"
-          ? "text-orange-600"
+          ? "text-amber-600"
           : group.color === "green"
-            ? "text-green-600"
+            ? "text-emerald-600"
             : group.color === "red"
-              ? "text-red-600"
+              ? "text-destructive"
               : group.color === "purple"
                 ? "text-purple-600"
-                : "text-gray-600";
+                : "text-muted-foreground";
 
     return (
       <div key={group.id} className="rounded-lg border p-4">
diff --git a/frontend/components/dashboard/widgets/MaintenanceWidget.tsx b/frontend/components/dashboard/widgets/MaintenanceWidget.tsx
index fd2d3723..530ae12e 100644
--- a/frontend/components/dashboard/widgets/MaintenanceWidget.tsx
+++ b/frontend/components/dashboard/widgets/MaintenanceWidget.tsx
@@ -115,7 +115,7 @@ export default function MaintenanceWidget() {
   };
 
   return (
-    <div className="flex h-full flex-col bg-gradient-to-br from-background to-primary/10">
+    <div className="flex h-full flex-col bg-card">
       {/* 헤더 */}
       <div className="border-b border-border bg-background px-4 py-3">
         <div className="mb-3 flex items-center justify-between">
diff --git a/frontend/components/dashboard/widgets/MapTestWidgetV2.tsx b/frontend/components/dashboard/widgets/MapTestWidgetV2.tsx
index 151c7eff..5a546dbf 100644
--- a/frontend/components/dashboard/widgets/MapTestWidgetV2.tsx
+++ b/frontend/components/dashboard/widgets/MapTestWidgetV2.tsx
@@ -1352,8 +1352,8 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
 
           {/* 이동경로 날짜 선택 */}
           {selectedUserId && (
-            <div className="flex items-center gap-1 rounded border bg-blue-50 px-2 py-1">
-              <span className="text-xs text-blue-600">🛣️</span>
+            <div className="flex items-center gap-1 rounded border bg-primary/10 px-2 py-1">
+              <span className="text-xs text-primary">🛣️</span>
               <input
                 type="date"
                 value={routeDate}
@@ -1363,10 +1363,10 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
                     loadRoute(selectedUserId, e.target.value);
                   }
                 }}
-                className="h-6 rounded border-none bg-transparent px-1 text-xs text-blue-600 focus:outline-none"
+                className="h-6 rounded border-none bg-transparent px-1 text-xs text-primary focus:outline-none"
               />
-              <span className="text-xs text-blue-600">({routePoints.length}개)</span>
-              <button onClick={clearRoute} className="ml-1 text-xs text-blue-400 hover:text-blue-600">
+              <span className="text-xs text-primary">({routePoints.length}개)</span>
+              <button onClick={clearRoute} className="ml-1 text-xs text-primary/80 hover:text-primary">
                 ✕
               </button>
             </div>
@@ -1494,15 +1494,15 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
                         const parsed = JSON.parse(matchingPolygon.description);
                         popupContent = `
                           <div class="min-w-[200px]">
-                            ${matchingPolygon.source ? `<div class="mb-2 border-b pb-2"><div class="text-gray-500 text-xs">📡 ${matchingPolygon.source}</div></div>` : ""}
-                            <div class="bg-gray-100 rounded p-2">
-                              <div class="text-gray-900 mb-1 text-xs font-semibold">상세 정보</div>
+                            ${matchingPolygon.source ? `<div class="mb-2 border-b pb-2"><div class="text-muted-foreground text-xs">📡 ${matchingPolygon.source}</div></div>` : ""}
+                            <div class="bg-muted rounded p-2">
+                              <div class="text-foreground mb-1 text-xs font-semibold">상세 정보</div>
                               <div class="space-y-2">
                                 ${popupFields
                                   .map((field) => {
                                     const value = parsed[field.fieldName];
                                     if (value === undefined || value === null) return "";
-                                    return `<div class="text-xs"><span class="text-gray-600 font-medium">${field.label}:</span> <span class="text-gray-900">${value}</span></div>`;
+                                    return `<div class="text-xs"><span class="text-muted-foreground font-medium">${field.label}:</span> <span class="text-foreground">${value}</span></div>`;
                                   })
                                   .join("")}
                               </div>
@@ -1980,7 +1980,7 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
                                   <button
                                     onClick={() => loadTripInfo(identifier)}
                                     disabled={tripInfoLoading === identifier}
-                                    className="w-full rounded bg-gray-100 px-2 py-1.5 text-xs text-gray-700 hover:bg-gray-200 disabled:opacity-50"
+                                    className="w-full rounded bg-muted px-2 py-1.5 text-xs text-foreground hover:bg-muted/80 disabled:opacity-50"
                                   >
                                     {tripInfoLoading === identifier ? "로딩 중..." : "📊 운행/공차 정보 보기"}
                                   </button>
@@ -1996,10 +1996,10 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
                                 {/* 운행 정보 */}
                                 {hasTripInfo && (
                                   <div className="mb-2">
-                                    <div className="text-xs font-semibold text-blue-600 mb-1">🚛 최근 운행</div>
-                                    <div className="bg-blue-50 rounded p-2 space-y-1">
+                                    <div className="text-xs font-semibold text-primary mb-1">🚛 최근 운행</div>
+                                    <div className="bg-primary/10 rounded p-2 space-y-1">
                                       {(info.last_trip_start || info.last_trip_end) && (
-                                        <div className="text-[10px] text-gray-600">
+                                        <div className="text-[10px] text-muted-foreground">
                                           <span className="font-medium">시간:</span>{" "}
                                           {formatDateTime(info.last_trip_start)} ~ {formatDateTime(info.last_trip_end)}
                                         </div>
@@ -2007,20 +2007,20 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
                                       <div className="flex gap-3 text-[10px]">
                                         {info.last_trip_distance !== undefined && info.last_trip_distance !== null && (
                                           <span>
-                                            <span className="font-medium text-gray-600">거리:</span>{" "}
-                                            <span className="text-blue-700 font-semibold">{formatDistance(info.last_trip_distance)}</span>
+                                            <span className="font-medium text-muted-foreground">거리:</span>{" "}
+                                            <span className="text-primary font-semibold">{formatDistance(info.last_trip_distance)}</span>
                                           </span>
                                         )}
                                         {info.last_trip_time !== undefined && info.last_trip_time !== null && (
                                           <span>
-                                            <span className="font-medium text-gray-600">소요:</span>{" "}
-                                            <span className="text-blue-700 font-semibold">{formatTime(info.last_trip_time)}</span>
+                                            <span className="font-medium text-muted-foreground">소요:</span>{" "}
+                                            <span className="text-primary font-semibold">{formatTime(info.last_trip_time)}</span>
                                           </span>
                                         )}
                                       </div>
                                       {/* 출발지/도착지 */}
                                       {(info.departure || info.arrival) && (
-                                        <div className="text-[10px] text-gray-600 pt-1 border-t border-blue-100">
+                                        <div className="text-[10px] text-muted-foreground pt-1 border-t border-primary/10">
                                           {info.departure && <span>출발: {info.departure}</span>}
                                           {info.departure && info.arrival && " → "}
                                           {info.arrival && <span>도착: {info.arrival}</span>}
@@ -2033,10 +2033,10 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
                                 {/* 공차 정보 */}
                                 {hasEmptyTripInfo && (
                                   <div>
-                                    <div className="text-xs font-semibold text-orange-600 mb-1">📦 최근 공차</div>
-                                    <div className="bg-orange-50 rounded p-2 space-y-1">
+                                    <div className="text-xs font-semibold text-amber-600 mb-1">📦 최근 공차</div>
+                                    <div className="bg-amber-50 rounded p-2 space-y-1">
                                       {(info.last_empty_start || info.last_empty_end) && (
-                                        <div className="text-[10px] text-gray-600">
+                                        <div className="text-[10px] text-muted-foreground">
                                           <span className="font-medium">시간:</span>{" "}
                                           {formatDateTime(info.last_empty_start)} ~ {formatDateTime(info.last_empty_end)}
                                         </div>
@@ -2044,13 +2044,13 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
                                       <div className="flex gap-3 text-[10px]">
                                         {info.last_empty_distance !== undefined && info.last_empty_distance !== null && (
                                           <span>
-                                            <span className="font-medium text-gray-600">거리:</span>{" "}
+                                            <span className="font-medium text-muted-foreground">거리:</span>{" "}
                                             <span className="text-orange-700 font-semibold">{formatDistance(info.last_empty_distance)}</span>
                                           </span>
                                         )}
                                         {info.last_empty_time !== undefined && info.last_empty_time !== null && (
                                           <span>
-                                            <span className="font-medium text-gray-600">소요:</span>{" "}
+                                            <span className="font-medium text-muted-foreground">소요:</span>{" "}
                                             <span className="text-orange-700 font-semibold">{formatTime(info.last_empty_time)}</span>
                                           </span>
                                         )}
@@ -2085,7 +2085,7 @@ export default function MapTestWidgetV2({ element }: MapTestWidgetV2Props) {
                                   <button
                                     onClick={() => loadRoute(visibleUserId)}
                                     disabled={routeLoading}
-                                    className="w-full rounded bg-blue-500 px-2 py-1 text-xs text-white hover:bg-blue-600 disabled:opacity-50"
+                                    className="w-full rounded bg-primary px-2 py-1 text-xs text-white hover:bg-primary disabled:opacity-50"
                                   >
                                     {routeLoading && selectedUserId === visibleUserId ? "로딩 중..." : "🛣️ 이동경로 보기"}
                                   </button>
diff --git a/frontend/components/dashboard/widgets/StatusSummaryWidget.tsx b/frontend/components/dashboard/widgets/StatusSummaryWidget.tsx
index a5387ea4..3fe1c427 100644
--- a/frontend/components/dashboard/widgets/StatusSummaryWidget.tsx
+++ b/frontend/components/dashboard/widgets/StatusSummaryWidget.tsx
@@ -53,9 +53,7 @@ const statusTranslations: { [key: string]: string } = {
   maintenance: "정비중",
 
   // 기사 관련 (존중하는 표현)
-  waiting: "대기중",
   resting: "휴식중",
-  unavailable: "운행불가",
 
   // 기사 평가
   excellent: "우수",
@@ -141,7 +139,7 @@ export default function StatusSummaryWidget({
   element,
   title = "상태 요약",
   icon = "📊",
-  bgGradient = "from-background to-primary/10",
+  bgGradient = "",
   statusConfig,
 }: StatusSummaryWidgetProps) {
   const [statusData, setStatusData] = useState<StatusData[]>([]);
@@ -353,7 +351,7 @@ export default function StatusSummaryWidget({
   const displayTitle = element.customTitle || (tableName ? `${translateTableName(tableName)} 현황` : title);
 
   return (
-    <div className={`flex h-full w-full flex-col overflow-hidden bg-gradient-to-br ${bgGradient} p-2`}>
+    <div className="flex h-full w-full flex-col overflow-hidden bg-card p-2">
       {/* 헤더 */}
       <div className="mb-2 flex flex-shrink-0 items-center justify-between">
         <div className="flex-1">
diff --git a/frontend/components/dashboard/widgets/VehicleMapOnlyWidget.tsx b/frontend/components/dashboard/widgets/VehicleMapOnlyWidget.tsx
index 6234c984..dd73e6dd 100644
--- a/frontend/components/dashboard/widgets/VehicleMapOnlyWidget.tsx
+++ b/frontend/components/dashboard/widgets/VehicleMapOnlyWidget.tsx
@@ -357,7 +357,7 @@ export default function VehicleMapOnlyWidget({ element, refreshInterval = 30000
                           <button
                             onClick={() => loadRoute(vehicle)}
                             disabled={isRouteLoading}
-                            className="w-full rounded bg-blue-500 px-2 py-1 text-xs text-white hover:bg-blue-600 disabled:opacity-50"
+                            className="w-full rounded bg-primary px-2 py-1 text-xs text-white hover:bg-primary disabled:opacity-50"
                           >
                             {isRouteLoading && selectedVehicle?.id === vehicle.id
                               ? "로딩 중..."
@@ -391,7 +391,7 @@ export default function VehicleMapOnlyWidget({ element, refreshInterval = 30000
 
           {/* 이동경로 정보 표시 - 상단으로 이동하여 주석 처리 */}
           {/* {selectedVehicle && routePoints.length > 0 && (
-            <div className="absolute bottom-2 right-2 z-[1000] rounded-lg bg-blue-500/90 p-2 shadow-lg backdrop-blur-sm">
+            <div className="absolute bottom-2 right-2 z-[1000] rounded-lg bg-primary/90 p-2 shadow-lg backdrop-blur-sm">
               <div className="flex items-center gap-2">
                 <div className="text-xs text-white">
                   <div className="font-semibold">🛣️ {selectedVehicle.name} 이동경로</div>
diff --git a/frontend/components/dataflow/ConnectionSetupModal.tsx b/frontend/components/dataflow/ConnectionSetupModal.tsx
index 9b6482a4..d2ddf035 100644
--- a/frontend/components/dataflow/ConnectionSetupModal.tsx
+++ b/frontend/components/dataflow/ConnectionSetupModal.tsx
@@ -733,13 +733,13 @@ export const ConnectionSetupModal: React.FC<ConnectionSetupModalProps> = ({
         <AlertDialogContent>
           <AlertDialogHeader>
             <AlertDialogTitle className="flex items-center gap-2">
-              <CheckCircle className="h-5 w-5 text-green-500" />
+              <CheckCircle className="h-5 w-5 text-emerald-500" />
               연결 생성 완료
             </AlertDialogTitle>
             <AlertDialogDescription className="text-base">
-              <span className="font-medium text-green-600">{createdConnectionName}</span> 연결이 생성되었습니다.
+              <span className="font-medium text-emerald-600">{createdConnectionName}</span> 연결이 생성되었습니다.
               <br />
-              <span className="mt-2 block text-sm text-gray-500">
+              <span className="mt-2 block text-sm text-muted-foreground">
                 생성된 연결은 데이터플로우 다이어그램에서 확인할 수 있습니다.
               </span>
             </AlertDialogDescription>
diff --git a/frontend/components/dataflow/DataFlowDesigner.tsx b/frontend/components/dataflow/DataFlowDesigner.tsx
index 5b9989a4..64c7576a 100644
--- a/frontend/components/dataflow/DataFlowDesigner.tsx
+++ b/frontend/components/dataflow/DataFlowDesigner.tsx
@@ -800,7 +800,7 @@ export const DataFlowDesigner: React.FC<DataFlowDesignerProps> = ({
   ]);
 
   return (
-    <div className="data-flow-designer h-screen bg-gray-100">
+    <div className="data-flow-designer h-screen bg-muted">
       <div className="flex h-full">
         {/* 사이드바 */}
         <DataFlowSidebar
@@ -892,12 +892,12 @@ export const DataFlowDesigner: React.FC<DataFlowDesignerProps> = ({
           {/* 안내 메시지 */}
           {nodes.length === 0 && (
             <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-              <div className="text-center text-gray-500">
+              <div className="text-center text-muted-foreground">
                 <div className="mb-2 text-2xl">📊</div>
                 <div className="mb-1 text-lg font-medium">테이블 간 데이터 관계 설정을 시작하세요</div>
                 <div className="text-sm">
                   <div>왼쪽 사이드바에서 테이블을 더블클릭하여 추가하세요</div>
-                  <div className="mt-1 text-xs text-gray-400">테이블 선택 후 Del 키로 삭제 가능</div>
+                  <div className="mt-1 text-xs text-muted-foreground/70">테이블 선택 후 Del 키로 삭제 가능</div>
                 </div>
               </div>
             </div>
diff --git a/frontend/components/dataflow/DataFlowList.tsx b/frontend/components/dataflow/DataFlowList.tsx
index af06af65..42c1c8e0 100644
--- a/frontend/components/dataflow/DataFlowList.tsx
+++ b/frontend/components/dataflow/DataFlowList.tsx
@@ -3,8 +3,6 @@
 import { useState, useEffect, useCallback } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -19,13 +17,13 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
-import { MoreHorizontal, Trash2, Copy, Plus, Search, Network, Database, Calendar, User } from "lucide-react";
+import { MoreHorizontal, Trash2, Copy, Plus, Search, Network, Calendar } from "lucide-react";
 import { toast } from "sonner";
 import { showErrorToast } from "@/lib/utils/toastUtils";
 import { useAuth } from "@/hooks/useAuth";
 import { apiClient } from "@/lib/api/client";
+import { ResponsiveDataView, RDVColumn, RDVCardField } from "@/components/common/ResponsiveDataView";
 
-// 노드 플로우 타입 정의
 interface NodeFlow {
   flowId: number;
   flowName: string;
@@ -44,12 +42,9 @@ export default function DataFlowList({ onLoadFlow }: DataFlowListProps) {
   const [loading, setLoading] = useState(true);
   const [searchTerm, setSearchTerm] = useState("");
 
-  // 모달 상태
-  const [showCopyModal, setShowCopyModal] = useState(false);
   const [showDeleteModal, setShowDeleteModal] = useState(false);
   const [selectedFlow, setSelectedFlow] = useState<NodeFlow | null>(null);
 
-  // 노드 플로우 목록 로드
   const loadFlows = useCallback(async () => {
     try {
       setLoading(true);
@@ -68,23 +63,19 @@ export default function DataFlowList({ onLoadFlow }: DataFlowListProps) {
     }
   }, []);
 
-  // 플로우 목록 로드
   useEffect(() => {
     loadFlows();
   }, [loadFlows]);
 
-  // 플로우 삭제
   const handleDelete = (flow: NodeFlow) => {
     setSelectedFlow(flow);
     setShowDeleteModal(true);
   };
 
-  // 플로우 복사
   const handleCopy = async (flow: NodeFlow) => {
     try {
       setLoading(true);
 
-      // 원본 플로우 데이터 가져오기
       const response = await apiClient.get(`/dataflow/node-flows/${flow.flowId}`);
 
       if (!response.data.success) {
@@ -93,7 +84,6 @@ export default function DataFlowList({ onLoadFlow }: DataFlowListProps) {
 
       const originalFlow = response.data.data;
 
-      // 복사본 저장
       const copyResponse = await apiClient.post("/dataflow/node-flows", {
         flowName: `${flow.flowName} (복사본)`,
         flowDescription: flow.flowDescription,
@@ -114,7 +104,6 @@ export default function DataFlowList({ onLoadFlow }: DataFlowListProps) {
     }
   };
 
-  // 삭제 확인
   const handleConfirmDelete = async () => {
     if (!selectedFlow) return;
 
@@ -138,18 +127,95 @@ export default function DataFlowList({ onLoadFlow }: DataFlowListProps) {
     }
   };
 
-  // 검색 필터링
   const filteredFlows = flows.filter(
     (flow) =>
       flow.flowName.toLowerCase().includes(searchTerm.toLowerCase()) ||
       flow.flowDescription.toLowerCase().includes(searchTerm.toLowerCase()),
   );
 
+  // DropdownMenu 렌더러 (테이블 + 카드 공통)
+  const renderDropdownMenu = (flow: NodeFlow) => (
+    <div onClick={(e) => e.stopPropagation()}>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" size="icon" className="h-8 w-8">
+            <MoreHorizontal className="h-4 w-4" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <DropdownMenuItem onClick={() => onLoadFlow(flow.flowId)}>
+            <Network className="mr-2 h-4 w-4" />
+            불러오기
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={() => handleCopy(flow)}>
+            <Copy className="mr-2 h-4 w-4" />
+            복사
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={() => handleDelete(flow)} className="text-destructive">
+            <Trash2 className="mr-2 h-4 w-4" />
+            삭제
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+
+  const columns: RDVColumn<NodeFlow>[] = [
+    {
+      key: "flowName",
+      label: "플로우명",
+      render: (_val, flow) => (
+        <div className="flex items-center font-medium">
+          <Network className="mr-2 h-4 w-4 text-primary" />
+          {flow.flowName}
+        </div>
+      ),
+    },
+    {
+      key: "flowDescription",
+      label: "설명",
+      render: (_val, flow) => (
+        <span className="text-muted-foreground">{flow.flowDescription || "설명 없음"}</span>
+      ),
+    },
+    {
+      key: "createdAt",
+      label: "생성일",
+      render: (_val, flow) => (
+        <span className="flex items-center text-muted-foreground">
+          <Calendar className="mr-1 h-3 w-3" />
+          {new Date(flow.createdAt).toLocaleDateString()}
+        </span>
+      ),
+    },
+    {
+      key: "updatedAt",
+      label: "최근 수정",
+      hideOnMobile: true,
+      render: (_val, flow) => (
+        <span className="flex items-center text-muted-foreground">
+          <Calendar className="mr-1 h-3 w-3" />
+          {new Date(flow.updatedAt).toLocaleDateString()}
+        </span>
+      ),
+    },
+  ];
+
+  const cardFields: RDVCardField<NodeFlow>[] = [
+    {
+      label: "생성일",
+      render: (flow) => new Date(flow.createdAt).toLocaleDateString(),
+    },
+    {
+      label: "최근 수정",
+      render: (flow) => new Date(flow.updatedAt).toLocaleDateString(),
+    },
+  ];
+
   return (
     <div className="space-y-4">
       {/* 검색 및 액션 영역 */}
       <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
-        {/* 검색 영역 */}
         <div className="flex flex-col gap-4 sm:flex-row sm:items-center">
           <div className="w-full sm:w-[400px]">
             <div className="relative">
@@ -164,7 +230,6 @@ export default function DataFlowList({ onLoadFlow }: DataFlowListProps) {
           </div>
         </div>
 
-        {/* 액션 버튼 영역 */}
         <div className="flex items-center gap-4">
           <div className="text-sm text-muted-foreground">
             총 <span className="font-semibold text-foreground">{filteredFlows.length}</span> 건
@@ -176,71 +241,8 @@ export default function DataFlowList({ onLoadFlow }: DataFlowListProps) {
         </div>
       </div>
 
-      {loading ? (
-        <>
-          {/* 데스크톱 테이블 스켈레톤 */}
-          <div className="hidden bg-card shadow-sm lg:block">
-            <Table>
-              <TableHeader>
-                <TableRow className="bg-background">
-                  <TableHead className="h-12 px-6 py-3 text-sm font-semibold">플로우명</TableHead>
-                  <TableHead className="h-12 px-6 py-3 text-sm font-semibold">설명</TableHead>
-                  <TableHead className="h-12 px-6 py-3 text-sm font-semibold">생성일</TableHead>
-                  <TableHead className="h-12 px-6 py-3 text-sm font-semibold">최근 수정</TableHead>
-                  <TableHead className="h-12 px-6 py-3 text-right text-sm font-semibold">작업</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {Array.from({ length: 5 }).map((_, index) => (
-                  <TableRow key={index} className="bg-background">
-                    <TableCell className="h-16 px-6 py-3">
-                      <div className="h-4 w-32 animate-pulse rounded bg-muted"></div>
-                    </TableCell>
-                    <TableCell className="h-16 px-6 py-3">
-                      <div className="h-4 w-48 animate-pulse rounded bg-muted"></div>
-                    </TableCell>
-                    <TableCell className="h-16 px-6 py-3">
-                      <div className="h-4 w-24 animate-pulse rounded bg-muted"></div>
-                    </TableCell>
-                    <TableCell className="h-16 px-6 py-3">
-                      <div className="h-4 w-24 animate-pulse rounded bg-muted"></div>
-                    </TableCell>
-                    <TableCell className="h-16 px-6 py-3">
-                      <div className="flex justify-end">
-                        <div className="h-8 w-8 animate-pulse rounded bg-muted"></div>
-                      </div>
-                    </TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          </div>
-
-          {/* 모바일/태블릿 카드 스켈레톤 */}
-          <div className="grid gap-4 sm:grid-cols-2 lg:hidden">
-            {Array.from({ length: 4 }).map((_, index) => (
-              <div key={index} className="rounded-lg border bg-card p-4 shadow-sm">
-                <div className="mb-4 flex items-start justify-between">
-                  <div className="flex-1 space-y-2">
-                    <div className="h-5 w-32 animate-pulse rounded bg-muted"></div>
-                    <div className="h-4 w-24 animate-pulse rounded bg-muted"></div>
-                  </div>
-                </div>
-                <div className="space-y-2 border-t pt-4">
-                  <div className="flex justify-between">
-                    <div className="h-4 w-16 animate-pulse rounded bg-muted"></div>
-                    <div className="h-4 w-24 animate-pulse rounded bg-muted"></div>
-                  </div>
-                  <div className="flex justify-between">
-                    <div className="h-4 w-16 animate-pulse rounded bg-muted"></div>
-                    <div className="h-4 w-24 animate-pulse rounded bg-muted"></div>
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-        </>
-      ) : filteredFlows.length === 0 ? (
+      {/* 빈 상태: 커스텀 Empty UI */}
+      {!loading && filteredFlows.length === 0 ? (
         <div className="flex h-64 flex-col items-center justify-center rounded-lg border bg-card shadow-sm">
           <div className="flex flex-col items-center gap-2 text-center">
             <div className="flex h-16 w-16 items-center justify-center rounded-full bg-muted">
@@ -257,135 +259,26 @@ export default function DataFlowList({ onLoadFlow }: DataFlowListProps) {
           </div>
         </div>
       ) : (
-        <>
-          {/* 데스크톱 테이블 뷰 (lg 이상) */}
-          <div className="hidden bg-card shadow-sm lg:block">
-            <Table>
-              <TableHeader>
-                <TableRow className="bg-background">
-                  <TableHead className="h-12 px-6 py-3 text-sm font-semibold">플로우명</TableHead>
-                  <TableHead className="h-12 px-6 py-3 text-sm font-semibold">설명</TableHead>
-                  <TableHead className="h-12 px-6 py-3 text-sm font-semibold">생성일</TableHead>
-                  <TableHead className="h-12 px-6 py-3 text-sm font-semibold">최근 수정</TableHead>
-                  <TableHead className="h-12 px-6 py-3 text-right text-sm font-semibold">작업</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {filteredFlows.map((flow) => (
-                  <TableRow
-                    key={flow.flowId}
-                    className="bg-background transition-colors hover:bg-muted/50 cursor-pointer"
-                    onClick={() => onLoadFlow(flow.flowId)}
-                  >
-                    <TableCell className="h-16 px-6 py-3 text-sm">
-                      <div className="flex items-center font-medium">
-                        <Network className="mr-2 h-4 w-4 text-primary" />
-                        {flow.flowName}
-                      </div>
-                    </TableCell>
-                    <TableCell className="h-16 px-6 py-3 text-sm">
-                      <div className="text-muted-foreground">{flow.flowDescription || "설명 없음"}</div>
-                    </TableCell>
-                    <TableCell className="h-16 px-6 py-3 text-sm">
-                      <div className="flex items-center text-muted-foreground">
-                        <Calendar className="mr-1 h-3 w-3" />
-                        {new Date(flow.createdAt).toLocaleDateString()}
-                      </div>
-                    </TableCell>
-                    <TableCell className="h-16 px-6 py-3 text-sm">
-                      <div className="flex items-center text-muted-foreground">
-                        <Calendar className="mr-1 h-3 w-3" />
-                        {new Date(flow.updatedAt).toLocaleDateString()}
-                      </div>
-                    </TableCell>
-                    <TableCell className="h-16 px-6 py-3" onClick={(e) => e.stopPropagation()}>
-                      <div className="flex justify-end">
-                        <DropdownMenu>
-                          <DropdownMenuTrigger asChild>
-                            <Button variant="ghost" className="h-8 w-8 p-0">
-                              <MoreHorizontal className="h-4 w-4" />
-                            </Button>
-                          </DropdownMenuTrigger>
-                          <DropdownMenuContent align="end">
-                            <DropdownMenuItem onClick={() => onLoadFlow(flow.flowId)}>
-                              <Network className="mr-2 h-4 w-4" />
-                              불러오기
-                            </DropdownMenuItem>
-                            <DropdownMenuItem onClick={() => handleCopy(flow)}>
-                              <Copy className="mr-2 h-4 w-4" />
-                              복사
-                            </DropdownMenuItem>
-                            <DropdownMenuItem onClick={() => handleDelete(flow)} className="text-destructive">
-                              <Trash2 className="mr-2 h-4 w-4" />
-                              삭제
-                            </DropdownMenuItem>
-                          </DropdownMenuContent>
-                        </DropdownMenu>
-                      </div>
-                    </TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          </div>
-
-          {/* 모바일/태블릿 카드 뷰 (lg 미만) */}
-          <div className="grid gap-4 sm:grid-cols-2 lg:hidden">
-            {filteredFlows.map((flow) => (
-              <div
-                key={flow.flowId}
-                className="cursor-pointer rounded-lg border bg-card p-4 shadow-sm transition-colors hover:bg-muted/50"
-                onClick={() => onLoadFlow(flow.flowId)}
-              >
-                {/* 헤더 */}
-                <div className="mb-4 flex items-start justify-between">
-                  <div className="flex-1">
-                    <div className="flex items-center">
-                      <Network className="mr-2 h-4 w-4 text-primary" />
-                      <h3 className="text-base font-semibold">{flow.flowName}</h3>
-                    </div>
-                    <p className="mt-1 text-sm text-muted-foreground">{flow.flowDescription || "설명 없음"}</p>
-                  </div>
-                  <div onClick={(e) => e.stopPropagation()}>
-                    <DropdownMenu>
-                      <DropdownMenuTrigger asChild>
-                        <Button variant="ghost" size="icon" className="h-8 w-8">
-                          <MoreHorizontal className="h-4 w-4" />
-                        </Button>
-                      </DropdownMenuTrigger>
-                      <DropdownMenuContent align="end">
-                        <DropdownMenuItem onClick={() => onLoadFlow(flow.flowId)}>
-                          <Network className="mr-2 h-4 w-4" />
-                          불러오기
-                        </DropdownMenuItem>
-                        <DropdownMenuItem onClick={() => handleCopy(flow)}>
-                          <Copy className="mr-2 h-4 w-4" />
-                          복사
-                        </DropdownMenuItem>
-                        <DropdownMenuItem onClick={() => handleDelete(flow)} className="text-destructive">
-                          <Trash2 className="mr-2 h-4 w-4" />
-                          삭제
-                        </DropdownMenuItem>
-                      </DropdownMenuContent>
-                    </DropdownMenu>
-                  </div>
-                </div>
-
-                {/* 정보 */}
-                <div className="space-y-2 border-t pt-4">
-                  <div className="flex justify-between text-sm">
-                    <span className="text-muted-foreground">생성일</span>
-                    <span className="font-medium">{new Date(flow.createdAt).toLocaleDateString()}</span>
-                  </div>
-                  <div className="flex justify-between text-sm">
-                    <span className="text-muted-foreground">최근 수정</span>
-                    <span className="font-medium">{new Date(flow.updatedAt).toLocaleDateString()}</span>
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-        </>
+        <ResponsiveDataView<NodeFlow>
+          data={filteredFlows}
+          columns={columns}
+          keyExtractor={(flow) => String(flow.flowId)}
+          isLoading={loading}
+          skeletonCount={5}
+          cardTitle={(flow) => (
+            <span className="flex items-center">
+              <Network className="mr-2 h-4 w-4 text-primary" />
+              {flow.flowName}
+            </span>
+          )}
+          cardSubtitle={(flow) => flow.flowDescription || "설명 없음"}
+          cardHeaderRight={renderDropdownMenu}
+          cardFields={cardFields}
+          actionsLabel="작업"
+          actionsWidth="80px"
+          renderActions={renderDropdownMenu}
+          onRowClick={(flow) => onLoadFlow(flow.flowId)}
+        />
       )}
 
       {/* 삭제 확인 모달 */}
diff --git a/frontend/components/dataflow/DataFlowSidebar.tsx b/frontend/components/dataflow/DataFlowSidebar.tsx
index f38f4c3a..0b9162f6 100644
--- a/frontend/components/dataflow/DataFlowSidebar.tsx
+++ b/frontend/components/dataflow/DataFlowSidebar.tsx
@@ -35,9 +35,9 @@ export const DataFlowSidebar: React.FC<DataFlowSidebarProps> = ({
   getSelectedTableNames,
 }) => {
   return (
-    <div className="w-80 border-r border-gray-200 bg-white shadow-lg">
+    <div className="w-80 border-r border-border bg-white shadow-lg">
       <div className="p-6">
-        <h2 className="mb-6 text-xl font-bold text-gray-800">테이블 간 데이터 관계 설정</h2>
+        <h2 className="mb-6 text-xl font-bold text-foreground">테이블 간 데이터 관계 설정</h2>
 
         {/* 테이블 선택기 */}
         <TableSelector companyCode={companyCode} onTableAdd={onTableAdd} selectedTables={getSelectedTableNames()} />
@@ -46,7 +46,7 @@ export const DataFlowSidebar: React.FC<DataFlowSidebarProps> = ({
         <div className="space-y-3">
           <button
             onClick={onRemoveOrphanedNodes}
-            className="w-full rounded-lg bg-orange-500 p-3 font-medium text-white transition-colors hover:bg-orange-600"
+            className="w-full rounded-lg bg-amber-500 p-3 font-medium text-white transition-colors hover:bg-orange-600"
             disabled={nodes.length === 0}
           >
             🧹 고립된 노드 정리
@@ -54,14 +54,14 @@ export const DataFlowSidebar: React.FC<DataFlowSidebarProps> = ({
 
           <button
             onClick={onClearAll}
-            className="w-full rounded-lg bg-destructive/100 p-3 font-medium text-white transition-colors hover:bg-red-600"
+            className="w-full rounded-lg bg-destructive/100 p-3 font-medium text-white transition-colors hover:bg-destructive"
           >
             🗑️ 전체 삭제
           </button>
 
           <button
             onClick={onOpenSaveModal}
-            className={`w-full rounded-lg bg-green-500 p-3 font-medium text-white transition-colors hover:bg-green-600 ${
+            className={`w-full rounded-lg bg-emerald-500 p-3 font-medium text-white transition-colors hover:bg-emerald-600 ${
               hasUnsavedChanges ? "animate-pulse" : ""
             }`}
           >
@@ -70,8 +70,8 @@ export const DataFlowSidebar: React.FC<DataFlowSidebarProps> = ({
         </div>
 
         {/* 통계 정보 */}
-        <div className="mt-6 rounded-lg bg-gray-50 p-4">
-          <div className="mb-2 text-sm font-semibold text-gray-700">통계</div>
+        <div className="mt-6 rounded-lg bg-muted p-4">
+          <div className="mb-2 text-sm font-semibold text-foreground">통계</div>
           <div className="space-y-1 text-sm text-muted-foreground">
             <div className="flex justify-between">
               <span>테이블 노드:</span>
@@ -83,7 +83,7 @@ export const DataFlowSidebar: React.FC<DataFlowSidebarProps> = ({
             </div>
             <div className="flex justify-between">
               <span>메모리 관계:</span>
-              <span className="font-medium text-orange-600">{tempRelationships.length}개</span>
+              <span className="font-medium text-amber-600">{tempRelationships.length}개</span>
             </div>
             <div className="flex justify-between">
               <span>관계도 ID:</span>
@@ -98,7 +98,7 @@ export const DataFlowSidebar: React.FC<DataFlowSidebarProps> = ({
               </span>
             </div>
             {hasUnsavedChanges && (
-              <div className="mt-2 text-xs font-medium text-orange-600">⚠️ 저장되지 않은 변경사항이 있습니다</div>
+              <div className="mt-2 text-xs font-medium text-amber-600">⚠️ 저장되지 않은 변경사항이 있습니다</div>
             )}
           </div>
         </div>
diff --git a/frontend/components/dataflow/EdgeInfoPanel.tsx b/frontend/components/dataflow/EdgeInfoPanel.tsx
index 2fcfffd6..676755a2 100644
--- a/frontend/components/dataflow/EdgeInfoPanel.tsx
+++ b/frontend/components/dataflow/EdgeInfoPanel.tsx
@@ -24,7 +24,7 @@ export const EdgeInfoPanel: React.FC<EdgeInfoPanelProps> = ({
 
   return (
     <div
-      className="fixed z-50 rounded-xl border border-gray-200 bg-white shadow-2xl"
+      className="fixed z-50 rounded-xl border border-border bg-white shadow-2xl"
       style={{
         left: position.x - 160,
         top: position.y - 100,
@@ -33,7 +33,7 @@ export const EdgeInfoPanel: React.FC<EdgeInfoPanelProps> = ({
       }}
     >
       {/* 헤더 */}
-      <div className="flex items-center justify-between rounded-t-xl border-b border-gray-200 bg-blue-600 p-4">
+      <div className="flex items-center justify-between rounded-t-xl border-b border-border bg-primary p-4">
         <div className="flex items-center gap-3">
           <div className="flex h-8 w-8 items-center justify-center rounded-full bg-white/20 backdrop-blur-sm">
             <span className="text-sm text-white">🔗</span>
@@ -52,10 +52,10 @@ export const EdgeInfoPanel: React.FC<EdgeInfoPanelProps> = ({
       </div>
 
       {/* 관계 정보 요약 */}
-      <div className="border-b border-gray-100 bg-gray-50 p-3">
+      <div className="border-b border-border bg-muted p-3">
         <div className="flex items-center justify-center gap-4">
           <div className="text-center">
-            <div className="text-xs font-medium tracking-wide text-gray-500 uppercase">연결 유형</div>
+            <div className="text-xs font-medium tracking-wide text-muted-foreground uppercase">연결 유형</div>
             <div className="mt-1 inline-flex items-center rounded-full bg-indigo-100 px-2 py-0.5 text-xs font-semibold text-indigo-800">
               {edgeInfo.connectionType}
             </div>
@@ -68,7 +68,7 @@ export const EdgeInfoPanel: React.FC<EdgeInfoPanelProps> = ({
         {/* From 테이블 */}
         <div className="rounded-lg border-l-4 border-emerald-400 bg-emerald-50 p-3">
           <div className="mb-2 text-xs font-bold tracking-wide text-emerald-700 uppercase">FROM</div>
-          <div className="mb-2 text-base font-bold text-gray-800">{edgeInfo.fromTable}</div>
+          <div className="mb-2 text-base font-bold text-foreground">{edgeInfo.fromTable}</div>
           <div className="space-y-1">
             <div className="flex flex-wrap gap-2">
               {edgeInfo.fromColumns.map((column, index) => (
@@ -89,15 +89,15 @@ export const EdgeInfoPanel: React.FC<EdgeInfoPanelProps> = ({
         </div>
 
         {/* To 테이블 */}
-        <div className="rounded-lg border-l-4 border-blue-400 bg-accent p-3">
-          <div className="mb-2 text-xs font-bold tracking-wide text-blue-700 uppercase">TO</div>
-          <div className="mb-2 text-base font-bold text-gray-800">{edgeInfo.toTable}</div>
+        <div className="rounded-lg border-l-4 border-primary/60 bg-accent p-3">
+          <div className="mb-2 text-xs font-bold tracking-wide text-primary uppercase">TO</div>
+          <div className="mb-2 text-base font-bold text-foreground">{edgeInfo.toTable}</div>
           <div className="space-y-1">
             <div className="flex flex-wrap gap-2">
               {edgeInfo.toColumns.map((column, index) => (
                 <span
                   key={index}
-                  className="inline-flex items-center rounded-md bg-primary/20 px-2.5 py-0.5 text-xs font-medium text-blue-800 ring-1 ring-blue-200"
+                  className="inline-flex items-center rounded-md bg-primary/20 px-2.5 py-0.5 text-xs font-medium text-primary ring-1 ring-primary/20"
                 >
                   {column}
                 </span>
@@ -108,16 +108,16 @@ export const EdgeInfoPanel: React.FC<EdgeInfoPanelProps> = ({
       </div>
 
       {/* 액션 버튼 */}
-      <div className="flex gap-2 border-t border-gray-200 bg-gray-50 p-3">
+      <div className="flex gap-2 border-t border-border bg-muted p-3">
         <button
           onClick={onEdit}
-          className="flex flex-1 items-center justify-center gap-1 rounded-lg bg-blue-600 px-3 py-2 text-xs font-semibold text-white shadow-sm transition-all hover:bg-blue-700 hover:shadow-md"
+          className="flex flex-1 items-center justify-center gap-1 rounded-lg bg-primary px-3 py-2 text-xs font-semibold text-white shadow-sm transition-all hover:bg-primary/90 hover:shadow-md"
         >
           <span>수정</span>
         </button>
         <button
           onClick={onDelete}
-          className="flex flex-1 items-center justify-center gap-1 rounded-lg bg-red-600 px-3 py-2 text-xs font-semibold text-white shadow-sm transition-all hover:bg-red-700 hover:shadow-md"
+          className="flex flex-1 items-center justify-center gap-1 rounded-lg bg-destructive px-3 py-2 text-xs font-semibold text-white shadow-sm transition-all hover:bg-red-700 hover:shadow-md"
         >
           <span>삭제</span>
         </button>
diff --git a/frontend/components/dataflow/RelationshipListModal.tsx b/frontend/components/dataflow/RelationshipListModal.tsx
index fbbc445b..5b3d89b0 100644
--- a/frontend/components/dataflow/RelationshipListModal.tsx
+++ b/frontend/components/dataflow/RelationshipListModal.tsx
@@ -134,18 +134,18 @@ export const RelationshipListModal: React.FC<RelationshipListModalProps> = ({
   };
 
   return (
-    <div className="pointer-events-auto absolute top-4 right-4 z-40 w-80 rounded-xl border border-primary/20 bg-white shadow-lg">
+    <div className="pointer-events-auto absolute top-4 right-4 z-40 w-80 rounded-lg border border-border bg-background shadow-md">
       {/* 헤더 */}
-      <div className="flex items-center justify-between rounded-t-xl border-b border-blue-100 bg-gradient-to-r from-blue-50 to-indigo-50 p-3">
+      <div className="flex items-center justify-between rounded-t-lg border-b border-border bg-muted p-3">
         <div className="flex items-center gap-2">
           <div className="rounded-full bg-primary/20 p-1">
             <span className="text-sm text-primary">🔗</span>
           </div>
-          <div className="text-sm font-semibold text-gray-800">테이블 간 관계 목록</div>
+          <div className="text-sm font-semibold text-foreground">테이블 간 관계 목록</div>
         </div>
         <button
           onClick={onClose}
-          className="flex h-6 w-6 items-center justify-center rounded-full text-gray-400 transition-colors hover:bg-gray-100 hover:text-muted-foreground"
+          className="flex h-6 w-6 items-center justify-center rounded-full text-muted-foreground/70 transition-colors hover:bg-muted hover:text-muted-foreground"
         >
           <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
@@ -159,10 +159,10 @@ export const RelationshipListModal: React.FC<RelationshipListModalProps> = ({
           {relationships.map((relationship) => (
             <div
               key={relationship.id}
-              className="rounded-lg border border-gray-200 p-3 transition-all hover:border-blue-300 hover:bg-accent"
+              className="rounded-lg border border-border p-3 transition-all hover:border-primary/40 hover:bg-accent"
             >
               <div className="mb-1 flex items-center justify-between">
-                <h4 className="text-sm font-medium text-gray-900">
+                <h4 className="text-sm font-medium text-foreground">
                   {relationship.relationshipName || `${relationship.fromTable} → ${relationship.toTable}`}
                 </h4>
                 <div className="flex items-center gap-1">
@@ -172,7 +172,7 @@ export const RelationshipListModal: React.FC<RelationshipListModalProps> = ({
                       e.stopPropagation();
                       handleEdit(relationship);
                     }}
-                    className="flex h-6 w-6 items-center justify-center rounded text-gray-400 hover:bg-primary/20 hover:text-primary"
+                    className="flex h-6 w-6 items-center justify-center rounded text-muted-foreground/70 hover:bg-primary/20 hover:text-primary"
                     title="관계 편집"
                   >
                     <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -190,7 +190,7 @@ export const RelationshipListModal: React.FC<RelationshipListModalProps> = ({
                       e.stopPropagation();
                       handleDelete(relationship);
                     }}
-                    className="flex h-6 w-6 items-center justify-center rounded text-gray-400 hover:bg-destructive/20 hover:text-destructive"
+                    className="flex h-6 w-6 items-center justify-center rounded text-muted-foreground/70 hover:bg-destructive/20 hover:text-destructive"
                     title="관계 삭제"
                   >
                     <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
diff --git a/frontend/components/dataflow/SaveDiagramModal.tsx b/frontend/components/dataflow/SaveDiagramModal.tsx
index af7f004f..53d67afa 100644
--- a/frontend/components/dataflow/SaveDiagramModal.tsx
+++ b/frontend/components/dataflow/SaveDiagramModal.tsx
@@ -161,13 +161,13 @@ const SaveDiagramModal: React.FC<SaveDiagramModalProps> = ({
             </div>
 
             {/* 관계 요약 정보 */}
-            <div className="grid grid-cols-3 gap-4 rounded-lg bg-gray-50 p-4">
+            <div className="grid grid-cols-3 gap-4 rounded-lg bg-muted p-4">
               <div className="text-center">
                 <div className="text-2xl font-bold text-primary">{relationships.length}</div>
                 <div className="text-sm text-muted-foreground">관계 수</div>
               </div>
               <div className="text-center">
-                <div className="text-2xl font-bold text-green-600">{connectedTables.length}</div>
+                <div className="text-2xl font-bold text-emerald-600">{connectedTables.length}</div>
                 <div className="text-sm text-muted-foreground">연결된 테이블</div>
               </div>
               <div className="text-center">
@@ -207,7 +207,7 @@ const SaveDiagramModal: React.FC<SaveDiagramModalProps> = ({
                     {relationships.map((relationship, index) => (
                       <div
                         key={relationship.id || index}
-                        className="flex items-center justify-between rounded-lg border bg-white p-3 hover:bg-gray-50"
+                        className="flex items-center justify-between rounded-lg border bg-white p-3 hover:bg-muted"
                       >
                         <div className="flex-1">
                           <div className="flex items-center gap-2 text-sm">
@@ -234,10 +234,10 @@ const SaveDiagramModal: React.FC<SaveDiagramModalProps> = ({
 
             {/* 관계가 없는 경우 안내 */}
             {relationships.length === 0 && (
-              <div className="py-8 text-center text-gray-500">
+              <div className="py-8 text-center text-muted-foreground">
                 <div className="mb-2 text-4xl">📭</div>
                 <div className="text-sm">생성된 관계가 없습니다.</div>
-                <div className="mt-1 text-xs text-gray-400">테이블을 추가하고 컬럼을 연결해서 관계를 생성해보세요.</div>
+                <div className="mt-1 text-xs text-muted-foreground/70">테이블을 추가하고 컬럼을 연결해서 관계를 생성해보세요.</div>
               </div>
             )}
           </div>
@@ -249,7 +249,7 @@ const SaveDiagramModal: React.FC<SaveDiagramModalProps> = ({
             <Button
               onClick={handleSave}
               disabled={isLoading || relationships.length === 0}
-              className="bg-blue-600 hover:bg-blue-700"
+              className="bg-primary hover:bg-primary/90"
             >
               {isLoading ? (
                 <div className="flex items-center gap-2">
@@ -269,13 +269,13 @@ const SaveDiagramModal: React.FC<SaveDiagramModalProps> = ({
         <AlertDialogContent>
           <AlertDialogHeader>
             <AlertDialogTitle className="flex items-center gap-2">
-              <CheckCircle className="h-5 w-5 text-green-500" />
+              <CheckCircle className="h-5 w-5 text-emerald-500" />
               관계도 저장 완료
             </AlertDialogTitle>
             <AlertDialogDescription className="text-base">
-              <span className="font-medium text-green-600">{savedDiagramName}</span> 관계도가 성공적으로 저장되었습니다.
+              <span className="font-medium text-emerald-600">{savedDiagramName}</span> 관계도가 성공적으로 저장되었습니다.
               <br />
-              <span className="mt-2 block text-sm text-gray-500">
+              <span className="mt-2 block text-sm text-muted-foreground">
                 저장된 관계도는 관리 메뉴에서 확인하고 수정할 수 있습니다.
               </span>
             </AlertDialogDescription>
diff --git a/frontend/components/dataflow/SelectedTablesPanel.tsx b/frontend/components/dataflow/SelectedTablesPanel.tsx
index 9f1f1c55..319051e4 100644
--- a/frontend/components/dataflow/SelectedTablesPanel.tsx
+++ b/frontend/components/dataflow/SelectedTablesPanel.tsx
@@ -24,16 +24,16 @@ export const SelectedTablesPanel: React.FC<SelectedTablesPanelProps> = ({
   canCreateConnection,
 }) => {
   return (
-    <div className="pointer-events-auto absolute top-4 left-4 z-40 w-80 rounded-xl border border-primary/20 bg-white shadow-lg">
+    <div className="pointer-events-auto absolute top-4 left-4 z-40 w-80 rounded-lg border border-border bg-background shadow-md">
       {/* 헤더 */}
-      <div className="flex items-center justify-between rounded-t-xl border-b border-blue-100 bg-gradient-to-r from-blue-50 to-indigo-50 p-3">
+      <div className="flex items-center justify-between rounded-t-lg border-b border-border bg-muted p-3">
         <div className="flex items-center gap-2">
           <div className="flex h-6 w-6 items-center justify-center rounded-full bg-primary/20">
             <span className="text-sm text-primary">📋</span>
           </div>
           <div>
-            <div className="text-sm font-semibold text-gray-800">선택된 테이블</div>
-            <div className="text-xs text-gray-500">
+            <div className="text-sm font-semibold text-foreground">선택된 테이블</div>
+            <div className="text-xs text-muted-foreground">
               {selectedNodes.length === 1
                 ? "FROM 테이블 선택됨"
                 : selectedNodes.length === 2
@@ -44,7 +44,7 @@ export const SelectedTablesPanel: React.FC<SelectedTablesPanelProps> = ({
         </div>
         <button
           onClick={onClose}
-          className="flex h-5 w-5 items-center justify-center rounded-full text-gray-400 hover:bg-gray-100 hover:text-muted-foreground"
+          className="flex h-5 w-5 items-center justify-center rounded-full text-muted-foreground/70 hover:bg-muted hover:text-muted-foreground"
         >
           ✕
         </button>
@@ -64,16 +64,16 @@ export const SelectedTablesPanel: React.FC<SelectedTablesPanelProps> = ({
                 <div
                   className={`rounded-lg p-2 ${
                     index === 0
-                      ? "border-l-4 border-emerald-400 bg-emerald-50"
+                      ? "border-l-4 border-success/60 bg-success/10"
                       : index === 1
-                        ? "border-l-4 border-blue-400 bg-accent"
+                        ? "border-l-4 border-primary/60 bg-accent"
                         : "bg-muted"
                   }`}
                 >
                   <div className="mb-1 flex items-center justify-between">
                     <div
                       className={`text-xs font-medium ${
-                        index === 0 ? "text-emerald-700" : index === 1 ? "text-blue-700" : "text-gray-700"
+                        index === 0 ? "text-success" : index === 1 ? "text-primary" : "text-foreground"
                       }`}
                     >
                       {displayName}
@@ -81,7 +81,7 @@ export const SelectedTablesPanel: React.FC<SelectedTablesPanelProps> = ({
                     {selectedNodes.length === 2 && (
                       <div
                         className={`rounded-full px-2 py-0.5 text-xs font-bold ${
-                          index === 0 ? "bg-emerald-200 text-emerald-800" : "bg-blue-200 text-blue-800"
+                          index === 0 ? "bg-success/20 text-success" : "bg-primary/20 text-primary"
                         }`}
                       >
                         {index === 0 ? "FROM" : "TO"}
@@ -94,7 +94,7 @@ export const SelectedTablesPanel: React.FC<SelectedTablesPanelProps> = ({
                 {/* 연결 화살표 (마지막이 아닌 경우) */}
                 {index < selectedNodes.length - 1 && (
                   <div className="flex justify-center py-1">
-                    <div className="text-gray-400">→</div>
+                    <div className="text-muted-foreground/70">→</div>
                   </div>
                 )}
               </div>
@@ -104,24 +104,22 @@ export const SelectedTablesPanel: React.FC<SelectedTablesPanelProps> = ({
       </div>
 
       {/* 액션 버튼 */}
-      <div className="flex gap-2 border-t border-blue-100 p-3">
+      <div className="flex gap-2 border-t border-border p-3">
         <button
           onClick={onOpenConnectionModal}
           disabled={!canCreateConnection}
-          className={`flex flex-1 items-center justify-center gap-1 rounded-lg px-3 py-2 text-xs font-medium transition-colors ${
+          className={`flex flex-1 items-center justify-center gap-1 rounded-md px-3 py-2 text-xs font-medium transition-colors ${
             canCreateConnection
-              ? "bg-accent0 text-white hover:bg-blue-600"
-              : "cursor-not-allowed bg-gray-300 text-gray-500"
+              ? "bg-primary text-primary-foreground hover:bg-primary/90"
+              : "cursor-not-allowed bg-muted text-muted-foreground"
           }`}
         >
-          <span>🔗</span>
           <span>연결 설정</span>
         </button>
         <button
           onClick={onClear}
-          className="flex flex-1 items-center justify-center gap-1 rounded-lg bg-gray-200 px-3 py-2 text-xs font-medium text-muted-foreground hover:bg-gray-300"
+          className="flex flex-1 items-center justify-center gap-1 rounded-md border border-border bg-background px-3 py-2 text-xs font-medium text-muted-foreground hover:bg-muted"
         >
-          <span>🗑️</span>
           <span>초기화</span>
         </button>
       </div>
diff --git a/frontend/components/dataflow/TableNode.tsx b/frontend/components/dataflow/TableNode.tsx
index 6837efc0..f1b3872f 100644
--- a/frontend/components/dataflow/TableNode.tsx
+++ b/frontend/components/dataflow/TableNode.tsx
@@ -32,13 +32,13 @@ export const TableNode: React.FC<{ data: TableNodeData }> = ({ data }) => {
   const { table, onColumnClick, onScrollAreaEnter, onScrollAreaLeave, selectedColumns = [] } = data;
 
   return (
-    <div className="relative flex min-w-[280px] cursor-pointer flex-col overflow-hidden rounded-lg border-2 border-gray-300 bg-white shadow-lg transition-all hover:shadow-xl">
+    <div className="relative flex min-w-[280px] cursor-pointer flex-col overflow-hidden rounded-lg border-2 border-input bg-white shadow-lg transition-all hover:shadow-xl">
       {/* React Flow Handles - 숨김 처리 */}
       <Handle type="target" position={Position.Left} id="left" className="!invisible !h-1 !w-1" />
       <Handle type="source" position={Position.Right} id="right" className="!invisible !h-1 !w-1" />
 
       {/* 테이블 헤더 - 통일된 디자인 */}
-      <div className="bg-blue-600 p-3 text-white">
+      <div className="bg-primary p-3 text-white">
         <h3 className="truncate text-sm font-semibold">{table.displayName}</h3>
         {table.description && <p className="mt-1 truncate text-xs opacity-75">{table.description}</p>}
       </div>
@@ -56,7 +56,7 @@ export const TableNode: React.FC<{ data: TableNodeData }> = ({ data }) => {
               <div
                 key={columnKey}
                 className={`relative cursor-pointer rounded px-2 py-1 text-xs transition-colors ${
-                  isSelected ? "bg-primary/20 text-blue-800 ring-2 ring-blue-500" : "text-gray-700 hover:bg-gray-100"
+                  isSelected ? "bg-primary/20 text-primary ring-2 ring-ring" : "text-foreground hover:bg-muted"
                 }`}
                 onClick={() => onColumnClick(table.tableName, columnKey)}
               >
@@ -64,9 +64,9 @@ export const TableNode: React.FC<{ data: TableNodeData }> = ({ data }) => {
 
                 <div className="flex items-center justify-between">
                   <span className="font-mono font-medium">{columnDisplayName}</span>
-                  <span className="text-gray-500">{columnType}</span>
+                  <span className="text-muted-foreground">{columnType}</span>
                 </div>
-                {column.description && <div className="mt-0.5 text-gray-500">{column.description}</div>}
+                {column.description && <div className="mt-0.5 text-muted-foreground">{column.description}</div>}
               </div>
             );
           })}
diff --git a/frontend/components/dataflow/TableSelector.tsx b/frontend/components/dataflow/TableSelector.tsx
index d2aa68ac..161ca6ce 100644
--- a/frontend/components/dataflow/TableSelector.tsx
+++ b/frontend/components/dataflow/TableSelector.tsx
@@ -74,7 +74,7 @@ export const TableSelector: React.FC<TableSelectorProps> = ({ companyCode, onTab
   return (
     <div className="space-y-4">
       <div className="flex items-center justify-between">
-        <h3 className="text-lg font-semibold text-gray-800">테이블 선택</h3>
+        <h3 className="text-lg font-semibold text-foreground">테이블 선택</h3>
         <Button onClick={loadTables} variant="outline" size="sm" disabled={loading}>
           {loading ? "로딩중..." : "새로고침"}
         </Button>
@@ -82,7 +82,7 @@ export const TableSelector: React.FC<TableSelectorProps> = ({ companyCode, onTab
 
       {/* 검색 입력 */}
       <div className="relative">
-        <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400" />
+        <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-muted-foreground/70" />
         <Input
           placeholder="테이블명으로 검색..."
           value={searchTerm}
@@ -99,11 +99,11 @@ export const TableSelector: React.FC<TableSelectorProps> = ({ companyCode, onTab
       <div className="max-h-96 space-y-2 overflow-y-auto">
         {loading ? (
           <div className="flex items-center justify-center py-8">
-            <div className="text-sm text-gray-500">테이블 목록을 불러오는 중...</div>
+            <div className="text-sm text-muted-foreground">테이블 목록을 불러오는 중...</div>
           </div>
         ) : filteredTables.length === 0 ? (
           <div className="flex items-center justify-center py-8">
-            <div className="text-center text-sm text-gray-500">
+            <div className="text-center text-sm text-muted-foreground">
               {searchTerm ? "검색 결과가 없습니다." : "등록된 테이블이 없습니다."}
             </div>
           </div>
@@ -114,14 +114,14 @@ export const TableSelector: React.FC<TableSelectorProps> = ({ companyCode, onTab
               <Card
                 key={table.tableName}
                 className={`cursor-pointer transition-all hover:shadow-md ${
-                  isSelected ? "cursor-not-allowed border-primary bg-accent opacity-60" : "hover:border-gray-300"
+                  isSelected ? "cursor-not-allowed border-primary bg-accent opacity-60" : "hover:border-input"
                 }`}
                 onDoubleClick={() => !isSelected && handleAddTable(table)}
               >
                 <CardHeader className="pb-2">
                   <div>
                     <CardTitle className="text-sm font-medium">{table.displayName}</CardTitle>
-                    <div className="mt-1 text-xs text-gray-500">{table.columnCount}개 컬럼</div>
+                    <div className="mt-1 text-xs text-muted-foreground">{table.columnCount}개 컬럼</div>
                   </div>
                 </CardHeader>
                 <CardContent className="pt-0">
@@ -132,7 +132,7 @@ export const TableSelector: React.FC<TableSelectorProps> = ({ companyCode, onTab
                       {isSelected && <span className="font-medium text-primary">(추가됨)</span>}
                     </div>
 
-                    {table.description && <p className="line-clamp-2 text-xs text-gray-500">{table.description}</p>}
+                    {table.description && <p className="line-clamp-2 text-xs text-muted-foreground">{table.description}</p>}
                   </div>
                 </CardContent>
               </Card>
@@ -142,7 +142,7 @@ export const TableSelector: React.FC<TableSelectorProps> = ({ companyCode, onTab
       </div>
 
       {/* 통계 정보 */}
-      <div className="rounded-lg bg-gray-50 p-3 text-xs text-muted-foreground">
+      <div className="rounded-lg bg-muted p-3 text-xs text-muted-foreground">
         <div className="flex items-center justify-between">
           <span>전체 테이블: {tables.length}개</span>
           {searchTerm && <span>검색 결과: {filteredTables.length}개</span>}
diff --git a/frontend/components/dataflow/condition/ConditionRenderer.tsx b/frontend/components/dataflow/condition/ConditionRenderer.tsx
index 4cb5b915..6eec3455 100644
--- a/frontend/components/dataflow/condition/ConditionRenderer.tsx
+++ b/frontend/components/dataflow/condition/ConditionRenderer.tsx
@@ -63,7 +63,7 @@ export const ConditionRenderer: React.FC<ConditionRendererProps> = ({
   return (
     <div className="space-y-2">
       {conditions.length === 0 ? (
-        <div className="rounded-lg border border-dashed p-3 text-center text-xs text-gray-500">
+        <div className="rounded-lg border border-dashed p-3 text-center text-xs text-muted-foreground">
           조건을 추가하면 해당 조건을 만족할 때만 실행됩니다.
           <br />
           조건이 없으면 항상 실행됩니다.
@@ -92,7 +92,7 @@ export const ConditionRenderer: React.FC<ConditionRendererProps> = ({
                   )}
                   {/* 그룹 레벨에 따른 들여쓰기 */}
                   <div
-                    className="flex items-center gap-2 rounded border-2 border-dashed border-blue-300 bg-accent/50 p-2"
+                    className="flex items-center gap-2 rounded border-2 border-dashed border-primary/40 bg-accent/50 p-2"
                     style={{ marginLeft: `${(condition.groupLevel || 0) * 20}px` }}
                   >
                     <span className="font-mono text-sm text-primary">(</span>
@@ -110,7 +110,7 @@ export const ConditionRenderer: React.FC<ConditionRendererProps> = ({
               return (
                 <div key={condition.id} className="flex items-center gap-2">
                   <div
-                    className="flex items-center gap-2 rounded border-2 border-dashed border-blue-300 bg-accent/50 p-2"
+                    className="flex items-center gap-2 rounded border-2 border-dashed border-primary/40 bg-accent/50 p-2"
                     style={{ marginLeft: `${(condition.groupLevel || 0) * 20}px` }}
                   >
                     <span className="font-mono text-sm text-primary">)</span>
diff --git a/frontend/components/dataflow/connection/ActionConditionRenderer.tsx b/frontend/components/dataflow/connection/ActionConditionRenderer.tsx
index c902ae75..949aca04 100644
--- a/frontend/components/dataflow/connection/ActionConditionRenderer.tsx
+++ b/frontend/components/dataflow/connection/ActionConditionRenderer.tsx
@@ -114,7 +114,7 @@ export const ActionConditionRenderer: React.FC<ActionConditionRendererProps> = (
             value={settings.actions[actionIndex].conditions![condIndex - 1]?.logicalOperator || "AND"}
             onValueChange={(value: "AND" | "OR") => updateLogicalOperator(condIndex - 1, value)}
           >
-            <SelectTrigger className="h-6 w-24 border-green-200 bg-green-50 text-xs">
+            <SelectTrigger className="h-6 w-24 border-emerald-200 bg-emerald-50 text-xs">
               <SelectValue />
             </SelectTrigger>
             <SelectContent>
@@ -124,11 +124,11 @@ export const ActionConditionRenderer: React.FC<ActionConditionRendererProps> = (
           </Select>
         )}
         <div
-          className="flex items-center gap-2 rounded border-2 border-dashed border-green-300 bg-green-50/50 p-1"
+          className="flex items-center gap-2 rounded border-2 border-dashed border-green-300 bg-emerald-50/50 p-1"
           style={{ marginLeft: `${(condition.groupLevel || 0) * 15}px` }}
         >
-          <span className="font-mono text-xs text-green-600">(</span>
-          <span className="text-xs text-green-600">그룹 시작</span>
+          <span className="font-mono text-xs text-emerald-600">(</span>
+          <span className="text-xs text-emerald-600">그룹 시작</span>
           <Button
             size="sm"
             variant="ghost"
@@ -147,11 +147,11 @@ export const ActionConditionRenderer: React.FC<ActionConditionRendererProps> = (
     return (
       <div className="flex items-center gap-2">
         <div
-          className="flex items-center gap-2 rounded border-2 border-dashed border-green-300 bg-green-50/50 p-1"
+          className="flex items-center gap-2 rounded border-2 border-dashed border-green-300 bg-emerald-50/50 p-1"
           style={{ marginLeft: `${(condition.groupLevel || 0) * 15}px` }}
         >
-          <span className="font-mono text-xs text-green-600">)</span>
-          <span className="text-xs text-green-600">그룹 끝</span>
+          <span className="font-mono text-xs text-emerald-600">)</span>
+          <span className="text-xs text-emerald-600">그룹 끝</span>
           <Button
             size="sm"
             variant="ghost"
@@ -174,7 +174,7 @@ export const ActionConditionRenderer: React.FC<ActionConditionRendererProps> = (
           value={settings.actions[actionIndex].conditions![condIndex - 1]?.logicalOperator || "AND"}
           onValueChange={(value: "AND" | "OR") => updateLogicalOperator(condIndex - 1, value)}
         >
-          <SelectTrigger className="h-6 w-24 border-green-200 bg-green-50 text-xs">
+          <SelectTrigger className="h-6 w-24 border-emerald-200 bg-emerald-50 text-xs">
             <SelectValue />
           </SelectTrigger>
           <SelectContent>
diff --git a/frontend/components/dataflow/connection/ActionConditionsSection.tsx b/frontend/components/dataflow/connection/ActionConditionsSection.tsx
index b22391ba..e57050f8 100644
--- a/frontend/components/dataflow/connection/ActionConditionsSection.tsx
+++ b/frontend/components/dataflow/connection/ActionConditionsSection.tsx
@@ -82,21 +82,21 @@ export const ActionConditionsSection: React.FC<ActionConditionsSectionProps> = (
     <div className="mt-3">
       <details className="group">
         <summary
-          className={`flex cursor-pointer items-center justify-between rounded border p-2 text-xs font-medium hover:bg-gray-50 hover:text-gray-900 ${
+          className={`flex cursor-pointer items-center justify-between rounded border p-2 text-xs font-medium hover:bg-muted hover:text-foreground ${
             isConditionRequired && !hasValidConditions
-              ? "border-red-300 bg-destructive/10 text-red-700"
-              : "border-gray-200 text-gray-700"
+              ? "border-destructive/30 bg-destructive/10 text-destructive"
+              : "border-border text-foreground"
           }`}
         >
           <div className="flex items-center gap-2">
             🔍 이 액션의 실행 조건
             {isConditionRequired ? (
-              <span className="rounded bg-destructive/20 px-1 py-0.5 text-xs font-semibold text-red-700">필수</span>
+              <span className="rounded bg-destructive/20 px-1 py-0.5 text-xs font-semibold text-destructive">필수</span>
             ) : (
-              <span className="text-gray-500">(선택사항)</span>
+              <span className="text-muted-foreground">(선택사항)</span>
             )}
             {action.conditions && action.conditions.length > 0 && (
-              <span className="rounded-full bg-primary/20 px-2 py-0.5 text-xs text-blue-700">
+              <span className="rounded-full bg-primary/20 px-2 py-0.5 text-xs text-primary">
                 {action.conditions.length}개
               </span>
             )}
@@ -113,14 +113,14 @@ export const ActionConditionsSection: React.FC<ActionConditionsSectionProps> = (
                 e.stopPropagation();
                 clearAllConditions();
               }}
-              className="h-5 w-5 p-0 text-red-500 hover:text-red-700"
+              className="h-5 w-5 p-0 text-destructive hover:text-destructive"
               title="조건 모두 삭제"
             >
               <Trash2 className="h-3 w-3" />
             </Button>
           )}
         </summary>
-        <div className="mt-2 space-y-2 border-l-2 border-gray-100 pl-4">
+        <div className="mt-2 space-y-2 border-l-2 border-border pl-4">
           <div className="mb-2 flex items-center justify-between">
             <div className="flex gap-1">
               <Button size="sm" variant="outline" onClick={addActionCondition} className="h-6 text-xs">
@@ -151,13 +151,13 @@ export const ActionConditionsSection: React.FC<ActionConditionsSectionProps> = (
             <div
               className={`rounded border p-3 text-xs ${
                 isConditionRequired
-                  ? "border-destructive/20 bg-destructive/10 text-red-700"
-                  : "border-gray-200 bg-gray-50 text-muted-foreground"
+                  ? "border-destructive/20 bg-destructive/10 text-destructive"
+                  : "border-border bg-muted text-muted-foreground"
               }`}
             >
               {isConditionRequired ? (
                 <div className="flex items-start gap-2">
-                  <span className="text-red-500">⚠️</span>
+                  <span className="text-destructive">⚠️</span>
                   <div>
                     <div className="font-medium">실행조건이 필요합니다</div>
                     <div className="mt-1">
diff --git a/frontend/components/dataflow/connection/ActionFieldMappings.tsx b/frontend/components/dataflow/connection/ActionFieldMappings.tsx
index 91e5e1c9..4e13a86e 100644
--- a/frontend/components/dataflow/connection/ActionFieldMappings.tsx
+++ b/frontend/components/dataflow/connection/ActionFieldMappings.tsx
@@ -277,13 +277,13 @@ export const ActionFieldMappings: React.FC<ActionFieldMappingsProps> = ({
                       updateFieldMapping(mappingIndex, "sourceTable", "");
                       updateFieldMapping(mappingIndex, "sourceField", "");
                     }}
-                    className="ml-1 flex h-4 w-4 items-center justify-center rounded-full text-gray-400 hover:bg-gray-200 hover:text-muted-foreground"
+                    className="ml-1 flex h-4 w-4 items-center justify-center rounded-full text-muted-foreground/70 hover:bg-muted/80 hover:text-muted-foreground"
                     title="소스 테이블 지우기"
                   >
                     ×
                   </button>
                 )}
-                <span className="text-gray-400">.</span>
+                <span className="text-muted-foreground/70">.</span>
                 <Select
                   value={mapping.sourceField}
                   onValueChange={(value) => {
@@ -312,10 +312,10 @@ export const ActionFieldMappings: React.FC<ActionFieldMappingsProps> = ({
                 </Select>
               </div>
 
-              <div className="text-gray-400">→</div>
+              <div className="text-muted-foreground/70">→</div>
 
               {/* 타겟 */}
-              <div className="flex items-center gap-1 rounded bg-green-50 px-2 py-1">
+              <div className="flex items-center gap-1 rounded bg-emerald-50 px-2 py-1">
                 <Select
                   value={mapping.targetTable || ""}
                   onValueChange={(value) => {
@@ -336,7 +336,7 @@ export const ActionFieldMappings: React.FC<ActionFieldMappingsProps> = ({
                     ))}
                   </SelectContent>
                 </Select>
-                <span className="text-gray-400">.</span>
+                <span className="text-muted-foreground/70">.</span>
                 <Select
                   value={mapping.targetField}
                   onValueChange={(value) => updateFieldMapping(mappingIndex, "targetField", value)}
@@ -380,7 +380,7 @@ export const ActionFieldMappings: React.FC<ActionFieldMappingsProps> = ({
                 size="sm"
                 variant="ghost"
                 onClick={() => removeFieldMapping(mappingIndex)}
-                className="h-6 w-6 p-0 text-red-500 hover:text-red-700"
+                className="h-6 w-6 p-0 text-destructive hover:text-destructive"
               >
                 <Trash2 className="h-3 w-3" />
               </Button>
@@ -390,9 +390,9 @@ export const ActionFieldMappings: React.FC<ActionFieldMappingsProps> = ({
 
         {/* 필드 매핑이 없을 때 안내 메시지 */}
         {action.fieldMappings.length === 0 && (
-          <div className="rounded border border-destructive/20 bg-destructive/10 p-3 text-xs text-red-700">
+          <div className="rounded border border-destructive/20 bg-destructive/10 p-3 text-xs text-destructive">
             <div className="flex items-start gap-2">
-              <span className="text-red-500">⚠️</span>
+              <span className="text-destructive">⚠️</span>
               <div>
                 <div className="font-medium">필드 매핑이 필요합니다</div>
                 <div className="mt-1">
diff --git a/frontend/components/dataflow/connection/ActionSplitConfig.tsx b/frontend/components/dataflow/connection/ActionSplitConfig.tsx
index bb8d49e1..60de8753 100644
--- a/frontend/components/dataflow/connection/ActionSplitConfig.tsx
+++ b/frontend/components/dataflow/connection/ActionSplitConfig.tsx
@@ -52,11 +52,11 @@ export const ActionSplitConfig: React.FC<ActionSplitConfigProps> = ({
   return (
     <div className="mt-3">
       <details className="group">
-        <summary className="flex cursor-pointer items-center justify-between rounded border p-2 text-xs font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-900">
+        <summary className="flex cursor-pointer items-center justify-between rounded border p-2 text-xs font-medium text-foreground hover:bg-muted hover:text-foreground">
           <div className="flex items-center gap-2">
             ✂️ 데이터 분할 설정 (선택사항)
             {action.splitConfig && action.splitConfig.sourceField && (
-              <span className="rounded-full bg-green-100 px-2 py-0.5 text-xs text-green-700">설정됨</span>
+              <span className="rounded-full bg-emerald-100 px-2 py-0.5 text-xs text-emerald-700">설정됨</span>
             )}
           </div>
           {action.splitConfig && action.splitConfig.sourceField && (
@@ -68,18 +68,18 @@ export const ActionSplitConfig: React.FC<ActionSplitConfigProps> = ({
                 e.stopPropagation();
                 clearSplitConfig();
               }}
-              className="h-5 w-5 p-0 text-red-500 hover:text-red-700"
+              className="h-5 w-5 p-0 text-destructive hover:text-destructive"
               title="분할 설정 초기화"
             >
               <Trash2 className="h-3 w-3" />
             </Button>
           )}
         </summary>
-        <div className="mt-2 space-y-2 border-l-2 border-gray-100 pl-4">
+        <div className="mt-2 space-y-2 border-l-2 border-border pl-4">
           <Label className="text-xs font-medium">데이터 분할 설정</Label>
           <div className="mt-1 grid grid-cols-3 gap-2">
             <div>
-              <Label className="text-xs text-gray-500">분할할 필드</Label>
+              <Label className="text-xs text-muted-foreground">분할할 필드</Label>
               <Select
                 value={action.splitConfig?.sourceField || ""}
                 onValueChange={(value) => updateSplitConfig("sourceField", value)}
@@ -99,7 +99,7 @@ export const ActionSplitConfig: React.FC<ActionSplitConfigProps> = ({
               </Select>
             </div>
             <div>
-              <Label className="text-xs text-gray-500">구분자</Label>
+              <Label className="text-xs text-muted-foreground">구분자</Label>
               <Input
                 value={action.splitConfig?.delimiter || ""}
                 onChange={(e) => updateSplitConfig("delimiter", e.target.value)}
@@ -108,7 +108,7 @@ export const ActionSplitConfig: React.FC<ActionSplitConfigProps> = ({
               />
             </div>
             <div>
-              <Label className="text-xs text-gray-500">저장할 필드</Label>
+              <Label className="text-xs text-muted-foreground">저장할 필드</Label>
               <Select
                 value={action.splitConfig?.targetField || ""}
                 onValueChange={(value) => updateSplitConfig("targetField", value)}
diff --git a/frontend/components/dataflow/connection/ColumnTableSection.tsx b/frontend/components/dataflow/connection/ColumnTableSection.tsx
index 631403b0..1057f19a 100644
--- a/frontend/components/dataflow/connection/ColumnTableSection.tsx
+++ b/frontend/components/dataflow/connection/ColumnTableSection.tsx
@@ -101,14 +101,14 @@ export const ColumnTableSection: React.FC<ColumnTableSectionProps> = ({
   return (
     <div className="flex-1">
       {/* 헤더 */}
-      <div className="rounded-t-lg bg-gray-600 px-4 py-3 text-white">
+      <div className="rounded-t-lg bg-foreground/80 px-4 py-3 text-white">
         <h3 className="text-sm font-semibold">
           {isFromTable ? "From" : "To"}: {tableName} ({columns.length}/{columns.length})
         </h3>
       </div>
 
       {/* 검색 및 필터 */}
-      <div className="border-r border-l border-gray-200 bg-gray-50 p-3">
+      <div className="border-r border-l border-border bg-muted p-3">
         <div className="flex flex-col gap-3">
           <Input
             placeholder="컬럼명 검색..."
@@ -140,7 +140,7 @@ export const ColumnTableSection: React.FC<ColumnTableSectionProps> = ({
                   if (showUnmappedOnly) onShowUnmappedOnlyChange(false);
                 }}
                 className={`rounded px-2 py-1 text-xs transition-colors hover:cursor-pointer ${
-                  showMappedOnly ? "bg-gray-600 text-white" : "bg-gray-200 text-gray-700 hover:bg-gray-300"
+                  showMappedOnly ? "bg-foreground/80 text-white" : "bg-muted/80 text-foreground hover:bg-muted/60"
                 }`}
               >
                 설정됨
@@ -151,7 +151,7 @@ export const ColumnTableSection: React.FC<ColumnTableSectionProps> = ({
                   if (showMappedOnly) onShowMappedOnlyChange(false);
                 }}
                 className={`rounded px-2 py-1 text-xs transition-colors hover:cursor-pointer ${
-                  showUnmappedOnly ? "bg-gray-600 text-white" : "bg-gray-200 text-gray-700 hover:bg-gray-300"
+                  showUnmappedOnly ? "bg-foreground/80 text-white" : "bg-muted/80 text-foreground hover:bg-muted/60"
                 }`}
               >
                 미설정
@@ -162,7 +162,7 @@ export const ColumnTableSection: React.FC<ColumnTableSectionProps> = ({
       </div>
 
       {/* 컬럼 리스트 */}
-      <div className="h-96 overflow-y-auto border-r border-l border-gray-200">
+      <div className="h-96 overflow-y-auto border-r border-l border-border">
         {filteredColumns.map((column) => {
           const isSelected = selectedColumn === column.columnName;
           const isClickable = isColumnClickable(column);
@@ -184,16 +184,16 @@ export const ColumnTableSection: React.FC<ColumnTableSectionProps> = ({
               <div
                 key={column.columnName}
                 onClick={isClickable ? () => onColumnClick(column.columnName) : undefined}
-                className={`border-b border-gray-200 px-3 py-2 text-xs transition-colors ${
+                className={`border-b border-border px-3 py-2 text-xs transition-colors ${
                   isSelected
-                    ? "bg-gray-200 text-gray-800"
+                    ? "bg-muted/80 text-foreground"
                     : isMapped
-                      ? "bg-gray-100 text-gray-700"
+                      ? "bg-muted text-foreground"
                       : oppositeSelectedColumn && !isTypeCompatible
-                        ? "cursor-not-allowed bg-destructive/10 text-red-400 opacity-60"
+                        ? "cursor-not-allowed bg-destructive/10 text-destructive/80 opacity-60"
                         : isClickable
-                          ? "cursor-pointer hover:bg-gray-50"
-                          : "cursor-not-allowed bg-gray-100 text-gray-400"
+                          ? "cursor-pointer hover:bg-muted"
+                          : "cursor-not-allowed bg-muted text-muted-foreground/70"
                 }`}
               >
                 <div className="flex items-start justify-between gap-2">
@@ -204,24 +204,24 @@ export const ColumnTableSection: React.FC<ColumnTableSectionProps> = ({
                           ? column.displayName
                           : column.columnName}
                       </span>
-                      {isSelected && <span className="flex-shrink-0 text-blue-500">●</span>}
-                      {isMapped && <span className="flex-shrink-0 text-green-500">✓</span>}
+                      {isSelected && <span className="flex-shrink-0 text-primary">●</span>}
+                      {isMapped && <span className="flex-shrink-0 text-emerald-500">✓</span>}
                       {oppositeSelectedColumn && !isTypeCompatible && (
-                        <span className="flex-shrink-0 text-red-500" title="데이터 타입이 호환되지 않음">
+                        <span className="flex-shrink-0 text-destructive" title="데이터 타입이 호환되지 않음">
                           ⚠
                         </span>
                       )}
                     </div>
                     <div
-                      className={`mt-1 text-xs ${oppositeSelectedColumn && !isTypeCompatible ? "text-red-400" : "text-gray-500"}`}
+                      className={`mt-1 text-xs ${oppositeSelectedColumn && !isTypeCompatible ? "text-destructive/80" : "text-muted-foreground"}`}
                     >
                       {column.dataType}
                       {oppositeSelectedColumn && !isTypeCompatible && (
-                        <span className="ml-1 text-red-400">(호환 불가)</span>
+                        <span className="ml-1 text-destructive/80">(호환 불가)</span>
                       )}
                     </div>
                     {isMapped && mappedToColumn && (
-                      <div className="mt-1 truncate text-xs text-green-600">→ {mappedToColumn}</div>
+                      <div className="mt-1 truncate text-xs text-emerald-600">→ {mappedToColumn}</div>
                     )}
                   </div>
                 </div>
@@ -242,13 +242,13 @@ export const ColumnTableSection: React.FC<ColumnTableSectionProps> = ({
             return (
               <div
                 key={column.columnName}
-                className={`border-b border-gray-200 transition-colors ${
+                className={`border-b border-border transition-colors ${
                   isSelected
-                    ? "bg-gray-200"
+                    ? "bg-muted/80"
                     : isMapped
-                      ? "bg-gray-100"
+                      ? "bg-muted"
                       : hasDefaultValue
-                        ? "bg-gray-100"
+                        ? "bg-muted"
                         : oppositeSelectedColumn && !isTypeCompatible
                           ? "bg-destructive/10 opacity-60"
                           : "bg-white"
@@ -259,7 +259,7 @@ export const ColumnTableSection: React.FC<ColumnTableSectionProps> = ({
                   onClick={isClickable && isTypeCompatible ? () => onColumnClick(column.columnName) : undefined}
                   className={`px-3 py-2 text-xs ${
                     isClickable && isTypeCompatible
-                      ? "cursor-pointer hover:bg-gray-50"
+                      ? "cursor-pointer hover:bg-muted"
                       : oppositeSelectedColumn && !isTypeCompatible
                         ? "cursor-not-allowed"
                         : hasDefaultValue
@@ -274,19 +274,19 @@ export const ColumnTableSection: React.FC<ColumnTableSectionProps> = ({
                           ? column.displayName
                           : column.columnName}
                       </span>
-                      {isSelected && <span className="flex-shrink-0 text-green-500">●</span>}
+                      {isSelected && <span className="flex-shrink-0 text-emerald-500">●</span>}
                       {oppositeSelectedColumn && !isTypeCompatible && (
-                        <span className="flex-shrink-0 text-red-500" title="데이터 타입이 호환되지 않음">
+                        <span className="flex-shrink-0 text-destructive" title="데이터 타입이 호환되지 않음">
                           ⚠
                         </span>
                       )}
                     </div>
                     <div
-                      className={`mt-1 text-xs ${oppositeSelectedColumn && !isTypeCompatible ? "text-red-400" : "text-gray-500"}`}
+                      className={`mt-1 text-xs ${oppositeSelectedColumn && !isTypeCompatible ? "text-destructive/80" : "text-muted-foreground"}`}
                     >
                       {column.dataType}
                       {oppositeSelectedColumn && !isTypeCompatible && (
-                        <span className="ml-1 text-red-400">(호환 불가)</span>
+                        <span className="ml-1 text-destructive/80">(호환 불가)</span>
                       )}
                     </div>
 
@@ -298,7 +298,7 @@ export const ColumnTableSection: React.FC<ColumnTableSectionProps> = ({
                             e.stopPropagation();
                             onRemoveMapping?.(column.columnName);
                           }}
-                          className="flex-shrink-0 text-red-500 hover:text-red-700"
+                          className="flex-shrink-0 text-destructive hover:text-destructive"
                           title="매핑 제거"
                         >
                           ✕
@@ -312,7 +312,7 @@ export const ColumnTableSection: React.FC<ColumnTableSectionProps> = ({
                           column={column}
                           value={mapping?.defaultValue || ""}
                           onChange={(value) => onDefaultValueChange(column.columnName, value)}
-                          className="h-6 border-gray-200 text-xs focus:border-green-400 focus:ring-0"
+                          className="h-6 border-border text-xs focus:border-green-400 focus:ring-0"
                           placeholder="기본값 입력..."
                           tableName={tableName}
                         />
@@ -327,7 +327,7 @@ export const ColumnTableSection: React.FC<ColumnTableSectionProps> = ({
       </div>
 
       {/* 하단 통계 */}
-      <div className="rounded-b-lg border border-gray-200 bg-gray-50 p-3 text-xs text-muted-foreground">
+      <div className="rounded-b-lg border border-border bg-muted p-3 text-xs text-muted-foreground">
         <div className="flex items-center justify-between">
           <span>
             {isFromTable ? "매핑됨" : "설정됨"}: {mappedCount}/{columns.length}
diff --git a/frontend/components/dataflow/connection/ConnectionSelectionPanel.tsx b/frontend/components/dataflow/connection/ConnectionSelectionPanel.tsx
index 9148a035..9ace97ee 100644
--- a/frontend/components/dataflow/connection/ConnectionSelectionPanel.tsx
+++ b/frontend/components/dataflow/connection/ConnectionSelectionPanel.tsx
@@ -179,23 +179,23 @@ export const ConnectionSelectionPanel: React.FC<ConnectionSelectionPanelProps> =
           <Card>
             <CardHeader>
               <CardTitle className="flex items-center gap-2">
-                <div className="h-4 w-4 animate-pulse rounded bg-gray-300" />
-                <div className="h-4 w-32 animate-pulse rounded bg-gray-300" />
+                <div className="h-4 w-4 animate-pulse rounded bg-muted/60" />
+                <div className="h-4 w-32 animate-pulse rounded bg-muted/60" />
               </CardTitle>
             </CardHeader>
             <CardContent>
-              <div className="h-10 w-full animate-pulse rounded bg-gray-200" />
+              <div className="h-10 w-full animate-pulse rounded bg-muted/80" />
             </CardContent>
           </Card>
           <Card>
             <CardHeader>
               <CardTitle className="flex items-center gap-2">
-                <div className="h-4 w-4 animate-pulse rounded bg-gray-300" />
-                <div className="h-4 w-32 animate-pulse rounded bg-gray-300" />
+                <div className="h-4 w-4 animate-pulse rounded bg-muted/60" />
+                <div className="h-4 w-32 animate-pulse rounded bg-muted/60" />
               </CardTitle>
             </CardHeader>
             <CardContent>
-              <div className="h-10 w-full animate-pulse rounded bg-gray-200" />
+              <div className="h-10 w-full animate-pulse rounded bg-muted/80" />
             </CardContent>
           </Card>
         </div>
diff --git a/frontend/components/dataflow/connection/ConnectionTypeSelector.tsx b/frontend/components/dataflow/connection/ConnectionTypeSelector.tsx
index b4218bde..dede9fc7 100644
--- a/frontend/components/dataflow/connection/ConnectionTypeSelector.tsx
+++ b/frontend/components/dataflow/connection/ConnectionTypeSelector.tsx
@@ -19,11 +19,11 @@ export const ConnectionTypeSelector: React.FC<ConnectionTypeSelectorProps> = ({
           className={`cursor-pointer rounded-lg border-2 p-3 text-center transition-colors ${
             config.connectionType === "simple-key"
               ? "border-primary bg-accent"
-              : "border-gray-200 hover:border-gray-300"
+              : "border-border hover:border-input"
           }`}
           onClick={() => onConfigChange({ ...config, connectionType: "simple-key" })}
         >
-          <Key className="mx-auto h-6 w-6 text-blue-500" />
+          <Key className="mx-auto h-6 w-6 text-primary" />
           <div className="mt-1 text-xs font-medium">단순 키값 연결</div>
           <div className="text-xs text-muted-foreground">중계 테이블 생성</div>
         </div>
@@ -31,12 +31,12 @@ export const ConnectionTypeSelector: React.FC<ConnectionTypeSelectorProps> = ({
         <div
           className={`cursor-pointer rounded-lg border-2 p-3 text-center transition-colors ${
             config.connectionType === "data-save"
-              ? "border-green-500 bg-green-50"
-              : "border-gray-200 hover:border-gray-300"
+              ? "border-emerald-500 bg-emerald-50"
+              : "border-border hover:border-input"
           }`}
           onClick={() => onConfigChange({ ...config, connectionType: "data-save" })}
         >
-          <Save className="mx-auto h-6 w-6 text-green-500" />
+          <Save className="mx-auto h-6 w-6 text-emerald-500" />
           <div className="mt-1 text-xs font-medium">데이터 저장</div>
           <div className="text-xs text-muted-foreground">필드 매핑 저장</div>
         </div>
@@ -44,15 +44,15 @@ export const ConnectionTypeSelector: React.FC<ConnectionTypeSelectorProps> = ({
         <div
           className={`cursor-pointer rounded-lg border-2 p-3 text-center transition-colors ${
             config.connectionType === "external-call"
-              ? "border-orange-500 bg-orange-50"
-              : "border-gray-200 hover:border-gray-300"
+              ? "border-orange-500 bg-amber-50"
+              : "border-border hover:border-input"
           }`}
           onClick={() => {
             console.log("🔄 [ConnectionTypeSelector] External call selected");
             onConfigChange({ ...config, connectionType: "external-call" });
           }}
         >
-          <Globe className="mx-auto h-6 w-6 text-orange-500" />
+          <Globe className="mx-auto h-6 w-6 text-amber-500" />
           <div className="mt-1 text-xs font-medium">외부 호출</div>
           <div className="text-xs text-muted-foreground">API/이메일 호출</div>
         </div>
diff --git a/frontend/components/dataflow/connection/ExternalCallSettings.tsx b/frontend/components/dataflow/connection/ExternalCallSettings.tsx
index b109a645..88acf153 100644
--- a/frontend/components/dataflow/connection/ExternalCallSettings.tsx
+++ b/frontend/components/dataflow/connection/ExternalCallSettings.tsx
@@ -123,10 +123,10 @@ const handleTestExternalCall = async (settings: ExternalCallSettingsType) => {
 
 export const ExternalCallSettings: React.FC<ExternalCallSettingsProps> = ({ settings, onSettingsChange }) => {
   return (
-    <div className="rounded-lg border border-l-4 border-l-orange-500 bg-orange-50/30 p-4">
+    <div className="rounded-lg border border-l-4 border-l-orange-500 bg-amber-50/30 p-4">
       <div className="mb-3 flex items-center justify-between">
         <div className="flex items-center gap-2">
-          <Globe className="h-4 w-4 text-orange-500" />
+          <Globe className="h-4 w-4 text-amber-500" />
           <span className="text-sm font-medium">외부 호출 설정</span>
         </div>
         <Button
@@ -234,7 +234,7 @@ export const ExternalCallSettings: React.FC<ExternalCallSettingsProps> = ({ sett
               <>
                 <div>
                   <Label htmlFor="kakaoAccessToken" className="text-sm">
-                    카카오 액세스 토큰 <span className="text-red-500">*</span>
+                    카카오 액세스 토큰 <span className="text-destructive">*</span>
                   </Label>
                   <Input
                     id="kakaoAccessToken"
@@ -266,7 +266,7 @@ export const ExternalCallSettings: React.FC<ExternalCallSettingsProps> = ({ sett
               <>
                 <div>
                   <Label htmlFor="discordWebhookUrl" className="text-sm">
-                    디스코드 웹훅 URL <span className="text-red-500">*</span>
+                    디스코드 웹훅 URL <span className="text-destructive">*</span>
                   </Label>
                   <Input
                     id="discordWebhookUrl"
diff --git a/frontend/components/dataflow/connection/InsertFieldMappingPanel.tsx b/frontend/components/dataflow/connection/InsertFieldMappingPanel.tsx
index b5b33362..d621cd05 100644
--- a/frontend/components/dataflow/connection/InsertFieldMappingPanel.tsx
+++ b/frontend/components/dataflow/connection/InsertFieldMappingPanel.tsx
@@ -330,7 +330,7 @@ export const InsertFieldMappingPanel: React.FC<InsertFieldMappingPanelProps> = (
   return (
     <div className="mt-4">
       {/* 헤더 섹션 */}
-      <p className="mb-4 text-sm leading-relaxed text-gray-700">
+      <p className="mb-4 text-sm leading-relaxed text-foreground">
         양쪽 테이블의 컬럼을 클릭하여 매핑하거나, 대상 컬럼에 기본값을 입력하세요. 같은 데이터 타입의 컬럼만 매핑
         가능합니다. 하나의 FROM 컬럼은 하나의 TO 컬럼에만 매핑 가능합니다.
       </p>
@@ -382,7 +382,7 @@ export const InsertFieldMappingPanel: React.FC<InsertFieldMappingPanelProps> = (
       {/* 빠른 필터 액션 */}
       <Card className="mt-6 border-none py-2 shadow-none">
         <CardContent className="flex flex-wrap gap-2 p-3">
-          <span className="self-center text-sm font-medium text-gray-700">빠른 필터:</span>
+          <span className="self-center text-sm font-medium text-foreground">빠른 필터:</span>
           <Button
             variant="secondary"
             size="sm"
@@ -410,7 +410,7 @@ export const InsertFieldMappingPanel: React.FC<InsertFieldMappingPanelProps> = (
               setToShowMappedOnly(false);
               setToShowUnmappedOnly(true);
             }}
-            className="h-7 bg-orange-100 text-xs text-orange-700 hover:bg-orange-200"
+            className="h-7 text-xs"
           >
             미매핑만 보기
           </Button>
@@ -424,7 +424,7 @@ export const InsertFieldMappingPanel: React.FC<InsertFieldMappingPanelProps> = (
               setToShowMappedOnly(true);
               setToShowUnmappedOnly(false);
             }}
-            className="h-7 bg-green-100 text-xs text-green-700 hover:bg-green-200"
+            className="h-7 text-xs"
           >
             매핑됨만 보기
           </Button>
@@ -440,12 +440,12 @@ export const InsertFieldMappingPanel: React.FC<InsertFieldMappingPanelProps> = (
       </Card>
 
       {/* 매핑 통계 */}
-      <Card className="mt-4 bg-gradient-to-r from-gray-50 to-gray-100 py-2">
+      <Card className="mt-4 bg-muted/50 py-2">
         <CardContent className="p-4">
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-3">
               <div>
-                <div className="font-semibold text-gray-800">매핑 진행 상황</div>
+                <div className="font-semibold text-foreground">매핑 진행 상황</div>
                 <div className="text-sm text-muted-foreground">
                   총 {toTableColumns.length}개 컬럼 중{" "}
                   <span className="font-bold text-primary">
@@ -457,7 +457,7 @@ export const InsertFieldMappingPanel: React.FC<InsertFieldMappingPanelProps> = (
               </div>
             </div>
             <div className="text-right">
-              <div className="text-2xl font-bold text-gray-800">
+              <div className="text-2xl font-bold text-foreground">
                 {Math.round(
                   (columnMappings.filter((m) => m.fromColumnName || (m.defaultValue && m.defaultValue.trim())).length /
                     actualToColumns.length) *
@@ -465,7 +465,7 @@ export const InsertFieldMappingPanel: React.FC<InsertFieldMappingPanelProps> = (
                 )}
                 %
               </div>
-              <div className="text-xs text-gray-500">완료율</div>
+              <div className="text-xs text-muted-foreground">완료율</div>
             </div>
           </div>
           <div className="mt-3">
diff --git a/frontend/components/dataflow/connection/SimpleKeySettings.tsx b/frontend/components/dataflow/connection/SimpleKeySettings.tsx
index 018fbb06..d22a58bf 100644
--- a/frontend/components/dataflow/connection/SimpleKeySettings.tsx
+++ b/frontend/components/dataflow/connection/SimpleKeySettings.tsx
@@ -38,7 +38,7 @@ export const SimpleKeySettings: React.FC<SimpleKeySettingsProps> = ({
   return (
     <div className="space-y-4">
       {/* 테이블 및 컬럼 선택 */}
-      <div className="rounded-lg border bg-gray-50 p-4">
+      <div className="rounded-lg border bg-muted p-4">
         <div className="mb-4 text-sm font-medium">테이블 및 컬럼 선택</div>
 
         {/* 현재 선택된 테이블 표시 */}
@@ -46,20 +46,20 @@ export const SimpleKeySettings: React.FC<SimpleKeySettingsProps> = ({
           <div>
             <Label className="text-xs font-medium text-muted-foreground">From 테이블</Label>
             <div className="mt-1">
-              <span className="text-sm font-medium text-gray-800">
+              <span className="text-sm font-medium text-foreground">
                 {availableTables.find((t) => t.tableName === selectedFromTable)?.displayName || selectedFromTable}
               </span>
-              <span className="ml-2 text-xs text-gray-500">({selectedFromTable})</span>
+              <span className="ml-2 text-xs text-muted-foreground">({selectedFromTable})</span>
             </div>
           </div>
 
           <div>
             <Label className="text-xs font-medium text-muted-foreground">To 테이블</Label>
             <div className="mt-1">
-              <span className="text-sm font-medium text-gray-800">
+              <span className="text-sm font-medium text-foreground">
                 {availableTables.find((t) => t.tableName === selectedToTable)?.displayName || selectedToTable}
               </span>
-              <span className="ml-2 text-xs text-gray-500">({selectedToTable})</span>
+              <span className="ml-2 text-xs text-muted-foreground">({selectedToTable})</span>
             </div>
           </div>
         </div>
@@ -88,11 +88,11 @@ export const SimpleKeySettings: React.FC<SimpleKeySettingsProps> = ({
                       ? column.displayName
                       : column.columnName}
                   </span>
-                  <span className="text-xs text-gray-500">({column.dataType})</span>
+                  <span className="text-xs text-muted-foreground">({column.dataType})</span>
                 </label>
               ))}
               {fromTableColumns.length === 0 && (
-                <div className="py-2 text-xs text-gray-500">
+                <div className="py-2 text-xs text-muted-foreground">
                   {selectedFromTable ? "컬럼을 불러오는 중..." : "테이블을 먼저 선택해주세요"}
                 </div>
               )}
@@ -121,11 +121,11 @@ export const SimpleKeySettings: React.FC<SimpleKeySettingsProps> = ({
                       ? column.displayName
                       : column.columnName}
                   </span>
-                  <span className="text-xs text-gray-500">({column.dataType})</span>
+                  <span className="text-xs text-muted-foreground">({column.dataType})</span>
                 </label>
               ))}
               {toTableColumns.length === 0 && (
-                <div className="py-2 text-xs text-gray-500">
+                <div className="py-2 text-xs text-muted-foreground">
                   {selectedToTable ? "컬럼을 불러오는 중..." : "테이블을 먼저 선택해주세요"}
                 </div>
               )}
@@ -150,7 +150,7 @@ export const SimpleKeySettings: React.FC<SimpleKeySettingsProps> = ({
                     );
                   })
                 ) : (
-                  <span className="text-xs text-gray-400">선택된 컬럼 없음</span>
+                  <span className="text-xs text-muted-foreground/70">선택된 컬럼 없음</span>
                 )}
               </div>
             </div>
@@ -169,7 +169,7 @@ export const SimpleKeySettings: React.FC<SimpleKeySettingsProps> = ({
                     );
                   })
                 ) : (
-                  <span className="text-xs text-gray-400">선택된 컬럼 없음</span>
+                  <span className="text-xs text-muted-foreground/70">선택된 컬럼 없음</span>
                 )}
               </div>
             </div>
@@ -180,7 +180,7 @@ export const SimpleKeySettings: React.FC<SimpleKeySettingsProps> = ({
       {/* 단순 키값 연결 설정 */}
       <div className="rounded-lg border border-l-4 border-l-blue-500 bg-accent/30 p-4">
         <div className="mb-3 flex items-center gap-2">
-          <Key className="h-4 w-4 text-blue-500" />
+          <Key className="h-4 w-4 text-primary" />
           <span className="text-sm font-medium">단순 키값 연결 설정</span>
         </div>
         <div className="space-y-3">
diff --git a/frontend/components/dataflow/connection/TableSelectionPanel.tsx b/frontend/components/dataflow/connection/TableSelectionPanel.tsx
index 40d0ee4b..e67ed064 100644
--- a/frontend/components/dataflow/connection/TableSelectionPanel.tsx
+++ b/frontend/components/dataflow/connection/TableSelectionPanel.tsx
@@ -187,14 +187,14 @@ export const TableSelectionPanel: React.FC<TableSelectionPanelProps> = ({
     <Card>
       <CardHeader>
         <CardTitle className="flex items-center gap-2">
-          <div className="h-4 w-4 animate-pulse rounded bg-gray-300" />
+          <div className="h-4 w-4 animate-pulse rounded bg-muted/60" />
           {title}
         </CardTitle>
       </CardHeader>
       <CardContent>
         <div className="space-y-2">
-          <div className="h-9 w-full animate-pulse rounded bg-gray-200" />
-          <div className="h-10 w-full animate-pulse rounded bg-gray-200" />
+          <div className="h-9 w-full animate-pulse rounded bg-muted/80" />
+          <div className="h-10 w-full animate-pulse rounded bg-muted/80" />
         </div>
       </CardContent>
     </Card>
@@ -357,7 +357,7 @@ export const TableSelectionPanel: React.FC<TableSelectionPanelProps> = ({
               })()}
             </Badge>
             {selectedFromTable === selectedToTable && (
-              <Badge variant="outline" className="text-orange-600">
+              <Badge variant="outline" className="text-amber-600">
                 자기 자신
               </Badge>
             )}
diff --git a/frontend/components/dataflow/connection/redesigned/DataConnectionDesigner.tsx b/frontend/components/dataflow/connection/redesigned/DataConnectionDesigner.tsx
index cec7c238..3fb71284 100644
--- a/frontend/components/dataflow/connection/redesigned/DataConnectionDesigner.tsx
+++ b/frontend/components/dataflow/connection/redesigned/DataConnectionDesigner.tsx
@@ -8,8 +8,6 @@ import { ConnectionStep } from "./RightPanel/ConnectionStep";
 import { TableStep } from "./RightPanel/TableStep";
 import { FieldMappingStep } from "./RightPanel/FieldMappingStep";
 import { DataConnectionState } from "./types/redesigned";
-import { ResponsiveContainer, ResponsiveGrid } from "@/components/layout/ResponsiveContainer";
-import { useResponsive } from "@/lib/hooks/useResponsive";
 
 const initialState: DataConnectionState = {
     connectionType: "data_save",
@@ -29,13 +27,12 @@ const initialState: DataConnectionState = {
 
 export const DataConnectionDesigner: React.FC = () => {
   const [state, setState] = useState<DataConnectionState>(initialState);
-  const { isMobile, isTablet } = useResponsive();
 
   return (
-    <div className="h-screen bg-gradient-to-br from-slate-50 to-gray-100">
-      <div className="bg-white border-b border-gray-200 px-6 py-4">
-        <h1 className="text-2xl font-bold text-gray-900">
-          🎨 제어관리 - 데이터 연결 설정
+    <div className="h-screen bg-background">
+      <div className="bg-background border-b border-border px-6 py-4">
+        <h1 className="text-2xl font-bold text-foreground">
+          제어관리 - 데이터 연결 설정
         </h1>
         <p className="text-muted-foreground mt-1">
           시각적 필드 매핑으로 데이터 연결을 쉽게 설정하세요
@@ -43,7 +40,7 @@ export const DataConnectionDesigner: React.FC = () => {
               </div>
 
       <div className="flex h-[calc(100vh-80px)]">
-        <div className="w-[30%] bg-white border-r border-gray-200 flex flex-col">
+        <div className="w-[30%] bg-background border-r border-border flex flex-col">
           <ConnectionTypeSelector
             connectionType={state.connectionType}
             onConnectionTypeChange={(type) => setState(prev => ({ ...prev, connectionType: type }))}
@@ -59,7 +56,7 @@ export const DataConnectionDesigner: React.FC = () => {
           </div>
         </div>
 
-        <div className="w-[70%] bg-gray-50 flex flex-col">
+        <div className="w-[70%] bg-muted flex flex-col">
           <StepProgress
             currentStep={state.currentStep}
             onStepChange={(step) => setState(prev => ({ ...prev, currentStep: step }))}
diff --git a/frontend/components/dataflow/connection/redesigned/LeftPanel/ActionButtons.tsx b/frontend/components/dataflow/connection/redesigned/LeftPanel/ActionButtons.tsx
index 18785aae..9d6839d8 100644
--- a/frontend/components/dataflow/connection/redesigned/LeftPanel/ActionButtons.tsx
+++ b/frontend/components/dataflow/connection/redesigned/LeftPanel/ActionButtons.tsx
@@ -102,7 +102,7 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({ state, actions }) => {
         <div className="text-muted-foreground border-t pt-2 text-center text-xs">
           {state.fieldMappings.length}개 매핑 설정됨
           {state.validationErrors.length > 0 && (
-            <span className="ml-1 text-orange-600">({state.validationErrors.length}개 오류)</span>
+            <span className="ml-1 text-amber-600">({state.validationErrors.length}개 오류)</span>
           )}
         </div>
       )}
diff --git a/frontend/components/dataflow/connection/redesigned/LeftPanel/ActionSummaryPanel.tsx b/frontend/components/dataflow/connection/redesigned/LeftPanel/ActionSummaryPanel.tsx
index 8628135e..9ac4d1de 100644
--- a/frontend/components/dataflow/connection/redesigned/LeftPanel/ActionSummaryPanel.tsx
+++ b/frontend/components/dataflow/connection/redesigned/LeftPanel/ActionSummaryPanel.tsx
@@ -44,9 +44,9 @@ const ActionSummaryPanel: React.FC<ActionSummaryPanelProps> = ({ state }) => {
           <Settings className="h-4 w-4" />
           액션 설정
           {isConfigured ? (
-            <CheckCircle className="h-4 w-4 text-green-600" />
+            <CheckCircle className="h-4 w-4 text-emerald-600" />
           ) : (
-            <AlertCircle className="h-4 w-4 text-orange-500" />
+            <AlertCircle className="h-4 w-4 text-amber-500" />
           )}
         </CardTitle>
       </CardHeader>
@@ -79,15 +79,15 @@ const ActionSummaryPanel: React.FC<ActionSummaryPanelProps> = ({ state }) => {
             </div>
 
             {actionConditions.length === 0 && (
-              <p className="text-xs text-orange-600">⚠️ {actionType.toUpperCase()} 액션은 실행 조건이 필요합니다</p>
+              <p className="text-xs text-amber-600">⚠️ {actionType.toUpperCase()} 액션은 실행 조건이 필요합니다</p>
             )}
           </div>
         )}
 
         {/* INSERT 액션 안내 */}
         {actionType === "insert" && (
-          <div className="rounded-md border border-green-200 bg-green-50 p-2">
-            <p className="text-xs text-green-700">✅ INSERT 액션은 별도 조건 없이 모든 매핑된 데이터를 삽입합니다</p>
+          <div className="rounded-md border border-emerald-200 bg-emerald-50 p-2">
+            <p className="text-xs text-emerald-700">✅ INSERT 액션은 별도 조건 없이 모든 매핑된 데이터를 삽입합니다</p>
           </div>
         )}
 
@@ -96,13 +96,13 @@ const ActionSummaryPanel: React.FC<ActionSummaryPanelProps> = ({ state }) => {
           <div className="flex items-center gap-2">
             {isConfigured ? (
               <>
-                <CheckCircle className="h-3 w-3 text-green-600" />
-                <span className="text-xs font-medium text-green-600">설정 완료</span>
+                <CheckCircle className="h-3 w-3 text-emerald-600" />
+                <span className="text-xs font-medium text-emerald-600">설정 완료</span>
               </>
             ) : (
               <>
-                <AlertCircle className="h-3 w-3 text-orange-500" />
-                <span className="text-xs font-medium text-orange-600">설정 필요</span>
+                <AlertCircle className="h-3 w-3 text-amber-500" />
+                <span className="text-xs font-medium text-amber-600">설정 필요</span>
               </>
             )}
           </div>
diff --git a/frontend/components/dataflow/connection/redesigned/LeftPanel/AdvancedSettings.tsx b/frontend/components/dataflow/connection/redesigned/LeftPanel/AdvancedSettings.tsx
index fa2cc2ad..d2cb12ab 100644
--- a/frontend/components/dataflow/connection/redesigned/LeftPanel/AdvancedSettings.tsx
+++ b/frontend/components/dataflow/connection/redesigned/LeftPanel/AdvancedSettings.tsx
@@ -54,7 +54,7 @@ const AdvancedSettings: React.FC<AdvancedSettingsProps> = ({ connectionType }) =
                   <h4 className="text-xs font-medium text-muted-foreground">🔄 트랜잭션 설정</h4>
                   <div className="grid grid-cols-3 gap-2">
                     <div>
-                      <Label htmlFor="batchSize" className="text-xs text-gray-500">
+                      <Label htmlFor="batchSize" className="text-xs text-muted-foreground">
                         배치
                       </Label>
                       <Input
@@ -66,7 +66,7 @@ const AdvancedSettings: React.FC<AdvancedSettingsProps> = ({ connectionType }) =
                       />
                     </div>
                     <div>
-                      <Label htmlFor="timeout" className="text-xs text-gray-500">
+                      <Label htmlFor="timeout" className="text-xs text-muted-foreground">
                         타임아웃
                       </Label>
                       <Input
@@ -78,7 +78,7 @@ const AdvancedSettings: React.FC<AdvancedSettingsProps> = ({ connectionType }) =
                       />
                     </div>
                     <div>
-                      <Label htmlFor="retryCount" className="text-xs text-gray-500">
+                      <Label htmlFor="retryCount" className="text-xs text-muted-foreground">
                         재시도
                       </Label>
                       <Input
@@ -101,7 +101,7 @@ const AdvancedSettings: React.FC<AdvancedSettingsProps> = ({ connectionType }) =
                   <h4 className="text-xs font-medium text-muted-foreground">🌐 API 호출 설정</h4>
                   <div className="grid grid-cols-2 gap-2">
                     <div>
-                      <Label htmlFor="timeout" className="text-xs text-gray-500">
+                      <Label htmlFor="timeout" className="text-xs text-muted-foreground">
                         타임아웃 (초)
                       </Label>
                       <Input
@@ -113,7 +113,7 @@ const AdvancedSettings: React.FC<AdvancedSettingsProps> = ({ connectionType }) =
                       />
                     </div>
                     <div>
-                      <Label htmlFor="retryCount" className="text-xs text-gray-500">
+                      <Label htmlFor="retryCount" className="text-xs text-muted-foreground">
                         재시도 횟수
                       </Label>
                       <Input
diff --git a/frontend/components/dataflow/connection/redesigned/LeftPanel/ConnectionTypeSelector.tsx b/frontend/components/dataflow/connection/redesigned/LeftPanel/ConnectionTypeSelector.tsx
index 8c704beb..6e97ec22 100644
--- a/frontend/components/dataflow/connection/redesigned/LeftPanel/ConnectionTypeSelector.tsx
+++ b/frontend/components/dataflow/connection/redesigned/LeftPanel/ConnectionTypeSelector.tsx
@@ -29,8 +29,8 @@ export const ConnectionTypeSelector: React.FC<ConnectionTypeSelectorProps> = ({
   onConnectionTypeChange,
 }) => {
   return (
-    <div className="p-6 border-b border-gray-200">
-      <h2 className="text-lg font-semibold text-gray-900 mb-4">
+    <div className="p-6 border-b border-border">
+      <h2 className="text-lg font-semibold text-foreground mb-4">
         연결 타입 선택
       </h2>
       
@@ -40,21 +40,21 @@ export const ConnectionTypeSelector: React.FC<ConnectionTypeSelectorProps> = ({
             key={type.id}
             className={`p-4 rounded-lg border-2 cursor-pointer transition-all duration-200 ${
               connectionType === type.id
-                ? "border-orange-500 bg-orange-50 shadow-md"
-                : "border-gray-200 bg-white hover:border-orange-300 hover:bg-orange-25"
+                ? "border-orange-500 bg-amber-50 shadow-md"
+                : "border-border bg-white hover:border-orange-300 hover:bg-orange-25"
             }`}
             onClick={() => onConnectionTypeChange(type.id)}
           >
             <div className="flex items-center gap-3">
               <div className={`p-2 rounded-lg ${
                 connectionType === type.id
-                  ? "bg-orange-100 text-orange-600"
-                  : "bg-gray-100 text-muted-foreground"
+                  ? "bg-amber-100 text-amber-600"
+                  : "bg-muted text-muted-foreground"
               }`}>
                 {type.icon}
               </div>
               <div>
-                <h3 className="font-medium text-gray-900">{type.label}</h3>
+                <h3 className="font-medium text-foreground">{type.label}</h3>
                 <p className="text-sm text-muted-foreground">{type.description}</p>
               </div>
             </div>
diff --git a/frontend/components/dataflow/connection/redesigned/LeftPanel/LeftPanel.tsx b/frontend/components/dataflow/connection/redesigned/LeftPanel/LeftPanel.tsx
index be62206b..fb637aba 100644
--- a/frontend/components/dataflow/connection/redesigned/LeftPanel/LeftPanel.tsx
+++ b/frontend/components/dataflow/connection/redesigned/LeftPanel/LeftPanel.tsx
@@ -89,7 +89,7 @@ const LeftPanel: React.FC<LeftPanelProps> = ({ state, actions }) => {
             <>
               <Separator />
               <div className="rounded-md bg-accent p-3">
-                <h3 className="mb-1 text-sm font-medium text-blue-800">외부 호출 모드</h3>
+                <h3 className="mb-1 text-sm font-medium text-primary">외부 호출 모드</h3>
                 <p className="text-xs text-primary">우측 패널에서 REST API 설정을 구성하세요.</p>
               </div>
             </>
diff --git a/frontend/components/dataflow/connection/redesigned/LeftPanel/MappingDetailList.tsx b/frontend/components/dataflow/connection/redesigned/LeftPanel/MappingDetailList.tsx
index 8a8cf831..916d3762 100644
--- a/frontend/components/dataflow/connection/redesigned/LeftPanel/MappingDetailList.tsx
+++ b/frontend/components/dataflow/connection/redesigned/LeftPanel/MappingDetailList.tsx
@@ -73,12 +73,12 @@ const MappingDetailList: React.FC<MappingDetailListProps> = ({
                       </h4>
                       <div className="mt-1 flex items-center gap-2">
                         {mapping.isValid ? (
-                          <Badge variant="outline" className="text-xs text-green-600">
+                          <Badge variant="outline" className="text-xs text-emerald-600">
                             <CheckCircle className="mr-1 h-3 w-3" />
                             {mapping.fromField?.webType || "Unknown"} → {mapping.toField?.webType || "Unknown"}
                           </Badge>
                         ) : (
-                          <Badge variant="outline" className="text-xs text-orange-600">
+                          <Badge variant="outline" className="text-xs text-amber-600">
                             <AlertTriangle className="mr-1 h-3 w-3" />
                             타입 불일치
                           </Badge>
@@ -119,7 +119,7 @@ const MappingDetailList: React.FC<MappingDetailListProps> = ({
 
                   {/* 검증 메시지 */}
                   {mapping.validationMessage && (
-                    <div className="mt-1 text-xs text-orange-600">{mapping.validationMessage}</div>
+                    <div className="mt-1 text-xs text-amber-600">{mapping.validationMessage}</div>
                   )}
                 </div>
               ));
diff --git a/frontend/components/dataflow/connection/redesigned/LeftPanel/MappingInfoPanel.tsx b/frontend/components/dataflow/connection/redesigned/LeftPanel/MappingInfoPanel.tsx
index 0618bcc6..455eea3e 100644
--- a/frontend/components/dataflow/connection/redesigned/LeftPanel/MappingInfoPanel.tsx
+++ b/frontend/components/dataflow/connection/redesigned/LeftPanel/MappingInfoPanel.tsx
@@ -19,16 +19,16 @@ export const MappingInfoPanel: React.FC<MappingInfoPanelProps> = ({
 }) => {
   return (
     <div className="p-6">
-      <h2 className="text-lg font-semibold text-gray-900 mb-4">
+      <h2 className="text-lg font-semibold text-foreground mb-4">
         매핑 정보
       </h2>
 
       {/* 통계 카드 */}
       <div className="grid grid-cols-2 gap-3 mb-6">
-        <div className="bg-green-50 p-3 rounded-lg border border-green-200">
+        <div className="bg-emerald-50 p-3 rounded-lg border border-emerald-200">
           <div className="flex items-center gap-2">
-            <CheckCircle className="w-4 h-4 text-green-600" />
-            <span className="text-sm font-medium text-green-800">유효한 매핑</span>
+            <CheckCircle className="w-4 h-4 text-emerald-600" />
+            <span className="text-sm font-medium text-emerald-800">유효한 매핑</span>
           </div>
           <div className="text-2xl font-bold text-green-900 mt-1">
             {mappingStats.validMappings}
@@ -48,16 +48,16 @@ export const MappingInfoPanel: React.FC<MappingInfoPanelProps> = ({
         <div className="bg-accent p-3 rounded-lg border border-primary/20">
           <div className="flex items-center gap-2">
             <Database className="w-4 h-4 text-primary" />
-            <span className="text-sm font-medium text-blue-800">총 매핑</span>
+            <span className="text-sm font-medium text-primary">총 매핑</span>
           </div>
-          <div className="text-2xl font-bold text-blue-900 mt-1">
+          <div className="text-2xl font-bold text-primary mt-1">
             {mappingStats.totalMappings}
           </div>
         </div>
 
-        <div className="bg-yellow-50 p-3 rounded-lg border border-yellow-200">
+        <div className="bg-amber-50 p-3 rounded-lg border border-amber-200">
           <div className="flex items-center gap-2">
-            <AlertCircle className="w-4 h-4 text-yellow-600" />
+            <AlertCircle className="w-4 h-4 text-amber-600" />
             <span className="text-sm font-medium text-yellow-800">누락 필드</span>
           </div>
           <div className="text-2xl font-bold text-yellow-900 mt-1">
@@ -68,12 +68,12 @@ export const MappingInfoPanel: React.FC<MappingInfoPanelProps> = ({
 
       {/* 매핑 목록 */}
       <div className="space-y-2">
-        <h3 className="text-sm font-medium text-gray-700 mb-2">
+        <h3 className="text-sm font-medium text-foreground mb-2">
           필드 매핑 목록
         </h3>
         
         {fieldMappings.length === 0 ? (
-          <div className="text-center py-8 text-gray-500">
+          <div className="text-center py-8 text-muted-foreground">
             <Database className="w-8 h-8 mx-auto mb-2 opacity-50" />
             <p className="text-sm">아직 매핑이 없습니다</p>
             <p className="text-xs">3단계에서 필드를 매핑하세요</p>
@@ -85,37 +85,37 @@ export const MappingInfoPanel: React.FC<MappingInfoPanelProps> = ({
                 key={mapping.id}
                 className={`p-3 rounded-lg border cursor-pointer transition-all duration-200 ${
                   selectedMapping === mapping.id
-                    ? "border-orange-500 bg-orange-50"
+                    ? "border-orange-500 bg-amber-50"
                     : mapping.isValid
-                    ? "border-green-200 bg-green-50 hover:border-green-300"
-                    : "border-destructive/20 bg-destructive/10 hover:border-red-300"
+                    ? "border-emerald-200 bg-emerald-50 hover:border-green-300"
+                    : "border-destructive/20 bg-destructive/10 hover:border-destructive/30"
                 }`}
                 onClick={() => onMappingSelect(mapping.id)}
               >
                 <div className="flex items-center justify-between">
                   <div className="flex-1 min-w-0">
                     <div className="flex items-center gap-2">
-                      <span className="text-sm font-medium text-gray-900 truncate">
+                      <span className="text-sm font-medium text-foreground truncate">
                         {mapping.fromField.name}
                       </span>
-                      <span className="text-gray-400">→</span>
-                      <span className="text-sm font-medium text-gray-900 truncate">
+                      <span className="text-muted-foreground/70">→</span>
+                      <span className="text-sm font-medium text-foreground truncate">
                         {mapping.toField.name}
                       </span>
                     </div>
                     <div className="flex items-center gap-2 mt-1">
                       <span className={`text-xs px-2 py-1 rounded ${
                         mapping.fromField.type === mapping.toField.type
-                          ? "bg-green-100 text-green-800"
-                          : "bg-yellow-100 text-yellow-800"
+                          ? "bg-emerald-100 text-emerald-800"
+                          : "bg-amber-100 text-yellow-800"
                       }`}>
                         {mapping.fromField.type}
                       </span>
-                      <span className="text-gray-400">→</span>
+                      <span className="text-muted-foreground/70">→</span>
                       <span className={`text-xs px-2 py-1 rounded ${
                         mapping.fromField.type === mapping.toField.type
-                          ? "bg-green-100 text-green-800"
-                          : "bg-yellow-100 text-yellow-800"
+                          ? "bg-emerald-100 text-emerald-800"
+                          : "bg-amber-100 text-yellow-800"
                       }`}>
                         {mapping.toField.type}
                       </span>
@@ -124,7 +124,7 @@ export const MappingInfoPanel: React.FC<MappingInfoPanelProps> = ({
                   
                   <div className="ml-2">
                     {mapping.isValid ? (
-                      <CheckCircle className="w-4 h-4 text-green-600" />
+                      <CheckCircle className="w-4 h-4 text-emerald-600" />
                     ) : (
                       <XCircle className="w-4 h-4 text-destructive" />
                     )}
diff --git a/frontend/components/dataflow/connection/redesigned/RightPanel/ActionConfig/ActionConditionBuilder.tsx b/frontend/components/dataflow/connection/redesigned/RightPanel/ActionConfig/ActionConditionBuilder.tsx
index 7b13e38c..be08029e 100644
--- a/frontend/components/dataflow/connection/redesigned/RightPanel/ActionConfig/ActionConditionBuilder.tsx
+++ b/frontend/components/dataflow/connection/redesigned/RightPanel/ActionConfig/ActionConditionBuilder.tsx
@@ -293,7 +293,7 @@ const ActionConditionBuilder: React.FC<ActionConditionBuilderProps> = ({
                   .map((column) => (
                     <SelectItem key={`to_${column.columnName}`} value={`to.${column.columnName}`}>
                       <div className="flex items-center gap-2">
-                        <span className="text-green-600">📥</span>
+                        <span className="text-emerald-600">📥</span>
                         <span>{column.displayName || column.columnName}</span>
                         <Badge variant="outline" className="text-xs">
                           {column.webType || column.dataType}
@@ -419,7 +419,7 @@ const ActionConditionBuilder: React.FC<ActionConditionBuilderProps> = ({
 
           {/* 선택된 숫자 타입에 대한 설명 */}
           {mapping.value?.startsWith("#") && mapping.value !== "#custom" && (
-            <div className="text-muted-foreground rounded bg-green-50 p-2 text-xs">
+            <div className="text-muted-foreground rounded bg-emerald-50 p-2 text-xs">
               {mapping.value === "#AUTO_INCREMENT" && "🔢 데이터베이스에서 자동으로 증가하는 값이 할당됩니다"}
               {mapping.value === "#RANDOM_INT" && "🎲 1부터 1000 사이의 랜덤한 정수가 생성됩니다"}
               {mapping.value === "#ZERO" && "0️⃣ 0 값이 저장됩니다"}
@@ -514,7 +514,7 @@ const ActionConditionBuilder: React.FC<ActionConditionBuilderProps> = ({
                             .map((column) => (
                               <SelectItem key={`to_${column.columnName}`} value={`to.${column.columnName}`}>
                                 <div className="flex items-center gap-2">
-                                  <span className="text-green-600">📥</span>
+                                  <span className="text-emerald-600">📥</span>
                                   <span>{column.displayName || column.columnName}</span>
                                 </div>
                               </SelectItem>
@@ -642,7 +642,7 @@ const ActionConditionBuilder: React.FC<ActionConditionBuilderProps> = ({
                                       .map((column) => (
                                         <SelectItem key={`to_${column.columnName}`} value={`to.${column.columnName}`}>
                                           <div className="flex items-center gap-2">
-                                            <span className="text-green-600">📥</span>
+                                            <span className="text-emerald-600">📥</span>
                                             <span>{column.displayName || column.columnName}</span>
                                           </div>
                                         </SelectItem>
@@ -698,9 +698,9 @@ const ActionConditionBuilder: React.FC<ActionConditionBuilderProps> = ({
           <CardContent className="space-y-3">
             {/* 매핑되지 않은 필드가 없는 경우 */}
             {getUnmappedToColumns().length === 0 ? (
-              <div className="rounded-lg border bg-green-50 p-4 text-center">
-                <div className="mb-2 text-green-600">✅ 모든 필드가 매핑되었습니다</div>
-                <p className="text-sm text-green-700">
+              <div className="rounded-lg border bg-emerald-50 p-4 text-center">
+                <div className="mb-2 text-emerald-600">✅ 모든 필드가 매핑되었습니다</div>
+                <p className="text-sm text-emerald-700">
                   컬럼 매핑으로 모든 TO 테이블 필드가 처리되고 있어 별도의 기본값 설정이 필요하지 않습니다.
                 </p>
               </div>
diff --git a/frontend/components/dataflow/connection/redesigned/RightPanel/ConnectionStep.tsx b/frontend/components/dataflow/connection/redesigned/RightPanel/ConnectionStep.tsx
index 11b59d15..cbe268f2 100644
--- a/frontend/components/dataflow/connection/redesigned/RightPanel/ConnectionStep.tsx
+++ b/frontend/components/dataflow/connection/redesigned/RightPanel/ConnectionStep.tsx
@@ -77,7 +77,7 @@ export const ConnectionStep: React.FC<ConnectionStepProps> = ({
   return (
     <div className="space-y-8">
       <div className="text-center">
-        <h2 className="text-2xl font-bold text-gray-900 mb-2">
+        <h2 className="text-2xl font-bold text-foreground mb-2">
           연결 선택
         </h2>
         <p className="text-muted-foreground">
@@ -92,8 +92,8 @@ export const ConnectionStep: React.FC<ConnectionStepProps> = ({
             <div className="w-8 h-8 bg-primary/20 rounded-full flex items-center justify-center">
               <span className="text-primary font-bold">1</span>
             </div>
-            <h3 className="text-lg font-semibold text-gray-900">FROM 연결</h3>
-            <span className="text-sm text-gray-500">(데이터 소스)</span>
+            <h3 className="text-lg font-semibold text-foreground">FROM 연결</h3>
+            <span className="text-sm text-muted-foreground">(데이터 소스)</span>
           </div>
           
           <div className="space-y-2">
@@ -103,16 +103,16 @@ export const ConnectionStep: React.FC<ConnectionStepProps> = ({
                 className={`p-4 rounded-lg border-2 cursor-pointer transition-all duration-200 ${
                   selectedFrom === connection.id
                     ? "border-primary bg-accent shadow-md"
-                    : "border-gray-200 bg-white hover:border-blue-300 hover:bg-blue-25"
+                    : "border-border bg-white hover:border-primary/40 hover:bg-blue-25"
                 }`}
                 onClick={() => handleFromSelect(connection.id)}
               >
                 <div className="flex items-center gap-3">
                   <Database className="w-6 h-6 text-primary" />
                   <div className="flex-1">
-                    <h4 className="font-medium text-gray-900">{connection.name}</h4>
+                    <h4 className="font-medium text-foreground">{connection.name}</h4>
                     <p className="text-sm text-muted-foreground">{connection.type}</p>
-                    <p className="text-xs text-gray-500">{connection.host}:{connection.port}</p>
+                    <p className="text-xs text-muted-foreground">{connection.host}:{connection.port}</p>
                   </div>
                   {selectedFrom === connection.id && (
                     <CheckCircle className="w-5 h-5 text-primary" />
@@ -125,19 +125,19 @@ export const ConnectionStep: React.FC<ConnectionStepProps> = ({
 
         {/* 화살표 */}
         <div className="hidden lg:flex items-center justify-center">
-          <div className="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center">
-            <ArrowRight className="w-6 h-6 text-orange-600" />
+          <div className="w-12 h-12 bg-amber-100 rounded-full flex items-center justify-center">
+            <ArrowRight className="w-6 h-6 text-amber-600" />
           </div>
         </div>
 
         {/* TO 연결 */}
         <div className="space-y-4">
           <div className="flex items-center gap-2">
-            <div className="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center">
-              <span className="text-green-600 font-bold">2</span>
+            <div className="w-8 h-8 bg-emerald-100 rounded-full flex items-center justify-center">
+              <span className="text-emerald-600 font-bold">2</span>
             </div>
-            <h3 className="text-lg font-semibold text-gray-900">TO 연결</h3>
-            <span className="text-sm text-gray-500">(데이터 대상)</span>
+            <h3 className="text-lg font-semibold text-foreground">TO 연결</h3>
+            <span className="text-sm text-muted-foreground">(데이터 대상)</span>
           </div>
           
           <div className="space-y-2">
@@ -146,20 +146,20 @@ export const ConnectionStep: React.FC<ConnectionStepProps> = ({
                 key={connection.id}
                 className={`p-4 rounded-lg border-2 cursor-pointer transition-all duration-200 ${
                   selectedTo === connection.id
-                    ? "border-green-500 bg-green-50 shadow-md"
-                    : "border-gray-200 bg-white hover:border-green-300 hover:bg-green-25"
+                    ? "border-emerald-500 bg-emerald-50 shadow-md"
+                    : "border-border bg-white hover:border-green-300 hover:bg-green-25"
                 }`}
                 onClick={() => handleToSelect(connection.id)}
               >
                 <div className="flex items-center gap-3">
-                  <Database className="w-6 h-6 text-green-600" />
+                  <Database className="w-6 h-6 text-emerald-600" />
                   <div className="flex-1">
-                    <h4 className="font-medium text-gray-900">{connection.name}</h4>
+                    <h4 className="font-medium text-foreground">{connection.name}</h4>
                     <p className="text-sm text-muted-foreground">{connection.type}</p>
-                    <p className="text-xs text-gray-500">{connection.host}:{connection.port}</p>
+                    <p className="text-xs text-muted-foreground">{connection.host}:{connection.port}</p>
                   </div>
                   {selectedTo === connection.id && (
-                    <CheckCircle className="w-5 h-5 text-green-600" />
+                    <CheckCircle className="w-5 h-5 text-emerald-600" />
                   )}
                 </div>
               </div>
@@ -175,8 +175,8 @@ export const ConnectionStep: React.FC<ConnectionStepProps> = ({
           disabled={!canProceed}
           className={`px-6 py-3 rounded-lg font-medium transition-all duration-200 ${
             canProceed
-              ? "bg-orange-500 text-white hover:bg-orange-600 shadow-md hover:shadow-lg"
-              : "bg-gray-300 text-gray-500 cursor-not-allowed"
+              ? "bg-amber-500 text-white hover:bg-orange-600 shadow-md hover:shadow-lg"
+              : "bg-muted/60 text-muted-foreground cursor-not-allowed"
           }`}
         >
           다음 단계: 테이블 선택
diff --git a/frontend/components/dataflow/connection/redesigned/RightPanel/DataflowVisualization.tsx b/frontend/components/dataflow/connection/redesigned/RightPanel/DataflowVisualization.tsx
index 2c182256..7b39944d 100644
--- a/frontend/components/dataflow/connection/redesigned/RightPanel/DataflowVisualization.tsx
+++ b/frontend/components/dataflow/connection/redesigned/RightPanel/DataflowVisualization.tsx
@@ -5,16 +5,45 @@ import { Card, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Database, Filter, Zap, CheckCircle, XCircle, Edit } from "lucide-react";
-import { DataConnectionState } from "../types/redesigned";
+interface TableRef {
+  tableName?: string;
+  tableLabel?: string;
+  displayName?: string;
+  [key: string]: any;
+}
+
+interface ColumnRef {
+  columnName?: string;
+  displayName?: string;
+  labelKo?: string;
+  [key: string]: any;
+}
+
+interface ControlCondition {
+  field: string;
+  operator: string;
+  value: string;
+  logicalOperator?: string;
+  [key: string]: any;
+}
+
+interface DataflowAction {
+  actionType: string;
+  targetTable?: string;
+  name?: string;
+  fieldMappings?: any[];
+  [key: string]: any;
+}
 
 interface DataflowVisualizationProps {
-  state: Partial<DataConnectionState> & {
-    dataflowActions?: Array<{
-      actionType: string;
-      targetTable?: string;
-      name?: string;
-      fieldMappings?: any[];
-    }>;
+  state: {
+    fromTable?: TableRef;
+    toTable?: TableRef;
+    controlConditions?: ControlCondition[];
+    dataflowActions?: DataflowAction[];
+    fromColumns?: ColumnRef[];
+    toColumns?: ColumnRef[];
+    [key: string]: any;
   };
   onEdit: (step: "source" | "conditions" | "actions") => void;
 }
@@ -256,7 +285,7 @@ export const DataflowVisualization: React.FC<DataflowVisualizationProps> = ({ st
       </div>
 
       {/* 통계 요약 */}
-      <Card className="border-border bg-gradient-to-r from-muted to-muted/50">
+      <Card className="border-border bg-muted/50">
         <CardContent>
           <div className="p-4">
           <div className="flex flex-col items-center justify-around gap-4 text-center sm:flex-row sm:gap-0">
diff --git a/frontend/components/dataflow/connection/redesigned/RightPanel/FieldMappingStep.tsx b/frontend/components/dataflow/connection/redesigned/RightPanel/FieldMappingStep.tsx
index 9513d42d..95b0a316 100644
--- a/frontend/components/dataflow/connection/redesigned/RightPanel/FieldMappingStep.tsx
+++ b/frontend/components/dataflow/connection/redesigned/RightPanel/FieldMappingStep.tsx
@@ -68,7 +68,7 @@ export const FieldMappingStep: React.FC<FieldMappingStepProps> = ({
   return (
     <div className="space-y-8">
       <div className="text-center">
-        <h2 className="text-2xl font-bold text-gray-900 mb-2">
+        <h2 className="text-2xl font-bold text-foreground mb-2">
           필드 매핑
         </h2>
         <p className="text-muted-foreground">
@@ -79,22 +79,22 @@ export const FieldMappingStep: React.FC<FieldMappingStepProps> = ({
       {/* 매핑 통계 */}
       <div className="grid grid-cols-4 gap-4">
         <div className="bg-accent p-4 rounded-lg border border-primary/20">
-          <div className="text-2xl font-bold text-blue-900">{fieldMappings.length}</div>
-          <div className="text-sm text-blue-700">총 매핑</div>
+          <div className="text-2xl font-bold text-primary">{fieldMappings.length}</div>
+          <div className="text-sm text-primary">총 매핑</div>
         </div>
-        <div className="bg-green-50 p-4 rounded-lg border border-green-200">
+        <div className="bg-emerald-50 p-4 rounded-lg border border-emerald-200">
           <div className="text-2xl font-bold text-green-900">
             {fieldMappings.filter(m => m.isValid).length}
           </div>
-          <div className="text-sm text-green-700">유효한 매핑</div>
+          <div className="text-sm text-emerald-700">유효한 매핑</div>
         </div>
         <div className="bg-destructive/10 p-4 rounded-lg border border-destructive/20">
           <div className="text-2xl font-bold text-red-900">
             {fieldMappings.filter(m => !m.isValid).length}
           </div>
-          <div className="text-sm text-red-700">오류 매핑</div>
+          <div className="text-sm text-destructive">오류 매핑</div>
         </div>
-        <div className="bg-yellow-50 p-4 rounded-lg border border-yellow-200">
+        <div className="bg-amber-50 p-4 rounded-lg border border-amber-200">
           <div className="text-2xl font-bold text-yellow-900">
             {(toTable?.columns.length || 0) - fieldMappings.length}
           </div>
@@ -106,7 +106,7 @@ export const FieldMappingStep: React.FC<FieldMappingStepProps> = ({
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
         {/* FROM 테이블 필드들 */}
         <div className="space-y-4">
-          <h3 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
+          <h3 className="text-lg font-semibold text-foreground flex items-center gap-2">
             <div className="w-6 h-6 bg-primary/20 rounded-full flex items-center justify-center">
               <span className="text-primary font-bold text-sm">FROM</span>
             </div>
@@ -121,22 +121,22 @@ export const FieldMappingStep: React.FC<FieldMappingStepProps> = ({
                 onDragStart={() => handleDragStart(field)}
                 className={`p-3 rounded-lg border-2 cursor-move transition-all duration-200 ${
                   isFieldMapped(field.name)
-                    ? "border-green-300 bg-green-50 opacity-60"
-                    : "border-primary/20 bg-accent hover:border-blue-400 hover:bg-primary/20"
+                    ? "border-green-300 bg-emerald-50 opacity-60"
+                    : "border-primary/20 bg-accent hover:border-primary/60 hover:bg-primary/20"
                 }`}
               >
                 <div className="flex items-center justify-between">
                   <div>
-                    <div className="font-medium text-gray-900">{field.name}</div>
+                    <div className="font-medium text-foreground">{field.name}</div>
                     <div className="text-sm text-muted-foreground">{field.type}</div>
                     {field.primaryKey && (
-                      <span className="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded">
+                      <span className="text-xs bg-amber-100 text-yellow-800 px-2 py-1 rounded">
                         PK
                       </span>
                     )}
                   </div>
                   {isFieldMapped(field.name) && (
-                    <CheckCircle className="w-5 h-5 text-green-600" />
+                    <CheckCircle className="w-5 h-5 text-emerald-600" />
                   )}
                 </div>
               </div>
@@ -146,9 +146,9 @@ export const FieldMappingStep: React.FC<FieldMappingStepProps> = ({
 
         {/* TO 테이블 필드들 */}
         <div className="space-y-4">
-          <h3 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
-            <div className="w-6 h-6 bg-green-100 rounded-full flex items-center justify-center">
-              <span className="text-green-600 font-bold text-sm">TO</span>
+          <h3 className="text-lg font-semibold text-foreground flex items-center gap-2">
+            <div className="w-6 h-6 bg-emerald-100 rounded-full flex items-center justify-center">
+              <span className="text-emerald-600 font-bold text-sm">TO</span>
             </div>
             {toTable?.name} 필드들
           </h3>
@@ -163,21 +163,21 @@ export const FieldMappingStep: React.FC<FieldMappingStepProps> = ({
                   onDrop={(e) => handleDrop(e, field)}
                   className={`p-3 rounded-lg border-2 transition-all duration-200 ${
                     mappedFromField
-                      ? "border-green-300 bg-green-50"
-                      : "border-gray-200 bg-gray-50 hover:border-green-300 hover:bg-green-25"
+                      ? "border-green-300 bg-emerald-50"
+                      : "border-border bg-muted hover:border-green-300 hover:bg-green-25"
                   }`}
                 >
                   <div className="flex items-center justify-between">
                     <div>
-                      <div className="font-medium text-gray-900">{field.name}</div>
+                      <div className="font-medium text-foreground">{field.name}</div>
                       <div className="text-sm text-muted-foreground">{field.type}</div>
                       {field.primaryKey && (
-                        <span className="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded">
+                        <span className="text-xs bg-amber-100 text-yellow-800 px-2 py-1 rounded">
                           PK
                         </span>
                       )}
                       {mappedFromField && (
-                        <div className="text-xs text-green-700 mt-1">
+                        <div className="text-xs text-emerald-700 mt-1">
                           ← {mappedFromField.name} ({mappedFromField.type})
                         </div>
                       )}
@@ -186,7 +186,7 @@ export const FieldMappingStep: React.FC<FieldMappingStepProps> = ({
                       {mappedFromField && (
                         <button
                           onClick={() => removeMapping(`${mappedFromField.name}-${field.name}`)}
-                          className="text-red-500 hover:text-red-700"
+                          className="text-destructive hover:text-destructive"
                         >
                           <XCircle className="w-4 h-4" />
                         </button>
@@ -194,7 +194,7 @@ export const FieldMappingStep: React.FC<FieldMappingStepProps> = ({
                       {mappedFromField && (
                         <div>
                           {fieldMappings.find(m => m.toField.name === field.name)?.isValid ? (
-                            <CheckCircle className="w-5 h-5 text-green-600" />
+                            <CheckCircle className="w-5 h-5 text-emerald-600" />
                           ) : (
                             <AlertCircle className="w-5 h-5 text-destructive" />
                           )}
@@ -213,7 +213,7 @@ export const FieldMappingStep: React.FC<FieldMappingStepProps> = ({
       <div className="flex justify-between">
         <button
           onClick={onBack}
-          className="flex items-center gap-2 px-6 py-3 rounded-lg font-medium text-muted-foreground bg-gray-100 hover:bg-gray-200 transition-all duration-200"
+          className="flex items-center gap-2 px-6 py-3 rounded-lg font-medium text-muted-foreground bg-muted hover:bg-muted/80 transition-all duration-200"
         >
           <ArrowLeft className="w-4 h-4" />
           이전 단계
@@ -221,7 +221,7 @@ export const FieldMappingStep: React.FC<FieldMappingStepProps> = ({
         
         <button
           onClick={onSave}
-          className="flex items-center gap-2 px-6 py-3 rounded-lg font-medium bg-orange-500 text-white hover:bg-orange-600 shadow-md hover:shadow-lg transition-all duration-200"
+          className="flex items-center gap-2 px-6 py-3 rounded-lg font-medium bg-amber-500 text-white hover:bg-orange-600 shadow-md hover:shadow-lg transition-all duration-200"
         >
           <Save className="w-4 h-4" />
           연결 설정 저장
diff --git a/frontend/components/dataflow/connection/redesigned/RightPanel/RightPanel.tsx b/frontend/components/dataflow/connection/redesigned/RightPanel/RightPanel.tsx
index f81b48fe..dc1ab1d0 100644
--- a/frontend/components/dataflow/connection/redesigned/RightPanel/RightPanel.tsx
+++ b/frontend/components/dataflow/connection/redesigned/RightPanel/RightPanel.tsx
@@ -89,7 +89,7 @@ const RightPanel: React.FC<RightPanelProps> = ({ state, actions }) => {
                     value={state.relationshipName || ""}
                     onChange={(e) => actions.setRelationshipName(e.target.value)}
                     placeholder="외부호출 관계의 이름을 입력하세요"
-                    className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-primary focus:ring-1 focus:ring-blue-500 focus:outline-none"
+                    className="mt-1 w-full rounded-md border border-input px-3 py-2 text-sm focus:border-primary focus:ring-1 focus:ring-ring focus:outline-none"
                   />
                 </div>
                 <div>
@@ -99,7 +99,7 @@ const RightPanel: React.FC<RightPanelProps> = ({ state, actions }) => {
                     onChange={(e) => actions.setDescription(e.target.value)}
                     placeholder="외부호출의 용도나 설명을 입력하세요"
                     rows={2}
-                    className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-primary focus:ring-1 focus:ring-blue-500 focus:outline-none"
+                    className="mt-1 w-full rounded-md border border-input px-3 py-2 text-sm focus:border-primary focus:ring-1 focus:ring-ring focus:outline-none"
                   />
                 </div>
               </div>
@@ -135,7 +135,7 @@ const RightPanel: React.FC<RightPanelProps> = ({ state, actions }) => {
               <div className="flex gap-3">
                 <Button
                   onClick={actions.saveMappings}
-                  className="w-full bg-blue-600 hover:bg-blue-700"
+                  className="w-full bg-primary hover:bg-primary/90"
                   disabled={state.isLoading}
                 >
                   {state.isLoading ? "저장 중..." : "저장"}
diff --git a/frontend/components/dataflow/connection/redesigned/RightPanel/StepProgress.tsx b/frontend/components/dataflow/connection/redesigned/RightPanel/StepProgress.tsx
index d4d2eea3..16db816e 100644
--- a/frontend/components/dataflow/connection/redesigned/RightPanel/StepProgress.tsx
+++ b/frontend/components/dataflow/connection/redesigned/RightPanel/StepProgress.tsx
@@ -19,7 +19,7 @@ export const StepProgress: React.FC<StepProgressProps> = ({
   onStepChange,
 }) => {
   return (
-    <div className="bg-white border-b border-gray-200 px-6 py-4">
+    <div className="bg-white border-b border-border px-6 py-4">
       <div className="flex items-center justify-between">
         {steps.map((step, index) => (
           <React.Fragment key={step.id}>
@@ -32,10 +32,10 @@ export const StepProgress: React.FC<StepProgressProps> = ({
               <div
                 className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium transition-all duration-200 ${
                   step.id < currentStep
-                    ? "bg-green-500 text-white"
+                    ? "bg-emerald-500 text-white"
                     : step.id === currentStep
-                    ? "bg-orange-500 text-white"
-                    : "bg-gray-200 text-muted-foreground"
+                    ? "bg-amber-500 text-white"
+                    : "bg-muted/80 text-muted-foreground"
                 }`}
               >
                 {step.id < currentStep ? (
@@ -47,12 +47,12 @@ export const StepProgress: React.FC<StepProgressProps> = ({
               
               <div>
                 <h3 className={`text-sm font-medium ${
-                  step.id <= currentStep ? "text-gray-900" : "text-gray-500"
+                  step.id <= currentStep ? "text-foreground" : "text-muted-foreground"
                 }`}>
                   {step.title}
                 </h3>
                 <p className={`text-xs ${
-                  step.id <= currentStep ? "text-muted-foreground" : "text-gray-400"
+                  step.id <= currentStep ? "text-muted-foreground" : "text-muted-foreground/70"
                 }`}>
                   {step.description}
                 </p>
@@ -60,7 +60,7 @@ export const StepProgress: React.FC<StepProgressProps> = ({
             </div>
             
             {index < steps.length - 1 && (
-              <ArrowRight className="w-4 h-4 text-gray-400 mx-4" />
+              <ArrowRight className="w-4 h-4 text-muted-foreground/70 mx-4" />
             )}
           </React.Fragment>
         ))}
diff --git a/frontend/components/dataflow/connection/redesigned/RightPanel/TableStep.tsx b/frontend/components/dataflow/connection/redesigned/RightPanel/TableStep.tsx
index cb9bc04b..1ece6d1e 100644
--- a/frontend/components/dataflow/connection/redesigned/RightPanel/TableStep.tsx
+++ b/frontend/components/dataflow/connection/redesigned/RightPanel/TableStep.tsx
@@ -87,7 +87,7 @@ export const TableStep: React.FC<TableStepProps> = ({
   return (
     <div className="space-y-8">
       <div className="text-center">
-        <h2 className="text-2xl font-bold text-gray-900 mb-2">
+        <h2 className="text-2xl font-bold text-foreground mb-2">
           테이블 선택
         </h2>
         <p className="text-muted-foreground">
@@ -96,14 +96,14 @@ export const TableStep: React.FC<TableStepProps> = ({
       </div>
 
       {/* 연결 정보 표시 */}
-      <div className="bg-gray-50 rounded-lg p-4">
+      <div className="bg-muted rounded-lg p-4">
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-3">
             <Database className="w-5 h-5 text-primary" />
-            <span className="font-medium text-gray-900">{fromConnection?.name}</span>
-            <span className="text-sm text-gray-500">→</span>
-            <Database className="w-5 h-5 text-green-600" />
-            <span className="font-medium text-gray-900">{toConnection?.name}</span>
+            <span className="font-medium text-foreground">{fromConnection?.name}</span>
+            <span className="text-sm text-muted-foreground">→</span>
+            <Database className="w-5 h-5 text-emerald-600" />
+            <span className="font-medium text-foreground">{toConnection?.name}</span>
           </div>
         </div>
       </div>
@@ -115,8 +115,8 @@ export const TableStep: React.FC<TableStepProps> = ({
             <div className="w-8 h-8 bg-primary/20 rounded-full flex items-center justify-center">
               <span className="text-primary font-bold">1</span>
             </div>
-            <h3 className="text-lg font-semibold text-gray-900">소스 테이블</h3>
-            <span className="text-sm text-gray-500">(FROM)</span>
+            <h3 className="text-lg font-semibold text-foreground">소스 테이블</h3>
+            <span className="text-sm text-muted-foreground">(FROM)</span>
           </div>
           
           <div className="space-y-2">
@@ -126,16 +126,16 @@ export const TableStep: React.FC<TableStepProps> = ({
                 className={`p-4 rounded-lg border-2 cursor-pointer transition-all duration-200 ${
                   selectedFromTable === table.name
                     ? "border-primary bg-accent shadow-md"
-                    : "border-gray-200 bg-white hover:border-blue-300 hover:bg-blue-25"
+                    : "border-border bg-white hover:border-primary/40 hover:bg-blue-25"
                 }`}
                 onClick={() => handleFromTableSelect(table.name)}
               >
                 <div className="flex items-center gap-3">
                   <Table className="w-6 h-6 text-primary" />
                   <div className="flex-1">
-                    <h4 className="font-medium text-gray-900">{table.name}</h4>
+                    <h4 className="font-medium text-foreground">{table.name}</h4>
                     <p className="text-sm text-muted-foreground">{table.columns.length}개 컬럼</p>
-                    <p className="text-xs text-gray-500">{table.rowCount?.toLocaleString()}개 행</p>
+                    <p className="text-xs text-muted-foreground">{table.rowCount?.toLocaleString()}개 행</p>
                   </div>
                   {selectedFromTable === table.name && (
                     <CheckCircle className="w-5 h-5 text-primary" />
@@ -149,11 +149,11 @@ export const TableStep: React.FC<TableStepProps> = ({
         {/* TO 테이블 */}
         <div className="space-y-4">
           <div className="flex items-center gap-2">
-            <div className="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center">
-              <span className="text-green-600 font-bold">2</span>
+            <div className="w-8 h-8 bg-emerald-100 rounded-full flex items-center justify-center">
+              <span className="text-emerald-600 font-bold">2</span>
             </div>
-            <h3 className="text-lg font-semibold text-gray-900">대상 테이블</h3>
-            <span className="text-sm text-gray-500">(TO)</span>
+            <h3 className="text-lg font-semibold text-foreground">대상 테이블</h3>
+            <span className="text-sm text-muted-foreground">(TO)</span>
           </div>
           
           <div className="space-y-2">
@@ -162,20 +162,20 @@ export const TableStep: React.FC<TableStepProps> = ({
                 key={table.name}
                 className={`p-4 rounded-lg border-2 cursor-pointer transition-all duration-200 ${
                   selectedToTable === table.name
-                    ? "border-green-500 bg-green-50 shadow-md"
-                    : "border-gray-200 bg-white hover:border-green-300 hover:bg-green-25"
+                    ? "border-emerald-500 bg-emerald-50 shadow-md"
+                    : "border-border bg-white hover:border-green-300 hover:bg-green-25"
                 }`}
                 onClick={() => handleToTableSelect(table.name)}
               >
                 <div className="flex items-center gap-3">
-                  <Table className="w-6 h-6 text-green-600" />
+                  <Table className="w-6 h-6 text-emerald-600" />
                   <div className="flex-1">
-                    <h4 className="font-medium text-gray-900">{table.name}</h4>
+                    <h4 className="font-medium text-foreground">{table.name}</h4>
                     <p className="text-sm text-muted-foreground">{table.columns.length}개 컬럼</p>
-                    <p className="text-xs text-gray-500">{table.rowCount?.toLocaleString()}개 행</p>
+                    <p className="text-xs text-muted-foreground">{table.rowCount?.toLocaleString()}개 행</p>
                   </div>
                   {selectedToTable === table.name && (
-                    <CheckCircle className="w-5 h-5 text-green-600" />
+                    <CheckCircle className="w-5 h-5 text-emerald-600" />
                   )}
                 </div>
               </div>
@@ -188,7 +188,7 @@ export const TableStep: React.FC<TableStepProps> = ({
       <div className="flex justify-between">
         <button
           onClick={onBack}
-          className="flex items-center gap-2 px-6 py-3 rounded-lg font-medium text-muted-foreground bg-gray-100 hover:bg-gray-200 transition-all duration-200"
+          className="flex items-center gap-2 px-6 py-3 rounded-lg font-medium text-muted-foreground bg-muted hover:bg-muted/80 transition-all duration-200"
         >
           <ArrowLeft className="w-4 h-4" />
           이전 단계
@@ -199,8 +199,8 @@ export const TableStep: React.FC<TableStepProps> = ({
           disabled={!canProceed}
           className={`flex items-center gap-2 px-6 py-3 rounded-lg font-medium transition-all duration-200 ${
             canProceed
-              ? "bg-orange-500 text-white hover:bg-orange-600 shadow-md hover:shadow-lg"
-              : "bg-gray-300 text-gray-500 cursor-not-allowed"
+              ? "bg-amber-500 text-white hover:bg-orange-600 shadow-md hover:shadow-lg"
+              : "bg-muted/60 text-muted-foreground cursor-not-allowed"
           }`}
         >
           다음 단계: 필드 매핑
diff --git a/frontend/components/dataflow/connection/redesigned/RightPanel/VisualMapping/FieldColumn.tsx b/frontend/components/dataflow/connection/redesigned/RightPanel/VisualMapping/FieldColumn.tsx
index b3deefd6..536a4878 100644
--- a/frontend/components/dataflow/connection/redesigned/RightPanel/VisualMapping/FieldColumn.tsx
+++ b/frontend/components/dataflow/connection/redesigned/RightPanel/VisualMapping/FieldColumn.tsx
@@ -126,11 +126,11 @@ const FieldColumn: React.FC<FieldColumnProps> = ({
             : isSelected
               ? "border-primary bg-primary/10 shadow-md"
               : isMapped
-                ? "border-green-500 bg-green-50 shadow-sm"
+                ? "border-emerald-500 bg-emerald-50 shadow-sm"
                 : isBlockedDropTarget
-                  ? "border-red-400 bg-destructive/10 shadow-md"
+                  ? "border-destructive/60 bg-destructive/10 shadow-md"
                   : isDropTarget
-                    ? "border-blue-400 bg-accent shadow-md"
+                    ? "border-primary/60 bg-accent shadow-md"
                     : "border-border hover:bg-muted/50 hover:shadow-sm"
         } `}
         draggable={type === "from" && !isMapped}
@@ -146,8 +146,8 @@ const FieldColumn: React.FC<FieldColumnProps> = ({
             isSelected
               ? "bg-primary border-primary"
               : isMapped
-                ? "border-green-500 bg-green-500"
-                : "border-gray-300 bg-white"
+                ? "border-emerald-500 bg-emerald-500"
+                : "border-input bg-white"
           } `}
           style={{
             [type === "from" ? "right" : "left"]: "-6px",
@@ -156,9 +156,9 @@ const FieldColumn: React.FC<FieldColumnProps> = ({
 
         <div className="flex items-center justify-between">
           <div className="flex min-w-0 flex-1 items-center gap-2">
-            {type === "from" && !isMapped && <GripVertical className="h-3 w-3 flex-shrink-0 text-gray-400" />}
+            {type === "from" && !isMapped && <GripVertical className="h-3 w-3 flex-shrink-0 text-muted-foreground/70" />}
             <span className="truncate text-sm font-medium">{displayName}</span>
-            {isMapped && <Link className="h-3 w-3 flex-shrink-0 text-green-600" />}
+            {isMapped && <Link className="h-3 w-3 flex-shrink-0 text-emerald-600" />}
           </div>
           <Badge variant="outline" className="flex-shrink-0 text-xs">
             {field.webType || field.dataType || "unknown"}
diff --git a/frontend/components/dataflow/connection/redesigned/RightPanel/VisualMapping/MappingControls.tsx b/frontend/components/dataflow/connection/redesigned/RightPanel/VisualMapping/MappingControls.tsx
index 570ac517..df311456 100644
--- a/frontend/components/dataflow/connection/redesigned/RightPanel/VisualMapping/MappingControls.tsx
+++ b/frontend/components/dataflow/connection/redesigned/RightPanel/VisualMapping/MappingControls.tsx
@@ -91,9 +91,9 @@ const MappingControls: React.FC<MappingControlsProps> = ({
               </Badge>
               {/* 타입 호환성 아이콘 */}
               {selectedFromField.webType === selectedToField.webType ? (
-                <span className="text-xs text-green-600">✅</span>
+                <span className="text-xs text-emerald-600">✅</span>
               ) : (
-                <span className="text-xs text-orange-600">⚠️</span>
+                <span className="text-xs text-amber-600">⚠️</span>
               )}
             </div>
           </div>
diff --git a/frontend/components/dataflow/external-call/ExternalCallPanel.tsx b/frontend/components/dataflow/external-call/ExternalCallPanel.tsx
index ea8add8d..3feb48b7 100644
--- a/frontend/components/dataflow/external-call/ExternalCallPanel.tsx
+++ b/frontend/components/dataflow/external-call/ExternalCallPanel.tsx
@@ -222,7 +222,7 @@ const ExternalCallPanel: React.FC<ExternalCallPanelProps> = ({
         <CardHeader className="pt-3 pb-2">
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-2">
-              <Globe className="h-5 w-5 text-blue-500" />
+              <Globe className="h-5 w-5 text-primary" />
               <CardTitle className="text-lg">외부 호출 설정</CardTitle>
               <Badge variant={isConfigValid ? "default" : "secondary"}>
                 {isConfigValid ? "설정 완료" : "설정 필요"}
diff --git a/frontend/components/dataflow/external-call/ExternalCallTestPanel.tsx b/frontend/components/dataflow/external-call/ExternalCallTestPanel.tsx
index 811e4b60..f00d8e8c 100644
--- a/frontend/components/dataflow/external-call/ExternalCallTestPanel.tsx
+++ b/frontend/components/dataflow/external-call/ExternalCallTestPanel.tsx
@@ -208,7 +208,7 @@ const ExternalCallTestPanel: React.FC<ExternalCallTestPanelProps> = ({
         <CardHeader className="pb-3">
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-2">
-              <TestTube className="h-5 w-5 text-blue-500" />
+              <TestTube className="h-5 w-5 text-primary" />
               <CardTitle className="text-lg">API 테스트</CardTitle>
               {testResult && (
                 <Badge variant={testResult.success ? "default" : "destructive"}>
@@ -253,9 +253,9 @@ const ExternalCallTestPanel: React.FC<ExternalCallTestPanelProps> = ({
               <div className="space-y-1">
                 <div className="flex items-center justify-center gap-1">
                   {testResult.success ? (
-                    <CheckCircle className="h-4 w-4 text-green-500" />
+                    <CheckCircle className="h-4 w-4 text-emerald-500" />
                   ) : (
-                    <XCircle className="h-4 w-4 text-red-500" />
+                    <XCircle className="h-4 w-4 text-destructive" />
                   )}
                   <span className="text-sm font-medium">상태</span>
                 </div>
@@ -264,7 +264,7 @@ const ExternalCallTestPanel: React.FC<ExternalCallTestPanelProps> = ({
 
               <div className="space-y-1">
                 <div className="flex items-center justify-center gap-1">
-                  <Network className="h-4 w-4 text-blue-500" />
+                  <Network className="h-4 w-4 text-primary" />
                   <span className="text-sm font-medium">상태 코드</span>
                 </div>
                 <div className="text-muted-foreground text-xs">{testResult.statusCode || "N/A"}</div>
@@ -272,7 +272,7 @@ const ExternalCallTestPanel: React.FC<ExternalCallTestPanelProps> = ({
 
               <div className="space-y-1">
                 <div className="flex items-center justify-center gap-1">
-                  <Timer className="h-4 w-4 text-orange-500" />
+                  <Timer className="h-4 w-4 text-amber-500" />
                   <span className="text-sm font-medium">응답 시간</span>
                 </div>
                 <div className="text-muted-foreground text-xs">{testResult.responseTime}ms</div>
@@ -402,8 +402,8 @@ const ExternalCallTestPanel: React.FC<ExternalCallTestPanelProps> = ({
                     {testResult.statusCode && (
                       <div>
                         <Label className="text-muted-foreground text-xs">상태 코드</Label>
-                        <div className="mt-1 rounded border bg-green-50 p-2">
-                          <span className="font-mono text-sm text-green-700">{testResult.statusCode}</span>
+                        <div className="mt-1 rounded border bg-emerald-50 p-2">
+                          <span className="font-mono text-sm text-emerald-700">{testResult.statusCode}</span>
                         </div>
                       </div>
                     )}
@@ -413,7 +413,7 @@ const ExternalCallTestPanel: React.FC<ExternalCallTestPanelProps> = ({
                       <div>
                         <Label className="text-muted-foreground text-xs">응답 시간</Label>
                         <div className="mt-1 rounded border bg-accent p-2">
-                          <span className="font-mono text-sm text-blue-700">{testResult.responseTime}ms</span>
+                          <span className="font-mono text-sm text-primary">{testResult.responseTime}ms</span>
                         </div>
                       </div>
                     )}
diff --git a/frontend/components/dataflow/external-call/FieldMappingEditor.tsx b/frontend/components/dataflow/external-call/FieldMappingEditor.tsx
index f1fd22b8..c0882d54 100644
--- a/frontend/components/dataflow/external-call/FieldMappingEditor.tsx
+++ b/frontend/components/dataflow/external-call/FieldMappingEditor.tsx
@@ -188,9 +188,9 @@ export const FieldMappingEditor: React.FC<FieldMappingEditorProps> = ({
                   <Label className="text-xs">{direction === "inbound" ? "외부 필드" : "내부 필드"}</Label>
                   <div className="mt-1 flex items-center gap-1">
                     {direction === "inbound" ? (
-                      <Globe className="h-3 w-3 text-blue-500" />
+                      <Globe className="h-3 w-3 text-primary" />
                     ) : (
-                      <Database className="h-3 w-3 text-green-500" />
+                      <Database className="h-3 w-3 text-emerald-500" />
                     )}
                     <Input
                       value={mapping.sourceField}
@@ -212,9 +212,9 @@ export const FieldMappingEditor: React.FC<FieldMappingEditorProps> = ({
                   <Label className="text-xs">{direction === "inbound" ? "내부 필드" : "외부 필드"}</Label>
                   <div className="mt-1 flex items-center gap-1">
                     {direction === "inbound" ? (
-                      <Database className="h-3 w-3 text-green-500" />
+                      <Database className="h-3 w-3 text-emerald-500" />
                     ) : (
-                      <Globe className="h-3 w-3 text-blue-500" />
+                      <Globe className="h-3 w-3 text-primary" />
                     )}
                     {direction === "inbound" && currentTable ? (
                       <Select
diff --git a/frontend/components/dataflow/external-call/RestApiSettings.tsx b/frontend/components/dataflow/external-call/RestApiSettings.tsx
index 66a8e651..dd9075a3 100644
--- a/frontend/components/dataflow/external-call/RestApiSettings.tsx
+++ b/frontend/components/dataflow/external-call/RestApiSettings.tsx
@@ -377,7 +377,7 @@ const RestApiSettings: React.FC<RestApiSettingsProps> = ({ settings, onSettingsC
                         variant="ghost"
                         size="sm"
                         onClick={() => handleRemoveHeader(key)}
-                        className="text-red-500 hover:text-red-700"
+                        className="text-destructive hover:text-destructive"
                       >
                         <Trash2 className="h-4 w-4" />
                       </Button>
@@ -635,13 +635,13 @@ const RestApiSettings: React.FC<RestApiSettingsProps> = ({ settings, onSettingsC
             <div className="flex items-center gap-2">
               {validationErrors.length === 0 ? (
                 <>
-                  <CheckCircle className="h-4 w-4 text-green-500" />
-                  <span className="text-sm text-green-600">설정이 완료되었습니다</span>
+                  <CheckCircle className="h-4 w-4 text-emerald-500" />
+                  <span className="text-sm text-emerald-600">설정이 완료되었습니다</span>
                 </>
               ) : (
                 <>
-                  <AlertCircle className="h-4 w-4 text-orange-500" />
-                  <span className="text-sm text-orange-600">{validationErrors.length}개의 설정이 필요합니다</span>
+                  <AlertCircle className="h-4 w-4 text-amber-500" />
+                  <span className="text-sm text-amber-600">{validationErrors.length}개의 설정이 필요합니다</span>
                 </>
               )}
             </div>
diff --git a/frontend/components/dataflow/node-editor/FlowEditor.tsx b/frontend/components/dataflow/node-editor/FlowEditor.tsx
index 60a92803..6c9c2ca2 100644
--- a/frontend/components/dataflow/node-editor/FlowEditor.tsx
+++ b/frontend/components/dataflow/node-editor/FlowEditor.tsx
@@ -370,7 +370,7 @@ function FlowEditorInner({ initialFlowId, onSaveComplete, embedded = false }: Fl
           onDrop={onDrop}
           nodeTypes={nodeTypes}
           fitView
-          className="bg-gray-50"
+          className="bg-muted"
           deleteKeyCode={["Delete", "Backspace"]}
         >
           {/* 배경 그리드 */}
diff --git a/frontend/components/dataflow/node-editor/dialogs/LoadFlowDialog.tsx b/frontend/components/dataflow/node-editor/dialogs/LoadFlowDialog.tsx
index d5cc9b18..4e68ed3e 100644
--- a/frontend/components/dataflow/node-editor/dialogs/LoadFlowDialog.tsx
+++ b/frontend/components/dataflow/node-editor/dialogs/LoadFlowDialog.tsx
@@ -105,12 +105,12 @@ export function LoadFlowDialog({ open, onOpenChange, onLoad }: LoadFlowDialogPro
 
         {loading ? (
           <div className="flex items-center justify-center py-12">
-            <Loader2 className="h-8 w-8 animate-spin text-gray-400" />
+            <Loader2 className="h-8 w-8 animate-spin text-muted-foreground/70" />
           </div>
         ) : flows.length === 0 ? (
           <div className="py-12 text-center">
-            <FileJson className="mx-auto mb-4 h-12 w-12 text-gray-300" />
-            <p className="text-sm text-gray-500">저장된 플로우가 없습니다.</p>
+            <FileJson className="mx-auto mb-4 h-12 w-12 text-muted-foreground/50" />
+            <p className="text-sm text-muted-foreground">저장된 플로우가 없습니다.</p>
           </div>
         ) : (
           <ScrollArea className="h-[400px]">
@@ -118,19 +118,19 @@ export function LoadFlowDialog({ open, onOpenChange, onLoad }: LoadFlowDialogPro
               {flows.map((flow) => (
                 <div
                   key={flow.flowId}
-                  className={`cursor-pointer rounded-lg border-2 p-4 transition-all hover:border-blue-300 hover:bg-blue-50 ${
-                    selectedFlowId === flow.flowId ? "border-blue-500 bg-blue-50" : "border-gray-200 bg-white"
+                  className={`cursor-pointer rounded-lg border-2 p-4 transition-all hover:border-primary/40 hover:bg-primary/10 ${
+                    selectedFlowId === flow.flowId ? "border-primary bg-primary/10" : "border-border bg-white"
                   }`}
                   onClick={() => setSelectedFlowId(flow.flowId)}
                 >
                   <div className="flex items-start justify-between">
                     <div className="flex-1">
                       <div className="flex items-center gap-2">
-                        <h3 className="font-semibold text-gray-900">{flow.flowName}</h3>
-                        <span className="text-xs text-gray-400">#{flow.flowId}</span>
+                        <h3 className="font-semibold text-foreground">{flow.flowName}</h3>
+                        <span className="text-xs text-muted-foreground/70">#{flow.flowId}</span>
                       </div>
-                      {flow.flowDescription && <p className="mt-1 text-sm text-gray-600">{flow.flowDescription}</p>}
-                      <div className="mt-2 flex items-center gap-4 text-xs text-gray-500">
+                      {flow.flowDescription && <p className="mt-1 text-sm text-muted-foreground">{flow.flowDescription}</p>}
+                      <div className="mt-2 flex items-center gap-4 text-xs text-muted-foreground">
                         <div className="flex items-center gap-1">
                           <Calendar className="h-3 w-3" />
                           <span>수정: {formatDate(flow.updatedAt)}</span>
@@ -145,7 +145,7 @@ export function LoadFlowDialog({ open, onOpenChange, onLoad }: LoadFlowDialogPro
                         handleDelete(flow.flowId, flow.flowName);
                       }}
                       disabled={deleting === flow.flowId}
-                      className="text-red-600 hover:bg-red-50 hover:text-red-700"
+                      className="text-destructive hover:bg-destructive/10 hover:text-destructive"
                     >
                       {deleting === flow.flowId ? (
                         <Loader2 className="h-4 w-4 animate-spin" />
diff --git a/frontend/components/dataflow/node-editor/dialogs/SaveConfirmDialog.tsx b/frontend/components/dataflow/node-editor/dialogs/SaveConfirmDialog.tsx
index 4f172e95..3ec9df2e 100644
--- a/frontend/components/dataflow/node-editor/dialogs/SaveConfirmDialog.tsx
+++ b/frontend/components/dataflow/node-editor/dialogs/SaveConfirmDialog.tsx
@@ -40,7 +40,7 @@ export const SaveConfirmDialog = memo(
           <DialogContent className="max-w-[95vw] sm:max-w-[500px]">
             <DialogHeader>
               <DialogTitle className="flex items-center gap-2 text-base sm:text-lg">
-                <AlertCircle className="h-5 w-5 text-red-500" />
+                <AlertCircle className="h-5 w-5 text-destructive" />
                 저장할 수 없습니다
               </DialogTitle>
               <DialogDescription className="text-xs sm:text-sm">
@@ -55,7 +55,7 @@ export const SaveConfirmDialog = memo(
                   오류 {summary.errorCount}
                 </Badge>
                 {summary.warningCount > 0 && (
-                  <Badge className="gap-1 bg-yellow-500 hover:bg-yellow-600">
+                  <Badge className="gap-1 bg-amber-500 hover:bg-yellow-600">
                     <AlertTriangle className="h-3 w-3" />
                     경고 {summary.warningCount}
                   </Badge>
@@ -69,9 +69,9 @@ export const SaveConfirmDialog = memo(
                     .map((validation, index) => (
                       <div
                         key={index}
-                        className="rounded-lg border-2 border-red-200 bg-red-50 p-3"
+                        className="rounded-lg border-2 border-destructive/20 bg-destructive/10 p-3"
                       >
-                        <div className="mb-1 text-xs font-medium text-red-600">
+                        <div className="mb-1 text-xs font-medium text-destructive">
                           {validation.type}
                         </div>
                         <div className="text-sm text-red-800">
@@ -82,7 +82,7 @@ export const SaveConfirmDialog = memo(
                 </div>
               </ScrollArea>
 
-              <p className="text-xs text-gray-500">
+              <p className="text-xs text-muted-foreground">
                 위의 오류를 먼저 해결해주세요. 경고는 저장 후에도 확인할 수
                 있습니다.
               </p>
@@ -107,7 +107,7 @@ export const SaveConfirmDialog = memo(
         <DialogContent className="max-w-[95vw] sm:max-w-[500px]">
           <DialogHeader>
             <DialogTitle className="flex items-center gap-2 text-base sm:text-lg">
-              <AlertTriangle className="h-5 w-5 text-yellow-500" />
+              <AlertTriangle className="h-5 w-5 text-amber-500" />
               경고가 있습니다
             </DialogTitle>
             <DialogDescription className="text-xs sm:text-sm">
@@ -119,7 +119,7 @@ export const SaveConfirmDialog = memo(
           <div className="space-y-3">
             <div className="flex items-center gap-2">
               {summary.warningCount > 0 && (
-                <Badge className="gap-1 bg-yellow-500 hover:bg-yellow-600">
+                <Badge className="gap-1 bg-amber-500 hover:bg-yellow-600">
                   <AlertTriangle className="h-3 w-3" />
                   경고 {summary.warningCount}
                 </Badge>
@@ -139,9 +139,9 @@ export const SaveConfirmDialog = memo(
                   .map((validation, index) => (
                     <div
                       key={index}
-                      className="rounded-lg border-2 border-yellow-200 bg-yellow-50 p-3"
+                      className="rounded-lg border-2 border-amber-200 bg-amber-50 p-3"
                     >
-                      <div className="mb-1 text-xs font-medium text-yellow-600">
+                      <div className="mb-1 text-xs font-medium text-amber-600">
                         {validation.type}
                       </div>
                       <div className="text-sm text-yellow-800">
@@ -154,12 +154,12 @@ export const SaveConfirmDialog = memo(
                   .map((validation, index) => (
                     <div
                       key={index}
-                      className="rounded-lg border-2 border-blue-200 bg-blue-50 p-3"
+                      className="rounded-lg border-2 border-primary/20 bg-primary/10 p-3"
                     >
-                      <div className="mb-1 text-xs font-medium text-blue-600">
+                      <div className="mb-1 text-xs font-medium text-primary">
                         {validation.type}
                       </div>
-                      <div className="text-sm text-blue-800">
+                      <div className="text-sm text-primary">
                         {validation.message}
                       </div>
                     </div>
@@ -167,8 +167,8 @@ export const SaveConfirmDialog = memo(
               </div>
             </ScrollArea>
 
-            <div className="rounded-lg bg-gray-50 p-3">
-              <p className="text-xs text-gray-600">
+            <div className="rounded-lg bg-muted p-3">
+              <p className="text-xs text-muted-foreground">
                 ⚠️ 이 경고들은 플로우의 동작에 영향을 줄 수 있습니다.
                 <br />
                 그래도 저장하시겠습니까?
@@ -186,7 +186,7 @@ export const SaveConfirmDialog = memo(
             </Button>
             <Button
               onClick={onConfirm}
-              className="h-8 flex-1 bg-yellow-500 text-xs hover:bg-yellow-600 sm:h-10 sm:flex-none sm:text-sm"
+              className="h-8 flex-1 bg-amber-500 text-xs hover:bg-yellow-600 sm:h-10 sm:flex-none sm:text-sm"
             >
               경고 무시하고 저장
             </Button>
diff --git a/frontend/components/dataflow/node-editor/editors/VariableTagEditor.tsx b/frontend/components/dataflow/node-editor/editors/VariableTagEditor.tsx
index 7556e248..ea32f301 100644
--- a/frontend/components/dataflow/node-editor/editors/VariableTagEditor.tsx
+++ b/frontend/components/dataflow/node-editor/editors/VariableTagEditor.tsx
@@ -177,7 +177,7 @@ export function VariableTagEditor({
   return (
     <div className={cn("relative rounded-md border", className)}>
       {/* 툴바 */}
-      <div className="flex items-center justify-between border-b bg-gray-50 px-2 py-1">
+      <div className="flex items-center justify-between border-b bg-muted px-2 py-1">
         <div className="flex items-center gap-1">
           <Popover
             open={isVariablePopoverOpen}
@@ -214,15 +214,15 @@ export function VariableTagEditor({
                       >
                         <div className="flex flex-col">
                           <div className="flex items-center gap-2">
-                            <span className="rounded bg-blue-100 px-1.5 py-0.5 text-xs font-medium text-blue-700">
+                            <span className="rounded bg-primary/10 px-1.5 py-0.5 text-xs font-medium text-primary">
                               {variable.displayName}
                             </span>
-                            <span className="text-xs text-gray-500">
+                            <span className="text-xs text-muted-foreground">
                               {variable.name}
                             </span>
                           </div>
                           {variable.description && (
-                            <span className="mt-0.5 text-xs text-gray-400">
+                            <span className="mt-0.5 text-xs text-muted-foreground/70">
                               {variable.description}
                             </span>
                           )}
@@ -236,9 +236,9 @@ export function VariableTagEditor({
           </Popover>
         </div>
 
-        <div className="text-xs text-gray-400">
-          <kbd className="rounded bg-gray-200 px-1">@</kbd> 또는{" "}
-          <kbd className="rounded bg-gray-200 px-1">/</kbd> 로 변수 삽입
+        <div className="text-xs text-muted-foreground/70">
+          <kbd className="rounded bg-muted/80 px-1">@</kbd> 또는{" "}
+          <kbd className="rounded bg-muted/80 px-1">/</kbd> 로 변수 삽입
         </div>
       </div>
 
diff --git a/frontend/components/dataflow/node-editor/nodes/AggregateNode.tsx b/frontend/components/dataflow/node-editor/nodes/AggregateNode.tsx
index 51ed5371..f54a6020 100644
--- a/frontend/components/dataflow/node-editor/nodes/AggregateNode.tsx
+++ b/frontend/components/dataflow/node-editor/nodes/AggregateNode.tsx
@@ -28,7 +28,7 @@ export const AggregateNode = memo(({ data, selected }: NodeProps<AggregateNodeDa
   return (
     <div
       className={`min-w-[280px] rounded-lg border-2 bg-white shadow-md transition-all ${
-        selected ? "border-purple-500 shadow-lg" : "border-gray-200"
+        selected ? "border-purple-500 shadow-lg" : "border-border"
       }`}
     >
       {/* 헤더 */}
@@ -71,28 +71,28 @@ export const AggregateNode = memo(({ data, selected }: NodeProps<AggregateNodeDa
         {aggregationCount > 0 ? (
           <div className="space-y-2">
             {data.aggregations.slice(0, 4).map((agg, idx) => (
-              <div key={agg.id || idx} className="rounded bg-gray-50 p-2">
+              <div key={agg.id || idx} className="rounded bg-muted p-2">
                 <div className="flex items-center justify-between">
                   <span className="rounded bg-purple-600 px-1.5 py-0.5 text-xs font-medium text-white">
                     {AGGREGATE_FUNCTION_LABELS[agg.function] || agg.function}
                   </span>
-                  <span className="text-xs text-gray-500">
+                  <span className="text-xs text-muted-foreground">
                     {agg.outputFieldLabel || agg.outputField}
                   </span>
                 </div>
-                <div className="mt-1 text-xs text-gray-600">
+                <div className="mt-1 text-xs text-muted-foreground">
                   {agg.sourceFieldLabel || agg.sourceField}
                 </div>
               </div>
             ))}
             {data.aggregations.length > 4 && (
-              <div className="text-xs text-gray-400 text-center">
+              <div className="text-xs text-muted-foreground/70 text-center">
                 ... 외 {data.aggregations.length - 4}개
               </div>
             )}
           </div>
         ) : (
-          <div className="py-4 text-center text-xs text-gray-400">집계 연산 없음</div>
+          <div className="py-4 text-center text-xs text-muted-foreground/70">집계 연산 없음</div>
         )}
       </div>
 
diff --git a/frontend/components/dataflow/node-editor/nodes/CommentNode.tsx b/frontend/components/dataflow/node-editor/nodes/CommentNode.tsx
index 986cf399..d61b37dc 100644
--- a/frontend/components/dataflow/node-editor/nodes/CommentNode.tsx
+++ b/frontend/components/dataflow/node-editor/nodes/CommentNode.tsx
@@ -12,16 +12,16 @@ import type { CommentNodeData } from "@/types/node-editor";
 export const CommentNode = memo(({ data, selected }: NodeProps<CommentNodeData>) => {
   return (
     <div
-      className={`max-w-[350px] min-w-[200px] rounded-lg border-2 border-dashed bg-yellow-50 shadow-sm transition-all ${
-        selected ? "border-yellow-500 shadow-md" : "border-yellow-300"
+      className={`max-w-[350px] min-w-[200px] rounded-lg border-2 border-dashed bg-amber-50 shadow-sm transition-all ${
+        selected ? "border-yellow-500 shadow-md" : "border-amber-300"
       }`}
     >
       <div className="p-3">
         <div className="mb-2 flex items-center gap-2">
-          <MessageSquare className="h-4 w-4 text-yellow-600" />
+          <MessageSquare className="h-4 w-4 text-amber-600" />
           <span className="text-xs font-semibold text-yellow-800">메모</span>
         </div>
-        <div className="text-sm whitespace-pre-wrap text-gray-700">{data.content || "메모를 입력하세요..."}</div>
+        <div className="text-sm whitespace-pre-wrap text-foreground">{data.content || "메모를 입력하세요..."}</div>
       </div>
     </div>
   );
diff --git a/frontend/components/dataflow/node-editor/nodes/ConditionNode.tsx b/frontend/components/dataflow/node-editor/nodes/ConditionNode.tsx
index 4cf5e32d..ad89a130 100644
--- a/frontend/components/dataflow/node-editor/nodes/ConditionNode.tsx
+++ b/frontend/components/dataflow/node-editor/nodes/ConditionNode.tsx
@@ -35,14 +35,14 @@ export const ConditionNode = memo(({ data, selected }: NodeProps<ConditionNodeDa
   return (
     <div
       className={`min-w-[280px] rounded-lg border-2 bg-white shadow-md transition-all ${
-        selected ? "border-yellow-500 shadow-lg" : "border-gray-200"
+        selected ? "border-yellow-500 shadow-lg" : "border-border"
       }`}
     >
       {/* 입력 핸들 */}
       <Handle type="target" position={Position.Left} className="!h-3 !w-3 !border-2 !border-yellow-500 !bg-white" />
 
       {/* 헤더 */}
-      <div className="flex items-center gap-2 rounded-t-lg bg-yellow-500 px-3 py-2 text-white">
+      <div className="flex items-center gap-2 rounded-t-lg bg-amber-500 px-3 py-2 text-white">
         <Zap className="h-4 w-4" />
         <div className="flex-1">
           <div className="text-sm font-semibold">조건 검사</div>
@@ -54,15 +54,15 @@ export const ConditionNode = memo(({ data, selected }: NodeProps<ConditionNodeDa
       <div className="p-3">
         {data.conditions && data.conditions.length > 0 ? (
           <div className="space-y-2">
-            <div className="text-xs font-medium text-gray-700">조건식: ({data.conditions.length}개)</div>
+            <div className="text-xs font-medium text-foreground">조건식: ({data.conditions.length}개)</div>
             <div className="max-h-[150px] space-y-1.5 overflow-y-auto">
               {data.conditions.slice(0, 4).map((condition, idx) => (
-                <div key={idx} className="rounded bg-yellow-50 px-2 py-1.5 text-xs">
+                <div key={idx} className="rounded bg-amber-50 px-2 py-1.5 text-xs">
                   {idx > 0 && (
-                    <div className="mb-1 text-center text-xs font-semibold text-yellow-600">{data.logic}</div>
+                    <div className="mb-1 text-center text-xs font-semibold text-amber-600">{data.logic}</div>
                   )}
                   <div className="flex flex-wrap items-center gap-1">
-                    <span className="font-mono text-gray-700">{condition.field}</span>
+                    <span className="font-mono text-foreground">{condition.field}</span>
                     <span
                       className={`rounded px-1 py-0.5 ${
                         isExistsOperator(condition.operator)
@@ -82,7 +82,7 @@ export const ConditionNode = memo(({ data, selected }: NodeProps<ConditionNodeDa
                       // 일반 연산자인 경우 값 표시
                       condition.value !== null &&
                       condition.value !== undefined && (
-                        <span className="text-gray-600">
+                        <span className="text-muted-foreground">
                           {typeof condition.value === "string" ? `"${condition.value}"` : String(condition.value)}
                         </span>
                       )
@@ -91,12 +91,12 @@ export const ConditionNode = memo(({ data, selected }: NodeProps<ConditionNodeDa
                 </div>
               ))}
               {data.conditions.length > 4 && (
-                <div className="text-xs text-gray-400">... 외 {data.conditions.length - 4}개</div>
+                <div className="text-xs text-muted-foreground/70">... 외 {data.conditions.length - 4}개</div>
               )}
             </div>
           </div>
         ) : (
-          <div className="text-center text-xs text-gray-400">조건 없음</div>
+          <div className="text-center text-xs text-muted-foreground/70">조건 없음</div>
         )}
       </div>
 
@@ -105,28 +105,28 @@ export const ConditionNode = memo(({ data, selected }: NodeProps<ConditionNodeDa
         {/* TRUE 출력 - 오른쪽 위 */}
         <div className="relative border-b p-2">
           <div className="flex items-center justify-end gap-1 pr-6 text-xs">
-            <Check className="h-3 w-3 text-green-600" />
-            <span className="font-medium text-green-600">TRUE</span>
+            <Check className="h-3 w-3 text-emerald-600" />
+            <span className="font-medium text-emerald-600">TRUE</span>
           </div>
           <Handle
             type="source"
             position={Position.Right}
             id="true"
-            className="!top-1/2 !-right-1.5 !h-3 !w-3 !-translate-y-1/2 !border-2 !border-green-500 !bg-white"
+            className="!top-1/2 !-right-1.5 !h-3 !w-3 !-translate-y-1/2 !border-2 !border-emerald-500 !bg-white"
           />
         </div>
 
         {/* FALSE 출력 - 오른쪽 아래 */}
         <div className="relative p-2">
           <div className="flex items-center justify-end gap-1 pr-6 text-xs">
-            <X className="h-3 w-3 text-red-600" />
-            <span className="font-medium text-red-600">FALSE</span>
+            <X className="h-3 w-3 text-destructive" />
+            <span className="font-medium text-destructive">FALSE</span>
           </div>
           <Handle
             type="source"
             position={Position.Right}
             id="false"
-            className="!top-1/2 !-right-1.5 !h-3 !w-3 !-translate-y-1/2 !border-2 !border-red-500 !bg-white"
+            className="!top-1/2 !-right-1.5 !h-3 !w-3 !-translate-y-1/2 !border-2 !border-destructive !bg-white"
           />
         </div>
       </div>
diff --git a/frontend/components/dataflow/node-editor/nodes/DataTransformNode.tsx b/frontend/components/dataflow/node-editor/nodes/DataTransformNode.tsx
index f5ed2e77..cbadbeb7 100644
--- a/frontend/components/dataflow/node-editor/nodes/DataTransformNode.tsx
+++ b/frontend/components/dataflow/node-editor/nodes/DataTransformNode.tsx
@@ -13,11 +13,11 @@ export const DataTransformNode = memo(({ data, selected }: NodeProps<DataTransfo
   return (
     <div
       className={`min-w-[250px] rounded-lg border-2 bg-white shadow-md transition-all ${
-        selected ? "border-orange-500 shadow-lg" : "border-gray-200"
+        selected ? "border-orange-500 shadow-lg" : "border-border"
       }`}
     >
       {/* 헤더 */}
-      <div className="flex items-center gap-2 rounded-t-lg bg-indigo-600 px-3 py-2 text-white">
+      <div className="flex items-center gap-2 rounded-t-lg bg-primary px-3 py-2 text-white">
         <Wand2 className="h-4 w-4" />
         <div className="flex-1">
           <div className="text-sm font-semibold">{data.displayName || "데이터 변환"}</div>
@@ -40,29 +40,29 @@ export const DataTransformNode = memo(({ data, selected }: NodeProps<DataTransfo
                   <div className="mb-1 flex items-center gap-2 text-xs">
                     <span className="font-medium text-indigo-700">{transform.type}</span>
                   </div>
-                  <div className="text-xs text-gray-600">
+                  <div className="text-xs text-muted-foreground">
                     {sourceLabel}
-                    <span className="mx-1 text-gray-400">→</span>
+                    <span className="mx-1 text-muted-foreground/70">→</span>
                     {isInPlace ? (
-                      <span className="font-medium text-indigo-600">(자기자신)</span>
+                      <span className="font-medium text-primary">(자기자신)</span>
                     ) : (
                       <span>{targetLabel}</span>
                     )}
                   </div>
                   {/* 타입별 추가 정보 */}
                   {transform.type === "EXPLODE" && transform.delimiter && (
-                    <div className="mt-1 text-xs text-gray-500">구분자: {transform.delimiter}</div>
+                    <div className="mt-1 text-xs text-muted-foreground">구분자: {transform.delimiter}</div>
                   )}
                   {transform.type === "CONCAT" && transform.separator && (
-                    <div className="mt-1 text-xs text-gray-500">구분자: {transform.separator}</div>
+                    <div className="mt-1 text-xs text-muted-foreground">구분자: {transform.separator}</div>
                   )}
                   {transform.type === "REPLACE" && (
-                    <div className="mt-1 text-xs text-gray-500">
+                    <div className="mt-1 text-xs text-muted-foreground">
                       "{transform.searchValue}" → "{transform.replaceValue}"
                     </div>
                   )}
                   {transform.expression && (
-                    <div className="mt-1 text-xs text-gray-500">
+                    <div className="mt-1 text-xs text-muted-foreground">
                       <code className="rounded bg-white px-1 py-0.5">{transform.expression}</code>
                     </div>
                   )}
@@ -70,17 +70,17 @@ export const DataTransformNode = memo(({ data, selected }: NodeProps<DataTransfo
               );
             })}
             {data.transformations.length > 3 && (
-              <div className="text-xs text-gray-400">... 외 {data.transformations.length - 3}개</div>
+              <div className="text-xs text-muted-foreground/70">... 외 {data.transformations.length - 3}개</div>
             )}
           </div>
         ) : (
-          <div className="py-4 text-center text-xs text-gray-400">변환 규칙 없음</div>
+          <div className="py-4 text-center text-xs text-muted-foreground/70">변환 규칙 없음</div>
         )}
       </div>
 
       {/* 핸들 */}
-      <Handle type="target" position={Position.Left} className="!h-3 !w-3 !bg-indigo-500" />
-      <Handle type="source" position={Position.Right} className="!h-3 !w-3 !bg-indigo-500" />
+      <Handle type="target" position={Position.Left} className="!h-3 !w-3 !bg-primary" />
+      <Handle type="source" position={Position.Right} className="!h-3 !w-3 !bg-primary" />
     </div>
   );
 });
diff --git a/frontend/components/dataflow/node-editor/nodes/DeleteActionNode.tsx b/frontend/components/dataflow/node-editor/nodes/DeleteActionNode.tsx
index 0c76ed78..05573ab4 100644
--- a/frontend/components/dataflow/node-editor/nodes/DeleteActionNode.tsx
+++ b/frontend/components/dataflow/node-editor/nodes/DeleteActionNode.tsx
@@ -13,14 +13,14 @@ export const DeleteActionNode = memo(({ data, selected }: NodeProps<DeleteAction
   return (
     <div
       className={`min-w-[250px] rounded-lg border-2 bg-white shadow-md transition-all ${
-        selected ? "border-red-500 shadow-lg" : "border-gray-200"
+        selected ? "border-destructive shadow-lg" : "border-border"
       }`}
     >
       {/* 입력 핸들 */}
-      <Handle type="target" position={Position.Left} className="!h-3 !w-3 !border-2 !border-red-500 !bg-white" />
+      <Handle type="target" position={Position.Left} className="!h-3 !w-3 !border-2 !border-destructive !bg-white" />
 
       {/* 헤더 */}
-      <div className="flex items-center gap-2 rounded-t-lg bg-red-500 px-3 py-2 text-white">
+      <div className="flex items-center gap-2 rounded-t-lg bg-destructive px-3 py-2 text-white">
         <Trash2 className="h-4 w-4" />
         <div className="flex-1">
           <div className="text-sm font-semibold">DELETE</div>
@@ -30,30 +30,30 @@ export const DeleteActionNode = memo(({ data, selected }: NodeProps<DeleteAction
 
       {/* 본문 */}
       <div className="p-3">
-        <div className="mb-2 text-xs font-medium text-gray-500">타겟: {data.targetTable}</div>
+        <div className="mb-2 text-xs font-medium text-muted-foreground">타겟: {data.targetTable}</div>
 
         {/* WHERE 조건 */}
         {data.whereConditions && data.whereConditions.length > 0 ? (
           <div className="space-y-1">
-            <div className="text-xs font-medium text-gray-700">WHERE 조건:</div>
+            <div className="text-xs font-medium text-foreground">WHERE 조건:</div>
             <div className="max-h-[120px] space-y-1 overflow-y-auto">
               {data.whereConditions.map((condition, idx) => (
-                <div key={idx} className="rounded bg-red-50 px-2 py-1 text-xs">
-                  <span className="font-mono text-gray-700">{condition.field}</span>
-                  <span className="mx-1 text-red-600">{condition.operator}</span>
-                  <span className="text-gray-600">{condition.sourceField || condition.staticValue || "?"}</span>
+                <div key={idx} className="rounded bg-destructive/10 px-2 py-1 text-xs">
+                  <span className="font-mono text-foreground">{condition.field}</span>
+                  <span className="mx-1 text-destructive">{condition.operator}</span>
+                  <span className="text-muted-foreground">{condition.sourceField || condition.staticValue || "?"}</span>
                 </div>
               ))}
             </div>
           </div>
         ) : (
-          <div className="rounded bg-yellow-50 p-2 text-xs text-yellow-700">⚠️ 조건 없음 - 모든 데이터 삭제 주의!</div>
+          <div className="rounded bg-amber-50 p-2 text-xs text-yellow-700">⚠️ 조건 없음 - 모든 데이터 삭제 주의!</div>
         )}
 
         {/* 경고 메시지 */}
-        <div className="mt-3 flex items-start gap-2 rounded border border-red-200 bg-red-50 p-2">
-          <AlertTriangle className="h-3 w-3 flex-shrink-0 text-red-600" />
-          <div className="text-xs text-red-700">
+        <div className="mt-3 flex items-start gap-2 rounded border border-destructive/20 bg-destructive/10 p-2">
+          <AlertTriangle className="h-3 w-3 flex-shrink-0 text-destructive" />
+          <div className="text-xs text-destructive">
             <div className="font-medium">주의</div>
             <div className="mt-0.5">삭제된 데이터는 복구할 수 없습니다</div>
           </div>
@@ -62,13 +62,13 @@ export const DeleteActionNode = memo(({ data, selected }: NodeProps<DeleteAction
         {/* 옵션 */}
         {data.options?.requireConfirmation && (
           <div className="mt-2">
-            <span className="rounded bg-red-100 px-1.5 py-0.5 text-xs text-red-700">실행 전 확인 필요</span>
+            <span className="rounded bg-destructive/10 px-1.5 py-0.5 text-xs text-destructive">실행 전 확인 필요</span>
           </div>
         )}
       </div>
 
       {/* 출력 핸들 */}
-      <Handle type="source" position={Position.Right} className="!h-3 !w-3 !border-2 !border-red-500 !bg-white" />
+      <Handle type="source" position={Position.Right} className="!h-3 !w-3 !border-2 !border-destructive !bg-white" />
     </div>
   );
 });
diff --git a/frontend/components/dataflow/node-editor/nodes/EmailActionNode.tsx b/frontend/components/dataflow/node-editor/nodes/EmailActionNode.tsx
index 4efc5b6a..ab5d316f 100644
--- a/frontend/components/dataflow/node-editor/nodes/EmailActionNode.tsx
+++ b/frontend/components/dataflow/node-editor/nodes/EmailActionNode.tsx
@@ -18,7 +18,7 @@ export const EmailActionNode = memo(({ data, selected }: NodeProps<EmailActionNo
   return (
     <div
       className={`min-w-[250px] rounded-lg border-2 bg-white shadow-md transition-all ${
-        selected ? "border-pink-500 shadow-lg" : "border-gray-200"
+        selected ? "border-pink-500 shadow-lg" : "border-border"
       }`}
     >
       {/* 입력 핸들 */}
@@ -40,36 +40,36 @@ export const EmailActionNode = memo(({ data, selected }: NodeProps<EmailActionNo
       <div className="space-y-2 p-3">
         {/* 발송 계정 상태 */}
         <div className="flex items-center gap-2 text-xs">
-          <User className="h-3 w-3 text-gray-400" />
-          <span className="text-gray-600">
+          <User className="h-3 w-3 text-muted-foreground/70" />
+          <span className="text-muted-foreground">
             {hasAccount ? (
-              <span className="flex items-center gap-1 text-green-600">
+              <span className="flex items-center gap-1 text-emerald-600">
                 <CheckCircle className="h-3 w-3" />
                 계정 선택됨
               </span>
             ) : (
-              <span className="text-orange-500">발송 계정 선택 필요</span>
+              <span className="text-amber-500">발송 계정 선택 필요</span>
             )}
           </span>
         </div>
 
         {/* 수신자 */}
         <div className="text-xs">
-          <span className="text-gray-500">수신자: </span>
+          <span className="text-muted-foreground">수신자: </span>
           {hasRecipient ? (
-            <span className="text-gray-700">{data.to}</span>
+            <span className="text-foreground">{data.to}</span>
           ) : (
-            <span className="text-orange-500">미설정</span>
+            <span className="text-amber-500">미설정</span>
           )}
         </div>
 
         {/* 제목 */}
         <div className="text-xs">
-          <span className="text-gray-500">제목: </span>
+          <span className="text-muted-foreground">제목: </span>
           {hasSubject ? (
-            <span className="truncate text-gray-700">{data.subject}</span>
+            <span className="truncate text-foreground">{data.subject}</span>
           ) : (
-            <span className="text-orange-500">미설정</span>
+            <span className="text-amber-500">미설정</span>
           )}
         </div>
 
@@ -77,7 +77,7 @@ export const EmailActionNode = memo(({ data, selected }: NodeProps<EmailActionNo
         <div className="flex items-center gap-2">
           <span
             className={`rounded px-1.5 py-0.5 text-xs ${
-              data.bodyType === "html" ? "bg-blue-100 text-blue-700" : "bg-gray-100 text-gray-700"
+              data.bodyType === "html" ? "bg-primary/10 text-primary" : "bg-muted text-foreground"
             }`}
           >
             {data.bodyType === "html" ? "HTML" : "TEXT"}
diff --git a/frontend/components/dataflow/node-editor/nodes/ExternalDBSourceNode.tsx b/frontend/components/dataflow/node-editor/nodes/ExternalDBSourceNode.tsx
index 2088bced..a3017ddc 100644
--- a/frontend/components/dataflow/node-editor/nodes/ExternalDBSourceNode.tsx
+++ b/frontend/components/dataflow/node-editor/nodes/ExternalDBSourceNode.tsx
@@ -32,7 +32,7 @@ export const ExternalDBSourceNode = memo(({ data, selected }: NodeProps<External
   return (
     <div
       className={`min-w-[250px] rounded-lg border-2 bg-white shadow-md transition-all ${
-        selected ? "border-orange-500 shadow-lg" : "border-gray-200"
+        selected ? "border-orange-500 shadow-lg" : "border-border"
       }`}
     >
       {/* 헤더 */}
@@ -48,27 +48,27 @@ export const ExternalDBSourceNode = memo(({ data, selected }: NodeProps<External
       {/* 본문 */}
       <div className="p-3">
         <div className="mb-2 flex items-center gap-1 text-xs">
-          <div className="rounded bg-orange-100 px-2 py-0.5 font-medium text-orange-700">{data.dbType || "DB"}</div>
-          <div className="flex-1 text-gray-500">외부 DB</div>
+          <div className="rounded bg-amber-100 px-2 py-0.5 font-medium text-orange-700">{data.dbType || "DB"}</div>
+          <div className="flex-1 text-muted-foreground">외부 DB</div>
         </div>
 
         {/* 필드 목록 */}
         <div className="space-y-1">
-          <div className="text-xs font-medium text-gray-700">출력 필드:</div>
+          <div className="text-xs font-medium text-foreground">출력 필드:</div>
           <div className="max-h-[150px] overflow-y-auto">
             {data.fields && data.fields.length > 0 ? (
               data.fields.slice(0, 5).map((field) => (
-                <div key={field.name} className="flex items-center gap-2 text-xs text-gray-600">
+                <div key={field.name} className="flex items-center gap-2 text-xs text-muted-foreground">
                   <div className="h-1.5 w-1.5 rounded-full" style={{ backgroundColor: dbColor }} />
                   <span className="font-mono">{field.name}</span>
-                  <span className="text-gray-400">({field.type})</span>
+                  <span className="text-muted-foreground/70">({field.type})</span>
                 </div>
               ))
             ) : (
-              <div className="text-xs text-gray-400">필드 없음</div>
+              <div className="text-xs text-muted-foreground/70">필드 없음</div>
             )}
             {data.fields && data.fields.length > 5 && (
-              <div className="text-xs text-gray-400">... 외 {data.fields.length - 5}개</div>
+              <div className="text-xs text-muted-foreground/70">... 외 {data.fields.length - 5}개</div>
             )}
           </div>
         </div>
diff --git a/frontend/components/dataflow/node-editor/nodes/FormulaTransformNode.tsx b/frontend/components/dataflow/node-editor/nodes/FormulaTransformNode.tsx
index 991e1bd4..87fda069 100644
--- a/frontend/components/dataflow/node-editor/nodes/FormulaTransformNode.tsx
+++ b/frontend/components/dataflow/node-editor/nodes/FormulaTransformNode.tsx
@@ -13,10 +13,10 @@ import type { FormulaTransformNodeData, FormulaType } from "@/types/node-editor"
 
 // 수식 타입별 라벨
 const FORMULA_TYPE_LABELS: Record<FormulaType, { label: string; color: string }> = {
-  arithmetic: { label: "산술", color: "bg-orange-500" },
-  function: { label: "함수", color: "bg-blue-500" },
-  condition: { label: "조건", color: "bg-yellow-500" },
-  static: { label: "정적", color: "bg-gray-500" },
+  arithmetic: { label: "산술", color: "bg-amber-500" },
+  function: { label: "함수", color: "bg-primary" },
+  condition: { label: "조건", color: "bg-amber-500" },
+  static: { label: "정적", color: "bg-muted0" },
 };
 
 // 연산자 표시
@@ -83,11 +83,11 @@ export const FormulaTransformNode = memo(({ data, selected }: NodeProps<FormulaT
   return (
     <div
       className={`min-w-[300px] rounded-lg border-2 bg-white shadow-md transition-all ${
-        selected ? "border-orange-500 shadow-lg" : "border-gray-200"
+        selected ? "border-orange-500 shadow-lg" : "border-border"
       }`}
     >
       {/* 헤더 */}
-      <div className="flex items-center gap-2 rounded-t-lg bg-orange-500 px-3 py-2 text-white">
+      <div className="flex items-center gap-2 rounded-t-lg bg-amber-500 px-3 py-2 text-white">
         <Calculator className="h-4 w-4" />
         <div className="flex-1">
           <div className="text-sm font-semibold">{data.displayName || "수식 변환"}</div>
@@ -101,18 +101,18 @@ export const FormulaTransformNode = memo(({ data, selected }: NodeProps<FormulaT
       <div className="space-y-3 p-3">
         {/* 타겟 테이블 조회 설정 */}
         {hasTargetLookup && (
-          <div className="rounded bg-blue-50 p-2">
+          <div className="rounded bg-primary/10 p-2">
             <div className="mb-1 flex items-center gap-1">
-              <Database className="h-3 w-3 text-blue-600" />
-              <span className="text-xs font-medium text-blue-700">타겟 조회</span>
+              <Database className="h-3 w-3 text-primary" />
+              <span className="text-xs font-medium text-primary">타겟 조회</span>
             </div>
-            <div className="text-xs text-blue-600">{data.targetLookup?.tableLabel || data.targetLookup?.tableName}</div>
+            <div className="text-xs text-primary">{data.targetLookup?.tableLabel || data.targetLookup?.tableName}</div>
             {data.targetLookup?.lookupKeys && data.targetLookup.lookupKeys.length > 0 && (
               <div className="mt-1 flex flex-wrap gap-1">
                 {data.targetLookup.lookupKeys.slice(0, 2).map((key, idx) => (
                   <span
                     key={idx}
-                    className="inline-flex items-center gap-1 rounded bg-blue-100 px-1.5 py-0.5 text-xs text-blue-700"
+                    className="inline-flex items-center gap-1 rounded bg-primary/10 px-1.5 py-0.5 text-xs text-primary"
                   >
                     {key.sourceFieldLabel || key.sourceField}
                     <ArrowRight className="h-2 w-2" />
@@ -120,7 +120,7 @@ export const FormulaTransformNode = memo(({ data, selected }: NodeProps<FormulaT
                   </span>
                 ))}
                 {data.targetLookup.lookupKeys.length > 2 && (
-                  <span className="text-xs text-blue-500">+{data.targetLookup.lookupKeys.length - 2}</span>
+                  <span className="text-xs text-primary">+{data.targetLookup.lookupKeys.length - 2}</span>
                 )}
               </div>
             )}
@@ -133,31 +133,31 @@ export const FormulaTransformNode = memo(({ data, selected }: NodeProps<FormulaT
             {data.transformations.slice(0, 4).map((trans, idx) => {
               const typeInfo = FORMULA_TYPE_LABELS[trans.formulaType];
               return (
-                <div key={trans.id || idx} className="rounded bg-gray-50 p-2">
+                <div key={trans.id || idx} className="rounded bg-muted p-2">
                   <div className="flex items-center justify-between">
                     <span className={`rounded px-1.5 py-0.5 text-xs font-medium text-white ${typeInfo.color}`}>
                       {typeInfo.label}
                     </span>
-                    <span className="text-xs font-medium text-gray-700">
+                    <span className="text-xs font-medium text-foreground">
                       {trans.outputFieldLabel || trans.outputField}
                     </span>
                   </div>
-                  <div className="mt-1 truncate font-mono text-xs text-gray-500">{getFormulaSummary(trans)}</div>
+                  <div className="mt-1 truncate font-mono text-xs text-muted-foreground">{getFormulaSummary(trans)}</div>
                 </div>
               );
             })}
             {data.transformations.length > 4 && (
-              <div className="text-center text-xs text-gray-400">... 외 {data.transformations.length - 4}개</div>
+              <div className="text-center text-xs text-muted-foreground/70">... 외 {data.transformations.length - 4}개</div>
             )}
           </div>
         ) : (
-          <div className="py-4 text-center text-xs text-gray-400">변환 규칙 없음</div>
+          <div className="py-4 text-center text-xs text-muted-foreground/70">변환 규칙 없음</div>
         )}
       </div>
 
       {/* 핸들 */}
-      <Handle type="target" position={Position.Left} className="!h-3 !w-3 !bg-orange-500" />
-      <Handle type="source" position={Position.Right} className="!h-3 !w-3 !bg-orange-500" />
+      <Handle type="target" position={Position.Left} className="!h-3 !w-3 !bg-amber-500" />
+      <Handle type="source" position={Position.Right} className="!h-3 !w-3 !bg-amber-500" />
     </div>
   );
 });
diff --git a/frontend/components/dataflow/node-editor/nodes/HttpRequestActionNode.tsx b/frontend/components/dataflow/node-editor/nodes/HttpRequestActionNode.tsx
index 25677933..7fb6d3cc 100644
--- a/frontend/components/dataflow/node-editor/nodes/HttpRequestActionNode.tsx
+++ b/frontend/components/dataflow/node-editor/nodes/HttpRequestActionNode.tsx
@@ -12,12 +12,12 @@ import type { HttpRequestActionNodeData } from "@/types/node-editor";
 
 // HTTP 메서드별 색상
 const METHOD_COLORS: Record<string, { bg: string; text: string }> = {
-  GET: { bg: "bg-green-100", text: "text-green-700" },
-  POST: { bg: "bg-blue-100", text: "text-blue-700" },
-  PUT: { bg: "bg-orange-100", text: "text-orange-700" },
-  PATCH: { bg: "bg-yellow-100", text: "text-yellow-700" },
-  DELETE: { bg: "bg-red-100", text: "text-red-700" },
-  HEAD: { bg: "bg-gray-100", text: "text-gray-700" },
+  GET: { bg: "bg-emerald-100", text: "text-emerald-700" },
+  POST: { bg: "bg-primary/10", text: "text-primary" },
+  PUT: { bg: "bg-amber-100", text: "text-orange-700" },
+  PATCH: { bg: "bg-amber-100", text: "text-yellow-700" },
+  DELETE: { bg: "bg-destructive/10", text: "text-destructive" },
+  HEAD: { bg: "bg-muted", text: "text-foreground" },
   OPTIONS: { bg: "bg-purple-100", text: "text-purple-700" },
 };
 
@@ -39,7 +39,7 @@ export const HttpRequestActionNode = memo(({ data, selected }: NodeProps<HttpReq
   return (
     <div
       className={`min-w-[250px] rounded-lg border-2 bg-white shadow-md transition-all ${
-        selected ? "border-cyan-500 shadow-lg" : "border-gray-200"
+        selected ? "border-cyan-500 shadow-lg" : "border-border"
       }`}
     >
       {/* 입력 핸들 */}
@@ -65,12 +65,12 @@ export const HttpRequestActionNode = memo(({ data, selected }: NodeProps<HttpReq
             {data.method}
           </span>
           {hasAuth ? (
-            <span className="flex items-center gap-1 rounded bg-green-100 px-1.5 py-0.5 text-xs text-green-700">
+            <span className="flex items-center gap-1 rounded bg-emerald-100 px-1.5 py-0.5 text-xs text-emerald-700">
               <Lock className="h-3 w-3" />
               {data.authentication?.type}
             </span>
           ) : (
-            <span className="flex items-center gap-1 rounded bg-gray-100 px-1.5 py-0.5 text-xs text-gray-500">
+            <span className="flex items-center gap-1 rounded bg-muted px-1.5 py-0.5 text-xs text-muted-foreground">
               <Unlock className="h-3 w-3" />
               인증없음
             </span>
@@ -79,28 +79,28 @@ export const HttpRequestActionNode = memo(({ data, selected }: NodeProps<HttpReq
 
         {/* URL */}
         <div className="text-xs">
-          <span className="text-gray-500">URL: </span>
+          <span className="text-muted-foreground">URL: </span>
           {hasUrl ? (
-            <span className="truncate text-gray-700" title={data.url}>
+            <span className="truncate text-foreground" title={data.url}>
               {getDomain(data.url)}
             </span>
           ) : (
-            <span className="text-orange-500">URL 설정 필요</span>
+            <span className="text-amber-500">URL 설정 필요</span>
           )}
         </div>
 
         {/* 바디 타입 */}
         {data.bodyType && data.bodyType !== "none" && (
           <div className="text-xs">
-            <span className="text-gray-500">Body: </span>
-            <span className="rounded bg-gray-100 px-1.5 py-0.5 text-gray-600">
+            <span className="text-muted-foreground">Body: </span>
+            <span className="rounded bg-muted px-1.5 py-0.5 text-muted-foreground">
               {data.bodyType.toUpperCase()}
             </span>
           </div>
         )}
 
         {/* 타임아웃 & 재시도 */}
-        <div className="flex gap-2 text-xs text-gray-500">
+        <div className="flex gap-2 text-xs text-muted-foreground">
           {data.options?.timeout && (
             <span>타임아웃: {Math.round(data.options.timeout / 1000)}초</span>
           )}
diff --git a/frontend/components/dataflow/node-editor/nodes/InsertActionNode.tsx b/frontend/components/dataflow/node-editor/nodes/InsertActionNode.tsx
index 18f4d157..26ed0998 100644
--- a/frontend/components/dataflow/node-editor/nodes/InsertActionNode.tsx
+++ b/frontend/components/dataflow/node-editor/nodes/InsertActionNode.tsx
@@ -13,14 +13,14 @@ export const InsertActionNode = memo(({ data, selected }: NodeProps<InsertAction
   return (
     <div
       className={`min-w-[250px] rounded-lg border-2 bg-white shadow-md transition-all ${
-        selected ? "border-green-500 shadow-lg" : "border-gray-200"
+        selected ? "border-emerald-500 shadow-lg" : "border-border"
       }`}
     >
       {/* 입력 핸들 */}
-      <Handle type="target" position={Position.Left} className="!h-3 !w-3 !border-2 !border-green-500 !bg-white" />
+      <Handle type="target" position={Position.Left} className="!h-3 !w-3 !border-2 !border-emerald-500 !bg-white" />
 
       {/* 헤더 */}
-      <div className="flex items-center gap-2 rounded-t-lg bg-green-500 px-3 py-2 text-white">
+      <div className="flex items-center gap-2 rounded-t-lg bg-emerald-500 px-3 py-2 text-white">
         <Plus className="h-4 w-4" />
         <div className="flex-1">
           <div className="text-sm font-semibold">INSERT</div>
@@ -30,29 +30,29 @@ export const InsertActionNode = memo(({ data, selected }: NodeProps<InsertAction
 
       {/* 본문 */}
       <div className="p-3">
-        <div className="mb-2 text-xs font-medium text-gray-500">
+        <div className="mb-2 text-xs font-medium text-muted-foreground">
           타겟: {data.displayName || data.targetTable}
           {data.targetTable && data.displayName && data.displayName !== data.targetTable && (
-            <span className="ml-1 font-mono text-gray-400">({data.targetTable})</span>
+            <span className="ml-1 font-mono text-muted-foreground/70">({data.targetTable})</span>
           )}
         </div>
 
         {/* 필드 매핑 */}
         {data.fieldMappings && data.fieldMappings.length > 0 && (
           <div className="space-y-1">
-            <div className="text-xs font-medium text-gray-700">삽입 필드:</div>
+            <div className="text-xs font-medium text-foreground">삽입 필드:</div>
             <div className="max-h-[120px] space-y-1 overflow-y-auto">
               {data.fieldMappings.slice(0, 4).map((mapping, idx) => (
-                <div key={idx} className="rounded bg-gray-50 px-2 py-1 text-xs">
-                  <span className="text-gray-600">
+                <div key={idx} className="rounded bg-muted px-2 py-1 text-xs">
+                  <span className="text-muted-foreground">
                     {mapping.sourceFieldLabel || mapping.sourceField || mapping.staticValue || "?"}
                   </span>
-                  <span className="mx-1 text-gray-400">→</span>
-                  <span className="font-mono text-gray-700">{mapping.targetFieldLabel || mapping.targetField}</span>
+                  <span className="mx-1 text-muted-foreground/70">→</span>
+                  <span className="font-mono text-foreground">{mapping.targetFieldLabel || mapping.targetField}</span>
                 </div>
               ))}
               {data.fieldMappings.length > 4 && (
-                <div className="text-xs text-gray-400">... 외 {data.fieldMappings.length - 4}개</div>
+                <div className="text-xs text-muted-foreground/70">... 외 {data.fieldMappings.length - 4}개</div>
               )}
             </div>
           </div>
@@ -62,10 +62,10 @@ export const InsertActionNode = memo(({ data, selected }: NodeProps<InsertAction
         {data.options && (
           <div className="mt-2 flex flex-wrap gap-1">
             {data.options.ignoreDuplicates && (
-              <span className="rounded bg-green-100 px-1.5 py-0.5 text-xs text-green-700">중복 무시</span>
+              <span className="rounded bg-emerald-100 px-1.5 py-0.5 text-xs text-emerald-700">중복 무시</span>
             )}
             {data.options.batchSize && (
-              <span className="rounded bg-blue-100 px-1.5 py-0.5 text-xs text-blue-700">
+              <span className="rounded bg-primary/10 px-1.5 py-0.5 text-xs text-primary">
                 배치 {data.options.batchSize}건
               </span>
             )}
@@ -74,7 +74,7 @@ export const InsertActionNode = memo(({ data, selected }: NodeProps<InsertAction
       </div>
 
       {/* 출력 핸들 */}
-      <Handle type="source" position={Position.Right} className="!h-3 !w-3 !border-2 !border-green-500 !bg-white" />
+      <Handle type="source" position={Position.Right} className="!h-3 !w-3 !border-2 !border-emerald-500 !bg-white" />
     </div>
   );
 });
diff --git a/frontend/components/dataflow/node-editor/nodes/LogNode.tsx b/frontend/components/dataflow/node-editor/nodes/LogNode.tsx
index 8f2fa295..270f7b0d 100644
--- a/frontend/components/dataflow/node-editor/nodes/LogNode.tsx
+++ b/frontend/components/dataflow/node-editor/nodes/LogNode.tsx
@@ -10,10 +10,10 @@ import { FileText, AlertCircle, Info, AlertTriangle } from "lucide-react";
 import type { LogNodeData } from "@/types/node-editor";
 
 const LOG_LEVEL_CONFIG = {
-  debug: { icon: Info, color: "text-blue-600", bg: "bg-blue-50", border: "border-blue-200" },
-  info: { icon: Info, color: "text-green-600", bg: "bg-green-50", border: "border-green-200" },
-  warn: { icon: AlertTriangle, color: "text-yellow-600", bg: "bg-yellow-50", border: "border-yellow-200" },
-  error: { icon: AlertCircle, color: "text-red-600", bg: "bg-red-50", border: "border-red-200" },
+  debug: { icon: Info, color: "text-primary", bg: "bg-primary/10", border: "border-primary/20" },
+  info: { icon: Info, color: "text-emerald-600", bg: "bg-emerald-50", border: "border-emerald-200" },
+  warn: { icon: AlertTriangle, color: "text-amber-600", bg: "bg-amber-50", border: "border-amber-200" },
+  error: { icon: AlertCircle, color: "text-destructive", bg: "bg-destructive/10", border: "border-destructive/20" },
 };
 
 export const LogNode = memo(({ data, selected }: NodeProps<LogNodeData>) => {
@@ -23,7 +23,7 @@ export const LogNode = memo(({ data, selected }: NodeProps<LogNodeData>) => {
   return (
     <div
       className={`min-w-[200px] rounded-lg border-2 bg-white shadow-sm transition-all ${
-        selected ? `${config.border} shadow-md` : "border-gray-200"
+        selected ? `${config.border} shadow-md` : "border-border"
       }`}
     >
       {/* 헤더 */}
@@ -31,7 +31,7 @@ export const LogNode = memo(({ data, selected }: NodeProps<LogNodeData>) => {
         <FileText className={`h-4 w-4 ${config.color}`} />
         <div className="flex-1">
           <div className={`text-sm font-semibold ${config.color}`}>로그</div>
-          <div className="text-xs text-gray-600">{data.level.toUpperCase()}</div>
+          <div className="text-xs text-muted-foreground">{data.level.toUpperCase()}</div>
         </div>
         <Icon className={`h-4 w-4 ${config.color}`} />
       </div>
@@ -39,19 +39,19 @@ export const LogNode = memo(({ data, selected }: NodeProps<LogNodeData>) => {
       {/* 본문 */}
       <div className="p-3">
         {data.message ? (
-          <div className="text-sm text-gray-700">{data.message}</div>
+          <div className="text-sm text-foreground">{data.message}</div>
         ) : (
-          <div className="text-sm text-gray-400">로그 메시지 없음</div>
+          <div className="text-sm text-muted-foreground/70">로그 메시지 없음</div>
         )}
 
         {data.includeData && (
-          <div className="mt-2 rounded bg-gray-50 px-2 py-1 text-xs text-gray-600">✓ 데이터 포함</div>
+          <div className="mt-2 rounded bg-muted px-2 py-1 text-xs text-muted-foreground">✓ 데이터 포함</div>
         )}
       </div>
 
       {/* 핸들 */}
-      <Handle type="target" position={Position.Left} className="!h-3 !w-3 !bg-gray-400" />
-      <Handle type="source" position={Position.Right} className="!h-3 !w-3 !bg-gray-400" />
+      <Handle type="target" position={Position.Left} className="!h-3 !w-3 !bg-muted-foreground" />
+      <Handle type="source" position={Position.Right} className="!h-3 !w-3 !bg-muted-foreground" />
     </div>
   );
 });
diff --git a/frontend/components/dataflow/node-editor/nodes/NodeWithValidation.tsx b/frontend/components/dataflow/node-editor/nodes/NodeWithValidation.tsx
index 90c1039e..7368f8ec 100644
--- a/frontend/components/dataflow/node-editor/nodes/NodeWithValidation.tsx
+++ b/frontend/components/dataflow/node-editor/nodes/NodeWithValidation.tsx
@@ -44,16 +44,16 @@ export const NodeWithValidation = memo(
       if (hasError) {
         return {
           Icon: AlertCircle,
-          bgColor: "bg-red-500",
-          textColor: "text-red-700",
-          borderColor: "border-red-500",
-          hoverBgColor: "hover:bg-red-600",
+          bgColor: "bg-destructive",
+          textColor: "text-destructive",
+          borderColor: "border-destructive",
+          hoverBgColor: "hover:bg-destructive",
         };
       }
       if (hasWarning) {
         return {
           Icon: AlertTriangle,
-          bgColor: "bg-yellow-500",
+          bgColor: "bg-amber-500",
           textColor: "text-yellow-700",
           borderColor: "border-yellow-500",
           hoverBgColor: "hover:bg-yellow-600",
@@ -61,10 +61,10 @@ export const NodeWithValidation = memo(
       }
       return {
         Icon: Info,
-        bgColor: "bg-blue-500",
-        textColor: "text-blue-700",
-        borderColor: "border-blue-500",
-        hoverBgColor: "hover:bg-blue-600",
+        bgColor: "bg-primary",
+        textColor: "text-primary",
+        borderColor: "border-primary",
+        hoverBgColor: "hover:bg-primary",
       };
     };
 
@@ -97,7 +97,7 @@ export const NodeWithValidation = memo(
               <div className={`rounded-lg border-2 ${borderColor} bg-white p-3 shadow-lg`}>
                 <div className="mb-2 flex items-center gap-2">
                   <Icon className={`h-4 w-4 ${textColor}`} />
-                  <span className="font-semibold text-gray-900">
+                  <span className="font-semibold text-foreground">
                     {hasError
                       ? "오류"
                       : hasWarning
@@ -109,16 +109,16 @@ export const NodeWithValidation = memo(
                   {nodeValidations.map((validation, index) => (
                     <div
                       key={index}
-                      className="rounded border-l-2 border-gray-300 bg-gray-50 p-2"
+                      className="rounded border-l-2 border-input bg-muted p-2"
                     >
-                      <div className="mb-1 text-xs font-medium text-gray-500">
+                      <div className="mb-1 text-xs font-medium text-muted-foreground">
                         {validation.type}
                       </div>
-                      <div className="text-sm text-gray-700">
+                      <div className="text-sm text-foreground">
                         {validation.message}
                       </div>
                       {validation.affectedNodes && validation.affectedNodes.length > 1 && (
-                        <div className="mt-1 text-xs text-gray-500">
+                        <div className="mt-1 text-xs text-muted-foreground">
                           영향받는 노드: {validation.affectedNodes.length}개
                         </div>
                       )}
diff --git a/frontend/components/dataflow/node-editor/nodes/ProcedureCallActionNode.tsx b/frontend/components/dataflow/node-editor/nodes/ProcedureCallActionNode.tsx
index d54478a9..189bc054 100644
--- a/frontend/components/dataflow/node-editor/nodes/ProcedureCallActionNode.tsx
+++ b/frontend/components/dataflow/node-editor/nodes/ProcedureCallActionNode.tsx
@@ -19,7 +19,7 @@ export const ProcedureCallActionNode = memo(
     return (
       <div
         className={`min-w-[250px] rounded-lg border-2 bg-white shadow-md transition-all ${
-          selected ? "border-violet-500 shadow-lg" : "border-gray-200"
+          selected ? "border-violet-500 shadow-lg" : "border-border"
         }`}
       >
         {/* 입력 핸들 */}
@@ -43,14 +43,14 @@ export const ProcedureCallActionNode = memo(
         <div className="space-y-2 p-3">
           {/* DB 소스 */}
           <div className="flex items-center gap-2">
-            <Database className="h-3 w-3 text-gray-400" />
-            <span className="text-xs text-gray-600">
+            <Database className="h-3 w-3 text-muted-foreground/70" />
+            <span className="text-xs text-muted-foreground">
               {data.dbSource === "external" ? (
                 <span className="rounded bg-amber-100 px-2 py-0.5 text-amber-700">
                   {data.connectionName || "외부 DB"}
                 </span>
               ) : (
-                <span className="rounded bg-blue-100 px-2 py-0.5 text-blue-700">
+                <span className="rounded bg-primary/10 px-2 py-0.5 text-primary">
                   내부 DB
                 </span>
               )}
@@ -68,39 +68,39 @@ export const ProcedureCallActionNode = memo(
 
           {/* 프로시저명 */}
           <div className="flex items-center gap-2 text-xs">
-            <Workflow className="h-3 w-3 text-gray-400" />
+            <Workflow className="h-3 w-3 text-muted-foreground/70" />
             {hasProcedure ? (
-              <span className="font-mono text-green-600 truncate">
+              <span className="font-mono text-emerald-600 truncate">
                 {data.procedureSchema && data.procedureSchema !== "public"
                   ? `${data.procedureSchema}.`
                   : ""}
                 {data.procedureName}()
               </span>
             ) : (
-              <span className="text-orange-500">프로시저 선택 필요</span>
+              <span className="text-amber-500">프로시저 선택 필요</span>
             )}
           </div>
 
           {/* 파라미터 수 */}
           {hasProcedure && inParams.length > 0 && (
-            <div className="text-xs text-gray-500">
+            <div className="text-xs text-muted-foreground">
               입력 파라미터: {inParams.length}개
             </div>
           )}
 
           {/* 반환 필드 */}
           {hasProcedure && outParams.length > 0 && (
-            <div className="mt-1 space-y-1 border-t border-gray-100 pt-1">
-              <div className="text-[10px] font-medium text-green-600">
+            <div className="mt-1 space-y-1 border-t border-border pt-1">
+              <div className="text-[10px] font-medium text-emerald-600">
                 반환 필드:
               </div>
               {outParams.map((p) => (
                 <div
                   key={p.name}
-                  className="flex items-center justify-between rounded bg-green-50 px-2 py-0.5 text-[10px]"
+                  className="flex items-center justify-between rounded bg-emerald-50 px-2 py-0.5 text-[10px]"
                 >
-                  <span className="font-mono text-green-700">{p.name}</span>
-                  <span className="text-gray-400">{p.dataType}</span>
+                  <span className="font-mono text-emerald-700">{p.name}</span>
+                  <span className="text-muted-foreground/70">{p.dataType}</span>
                 </div>
               ))}
             </div>
diff --git a/frontend/components/dataflow/node-editor/nodes/RestAPISourceNode.tsx b/frontend/components/dataflow/node-editor/nodes/RestAPISourceNode.tsx
index d6713f85..e25db7d7 100644
--- a/frontend/components/dataflow/node-editor/nodes/RestAPISourceNode.tsx
+++ b/frontend/components/dataflow/node-editor/nodes/RestAPISourceNode.tsx
@@ -10,20 +10,20 @@ import { Globe, Lock } from "lucide-react";
 import type { RestAPISourceNodeData } from "@/types/node-editor";
 
 const METHOD_COLORS: Record<string, string> = {
-  GET: "bg-green-100 text-green-700",
-  POST: "bg-blue-100 text-blue-700",
-  PUT: "bg-yellow-100 text-yellow-700",
-  DELETE: "bg-red-100 text-red-700",
+  GET: "bg-emerald-100 text-emerald-700",
+  POST: "bg-primary/10 text-primary",
+  PUT: "bg-amber-100 text-yellow-700",
+  DELETE: "bg-destructive/10 text-destructive",
   PATCH: "bg-purple-100 text-purple-700",
 };
 
 export const RestAPISourceNode = memo(({ data, selected }: NodeProps<RestAPISourceNodeData>) => {
-  const methodColor = METHOD_COLORS[data.method] || "bg-gray-100 text-gray-700";
+  const methodColor = METHOD_COLORS[data.method] || "bg-muted text-foreground";
 
   return (
     <div
       className={`min-w-[250px] rounded-lg border-2 bg-white shadow-md transition-all ${
-        selected ? "border-orange-500 shadow-lg" : "border-gray-200"
+        selected ? "border-orange-500 shadow-lg" : "border-border"
       }`}
     >
       {/* 헤더 */}
@@ -41,24 +41,24 @@ export const RestAPISourceNode = memo(({ data, selected }: NodeProps<RestAPISour
         {/* HTTP 메서드 */}
         <div className="mb-2 flex items-center gap-2">
           <span className={`rounded px-2 py-1 text-xs font-semibold ${methodColor}`}>{data.method}</span>
-          {data.timeout && <span className="text-xs text-gray-500">{data.timeout}ms</span>}
+          {data.timeout && <span className="text-xs text-muted-foreground">{data.timeout}ms</span>}
         </div>
 
         {/* 헤더 */}
         {data.headers && Object.keys(data.headers).length > 0 && (
           <div className="mb-2">
-            <div className="text-xs font-medium text-gray-700">헤더:</div>
+            <div className="text-xs font-medium text-foreground">헤더:</div>
             <div className="mt-1 space-y-1">
               {Object.entries(data.headers)
                 .slice(0, 2)
                 .map(([key, value]) => (
-                  <div key={key} className="flex items-center gap-2 text-xs text-gray-600">
+                  <div key={key} className="flex items-center gap-2 text-xs text-muted-foreground">
                     <span className="font-mono">{key}:</span>
-                    <span className="truncate text-gray-500">{value}</span>
+                    <span className="truncate text-muted-foreground">{value}</span>
                   </div>
                 ))}
               {Object.keys(data.headers).length > 2 && (
-                <div className="text-xs text-gray-400">... 외 {Object.keys(data.headers).length - 2}개</div>
+                <div className="text-xs text-muted-foreground/70">... 외 {Object.keys(data.headers).length - 2}개</div>
               )}
             </div>
           </div>
diff --git a/frontend/components/dataflow/node-editor/nodes/ScriptActionNode.tsx b/frontend/components/dataflow/node-editor/nodes/ScriptActionNode.tsx
index c4027047..52756763 100644
--- a/frontend/components/dataflow/node-editor/nodes/ScriptActionNode.tsx
+++ b/frontend/components/dataflow/node-editor/nodes/ScriptActionNode.tsx
@@ -12,11 +12,11 @@ import type { ScriptActionNodeData } from "@/types/node-editor";
 
 // 스크립트 타입별 아이콘 색상
 const SCRIPT_TYPE_COLORS: Record<string, { bg: string; text: string; label: string }> = {
-  python: { bg: "bg-yellow-100", text: "text-yellow-700", label: "Python" },
-  shell: { bg: "bg-green-100", text: "text-green-700", label: "Shell" },
-  powershell: { bg: "bg-blue-100", text: "text-blue-700", label: "PowerShell" },
+  python: { bg: "bg-amber-100", text: "text-yellow-700", label: "Python" },
+  shell: { bg: "bg-emerald-100", text: "text-emerald-700", label: "Shell" },
+  powershell: { bg: "bg-primary/10", text: "text-primary", label: "PowerShell" },
   node: { bg: "bg-emerald-100", text: "text-emerald-700", label: "Node.js" },
-  executable: { bg: "bg-gray-100", text: "text-gray-700", label: "실행파일" },
+  executable: { bg: "bg-muted", text: "text-foreground", label: "실행파일" },
 };
 
 export const ScriptActionNode = memo(({ data, selected }: NodeProps<ScriptActionNodeData>) => {
@@ -26,7 +26,7 @@ export const ScriptActionNode = memo(({ data, selected }: NodeProps<ScriptAction
   return (
     <div
       className={`min-w-[250px] rounded-lg border-2 bg-white shadow-md transition-all ${
-        selected ? "border-emerald-500 shadow-lg" : "border-gray-200"
+        selected ? "border-emerald-500 shadow-lg" : "border-border"
       }`}
     >
       {/* 입력 핸들 */}
@@ -51,7 +51,7 @@ export const ScriptActionNode = memo(({ data, selected }: NodeProps<ScriptAction
           <span className={`rounded px-2 py-0.5 text-xs font-medium ${scriptTypeInfo.bg} ${scriptTypeInfo.text}`}>
             {scriptTypeInfo.label}
           </span>
-          <span className="rounded bg-gray-100 px-2 py-0.5 text-xs text-gray-600">
+          <span className="rounded bg-muted px-2 py-0.5 text-xs text-muted-foreground">
             {data.executionMode === "inline" ? "인라인" : "파일"}
           </span>
         </div>
@@ -60,25 +60,25 @@ export const ScriptActionNode = memo(({ data, selected }: NodeProps<ScriptAction
         <div className="flex items-center gap-2 text-xs">
           {data.executionMode === "inline" ? (
             <>
-              <FileCode className="h-3 w-3 text-gray-400" />
-              <span className="text-gray-600">
+              <FileCode className="h-3 w-3 text-muted-foreground/70" />
+              <span className="text-muted-foreground">
                 {hasScript ? (
-                  <span className="text-green-600">
+                  <span className="text-emerald-600">
                     {data.inlineScript!.split("\n").length}줄 스크립트
                   </span>
                 ) : (
-                  <span className="text-orange-500">스크립트 입력 필요</span>
+                  <span className="text-amber-500">스크립트 입력 필요</span>
                 )}
               </span>
             </>
           ) : (
             <>
-              <Play className="h-3 w-3 text-gray-400" />
-              <span className="text-gray-600">
+              <Play className="h-3 w-3 text-muted-foreground/70" />
+              <span className="text-muted-foreground">
                 {hasScript ? (
-                  <span className="truncate text-green-600">{data.scriptPath}</span>
+                  <span className="truncate text-emerald-600">{data.scriptPath}</span>
                 ) : (
-                  <span className="text-orange-500">파일 경로 필요</span>
+                  <span className="text-amber-500">파일 경로 필요</span>
                 )}
               </span>
             </>
@@ -87,8 +87,8 @@ export const ScriptActionNode = memo(({ data, selected }: NodeProps<ScriptAction
 
         {/* 입력 방식 */}
         <div className="text-xs">
-          <span className="text-gray-500">입력: </span>
-          <span className="text-gray-700">
+          <span className="text-muted-foreground">입력: </span>
+          <span className="text-foreground">
             {data.inputMethod === "stdin" && "표준입력 (stdin)"}
             {data.inputMethod === "args" && "명령줄 인자"}
             {data.inputMethod === "env" && "환경변수"}
@@ -98,7 +98,7 @@ export const ScriptActionNode = memo(({ data, selected }: NodeProps<ScriptAction
 
         {/* 타임아웃 */}
         {data.options?.timeout && (
-          <div className="text-xs text-gray-500">
+          <div className="text-xs text-muted-foreground">
             타임아웃: {Math.round(data.options.timeout / 1000)}초
           </div>
         )}
diff --git a/frontend/components/dataflow/node-editor/nodes/TableSourceNode.tsx b/frontend/components/dataflow/node-editor/nodes/TableSourceNode.tsx
index f9a253c7..fd038c99 100644
--- a/frontend/components/dataflow/node-editor/nodes/TableSourceNode.tsx
+++ b/frontend/components/dataflow/node-editor/nodes/TableSourceNode.tsx
@@ -18,11 +18,11 @@ export const TableSourceNode = memo(({ data, selected }: NodeProps<TableSourceNo
   return (
     <div
       className={`min-w-[250px] rounded-lg border-2 bg-white shadow-md transition-all ${
-        selected ? "border-blue-500 shadow-lg" : "border-gray-200"
+        selected ? "border-primary shadow-lg" : "border-border"
       }`}
     >
       {/* 헤더 */}
-      <div className="flex items-center gap-2 rounded-t-lg bg-blue-500 px-3 py-2 text-white">
+      <div className="flex items-center gap-2 rounded-t-lg bg-primary px-3 py-2 text-white">
         <Database className="h-4 w-4" />
         <div className="flex-1">
           <div className="text-sm font-semibold">{data.displayName || data.tableName || "테이블 소스"}</div>
@@ -34,35 +34,35 @@ export const TableSourceNode = memo(({ data, selected }: NodeProps<TableSourceNo
 
       {/* 본문 */}
       <div className="p-3">
-        <div className="mb-2 text-xs font-medium text-gray-500">📍 내부 데이터베이스</div>
+        <div className="mb-2 text-xs font-medium text-muted-foreground">📍 내부 데이터베이스</div>
 
         {/* 필드 목록 */}
         <div className="space-y-1">
-          <div className="text-xs font-medium text-gray-700">출력 필드:</div>
+          <div className="text-xs font-medium text-foreground">출력 필드:</div>
           <div className="max-h-[150px] overflow-y-auto">
             {data.fields && data.fields.length > 0 ? (
               data.fields.slice(0, 5).map((field) => (
-                <div key={field.name} className="flex items-center gap-2 text-xs text-gray-600">
-                  <div className="h-1.5 w-1.5 rounded-full bg-blue-400" />
+                <div key={field.name} className="flex items-center gap-2 text-xs text-muted-foreground">
+                  <div className="h-1.5 w-1.5 rounded-full bg-primary/70" />
                   <span className="font-medium">{field.label || field.displayName || field.name}</span>
                   {(field.label || field.displayName) && field.label !== field.name && (
-                    <span className="font-mono text-gray-400">({field.name})</span>
+                    <span className="font-mono text-muted-foreground/70">({field.name})</span>
                   )}
-                  <span className="text-gray-400">{field.type}</span>
+                  <span className="text-muted-foreground/70">{field.type}</span>
                 </div>
               ))
             ) : (
-              <div className="text-xs text-gray-400">필드 없음</div>
+              <div className="text-xs text-muted-foreground/70">필드 없음</div>
             )}
             {data.fields && data.fields.length > 5 && (
-              <div className="text-xs text-gray-400">... 외 {data.fields.length - 5}개</div>
+              <div className="text-xs text-muted-foreground/70">... 외 {data.fields.length - 5}개</div>
             )}
           </div>
         </div>
       </div>
 
       {/* 출력 핸들 */}
-      <Handle type="source" position={Position.Right} className="!h-3 !w-3 !border-2 !border-blue-500 !bg-white" />
+      <Handle type="source" position={Position.Right} className="!h-3 !w-3 !border-2 !border-primary !bg-white" />
     </div>
   );
 });
diff --git a/frontend/components/dataflow/node-editor/nodes/UpdateActionNode.tsx b/frontend/components/dataflow/node-editor/nodes/UpdateActionNode.tsx
index b7b0dfee..51a4d027 100644
--- a/frontend/components/dataflow/node-editor/nodes/UpdateActionNode.tsx
+++ b/frontend/components/dataflow/node-editor/nodes/UpdateActionNode.tsx
@@ -13,14 +13,14 @@ export const UpdateActionNode = memo(({ data, selected }: NodeProps<UpdateAction
   return (
     <div
       className={`min-w-[250px] rounded-lg border-2 bg-white shadow-md transition-all ${
-        selected ? "border-blue-500 shadow-lg" : "border-gray-200"
+        selected ? "border-primary shadow-lg" : "border-border"
       }`}
     >
       {/* 입력 핸들 */}
-      <Handle type="target" position={Position.Left} className="!h-3 !w-3 !border-2 !border-blue-500 !bg-white" />
+      <Handle type="target" position={Position.Left} className="!h-3 !w-3 !border-2 !border-primary !bg-white" />
 
       {/* 헤더 */}
-      <div className="flex items-center gap-2 rounded-t-lg bg-blue-500 px-3 py-2 text-white">
+      <div className="flex items-center gap-2 rounded-t-lg bg-primary px-3 py-2 text-white">
         <Edit className="h-4 w-4" />
         <div className="flex-1">
           <div className="text-sm font-semibold">UPDATE</div>
@@ -30,29 +30,29 @@ export const UpdateActionNode = memo(({ data, selected }: NodeProps<UpdateAction
 
       {/* 본문 */}
       <div className="p-3">
-        <div className="mb-2 text-xs font-medium text-gray-500">
+        <div className="mb-2 text-xs font-medium text-muted-foreground">
           타겟: {data.displayName || data.targetTable}
           {data.targetTable && data.displayName && data.displayName !== data.targetTable && (
-            <span className="ml-1 font-mono text-gray-400">({data.targetTable})</span>
+            <span className="ml-1 font-mono text-muted-foreground/70">({data.targetTable})</span>
           )}
         </div>
 
         {/* WHERE 조건 */}
         {data.whereConditions && data.whereConditions.length > 0 && (
           <div className="mb-3 space-y-1">
-            <div className="text-xs font-medium text-gray-700">WHERE 조건:</div>
+            <div className="text-xs font-medium text-foreground">WHERE 조건:</div>
             <div className="max-h-[80px] space-y-1 overflow-y-auto">
               {data.whereConditions.slice(0, 2).map((condition, idx) => (
-                <div key={idx} className="rounded bg-blue-50 px-2 py-1 text-xs">
-                  <span className="font-mono text-gray-700">{condition.fieldLabel || condition.field}</span>
-                  <span className="mx-1 text-blue-600">{condition.operator}</span>
-                  <span className="text-gray-600">
+                <div key={idx} className="rounded bg-primary/10 px-2 py-1 text-xs">
+                  <span className="font-mono text-foreground">{condition.fieldLabel || condition.field}</span>
+                  <span className="mx-1 text-primary">{condition.operator}</span>
+                  <span className="text-muted-foreground">
                     {condition.sourceFieldLabel || condition.sourceField || condition.staticValue || "?"}
                   </span>
                 </div>
               ))}
               {data.whereConditions.length > 2 && (
-                <div className="text-xs text-gray-400">... 외 {data.whereConditions.length - 2}개</div>
+                <div className="text-xs text-muted-foreground/70">... 외 {data.whereConditions.length - 2}개</div>
               )}
             </div>
           </div>
@@ -61,19 +61,19 @@ export const UpdateActionNode = memo(({ data, selected }: NodeProps<UpdateAction
         {/* 필드 매핑 */}
         {data.fieldMappings && data.fieldMappings.length > 0 && (
           <div className="space-y-1">
-            <div className="text-xs font-medium text-gray-700">업데이트 필드:</div>
+            <div className="text-xs font-medium text-foreground">업데이트 필드:</div>
             <div className="max-h-[100px] space-y-1 overflow-y-auto">
               {data.fieldMappings.slice(0, 3).map((mapping, idx) => (
-                <div key={idx} className="rounded bg-gray-50 px-2 py-1 text-xs">
-                  <span className="text-gray-600">
+                <div key={idx} className="rounded bg-muted px-2 py-1 text-xs">
+                  <span className="text-muted-foreground">
                     {mapping.sourceFieldLabel || mapping.sourceField || mapping.staticValue || "?"}
                   </span>
-                  <span className="mx-1 text-gray-400">→</span>
-                  <span className="font-mono text-gray-700">{mapping.targetFieldLabel || mapping.targetField}</span>
+                  <span className="mx-1 text-muted-foreground/70">→</span>
+                  <span className="font-mono text-foreground">{mapping.targetFieldLabel || mapping.targetField}</span>
                 </div>
               ))}
               {data.fieldMappings.length > 3 && (
-                <div className="text-xs text-gray-400">... 외 {data.fieldMappings.length - 3}개</div>
+                <div className="text-xs text-muted-foreground/70">... 외 {data.fieldMappings.length - 3}개</div>
               )}
             </div>
           </div>
@@ -82,7 +82,7 @@ export const UpdateActionNode = memo(({ data, selected }: NodeProps<UpdateAction
         {/* 옵션 */}
         {data.options && data.options.batchSize && (
           <div className="mt-2">
-            <span className="rounded bg-blue-100 px-1.5 py-0.5 text-xs text-blue-700">
+            <span className="rounded bg-primary/10 px-1.5 py-0.5 text-xs text-primary">
               배치 {data.options.batchSize}건
             </span>
           </div>
@@ -90,7 +90,7 @@ export const UpdateActionNode = memo(({ data, selected }: NodeProps<UpdateAction
       </div>
 
       {/* 출력 핸들 */}
-      <Handle type="source" position={Position.Right} className="!h-3 !w-3 !border-2 !border-blue-500 !bg-white" />
+      <Handle type="source" position={Position.Right} className="!h-3 !w-3 !border-2 !border-primary !bg-white" />
     </div>
   );
 });
diff --git a/frontend/components/dataflow/node-editor/nodes/UpsertActionNode.tsx b/frontend/components/dataflow/node-editor/nodes/UpsertActionNode.tsx
index 4e5bdeba..ece58159 100644
--- a/frontend/components/dataflow/node-editor/nodes/UpsertActionNode.tsx
+++ b/frontend/components/dataflow/node-editor/nodes/UpsertActionNode.tsx
@@ -14,7 +14,7 @@ export const UpsertActionNode = memo(({ data, selected }: NodeProps<UpsertAction
   return (
     <div
       className={`min-w-[250px] rounded-lg border-2 bg-white shadow-md transition-all ${
-        selected ? "border-orange-500 shadow-lg" : "border-gray-200"
+        selected ? "border-orange-500 shadow-lg" : "border-border"
       }`}
     >
       {/* 헤더 */}
@@ -29,17 +29,17 @@ export const UpsertActionNode = memo(({ data, selected }: NodeProps<UpsertAction
 
       {/* 본문 */}
       <div className="p-3">
-        <div className="mb-2 text-xs font-medium text-gray-500">
+        <div className="mb-2 text-xs font-medium text-muted-foreground">
           타겟: {data.displayName || data.targetTable}
           {data.targetTable && data.displayName && data.displayName !== data.targetTable && (
-            <span className="ml-1 font-mono text-gray-400">({data.targetTable})</span>
+            <span className="ml-1 font-mono text-muted-foreground/70">({data.targetTable})</span>
           )}
         </div>
 
         {/* 충돌 키 */}
         {data.conflictKeys && data.conflictKeys.length > 0 && (
           <div className="mb-2">
-            <div className="text-xs font-medium text-gray-700">충돌 키:</div>
+            <div className="text-xs font-medium text-foreground">충돌 키:</div>
             <div className="mt-1 flex flex-wrap gap-1">
               {data.conflictKeys.map((key, idx) => (
                 <span key={idx} className="rounded bg-purple-100 px-2 py-0.5 text-xs text-purple-700">
@@ -53,19 +53,19 @@ export const UpsertActionNode = memo(({ data, selected }: NodeProps<UpsertAction
         {/* 필드 매핑 */}
         {data.fieldMappings && data.fieldMappings.length > 0 && (
           <div className="mb-2">
-            <div className="text-xs font-medium text-gray-700">필드 매핑:</div>
+            <div className="text-xs font-medium text-foreground">필드 매핑:</div>
             <div className="mt-1 space-y-1">
               {data.fieldMappings.slice(0, 3).map((mapping, idx) => (
-                <div key={idx} className="rounded bg-gray-50 px-2 py-1 text-xs">
-                  <span className="text-gray-600">
+                <div key={idx} className="rounded bg-muted px-2 py-1 text-xs">
+                  <span className="text-muted-foreground">
                     {mapping.sourceFieldLabel || mapping.sourceField || mapping.staticValue || "?"}
                   </span>
-                  <span className="mx-1 text-gray-400">→</span>
-                  <span className="font-mono text-gray-700">{mapping.targetFieldLabel || mapping.targetField}</span>
+                  <span className="mx-1 text-muted-foreground/70">→</span>
+                  <span className="font-mono text-foreground">{mapping.targetFieldLabel || mapping.targetField}</span>
                 </div>
               ))}
               {data.fieldMappings.length > 3 && (
-                <div className="text-xs text-gray-400">... 외 {data.fieldMappings.length - 3}개</div>
+                <div className="text-xs text-muted-foreground/70">... 외 {data.fieldMappings.length - 3}개</div>
               )}
             </div>
           </div>
@@ -74,10 +74,10 @@ export const UpsertActionNode = memo(({ data, selected }: NodeProps<UpsertAction
         {/* 옵션 */}
         <div className="flex flex-wrap gap-1">
           {data.options?.updateOnConflict && (
-            <span className="rounded bg-blue-100 px-2 py-0.5 text-xs text-blue-700">충돌 시 업데이트</span>
+            <span className="rounded bg-primary/10 px-2 py-0.5 text-xs text-primary">충돌 시 업데이트</span>
           )}
           {data.options?.batchSize && (
-            <span className="rounded bg-gray-100 px-2 py-0.5 text-xs text-gray-600">
+            <span className="rounded bg-muted px-2 py-0.5 text-xs text-muted-foreground">
               배치: {data.options.batchSize}
             </span>
           )}
diff --git a/frontend/components/dataflow/node-editor/panels/PropertiesPanel.tsx b/frontend/components/dataflow/node-editor/panels/PropertiesPanel.tsx
index 316f93b0..ddfc47e3 100644
--- a/frontend/components/dataflow/node-editor/panels/PropertiesPanel.tsx
+++ b/frontend/components/dataflow/node-editor/panels/PropertiesPanel.tsx
@@ -51,9 +51,9 @@ export function PropertiesPanel() {
         className="flex items-center justify-between border-b bg-white p-4"
       >
         <div>
-          <h3 className="text-sm font-semibold text-gray-900">속성</h3>
+          <h3 className="text-sm font-semibold text-foreground">속성</h3>
           {selectedNode && (
-            <p className="mt-0.5 text-xs text-gray-500">{getNodeTypeLabel(selectedNode.type as NodeType)}</p>
+            <p className="mt-0.5 text-xs text-muted-foreground">{getNodeTypeLabel(selectedNode.type as NodeType)}</p>
           )}
         </div>
         <Button variant="ghost" size="sm" onClick={() => setShowPropertiesPanel(false)} className="h-6 w-6 p-0">
@@ -72,7 +72,7 @@ export function PropertiesPanel() {
       >
         {selectedNodes.length === 0 ? (
           <div className="flex h-full items-center justify-center p-4">
-            <div className="text-center text-sm text-gray-500">
+            <div className="text-center text-sm text-muted-foreground">
               <div className="mb-2 text-2xl">📝</div>
               <p>노드를 선택하여</p>
               <p>속성을 편집하세요</p>
@@ -82,7 +82,7 @@ export function PropertiesPanel() {
           <NodePropertiesRenderer node={selectedNode} />
         ) : (
           <div className="flex h-full items-center justify-center p-4">
-            <div className="text-center text-sm text-gray-500">
+            <div className="text-center text-sm text-muted-foreground">
               <div className="mb-2 text-2xl">📋</div>
               <p>{selectedNodes.length}개의 노드가</p>
               <p>선택되었습니다</p>
@@ -154,14 +154,14 @@ function NodePropertiesRenderer({ node }: { node: any }) {
     default:
       return (
         <div className="p-4">
-          <div className="rounded border border-yellow-200 bg-yellow-50 p-4 text-sm">
+          <div className="rounded border border-amber-200 bg-amber-50 p-4 text-sm">
             <p className="font-medium text-yellow-800">🚧 속성 편집 준비 중</p>
             <p className="mt-2 text-xs text-yellow-700">
               {getNodeTypeLabel(node.type as NodeType)} 노드의 속성 편집 UI는 곧 구현될 예정입니다.
             </p>
             <div className="mt-3 rounded bg-white p-2 text-xs">
-              <p className="font-medium text-gray-700">노드 ID:</p>
-              <p className="font-mono text-gray-600">{node.id}</p>
+              <p className="font-medium text-foreground">노드 ID:</p>
+              <p className="font-mono text-muted-foreground">{node.id}</p>
             </div>
           </div>
         </div>
diff --git a/frontend/components/dataflow/node-editor/panels/ValidationPanel.tsx b/frontend/components/dataflow/node-editor/panels/ValidationPanel.tsx
index a8a5b149..4222f961 100644
--- a/frontend/components/dataflow/node-editor/panels/ValidationPanel.tsx
+++ b/frontend/components/dataflow/node-editor/panels/ValidationPanel.tsx
@@ -78,9 +78,9 @@ export const ValidationPanel = memo(
 
     if (validations.length === 0) {
       return (
-        <div className="flex h-full flex-col border-l border-gray-200 bg-white">
-          <div className="flex items-center justify-between border-b border-gray-200 p-4">
-            <h3 className="text-sm font-semibold text-gray-900">검증 결과</h3>
+        <div className="flex h-full flex-col border-l border-border bg-white">
+          <div className="flex items-center justify-between border-b border-border p-4">
+            <h3 className="text-sm font-semibold text-foreground">검증 결과</h3>
             {onClose && (
               <Button
                 variant="ghost"
@@ -94,11 +94,11 @@ export const ValidationPanel = memo(
           </div>
           <div className="flex flex-1 items-center justify-center p-8 text-center">
             <div>
-              <div className="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
-                <Info className="h-6 w-6 text-green-600" />
+              <div className="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-emerald-100">
+                <Info className="h-6 w-6 text-emerald-600" />
               </div>
-              <p className="text-sm font-medium text-gray-900">문제 없음</p>
-              <p className="mt-1 text-xs text-gray-500">
+              <p className="text-sm font-medium text-foreground">문제 없음</p>
+              <p className="mt-1 text-xs text-muted-foreground">
                 플로우에 문제가 발견되지 않았습니다
               </p>
             </div>
@@ -108,10 +108,10 @@ export const ValidationPanel = memo(
     }
 
     return (
-      <div className="flex h-full flex-col border-l border-gray-200 bg-white">
+      <div className="flex h-full flex-col border-l border-border bg-white">
         {/* 헤더 */}
-        <div className="flex items-center justify-between border-b border-gray-200 p-4">
-          <h3 className="text-sm font-semibold text-gray-900">검증 결과</h3>
+        <div className="flex items-center justify-between border-b border-border p-4">
+          <h3 className="text-sm font-semibold text-foreground">검증 결과</h3>
           {onClose && (
             <Button
               variant="ghost"
@@ -125,7 +125,7 @@ export const ValidationPanel = memo(
         </div>
 
         {/* 요약 */}
-        <div className="border-b border-gray-200 bg-gray-50 p-4">
+        <div className="border-b border-border bg-muted p-4">
           <div className="flex items-center gap-3">
             {summary.errorCount > 0 && (
               <Badge variant="destructive" className="gap-1">
@@ -134,7 +134,7 @@ export const ValidationPanel = memo(
               </Badge>
             )}
             {summary.warningCount > 0 && (
-              <Badge className="gap-1 bg-yellow-500 hover:bg-yellow-600">
+              <Badge className="gap-1 bg-amber-500 hover:bg-yellow-600">
                 <AlertTriangle className="h-3 w-3" />
                 경고 {summary.warningCount}
               </Badge>
@@ -147,7 +147,7 @@ export const ValidationPanel = memo(
             )}
           </div>
           {summary.hasBlockingIssues && (
-            <p className="mt-2 text-xs text-red-600">
+            <p className="mt-2 text-xs text-destructive">
               ⛔ 오류를 해결해야 저장할 수 있습니다
             </p>
           )}
@@ -174,34 +174,34 @@ export const ValidationPanel = memo(
                     className={cn(
                       "flex w-full items-center gap-2 rounded-lg p-3 text-left transition-colors",
                       firstValidation.severity === "error"
-                        ? "bg-red-50 hover:bg-red-100"
+                        ? "bg-destructive/10 hover:bg-destructive/10"
                         : firstValidation.severity === "warning"
-                          ? "bg-yellow-50 hover:bg-yellow-100"
-                          : "bg-blue-50 hover:bg-blue-100"
+                          ? "bg-amber-50 hover:bg-amber-100"
+                          : "bg-primary/10 hover:bg-primary/10"
                     )}
                   >
                     <Icon
                       className={cn(
                         "h-4 w-4 shrink-0",
                         firstValidation.severity === "error"
-                          ? "text-red-600"
+                          ? "text-destructive"
                           : firstValidation.severity === "warning"
-                            ? "text-yellow-600"
-                            : "text-blue-600"
+                            ? "text-amber-600"
+                            : "text-primary"
                       )}
                     />
                     <div className="flex-1">
-                      <div className="text-sm font-medium text-gray-900">
+                      <div className="text-sm font-medium text-foreground">
                         {getTypeLabel(type)}
                       </div>
-                      <div className="text-xs text-gray-500">
+                      <div className="text-xs text-muted-foreground">
                         {typeValidations.length}개 발견
                       </div>
                     </div>
                     {isExpanded ? (
-                      <ChevronUp className="h-4 w-4 text-gray-400" />
+                      <ChevronUp className="h-4 w-4 text-muted-foreground/70" />
                     ) : (
-                      <ChevronDown className="h-4 w-4 text-gray-400" />
+                      <ChevronDown className="h-4 w-4 text-muted-foreground/70" />
                     )}
                   </button>
 
@@ -211,10 +211,10 @@ export const ValidationPanel = memo(
                       {typeValidations.map((validation, index) => (
                         <div
                           key={index}
-                          className="group cursor-pointer rounded-lg border border-gray-200 bg-white p-3 transition-all hover:border-gray-300 hover:shadow-sm"
+                          className="group cursor-pointer rounded-lg border border-border bg-white p-3 transition-all hover:border-input hover:shadow-sm"
                           onClick={() => onNodeClick?.(validation.nodeId)}
                         >
-                          <div className="text-xs text-gray-700">
+                          <div className="text-xs text-foreground">
                             {validation.message}
                           </div>
                           {validation.affectedNodes && validation.affectedNodes.length > 1 && (
@@ -224,7 +224,7 @@ export const ValidationPanel = memo(
                               </Badge>
                             </div>
                           )}
-                          <div className="mt-2 text-[10px] text-gray-400 opacity-0 transition-opacity group-hover:opacity-100">
+                          <div className="mt-2 text-[10px] text-muted-foreground/70 opacity-0 transition-opacity group-hover:opacity-100">
                             클릭하여 노드 보기
                           </div>
                         </div>
diff --git a/frontend/components/dataflow/node-editor/panels/properties/AggregateProperties.tsx b/frontend/components/dataflow/node-editor/panels/properties/AggregateProperties.tsx
index 6d3d7311..dfacc3a3 100644
--- a/frontend/components/dataflow/node-editor/panels/properties/AggregateProperties.tsx
+++ b/frontend/components/dataflow/node-editor/panels/properties/AggregateProperties.tsx
@@ -234,16 +234,16 @@ export function AggregateProperties({ nodeId, data }: AggregatePropertiesProps)
             <Layers className="h-4 w-4 text-purple-600" />
             <h3 className="text-sm font-semibold">그룹 기준 필드</h3>
           </div>
-          <p className="mb-2 text-xs text-gray-500">
+          <p className="mb-2 text-xs text-muted-foreground">
             선택한 필드를 기준으로 데이터를 그룹화합니다. 선택하지 않으면 전체 데이터를 하나의 그룹으로 처리합니다.
           </p>
 
           {sourceFields.length === 0 ? (
-            <div className="rounded border border-dashed bg-gray-50 p-3 text-center text-xs text-gray-500">
+            <div className="rounded border border-dashed bg-muted p-3 text-center text-xs text-muted-foreground">
               연결된 소스 노드가 없습니다
             </div>
           ) : (
-            <div className="max-h-40 overflow-y-auto rounded border bg-gray-50 p-2">
+            <div className="max-h-40 overflow-y-auto rounded border bg-muted p-2">
               <div className="space-y-1">
                 {sourceFields.map((field) => {
                   const isChecked = groupByFields.some((f) => f.field === field.name);
@@ -263,7 +263,7 @@ export function AggregateProperties({ nodeId, data }: AggregatePropertiesProps)
                       >
                         <span className="font-medium">{field.label || field.name}</span>
                         {field.label && field.label !== field.name && (
-                          <span className="ml-1 text-gray-400">({field.name})</span>
+                          <span className="ml-1 text-muted-foreground/70">({field.name})</span>
                         )}
                       </label>
                     </div>
@@ -299,10 +299,10 @@ export function AggregateProperties({ nodeId, data }: AggregatePropertiesProps)
               연산 추가
             </Button>
           </div>
-          <p className="mb-2 text-xs text-gray-500">SUM, COUNT, AVG 등 집계 연산을 설정합니다.</p>
+          <p className="mb-2 text-xs text-muted-foreground">SUM, COUNT, AVG 등 집계 연산을 설정합니다.</p>
 
           {aggregations.length === 0 ? (
-            <div className="rounded border border-dashed bg-gray-50 p-4 text-center text-xs text-gray-500">
+            <div className="rounded border border-dashed bg-muted p-4 text-center text-xs text-muted-foreground">
               집계 연산을 추가하세요
             </div>
           ) : (
@@ -315,7 +315,7 @@ export function AggregateProperties({ nodeId, data }: AggregatePropertiesProps)
                       size="sm"
                       variant="ghost"
                       onClick={() => handleRemoveAggregation(index)}
-                      className="h-6 w-6 p-0 text-red-600 hover:text-red-700"
+                      className="h-6 w-6 p-0 text-destructive hover:text-destructive"
                     >
                       <Trash2 className="h-3 w-3" />
                     </Button>
@@ -324,7 +324,7 @@ export function AggregateProperties({ nodeId, data }: AggregatePropertiesProps)
                   <div className="space-y-2">
                     {/* 집계 함수 선택 */}
                     <div>
-                      <Label className="text-xs text-gray-600">집계 함수</Label>
+                      <Label className="text-xs text-muted-foreground">집계 함수</Label>
                       <Select
                         value={agg.function}
                         onValueChange={(value) =>
@@ -339,7 +339,7 @@ export function AggregateProperties({ nodeId, data }: AggregatePropertiesProps)
                             <SelectItem key={func.value} value={func.value} className="text-xs">
                               <div>
                                 <div className="font-medium">{func.label}</div>
-                                <div className="text-gray-400">{func.description}</div>
+                                <div className="text-muted-foreground/70">{func.description}</div>
                               </div>
                             </SelectItem>
                           ))}
@@ -349,7 +349,7 @@ export function AggregateProperties({ nodeId, data }: AggregatePropertiesProps)
 
                     {/* 소스 필드 선택 */}
                     <div>
-                      <Label className="text-xs text-gray-600">소스 필드</Label>
+                      <Label className="text-xs text-muted-foreground">소스 필드</Label>
                       <Select
                         value={agg.sourceField || ""}
                         onValueChange={(value) => handleAggregationChange(index, "sourceField", value)}
@@ -359,7 +359,7 @@ export function AggregateProperties({ nodeId, data }: AggregatePropertiesProps)
                         </SelectTrigger>
                         <SelectContent>
                           {sourceFields.length === 0 ? (
-                            <div className="p-2 text-center text-xs text-gray-400">
+                            <div className="p-2 text-center text-xs text-muted-foreground/70">
                               연결된 소스 노드가 없습니다
                             </div>
                           ) : (
@@ -382,21 +382,21 @@ export function AggregateProperties({ nodeId, data }: AggregatePropertiesProps)
 
                     {/* 출력 필드명 */}
                     <div>
-                      <Label className="text-xs text-gray-600">출력 필드명</Label>
+                      <Label className="text-xs text-muted-foreground">출력 필드명</Label>
                       <Input
                         value={agg.outputField || ""}
                         onChange={(e) => handleAggregationChange(index, "outputField", e.target.value)}
                         placeholder="예: total_amount"
                         className="mt-1 h-8 text-xs"
                       />
-                      <p className="mt-1 text-xs text-gray-400">
+                      <p className="mt-1 text-xs text-muted-foreground/70">
                         집계 결과가 저장될 필드명입니다
                       </p>
                     </div>
 
                     {/* 출력 필드 라벨 */}
                     <div>
-                      <Label className="text-xs text-gray-600">출력 필드 라벨 (선택)</Label>
+                      <Label className="text-xs text-muted-foreground">출력 필드 라벨 (선택)</Label>
                       <Input
                         value={agg.outputFieldLabel || ""}
                         onChange={(e) => handleAggregationChange(index, "outputFieldLabel", e.target.value)}
@@ -429,16 +429,16 @@ export function AggregateProperties({ nodeId, data }: AggregatePropertiesProps)
               조건 추가
             </Button>
           </div>
-          <p className="mb-2 text-xs text-gray-500">집계 결과에 대한 필터링 조건을 설정합니다 (선택 사항).</p>
+          <p className="mb-2 text-xs text-muted-foreground">집계 결과에 대한 필터링 조건을 설정합니다 (선택 사항).</p>
 
           {havingConditions.length === 0 ? (
-            <div className="rounded border border-dashed bg-gray-50 p-3 text-center text-xs text-gray-400">
+            <div className="rounded border border-dashed bg-muted p-3 text-center text-xs text-muted-foreground/70">
               집계 후 필터링이 필요하면 조건을 추가하세요
             </div>
           ) : (
             <div className="space-y-2">
               {havingConditions.map((condition, index) => (
-                <div key={index} className="flex items-center gap-2 rounded border bg-gray-50 p-2">
+                <div key={index} className="flex items-center gap-2 rounded border bg-muted p-2">
                   {/* 집계 결과 필드 선택 */}
                   <Select
                     value={condition.field || ""}
@@ -486,7 +486,7 @@ export function AggregateProperties({ nodeId, data }: AggregatePropertiesProps)
                     size="sm"
                     variant="ghost"
                     onClick={() => handleRemoveHavingCondition(index)}
-                    className="h-6 w-6 p-0 text-red-600 hover:text-red-700"
+                    className="h-6 w-6 p-0 text-destructive hover:text-destructive"
                   >
                     <Trash2 className="h-3 w-3" />
                   </Button>
@@ -498,9 +498,9 @@ export function AggregateProperties({ nodeId, data }: AggregatePropertiesProps)
 
         {/* 미리보기 */}
         {(groupByFields.length > 0 || aggregations.length > 0) && (
-          <div className="rounded border bg-gray-50 p-3">
-            <h4 className="mb-2 text-xs font-semibold text-gray-700">집계 결과 미리보기</h4>
-            <div className="text-xs text-gray-600">
+          <div className="rounded border bg-muted p-3">
+            <h4 className="mb-2 text-xs font-semibold text-foreground">집계 결과 미리보기</h4>
+            <div className="text-xs text-muted-foreground">
               <div className="mb-1">
                 <span className="font-medium">그룹 기준:</span>{" "}
                 {groupByFields.length > 0
diff --git a/frontend/components/dataflow/node-editor/panels/properties/CommentProperties.tsx b/frontend/components/dataflow/node-editor/panels/properties/CommentProperties.tsx
index 0636210a..c4910fd4 100644
--- a/frontend/components/dataflow/node-editor/panels/properties/CommentProperties.tsx
+++ b/frontend/components/dataflow/node-editor/panels/properties/CommentProperties.tsx
@@ -30,9 +30,9 @@ export function CommentProperties({ nodeId, data }: CommentPropertiesProps) {
 
   return (
     <div className="space-y-4 p-4 pb-8">
-      <div className="flex items-center gap-2 rounded-md bg-yellow-50 p-2">
-        <MessageSquare className="h-4 w-4 text-yellow-600" />
-        <span className="font-semibold text-yellow-600">주석</span>
+      <div className="flex items-center gap-2 rounded-md bg-amber-50 p-2">
+        <MessageSquare className="h-4 w-4 text-amber-600" />
+        <span className="font-semibold text-amber-600">주석</span>
       </div>
 
       <div>
@@ -47,7 +47,7 @@ export function CommentProperties({ nodeId, data }: CommentPropertiesProps) {
           className="mt-1 text-sm"
           rows={8}
         />
-        <p className="mt-1 text-xs text-gray-500">이 노드는 플로우 실행에 영향을 주지 않습니다.</p>
+        <p className="mt-1 text-xs text-muted-foreground">이 노드는 플로우 실행에 영향을 주지 않습니다.</p>
       </div>
 
       <Button onClick={handleApply} className="w-full">
diff --git a/frontend/components/dataflow/node-editor/panels/properties/ConditionProperties.tsx b/frontend/components/dataflow/node-editor/panels/properties/ConditionProperties.tsx
index 76354925..16799cb7 100644
--- a/frontend/components/dataflow/node-editor/panels/properties/ConditionProperties.tsx
+++ b/frontend/components/dataflow/node-editor/panels/properties/ConditionProperties.tsx
@@ -92,7 +92,7 @@ function TableCombobox({
           {selectedTable ? (
             <span className="truncate">
               {selectedTable.tableLabel}
-              <span className="ml-1 text-gray-400">({selectedTable.tableName})</span>
+              <span className="ml-1 text-muted-foreground/70">({selectedTable.tableName})</span>
             </span>
           ) : (
             <span className="text-muted-foreground">테이블 선택</span>
@@ -119,7 +119,7 @@ function TableCombobox({
                   <Check className={cn("mr-2 h-3 w-3", value === table.tableName ? "opacity-100" : "opacity-0")} />
                   <div className="flex flex-col">
                     <span className="font-medium">{table.tableLabel}</span>
-                    <span className="text-[10px] text-gray-500">{table.tableName}</span>
+                    <span className="text-[10px] text-muted-foreground">{table.tableName}</span>
                   </div>
                 </CommandItem>
               ))}
@@ -159,7 +159,7 @@ function ColumnCombobox({
           {selectedColumn ? (
             <span className="truncate">
               {selectedColumn.columnLabel}
-              <span className="ml-1 text-gray-400">({selectedColumn.columnName})</span>
+              <span className="ml-1 text-muted-foreground/70">({selectedColumn.columnName})</span>
             </span>
           ) : (
             <span className="text-muted-foreground">컬럼 선택</span>
@@ -185,7 +185,7 @@ function ColumnCombobox({
                 >
                   <Check className={cn("mr-2 h-3 w-3", value === col.columnName ? "opacity-100" : "opacity-0")} />
                   <span className="font-medium">{col.columnLabel}</span>
-                  <span className="ml-1 text-[10px] text-gray-400">({col.columnName})</span>
+                  <span className="ml-1 text-[10px] text-muted-foreground/70">({col.columnName})</span>
                 </CommandItem>
               ))}
             </CommandGroup>
@@ -224,18 +224,18 @@ function ColumnSelectSection({
 
   return (
     <div>
-      <Label className="text-xs text-gray-600">
+      <Label className="text-xs text-muted-foreground">
         <Search className="mr-1 inline h-3 w-3" />
         비교할 컬럼
       </Label>
       {isLoading ? (
-        <div className="mt-1 rounded border border-dashed bg-gray-50 p-2 text-center text-xs text-gray-400">
+        <div className="mt-1 rounded border border-dashed bg-muted p-2 text-center text-xs text-muted-foreground/70">
           컬럼 목록 로딩 중...
         </div>
       ) : columns && columns.length > 0 ? (
         <ColumnCombobox columns={columns} value={lookupField} onSelect={onSelect} placeholder="컬럼 검색..." />
       ) : (
-        <div className="mt-1 rounded border border-dashed bg-gray-50 p-2 text-center text-xs text-gray-400">
+        <div className="mt-1 rounded border border-dashed bg-muted p-2 text-center text-xs text-muted-foreground/70">
           컬럼 목록을 로드할 수 없습니다
         </div>
       )}
@@ -669,7 +669,7 @@ export function ConditionProperties({ nodeId, data }: ConditionPropertiesProps)
 
           {!targetLookup ? (
             <div className="space-y-2">
-              <div className="rounded border border-dashed p-3 text-center text-xs text-gray-400">
+              <div className="rounded border border-dashed p-3 text-center text-xs text-muted-foreground/70">
                 DB의 기존값과 비교하려면 타겟 테이블을 설정하세요.
               </div>
               <Button
@@ -686,14 +686,14 @@ export function ConditionProperties({ nodeId, data }: ConditionPropertiesProps)
               </Button>
             </div>
           ) : (
-            <div className="space-y-2 rounded border bg-orange-50 p-3">
+            <div className="space-y-2 rounded border bg-amber-50 p-3">
               <div className="flex items-center justify-between">
                 <span className="text-xs font-medium text-orange-700">타겟 테이블</span>
                 <Button
                   size="sm"
                   variant="ghost"
                   onClick={handleRemoveTargetLookup}
-                  className="h-5 px-1 text-xs text-orange-500 hover:text-orange-700"
+                  className="h-5 px-1 text-xs text-amber-500 hover:text-orange-700"
                 >
                   제거
                 </Button>
@@ -708,7 +708,7 @@ export function ConditionProperties({ nodeId, data }: ConditionPropertiesProps)
                   placeholder="비교할 테이블 검색..."
                 />
               ) : (
-                <div className="rounded border border-dashed bg-gray-50 p-2 text-center text-xs text-gray-400">
+                <div className="rounded border border-dashed bg-muted p-2 text-center text-xs text-muted-foreground/70">
                   테이블 로딩 중...
                 </div>
               )}
@@ -716,7 +716,7 @@ export function ConditionProperties({ nodeId, data }: ConditionPropertiesProps)
               {/* 키 필드 매핑 */}
               {targetLookup.tableName && (
                 <div className="space-y-1.5">
-                  <Label className="text-xs text-orange-600">조회 키 (소스 → 타겟)</Label>
+                  <Label className="text-xs text-amber-600">조회 키 (소스 → 타겟)</Label>
                   <div className="flex items-center gap-1.5">
                     <Select
                       value={targetLookup.lookupKeys?.[0]?.sourceField || ""}
@@ -736,7 +736,7 @@ export function ConditionProperties({ nodeId, data }: ConditionPropertiesProps)
                         ))}
                       </SelectContent>
                     </Select>
-                    <span className="text-xs text-gray-400">=</span>
+                    <span className="text-xs text-muted-foreground/70">=</span>
                     {targetLookupColumns.length > 0 ? (
                       <Select
                         value={targetLookup.lookupKeys?.[0]?.targetField || ""}
@@ -757,12 +757,12 @@ export function ConditionProperties({ nodeId, data }: ConditionPropertiesProps)
                         </SelectContent>
                       </Select>
                     ) : (
-                      <div className="flex-1 rounded border border-dashed bg-gray-50 p-1 text-center text-[10px] text-gray-400">
+                      <div className="flex-1 rounded border border-dashed bg-muted p-1 text-center text-[10px] text-muted-foreground/70">
                         컬럼 로딩 중...
                       </div>
                     )}
                   </div>
-                  <div className="rounded bg-orange-100 p-1.5 text-[10px] text-orange-600">
+                  <div className="rounded bg-amber-100 p-1.5 text-[10px] text-amber-600">
                     비교 값 타입에서 "타겟 필드 (DB 기존값)"을 선택하면 이 테이블의 기존값과 비교합니다.
                   </div>
                 </div>
@@ -784,7 +784,7 @@ export function ConditionProperties({ nodeId, data }: ConditionPropertiesProps)
           {conditions.length > 0 ? (
             <div className="space-y-2">
               {conditions.map((condition, index) => (
-                <div key={index} className="rounded border bg-yellow-50 p-3">
+                <div key={index} className="rounded border bg-amber-50 p-3">
                   <div className="mb-2 flex items-center justify-between">
                     <div className="flex items-center gap-2">
                       <span className="text-xs font-medium text-yellow-700">조건 #{index + 1}</span>
@@ -806,7 +806,7 @@ export function ConditionProperties({ nodeId, data }: ConditionPropertiesProps)
 
                   <div className="space-y-2">
                     <div>
-                      <Label className="text-xs text-gray-600">필드명</Label>
+                      <Label className="text-xs text-muted-foreground">필드명</Label>
                       {availableFields.length > 0 ? (
                         <Select
                           value={condition.field}
@@ -819,20 +819,20 @@ export function ConditionProperties({ nodeId, data }: ConditionPropertiesProps)
                             {availableFields.map((field) => (
                               <SelectItem key={field.name} value={field.name}>
                                 {field.label || field.name}
-                                {field.type && <span className="ml-2 text-xs text-gray-400">({field.type})</span>}
+                                {field.type && <span className="ml-2 text-xs text-muted-foreground/70">({field.type})</span>}
                               </SelectItem>
                             ))}
                           </SelectContent>
                         </Select>
                       ) : (
-                        <div className="mt-1 rounded border border-dashed bg-gray-50 p-2 text-center text-xs text-gray-400">
+                        <div className="mt-1 rounded border border-dashed bg-muted p-2 text-center text-xs text-muted-foreground/70">
                           소스 노드를 연결하세요
                         </div>
                       )}
                     </div>
 
                     <div>
-                      <Label className="text-xs text-gray-600">연산자</Label>
+                      <Label className="text-xs text-muted-foreground">연산자</Label>
                       <Select
                         value={condition.operator}
                         onValueChange={(value) => handleConditionChange(index, "operator", value)}
@@ -854,12 +854,12 @@ export function ConditionProperties({ nodeId, data }: ConditionPropertiesProps)
                     {isExistsOperator(condition.operator) && (
                       <>
                         <div>
-                          <Label className="text-xs text-gray-600">
+                          <Label className="text-xs text-muted-foreground">
                             <Database className="mr-1 inline h-3 w-3" />
                             조회할 테이블
                           </Label>
                           {loadingTables ? (
-                            <div className="mt-1 rounded border border-dashed bg-gray-50 p-2 text-center text-xs text-gray-400">
+                            <div className="mt-1 rounded border border-dashed bg-muted p-2 text-center text-xs text-muted-foreground/70">
                               테이블 목록 로딩 중...
                             </div>
                           ) : allTables.length > 0 ? (
@@ -870,7 +870,7 @@ export function ConditionProperties({ nodeId, data }: ConditionPropertiesProps)
                               placeholder="테이블 검색..."
                             />
                           ) : (
-                            <div className="mt-1 rounded border border-dashed bg-gray-50 p-2 text-center text-xs text-gray-400">
+                            <div className="mt-1 rounded border border-dashed bg-muted p-2 text-center text-xs text-muted-foreground/70">
                               테이블 목록을 로드할 수 없습니다
                             </div>
                           )}
@@ -901,7 +901,7 @@ export function ConditionProperties({ nodeId, data }: ConditionPropertiesProps)
                       !isExistsOperator(condition.operator) && (
                         <>
                           <div>
-                            <Label className="text-xs text-gray-600">비교 값 타입</Label>
+                            <Label className="text-xs text-muted-foreground">비교 값 타입</Label>
                             <Select
                               value={(condition as any).valueType || "static"}
                               onValueChange={(value) => handleConditionChange(index, "valueType", value)}
@@ -920,7 +920,7 @@ export function ConditionProperties({ nodeId, data }: ConditionPropertiesProps)
                           </div>
 
                           <div>
-                            <Label className="text-xs text-gray-600">
+                            <Label className="text-xs text-muted-foreground">
                               {(condition as any).valueType === "target"
                                 ? "타겟 필드 (DB 기존값)"
                                 : (condition as any).valueType === "field"
@@ -941,13 +941,13 @@ export function ConditionProperties({ nodeId, data }: ConditionPropertiesProps)
                                     {targetLookupColumns.map((col) => (
                                       <SelectItem key={col.columnName} value={col.columnName}>
                                         {col.columnLabel || col.columnName}
-                                        <span className="ml-2 text-xs text-gray-400">({col.dataType})</span>
+                                        <span className="ml-2 text-xs text-muted-foreground/70">({col.dataType})</span>
                                       </SelectItem>
                                     ))}
                                   </SelectContent>
                                 </Select>
                               ) : (
-                                <div className="mt-1 rounded border border-dashed bg-gray-50 p-2 text-center text-xs text-gray-400">
+                                <div className="mt-1 rounded border border-dashed bg-muted p-2 text-center text-xs text-muted-foreground/70">
                                   타겟 조회를 먼저 설정하세요
                                 </div>
                               )
@@ -966,14 +966,14 @@ export function ConditionProperties({ nodeId, data }: ConditionPropertiesProps)
                                       <SelectItem key={field.name} value={field.name}>
                                         {field.label || field.name}
                                         {field.type && (
-                                          <span className="ml-2 text-xs text-gray-400">({field.type})</span>
+                                          <span className="ml-2 text-xs text-muted-foreground/70">({field.type})</span>
                                         )}
                                       </SelectItem>
                                     ))}
                                   </SelectContent>
                                 </Select>
                               ) : (
-                                <div className="mt-1 rounded border border-dashed bg-gray-50 p-2 text-center text-xs text-gray-400">
+                                <div className="mt-1 rounded border border-dashed bg-muted p-2 text-center text-xs text-muted-foreground/70">
                                   소스 노드를 연결하세요
                                 </div>
                               )
@@ -994,7 +994,7 @@ export function ConditionProperties({ nodeId, data }: ConditionPropertiesProps)
               ))}
             </div>
           ) : (
-            <div className="rounded border border-dashed p-4 text-center text-xs text-gray-400">
+            <div className="rounded border border-dashed p-4 text-center text-xs text-muted-foreground/70">
               조건식이 없습니다. "추가" 버튼을 클릭하세요.
             </div>
           )}
@@ -1003,10 +1003,10 @@ export function ConditionProperties({ nodeId, data }: ConditionPropertiesProps)
 
         {/* 안내 */}
         <div className="space-y-2">
-          <div className="rounded bg-blue-50 p-3 text-xs text-blue-700">
+          <div className="rounded bg-primary/10 p-3 text-xs text-primary">
             <strong>소스 노드 연결</strong>: 테이블/외부DB 노드를 연결하면 자동으로 필드 목록이 표시됩니다.
           </div>
-          <div className="rounded bg-green-50 p-3 text-xs text-green-700">
+          <div className="rounded bg-emerald-50 p-3 text-xs text-emerald-700">
             <strong>비교 값 타입</strong>:<br />
             - <strong>고정값</strong>: 직접 입력한 값과 비교 (예: age &gt; 30)
             <br />- <strong>필드 참조</strong>: 다른 필드의 값과 비교 (예: 주문수량 &gt; 재고수량)
@@ -1018,13 +1018,13 @@ export function ConditionProperties({ nodeId, data }: ConditionPropertiesProps)
             <br />
             (예: 품명이 품목정보 테이블에 없으면 자동 등록)
           </div>
-          <div className="rounded bg-yellow-50 p-3 text-xs text-yellow-700">
+          <div className="rounded bg-amber-50 p-3 text-xs text-yellow-700">
             <strong>AND</strong>: 모든 조건이 참이어야 TRUE 출력
           </div>
-          <div className="rounded bg-yellow-50 p-3 text-xs text-yellow-700">
+          <div className="rounded bg-amber-50 p-3 text-xs text-yellow-700">
             <strong>OR</strong>: 하나라도 참이면 TRUE 출력
           </div>
-          <div className="rounded bg-yellow-50 p-3 text-xs text-yellow-700">
+          <div className="rounded bg-amber-50 p-3 text-xs text-yellow-700">
             TRUE 출력은 오른쪽 위, FALSE 출력은 오른쪽 아래입니다.
           </div>
         </div>
diff --git a/frontend/components/dataflow/node-editor/panels/properties/DataTransformProperties.tsx b/frontend/components/dataflow/node-editor/panels/properties/DataTransformProperties.tsx
index dbe81803..d641a5f3 100644
--- a/frontend/components/dataflow/node-editor/panels/properties/DataTransformProperties.tsx
+++ b/frontend/components/dataflow/node-editor/panels/properties/DataTransformProperties.tsx
@@ -135,7 +135,7 @@ export function DataTransformProperties({ nodeId, data }: DataTransformPropertie
         {/* 소스 필드 */}
         {transform.type !== "CONCAT" && (
           <div>
-            <Label className="text-xs text-gray-600">소스 필드</Label>
+            <Label className="text-xs text-muted-foreground">소스 필드</Label>
             <Select
               value={transform.sourceField || ""}
               onValueChange={(value) => handleTransformationChange(index, "sourceField", value)}
@@ -145,7 +145,7 @@ export function DataTransformProperties({ nodeId, data }: DataTransformPropertie
               </SelectTrigger>
               <SelectContent>
                 {sourceFields.length === 0 ? (
-                  <div className="p-2 text-center text-xs text-gray-400">연결된 소스 노드가 없습니다</div>
+                  <div className="p-2 text-center text-xs text-muted-foreground/70">연결된 소스 노드가 없습니다</div>
                 ) : (
                   sourceFields.map((field) => (
                     <SelectItem key={field.name} value={field.name} className="text-xs">
@@ -165,22 +165,22 @@ export function DataTransformProperties({ nodeId, data }: DataTransformPropertie
 
         {/* 타겟 필드 */}
         <div>
-          <Label className="text-xs text-gray-600">타겟 필드명 (선택)</Label>
+          <Label className="text-xs text-muted-foreground">타겟 필드명 (선택)</Label>
           <Input
             value={transform.targetField || ""}
             onChange={(e) => handleTransformationChange(index, "targetField", e.target.value)}
             placeholder="비어있으면 소스 필드에 적용"
             className="mt-1 h-8 text-xs"
           />
-          <p className="mt-1 text-xs text-gray-400">
+          <p className="mt-1 text-xs text-muted-foreground/70">
             {transform.targetField ? (
               transform.targetField === transform.sourceField ? (
-                <span className="text-indigo-600">✓ 소스 필드를 덮어씁니다</span>
+                <span className="text-primary">✓ 소스 필드를 덮어씁니다</span>
               ) : (
-                <span className="text-green-600">✓ 새 필드를 생성합니다</span>
+                <span className="text-emerald-600">✓ 새 필드를 생성합니다</span>
               )
             ) : (
-              <span className="text-indigo-600">비어있음: 소스 필드를 덮어씁니다</span>
+              <span className="text-primary">비어있음: 소스 필드를 덮어씁니다</span>
             )}
           </p>
         </div>
@@ -194,14 +194,14 @@ export function DataTransformProperties({ nodeId, data }: DataTransformPropertie
           <>
             {commonFields}
             <div>
-              <Label className="text-xs text-gray-600">구분자</Label>
+              <Label className="text-xs text-muted-foreground">구분자</Label>
               <Input
                 value={transform.delimiter || ","}
                 onChange={(e) => handleTransformationChange(index, "delimiter", e.target.value)}
                 placeholder="예: , 또는 ; 또는 |"
                 className="mt-1 h-8 text-xs"
               />
-              <p className="mt-1 text-xs text-gray-400">이 문자로 분리하여 여러 행으로 확장합니다</p>
+              <p className="mt-1 text-xs text-muted-foreground/70">이 문자로 분리하여 여러 행으로 확장합니다</p>
             </div>
           </>
         );
@@ -211,7 +211,7 @@ export function DataTransformProperties({ nodeId, data }: DataTransformPropertie
           <>
             {/* CONCAT은 다중 소스 필드를 지원 - 간소화 버전 */}
             <div>
-              <Label className="text-xs text-gray-600">첫 번째 필드</Label>
+              <Label className="text-xs text-muted-foreground">첫 번째 필드</Label>
               <Select
                 value={transform.sourceField || ""}
                 onValueChange={(value) => handleTransformationChange(index, "sourceField", value)}
@@ -229,7 +229,7 @@ export function DataTransformProperties({ nodeId, data }: DataTransformPropertie
               </Select>
             </div>
             <div>
-              <Label className="text-xs text-gray-600">구분자</Label>
+              <Label className="text-xs text-muted-foreground">구분자</Label>
               <Input
                 value={transform.separator || " "}
                 onChange={(e) => handleTransformationChange(index, "separator", e.target.value)}
@@ -246,7 +246,7 @@ export function DataTransformProperties({ nodeId, data }: DataTransformPropertie
           <>
             {commonFields}
             <div>
-              <Label className="text-xs text-gray-600">구분자</Label>
+              <Label className="text-xs text-muted-foreground">구분자</Label>
               <Input
                 value={transform.delimiter || ","}
                 onChange={(e) => handleTransformationChange(index, "delimiter", e.target.value)}
@@ -255,7 +255,7 @@ export function DataTransformProperties({ nodeId, data }: DataTransformPropertie
               />
             </div>
             <div>
-              <Label className="text-xs text-gray-600">인덱스 (0부터 시작)</Label>
+              <Label className="text-xs text-muted-foreground">인덱스 (0부터 시작)</Label>
               <Input
                 type="number"
                 value={transform.splitIndex !== undefined ? transform.splitIndex : 0}
@@ -263,7 +263,7 @@ export function DataTransformProperties({ nodeId, data }: DataTransformPropertie
                 placeholder="0"
                 className="mt-1 h-8 text-xs"
               />
-              <p className="mt-1 text-xs text-gray-400">분리된 값 중 몇 번째를 가져올지 지정 (0=첫번째)</p>
+              <p className="mt-1 text-xs text-muted-foreground/70">분리된 값 중 몇 번째를 가져올지 지정 (0=첫번째)</p>
             </div>
           </>
         );
@@ -273,7 +273,7 @@ export function DataTransformProperties({ nodeId, data }: DataTransformPropertie
           <>
             {commonFields}
             <div>
-              <Label className="text-xs text-gray-600">찾을 문자열</Label>
+              <Label className="text-xs text-muted-foreground">찾을 문자열</Label>
               <Input
                 value={transform.searchValue || ""}
                 onChange={(e) => handleTransformationChange(index, "searchValue", e.target.value)}
@@ -282,7 +282,7 @@ export function DataTransformProperties({ nodeId, data }: DataTransformPropertie
               />
             </div>
             <div>
-              <Label className="text-xs text-gray-600">바꿀 문자열</Label>
+              <Label className="text-xs text-muted-foreground">바꿀 문자열</Label>
               <Input
                 value={transform.replaceValue || ""}
                 onChange={(e) => handleTransformationChange(index, "replaceValue", e.target.value)}
@@ -298,7 +298,7 @@ export function DataTransformProperties({ nodeId, data }: DataTransformPropertie
           <>
             {commonFields}
             <div>
-              <Label className="text-xs text-gray-600">변환할 타입</Label>
+              <Label className="text-xs text-muted-foreground">변환할 타입</Label>
               <Select
                 value={transform.castType || "string"}
                 onValueChange={(value) => handleTransformationChange(index, "castType", value)}
@@ -333,14 +333,14 @@ export function DataTransformProperties({ nodeId, data }: DataTransformPropertie
           <>
             {commonFields}
             <div>
-              <Label className="text-xs text-gray-600">표현식</Label>
+              <Label className="text-xs text-muted-foreground">표현식</Label>
               <Input
                 value={transform.expression || ""}
                 onChange={(e) => handleTransformationChange(index, "expression", e.target.value)}
                 placeholder="예: field1 + field2"
                 className="mt-1 h-8 text-xs"
               />
-              <p className="mt-1 text-xs text-gray-400">
+              <p className="mt-1 text-xs text-muted-foreground/70">
                 {transform.type === "CALCULATE" && "계산 수식을 입력하세요 (예: field1 + field2)"}
                 {transform.type === "FORMAT" && "형식 문자열을 입력하세요 (예: {0}-{1})"}
                 {transform.type === "JSON_EXTRACT" && "JSON 경로를 입력하세요 (예: $.data.name)"}
@@ -361,8 +361,8 @@ export function DataTransformProperties({ nodeId, data }: DataTransformPropertie
       <div className="space-y-4 p-4 pb-8">
         {/* 헤더 */}
         <div className="flex items-center gap-2 rounded-md bg-indigo-50 p-2">
-          <Wand2 className="h-4 w-4 text-indigo-600" />
-          <span className="font-semibold text-indigo-600">데이터 변환</span>
+          <Wand2 className="h-4 w-4 text-primary" />
+          <span className="font-semibold text-primary">데이터 변환</span>
         </div>
 
         {/* 기본 정보 */}
@@ -387,7 +387,7 @@ export function DataTransformProperties({ nodeId, data }: DataTransformPropertie
           <div className="mb-2 flex items-center justify-between">
             <div>
               <h3 className="text-sm font-semibold">변환 규칙</h3>
-              <p className="text-xs text-gray-500">데이터를 변환할 규칙을 추가하세요</p>
+              <p className="text-xs text-muted-foreground">데이터를 변환할 규칙을 추가하세요</p>
             </div>
             <Button size="sm" variant="outline" onClick={handleAddTransformation} className="h-7 px-2 text-xs">
               <Plus className="mr-1 h-3 w-3" />
@@ -396,7 +396,7 @@ export function DataTransformProperties({ nodeId, data }: DataTransformPropertie
           </div>
 
           {transformations.length === 0 ? (
-            <div className="rounded border border-dashed bg-gray-50 p-4 text-center text-xs text-gray-500">
+            <div className="rounded border border-dashed bg-muted p-4 text-center text-xs text-muted-foreground">
               변환 규칙을 추가하세요
             </div>
           ) : (
@@ -409,7 +409,7 @@ export function DataTransformProperties({ nodeId, data }: DataTransformPropertie
                       size="sm"
                       variant="ghost"
                       onClick={() => handleRemoveTransformation(index)}
-                      className="h-6 w-6 p-0 text-red-600 hover:text-red-700"
+                      className="h-6 w-6 p-0 text-destructive hover:text-destructive"
                     >
                       <Trash2 className="h-3 w-3" />
                     </Button>
@@ -418,7 +418,7 @@ export function DataTransformProperties({ nodeId, data }: DataTransformPropertie
                   <div className="space-y-2">
                     {/* 변환 타입 선택 */}
                     <div>
-                      <Label className="text-xs text-gray-600">변환 타입</Label>
+                      <Label className="text-xs text-muted-foreground">변환 타입</Label>
                       <Select
                         value={transform.type}
                         onValueChange={(value) => handleTransformationChange(index, "type", value)}
@@ -427,13 +427,13 @@ export function DataTransformProperties({ nodeId, data }: DataTransformPropertie
                           <SelectValue />
                         </SelectTrigger>
                         <SelectContent>
-                          <div className="px-2 py-1 text-xs font-semibold text-gray-500">기본 변환</div>
+                          <div className="px-2 py-1 text-xs font-semibold text-muted-foreground">기본 변환</div>
                           {TRANSFORM_TYPES.filter((t) => t.category === "기본").map((type) => (
                             <SelectItem key={type.value} value={type.value} className="text-xs">
                               {type.label}
                             </SelectItem>
                           ))}
-                          <div className="px-2 py-1 text-xs font-semibold text-gray-500">고급 변환</div>
+                          <div className="px-2 py-1 text-xs font-semibold text-muted-foreground">고급 변환</div>
                           {TRANSFORM_TYPES.filter((t) => t.category === "고급").map((type) => (
                             <SelectItem key={type.value} value={type.value} className="text-xs">
                               {type.label}
diff --git a/frontend/components/dataflow/node-editor/panels/properties/DeleteActionProperties.tsx b/frontend/components/dataflow/node-editor/panels/properties/DeleteActionProperties.tsx
index b30bc1f4..4a46bf31 100644
--- a/frontend/components/dataflow/node-editor/panels/properties/DeleteActionProperties.tsx
+++ b/frontend/components/dataflow/node-editor/panels/properties/DeleteActionProperties.tsx
@@ -396,12 +396,12 @@ export function DeleteActionProperties({ nodeId, data }: DeleteActionPropertiesP
     <div>
       <div className="space-y-4 p-4 pb-8">
         {/* 경고 */}
-        <div className="rounded-lg border-2 border-red-200 bg-red-50 p-4">
+        <div className="rounded-lg border-2 border-destructive/20 bg-destructive/10 p-4">
           <div className="flex items-start gap-3">
-            <AlertTriangle className="h-5 w-5 flex-shrink-0 text-red-600" />
+            <AlertTriangle className="h-5 w-5 flex-shrink-0 text-destructive" />
             <div className="text-sm">
               <p className="font-semibold text-red-800">위험한 작업입니다!</p>
-              <p className="mt-1 text-xs text-red-700">
+              <p className="mt-1 text-xs text-destructive">
                 DELETE 작업은 되돌릴 수 없습니다. WHERE 조건을 반드시 설정하세요.
               </p>
             </div>
@@ -434,16 +434,16 @@ export function DeleteActionProperties({ nodeId, data }: DeleteActionPropertiesP
                   onClick={() => handleTargetTypeChange("internal")}
                   className={cn(
                     "relative flex flex-col items-center gap-2 rounded-lg border-2 p-3 transition-all",
-                    targetType === "internal" ? "border-blue-500 bg-blue-50" : "border-gray-200 hover:border-gray-300",
+                    targetType === "internal" ? "border-primary bg-primary/10" : "border-border hover:border-input",
                   )}
                 >
-                  <Database className={cn("h-5 w-5", targetType === "internal" ? "text-blue-600" : "text-gray-400")} />
+                  <Database className={cn("h-5 w-5", targetType === "internal" ? "text-primary" : "text-muted-foreground/70")} />
                   <span
-                    className={cn("text-xs font-medium", targetType === "internal" ? "text-blue-700" : "text-gray-600")}
+                    className={cn("text-xs font-medium", targetType === "internal" ? "text-primary" : "text-muted-foreground")}
                   >
                     내부 DB
                   </span>
-                  {targetType === "internal" && <Check className="absolute top-2 right-2 h-4 w-4 text-blue-600" />}
+                  {targetType === "internal" && <Check className="absolute top-2 right-2 h-4 w-4 text-primary" />}
                 </button>
 
                 <button
@@ -452,20 +452,20 @@ export function DeleteActionProperties({ nodeId, data }: DeleteActionPropertiesP
                   className={cn(
                     "relative flex flex-col items-center gap-2 rounded-lg border-2 p-3 transition-all",
                     targetType === "external"
-                      ? "border-green-500 bg-green-50"
-                      : "border-gray-200 hover:border-gray-300",
+                      ? "border-emerald-500 bg-emerald-50"
+                      : "border-border hover:border-input",
                   )}
                 >
-                  <Globe className={cn("h-5 w-5", targetType === "external" ? "text-green-600" : "text-gray-400")} />
+                  <Globe className={cn("h-5 w-5", targetType === "external" ? "text-emerald-600" : "text-muted-foreground/70")} />
                   <span
                     className={cn(
                       "text-xs font-medium",
-                      targetType === "external" ? "text-green-700" : "text-gray-600",
+                      targetType === "external" ? "text-emerald-700" : "text-muted-foreground",
                     )}
                   >
                     외부 DB
                   </span>
-                  {targetType === "external" && <Check className="absolute top-2 right-2 h-4 w-4 text-green-600" />}
+                  {targetType === "external" && <Check className="absolute top-2 right-2 h-4 w-4 text-emerald-600" />}
                 </button>
 
                 <button
@@ -473,12 +473,12 @@ export function DeleteActionProperties({ nodeId, data }: DeleteActionPropertiesP
                   onClick={() => handleTargetTypeChange("api")}
                   className={cn(
                     "relative flex flex-col items-center gap-2 rounded-lg border-2 p-3 transition-all",
-                    targetType === "api" ? "border-purple-500 bg-purple-50" : "border-gray-200 hover:border-gray-300",
+                    targetType === "api" ? "border-purple-500 bg-purple-50" : "border-border hover:border-input",
                   )}
                 >
-                  <Link2 className={cn("h-5 w-5", targetType === "api" ? "text-purple-600" : "text-gray-400")} />
+                  <Link2 className={cn("h-5 w-5", targetType === "api" ? "text-purple-600" : "text-muted-foreground/70")} />
                   <span
-                    className={cn("text-xs font-medium", targetType === "api" ? "text-purple-700" : "text-gray-600")}
+                    className={cn("text-xs font-medium", targetType === "api" ? "text-purple-700" : "text-muted-foreground")}
                   >
                     REST API
                   </span>
@@ -567,15 +567,15 @@ export function DeleteActionProperties({ nodeId, data }: DeleteActionPropertiesP
                     </SelectTrigger>
                     <SelectContent>
                       {externalConnectionsLoading ? (
-                        <div className="p-2 text-center text-xs text-gray-500">로딩 중...</div>
+                        <div className="p-2 text-center text-xs text-muted-foreground">로딩 중...</div>
                       ) : externalConnections.length === 0 ? (
-                        <div className="p-2 text-center text-xs text-gray-500">사용 가능한 커넥션이 없습니다</div>
+                        <div className="p-2 text-center text-xs text-muted-foreground">사용 가능한 커넥션이 없습니다</div>
                       ) : (
                         externalConnections.map((conn) => (
                           <SelectItem key={conn.id} value={conn.id!.toString()}>
                             <div className="flex items-center gap-2">
                               <span className="font-medium">{conn.db_type}</span>
-                              <span className="text-gray-500">-</span>
+                              <span className="text-muted-foreground">-</span>
                               <span>{conn.name}</span>
                             </div>
                           </SelectItem>
@@ -604,15 +604,15 @@ export function DeleteActionProperties({ nodeId, data }: DeleteActionPropertiesP
                       </SelectTrigger>
                       <SelectContent>
                         {externalTablesLoading ? (
-                          <div className="p-2 text-center text-xs text-gray-500">로딩 중...</div>
+                          <div className="p-2 text-center text-xs text-muted-foreground">로딩 중...</div>
                         ) : externalTables.length === 0 ? (
-                          <div className="p-2 text-center text-xs text-gray-500">테이블이 없습니다</div>
+                          <div className="p-2 text-center text-xs text-muted-foreground">테이블이 없습니다</div>
                         ) : (
                           externalTables.map((table) => (
                             <SelectItem key={table.table_name} value={table.table_name}>
                               <div className="flex items-center gap-2">
                                 <span className="font-medium">{table.table_name}</span>
-                                {table.schema && <span className="text-xs text-gray-500">({table.schema})</span>}
+                                {table.schema && <span className="text-xs text-muted-foreground">({table.schema})</span>}
                               </div>
                             </SelectItem>
                           ))
@@ -625,11 +625,11 @@ export function DeleteActionProperties({ nodeId, data }: DeleteActionPropertiesP
                 {externalTargetTable && externalColumns.length > 0 && (
                   <div>
                     <Label className="mb-1.5 block text-xs font-medium">컬럼 목록</Label>
-                    <div className="max-h-32 space-y-1 overflow-y-auto rounded border bg-gray-50 p-2">
+                    <div className="max-h-32 space-y-1 overflow-y-auto rounded border bg-muted p-2">
                       {externalColumns.map((col) => (
                         <div key={col.column_name} className="flex items-center justify-between text-xs">
                           <span className="font-medium">{col.column_name}</span>
-                          <span className="text-gray-500">{col.data_type}</span>
+                          <span className="text-muted-foreground">{col.data_type}</span>
                         </div>
                       ))}
                     </div>
@@ -676,7 +676,7 @@ export function DeleteActionProperties({ nodeId, data }: DeleteActionPropertiesP
                 </div>
 
                 {apiAuthType !== "none" && (
-                  <div className="space-y-2 rounded border bg-gray-50 p-3">
+                  <div className="space-y-2 rounded border bg-muted p-3">
                     <Label className="block text-xs font-medium">인증 정보</Label>
 
                     {apiAuthType === "bearer" && (
@@ -747,7 +747,7 @@ export function DeleteActionProperties({ nodeId, data }: DeleteActionPropertiesP
 
                 <div>
                   <Label className="mb-1.5 block text-xs font-medium">커스텀 헤더 (선택사항)</Label>
-                  <div className="space-y-2 rounded border bg-gray-50 p-3">
+                  <div className="space-y-2 rounded border bg-muted p-3">
                     {Object.entries(apiHeaders).map(([key, value], index) => (
                       <div key={index} className="flex gap-2">
                         <Input
@@ -819,14 +819,14 @@ export function DeleteActionProperties({ nodeId, data }: DeleteActionPropertiesP
 
           {/* 컬럼 로딩 상태 */}
           {targetType === "internal" && targetTable && columnsLoading && (
-            <div className="rounded border border-gray-200 bg-gray-50 p-3 text-center text-xs text-gray-500">
+            <div className="rounded border border-border bg-muted p-3 text-center text-xs text-muted-foreground">
               컬럼 정보를 불러오는 중...
             </div>
           )}
 
           {/* 테이블 미선택 안내 */}
           {targetType === "internal" && !targetTable && (
-            <div className="rounded border border-dashed border-gray-300 bg-gray-50 p-3 text-center text-xs text-gray-500">
+            <div className="rounded border border-dashed border-input bg-muted p-3 text-center text-xs text-muted-foreground">
               먼저 타겟 테이블을 선택하세요
             </div>
           )}
@@ -848,9 +848,9 @@ export function DeleteActionProperties({ nodeId, data }: DeleteActionPropertiesP
                       : [];
 
                 return (
-                  <div key={index} className="rounded border-2 border-red-200 bg-red-50 p-2">
+                  <div key={index} className="rounded border-2 border-destructive/20 bg-destructive/10 p-2">
                     <div className="mb-2 flex items-center justify-between">
-                      <span className="text-xs font-medium text-red-700">조건 #{index + 1}</span>
+                      <span className="text-xs font-medium text-destructive">조건 #{index + 1}</span>
                       <Button
                         size="sm"
                         variant="ghost"
@@ -864,7 +864,7 @@ export function DeleteActionProperties({ nodeId, data }: DeleteActionPropertiesP
                     <div className="space-y-2">
                       {/* 필드 - Combobox */}
                       <div>
-                        <Label className="text-xs text-gray-600">필드</Label>
+                        <Label className="text-xs text-muted-foreground">필드</Label>
                         {availableColumns.length > 0 ? (
                           <Popover
                             open={fieldOpenState[index]}
@@ -949,7 +949,7 @@ export function DeleteActionProperties({ nodeId, data }: DeleteActionPropertiesP
                       </div>
 
                       <div>
-                        <Label className="text-xs text-gray-600">연산자</Label>
+                        <Label className="text-xs text-muted-foreground">연산자</Label>
                         <Select
                           value={condition.operator}
                           onValueChange={(value) => handleConditionChange(index, "operator", value)}
@@ -969,7 +969,7 @@ export function DeleteActionProperties({ nodeId, data }: DeleteActionPropertiesP
 
                       {/* 🆕 소스 필드 - Combobox */}
                       <div>
-                        <Label className="text-xs text-gray-600">소스 필드 (선택)</Label>
+                        <Label className="text-xs text-muted-foreground">소스 필드 (선택)</Label>
                         {sourceFields.length > 0 ? (
                           <Popover
                             open={sourceFieldsOpenState[index]}
@@ -1022,7 +1022,7 @@ export function DeleteActionProperties({ nodeId, data }: DeleteActionPropertiesP
                                         newState[index] = false;
                                         setSourceFieldsOpenState(newState);
                                       }}
-                                      className="text-xs text-gray-400 sm:text-sm"
+                                      className="text-xs text-muted-foreground/70 sm:text-sm"
                                     >
                                       <Check
                                         className={cn(
@@ -1066,16 +1066,16 @@ export function DeleteActionProperties({ nodeId, data }: DeleteActionPropertiesP
                             </PopoverContent>
                           </Popover>
                         ) : (
-                          <div className="mt-1 rounded border border-dashed border-gray-300 bg-gray-50 p-2 text-center text-xs text-gray-500">
+                          <div className="mt-1 rounded border border-dashed border-input bg-muted p-2 text-center text-xs text-muted-foreground">
                             연결된 소스 노드가 없습니다
                           </div>
                         )}
-                        <p className="mt-1 text-xs text-gray-400">소스 데이터에서 값을 가져올 필드</p>
+                        <p className="mt-1 text-xs text-muted-foreground/70">소스 데이터에서 값을 가져올 필드</p>
                       </div>
 
                       {/* 정적 값 */}
                       <div>
-                        <Label className="text-xs text-gray-600">정적 값</Label>
+                        <Label className="text-xs text-muted-foreground">정적 값</Label>
                         <Input
                           value={condition.staticValue || condition.value || ""}
                           onChange={(e) => {
@@ -1085,7 +1085,7 @@ export function DeleteActionProperties({ nodeId, data }: DeleteActionPropertiesP
                           placeholder="비교할 고정 값"
                           className="mt-1 h-8 text-xs"
                         />
-                        <p className="mt-1 text-xs text-gray-400">소스 필드가 비어있을 때 사용됩니다</p>
+                        <p className="mt-1 text-xs text-muted-foreground/70">소스 필드가 비어있을 때 사용됩니다</p>
                       </div>
                     </div>
                   </div>
@@ -1093,17 +1093,17 @@ export function DeleteActionProperties({ nodeId, data }: DeleteActionPropertiesP
               })}
             </div>
           ) : (
-            <div className="rounded border-2 border-dashed border-red-300 bg-red-50 p-4 text-center text-xs text-red-600">
+            <div className="rounded border-2 border-dashed border-destructive/30 bg-destructive/10 p-4 text-center text-xs text-destructive">
               ⚠️ WHERE 조건이 없습니다! 모든 데이터가 삭제됩니다!
             </div>
           )}
         </div>
 
         <div className="space-y-2">
-          <div className="rounded bg-red-50 p-3 text-xs text-red-700">
+          <div className="rounded bg-destructive/10 p-3 text-xs text-destructive">
             🚨 WHERE 조건 없이 삭제하면 테이블의 모든 데이터가 영구 삭제됩니다!
           </div>
-          <div className="rounded bg-red-50 p-3 text-xs text-red-700">💡 실행 전 WHERE 조건을 꼭 확인하세요.</div>
+          <div className="rounded bg-destructive/10 p-3 text-xs text-destructive">💡 실행 전 WHERE 조건을 꼭 확인하세요.</div>
         </div>
       </div>
     </div>
diff --git a/frontend/components/dataflow/node-editor/panels/properties/EmailActionProperties.tsx b/frontend/components/dataflow/node-editor/panels/properties/EmailActionProperties.tsx
index 24c5cdc1..2e28bf05 100644
--- a/frontend/components/dataflow/node-editor/panels/properties/EmailActionProperties.tsx
+++ b/frontend/components/dataflow/node-editor/panels/properties/EmailActionProperties.tsx
@@ -282,7 +282,7 @@ export function EmailActionProperties({ nodeId, data }: EmailActionPropertiesPro
             </div>
             
             {accountError && (
-              <div className="flex items-center gap-2 text-xs text-red-500">
+              <div className="flex items-center gap-2 text-xs text-destructive">
                 <AlertCircle className="h-3 w-3" />
                 {accountError}
               </div>
@@ -298,7 +298,7 @@ export function EmailActionProperties({ nodeId, data }: EmailActionPropertiesPro
               </SelectTrigger>
               <SelectContent>
                 {mailAccounts.length === 0 ? (
-                  <div className="p-2 text-xs text-gray-500">
+                  <div className="p-2 text-xs text-muted-foreground">
                     등록된 메일 계정이 없습니다.
                     <br />
                     관리자 &gt; 메일관리 &gt; 계정관리에서 추가하세요.
@@ -308,7 +308,7 @@ export function EmailActionProperties({ nodeId, data }: EmailActionPropertiesPro
                     <SelectItem key={account.id} value={account.id}>
                       <div className="flex items-center gap-2">
                         <span className="font-medium">{account.name}</span>
-                        <span className="text-xs text-gray-500">({account.email})</span>
+                        <span className="text-xs text-muted-foreground">({account.email})</span>
                       </div>
                     </SelectItem>
                   ))
@@ -319,13 +319,13 @@ export function EmailActionProperties({ nodeId, data }: EmailActionPropertiesPro
 
           {/* 선택된 계정 정보 표시 */}
           {selectedAccount && (
-            <Card className="bg-green-50 border-green-200">
+            <Card className="bg-emerald-50 border-emerald-200">
               <CardContent className="p-3 space-y-2">
-                <div className="flex items-center gap-2 text-green-700">
+                <div className="flex items-center gap-2 text-emerald-700">
                   <CheckCircle className="h-4 w-4" />
                   <span className="text-sm font-medium">선택된 계정</span>
                 </div>
-                <div className="text-xs space-y-1 text-green-800">
+                <div className="text-xs space-y-1 text-emerald-800">
                   <div><strong>이름:</strong> {selectedAccount.name}</div>
                   <div><strong>이메일:</strong> {selectedAccount.email}</div>
                   <div><strong>SMTP:</strong> {selectedAccount.smtpHost}:{selectedAccount.smtpPort}</div>
@@ -335,7 +335,7 @@ export function EmailActionProperties({ nodeId, data }: EmailActionPropertiesPro
           )}
 
           {!selectedAccount && mailAccounts.length > 0 && (
-            <Card className="bg-yellow-50 border-yellow-200">
+            <Card className="bg-amber-50 border-amber-200">
               <CardContent className="p-3 text-xs text-yellow-700">
                 <div className="flex items-center gap-2">
                   <AlertCircle className="h-4 w-4" />
@@ -346,8 +346,8 @@ export function EmailActionProperties({ nodeId, data }: EmailActionPropertiesPro
           )}
 
           {mailAccounts.length === 0 && !isLoadingAccounts && (
-            <Card className="bg-gray-50">
-              <CardContent className="p-3 text-xs text-gray-600">
+            <Card className="bg-muted">
+              <CardContent className="p-3 text-xs text-muted-foreground">
                 <div className="space-y-2">
                   <div className="font-medium">메일 계정 등록 방법:</div>
                   <ol className="list-decimal list-inside space-y-1">
@@ -368,20 +368,20 @@ export function EmailActionProperties({ nodeId, data }: EmailActionPropertiesPro
           {selectedAccount && (
             <div className="space-y-2">
               <Label className="text-xs">발신자 (From)</Label>
-              <div className="h-8 px-3 py-2 text-sm bg-gray-100 rounded-md border flex items-center">
+              <div className="h-8 px-3 py-2 text-sm bg-muted rounded-md border flex items-center">
                 {selectedAccount.email}
               </div>
-              <p className="text-xs text-gray-500">선택한 계정의 이메일 주소가 자동으로 사용됩니다.</p>
+              <p className="text-xs text-muted-foreground">선택한 계정의 이메일 주소가 자동으로 사용됩니다.</p>
             </div>
           )}
 
           {/* 🆕 수신자 컴포넌트 사용 옵션 */}
-          <Card className={useRecipientComponent ? "bg-blue-50 border-blue-200" : "bg-gray-50"}>
+          <Card className={useRecipientComponent ? "bg-primary/10 border-primary/20" : "bg-muted"}>
             <CardContent className="p-3 space-y-3">
               <div className="flex items-center justify-between">
                 <div className="space-y-1">
                   <Label className="text-xs font-medium">수신자 컴포넌트 사용</Label>
-                  <p className="text-xs text-gray-500">
+                  <p className="text-xs text-muted-foreground">
                     화면에 배치한 "메일 수신자 선택" 컴포넌트의 값을 자동으로 사용합니다.
                   </p>
                 </div>
@@ -415,7 +415,7 @@ export function EmailActionProperties({ nodeId, data }: EmailActionPropertiesPro
               
               {/* 필드명 설정 (수신자 컴포넌트 사용 시) */}
               {useRecipientComponent && (
-                <div className="space-y-2 pt-2 border-t border-blue-200">
+                <div className="space-y-2 pt-2 border-t border-primary/20">
                   <div className="grid grid-cols-2 gap-2">
                     <div className="space-y-1">
                       <Label className="text-xs">수신자 필드명</Label>
@@ -452,7 +452,7 @@ export function EmailActionProperties({ nodeId, data }: EmailActionPropertiesPro
                       />
                     </div>
                   </div>
-                  <div className="text-xs text-blue-600 bg-blue-100 p-2 rounded">
+                  <div className="text-xs text-primary bg-primary/10 p-2 rounded">
                     <strong>자동 설정됨:</strong>
                     <br />
                     수신자: <code className="bg-white px-1 rounded">{`{{${recipientToField}}}`}</code>
@@ -591,8 +591,8 @@ export function EmailActionProperties({ nodeId, data }: EmailActionPropertiesPro
 
           {/* 변수 안내 (HTML 모드에서만 표시) */}
           {bodyType === "html" && (
-            <Card className="bg-gray-50">
-              <CardContent className="p-3 text-xs text-gray-600">
+            <Card className="bg-muted">
+              <CardContent className="p-3 text-xs text-muted-foreground">
                 <div className="font-medium mb-1">사용 가능한 템플릿 변수:</div>
                 {availableVariables.slice(0, 5).map((v) => (
                   <code key={v.name} className="block">
@@ -600,7 +600,7 @@ export function EmailActionProperties({ nodeId, data }: EmailActionPropertiesPro
                   </code>
                 ))}
                 {availableVariables.length > 5 && (
-                  <span className="text-gray-400">...외 {availableVariables.length - 5}개</span>
+                  <span className="text-muted-foreground/70">...외 {availableVariables.length - 5}개</span>
                 )}
               </CardContent>
             </Card>
@@ -608,11 +608,11 @@ export function EmailActionProperties({ nodeId, data }: EmailActionPropertiesPro
           
           {/* 변수 태그 에디터 안내 (텍스트 모드에서만 표시) */}
           {bodyType === "text" && (
-            <Card className="bg-blue-50 border-blue-200">
-              <CardContent className="p-3 text-xs text-blue-700">
+            <Card className="bg-primary/10 border-primary/20">
+              <CardContent className="p-3 text-xs text-primary">
                 <div className="font-medium mb-1">변수 삽입 방법:</div>
                 <ul className="list-disc list-inside space-y-0.5">
-                  <li><kbd className="bg-blue-100 px-1 rounded">@</kbd> 또는 <kbd className="bg-blue-100 px-1 rounded">/</kbd> 키를 눌러 변수 목록 열기</li>
+                  <li><kbd className="bg-primary/10 px-1 rounded">@</kbd> 또는 <kbd className="bg-primary/10 px-1 rounded">/</kbd> 키를 눌러 변수 목록 열기</li>
                   <li>툴바의 "변수 삽입" 버튼 클릭</li>
                   <li>삽입된 변수는 파란색 태그로 표시됩니다</li>
                 </ul>
diff --git a/frontend/components/dataflow/node-editor/panels/properties/ExternalDBSourceProperties.tsx b/frontend/components/dataflow/node-editor/panels/properties/ExternalDBSourceProperties.tsx
index 9dadabd5..8296fc38 100644
--- a/frontend/components/dataflow/node-editor/panels/properties/ExternalDBSourceProperties.tsx
+++ b/frontend/components/dataflow/node-editor/panels/properties/ExternalDBSourceProperties.tsx
@@ -244,7 +244,7 @@ export function ExternalDBSourceProperties({ nodeId, data }: ExternalDBSourcePro
               <p className="text-sm font-semibold" style={{ color: dbInfo.color }}>
                 {dbInfo.label}
               </p>
-              <p className="text-xs text-gray-600">외부 데이터베이스</p>
+              <p className="text-xs text-muted-foreground">외부 데이터베이스</p>
             </div>
           </div>
         </div>
@@ -269,7 +269,7 @@ export function ExternalDBSourceProperties({ nodeId, data }: ExternalDBSourcePro
             >
               <RefreshCw className={`h-3 w-3 ${loadingConnections ? "animate-spin" : ""}`} />
               {remainingCooldown > 0 && !loadingConnections && (
-                <span className="absolute -top-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-orange-500 text-[9px] text-white">
+                <span className="absolute -top-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-amber-500 text-[9px] text-white">
                   {remainingCooldown}
                 </span>
               )}
@@ -293,15 +293,15 @@ export function ExternalDBSourceProperties({ nodeId, data }: ExternalDBSourcePro
                       <div className="flex items-center gap-2">
                         <span>{DB_TYPE_INFO[conn.db_type]?.icon || "💾"}</span>
                         <span>{conn.connection_name}</span>
-                        <span className="text-xs text-gray-500">({conn.db_type})</span>
+                        <span className="text-xs text-muted-foreground">({conn.db_type})</span>
                       </div>
                     </SelectItem>
                   ))}
                 </SelectContent>
               </Select>
-              {loadingConnections && <p className="mt-1 text-xs text-gray-500">테스트 중... ⏳</p>}
+              {loadingConnections && <p className="mt-1 text-xs text-muted-foreground">테스트 중... ⏳</p>}
               {connections.length === 0 && !loadingConnections && (
-                <p className="mt-1 text-xs text-orange-600">⚠️ 테스트에 성공한 커넥션이 없습니다.</p>
+                <p className="mt-1 text-xs text-amber-600">⚠️ 테스트에 성공한 커넥션이 없습니다.</p>
               )}
             </div>
 
@@ -338,13 +338,13 @@ export function ExternalDBSourceProperties({ nodeId, data }: ExternalDBSourcePro
                         <div className="flex items-center gap-2">
                           <span>📋</span>
                           <span>{table.table_name}</span>
-                          {table.schema && <span className="text-xs text-gray-500">({table.schema})</span>}
+                          {table.schema && <span className="text-xs text-muted-foreground">({table.schema})</span>}
                         </div>
                       </SelectItem>
                     ))}
                   </SelectContent>
                 </Select>
-                {loadingTables && <p className="mt-1 text-xs text-gray-500">테이블 목록 로딩 중... ⏳</p>}
+                {loadingTables && <p className="mt-1 text-xs text-muted-foreground">테이블 목록 로딩 중... ⏳</p>}
               </div>
             </div>
           </div>
@@ -389,7 +389,7 @@ export function ExternalDBSourceProperties({ nodeId, data }: ExternalDBSourcePro
                 </Select>
                 
                 {/* 설명 텍스트 */}
-                <div className="mt-2 rounded bg-blue-50 p-3 text-xs text-blue-700">
+                <div className="mt-2 rounded bg-primary/10 p-3 text-xs text-primary">
                   {dataSourceType === "context-data" ? (
                     <>
                       <p className="font-medium mb-1">💡 컨텍스트 데이터 모드</p>
@@ -399,7 +399,7 @@ export function ExternalDBSourceProperties({ nodeId, data }: ExternalDBSourcePro
                     <>
                       <p className="font-medium mb-1">📊 테이블 전체 데이터 모드</p>
                       <p>외부 DB의 **모든 행**을 직접 조회합니다.</p>
-                      <p className="mt-1 text-orange-600 font-medium">⚠️ 대량 데이터 시 성능 주의</p>
+                      <p className="mt-1 text-amber-600 font-medium">⚠️ 대량 데이터 시 성능 주의</p>
                     </>
                   )}
                 </div>
@@ -413,9 +413,9 @@ export function ExternalDBSourceProperties({ nodeId, data }: ExternalDBSourcePro
           <div>
             <h3 className="mb-3 text-sm font-semibold">출력 필드 ({columns.length}개)</h3>
             {loadingColumns ? (
-              <p className="text-xs text-gray-500">컬럼 목록 로딩 중... ⏳</p>
+              <p className="text-xs text-muted-foreground">컬럼 목록 로딩 중... ⏳</p>
             ) : (
-              <div className="max-h-[300px] space-y-1 overflow-y-auto rounded border bg-gray-50 p-2">
+              <div className="max-h-[300px] space-y-1 overflow-y-auto rounded border bg-muted p-2">
                 {columns.map((col, index) => (
                   <div
                     key={index}
@@ -424,7 +424,7 @@ export function ExternalDBSourceProperties({ nodeId, data }: ExternalDBSourcePro
                     <span className="truncate font-medium" title={col.column_name}>
                       {col.column_name}
                     </span>
-                    <span className="ml-2 shrink-0 font-mono text-gray-500">{col.data_type}</span>
+                    <span className="ml-2 shrink-0 font-mono text-muted-foreground">{col.data_type}</span>
                   </div>
                 ))}
               </div>
diff --git a/frontend/components/dataflow/node-editor/panels/properties/FormulaTransformProperties.tsx b/frontend/components/dataflow/node-editor/panels/properties/FormulaTransformProperties.tsx
index d9a9a20c..7651100c 100644
--- a/frontend/components/dataflow/node-editor/panels/properties/FormulaTransformProperties.tsx
+++ b/frontend/components/dataflow/node-editor/panels/properties/FormulaTransformProperties.tsx
@@ -440,7 +440,7 @@ export function FormulaTransformProperties({ nodeId, data }: FormulaTransformPro
             </SelectTrigger>
             <SelectContent>
               {sourceFields.length === 0 ? (
-                <div className="p-2 text-center text-xs text-gray-400">연결된 소스 없음</div>
+                <div className="p-2 text-center text-xs text-muted-foreground/70">연결된 소스 없음</div>
               ) : (
                 sourceFields.map((f) => (
                   <SelectItem key={f.name} value={f.name}>
@@ -465,7 +465,7 @@ export function FormulaTransformProperties({ nodeId, data }: FormulaTransformPro
             </SelectTrigger>
             <SelectContent>
               {targetColumns.length === 0 ? (
-                <div className="p-2 text-center text-xs text-gray-400">타겟 테이블 선택 필요</div>
+                <div className="p-2 text-center text-xs text-muted-foreground/70">타겟 테이블 선택 필요</div>
               ) : (
                 targetColumns.map((c) => (
                   <SelectItem key={c.columnName} value={c.columnName}>
@@ -514,9 +514,9 @@ export function FormulaTransformProperties({ nodeId, data }: FormulaTransformPro
     <div>
       <div className="space-y-4 p-4 pb-8">
         {/* 헤더 */}
-        <div className="flex items-center gap-2 rounded-md bg-orange-50 p-2">
-          <Calculator className="h-4 w-4 text-orange-600" />
-          <span className="font-semibold text-orange-600">수식 변환 노드</span>
+        <div className="flex items-center gap-2 rounded-md bg-amber-50 p-2">
+          <Calculator className="h-4 w-4 text-amber-600" />
+          <span className="font-semibold text-amber-600">수식 변환 노드</span>
         </div>
 
         {/* 기본 정보 */}
@@ -542,10 +542,10 @@ export function FormulaTransformProperties({ nodeId, data }: FormulaTransformPro
         {/* 타겟 테이블 조회 설정 */}
         <div>
           <div className="mb-2 flex items-center gap-2">
-            <Database className="h-4 w-4 text-blue-600" />
+            <Database className="h-4 w-4 text-primary" />
             <h3 className="text-sm font-semibold">타겟 테이블 조회 (선택)</h3>
           </div>
-          <p className="mb-2 text-xs text-gray-500">
+          <p className="mb-2 text-xs text-muted-foreground">
             UPSERT 시 기존 값을 참조하려면 타겟 테이블을 설정하세요. 수식에서 target.* 로 참조 가능합니다.
           </p>
 
@@ -611,13 +611,13 @@ export function FormulaTransformProperties({ nodeId, data }: FormulaTransformPro
               </div>
 
               {(targetLookup.lookupKeys || []).length === 0 ? (
-                <div className="rounded border border-dashed bg-gray-50 p-3 text-center text-xs text-gray-500">
+                <div className="rounded border border-dashed bg-muted p-3 text-center text-xs text-muted-foreground">
                   조회 키를 추가하세요 (예: item_code, lot_number)
                 </div>
               ) : (
                 <div className="space-y-2">
                   {targetLookup.lookupKeys.map((key, idx) => (
-                    <div key={idx} className="flex items-center gap-2 rounded border bg-gray-50 p-2">
+                    <div key={idx} className="flex items-center gap-2 rounded border bg-muted p-2">
                       <Select
                         value={key.sourceField}
                         onValueChange={(v) => handleLookupKeyChange(idx, "sourceField", v)}
@@ -634,7 +634,7 @@ export function FormulaTransformProperties({ nodeId, data }: FormulaTransformPro
                         </SelectContent>
                       </Select>
 
-                      <ArrowRight className="h-4 w-4 text-gray-400" />
+                      <ArrowRight className="h-4 w-4 text-muted-foreground/70" />
 
                       <Select
                         value={key.targetField}
@@ -656,7 +656,7 @@ export function FormulaTransformProperties({ nodeId, data }: FormulaTransformPro
                         size="sm"
                         variant="ghost"
                         onClick={() => handleRemoveLookupKey(idx)}
-                        className="h-6 w-6 p-0 text-red-600"
+                        className="h-6 w-6 p-0 text-destructive"
                       >
                         <Trash2 className="h-3 w-3" />
                       </Button>
@@ -672,7 +672,7 @@ export function FormulaTransformProperties({ nodeId, data }: FormulaTransformPro
         <div>
           <div className="mb-2 flex items-center justify-between">
             <div className="flex items-center gap-2">
-              <Calculator className="h-4 w-4 text-orange-600" />
+              <Calculator className="h-4 w-4 text-amber-600" />
               <h3 className="text-sm font-semibold">변환 규칙</h3>
             </div>
             <Button size="sm" variant="outline" onClick={handleAddTransformation} className="h-7 px-2 text-xs">
@@ -682,20 +682,20 @@ export function FormulaTransformProperties({ nodeId, data }: FormulaTransformPro
           </div>
 
           {transformations.length === 0 ? (
-            <div className="rounded border border-dashed bg-gray-50 p-4 text-center text-xs text-gray-500">
+            <div className="rounded border border-dashed bg-muted p-4 text-center text-xs text-muted-foreground">
               변환 규칙을 추가하세요
             </div>
           ) : (
             <div className="space-y-3">
               {transformations.map((trans, index) => (
-                <div key={trans.id || index} className="rounded border bg-orange-50 p-3">
+                <div key={trans.id || index} className="rounded border bg-amber-50 p-3">
                   <div className="mb-3 flex items-center justify-between">
                     <span className="text-xs font-medium text-orange-700">변환 #{index + 1}</span>
                     <Button
                       size="sm"
                       variant="ghost"
                       onClick={() => handleRemoveTransformation(index)}
-                      className="h-6 w-6 p-0 text-red-600"
+                      className="h-6 w-6 p-0 text-destructive"
                     >
                       <Trash2 className="h-3 w-3" />
                     </Button>
@@ -704,7 +704,7 @@ export function FormulaTransformProperties({ nodeId, data }: FormulaTransformPro
                   <div className="space-y-3">
                     {/* 출력 필드명 */}
                     <div>
-                      <Label className="text-xs text-gray-600">출력 필드명</Label>
+                      <Label className="text-xs text-muted-foreground">출력 필드명</Label>
                       <Input
                         value={trans.outputField || ""}
                         onChange={(e) => handleTransformationChange(index, { outputField: e.target.value })}
@@ -715,7 +715,7 @@ export function FormulaTransformProperties({ nodeId, data }: FormulaTransformPro
 
                     {/* 출력 필드 라벨 */}
                     <div>
-                      <Label className="text-xs text-gray-600">출력 필드 라벨 (선택)</Label>
+                      <Label className="text-xs text-muted-foreground">출력 필드 라벨 (선택)</Label>
                       <Input
                         value={trans.outputFieldLabel || ""}
                         onChange={(e) => handleTransformationChange(index, { outputFieldLabel: e.target.value })}
@@ -726,7 +726,7 @@ export function FormulaTransformProperties({ nodeId, data }: FormulaTransformPro
 
                     {/* 수식 타입 선택 */}
                     <div>
-                      <Label className="text-xs text-gray-600">수식 타입</Label>
+                      <Label className="text-xs text-muted-foreground">수식 타입</Label>
                       <Select
                         value={trans.formulaType}
                         onValueChange={(value) => handleFormulaTypeChange(index, value as FormulaType)}
@@ -739,7 +739,7 @@ export function FormulaTransformProperties({ nodeId, data }: FormulaTransformPro
                             <SelectItem key={ft.value} value={ft.value}>
                               <div>
                                 <div className="font-medium">{ft.label}</div>
-                                <div className="text-xs text-gray-400">{ft.description}</div>
+                                <div className="text-xs text-muted-foreground/70">{ft.description}</div>
                               </div>
                             </SelectItem>
                           ))}
@@ -750,11 +750,11 @@ export function FormulaTransformProperties({ nodeId, data }: FormulaTransformPro
                     {/* 수식 타입별 설정 */}
                     {trans.formulaType === "arithmetic" && trans.arithmetic && (
                       <div className="space-y-2 rounded border bg-white p-2">
-                        <Label className="text-xs text-gray-600">산술 연산</Label>
+                        <Label className="text-xs text-muted-foreground">산술 연산</Label>
 
                         {/* 좌측 피연산자 */}
-                        <div className="rounded bg-gray-50 p-2">
-                          <div className="mb-1 text-xs text-gray-500">좌측</div>
+                        <div className="rounded bg-muted p-2">
+                          <div className="mb-1 text-xs text-muted-foreground">좌측</div>
                           {renderOperandSelector(
                             trans.arithmetic.leftOperand,
                             (updates) => {
@@ -786,8 +786,8 @@ export function FormulaTransformProperties({ nodeId, data }: FormulaTransformPro
                         </Select>
 
                         {/* 우측 피연산자 */}
-                        <div className="rounded bg-gray-50 p-2">
-                          <div className="mb-1 text-xs text-gray-500">우측</div>
+                        <div className="rounded bg-muted p-2">
+                          <div className="mb-1 text-xs text-muted-foreground">우측</div>
                           {renderOperandSelector(
                             trans.arithmetic.rightOperand,
                             (updates) => {
@@ -801,9 +801,9 @@ export function FormulaTransformProperties({ nodeId, data }: FormulaTransformPro
                         {/* 추가 연산 목록 */}
                         {trans.arithmetic.additionalOperations && trans.arithmetic.additionalOperations.length > 0 && (
                           <div className="space-y-2 border-t pt-2">
-                            <Label className="text-xs text-gray-500">추가 연산</Label>
+                            <Label className="text-xs text-muted-foreground">추가 연산</Label>
                             {trans.arithmetic.additionalOperations.map((addOp: any, addIndex: number) => (
-                              <div key={addIndex} className="flex items-center gap-2 rounded bg-orange-50 p-2">
+                              <div key={addIndex} className="flex items-center gap-2 rounded bg-amber-50 p-2">
                                 <Select
                                   value={addOp.operator}
                                   onValueChange={(value) => {
@@ -841,7 +841,7 @@ export function FormulaTransformProperties({ nodeId, data }: FormulaTransformPro
                                 <Button
                                   variant="ghost"
                                   size="sm"
-                                  className="h-7 w-7 p-0 text-red-500 hover:text-red-700"
+                                  className="h-7 w-7 p-0 text-destructive hover:text-destructive"
                                   onClick={() => {
                                     const newAdditionalOps = trans.arithmetic!.additionalOperations!.filter(
                                       (_: any, i: number) => i !== addIndex
@@ -881,7 +881,7 @@ export function FormulaTransformProperties({ nodeId, data }: FormulaTransformPro
 
                     {trans.formulaType === "function" && trans.function && (
                       <div className="space-y-2 rounded border bg-white p-2">
-                        <Label className="text-xs text-gray-600">함수</Label>
+                        <Label className="text-xs text-muted-foreground">함수</Label>
 
                         <Select
                           value={trans.function.name}
@@ -907,7 +907,7 @@ export function FormulaTransformProperties({ nodeId, data }: FormulaTransformPro
                               <SelectItem key={f.value} value={f.value}>
                                 <div>
                                   <div className="font-mono font-medium">{f.label}</div>
-                                  <div className="text-xs text-gray-400">{f.description}</div>
+                                  <div className="text-xs text-muted-foreground/70">{f.description}</div>
                                 </div>
                               </SelectItem>
                             ))}
@@ -918,8 +918,8 @@ export function FormulaTransformProperties({ nodeId, data }: FormulaTransformPro
                         {trans.function.arguments.length > 0 && (
                           <div className="space-y-2">
                             {trans.function.arguments.map((arg, argIdx) => (
-                              <div key={argIdx} className="rounded bg-gray-50 p-2">
-                                <div className="mb-1 text-xs text-gray-500">인자 {argIdx + 1}</div>
+                              <div key={argIdx} className="rounded bg-muted p-2">
+                                <div className="mb-1 text-xs text-muted-foreground">인자 {argIdx + 1}</div>
                                 {renderOperandSelector(
                                   arg,
                                   (updates) => {
@@ -940,10 +940,10 @@ export function FormulaTransformProperties({ nodeId, data }: FormulaTransformPro
 
                     {trans.formulaType === "condition" && trans.condition && (
                       <div className="space-y-2 rounded border bg-white p-2">
-                        <Label className="text-xs text-gray-600">조건 (CASE WHEN)</Label>
+                        <Label className="text-xs text-muted-foreground">조건 (CASE WHEN)</Label>
 
                         {/* WHEN 절 */}
-                        <div className="rounded bg-yellow-50 p-2">
+                        <div className="rounded bg-amber-50 p-2">
                           <div className="mb-1 text-xs font-medium text-yellow-700">WHEN</div>
                           <div className="space-y-2">
                             {renderOperandSelector(
@@ -997,8 +997,8 @@ export function FormulaTransformProperties({ nodeId, data }: FormulaTransformPro
                         </div>
 
                         {/* THEN 절 */}
-                        <div className="rounded bg-green-50 p-2">
-                          <div className="mb-1 text-xs font-medium text-green-700">THEN</div>
+                        <div className="rounded bg-emerald-50 p-2">
+                          <div className="mb-1 text-xs font-medium text-emerald-700">THEN</div>
                           {renderOperandSelector(
                             trans.condition.then,
                             (updates) => {
@@ -1010,8 +1010,8 @@ export function FormulaTransformProperties({ nodeId, data }: FormulaTransformPro
                         </div>
 
                         {/* ELSE 절 */}
-                        <div className="rounded bg-red-50 p-2">
-                          <div className="mb-1 text-xs font-medium text-red-700">ELSE</div>
+                        <div className="rounded bg-destructive/10 p-2">
+                          <div className="mb-1 text-xs font-medium text-destructive">ELSE</div>
                           {renderOperandSelector(
                             trans.condition.else,
                             (updates) => {
@@ -1026,14 +1026,14 @@ export function FormulaTransformProperties({ nodeId, data }: FormulaTransformPro
 
                     {trans.formulaType === "static" && (
                       <div className="space-y-2 rounded border bg-white p-2">
-                        <Label className="text-xs text-gray-600">정적 값</Label>
+                        <Label className="text-xs text-muted-foreground">정적 값</Label>
                         <Input
                           value={trans.staticValue ?? ""}
                           onChange={(e) => handleTransformationChange(index, { staticValue: e.target.value })}
                           placeholder="고정 값 입력"
                           className="h-8 text-xs"
                         />
-                        <p className="text-xs text-gray-400">문자열, 숫자, true/false 입력 가능</p>
+                        <p className="text-xs text-muted-foreground/70">문자열, 숫자, true/false 입력 가능</p>
                       </div>
                     )}
                   </div>
diff --git a/frontend/components/dataflow/node-editor/panels/properties/HttpRequestActionProperties.tsx b/frontend/components/dataflow/node-editor/panels/properties/HttpRequestActionProperties.tsx
index 82f5b6ac..90d6aed9 100644
--- a/frontend/components/dataflow/node-editor/panels/properties/HttpRequestActionProperties.tsx
+++ b/frontend/components/dataflow/node-editor/panels/properties/HttpRequestActionProperties.tsx
@@ -309,7 +309,7 @@ export function HttpRequestActionProperties({ nodeId, data }: HttpRequestActionP
                   className="h-8 text-sm"
                 />
                 <Button variant="ghost" size="sm" className="h-8 w-8 p-0" onClick={() => removeQueryParam(index)}>
-                  <Trash2 className="h-3 w-3 text-red-500" />
+                  <Trash2 className="h-3 w-3 text-destructive" />
                 </Button>
               </div>
             ))}
@@ -341,7 +341,7 @@ export function HttpRequestActionProperties({ nodeId, data }: HttpRequestActionP
                   className="h-8 text-sm"
                 />
                 <Button variant="ghost" size="sm" className="h-8 w-8 p-0" onClick={() => removeHeader(index)}>
-                  <Trash2 className="h-3 w-3 text-red-500" />
+                  <Trash2 className="h-3 w-3 text-destructive" />
                 </Button>
               </div>
             ))}
@@ -378,8 +378,8 @@ export function HttpRequestActionProperties({ nodeId, data }: HttpRequestActionP
             </div>
           )}
 
-          <Card className="bg-gray-50">
-            <CardContent className="p-3 text-xs text-gray-600">
+          <Card className="bg-muted">
+            <CardContent className="p-3 text-xs text-muted-foreground">
               <div className="font-medium mb-1">템플릿 변수 사용:</div>
               <code className="block">{"{{sourceData}}"}</code>
               <code className="block">{"{{필드명}}"}</code>
diff --git a/frontend/components/dataflow/node-editor/panels/properties/InsertActionProperties.tsx b/frontend/components/dataflow/node-editor/panels/properties/InsertActionProperties.tsx
index 513f0338..0dfe739a 100644
--- a/frontend/components/dataflow/node-editor/panels/properties/InsertActionProperties.tsx
+++ b/frontend/components/dataflow/node-editor/panels/properties/InsertActionProperties.tsx
@@ -788,16 +788,16 @@ export function InsertActionProperties({ nodeId, data }: InsertActionPropertiesP
               onClick={() => handleTargetTypeChange("internal")}
               className={cn(
                 "relative flex flex-col items-center gap-2 rounded-lg border-2 p-3 transition-all",
-                targetType === "internal" ? "border-blue-500 bg-blue-50" : "border-gray-200 hover:border-gray-300",
+                targetType === "internal" ? "border-primary bg-primary/10" : "border-border hover:border-input",
               )}
             >
-              <Database className={cn("h-5 w-5", targetType === "internal" ? "text-blue-600" : "text-gray-400")} />
+              <Database className={cn("h-5 w-5", targetType === "internal" ? "text-primary" : "text-muted-foreground/70")} />
               <span
-                className={cn("text-xs font-medium", targetType === "internal" ? "text-blue-700" : "text-gray-600")}
+                className={cn("text-xs font-medium", targetType === "internal" ? "text-primary" : "text-muted-foreground")}
               >
                 내부 DB
               </span>
-              {targetType === "internal" && <Check className="absolute top-2 right-2 h-4 w-4 text-blue-600" />}
+              {targetType === "internal" && <Check className="absolute top-2 right-2 h-4 w-4 text-primary" />}
             </button>
 
             <button
@@ -805,16 +805,16 @@ export function InsertActionProperties({ nodeId, data }: InsertActionPropertiesP
               onClick={() => handleTargetTypeChange("external")}
               className={cn(
                 "relative flex flex-col items-center gap-2 rounded-lg border-2 p-3 transition-all",
-                targetType === "external" ? "border-green-500 bg-green-50" : "border-gray-200 hover:border-gray-300",
+                targetType === "external" ? "border-emerald-500 bg-emerald-50" : "border-border hover:border-input",
               )}
             >
-              <Globe className={cn("h-5 w-5", targetType === "external" ? "text-green-600" : "text-gray-400")} />
+              <Globe className={cn("h-5 w-5", targetType === "external" ? "text-emerald-600" : "text-muted-foreground/70")} />
               <span
-                className={cn("text-xs font-medium", targetType === "external" ? "text-green-700" : "text-gray-600")}
+                className={cn("text-xs font-medium", targetType === "external" ? "text-emerald-700" : "text-muted-foreground")}
               >
                 외부 DB
               </span>
-              {targetType === "external" && <Check className="absolute top-2 right-2 h-4 w-4 text-green-600" />}
+              {targetType === "external" && <Check className="absolute top-2 right-2 h-4 w-4 text-emerald-600" />}
             </button>
 
             <button
@@ -822,11 +822,11 @@ export function InsertActionProperties({ nodeId, data }: InsertActionPropertiesP
               onClick={() => handleTargetTypeChange("api")}
               className={cn(
                 "relative flex flex-col items-center gap-2 rounded-lg border-2 p-3 transition-all",
-                targetType === "api" ? "border-purple-500 bg-purple-50" : "border-gray-200 hover:border-gray-300",
+                targetType === "api" ? "border-purple-500 bg-purple-50" : "border-border hover:border-input",
               )}
             >
-              <Link2 className={cn("h-5 w-5", targetType === "api" ? "text-purple-600" : "text-gray-400")} />
-              <span className={cn("text-xs font-medium", targetType === "api" ? "text-purple-700" : "text-gray-600")}>
+              <Link2 className={cn("h-5 w-5", targetType === "api" ? "text-purple-600" : "text-muted-foreground/70")} />
+              <span className={cn("text-xs font-medium", targetType === "api" ? "text-purple-700" : "text-muted-foreground")}>
                 REST API
               </span>
               {targetType === "api" && <Check className="absolute top-2 right-2 h-4 w-4 text-purple-600" />}
@@ -916,7 +916,7 @@ export function InsertActionProperties({ nodeId, data }: InsertActionPropertiesP
                   </Popover>
                   {targetTable && selectedTableLabel !== targetTable && (
                     <p className="text-muted-foreground mt-1 text-xs">
-                      실제 테이블명: <code className="rounded bg-gray-100 px-1 py-0.5">{targetTable}</code>
+                      실제 테이블명: <code className="rounded bg-muted px-1 py-0.5">{targetTable}</code>
                     </p>
                   )}
                 </div>
@@ -966,7 +966,7 @@ export function InsertActionProperties({ nodeId, data }: InsertActionPropertiesP
                   </Select>
                   {externalConnectionsLoading && <p className="text-muted-foreground mt-1 text-xs">로딩 중...</p>}
                   {externalConnections.length === 0 && !externalConnectionsLoading && (
-                    <p className="mt-1 text-xs text-orange-600">⚠️ 테스트에 성공한 외부 커넥션이 없습니다.</p>
+                    <p className="mt-1 text-xs text-amber-600">⚠️ 테스트에 성공한 외부 커넥션이 없습니다.</p>
                   )}
                 </div>
 
@@ -1008,13 +1008,13 @@ export function InsertActionProperties({ nodeId, data }: InsertActionPropertiesP
 
                 {/* 외부 컬럼 정보 표시 */}
                 {selectedExternalConnectionId && externalTargetTable && externalColumns.length > 0 && (
-                  <div className="rounded-lg border bg-gray-50 p-3">
-                    <p className="text-xs font-medium text-gray-700">타겟 컬럼 ({externalColumns.length}개)</p>
+                  <div className="rounded-lg border bg-muted p-3">
+                    <p className="text-xs font-medium text-foreground">타겟 컬럼 ({externalColumns.length}개)</p>
                     <div className="mt-2 max-h-[150px] space-y-1 overflow-y-auto">
                       {externalColumns.map((col) => (
                         <div key={col.column_name} className="flex items-center justify-between text-xs">
-                          <span className="font-mono text-gray-700">{col.column_name}</span>
-                          <span className="text-gray-500">{col.data_type}</span>
+                          <span className="font-mono text-foreground">{col.column_name}</span>
+                          <span className="text-muted-foreground">{col.data_type}</span>
                         </div>
                       ))}
                     </div>
@@ -1085,7 +1085,7 @@ export function InsertActionProperties({ nodeId, data }: InsertActionPropertiesP
 
                 {/* 인증 설정 */}
                 {apiAuthType !== "none" && (
-                  <div className="space-y-2 rounded border bg-gray-50 p-3">
+                  <div className="space-y-2 rounded border bg-muted p-3">
                     <Label className="block text-xs font-medium">인증 정보</Label>
 
                     {apiAuthType === "bearer" && (
@@ -1157,7 +1157,7 @@ export function InsertActionProperties({ nodeId, data }: InsertActionPropertiesP
                 {/* 커스텀 헤더 */}
                 <div>
                   <Label className="mb-1.5 block text-xs font-medium">커스텀 헤더 (선택사항)</Label>
-                  <div className="space-y-2 rounded border bg-gray-50 p-3">
+                  <div className="space-y-2 rounded border bg-muted p-3">
                     {Object.entries(apiHeaders).map(([key, value], index) => (
                       <div key={index} className="flex gap-2">
                         <Input
@@ -1217,7 +1217,7 @@ export function InsertActionProperties({ nodeId, data }: InsertActionPropertiesP
                 <div>
                   <Label className="mb-1.5 block text-xs font-medium">
                     요청 바디 템플릿
-                    <span className="ml-1 text-gray-500">{"{{fieldName}}"}으로 소스 필드 참조</span>
+                    <span className="ml-1 text-muted-foreground">{"{{fieldName}}"}으로 소스 필드 참조</span>
                   </Label>
                   <textarea
                     placeholder={'{\n  "name": "{{name}}",\n  "email": "{{email}}",\n  "age": "{{age}}"\n}'}
@@ -1229,7 +1229,7 @@ export function InsertActionProperties({ nodeId, data }: InsertActionPropertiesP
                     className="w-full rounded border p-2 font-mono text-xs"
                     rows={8}
                   />
-                  <p className="mt-1 text-xs text-gray-500">
+                  <p className="mt-1 text-xs text-muted-foreground">
                     소스 데이터의 필드명을 {"{{필드명}}"} 형태로 참조할 수 있습니다.
                   </p>
                 </div>
@@ -1251,25 +1251,25 @@ export function InsertActionProperties({ nodeId, data }: InsertActionPropertiesP
 
             {/* 🔥 로딩 상태 (타입별) */}
             {(columnsLoading || externalColumnsLoading) && (
-              <div className="rounded border p-3 text-center text-xs text-gray-500">컬럼 목록을 불러오는 중...</div>
+              <div className="rounded border p-3 text-center text-xs text-muted-foreground">컬럼 목록을 불러오는 중...</div>
             )}
 
             {/* 🔥 테이블 미선택 경고 (타입별) */}
             {targetType === "internal" && !targetTable && !columnsLoading && (
-              <div className="rounded border border-dashed bg-yellow-50 p-3 text-center text-xs text-yellow-700">
+              <div className="rounded border border-dashed bg-amber-50 p-3 text-center text-xs text-yellow-700">
                 ⚠️ 먼저 타겟 테이블을 선택하세요
               </div>
             )}
 
             {targetType === "external" && !externalTargetTable && !externalColumnsLoading && (
-              <div className="rounded border border-dashed bg-yellow-50 p-3 text-center text-xs text-yellow-700">
+              <div className="rounded border border-dashed bg-amber-50 p-3 text-center text-xs text-yellow-700">
                 ⚠️ 먼저 외부 커넥션과 테이블을 선택하세요
               </div>
             )}
 
             {/* 🔥 컬럼 로드 실패 (타입별) */}
             {targetType === "internal" && targetTable && !columnsLoading && targetColumns.length === 0 && (
-              <div className="rounded border border-dashed bg-red-50 p-3 text-center text-xs text-red-700">
+              <div className="rounded border border-dashed bg-destructive/10 p-3 text-center text-xs text-destructive">
                 ❌ 컬럼 정보를 불러올 수 없습니다
               </div>
             )}
@@ -1278,7 +1278,7 @@ export function InsertActionProperties({ nodeId, data }: InsertActionPropertiesP
               externalTargetTable &&
               !externalColumnsLoading &&
               externalColumns.length === 0 && (
-                <div className="rounded border border-dashed bg-red-50 p-3 text-center text-xs text-red-700">
+                <div className="rounded border border-dashed bg-destructive/10 p-3 text-center text-xs text-destructive">
                   ❌ 외부 DB 컬럼 정보를 불러올 수 없습니다
                 </div>
               )}
@@ -1290,14 +1290,14 @@ export function InsertActionProperties({ nodeId, data }: InsertActionPropertiesP
                 {fieldMappings.length > 0 ? (
                   <div className="space-y-3">
                     {fieldMappings.map((mapping, index) => (
-                      <div key={index} className="rounded border bg-gray-50 p-3">
+                      <div key={index} className="rounded border bg-muted p-3">
                         <div className="mb-2 flex items-center justify-between">
-                          <span className="text-xs font-medium text-gray-700">매핑 #{index + 1}</span>
+                          <span className="text-xs font-medium text-foreground">매핑 #{index + 1}</span>
                           <Button
                             size="sm"
                             variant="ghost"
                             onClick={() => handleRemoveMapping(index)}
-                            className="h-6 w-6 p-0 text-red-600 hover:text-red-700"
+                            className="h-6 w-6 p-0 text-destructive hover:text-destructive"
                           >
                             <Trash2 className="h-3 w-3" />
                           </Button>
@@ -1306,7 +1306,7 @@ export function InsertActionProperties({ nodeId, data }: InsertActionPropertiesP
                         <div className="space-y-2">
                           {/* 🔥 값 생성 유형 선택 */}
                           <div>
-                            <Label className="text-xs text-gray-600">값 생성 방식</Label>
+                            <Label className="text-xs text-muted-foreground">값 생성 방식</Label>
                             <div className="mt-1 grid grid-cols-3 gap-1">
                               <button
                                 type="button"
@@ -1314,8 +1314,8 @@ export function InsertActionProperties({ nodeId, data }: InsertActionPropertiesP
                                 className={cn(
                                   "rounded border px-2 py-1 text-xs transition-all",
                                   (mapping.valueType === "source" || !mapping.valueType)
-                                    ? "border-blue-500 bg-blue-50 text-blue-700"
-                                    : "border-gray-200 hover:border-gray-300",
+                                    ? "border-primary bg-primary/10 text-primary"
+                                    : "border-border hover:border-input",
                                 )}
                               >
                                 소스 필드
@@ -1326,8 +1326,8 @@ export function InsertActionProperties({ nodeId, data }: InsertActionPropertiesP
                                 className={cn(
                                   "rounded border px-2 py-1 text-xs transition-all",
                                   mapping.valueType === "static"
-                                    ? "border-orange-500 bg-orange-50 text-orange-700"
-                                    : "border-gray-200 hover:border-gray-300",
+                                    ? "border-orange-500 bg-amber-50 text-orange-700"
+                                    : "border-border hover:border-input",
                                 )}
                               >
                                 고정값
@@ -1339,7 +1339,7 @@ export function InsertActionProperties({ nodeId, data }: InsertActionPropertiesP
                                   "rounded border px-2 py-1 text-xs transition-all flex items-center justify-center gap-1",
                                   mapping.valueType === "autoGenerate"
                                     ? "border-purple-500 bg-purple-50 text-purple-700"
-                                    : "border-gray-200 hover:border-gray-300",
+                                    : "border-border hover:border-input",
                                 )}
                               >
                                 <Sparkles className="h-3 w-3" />
@@ -1351,7 +1351,7 @@ export function InsertActionProperties({ nodeId, data }: InsertActionPropertiesP
                           {/* 🔥 소스 필드 입력/선택 (valueType === "source" 일 때만) */}
                           {(mapping.valueType === "source" || !mapping.valueType) && (
                             <div>
-                              <Label className="text-xs text-gray-600">
+                              <Label className="text-xs text-muted-foreground">
                                 소스 필드
                                 {hasRestAPISource && <span className="ml-1 text-teal-600">(REST API - 직접 입력)</span>}
                               </Label>
@@ -1447,7 +1447,7 @@ export function InsertActionProperties({ nodeId, data }: InsertActionPropertiesP
                                 </Popover>
                               )}
                               {hasRestAPISource && (
-                                <p className="mt-1 text-xs text-gray-500">API 응답 JSON의 필드명을 입력하세요</p>
+                                <p className="mt-1 text-xs text-muted-foreground">API 응답 JSON의 필드명을 입력하세요</p>
                               )}
                             </div>
                           )}
@@ -1455,7 +1455,7 @@ export function InsertActionProperties({ nodeId, data }: InsertActionPropertiesP
                           {/* 🔥 고정값 입력 (valueType === "static" 일 때) */}
                           {mapping.valueType === "static" && (
                             <div>
-                              <Label className="text-xs text-gray-600">고정값</Label>
+                              <Label className="text-xs text-muted-foreground">고정값</Label>
                               <Input
                                 value={mapping.staticValue || ""}
                                 onChange={(e) => handleMappingChange(index, "staticValue", e.target.value || undefined)}
@@ -1468,9 +1468,9 @@ export function InsertActionProperties({ nodeId, data }: InsertActionPropertiesP
                           {/* 🔥 채번 규칙 선택 (valueType === "autoGenerate" 일 때) */}
                           {mapping.valueType === "autoGenerate" && (
                             <div>
-                              <Label className="text-xs text-gray-600">
+                              <Label className="text-xs text-muted-foreground">
                                 채번 규칙
-                                {numberingRulesLoading && <span className="ml-1 text-gray-400">(로딩 중...)</span>}
+                                {numberingRulesLoading && <span className="ml-1 text-muted-foreground/70">(로딩 중...)</span>}
                               </Label>
                               <Popover
                                 open={mappingNumberingRulesOpenState[index]}
@@ -1549,7 +1549,7 @@ export function InsertActionProperties({ nodeId, data }: InsertActionPropertiesP
                                 </PopoverContent>
                               </Popover>
                               {numberingRules.length === 0 && !numberingRulesLoading && (
-                                <p className="mt-1 text-xs text-orange-600">
+                                <p className="mt-1 text-xs text-amber-600">
                                   등록된 채번 규칙이 없습니다. 시스템 관리에서 먼저 채번 규칙을 생성하세요.
                                 </p>
                               )}
@@ -1557,12 +1557,12 @@ export function InsertActionProperties({ nodeId, data }: InsertActionPropertiesP
                           )}
 
                           <div className="flex items-center justify-center py-1">
-                            <ArrowRight className="h-4 w-4 text-green-600" />
+                            <ArrowRight className="h-4 w-4 text-emerald-600" />
                           </div>
 
                           {/* 타겟 필드 Combobox (🔥 타입별 컬럼 사용) */}
                           <div>
-                            <Label className="text-xs text-gray-600">타겟 필드</Label>
+                            <Label className="text-xs text-muted-foreground">타겟 필드</Label>
                             <Popover
                               open={mappingTargetFieldsOpenState[index]}
                               onOpenChange={(open) => {
@@ -1589,7 +1589,7 @@ export function InsertActionProperties({ nodeId, data }: InsertActionPropertiesP
                                               </span>
                                               <span className="text-muted-foreground text-xs">
                                                 {col?.dataType}
-                                                {col && !col.isNullable && <span className="text-red-500">*</span>}
+                                                {col && !col.isNullable && <span className="text-destructive">*</span>}
                                               </span>
                                             </div>
                                           );
@@ -1648,9 +1648,9 @@ export function InsertActionProperties({ nodeId, data }: InsertActionPropertiesP
                                               <span className="text-muted-foreground text-[10px]">
                                                 {col.dataType}
                                                 {col.columnDefault ? (
-                                                  <span className="text-blue-600"> 🔵기본값</span>
+                                                  <span className="text-primary"> 🔵기본값</span>
                                                 ) : (
-                                                  !col.isNullable && <span className="text-red-500"> *필수</span>
+                                                  !col.isNullable && <span className="text-destructive"> *필수</span>
                                                 )}
                                               </span>
                                             </div>
@@ -1694,7 +1694,7 @@ export function InsertActionProperties({ nodeId, data }: InsertActionPropertiesP
                     ))}
                   </div>
                 ) : (
-                  <div className="rounded border border-dashed p-4 text-center text-xs text-gray-400">
+                  <div className="rounded border border-dashed p-4 text-center text-xs text-muted-foreground/70">
                     필드 매핑이 없습니다. "추가" 버튼을 클릭하세요.
                   </div>
                 )}
@@ -1704,7 +1704,7 @@ export function InsertActionProperties({ nodeId, data }: InsertActionPropertiesP
         )}
 
         {/* 안내 */}
-        <div className="rounded bg-green-50 p-3 text-xs text-green-700">
+        <div className="rounded bg-emerald-50 p-3 text-xs text-emerald-700">
           <p>테이블과 필드는 실제 데이터베이스에서 조회됩니다.</p>
           <p className="mt-1">값 생성 방식: 소스 필드(입력값 연결) / 고정값(직접 입력) / 자동생성(채번 규칙)</p>
         </div>
diff --git a/frontend/components/dataflow/node-editor/panels/properties/LogProperties.tsx b/frontend/components/dataflow/node-editor/panels/properties/LogProperties.tsx
index e8757d99..049ed2c5 100644
--- a/frontend/components/dataflow/node-editor/panels/properties/LogProperties.tsx
+++ b/frontend/components/dataflow/node-editor/panels/properties/LogProperties.tsx
@@ -16,10 +16,10 @@ interface LogPropertiesProps {
 }
 
 const LOG_LEVELS = [
-  { value: "debug", label: "Debug", icon: Info, color: "text-blue-600" },
-  { value: "info", label: "Info", icon: Info, color: "text-green-600" },
-  { value: "warn", label: "Warning", icon: AlertTriangle, color: "text-yellow-600" },
-  { value: "error", label: "Error", icon: AlertCircle, color: "text-red-600" },
+  { value: "debug", label: "Debug", icon: Info, color: "text-primary" },
+  { value: "info", label: "Info", icon: Info, color: "text-emerald-600" },
+  { value: "warn", label: "Warning", icon: AlertTriangle, color: "text-amber-600" },
+  { value: "error", label: "Error", icon: AlertCircle, color: "text-destructive" },
 ];
 
 export function LogProperties({ nodeId, data }: LogPropertiesProps) {
@@ -48,9 +48,9 @@ export function LogProperties({ nodeId, data }: LogPropertiesProps) {
 
   return (
     <div className="space-y-4 p-4 pb-8">
-      <div className="flex items-center gap-2 rounded-md bg-gray-50 p-2">
-        <FileText className="h-4 w-4 text-gray-600" />
-        <span className="font-semibold text-gray-600">로그</span>
+      <div className="flex items-center gap-2 rounded-md bg-muted p-2">
+        <FileText className="h-4 w-4 text-muted-foreground" />
+        <span className="font-semibold text-muted-foreground">로그</span>
       </div>
 
       <div>
@@ -91,12 +91,12 @@ export function LogProperties({ nodeId, data }: LogPropertiesProps) {
       <div className="flex items-center justify-between">
         <div>
           <Label className="text-xs">데이터 포함</Label>
-          <p className="text-xs text-gray-500">플로우 데이터를 로그에 포함합니다</p>
+          <p className="text-xs text-muted-foreground">플로우 데이터를 로그에 포함합니다</p>
         </div>
         <Switch checked={includeData} onCheckedChange={setIncludeData} />
       </div>
 
-      <div className={`rounded-md border p-3 ${selectedLevel?.color || "text-gray-600"}`}>
+      <div className={`rounded-md border p-3 ${selectedLevel?.color || "text-muted-foreground"}`}>
         <div className="mb-1 flex items-center gap-2">
           <LevelIcon className="h-4 w-4" />
           <span className="text-xs font-semibold uppercase">{level}</span>
diff --git a/frontend/components/dataflow/node-editor/panels/properties/ProcedureCallActionProperties.tsx b/frontend/components/dataflow/node-editor/panels/properties/ProcedureCallActionProperties.tsx
index ac7bd438..d75dec92 100644
--- a/frontend/components/dataflow/node-editor/panels/properties/ProcedureCallActionProperties.tsx
+++ b/frontend/components/dataflow/node-editor/panels/properties/ProcedureCallActionProperties.tsx
@@ -388,7 +388,7 @@ export function ProcedureCallActionProperties({
       <div className="space-y-2">
         <Label className="text-xs font-medium">프로시저/함수 선택</Label>
         {loadingProcedures ? (
-          <div className="flex items-center gap-2 rounded border p-2 text-xs text-gray-500">
+          <div className="flex items-center gap-2 rounded border p-2 text-xs text-muted-foreground">
             <Loader2 className="h-3 w-3 animate-spin" />
             목록 조회 중...
           </div>
@@ -453,7 +453,7 @@ export function ProcedureCallActionProperties({
       {procedureName && parameters.length > 0 && (
         <div className="space-y-3">
           {loadingParams ? (
-            <div className="flex items-center gap-2 rounded border p-2 text-xs text-gray-500">
+            <div className="flex items-center gap-2 rounded border p-2 text-xs text-muted-foreground">
               <Loader2 className="h-3 w-3 animate-spin" />
               파라미터 조회 중...
             </div>
@@ -464,7 +464,7 @@ export function ProcedureCallActionProperties({
                 .length > 0 && (
                 <div className="space-y-2">
                   <Label className="flex items-center gap-1.5 text-xs font-medium">
-                    <span className="rounded bg-blue-100 px-1.5 py-0.5 text-[10px] text-blue-700">
+                    <span className="rounded bg-primary/10 px-1.5 py-0.5 text-[10px] text-primary">
                       IN
                     </span>
                     입력 파라미터
@@ -474,13 +474,13 @@ export function ProcedureCallActionProperties({
                       if (param.mode !== "IN" && param.mode !== "INOUT")
                         return null;
                       return (
-                        <Card key={idx} className="bg-gray-50">
+                        <Card key={idx} className="bg-muted">
                           <CardContent className="space-y-2 p-3">
                             <div className="flex items-center justify-between">
                               <span className="font-mono text-xs font-medium">
                                 {param.name}
                               </span>
-                              <span className="rounded bg-gray-200 px-1.5 py-0.5 text-[10px]">
+                              <span className="rounded bg-muted/80 px-1.5 py-0.5 text-[10px]">
                                 {param.dataType}
                               </span>
                             </div>
@@ -524,7 +524,7 @@ export function ProcedureCallActionProperties({
                                           {f.name}
                                         </span>
                                         {f.label && f.label !== f.name && (
-                                          <span className="ml-1 text-[10px] text-gray-400">
+                                          <span className="ml-1 text-[10px] text-muted-foreground/70">
                                             ({f.label})
                                           </span>
                                         )}
@@ -587,15 +587,15 @@ export function ProcedureCallActionProperties({
                 .length > 0 && (
                 <div className="space-y-2">
                   <Label className="flex items-center gap-1.5 text-xs font-medium">
-                    <span className="rounded bg-green-100 px-1.5 py-0.5 text-[10px] text-green-700">
+                    <span className="rounded bg-emerald-100 px-1.5 py-0.5 text-[10px] text-emerald-700">
                       OUT
                     </span>
                     반환 필드
-                    <span className="text-[10px] font-normal text-gray-400">
+                    <span className="text-[10px] font-normal text-muted-foreground/70">
                       (다음 노드에서 사용 가능)
                     </span>
                   </Label>
-                  <div className="rounded-md border border-green-200 bg-green-50 p-2">
+                  <div className="rounded-md border border-emerald-200 bg-emerald-50 p-2">
                     <div className="space-y-1">
                       {parameters
                         .filter(
@@ -606,10 +606,10 @@ export function ProcedureCallActionProperties({
                             key={idx}
                             className="flex items-center justify-between rounded bg-white px-2 py-1.5"
                           >
-                            <span className="font-mono text-xs font-medium text-green-700">
+                            <span className="font-mono text-xs font-medium text-emerald-700">
                               {param.name}
                             </span>
-                            <span className="rounded bg-gray-100 px-1.5 py-0.5 text-[10px] text-gray-500">
+                            <span className="rounded bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground">
                               {param.dataType}
                             </span>
                           </div>
diff --git a/frontend/components/dataflow/node-editor/panels/properties/RestAPISourceProperties.tsx b/frontend/components/dataflow/node-editor/panels/properties/RestAPISourceProperties.tsx
index 43c21255..2b051d59 100644
--- a/frontend/components/dataflow/node-editor/panels/properties/RestAPISourceProperties.tsx
+++ b/frontend/components/dataflow/node-editor/panels/properties/RestAPISourceProperties.tsx
@@ -200,7 +200,7 @@ export function RestAPISourceProperties({ nodeId, data }: RestAPISourcePropertie
                   <span className="font-medium">{key}:</span> {value}
                 </span>
                 <Button variant="ghost" size="sm" onClick={() => removeHeader(key)}>
-                  <Trash2 className="h-3 w-3 text-red-500" />
+                  <Trash2 className="h-3 w-3 text-destructive" />
                 </Button>
               </div>
             ))}
@@ -273,7 +273,7 @@ export function RestAPISourceProperties({ nodeId, data }: RestAPISourcePropertie
           placeholder="예: data.items"
           className="mt-1 text-sm"
         />
-        <p className="mt-1 text-xs text-gray-500">배열 데이터의 경로를 지정하세요 (예: data.items, result.users)</p>
+        <p className="mt-1 text-xs text-muted-foreground">배열 데이터의 경로를 지정하세요 (예: data.items, result.users)</p>
       </div>
 
       <div>
@@ -286,16 +286,16 @@ export function RestAPISourceProperties({ nodeId, data }: RestAPISourcePropertie
         </div>
         <div className="max-h-[300px] space-y-2 overflow-y-auto">
           {responseFields.length === 0 ? (
-            <div className="rounded border border-dashed p-3 text-center text-xs text-gray-400">
+            <div className="rounded border border-dashed p-3 text-center text-xs text-muted-foreground/70">
               응답 필드를 추가하여 데이터 구조를 정의하세요
             </div>
           ) : (
             responseFields.map((field, index) => (
-              <div key={index} className="rounded border bg-gray-50 p-2">
+              <div key={index} className="rounded border bg-muted p-2">
                 <div className="mb-2 flex items-center justify-between">
-                  <span className="text-xs font-medium text-gray-700">필드 {index + 1}</span>
+                  <span className="text-xs font-medium text-foreground">필드 {index + 1}</span>
                   <Button variant="ghost" size="sm" onClick={() => removeResponseField(index)}>
-                    <Trash2 className="h-3 w-3 text-red-500" />
+                    <Trash2 className="h-3 w-3 text-destructive" />
                   </Button>
                 </div>
                 <div className="space-y-2">
diff --git a/frontend/components/dataflow/node-editor/panels/properties/ScriptActionProperties.tsx b/frontend/components/dataflow/node-editor/panels/properties/ScriptActionProperties.tsx
index 2effa739..7450a2a1 100644
--- a/frontend/components/dataflow/node-editor/panels/properties/ScriptActionProperties.tsx
+++ b/frontend/components/dataflow/node-editor/panels/properties/ScriptActionProperties.tsx
@@ -392,7 +392,7 @@ process.stdin.on('end', () => {
                   className="h-8 text-sm"
                 />
                 <Button variant="ghost" size="sm" className="h-8 w-8 p-0" onClick={() => removeArg(index)}>
-                  <Trash2 className="h-3 w-3 text-red-500" />
+                  <Trash2 className="h-3 w-3 text-destructive" />
                 </Button>
               </div>
             ))}
@@ -489,14 +489,14 @@ process.stdin.on('end', () => {
                 className="h-8 text-sm"
               />
               <Button variant="ghost" size="sm" className="h-8 w-8 p-0" onClick={() => removeEnvVar(index)}>
-                <Trash2 className="h-3 w-3 text-red-500" />
+                <Trash2 className="h-3 w-3 text-destructive" />
               </Button>
             </div>
           ))}
 
           {envVars.length === 0 && (
-            <Card className="bg-gray-50">
-              <CardContent className="p-3 text-xs text-gray-500">
+            <Card className="bg-muted">
+              <CardContent className="p-3 text-xs text-muted-foreground">
                 환경변수가 없습니다. 추가 버튼을 클릭하여 환경변수를 설정하세요.
               </CardContent>
             </Card>
@@ -561,8 +561,8 @@ process.stdin.on('end', () => {
             </Select>
           </div>
 
-          <Card className="bg-gray-50">
-            <CardContent className="p-3 text-xs text-gray-600">
+          <Card className="bg-muted">
+            <CardContent className="p-3 text-xs text-muted-foreground">
               <div className="font-medium mb-1">출력 데이터 사용:</div>
               스크립트의 출력은 다음 노드에서 <code>{"{{scriptOutput}}"}</code>로 참조할 수 있습니다.
             </CardContent>
diff --git a/frontend/components/dataflow/node-editor/panels/properties/TableSourceProperties.tsx b/frontend/components/dataflow/node-editor/panels/properties/TableSourceProperties.tsx
index 9342e583..8b4a5d46 100644
--- a/frontend/components/dataflow/node-editor/panels/properties/TableSourceProperties.tsx
+++ b/frontend/components/dataflow/node-editor/panels/properties/TableSourceProperties.tsx
@@ -247,7 +247,7 @@ export function TableSourceProperties({ nodeId, data }: TableSourcePropertiesPro
             </Popover>
             {tableName && selectedTableLabel !== tableName && (
               <p className="text-muted-foreground mt-1 text-xs">
-                실제 테이블명: <code className="rounded bg-gray-100 px-1 py-0.5">{tableName}</code>
+                실제 테이블명: <code className="rounded bg-muted px-1 py-0.5">{tableName}</code>
               </p>
             )}
           </div>
@@ -290,19 +290,19 @@ export function TableSourceProperties({ nodeId, data }: TableSourcePropertiesPro
             </Select>
 
             {/* 설명 텍스트 */}
-            <div className="mt-2 rounded bg-blue-50 p-3 text-xs text-blue-700">
+            <div className="mt-2 rounded bg-primary/10 p-3 text-xs text-primary">
               {dataSourceType === "context-data" ? (
                 <>
                   <p className="mb-1 font-medium">💡 컨텍스트 데이터 모드</p>
                   <p>버튼 실행 시 전달된 데이터(폼 데이터, 테이블 선택 항목 등)를 사용합니다.</p>
-                  <p className="mt-1 text-blue-600">• 폼 데이터: 1개 레코드</p>
-                  <p className="text-blue-600">• 테이블 선택: N개 레코드</p>
+                  <p className="mt-1 text-primary">• 폼 데이터: 1개 레코드</p>
+                  <p className="text-primary">• 테이블 선택: N개 레코드</p>
                 </>
               ) : (
                 <>
                   <p className="mb-1 font-medium">📊 테이블 전체 데이터 모드</p>
                   <p>선택한 테이블의 **모든 행**을 직접 조회합니다.</p>
-                  <p className="mt-1 font-medium text-orange-600">⚠️ 대량 데이터 시 성능 주의</p>
+                  <p className="mt-1 font-medium text-amber-600">⚠️ 대량 데이터 시 성능 주의</p>
                 </>
               )}
             </div>
@@ -316,18 +316,18 @@ export function TableSourceProperties({ nodeId, data }: TableSourcePropertiesPro
           출력 필드 {data.fields && data.fields.length > 0 && `(${data.fields.length}개)`}
         </h3>
         {data.fields && data.fields.length > 0 ? (
-          <div className="max-h-[300px] space-y-1 overflow-y-auto rounded border bg-gray-50 p-2">
+          <div className="max-h-[300px] space-y-1 overflow-y-auto rounded border bg-muted p-2">
             {data.fields.map((field) => (
               <div key={field.name} className="flex items-center justify-between rounded bg-white px-2 py-1.5 text-xs">
-                <span className="truncate font-mono text-gray-700" title={field.name}>
+                <span className="truncate font-mono text-foreground" title={field.name}>
                   {field.name}
                 </span>
-                <span className="ml-2 shrink-0 text-gray-400">{field.type}</span>
+                <span className="ml-2 shrink-0 text-muted-foreground/70">{field.type}</span>
               </div>
             ))}
           </div>
         ) : (
-          <div className="rounded border p-4 text-center text-xs text-gray-400">필드 정보가 없습니다</div>
+          <div className="rounded border p-4 text-center text-xs text-muted-foreground/70">필드 정보가 없습니다</div>
         )}
       </div>
     </div>
diff --git a/frontend/components/dataflow/node-editor/panels/properties/UpdateActionProperties.tsx b/frontend/components/dataflow/node-editor/panels/properties/UpdateActionProperties.tsx
index 573d6fdf..fdc060c7 100644
--- a/frontend/components/dataflow/node-editor/panels/properties/UpdateActionProperties.tsx
+++ b/frontend/components/dataflow/node-editor/panels/properties/UpdateActionProperties.tsx
@@ -700,16 +700,16 @@ export function UpdateActionProperties({ nodeId, data }: UpdateActionPropertiesP
                 onClick={() => handleTargetTypeChange("internal")}
                 className={cn(
                   "relative flex flex-col items-center gap-2 rounded-lg border-2 p-3 transition-all",
-                  targetType === "internal" ? "border-blue-500 bg-blue-50" : "border-gray-200 hover:border-gray-300",
+                  targetType === "internal" ? "border-primary bg-primary/10" : "border-border hover:border-input",
                 )}
               >
-                <Database className={cn("h-5 w-5", targetType === "internal" ? "text-blue-600" : "text-gray-400")} />
+                <Database className={cn("h-5 w-5", targetType === "internal" ? "text-primary" : "text-muted-foreground/70")} />
                 <span
-                  className={cn("text-xs font-medium", targetType === "internal" ? "text-blue-700" : "text-gray-600")}
+                  className={cn("text-xs font-medium", targetType === "internal" ? "text-primary" : "text-muted-foreground")}
                 >
                   내부 DB
                 </span>
-                {targetType === "internal" && <Check className="absolute top-2 right-2 h-4 w-4 text-blue-600" />}
+                {targetType === "internal" && <Check className="absolute top-2 right-2 h-4 w-4 text-primary" />}
               </button>
 
               {/* 외부 데이터베이스 */}
@@ -717,16 +717,16 @@ export function UpdateActionProperties({ nodeId, data }: UpdateActionPropertiesP
                 onClick={() => handleTargetTypeChange("external")}
                 className={cn(
                   "relative flex flex-col items-center gap-2 rounded-lg border-2 p-3 transition-all",
-                  targetType === "external" ? "border-green-500 bg-green-50" : "border-gray-200 hover:border-gray-300",
+                  targetType === "external" ? "border-emerald-500 bg-emerald-50" : "border-border hover:border-input",
                 )}
               >
-                <Globe className={cn("h-5 w-5", targetType === "external" ? "text-green-600" : "text-gray-400")} />
+                <Globe className={cn("h-5 w-5", targetType === "external" ? "text-emerald-600" : "text-muted-foreground/70")} />
                 <span
-                  className={cn("text-xs font-medium", targetType === "external" ? "text-green-700" : "text-gray-600")}
+                  className={cn("text-xs font-medium", targetType === "external" ? "text-emerald-700" : "text-muted-foreground")}
                 >
                   외부 DB
                 </span>
-                {targetType === "external" && <Check className="absolute top-2 right-2 h-4 w-4 text-green-600" />}
+                {targetType === "external" && <Check className="absolute top-2 right-2 h-4 w-4 text-emerald-600" />}
               </button>
 
               {/* REST API */}
@@ -734,11 +734,11 @@ export function UpdateActionProperties({ nodeId, data }: UpdateActionPropertiesP
                 onClick={() => handleTargetTypeChange("api")}
                 className={cn(
                   "relative flex flex-col items-center gap-2 rounded-lg border-2 p-3 transition-all",
-                  targetType === "api" ? "border-purple-500 bg-purple-50" : "border-gray-200 hover:border-gray-300",
+                  targetType === "api" ? "border-purple-500 bg-purple-50" : "border-border hover:border-input",
                 )}
               >
-                <Link2 className={cn("h-5 w-5", targetType === "api" ? "text-purple-600" : "text-gray-400")} />
-                <span className={cn("text-xs font-medium", targetType === "api" ? "text-purple-700" : "text-gray-600")}>
+                <Link2 className={cn("h-5 w-5", targetType === "api" ? "text-purple-600" : "text-muted-foreground/70")} />
+                <span className={cn("text-xs font-medium", targetType === "api" ? "text-purple-700" : "text-muted-foreground")}>
                   REST API
                 </span>
                 {targetType === "api" && <Check className="absolute top-2 right-2 h-4 w-4 text-purple-600" />}
@@ -827,15 +827,15 @@ export function UpdateActionProperties({ nodeId, data }: UpdateActionPropertiesP
                   </SelectTrigger>
                   <SelectContent>
                     {externalConnectionsLoading ? (
-                      <div className="p-2 text-center text-xs text-gray-500">로딩 중...</div>
+                      <div className="p-2 text-center text-xs text-muted-foreground">로딩 중...</div>
                     ) : externalConnections.length === 0 ? (
-                      <div className="p-2 text-center text-xs text-gray-500">사용 가능한 커넥션이 없습니다</div>
+                      <div className="p-2 text-center text-xs text-muted-foreground">사용 가능한 커넥션이 없습니다</div>
                     ) : (
                       externalConnections.map((conn) => (
                         <SelectItem key={conn.id} value={conn.id!.toString()}>
                           <div className="flex items-center gap-2">
                             <span className="font-medium">{conn.db_type}</span>
-                            <span className="text-gray-500">-</span>
+                            <span className="text-muted-foreground">-</span>
                             <span>{conn.name}</span>
                           </div>
                         </SelectItem>
@@ -865,15 +865,15 @@ export function UpdateActionProperties({ nodeId, data }: UpdateActionPropertiesP
                     </SelectTrigger>
                     <SelectContent>
                       {externalTablesLoading ? (
-                        <div className="p-2 text-center text-xs text-gray-500">로딩 중...</div>
+                        <div className="p-2 text-center text-xs text-muted-foreground">로딩 중...</div>
                       ) : externalTables.length === 0 ? (
-                        <div className="p-2 text-center text-xs text-gray-500">테이블이 없습니다</div>
+                        <div className="p-2 text-center text-xs text-muted-foreground">테이블이 없습니다</div>
                       ) : (
                         externalTables.map((table) => (
                           <SelectItem key={table.table_name} value={table.table_name}>
                             <div className="flex items-center gap-2">
                               <span className="font-medium">{table.table_name}</span>
-                              {table.schema && <span className="text-xs text-gray-500">({table.schema})</span>}
+                              {table.schema && <span className="text-xs text-muted-foreground">({table.schema})</span>}
                             </div>
                           </SelectItem>
                         ))
@@ -887,11 +887,11 @@ export function UpdateActionProperties({ nodeId, data }: UpdateActionPropertiesP
               {externalTargetTable && externalColumns.length > 0 && (
                 <div>
                   <Label className="mb-1.5 block text-xs font-medium">컬럼 목록</Label>
-                  <div className="max-h-32 space-y-1 overflow-y-auto rounded border bg-gray-50 p-2">
+                  <div className="max-h-32 space-y-1 overflow-y-auto rounded border bg-muted p-2">
                     {externalColumns.map((col) => (
                       <div key={col.column_name} className="flex items-center justify-between text-xs">
                         <span className="font-medium">{col.column_name}</span>
-                        <span className="text-gray-500">{col.data_type}</span>
+                        <span className="text-muted-foreground">{col.data_type}</span>
                       </div>
                     ))}
                   </div>
@@ -961,7 +961,7 @@ export function UpdateActionProperties({ nodeId, data }: UpdateActionPropertiesP
 
               {/* 인증 설정 */}
               {apiAuthType !== "none" && (
-                <div className="space-y-2 rounded border bg-gray-50 p-3">
+                <div className="space-y-2 rounded border bg-muted p-3">
                   <Label className="block text-xs font-medium">인증 정보</Label>
 
                   {apiAuthType === "bearer" && (
@@ -1033,7 +1033,7 @@ export function UpdateActionProperties({ nodeId, data }: UpdateActionPropertiesP
               {/* 커스텀 헤더 */}
               <div>
                 <Label className="mb-1.5 block text-xs font-medium">커스텀 헤더 (선택사항)</Label>
-                <div className="space-y-2 rounded border bg-gray-50 p-3">
+                <div className="space-y-2 rounded border bg-muted p-3">
                   {Object.entries(apiHeaders).map(([key, value], index) => (
                     <div key={index} className="flex gap-2">
                       <Input
@@ -1093,7 +1093,7 @@ export function UpdateActionProperties({ nodeId, data }: UpdateActionPropertiesP
               <div>
                 <Label className="mb-1.5 block text-xs font-medium">
                   요청 바디 템플릿
-                  <span className="ml-1 text-gray-500">{"{{fieldName}}"}으로 소스 필드 참조</span>
+                  <span className="ml-1 text-muted-foreground">{"{{fieldName}}"}으로 소스 필드 참조</span>
                 </Label>
                 <textarea
                   placeholder={'{\n  "id": "{{id}}",\n  "name": "{{name}}",\n  "email": "{{email}}"\n}'}
@@ -1105,7 +1105,7 @@ export function UpdateActionProperties({ nodeId, data }: UpdateActionPropertiesP
                   className="w-full rounded border p-2 font-mono text-xs"
                   rows={8}
                 />
-                <p className="mt-1 text-xs text-gray-500">
+                <p className="mt-1 text-xs text-muted-foreground">
                   소스 데이터의 필드명을 {"{{필드명}}"} 형태로 참조할 수 있습니다.
                 </p>
               </div>
@@ -1125,13 +1125,13 @@ export function UpdateActionProperties({ nodeId, data }: UpdateActionPropertiesP
         </div>
 
         {!targetTable && !columnsLoading && (
-          <div className="rounded border border-dashed bg-yellow-50 p-3 text-center text-xs text-yellow-700">
+          <div className="rounded border border-dashed bg-amber-50 p-3 text-center text-xs text-yellow-700">
             ⚠️ 먼저 타겟 테이블을 선택하세요
           </div>
         )}
 
         {targetTable && whereConditions.length === 0 && (
-          <div className="rounded border border-dashed bg-gray-50 p-3 text-center text-xs text-gray-500">
+          <div className="rounded border border-dashed bg-muted p-3 text-center text-xs text-muted-foreground">
             WHERE 조건을 추가하세요
           </div>
         )}
@@ -1139,14 +1139,14 @@ export function UpdateActionProperties({ nodeId, data }: UpdateActionPropertiesP
         {targetTable && whereConditions.length > 0 && targetColumns.length > 0 && (
           <div className="space-y-3">
             {whereConditions.map((condition, index) => (
-              <div key={index} className="rounded border bg-blue-50 p-3">
+              <div key={index} className="rounded border bg-primary/10 p-3">
                 <div className="mb-2 flex items-center justify-between">
-                  <span className="text-xs font-medium text-gray-700">조건 #{index + 1}</span>
+                  <span className="text-xs font-medium text-foreground">조건 #{index + 1}</span>
                   <Button
                     size="sm"
                     variant="ghost"
                     onClick={() => handleRemoveCondition(index)}
-                    className="h-6 w-6 p-0 text-red-600 hover:text-red-700"
+                    className="h-6 w-6 p-0 text-destructive hover:text-destructive"
                   >
                     <Trash2 className="h-3 w-3" />
                   </Button>
@@ -1155,7 +1155,7 @@ export function UpdateActionProperties({ nodeId, data }: UpdateActionPropertiesP
                 <div className="space-y-2">
                   {/* 타겟 필드 - Combobox */}
                   <div>
-                    <Label className="text-xs text-gray-600">타겟 필드</Label>
+                    <Label className="text-xs text-muted-foreground">타겟 필드</Label>
                     <Popover
                       open={targetFieldsOpenState[index]}
                       onOpenChange={(open) => {
@@ -1228,7 +1228,7 @@ export function UpdateActionProperties({ nodeId, data }: UpdateActionPropertiesP
 
                   {/* 연산자 */}
                   <div>
-                    <Label className="text-xs text-gray-600">연산자</Label>
+                    <Label className="text-xs text-muted-foreground">연산자</Label>
                     <Select
                       value={condition.operator}
                       onValueChange={(value) => handleConditionChange(index, "operator", value)}
@@ -1251,7 +1251,7 @@ export function UpdateActionProperties({ nodeId, data }: UpdateActionPropertiesP
                     <>
                       {/* 소스 필드 - Combobox */}
                       <div>
-                        <Label className="text-xs text-gray-600">소스 필드 (선택)</Label>
+                        <Label className="text-xs text-muted-foreground">소스 필드 (선택)</Label>
                         <Popover
                           open={sourceFieldsOpenState[index]}
                           onOpenChange={(open) => {
@@ -1303,7 +1303,7 @@ export function UpdateActionProperties({ nodeId, data }: UpdateActionPropertiesP
                                       newState[index] = false;
                                       setSourceFieldsOpenState(newState);
                                     }}
-                                    className="text-xs text-gray-400 sm:text-sm"
+                                    className="text-xs text-muted-foreground/70 sm:text-sm"
                                   >
                                     <Check
                                       className={cn(
@@ -1350,21 +1350,21 @@ export function UpdateActionProperties({ nodeId, data }: UpdateActionPropertiesP
 
                       {/* 정적 값 */}
                       <div>
-                        <Label className="text-xs text-gray-600">정적 값</Label>
+                        <Label className="text-xs text-muted-foreground">정적 값</Label>
                         <Input
                           value={condition.staticValue || ""}
                           onChange={(e) => handleConditionChange(index, "staticValue", e.target.value || undefined)}
                           placeholder="비교할 고정 값"
                           className="mt-1 h-8 text-xs"
                         />
-                        <p className="mt-1 text-xs text-gray-400">소스 필드가 비어있을 때만 사용됩니다</p>
+                        <p className="mt-1 text-xs text-muted-foreground/70">소스 필드가 비어있을 때만 사용됩니다</p>
                       </div>
                     </>
                   )}
 
                   {/* IS_NULL, IS_NOT_NULL일 때 안내 메시지 */}
                   {(condition.operator === "IS_NULL" || condition.operator === "IS_NOT_NULL") && (
-                    <div className="rounded bg-blue-50 p-3 text-xs text-blue-700">
+                    <div className="rounded bg-primary/10 p-3 text-xs text-primary">
                       ℹ️ {condition.operator === "IS_NULL" ? "IS NULL" : "IS NOT NULL"} 조건은 값 비교가 필요하지
                       않습니다.
                     </div>
@@ -1388,13 +1388,13 @@ export function UpdateActionProperties({ nodeId, data }: UpdateActionPropertiesP
           </div>
 
           {!targetTable && !columnsLoading && (
-            <div className="rounded border border-dashed bg-yellow-50 p-3 text-center text-xs text-yellow-700">
+            <div className="rounded border border-dashed bg-amber-50 p-3 text-center text-xs text-yellow-700">
               ⚠️ 먼저 타겟 테이블을 선택하세요
             </div>
           )}
 
           {targetTable && !columnsLoading && targetColumns.length === 0 && (
-            <div className="rounded border border-dashed bg-red-50 p-3 text-center text-xs text-red-700">
+            <div className="rounded border border-dashed bg-destructive/10 p-3 text-center text-xs text-destructive">
               ❌ 컬럼 정보를 불러올 수 없습니다
             </div>
           )}
@@ -1404,14 +1404,14 @@ export function UpdateActionProperties({ nodeId, data }: UpdateActionPropertiesP
               {fieldMappings.length > 0 ? (
                 <div className="space-y-3">
                   {fieldMappings.map((mapping, index) => (
-                    <div key={index} className="rounded border bg-gray-50 p-3">
+                    <div key={index} className="rounded border bg-muted p-3">
                       <div className="mb-2 flex items-center justify-between">
-                        <span className="text-xs font-medium text-gray-700">매핑 #{index + 1}</span>
+                        <span className="text-xs font-medium text-foreground">매핑 #{index + 1}</span>
                         <Button
                           size="sm"
                           variant="ghost"
                           onClick={() => handleRemoveMapping(index)}
-                          className="h-6 w-6 p-0 text-red-600 hover:text-red-700"
+                          className="h-6 w-6 p-0 text-destructive hover:text-destructive"
                         >
                           <Trash2 className="h-3 w-3" />
                         </Button>
@@ -1420,7 +1420,7 @@ export function UpdateActionProperties({ nodeId, data }: UpdateActionPropertiesP
                       <div className="space-y-2">
                         {/* 소스 필드 - REST API인 경우 입력, 아니면 Combobox */}
                         <div>
-                          <Label className="text-xs text-gray-600">
+                          <Label className="text-xs text-muted-foreground">
                             소스 필드{hasRestAPISource && " (REST API - 직접 입력)"}
                           </Label>
                           {hasRestAPISource ? (
@@ -1431,7 +1431,7 @@ export function UpdateActionProperties({ nodeId, data }: UpdateActionPropertiesP
                               className="mt-1 h-8 text-xs"
                             />
                           ) : sourceFields.length === 0 ? (
-                            <div className="mt-1 rounded border bg-gray-50 p-2 text-center text-xs text-gray-400">
+                            <div className="mt-1 rounded border bg-muted p-2 text-center text-xs text-muted-foreground/70">
                               연결된 소스 노드가 없습니다
                             </div>
                           ) : (
@@ -1517,12 +1517,12 @@ export function UpdateActionProperties({ nodeId, data }: UpdateActionPropertiesP
                         </div>
 
                         <div className="flex items-center justify-center py-1">
-                          <ArrowRight className="h-4 w-4 text-blue-600" />
+                          <ArrowRight className="h-4 w-4 text-primary" />
                         </div>
 
                         {/* 타겟 필드 - Combobox */}
                         <div>
-                          <Label className="text-xs text-gray-600">타겟 필드</Label>
+                          <Label className="text-xs text-muted-foreground">타겟 필드</Label>
                           <Popover
                             open={mappingTargetFieldsOpenState[index]}
                             onOpenChange={(open) => {
@@ -1548,7 +1548,7 @@ export function UpdateActionProperties({ nodeId, data }: UpdateActionPropertiesP
                                           </span>
                                           <span className="text-muted-foreground text-xs">
                                             {col?.dataType}
-                                            {col && !col.isNullable && <span className="text-red-500">*</span>}
+                                            {col && !col.isNullable && <span className="text-destructive">*</span>}
                                           </span>
                                         </div>
                                       );
@@ -1592,9 +1592,9 @@ export function UpdateActionProperties({ nodeId, data }: UpdateActionPropertiesP
                                           <span className="text-muted-foreground text-[10px]">
                                             {col.dataType}
                                             {col.columnDefault ? (
-                                              <span className="text-blue-600"> 🔵기본값</span>
+                                              <span className="text-primary"> 🔵기본값</span>
                                             ) : (
-                                              !col.isNullable && <span className="text-red-500"> *필수</span>
+                                              !col.isNullable && <span className="text-destructive"> *필수</span>
                                             )}
                                           </span>
                                         </div>
@@ -1609,21 +1609,21 @@ export function UpdateActionProperties({ nodeId, data }: UpdateActionPropertiesP
 
                         {/* 정적 값 */}
                         <div>
-                          <Label className="text-xs text-gray-600">정적 값 (선택)</Label>
+                          <Label className="text-xs text-muted-foreground">정적 값 (선택)</Label>
                           <Input
                             value={mapping.staticValue || ""}
                             onChange={(e) => handleMappingChange(index, "staticValue", e.target.value || undefined)}
                             placeholder="소스 필드 대신 고정 값 사용"
                             className="mt-1 h-8 text-xs"
                           />
-                          <p className="mt-1 text-xs text-gray-400">소스 필드가 비어있을 때만 사용됩니다</p>
+                          <p className="mt-1 text-xs text-muted-foreground/70">소스 필드가 비어있을 때만 사용됩니다</p>
                         </div>
                       </div>
                     </div>
                   ))}
                 </div>
               ) : (
-                <div className="rounded border border-dashed bg-gray-50 p-3 text-center text-xs text-gray-500">
+                <div className="rounded border border-dashed bg-muted p-3 text-center text-xs text-muted-foreground">
                   업데이트할 필드를 추가하세요
                 </div>
               )}
diff --git a/frontend/components/dataflow/node-editor/panels/properties/UpsertActionProperties.tsx b/frontend/components/dataflow/node-editor/panels/properties/UpsertActionProperties.tsx
index bcb52500..dfd5499d 100644
--- a/frontend/components/dataflow/node-editor/panels/properties/UpsertActionProperties.tsx
+++ b/frontend/components/dataflow/node-editor/panels/properties/UpsertActionProperties.tsx
@@ -638,16 +638,16 @@ export function UpsertActionProperties({ nodeId, data }: UpsertActionPropertiesP
                   onClick={() => handleTargetTypeChange("internal")}
                   className={cn(
                     "relative flex flex-col items-center gap-2 rounded-lg border-2 p-3 transition-all",
-                    targetType === "internal" ? "border-blue-500 bg-blue-50" : "border-gray-200 hover:border-gray-300",
+                    targetType === "internal" ? "border-primary bg-primary/10" : "border-border hover:border-input",
                   )}
                 >
-                  <Database className={cn("h-5 w-5", targetType === "internal" ? "text-blue-600" : "text-gray-400")} />
+                  <Database className={cn("h-5 w-5", targetType === "internal" ? "text-primary" : "text-muted-foreground/70")} />
                   <span
-                    className={cn("text-xs font-medium", targetType === "internal" ? "text-blue-700" : "text-gray-600")}
+                    className={cn("text-xs font-medium", targetType === "internal" ? "text-primary" : "text-muted-foreground")}
                   >
                     내부 DB
                   </span>
-                  {targetType === "internal" && <Check className="absolute top-2 right-2 h-4 w-4 text-blue-600" />}
+                  {targetType === "internal" && <Check className="absolute top-2 right-2 h-4 w-4 text-primary" />}
                 </button>
 
                 <button
@@ -656,20 +656,20 @@ export function UpsertActionProperties({ nodeId, data }: UpsertActionPropertiesP
                   className={cn(
                     "relative flex flex-col items-center gap-2 rounded-lg border-2 p-3 transition-all",
                     targetType === "external"
-                      ? "border-green-500 bg-green-50"
-                      : "border-gray-200 hover:border-gray-300",
+                      ? "border-emerald-500 bg-emerald-50"
+                      : "border-border hover:border-input",
                   )}
                 >
-                  <Globe className={cn("h-5 w-5", targetType === "external" ? "text-green-600" : "text-gray-400")} />
+                  <Globe className={cn("h-5 w-5", targetType === "external" ? "text-emerald-600" : "text-muted-foreground/70")} />
                   <span
                     className={cn(
                       "text-xs font-medium",
-                      targetType === "external" ? "text-green-700" : "text-gray-600",
+                      targetType === "external" ? "text-emerald-700" : "text-muted-foreground",
                     )}
                   >
                     외부 DB
                   </span>
-                  {targetType === "external" && <Check className="absolute top-2 right-2 h-4 w-4 text-green-600" />}
+                  {targetType === "external" && <Check className="absolute top-2 right-2 h-4 w-4 text-emerald-600" />}
                 </button>
 
                 <button
@@ -677,12 +677,12 @@ export function UpsertActionProperties({ nodeId, data }: UpsertActionPropertiesP
                   onClick={() => handleTargetTypeChange("api")}
                   className={cn(
                     "relative flex flex-col items-center gap-2 rounded-lg border-2 p-3 transition-all",
-                    targetType === "api" ? "border-purple-500 bg-purple-50" : "border-gray-200 hover:border-gray-300",
+                    targetType === "api" ? "border-purple-500 bg-purple-50" : "border-border hover:border-input",
                   )}
                 >
-                  <Link2 className={cn("h-5 w-5", targetType === "api" ? "text-purple-600" : "text-gray-400")} />
+                  <Link2 className={cn("h-5 w-5", targetType === "api" ? "text-purple-600" : "text-muted-foreground/70")} />
                   <span
-                    className={cn("text-xs font-medium", targetType === "api" ? "text-purple-700" : "text-gray-600")}
+                    className={cn("text-xs font-medium", targetType === "api" ? "text-purple-700" : "text-muted-foreground")}
                   >
                     REST API
                   </span>
@@ -771,15 +771,15 @@ export function UpsertActionProperties({ nodeId, data }: UpsertActionPropertiesP
                     </SelectTrigger>
                     <SelectContent>
                       {externalConnectionsLoading ? (
-                        <div className="p-2 text-center text-xs text-gray-500">로딩 중...</div>
+                        <div className="p-2 text-center text-xs text-muted-foreground">로딩 중...</div>
                       ) : externalConnections.length === 0 ? (
-                        <div className="p-2 text-center text-xs text-gray-500">사용 가능한 커넥션이 없습니다</div>
+                        <div className="p-2 text-center text-xs text-muted-foreground">사용 가능한 커넥션이 없습니다</div>
                       ) : (
                         externalConnections.map((conn) => (
                           <SelectItem key={conn.id} value={conn.id!.toString()}>
                             <div className="flex items-center gap-2">
                               <span className="font-medium">{conn.db_type}</span>
-                              <span className="text-gray-500">-</span>
+                              <span className="text-muted-foreground">-</span>
                               <span>{conn.name}</span>
                             </div>
                           </SelectItem>
@@ -808,15 +808,15 @@ export function UpsertActionProperties({ nodeId, data }: UpsertActionPropertiesP
                       </SelectTrigger>
                       <SelectContent>
                         {externalTablesLoading ? (
-                          <div className="p-2 text-center text-xs text-gray-500">로딩 중...</div>
+                          <div className="p-2 text-center text-xs text-muted-foreground">로딩 중...</div>
                         ) : externalTables.length === 0 ? (
-                          <div className="p-2 text-center text-xs text-gray-500">테이블이 없습니다</div>
+                          <div className="p-2 text-center text-xs text-muted-foreground">테이블이 없습니다</div>
                         ) : (
                           externalTables.map((table) => (
                             <SelectItem key={table.table_name} value={table.table_name}>
                               <div className="flex items-center gap-2">
                                 <span className="font-medium">{table.table_name}</span>
-                                {table.schema && <span className="text-xs text-gray-500">({table.schema})</span>}
+                                {table.schema && <span className="text-xs text-muted-foreground">({table.schema})</span>}
                               </div>
                             </SelectItem>
                           ))
@@ -829,11 +829,11 @@ export function UpsertActionProperties({ nodeId, data }: UpsertActionPropertiesP
                 {externalTargetTable && externalColumns.length > 0 && (
                   <div>
                     <Label className="mb-1.5 block text-xs font-medium">컬럼 목록</Label>
-                    <div className="max-h-32 space-y-1 overflow-y-auto rounded border bg-gray-50 p-2">
+                    <div className="max-h-32 space-y-1 overflow-y-auto rounded border bg-muted p-2">
                       {externalColumns.map((col) => (
                         <div key={col.column_name} className="flex items-center justify-between text-xs">
                           <span className="font-medium">{col.column_name}</span>
-                          <span className="text-gray-500">{col.data_type}</span>
+                          <span className="text-muted-foreground">{col.data_type}</span>
                         </div>
                       ))}
                     </div>
@@ -900,7 +900,7 @@ export function UpsertActionProperties({ nodeId, data }: UpsertActionPropertiesP
                 </div>
 
                 {apiAuthType !== "none" && (
-                  <div className="space-y-2 rounded border bg-gray-50 p-3">
+                  <div className="space-y-2 rounded border bg-muted p-3">
                     <Label className="block text-xs font-medium">인증 정보</Label>
 
                     {apiAuthType === "bearer" && (
@@ -971,7 +971,7 @@ export function UpsertActionProperties({ nodeId, data }: UpsertActionPropertiesP
 
                 <div>
                   <Label className="mb-1.5 block text-xs font-medium">커스텀 헤더 (선택사항)</Label>
-                  <div className="space-y-2 rounded border bg-gray-50 p-3">
+                  <div className="space-y-2 rounded border bg-muted p-3">
                     {Object.entries(apiHeaders).map(([key, value], index) => (
                       <div key={index} className="flex gap-2">
                         <Input
@@ -1030,7 +1030,7 @@ export function UpsertActionProperties({ nodeId, data }: UpsertActionPropertiesP
                 <div>
                   <Label className="mb-1.5 block text-xs font-medium">
                     요청 바디 템플릿
-                    <span className="ml-1 text-gray-500">{`{{fieldName}}`}으로 소스 필드 참조</span>
+                    <span className="ml-1 text-muted-foreground">{`{{fieldName}}`}으로 소스 필드 참조</span>
                   </Label>
                   <textarea
                     placeholder={`{\n  "id": "{{id}}",\n  "name": "{{name}}",\n  "email": "{{email}}"\n}`}
@@ -1042,7 +1042,7 @@ export function UpsertActionProperties({ nodeId, data }: UpsertActionPropertiesP
                     className="w-full rounded border p-2 font-mono text-xs"
                     rows={8}
                   />
-                  <p className="mt-1 text-xs text-gray-500">
+                  <p className="mt-1 text-xs text-muted-foreground">
                     소스 데이터의 필드명을 {`{{필드명}}`} 형태로 참조할 수 있습니다.
                   </p>
                 </div>
@@ -1056,12 +1056,12 @@ export function UpsertActionProperties({ nodeId, data }: UpsertActionPropertiesP
           <div className="mb-2 flex items-center justify-between">
             <div>
               <h3 className="text-sm font-semibold">충돌 키 (ON CONFLICT)</h3>
-              <p className="text-xs text-gray-500">중복 체크에 사용할 키를 선택하세요</p>
+              <p className="text-xs text-muted-foreground">중복 체크에 사용할 키를 선택하세요</p>
             </div>
           </div>
 
           {!targetTable && (
-            <div className="rounded border border-dashed bg-yellow-50 p-3 text-center text-xs text-yellow-700">
+            <div className="rounded border border-dashed bg-amber-50 p-3 text-center text-xs text-yellow-700">
               ⚠️ 먼저 타겟 테이블을 선택하세요
             </div>
           )}
@@ -1084,7 +1084,7 @@ export function UpsertActionProperties({ nodeId, data }: UpsertActionPropertiesP
                   ))}
                 </div>
               ) : (
-                <div className="mb-3 rounded border border-dashed bg-gray-50 p-3 text-center text-xs text-gray-500">
+                <div className="mb-3 rounded border border-dashed bg-muted p-3 text-center text-xs text-muted-foreground">
                   충돌 키를 추가하세요
                 </div>
               )}
@@ -1144,13 +1144,13 @@ export function UpsertActionProperties({ nodeId, data }: UpsertActionPropertiesP
           </div>
 
           {!targetTable && !columnsLoading && (
-            <div className="rounded border border-dashed bg-yellow-50 p-3 text-center text-xs text-yellow-700">
+            <div className="rounded border border-dashed bg-amber-50 p-3 text-center text-xs text-yellow-700">
               ⚠️ 먼저 타겟 테이블을 선택하세요
             </div>
           )}
 
           {targetTable && !columnsLoading && targetColumns.length === 0 && (
-            <div className="rounded border border-dashed bg-red-50 p-3 text-center text-xs text-red-700">
+            <div className="rounded border border-dashed bg-destructive/10 p-3 text-center text-xs text-destructive">
               ❌ 컬럼 정보를 불러올 수 없습니다
             </div>
           )}
@@ -1160,14 +1160,14 @@ export function UpsertActionProperties({ nodeId, data }: UpsertActionPropertiesP
               {fieldMappings.length > 0 ? (
                 <div className="space-y-3">
                   {fieldMappings.map((mapping, index) => (
-                    <div key={index} className="rounded border bg-gray-50 p-3">
+                    <div key={index} className="rounded border bg-muted p-3">
                       <div className="mb-2 flex items-center justify-between">
-                        <span className="text-xs font-medium text-gray-700">매핑 #{index + 1}</span>
+                        <span className="text-xs font-medium text-foreground">매핑 #{index + 1}</span>
                         <Button
                           size="sm"
                           variant="ghost"
                           onClick={() => handleRemoveMapping(index)}
-                          className="h-6 w-6 p-0 text-red-600 hover:text-red-700"
+                          className="h-6 w-6 p-0 text-destructive hover:text-destructive"
                         >
                           <Trash2 className="h-3 w-3" />
                         </Button>
@@ -1176,7 +1176,7 @@ export function UpsertActionProperties({ nodeId, data }: UpsertActionPropertiesP
                       <div className="space-y-2">
                         {/* 소스 필드 - REST API인 경우 입력, 아니면 드롭다운 */}
                         <div>
-                          <Label className="text-xs text-gray-600">
+                          <Label className="text-xs text-muted-foreground">
                             소스 필드{hasRestAPISource && " (REST API - 직접 입력)"}
                           </Label>
                           {hasRestAPISource ? (
@@ -1274,7 +1274,7 @@ export function UpsertActionProperties({ nodeId, data }: UpsertActionPropertiesP
 
                         {/* 타겟 필드 Combobox */}
                         <div>
-                          <Label className="text-xs text-gray-600">타겟 필드</Label>
+                          <Label className="text-xs text-muted-foreground">타겟 필드</Label>
                           <Popover
                             open={mappingTargetFieldsOpenState[index]}
                             onOpenChange={(open) => {
@@ -1300,7 +1300,7 @@ export function UpsertActionProperties({ nodeId, data }: UpsertActionPropertiesP
                                           </span>
                                           <span className="text-muted-foreground text-xs">
                                             {col?.dataType}
-                                            {col && !col.isNullable && <span className="text-red-500">*</span>}
+                                            {col && !col.isNullable && <span className="text-destructive">*</span>}
                                           </span>
                                         </div>
                                       );
@@ -1344,9 +1344,9 @@ export function UpsertActionProperties({ nodeId, data }: UpsertActionPropertiesP
                                           <span className="text-muted-foreground text-[10px]">
                                             {col.dataType}
                                             {col.columnDefault ? (
-                                              <span className="text-blue-600"> 🔵기본값</span>
+                                              <span className="text-primary"> 🔵기본값</span>
                                             ) : (
-                                              !col.isNullable && <span className="text-red-500"> *필수</span>
+                                              !col.isNullable && <span className="text-destructive"> *필수</span>
                                             )}
                                           </span>
                                         </div>
@@ -1361,21 +1361,21 @@ export function UpsertActionProperties({ nodeId, data }: UpsertActionPropertiesP
 
                         {/* 정적 값 */}
                         <div>
-                          <Label className="text-xs text-gray-600">정적 값 (선택)</Label>
+                          <Label className="text-xs text-muted-foreground">정적 값 (선택)</Label>
                           <Input
                             value={mapping.staticValue || ""}
                             onChange={(e) => handleMappingChange(index, "staticValue", e.target.value || undefined)}
                             placeholder="소스 필드 대신 고정 값 사용"
                             className="mt-1 h-8 text-xs"
                           />
-                          <p className="mt-1 text-xs text-gray-400">소스 필드가 비어있을 때만 사용됩니다</p>
+                          <p className="mt-1 text-xs text-muted-foreground/70">소스 필드가 비어있을 때만 사용됩니다</p>
                         </div>
                       </div>
                     </div>
                   ))}
                 </div>
               ) : (
-                <div className="rounded border border-dashed bg-gray-50 p-3 text-center text-xs text-gray-500">
+                <div className="rounded border border-dashed bg-muted p-3 text-center text-xs text-muted-foreground">
                   UPSERT할 필드를 추가하세요
                 </div>
               )}
diff --git a/frontend/components/dataflow/node-editor/sidebar/NodePalette.tsx b/frontend/components/dataflow/node-editor/sidebar/NodePalette.tsx
index 80eb1ef9..ea98264a 100644
--- a/frontend/components/dataflow/node-editor/sidebar/NodePalette.tsx
+++ b/frontend/components/dataflow/node-editor/sidebar/NodePalette.tsx
@@ -29,9 +29,9 @@ export function NodePalette() {
   return (
     <div className="flex h-full flex-col bg-white">
       {/* 헤더 */}
-      <div className="border-b bg-gray-50 p-4">
-        <h3 className="text-sm font-semibold text-gray-900">노드 라이브러리</h3>
-        <p className="mt-1 text-xs text-gray-500">캔버스로 드래그하여 추가</p>
+      <div className="border-b bg-muted p-4">
+        <h3 className="text-sm font-semibold text-foreground">노드 라이브러리</h3>
+        <p className="mt-1 text-xs text-muted-foreground">캔버스로 드래그하여 추가</p>
       </div>
 
       {/* 노드 목록 */}
@@ -45,11 +45,11 @@ export function NodePalette() {
               {/* 카테고리 헤더 */}
               <button
                 onClick={() => toggleCategory(category.id)}
-                className="flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-sm font-medium text-gray-700 hover:bg-gray-100"
+                className="flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-sm font-medium text-foreground hover:bg-muted"
               >
                 {isExpanded ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
                 <span>{category.label}</span>
-                <span className="ml-auto text-xs text-gray-400">{nodes.length}</span>
+                <span className="ml-auto text-xs text-muted-foreground/70">{nodes.length}</span>
               </button>
 
               {/* 노드 아이템들 */}
@@ -66,8 +66,8 @@ export function NodePalette() {
       </div>
 
       {/* 푸터 도움말 */}
-      <div className="border-t bg-gray-50 p-3">
-        <p className="text-xs text-gray-500">💡 노드를 드래그하여 캔버스에 배치하고 연결선으로 연결하세요</p>
+      <div className="border-t bg-muted p-3">
+        <p className="text-xs text-muted-foreground">💡 노드를 드래그하여 캔버스에 배치하고 연결선으로 연결하세요</p>
       </div>
     </div>
   );
@@ -84,7 +84,7 @@ function NodePaletteItemComponent({ node }: { node: NodePaletteItem }) {
 
   return (
     <div
-      className="group cursor-move rounded-lg border border-gray-200 bg-white p-3 shadow-sm transition-all hover:border-gray-300 hover:shadow-md"
+      className="group cursor-move rounded-lg border border-border bg-white p-3 shadow-sm transition-all hover:border-input hover:shadow-md"
       draggable
       onDragStart={onDragStart}
       title={node.description}
@@ -95,8 +95,8 @@ function NodePaletteItemComponent({ node }: { node: NodePaletteItem }) {
 
         {/* 라벨 및 설명 */}
         <div className="min-w-0 flex-1">
-          <div className="text-sm font-medium text-gray-900">{node.label}</div>
-          <div className="mt-0.5 truncate text-xs text-gray-500">{node.description}</div>
+          <div className="text-sm font-medium text-foreground">{node.label}</div>
+          <div className="mt-0.5 truncate text-xs text-muted-foreground">{node.description}</div>
         </div>
       </div>
 
diff --git a/frontend/components/examples/ExampleFormDialog.tsx b/frontend/components/examples/ExampleFormDialog.tsx
index c358221b..38f04a71 100644
--- a/frontend/components/examples/ExampleFormDialog.tsx
+++ b/frontend/components/examples/ExampleFormDialog.tsx
@@ -212,7 +212,7 @@ export function ExampleFormDialog() {
               )}
               {!errors.email && formData.email && formData.email.includes("@") && (
                 <p className="text-muted-foreground flex items-center gap-1 text-xs">
-                  <CheckCircle className="h-3 w-3 text-green-600" />
+                  <CheckCircle className="h-3 w-3 text-emerald-600" />
                   올바른 형식입니다
                 </p>
               )}
diff --git a/frontend/components/flow/FlowConditionBuilder.tsx b/frontend/components/flow/FlowConditionBuilder.tsx
index 5bccc2c7..5f5c753d 100644
--- a/frontend/components/flow/FlowConditionBuilder.tsx
+++ b/frontend/components/flow/FlowConditionBuilder.tsx
@@ -337,7 +337,7 @@ export function FlowConditionBuilder({
           </div>
         ) : (
           conditions.map((cond, index) => (
-            <div key={index} className="space-y-2 rounded border bg-gray-50 p-3">
+            <div key={index} className="space-y-2 rounded border bg-muted p-3">
               {/* 조건 번호 및 삭제 버튼 */}
               <div className="flex items-center justify-between">
                 <Badge variant="outline">조건 {index + 1}</Badge>
@@ -378,7 +378,7 @@ export function FlowConditionBuilder({
                               return (
                                 <span className="flex items-center gap-2">
                                   <span className="font-medium">{displayName}</span>
-                                  {dataType && <span className="text-gray-500">({dataType})</span>}
+                                  {dataType && <span className="text-muted-foreground">({dataType})</span>}
                                 </span>
                               );
                             })()
@@ -390,7 +390,7 @@ export function FlowConditionBuilder({
                       <Command>
                         <CommandInput placeholder="컬럼 검색..." className="h-8 text-xs" />
                         <CommandList>
-                          <CommandEmpty className="py-2 text-center text-xs text-gray-500">
+                          <CommandEmpty className="py-2 text-center text-xs text-muted-foreground">
                             컬럼을 찾을 수 없습니다.
                           </CommandEmpty>
                           <CommandGroup>
@@ -417,7 +417,7 @@ export function FlowConditionBuilder({
                                   />
                                   <div className="flex items-center gap-2">
                                     <span className="font-medium">{displayName}</span>
-                                    <span className="text-gray-500">({dataType})</span>
+                                    <span className="text-muted-foreground">({dataType})</span>
                                   </div>
                                 </CommandItem>
                               );
@@ -478,7 +478,7 @@ export function FlowConditionBuilder({
 
       {/* 조건 요약 */}
       {conditions.length > 0 && (
-        <div className="rounded bg-blue-50 p-3 text-sm">
+        <div className="rounded bg-primary/10 p-3 text-sm">
           <strong>조건 요약:</strong>
           <div className="mt-2 space-y-1">
             {conditions.map((cond, index) => (
diff --git a/frontend/components/flow/FlowStepPanel.tsx b/frontend/components/flow/FlowStepPanel.tsx
index 311357f1..2a7dd96e 100644
--- a/frontend/components/flow/FlowStepPanel.tsx
+++ b/frontend/components/flow/FlowStepPanel.tsx
@@ -645,7 +645,7 @@ export function FlowStepPanel({
                   ))}
                 </SelectContent>
               </Select>
-              <p className="mt-1 text-xs text-gray-500">조회할 데이터베이스를 선택합니다</p>
+              <p className="mt-1 text-xs text-muted-foreground">조회할 데이터베이스를 선택합니다</p>
             </div> */}
 
             {/* 테이블 선택 */}
@@ -697,7 +697,7 @@ export function FlowStepPanel({
                                 <div className="flex flex-col">
                                   <span className="font-medium">{table.displayName || table.tableName}</span>
                                   {table.description && (
-                                    <span className="text-xs text-gray-500">{table.description}</span>
+                                    <span className="text-xs text-muted-foreground">{table.description}</span>
                                   )}
                                 </div>
                               </CommandItem>
@@ -726,7 +726,7 @@ export function FlowStepPanel({
                   </Command>
                 </PopoverContent>
               </Popover>
-              <p className="mt-1 text-xs text-gray-500">
+              <p className="mt-1 text-xs text-muted-foreground">
                 {selectedDbSource === "internal"
                   ? "이 단계에서 조건을 적용할 테이블을 선택합니다"
                   : "외부 데이터베이스의 테이블을 선택합니다"}
@@ -737,8 +737,8 @@ export function FlowStepPanel({
             {/* ===== 신버전: 플로우에서 선택한 테이블 표시만 ===== */}
             <div>
               <Label>연결된 테이블</Label>
-              <Input value={formData.tableName || "테이블이 지정되지 않았습니다"} disabled className="bg-gray-50" />
-              <p className="mt-1 text-xs text-gray-500">플로우 생성 시 선택한 테이블입니다 (수정 불가)</p>
+              <Input value={formData.tableName || "테이블이 지정되지 않았습니다"} disabled className="bg-muted" />
+              <p className="mt-1 text-xs text-muted-foreground">플로우 생성 시 선택한 테이블입니다 (수정 불가)</p>
             </div>
             {/* ===== 신버전 끝 ===== */}
           </CardContent>
@@ -752,7 +752,7 @@ export function FlowStepPanel({
           </CardHeader>
           <CardContent>
             {!formData.tableName ? (
-              <div className="py-8 text-center text-gray-500">먼저 테이블을 선택해주세요</div>
+              <div className="py-8 text-center text-muted-foreground">먼저 테이블을 선택해주세요</div>
             ) : (
               <FlowConditionBuilder
                 flowId={flowId}
@@ -791,19 +791,19 @@ export function FlowStepPanel({
                   <SelectItem value="status">
                     <div>
                       <div className="font-medium">상태 변경</div>
-                      <div className="text-xs text-gray-500">같은 테이블 내에서 상태 컬럼만 업데이트</div>
+                      <div className="text-xs text-muted-foreground">같은 테이블 내에서 상태 컬럼만 업데이트</div>
                     </div>
                   </SelectItem>
                   <SelectItem value="table">
                     <div>
                       <div className="font-medium">테이블 이동</div>
-                      <div className="text-xs text-gray-500">다른 테이블로 데이터 복사</div>
+                      <div className="text-xs text-muted-foreground">다른 테이블로 데이터 복사</div>
                     </div>
                   </SelectItem>
                   <SelectItem value="both">
                     <div>
                       <div className="font-medium">하이브리드</div>
-                      <div className="text-xs text-gray-500">상태 변경 + 테이블 이동</div>
+                      <div className="text-xs text-muted-foreground">상태 변경 + 테이블 이동</div>
                     </div>
                   </SelectItem>
                 </SelectContent>
@@ -864,7 +864,7 @@ export function FlowStepPanel({
                                   />
                                   <div>
                                     <div>{columnName}</div>
-                                    <div className="text-xs text-gray-500">({dataType})</div>
+                                    <div className="text-xs text-muted-foreground">({dataType})</div>
                                   </div>
                                 </CommandItem>
                               );
@@ -874,7 +874,7 @@ export function FlowStepPanel({
                       </Command>
                     </PopoverContent>
                   </Popover>
-                  <p className="mt-1 text-xs text-gray-500">업데이트할 컬럼의 이름</p>
+                  <p className="mt-1 text-xs text-muted-foreground">업데이트할 컬럼의 이름</p>
                 </div>
 
                 <div>
@@ -889,7 +889,7 @@ export function FlowStepPanel({
                     }}
                     placeholder="예: approved"
                   />
-                  <p className="mt-1 text-xs text-gray-500">이 단계에 있을 때의 상태값</p>
+                  <p className="mt-1 text-xs text-muted-foreground">이 단계에 있을 때의 상태값</p>
                 </div>
               </>
             )}
@@ -914,11 +914,11 @@ export function FlowStepPanel({
                       ))}
                     </SelectContent>
                   </Select>
-                  <p className="mt-1 text-xs text-gray-500">다음 단계로 이동 시 데이터가 저장될 테이블</p>
+                  <p className="mt-1 text-xs text-muted-foreground">다음 단계로 이동 시 데이터가 저장될 테이블</p>
                 </div>
 
-                <div className="rounded-md bg-blue-50 p-3">
-                  <p className="text-sm text-blue-900">
+                <div className="rounded-md bg-primary/10 p-3">
+                  <p className="text-sm text-primary">
                     💡 필드 매핑은 향후 구현 예정입니다. 현재는 같은 이름의 컬럼만 자동 매핑됩니다.
                   </p>
                 </div>
@@ -967,7 +967,7 @@ export function FlowStepPanel({
             {formData.integrationType === "external_db" && (
               <div className="space-y-4 rounded-lg border p-4">
                 {externalConnections.length === 0 ? (
-                  <div className="rounded-md bg-yellow-50 p-3">
+                  <div className="rounded-md bg-amber-50 p-3">
                     <p className="text-sm text-yellow-900">
                       ⚠️ 등록된 외부 DB 연결이 없습니다. 먼저 외부 DB 연결을 추가해주세요.
                     </p>
@@ -1070,7 +1070,7 @@ export function FlowStepPanel({
                               rows={4}
                               className="font-mono text-sm"
                             />
-                            <p className="mt-1 text-xs text-gray-500">
+                            <p className="mt-1 text-xs text-muted-foreground">
                               템플릿 변수: {`{{dataId}}, {{currentUser}}, {{currentTimestamp}}`}
                             </p>
                           </div>
@@ -1132,8 +1132,8 @@ export function FlowStepPanel({
                           </>
                         )}
 
-                        <div className="rounded-md bg-blue-50 p-3">
-                          <p className="text-sm text-blue-900">
+                        <div className="rounded-md bg-primary/10 p-3">
+                          <p className="text-sm text-primary">
                             💡 템플릿 변수를 사용하여 동적 값을 삽입할 수 있습니다:
                             <br />• {`{{dataId}}`} - 이동하는 데이터의 ID
                             <br />• {`{{currentUser}}`} - 현재 사용자
@@ -1261,8 +1261,8 @@ export function FlowStepPanel({
                       />
                     </div>
 
-                    <div className="rounded-md bg-blue-50 p-3">
-                      <p className="text-sm text-blue-900">
+                    <div className="rounded-md bg-primary/10 p-3">
+                      <p className="text-sm text-primary">
                         💡 템플릿 변수를 사용하여 동적 값을 삽입할 수 있습니다:
                         <br />• {`{{dataId}}`} - 이동하는 데이터의 ID
                         <br />• {`{{currentUser}}`} - 현재 사용자
@@ -1326,7 +1326,7 @@ export function FlowStepPanel({
                   <div>
                     <Label>외부 DB 연결</Label>
                     {externalConnections.length === 0 ? (
-                      <div className="rounded-md bg-yellow-50 p-3">
+                      <div className="rounded-md bg-amber-50 p-3">
                         <p className="text-sm text-yellow-900">
                           등록된 외부 DB 연결이 없습니다. 먼저 외부 DB 연결을 추가해주세요.
                         </p>
@@ -1469,7 +1469,7 @@ export function FlowStepPanel({
                                       />
                                       <div className="flex flex-col">
                                         <span className="font-medium">{proc.name}</span>
-                                        <span className="text-[10px] text-gray-500">
+                                        <span className="text-[10px] text-muted-foreground">
                                           {proc.type} | {proc.schema}
                                           {proc.returnType ? ` | 반환: ${proc.returnType}` : ""}
                                         </span>
@@ -1531,13 +1531,13 @@ export function FlowStepPanel({
                             <SelectItem value="procedure">
                               <div>
                                 <div className="font-medium">CALL (프로시저)</div>
-                                <div className="text-xs text-gray-500">CALL procedure_name()</div>
+                                <div className="text-xs text-muted-foreground">CALL procedure_name()</div>
                               </div>
                             </SelectItem>
                             <SelectItem value="function">
                               <div>
                                 <div className="font-medium">SELECT (함수)</div>
-                                <div className="text-xs text-gray-500">SELECT function_name()</div>
+                                <div className="text-xs text-muted-foreground">SELECT function_name()</div>
                               </div>
                             </SelectItem>
                           </SelectContent>
@@ -1552,8 +1552,8 @@ export function FlowStepPanel({
                         {loadingProcedureParams ? (
                           <div className="py-2 text-sm text-muted-foreground">파라미터 로딩 중...</div>
                         ) : (formData.integrationConfig as FlowProcedureConfig)?.parameters?.length === 0 ? (
-                          <div className="rounded-md bg-gray-50 p-3">
-                            <p className="text-sm text-gray-600">파라미터가 없는 프로시저입니다.</p>
+                          <div className="rounded-md bg-muted p-3">
+                            <p className="text-sm text-muted-foreground">파라미터가 없는 프로시저입니다.</p>
                           </div>
                         ) : (
                           <div className="space-y-3">
@@ -1627,8 +1627,8 @@ export function FlowStepPanel({
                       </div>
                     )}
 
-                    <div className="rounded-md bg-blue-50 p-3">
-                      <p className="text-sm text-blue-900">
+                    <div className="rounded-md bg-primary/10 p-3">
+                      <p className="text-sm text-primary">
                         프로시저는 데이터 이동 전에 실행됩니다.
                         <br />실패 시 데이터 이동도 함께 롤백됩니다.
                       </p>
@@ -1652,7 +1652,7 @@ export function FlowStepPanel({
                 컬럼 목록을 불러오는 중...
               </div>
             ) : availableColumns.length === 0 ? (
-              <div className="rounded-md bg-yellow-50 p-4 text-center">
+              <div className="rounded-md bg-amber-50 p-4 text-center">
                 <p className="text-sm text-yellow-900">
                   ⚠️ 테이블의 컬럼 목록을 불러올 수 없습니다.
                   <br />
@@ -1721,8 +1721,8 @@ export function FlowStepPanel({
                   </div>
                 </div>
 
-                <div className="rounded-md bg-blue-50 p-3">
-                  <p className="text-sm text-blue-900">
+                <div className="rounded-md bg-primary/10 p-3">
+                  <p className="text-sm text-primary">
                     💡 선택된 컬럼: {formData.displayConfig.visibleColumns?.length || 0}개
                     {formData.displayConfig.visibleColumns?.length === 0 && " (모든 컬럼이 표시됩니다)"}
                   </p>
diff --git a/frontend/components/layout/AdminPageRenderer.tsx b/frontend/components/layout/AdminPageRenderer.tsx
new file mode 100644
index 00000000..20175b5e
--- /dev/null
+++ b/frontend/components/layout/AdminPageRenderer.tsx
@@ -0,0 +1,109 @@
+"use client";
+
+import React, { useMemo } from "react";
+import dynamic from "next/dynamic";
+import { Loader2 } from "lucide-react";
+
+const LoadingFallback = () => (
+  <div className="flex h-full items-center justify-center">
+    <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+  </div>
+);
+
+/**
+ * 관리자 페이지를 URL 기반으로 동적 로딩하는 레지스트리.
+ * 사이드바 메뉴에서 접근하는 주요 페이지를 명시적으로 매핑한다.
+ * 매핑되지 않은 URL은 catch-all fallback으로 처리된다.
+ */
+const ADMIN_PAGE_REGISTRY: Record<string, React.ComponentType<any>> = {
+  // 관리자 메인
+  "/admin": dynamic(() => import("@/app/(main)/admin/page"), { ssr: false, loading: LoadingFallback }),
+
+  // 메뉴 관리
+  "/admin/menu": dynamic(() => import("@/app/(main)/admin/menu/page"), { ssr: false, loading: LoadingFallback }),
+
+  // 사용자 관리
+  "/admin/userMng/userMngList": dynamic(() => import("@/app/(main)/admin/userMng/userMngList/page"), { ssr: false, loading: LoadingFallback }),
+  "/admin/userMng/rolesList": dynamic(() => import("@/app/(main)/admin/userMng/rolesList/page"), { ssr: false, loading: LoadingFallback }),
+  "/admin/userMng/userAuthList": dynamic(() => import("@/app/(main)/admin/userMng/userAuthList/page"), { ssr: false, loading: LoadingFallback }),
+  "/admin/userMng/companyList": dynamic(() => import("@/app/(main)/admin/userMng/companyList/page"), { ssr: false, loading: LoadingFallback }),
+
+  // 화면 관리
+  "/admin/screenMng/screenMngList": dynamic(() => import("@/app/(main)/admin/screenMng/screenMngList/page"), { ssr: false, loading: LoadingFallback }),
+  "/admin/screenMng/popScreenMngList": dynamic(() => import("@/app/(main)/admin/screenMng/popScreenMngList/page"), { ssr: false, loading: LoadingFallback }),
+  "/admin/screenMng/dashboardList": dynamic(() => import("@/app/(main)/admin/screenMng/dashboardList/page"), { ssr: false, loading: LoadingFallback }),
+  "/admin/screenMng/reportList": dynamic(() => import("@/app/(main)/admin/screenMng/reportList/page"), { ssr: false, loading: LoadingFallback }),
+
+  // 시스템 관리
+  "/admin/systemMng/commonCodeList": dynamic(() => import("@/app/(main)/admin/systemMng/commonCodeList/page"), { ssr: false, loading: LoadingFallback }),
+  "/admin/systemMng/tableMngList": dynamic(() => import("@/app/(main)/admin/systemMng/tableMngList/page"), { ssr: false, loading: LoadingFallback }),
+  "/admin/systemMng/i18nList": dynamic(() => import("@/app/(main)/admin/systemMng/i18nList/page"), { ssr: false, loading: LoadingFallback }),
+  "/admin/systemMng/collection-managementList": dynamic(() => import("@/app/(main)/admin/systemMng/collection-managementList/page"), { ssr: false, loading: LoadingFallback }),
+  "/admin/systemMng/dataflow": dynamic(() => import("@/app/(main)/admin/systemMng/dataflow/page"), { ssr: false, loading: LoadingFallback }),
+
+  // 자동화 관리
+  "/admin/automaticMng/flowMgmtList": dynamic(() => import("@/app/(main)/admin/automaticMng/flowMgmtList/page"), { ssr: false, loading: LoadingFallback }),
+  "/admin/automaticMng/batchmngList": dynamic(() => import("@/app/(main)/admin/automaticMng/batchmngList/page"), { ssr: false, loading: LoadingFallback }),
+  "/admin/automaticMng/exconList": dynamic(() => import("@/app/(main)/admin/automaticMng/exconList/page"), { ssr: false, loading: LoadingFallback }),
+  "/admin/automaticMng/exCallConfList": dynamic(() => import("@/app/(main)/admin/automaticMng/exCallConfList/page"), { ssr: false, loading: LoadingFallback }),
+
+  // 메일
+  "/admin/automaticMng/mail/send": dynamic(() => import("@/app/(main)/admin/automaticMng/mail/send/page"), { ssr: false, loading: LoadingFallback }),
+  "/admin/automaticMng/mail/receive": dynamic(() => import("@/app/(main)/admin/automaticMng/mail/receive/page"), { ssr: false, loading: LoadingFallback }),
+  "/admin/automaticMng/mail/sent": dynamic(() => import("@/app/(main)/admin/automaticMng/mail/sent/page"), { ssr: false, loading: LoadingFallback }),
+  "/admin/automaticMng/mail/drafts": dynamic(() => import("@/app/(main)/admin/automaticMng/mail/drafts/page"), { ssr: false, loading: LoadingFallback }),
+  "/admin/automaticMng/mail/trash": dynamic(() => import("@/app/(main)/admin/automaticMng/mail/trash/page"), { ssr: false, loading: LoadingFallback }),
+  "/admin/automaticMng/mail/accounts": dynamic(() => import("@/app/(main)/admin/automaticMng/mail/accounts/page"), { ssr: false, loading: LoadingFallback }),
+  "/admin/automaticMng/mail/templates": dynamic(() => import("@/app/(main)/admin/automaticMng/mail/templates/page"), { ssr: false, loading: LoadingFallback }),
+  "/admin/automaticMng/mail/dashboardList": dynamic(() => import("@/app/(main)/admin/automaticMng/mail/dashboardList/page"), { ssr: false, loading: LoadingFallback }),
+  "/admin/automaticMng/mail/bulk-send": dynamic(() => import("@/app/(main)/admin/automaticMng/mail/bulk-send/page"), { ssr: false, loading: LoadingFallback }),
+
+  // 배치 관리
+  "/admin/batch-management": dynamic(() => import("@/app/(main)/admin/batch-management/page"), { ssr: false, loading: LoadingFallback }),
+  "/admin/batch-management-new": dynamic(() => import("@/app/(main)/admin/batch-management-new/page"), { ssr: false, loading: LoadingFallback }),
+
+  // 기타
+  "/admin/cascading-management": dynamic(() => import("@/app/(main)/admin/cascading-management/page"), { ssr: false, loading: LoadingFallback }),
+  "/admin/cascading-relations": dynamic(() => import("@/app/(main)/admin/cascading-relations/page"), { ssr: false, loading: LoadingFallback }),
+  "/admin/layouts": dynamic(() => import("@/app/(main)/admin/layouts/page"), { ssr: false, loading: LoadingFallback }),
+  "/admin/templates": dynamic(() => import("@/app/(main)/admin/templates/page"), { ssr: false, loading: LoadingFallback }),
+  "/admin/monitoring": dynamic(() => import("@/app/(main)/admin/monitoring/page"), { ssr: false, loading: LoadingFallback }),
+  "/admin/standards": dynamic(() => import("@/app/(main)/admin/standards/page"), { ssr: false, loading: LoadingFallback }),
+  "/admin/flow-external-db": dynamic(() => import("@/app/(main)/admin/flow-external-db/page"), { ssr: false, loading: LoadingFallback }),
+  "/admin/auto-fill": dynamic(() => import("@/app/(main)/admin/auto-fill/page"), { ssr: false, loading: LoadingFallback }),
+};
+
+// 매핑되지 않은 URL용 Fallback
+function AdminPageFallback({ url }: { url: string }) {
+  return (
+    <div className="flex h-full items-center justify-center">
+      <div className="text-center">
+        <p className="text-lg font-semibold text-foreground">페이지 로딩 불가</p>
+        <p className="mt-1 text-sm text-muted-foreground">
+          경로: {url}
+        </p>
+        <p className="mt-2 text-xs text-muted-foreground">
+          AdminPageRenderer 레지스트리에 이 URL을 추가해주세요.
+        </p>
+      </div>
+    </div>
+  );
+}
+
+interface AdminPageRendererProps {
+  url: string;
+}
+
+export function AdminPageRenderer({ url }: AdminPageRendererProps) {
+  const PageComponent = useMemo(() => {
+    // URL에서 쿼리스트링/해시 제거 후 매칭
+    const cleanUrl = url.split("?")[0].split("#")[0].replace(/\/$/, "");
+    return ADMIN_PAGE_REGISTRY[cleanUrl] || null;
+  }, [url]);
+
+  if (!PageComponent) {
+    return <AdminPageFallback url={url} />;
+  }
+
+  return <PageComponent />;
+}
diff --git a/frontend/components/layout/AppLayout.tsx b/frontend/components/layout/AppLayout.tsx
index 5cfee702..ad9a6aaf 100644
--- a/frontend/components/layout/AppLayout.tsx
+++ b/frontend/components/layout/AppLayout.tsx
@@ -30,6 +30,10 @@ import { toast } from "sonner";
 import { ProfileModal } from "./ProfileModal";
 import { Logo } from "./Logo";
 import { SideMenu } from "./SideMenu";
+import { TabBar } from "./TabBar";
+import { TabContent } from "./TabContent";
+import { useTabStore } from "@/stores/tabStore";
+import { ThemeToggle } from "./ThemeToggle";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -48,7 +52,6 @@ import {
 import { CompanySwitcher } from "@/components/admin/CompanySwitcher";
 import { getIconComponent } from "@/components/admin/MenuIconPicker";
 
-// useAuth의 UserInfo 타입을 확장
 interface ExtendedUserInfo {
   userId: string;
   userName: string;
@@ -76,7 +79,6 @@ interface AppLayoutProps {
   children: React.ReactNode;
 }
 
-// 메뉴 아이콘 매핑 함수 (DB 아이콘 우선, 없으면 키워드 기반 fallback)
 const getMenuIcon = (menuName: string, dbIconName?: string | null) => {
   if (dbIconName) {
     const DbIcon = getIconComponent(dbIconName);
@@ -96,54 +98,44 @@ const getMenuIcon = (menuName: string, dbIconName?: string | null) => {
   return <FileText className="h-4 w-4" />;
 };
 
-// 메뉴 데이터를 UI용으로 변환하는 함수 (최상위 "사용자", "관리자" 제외)
-const convertMenuToUI = (menus: MenuItem[], userInfo: ExtendedUserInfo | null, parentId: string = "0"): any[] => {
+const convertMenuToUI = (menus: MenuItem[], userInfo: ExtendedUserInfo | null, parentId: string = "0", parentPath: string = ""): any[] => {
   const filteredMenus = menus
     .filter((menu) => (menu.parent_obj_id || menu.PARENT_OBJ_ID) === parentId)
     .filter((menu) => (menu.status || menu.STATUS) === "active")
     .sort((a, b) => (a.seq || a.SEQ || 0) - (b.seq || b.SEQ || 0));
 
-  // 최상위 레벨에서 "사용자", "관리자" 카테고리가 있으면 그 하위 메뉴들을 직접 표시
   if (parentId === "0") {
     const allMenus: any[] = [];
 
     for (const menu of filteredMenus) {
       const menuName = (menu.menu_name_kor || menu.MENU_NAME_KOR || "").toLowerCase();
 
-      // "사용자" 또는 "관리자" 카테고리면 하위 메뉴들을 직접 추가
       if (menuName.includes("사용자") || menuName.includes("관리자")) {
-        const childMenus = convertMenuToUI(menus, userInfo, menu.objid || menu.OBJID);
+        const childMenus = convertMenuToUI(menus, userInfo, menu.objid || menu.OBJID, "");
         allMenus.push(...childMenus);
       } else {
-        // 일반 메뉴는 그대로 추가
-        allMenus.push(convertSingleMenu(menu, menus, userInfo));
+        allMenus.push(convertSingleMenu(menu, menus, userInfo, ""));
       }
     }
 
     return allMenus;
   }
 
-  return filteredMenus.map((menu) => convertSingleMenu(menu, menus, userInfo));
+  return filteredMenus.map((menu) => convertSingleMenu(menu, menus, userInfo, parentPath));
 };
 
-// 단일 메뉴 변환 함수
-const convertSingleMenu = (menu: MenuItem, allMenus: MenuItem[], userInfo: ExtendedUserInfo | null): any => {
+const convertSingleMenu = (menu: MenuItem, allMenus: MenuItem[], userInfo: ExtendedUserInfo | null, parentPath: string = ""): any => {
   const menuId = menu.objid || menu.OBJID;
 
-  // 사용자 locale 기준으로 번역 처리
-  const getDisplayText = (menu: MenuItem) => {
-    // 다국어 텍스트가 있으면 사용, 없으면 기본 텍스트 사용
-    if (menu.translated_name || menu.TRANSLATED_NAME) {
-      return menu.translated_name || menu.TRANSLATED_NAME;
+  const getDisplayText = (m: MenuItem) => {
+    if (m.translated_name || m.TRANSLATED_NAME) {
+      return m.translated_name || m.TRANSLATED_NAME;
     }
 
-    const baseName = menu.menu_name_kor || menu.MENU_NAME_KOR || "메뉴명 없음";
-
-    // 사용자 정보에서 locale 가져오기
+    const baseName = m.menu_name_kor || m.MENU_NAME_KOR || "메뉴명 없음";
     const userLocale = userInfo?.locale || "ko";
 
     if (userLocale === "EN") {
-      // 영어 번역
       const translations: { [key: string]: string } = {
         관리자: "Administrator",
         사용자: "User Management",
@@ -163,7 +155,6 @@ const convertSingleMenu = (menu: MenuItem, allMenus: MenuItem[], userInfo: Exten
         }
       }
     } else if (userLocale === "JA") {
-      // 일본어 번역
       const translations: { [key: string]: string } = {
         관리자: "管理者",
         사용자: "ユーザー管理",
@@ -183,7 +174,6 @@ const convertSingleMenu = (menu: MenuItem, allMenus: MenuItem[], userInfo: Exten
         }
       }
     } else if (userLocale === "ZH") {
-      // 중국어 번역
       const translations: { [key: string]: string } = {
         관리자: "管理员",
         사용자: "用户管理",
@@ -207,11 +197,15 @@ const convertSingleMenu = (menu: MenuItem, allMenus: MenuItem[], userInfo: Exten
     return baseName;
   };
 
-  const children = convertMenuToUI(allMenus, userInfo, menuId);
+  const displayName = getDisplayText(menu);
+  const tabTitle = parentPath ? `${parentPath} - ${displayName}` : displayName;
+
+  const children = convertMenuToUI(allMenus, userInfo, menuId, tabTitle);
 
   return {
     id: menuId,
-    name: getDisplayText(menu),
+    name: displayName,
+    tabTitle,
     icon: getMenuIcon(menu.menu_name_kor || menu.MENU_NAME_KOR || "", menu.menu_icon || menu.MENU_ICON),
     url: menu.menu_url || menu.MENU_URL || "#",
     children: children.length > 0 ? children : undefined,
@@ -223,7 +217,7 @@ function AppLayoutInner({ children }: AppLayoutProps) {
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
-  const { user, logout, refreshUserData, switchCompany } = useAuth();
+  const { user, logout, refreshUserData } = useAuth();
   const { userMenus, adminMenus, loading, refreshMenus } = useMenu();
   const [sidebarOpen, setSidebarOpen] = useState(true);
   const [expandedMenus, setExpandedMenus] = useState<Set<string>>(new Set());
@@ -231,12 +225,32 @@ function AppLayoutInner({ children }: AppLayoutProps) {
   const [showCompanySwitcher, setShowCompanySwitcher] = useState(false);
   const [currentCompanyName, setCurrentCompanyName] = useState<string>("");
 
+  // URL 직접 접근 시 탭 자동 열기
+  useEffect(() => {
+    const store = useTabStore.getState();
+    const currentModeTabs = store[store.mode].tabs;
+    if (currentModeTabs.length > 0) return;
+
+    const screenMatch = pathname.match(/^\/screens\/(\d+)/);
+    if (screenMatch) {
+      const screenId = parseInt(screenMatch[1]);
+      const menuObjid = searchParams.get("menuObjid") ? parseInt(searchParams.get("menuObjid")!) : undefined;
+      store.openTab({ type: "screen", title: `화면 ${screenId}`, screenId, menuObjid });
+      return;
+    }
+
+    if (pathname.startsWith("/admin") && pathname !== "/admin") {
+      store.setMode("admin");
+      store.openTab({ type: "admin", title: pathname.split("/").pop() || "관리자", adminUrl: pathname });
+    }
+  }, []);
+
   // 현재 회사명 조회 (SUPER_ADMIN 전용)
   useEffect(() => {
     const fetchCurrentCompanyName = async () => {
       if ((user as ExtendedUserInfo)?.userType === "SUPER_ADMIN") {
         const companyCode = (user as ExtendedUserInfo)?.companyCode;
-        
+
         if (companyCode === "*") {
           setCurrentCompanyName("WACE (최고 관리자)");
         } else if (companyCode) {
@@ -246,7 +260,7 @@ function AppLayoutInner({ children }: AppLayoutProps) {
               const company = response.data.data.find((c: any) => c.company_code === companyCode);
               setCurrentCompanyName(company?.company_name || companyCode);
             }
-          } catch (error) {
+          } catch {
             setCurrentCompanyName(companyCode);
           }
         }
@@ -259,9 +273,8 @@ function AppLayoutInner({ children }: AppLayoutProps) {
   // 화면 크기 감지 및 사이드바 초기 상태 설정
   useEffect(() => {
     const checkIsMobile = () => {
-      const mobile = window.innerWidth < 1024; // lg 브레이크포인트
+      const mobile = window.innerWidth < 1024;
       setIsMobile(mobile);
-      // 모바일에서만 사이드바를 닫음
       if (mobile) {
         setSidebarOpen(false);
       } else {
@@ -289,7 +302,6 @@ function AppLayoutInner({ children }: AppLayoutProps) {
     selectImage,
     removeImage,
     saveProfile,
-    // 운전자 관련
     isDriver,
     hasVehicle,
     driverInfo,
@@ -306,17 +318,14 @@ function AppLayoutInner({ children }: AppLayoutProps) {
     handleRegisterVehicle,
   } = useProfile(user, refreshUserData, refreshMenus);
 
-  // 현재 경로에 따라 어드민 모드인지 판단 (쿼리 파라미터도 고려)
-  const isAdminMode = pathname.startsWith("/admin") || searchParams.get("mode") === "admin";
+  const tabMode = useTabStore((s) => s.mode);
+  const setTabMode = useTabStore((s) => s.setMode);
+  const isAdminMode = tabMode === "admin";
 
-  // 프리뷰 모드: 사이드바/헤더 없이 화면만 표시 (iframe 임베드용)
   const isPreviewMode = searchParams.get("preview") === "true";
 
-  // 현재 모드에 따라 표시할 메뉴 결정
-  // 관리자 모드에서는 관리자 메뉴만, 사용자 모드에서는 사용자 메뉴만 표시
   const currentMenus = isAdminMode ? adminMenus : userMenus;
 
-  // 메뉴 토글 함수
   const toggleMenu = (menuId: string) => {
     const newExpanded = new Set(expandedMenus);
     if (newExpanded.has(menuId)) {
@@ -327,92 +336,90 @@ function AppLayoutInner({ children }: AppLayoutProps) {
     setExpandedMenus(newExpanded);
   };
 
-  // 메뉴 클릭 핸들러
+  const { openTab } = useTabStore();
+
   const handleMenuClick = async (menu: any) => {
     if (menu.hasChildren) {
       toggleMenu(menu.id);
     } else {
-      // 메뉴 이름 저장 (엑셀 다운로드 파일명에 사용)
-      const menuName = menu.label || menu.name || "메뉴";
+      const menuName = menu.tabTitle || menu.label || menu.name || "메뉴";
       if (typeof window !== "undefined") {
         localStorage.setItem("currentMenuName", menuName);
       }
 
-      // 먼저 할당된 화면이 있는지 확인 (URL 유무와 관계없이)
       try {
         const menuObjid = menu.objid || menu.id;
         const assignedScreens = await menuScreenApi.getScreensByMenu(menuObjid);
 
         if (assignedScreens.length > 0) {
-          // 할당된 화면이 있으면 첫 번째 화면으로 이동
           const firstScreen = assignedScreens[0];
-
-          // 관리자 모드 상태와 menuObjid를 쿼리 파라미터로 전달
-          const params = new URLSearchParams();
-          if (isAdminMode) {
-            params.set("mode", "admin");
-          }
-          params.set("menuObjid", menuObjid.toString());
-          
-          const screenPath = `/screens/${firstScreen.screenId}?${params.toString()}`;
-
-          router.push(screenPath);
-          if (isMobile) {
-            setSidebarOpen(false);
-          }
+          openTab({
+            type: "screen",
+            title: menuName,
+            screenId: firstScreen.screenId,
+            menuObjid: parseInt(menuObjid),
+          });
+          if (isMobile) setSidebarOpen(false);
           return;
         }
-      } catch (error) {
-        console.warn("할당된 화면 조회 실패:", error);
+      } catch {
+        console.warn("할당된 화면 조회 실패");
       }
 
-      // 할당된 화면이 없고 URL이 있으면 기존 URL로 이동
       if (menu.url && menu.url !== "#") {
-        router.push(menu.url);
-        if (isMobile) {
-          setSidebarOpen(false);
-        }
+        openTab({
+          type: "admin",
+          title: menuName,
+          adminUrl: menu.url,
+        });
+        if (isMobile) setSidebarOpen(false);
       } else {
-        // URL도 없고 할당된 화면도 없으면 경고 메시지
         toast.warning("이 메뉴에는 연결된 페이지나 화면이 없습니다.");
       }
     }
   };
 
-  // 모드 전환 핸들러
   const handleModeSwitch = () => {
-    if (isAdminMode) {
-      // 관리자 → 사용자 모드: 선택한 회사 유지
-      router.push("/main");
-    } else {
-      // 사용자 → 관리자 모드: 선택한 회사 유지 (회사 전환 없음)
-      router.push("/admin");
-    }
+    setTabMode(isAdminMode ? "user" : "admin");
   };
 
-  // 로그아웃 핸들러
   const handleLogout = async () => {
     try {
       await logout();
       router.push("/login");
-    } catch (error) {
-      // 로그아웃 실패 시 처리
+    } catch {
+      // 로그아웃 실패
     }
   };
 
-  // 메뉴 트리 렌더링 (기존 MainLayout 스타일 적용)
+  const handleMenuDragStart = (e: React.DragEvent, menu: any) => {
+    if (menu.hasChildren) {
+      e.preventDefault();
+      return;
+    }
+    e.dataTransfer.effectAllowed = "copy";
+    const menuName = menu.tabTitle || menu.label || menu.name || "메뉴";
+    const menuObjid = menu.objid || menu.id;
+    const dragPayload = JSON.stringify({ menuName, menuObjid, url: menu.url });
+    e.dataTransfer.setData("application/tab-menu-pending", dragPayload);
+    e.dataTransfer.setData("text/plain", menuName);
+  };
+
   const renderMenu = (menu: any, level: number = 0) => {
     const isExpanded = expandedMenus.has(menu.id);
+    const isLeaf = !menu.hasChildren;
 
     return (
       <div key={menu.id}>
         <div
-          className={`group flex h-10 cursor-pointer items-center justify-between rounded-lg px-3 py-2 text-sm font-medium transition-colors duration-200 ease-in-out ${
+          draggable={isLeaf}
+          onDragStart={(e) => handleMenuDragStart(e, menu)}
+          className={`group flex min-h-[44px] cursor-pointer items-center justify-between rounded-md px-3 py-2 text-sm font-medium transition-colors duration-150 ease-in-out sm:min-h-[40px] ${
             pathname === menu.url
-              ? "border-primary border-l-4 bg-gradient-to-br from-slate-100 to-blue-100/40 text-slate-900"
+              ? "border-primary bg-primary/8 text-primary border-l-3 font-semibold"
               : isExpanded
-                ? "bg-slate-100 text-slate-900"
-                : "text-slate-600 hover:bg-slate-50 hover:text-slate-900"
+                ? "bg-accent/60 text-foreground"
+                : "text-muted-foreground hover:bg-accent hover:text-foreground"
           } ${level > 0 ? "ml-6" : ""}`}
           onClick={() => handleMenuClick(menu)}
         >
@@ -429,16 +436,17 @@ function AppLayoutInner({ children }: AppLayoutProps) {
           )}
         </div>
 
-        {/* 서브메뉴 */}
         {menu.hasChildren && isExpanded && (
-          <div className="mt-1 space-y-1 pl-6">
+          <div className="mt-0.5 space-y-0.5 pl-9">
             {menu.children?.map((child: any) => (
               <div
                 key={child.id}
-                className={`flex cursor-pointer items-center rounded-lg px-3 py-2 text-sm transition-colors hover:cursor-pointer ${
+                draggable={!child.hasChildren}
+                onDragStart={(e) => handleMenuDragStart(e, child)}
+                className={`flex min-h-[44px] cursor-pointer items-center rounded-md px-3 py-2 text-sm transition-colors duration-150 hover:cursor-pointer sm:min-h-[40px] ${
                   pathname === child.url
-                    ? "border-primary border-l-4 bg-gradient-to-br from-slate-100 to-blue-100/40 text-slate-900"
-                    : "text-slate-600 hover:bg-slate-50 hover:text-slate-900"
+                    ? "border-primary bg-primary/8 text-primary border-l-3 font-semibold"
+                    : "text-muted-foreground hover:bg-accent hover:text-foreground"
                 }`}
                 onClick={() => handleMenuClick(child)}
               >
@@ -456,16 +464,12 @@ function AppLayoutInner({ children }: AppLayoutProps) {
     );
   };
 
-  // 프리뷰 모드: 사이드바/헤더 없이 화면만 표시 (인증 대기 없이 즉시 렌더링)
   if (isPreviewMode) {
     return (
-      <div className="h-screen w-full overflow-auto bg-white p-4">
-        {children}
-      </div>
+      <div className="bg-background h-screen w-full overflow-auto p-4">{children}</div>
     );
   }
 
-  // 사용자 정보가 없으면 로딩 표시
   if (!user) {
     return (
       <div className="flex h-screen items-center justify-center">
@@ -477,23 +481,20 @@ function AppLayoutInner({ children }: AppLayoutProps) {
     );
   }
 
-  // UI 변환된 메뉴 데이터
   const uiMenus = convertMenuToUI(currentMenus, user as ExtendedUserInfo);
 
   return (
-    <div className="flex h-screen flex-col bg-white">
-      {/* 모바일 헤더 - 모바일에서만 표시 */}
+    <div className="bg-background flex h-screen flex-col">
+      {/* 모바일 헤더 */}
       {isMobile && (
-        <header className="fixed top-0 left-0 right-0 z-50 flex h-14 items-center justify-between border-b border-slate-200 bg-white px-4">
+        <header className="border-border bg-background/95 fixed top-0 right-0 left-0 z-50 flex h-14 items-center justify-between border-b px-4 backdrop-blur-sm">
           <div className="flex items-center gap-3">
-            {/* 햄버거 메뉴 버튼 */}
             <SideMenu onSidebarToggle={() => setSidebarOpen(!sidebarOpen)} />
             <Logo />
           </div>
-          {/* 사용자 드롭다운 */}
           <DropdownMenu modal={false}>
             <DropdownMenuTrigger asChild>
-              <button className="flex items-center gap-2 rounded-lg px-2 py-1 transition-colors hover:bg-slate-100">
+              <button className="hover:bg-accent flex items-center gap-2 rounded-lg px-2 py-1 transition-colors">
                 <div className="relative flex h-8 w-8 shrink-0 overflow-hidden rounded-full">
                   {user.photo && user.photo.trim() !== "" && user.photo !== "null" ? (
                     <img
@@ -502,7 +503,7 @@ function AppLayoutInner({ children }: AppLayoutProps) {
                       className="aspect-square h-full w-full object-cover"
                     />
                   ) : (
-                    <div className="flex h-full w-full items-center justify-center rounded-full bg-slate-200 text-sm font-semibold text-slate-700">
+                    <div className="bg-muted text-foreground flex h-full w-full items-center justify-center rounded-full text-sm font-semibold">
                       {user.userName?.substring(0, 1)?.toUpperCase() || "U"}
                     </div>
                   )}
@@ -512,9 +513,7 @@ function AppLayoutInner({ children }: AppLayoutProps) {
             <DropdownMenuContent className="w-56" align="end">
               <DropdownMenuLabel className="font-normal">
                 <div className="flex flex-col space-y-1">
-                  <p className="text-sm leading-none font-medium">
-                    {user.userName || "사용자"}
-                  </p>
+                  <p className="text-sm leading-none font-medium">{user.userName || "사용자"}</p>
                   <p className="text-muted-foreground text-xs leading-none">
                     {user.deptName || user.email || user.userId}
                   </p>
@@ -530,6 +529,10 @@ function AppLayoutInner({ children }: AppLayoutProps) {
                 <span>결재함</span>
               </DropdownMenuItem>
               <DropdownMenuSeparator />
+              <div className="px-1 py-0.5">
+                <ThemeToggle />
+              </div>
+              <DropdownMenuSeparator />
               <DropdownMenuItem onClick={handleLogout}>
                 <LogOut className="mr-2 h-4 w-4" />
                 <span>로그아웃</span>
@@ -539,11 +542,13 @@ function AppLayoutInner({ children }: AppLayoutProps) {
         </header>
       )}
 
-      {/* 메인 컨테이너 - 모바일에서는 헤더 높이만큼 패딩 */}
+      {/* 메인 컨테이너 */}
       <div className={`flex flex-1 ${isMobile ? "pt-14" : ""}`}>
-        {/* 모바일 사이드바 오버레이 */}
         {sidebarOpen && isMobile && (
-          <div className="fixed inset-0 z-30 bg-black/50 lg:hidden" onClick={() => setSidebarOpen(false)} />
+          <div
+            className="fixed inset-0 z-30 bg-black/40 backdrop-blur-sm lg:hidden"
+            onClick={() => setSidebarOpen(false)}
+          />
         )}
 
         {/* 왼쪽 사이드바 */}
@@ -552,22 +557,20 @@ function AppLayoutInner({ children }: AppLayoutProps) {
             isMobile
               ? (sidebarOpen ? "translate-x-0" : "-translate-x-full") + " fixed top-14 left-0 z-40 h-[calc(100vh-56px)]"
               : "relative z-auto h-screen translate-x-0"
-          } flex w-[200px] flex-col border-r border-slate-200 bg-white transition-transform duration-300`}
+          } border-sidebar-border bg-sidebar flex w-[260px] flex-col border-r transition-transform duration-300 sm:w-[220px] lg:w-[240px]`}
         >
-          {/* 사이드바 최상단 - 로고 (데스크톱에서만 표시) */}
           {!isMobile && (
-            <div className="flex h-14 items-center justify-between border-b border-slate-200 px-4">
+            <div className="border-border flex h-14 items-center justify-between border-b px-4">
               <Logo />
             </div>
           )}
 
-          {/* WACE 관리자: 현재 관리 회사 표시 */}
           {(user as ExtendedUserInfo)?.userType === "SUPER_ADMIN" && (
-            <div className="mx-3 mt-3 rounded-lg border bg-gradient-to-r from-primary/10 to-primary/5 p-3">
+            <div className="border-border bg-muted/50 mx-3 mt-3 rounded-md border p-3">
               <div className="flex items-center gap-2">
-                <Building2 className="h-4 w-4 shrink-0 text-primary" />
+                <Building2 className="text-primary h-4 w-4 shrink-0" />
                 <div className="min-w-0 flex-1">
-                  <p className="text-[10px] text-muted-foreground">현재 관리 회사</p>
+                  <p className="text-muted-foreground text-[10px]">현재 관리 회사</p>
                   <p className="truncate text-sm font-semibold" title={currentCompanyName || "로딩 중..."}>
                     {currentCompanyName || "로딩 중..."}
                   </p>
@@ -576,96 +579,69 @@ function AppLayoutInner({ children }: AppLayoutProps) {
             </div>
           )}
 
-        {/* Admin/User 모드 전환 버튼 (관리자만) */}
-        {((user as ExtendedUserInfo)?.userType === "SUPER_ADMIN" ||
-          (user as ExtendedUserInfo)?.userType === "COMPANY_ADMIN" ||
-          (user as ExtendedUserInfo)?.userType === "admin") && (
-          <div className="space-y-2 border-b border-slate-200 p-3">
-            {/* 관리자/사용자 메뉴 전환 */}
-            <Button
-              onClick={handleModeSwitch}
-              className={`flex w-full items-center justify-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition-colors duration-200 hover:cursor-pointer ${
-                isAdminMode
-                  ? "border border-orange-200 bg-orange-50 text-orange-700 hover:bg-orange-100"
-                  : "border-primary/20 bg-accent hover:bg-primary/20 border text-blue-700"
-              }`}
-            >
-              {isAdminMode ? (
-                <>
-                  <UserCheck className="h-4 w-4" />
-                  사용자 메뉴로 전환
-                </>
-              ) : (
-                <>
-                  <Shield className="h-4 w-4" />
-                  관리자 메뉴로 전환
-                </>
-              )}
-            </Button>
-
-            {/* WACE 관리자 전용: 회사 선택 버튼 */}
-            {(user as ExtendedUserInfo)?.userType === "SUPER_ADMIN" && (
+          {((user as ExtendedUserInfo)?.userType === "SUPER_ADMIN" ||
+            (user as ExtendedUserInfo)?.userType === "COMPANY_ADMIN" ||
+            (user as ExtendedUserInfo)?.userType === "admin") && (
+            <div className="border-border space-y-2 border-b p-3">
               <Button
-                onClick={() => { console.log("🔴 회사 선택 버튼 클릭!"); setShowCompanySwitcher(true); }}
-                className="flex w-full items-center justify-center gap-2 rounded-lg border border-purple-200 bg-purple-50 px-3 py-2 text-sm font-medium text-purple-700 transition-colors duration-200 hover:cursor-pointer hover:bg-purple-100"
+                onClick={handleModeSwitch}
+                className={`flex w-full items-center justify-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors duration-150 hover:cursor-pointer ${
+                  isAdminMode
+                    ? "border border-amber-200 bg-amber-50 text-amber-700 hover:bg-amber-100 dark:border-amber-800 dark:bg-amber-950 dark:text-amber-400"
+                    : "border-primary/20 bg-primary/5 text-primary hover:bg-primary/10 border"
+                }`}
               >
-                <Building2 className="h-4 w-4" />
-                회사 선택
+                {isAdminMode ? (
+                  <>
+                    <UserCheck className="h-4 w-4" />
+                    사용자 메뉴로 전환
+                  </>
+                ) : (
+                  <>
+                    <Shield className="h-4 w-4" />
+                    관리자 메뉴로 전환
+                  </>
+                )}
               </Button>
-            )}
+
+              {(user as ExtendedUserInfo)?.userType === "SUPER_ADMIN" && (
+                <Button
+                  onClick={() => {
+                    console.log("🔴 회사 선택 버튼 클릭!");
+                    setShowCompanySwitcher(true);
+                  }}
+                  className="border-primary/20 bg-primary/5 text-primary hover:bg-primary/10 flex w-full items-center justify-center gap-2 rounded-md border px-3 py-2 text-sm font-medium transition-colors duration-150 hover:cursor-pointer"
+                >
+                  <Building2 className="h-4 w-4" />
+                  회사 선택
+                </Button>
+              )}
+            </div>
+          )}
+
+          <div className="flex-1 overflow-y-auto py-4">
+            <nav className="space-y-0.5 px-3">
+              {loading ? (
+                <div className="animate-pulse space-y-2">
+                  {[...Array(5)].map((_, i) => (
+                    <div key={i} className="bg-muted h-8 rounded"></div>
+                  ))}
+                </div>
+              ) : (
+                uiMenus.map((menu) => renderMenu(menu))
+              )}
+            </nav>
           </div>
-        )}
 
-        {/* 메뉴 영역 */}
-        <div className="flex-1 overflow-y-auto py-4">
-          <nav className="space-y-1 px-3">
-            {loading ? (
-              <div className="animate-pulse space-y-2">
-                {[...Array(5)].map((_, i) => (
-                  <div key={i} className="h-8 rounded bg-slate-200"></div>
-                ))}
-              </div>
-            ) : (
-              uiMenus.map((menu) => renderMenu(menu))
-            )}
-          </nav>
-        </div>
+          <div className="border-border border-t px-3 py-1">
+            <ThemeToggle />
+          </div>
 
-        {/* 사이드바 하단 - 사용자 프로필 */}
-        <div className="border-t border-slate-200 p-3">
-          <DropdownMenu modal={false}>
-            <DropdownMenuTrigger asChild>
-              <button className="flex w-full items-center gap-3 rounded-lg px-2 py-2 text-left transition-colors hover:bg-slate-100">
-                {/* 프로필 아바타 */}
-                <div className="relative flex h-9 w-9 shrink-0 overflow-hidden rounded-full">
-                  {user.photo && user.photo.trim() !== "" && user.photo !== "null" ? (
-                    <img
-                      src={user.photo}
-                      alt={user.userName || "User"}
-                      className="aspect-square h-full w-full object-cover"
-                    />
-                  ) : (
-                    <div className="flex h-full w-full items-center justify-center rounded-full bg-slate-200 text-sm font-semibold text-slate-700">
-                      {user.userName?.substring(0, 1)?.toUpperCase() || "U"}
-                    </div>
-                  )}
-                </div>
-                {/* 사용자 정보 */}
-                <div className="min-w-0 flex-1">
-                  <p className="truncate text-sm font-medium text-slate-900">
-                    {user.userName || "사용자"}
-                  </p>
-                  <p className="truncate text-xs text-slate-500">
-                    {user.deptName || user.email || user.userId}
-                  </p>
-                </div>
-              </button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent className="w-56" align="start" side="top">
-              <DropdownMenuLabel className="font-normal">
-                <div className="flex items-center space-x-3">
-                  {/* 프로필 사진 표시 */}
-                  <div className="relative flex h-12 w-12 shrink-0 overflow-hidden rounded-full">
+          <div className="border-border bg-muted/30 border-t p-3">
+            <DropdownMenu modal={false}>
+              <DropdownMenuTrigger asChild>
+                <button className="hover:bg-accent flex w-full items-center gap-3 rounded-lg px-2 py-2 text-left transition-colors">
+                  <div className="relative flex h-9 w-9 shrink-0 overflow-hidden rounded-full">
                     {user.photo && user.photo.trim() !== "" && user.photo !== "null" ? (
                       <img
                         src={user.photo}
@@ -673,52 +649,74 @@ function AppLayoutInner({ children }: AppLayoutProps) {
                         className="aspect-square h-full w-full object-cover"
                       />
                     ) : (
-                      <div className="flex h-full w-full items-center justify-center rounded-full bg-slate-200 text-base font-semibold text-slate-700">
+                      <div className="bg-muted text-foreground flex h-full w-full items-center justify-center rounded-full text-sm font-semibold">
                         {user.userName?.substring(0, 1)?.toUpperCase() || "U"}
                       </div>
                     )}
                   </div>
-
-                  {/* 사용자 정보 */}
-                  <div className="flex flex-col space-y-1">
-                    <p className="text-sm leading-none font-medium">
-                      {user.userName || "사용자"} ({user.userId || ""})
-                    </p>
-                    <p className="text-muted-foreground text-xs leading-none font-semibold">{user.email || ""}</p>
-                    <p className="text-muted-foreground text-xs leading-none font-semibold">
-                      {user.deptName && user.positionName
-                        ? `${user.deptName}, ${user.positionName}`
-                        : user.deptName || user.positionName || "부서 정보 없음"}
+                  <div className="min-w-0 flex-1">
+                    <p className="text-foreground truncate text-sm font-medium">{user.userName || "사용자"}</p>
+                    <p className="text-muted-foreground truncate text-xs">
+                      {user.deptName || user.email || user.userId}
                     </p>
                   </div>
-                </div>
-              </DropdownMenuLabel>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem onClick={openProfileModal}>
-                <User className="mr-2 h-4 w-4" />
-                <span>프로필</span>
-              </DropdownMenuItem>
-              <DropdownMenuItem onClick={() => router.push("/admin/approvalBox")}>
-                <FileCheck className="mr-2 h-4 w-4" />
-                <span>결재함</span>
-              </DropdownMenuItem>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem onClick={handleLogout}>
-                <LogOut className="mr-2 h-4 w-4" />
-                <span>로그아웃</span>
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>
-      </aside>
+                </button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent className="w-56" align="start" side="top">
+                <DropdownMenuLabel className="font-normal">
+                  <div className="flex items-center space-x-3">
+                    <div className="relative flex h-12 w-12 shrink-0 overflow-hidden rounded-full">
+                      {user.photo && user.photo.trim() !== "" && user.photo !== "null" ? (
+                        <img
+                          src={user.photo}
+                          alt={user.userName || "User"}
+                          className="aspect-square h-full w-full object-cover"
+                        />
+                      ) : (
+                        <div className="bg-muted text-foreground flex h-full w-full items-center justify-center rounded-full text-base font-semibold">
+                          {user.userName?.substring(0, 1)?.toUpperCase() || "U"}
+                        </div>
+                      )}
+                    </div>
+                    <div className="flex flex-col space-y-1">
+                      <p className="text-sm leading-none font-medium">
+                        {user.userName || "사용자"} ({user.userId || ""})
+                      </p>
+                      <p className="text-muted-foreground text-xs leading-none font-semibold">{user.email || ""}</p>
+                      <p className="text-muted-foreground text-xs leading-none font-semibold">
+                        {user.deptName && user.positionName
+                          ? `${user.deptName}, ${user.positionName}`
+                          : user.deptName || user.positionName || "부서 정보 없음"}
+                      </p>
+                    </div>
+                  </div>
+                </DropdownMenuLabel>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem onClick={openProfileModal}>
+                  <User className="mr-2 h-4 w-4" />
+                  <span>프로필</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => router.push("/admin/approvalBox")}>
+                  <FileCheck className="mr-2 h-4 w-4" />
+                  <span>결재함</span>
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem onClick={handleLogout}>
+                  <LogOut className="mr-2 h-4 w-4" />
+                  <span>로그아웃</span>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        </aside>
 
-        {/* 가운데 컨텐츠 영역 - 스크롤 가능 */}
-        <main className={`min-w-0 flex-1 overflow-auto bg-white ${isMobile ? "h-[calc(100vh-56px)]" : "h-screen"}`}>
-          {children}
+        {/* 가운데 컨텐츠 영역 - 탭 시스템 */}
+        <main className={`flex min-w-0 flex-1 flex-col overflow-hidden bg-background ${isMobile ? "h-[calc(100vh-56px)]" : "h-screen"}`}>
+          <TabBar />
+          <TabContent />
         </main>
       </div>
 
-      {/* 프로필 수정 모달 */}
       <ProfileModal
         isOpen={isModalOpen}
         user={user}
@@ -749,7 +747,6 @@ function AppLayoutInner({ children }: AppLayoutProps) {
         onAlertClose={closeAlert}
       />
 
-      {/* 회사 전환 모달 (WACE 관리자 전용) */}
       <Dialog open={showCompanySwitcher} onOpenChange={setShowCompanySwitcher}>
         <DialogContent className="max-w-[95vw] sm:max-w-[600px]">
           <DialogHeader>
diff --git a/frontend/components/layout/EmptyDashboard.tsx b/frontend/components/layout/EmptyDashboard.tsx
new file mode 100644
index 00000000..26d27d4a
--- /dev/null
+++ b/frontend/components/layout/EmptyDashboard.tsx
@@ -0,0 +1,23 @@
+"use client";
+
+import { LayoutGrid } from "lucide-react";
+
+export function EmptyDashboard() {
+  return (
+    <div className="flex h-full items-center justify-center bg-white">
+      <div className="flex flex-col items-center gap-4 text-center">
+        <div className="flex h-20 w-20 items-center justify-center rounded-full bg-muted">
+          <LayoutGrid className="h-10 w-10 text-muted-foreground" />
+        </div>
+        <div className="space-y-2">
+          <h2 className="text-xl font-semibold text-foreground">
+            열린 탭이 없습니다
+          </h2>
+          <p className="max-w-sm text-sm text-muted-foreground">
+            왼쪽 사이드바에서 메뉴를 클릭하거나 드래그하여 탭을 추가하세요.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/components/layout/MainSidebar.tsx b/frontend/components/layout/MainSidebar.tsx
index 53c27092..10671492 100644
--- a/frontend/components/layout/MainSidebar.tsx
+++ b/frontend/components/layout/MainSidebar.tsx
@@ -82,7 +82,7 @@ export function MainSidebar({ menuList, expandedMenus, onMenuClick, className =
   return (
     <nav className={cn("space-y-1 overflow-y-auto", className)}>
       {menuList.length === 0 ? (
-        <div className="text-sm text-gray-500">{MESSAGES.NO_MENUS}</div>
+        <div className="text-sm text-muted-foreground">{MESSAGES.NO_MENUS}</div>
       ) : (
         menuList.map((menu) => renderMenuItem(menu))
       )}
diff --git a/frontend/components/layout/ProfileModal.tsx b/frontend/components/layout/ProfileModal.tsx
index a74501e0..d3e5535b 100644
--- a/frontend/components/layout/ProfileModal.tsx
+++ b/frontend/components/layout/ProfileModal.tsx
@@ -48,7 +48,7 @@ function AlertModal({ isOpen, onClose, title, message, type = "info" }: AlertMod
   const getTypeColor = () => {
     switch (type) {
       case "success":
-        return "text-green-600";
+        return "text-emerald-600";
       case "error":
         return "text-destructive";
       default:
diff --git a/frontend/components/layout/ResponsiveContainer.tsx b/frontend/components/layout/ResponsiveContainer.tsx
deleted file mode 100644
index 74cf731f..00000000
--- a/frontend/components/layout/ResponsiveContainer.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-"use client";
-
-import React from "react";
-import { useResponsive } from "@/lib/hooks/useResponsive";
-
-interface ResponsiveContainerProps {
-  children: React.ReactNode;
-  className?: string;
-  mobileClassName?: string;
-  tabletClassName?: string;
-  desktopClassName?: string;
-  breakpoint?: "sm" | "md" | "lg" | "xl" | "2xl";
-}
-
-export const ResponsiveContainer: React.FC<ResponsiveContainerProps> = ({
-  children,
-  className = "",
-  mobileClassName = "",
-  tabletClassName = "",
-  desktopClassName = "",
-  breakpoint = "md",
-}) => {
-  const { isMobile, isTablet, isDesktop } = useResponsive();
-
-  const getResponsiveClassName = () => {
-    let responsiveClass = className;
-
-    if (isMobile) {
-      responsiveClass += ` ${mobileClassName}`;
-    } else if (isTablet) {
-      responsiveClass += ` ${tabletClassName}`;
-    } else if (isDesktop) {
-      responsiveClass += ` ${desktopClassName}`;
-    }
-
-    return responsiveClass.trim();
-  };
-
-  return (
-    <div className={getResponsiveClassName()}>
-      {children}
-    </div>
-  );
-};
-
-interface ResponsiveGridProps {
-  children: React.ReactNode;
-  cols?: {
-    mobile?: number;
-    tablet?: number;
-    desktop?: number;
-  };
-  gap?: string;
-  className?: string;
-}
-
-export const ResponsiveGrid: React.FC<ResponsiveGridProps> = ({
-  children,
-  cols = { mobile: 1, tablet: 2, desktop: 3 },
-  gap = "4",
-  className = "",
-}) => {
-  const { isMobile, isTablet, isDesktop } = useResponsive();
-
-  const getGridCols = () => {
-    if (isMobile) return `grid-cols-${cols.mobile || 1}`;
-    if (isTablet) return `grid-cols-${cols.tablet || 2}`;
-    if (isDesktop) return `grid-cols-${cols.desktop || 3}`;
-    return "grid-cols-1";
-  };
-
-  return (
-    <div className={`grid ${getGridCols()} gap-${gap} ${className}`}>
-      {children}
-    </div>
-  );
-};
-
-interface ResponsiveTextProps {
-  children: React.ReactNode;
-  size?: {
-    mobile?: string;
-    tablet?: string;
-    desktop?: string;
-  };
-  className?: string;
-}
-
-export const ResponsiveText: React.FC<ResponsiveTextProps> = ({
-  children,
-  size = { mobile: "text-sm", tablet: "text-base", desktop: "text-lg" },
-  className = "",
-}) => {
-  const { isMobile, isTablet, isDesktop } = useResponsive();
-
-  const getTextSize = () => {
-    if (isMobile) return size.mobile || "text-sm";
-    if (isTablet) return size.tablet || "text-base";
-    if (isDesktop) return size.desktop || "text-lg";
-    return "text-base";
-  };
-
-  return (
-    <div className={`${getTextSize()} ${className}`}>
-      {children}
-    </div>
-  );
-};
diff --git a/frontend/components/layout/TabBar.tsx b/frontend/components/layout/TabBar.tsx
new file mode 100644
index 00000000..e86ada2e
--- /dev/null
+++ b/frontend/components/layout/TabBar.tsx
@@ -0,0 +1,698 @@
+"use client";
+
+import React, { useRef, useState, useEffect, useLayoutEffect, useCallback } from "react";
+import { X, RotateCw, ChevronDown } from "lucide-react";
+import { useTabStore, selectTabs, selectActiveTabId, Tab } from "@/stores/tabStore";
+import { menuScreenApi } from "@/lib/api/screen";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { cn } from "@/lib/utils";
+
+const TAB_WIDTH = 180;
+const TAB_GAP = 2;
+const TAB_UNIT = TAB_WIDTH + TAB_GAP;
+const OVERFLOW_BTN_WIDTH = 48;
+const DRAG_THRESHOLD = 5;
+const SETTLE_MS = 70;
+const DROP_SETTLE_MS = 180;
+const BAR_PAD_X = 8;
+
+interface DragState {
+  tabId: string;
+  pointerId: number;
+  startX: number;
+  currentX: number;
+  tabRect: DOMRect;
+  fromIndex: number;
+  targetIndex: number;
+  activated: boolean;
+  settling: boolean;
+}
+
+interface DropGhost {
+  title: string;
+  startX: number;
+  startY: number;
+  targetIdx: number;
+  tabCountAtCreation: number;
+}
+
+export function TabBar() {
+  const tabs = useTabStore(selectTabs);
+  const activeTabId = useTabStore(selectActiveTabId);
+  const {
+    switchTab,
+    closeTab,
+    refreshTab,
+    closeOtherTabs,
+    closeTabsToLeft,
+    closeTabsToRight,
+    closeAllTabs,
+    updateTabOrder,
+    openTab,
+  } = useTabStore();
+
+  // --- Refs ---
+  const containerRef = useRef<HTMLDivElement>(null);
+  const settleTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const dragActiveRef = useRef(false);
+  const dragLeaveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const dropGhostRef = useRef<HTMLDivElement>(null);
+  const prevTabCountRef = useRef(tabs.length);
+
+  // --- State ---
+  const [visibleCount, setVisibleCount] = useState(tabs.length);
+  const [contextMenu, setContextMenu] = useState<{
+    x: number;
+    y: number;
+    tabId: string;
+  } | null>(null);
+  const [dragState, setDragState] = useState<DragState | null>(null);
+  const [externalDragIdx, setExternalDragIdx] = useState<number | null>(null);
+  const [dropGhost, setDropGhost] = useState<DropGhost | null>(null);
+
+  dragActiveRef.current = !!dragState;
+
+  // --- 타이머 정리 ---
+  useEffect(() => {
+    return () => {
+      if (settleTimer.current) clearTimeout(settleTimer.current);
+      if (dragLeaveTimerRef.current) clearTimeout(dragLeaveTimerRef.current);
+    };
+  }, []);
+
+  // --- 드롭 고스트: Web Animations API로 드롭 위치 → 목표 슬롯 이동 ---
+  useEffect(() => {
+    if (!dropGhost) return;
+    const el = dropGhostRef.current;
+    const bar = containerRef.current?.getBoundingClientRect();
+    if (!el || !bar) return;
+
+    const targetX = bar.left + BAR_PAD_X + dropGhost.targetIdx * TAB_UNIT;
+    const targetY = bar.bottom - 28;
+    const dx = dropGhost.startX - targetX;
+    const dy = dropGhost.startY - targetY;
+
+    const anim = el.animate(
+      [
+        { transform: `translate(${dx}px, ${dy}px)`, opacity: 0.85 },
+        { transform: "translate(0, 0)", opacity: 1 },
+      ],
+      {
+        duration: DROP_SETTLE_MS,
+        easing: "cubic-bezier(0.25, 1, 0.5, 1)",
+        fill: "forwards",
+      },
+    );
+
+    anim.onfinish = () => {
+      setDropGhost(null);
+      setExternalDragIdx(null);
+    };
+
+    const safety = setTimeout(() => {
+      setDropGhost(null);
+      setExternalDragIdx(null);
+    }, DROP_SETTLE_MS + 500);
+
+    return () => {
+      anim.cancel();
+      clearTimeout(safety);
+    };
+  }, [dropGhost]);
+
+  // --- 오버플로우 계산 (드래그 중 재계산 방지) ---
+  const recalcVisible = useCallback(() => {
+    if (dragActiveRef.current) return;
+    if (!containerRef.current) return;
+    const w = containerRef.current.clientWidth;
+    setVisibleCount(Math.max(1, Math.floor((w - OVERFLOW_BTN_WIDTH) / TAB_UNIT)));
+  }, []);
+
+  useEffect(() => {
+    recalcVisible();
+    const obs = new ResizeObserver(recalcVisible);
+    if (containerRef.current) obs.observe(containerRef.current);
+    return () => obs.disconnect();
+  }, [recalcVisible]);
+
+  useLayoutEffect(() => {
+    recalcVisible();
+  }, [tabs.length, recalcVisible]);
+
+  const visibleTabs = tabs.slice(0, visibleCount);
+  const overflowTabs = tabs.slice(visibleCount);
+  const hasOverflow = overflowTabs.length > 0;
+
+  const activeInOverflow = activeTabId && overflowTabs.some((t) => t.id === activeTabId);
+  let displayVisible = visibleTabs;
+  let displayOverflow = overflowTabs;
+
+  if (activeInOverflow && activeTabId) {
+    const activeTab = tabs.find((t) => t.id === activeTabId)!;
+    displayVisible = [...visibleTabs.slice(0, -1), activeTab];
+    displayOverflow = overflowTabs.filter((t) => t.id !== activeTabId);
+    if (visibleTabs.length > 0) {
+      displayOverflow = [visibleTabs[visibleTabs.length - 1], ...displayOverflow];
+    }
+  }
+
+  // ============================================================
+  // 사이드바 -> 탭 바 드롭 (네이티브 DnD + 삽입 위치 애니메이션)
+  // ============================================================
+
+  useLayoutEffect(() => {
+    if (tabs.length !== prevTabCountRef.current && externalDragIdx !== null) {
+      setExternalDragIdx(null);
+    }
+    prevTabCountRef.current = tabs.length;
+  }, [tabs.length, externalDragIdx]);
+
+  const resolveMenuAndOpenTab = async (
+    menuName: string,
+    menuObjid: string | number,
+    url: string,
+    insertIndex?: number,
+  ) => {
+    const numericObjid = typeof menuObjid === "string" ? parseInt(menuObjid) : menuObjid;
+    try {
+      const screens = await menuScreenApi.getScreensByMenu(numericObjid);
+      if (screens.length > 0) {
+        openTab(
+          { type: "screen", title: menuName, screenId: screens[0].screenId, menuObjid: numericObjid },
+          insertIndex,
+        );
+        return;
+      }
+    } catch {
+      /* ignore */
+    }
+    if (url && url !== "#") {
+      openTab({ type: "admin", title: menuName, adminUrl: url }, insertIndex);
+    } else {
+      setExternalDragIdx(null);
+    }
+  };
+
+  const handleBarDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "copy";
+    if (dragLeaveTimerRef.current) {
+      clearTimeout(dragLeaveTimerRef.current);
+      dragLeaveTimerRef.current = null;
+    }
+    const bar = containerRef.current?.getBoundingClientRect();
+    if (bar) {
+      const idx = Math.max(
+        0,
+        Math.min(Math.round((e.clientX - bar.left - BAR_PAD_X) / TAB_UNIT), displayVisible.length),
+      );
+      setExternalDragIdx(idx);
+    }
+  };
+
+  const handleBarDragLeave = (e: React.DragEvent) => {
+    if (!containerRef.current?.contains(e.relatedTarget as Node)) {
+      dragLeaveTimerRef.current = setTimeout(() => {
+        setExternalDragIdx(null);
+        dragLeaveTimerRef.current = null;
+      }, 50);
+    }
+  };
+
+  const createDropGhost = (e: React.DragEvent, title: string, targetIdx: number) => {
+    setDropGhost({
+      title,
+      startX: e.clientX - TAB_WIDTH / 2,
+      startY: e.clientY - 14,
+      targetIdx,
+      tabCountAtCreation: tabs.length,
+    });
+  };
+
+  const handleBarDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    if (dragLeaveTimerRef.current) {
+      clearTimeout(dragLeaveTimerRef.current);
+      dragLeaveTimerRef.current = null;
+    }
+    const insertIdx = externalDragIdx ?? undefined;
+    const ghostIdx = insertIdx ?? displayVisible.length;
+
+    const pending = e.dataTransfer.getData("application/tab-menu-pending");
+    if (pending) {
+      try {
+        const { menuName, menuObjid, url } = JSON.parse(pending);
+        createDropGhost(e, menuName, ghostIdx);
+        resolveMenuAndOpenTab(menuName, menuObjid, url, insertIdx);
+      } catch {
+        setExternalDragIdx(null);
+      }
+      return;
+    }
+    const menuData = e.dataTransfer.getData("application/tab-menu");
+    if (menuData && menuData.length > 2) {
+      try {
+        const parsed = JSON.parse(menuData);
+        createDropGhost(e, parsed.title || "새 탭", ghostIdx);
+        setExternalDragIdx(null);
+        openTab(parsed, insertIdx);
+      } catch {
+        setExternalDragIdx(null);
+      }
+    } else {
+      setExternalDragIdx(null);
+    }
+  };
+
+  // ============================================================
+  // 탭 드래그 (Pointer Events) - 임계값 + settling 애니메이션
+  // ============================================================
+
+  const calcTarget = useCallback(
+    (clientX: number, startX: number, fromIndex: number): number => {
+      const delta = Math.round((clientX - startX) / TAB_UNIT);
+      return Math.max(0, Math.min(fromIndex + delta, displayVisible.length - 1));
+    },
+    [displayVisible.length],
+  );
+
+  const handlePointerDown = (e: React.PointerEvent, tabId: string, idx: number) => {
+    if ((e.target as HTMLElement).closest("button")) return;
+    if (dragState?.settling) return;
+
+    if (settleTimer.current) {
+      clearTimeout(settleTimer.current);
+      settleTimer.current = null;
+    }
+
+    e.preventDefault();
+    (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+
+    setDragState({
+      tabId,
+      pointerId: e.pointerId,
+      startX: e.clientX,
+      currentX: e.clientX,
+      tabRect: (e.currentTarget as HTMLElement).getBoundingClientRect(),
+      fromIndex: idx,
+      targetIndex: idx,
+      activated: false,
+      settling: false,
+    });
+  };
+
+  const handlePointerMove = useCallback(
+    (e: React.PointerEvent) => {
+      if (!dragState || dragState.settling) return;
+      if (e.pointerId !== dragState.pointerId) return;
+      const bar = containerRef.current?.getBoundingClientRect();
+      if (!bar) return;
+
+      const clampedX = Math.max(bar.left, Math.min(e.clientX, bar.right));
+
+      if (!dragState.activated) {
+        if (Math.abs(clampedX - dragState.startX) < DRAG_THRESHOLD) return;
+        setDragState((p) =>
+          p
+            ? {
+                ...p,
+                activated: true,
+                currentX: clampedX,
+                targetIndex: calcTarget(clampedX, p.startX, p.fromIndex),
+              }
+            : null,
+        );
+        return;
+      }
+
+      setDragState((p) =>
+        p ? { ...p, currentX: clampedX, targetIndex: calcTarget(clampedX, p.startX, p.fromIndex) } : null,
+      );
+    },
+    [dragState, calcTarget],
+  );
+
+  const handlePointerUp = useCallback(
+    (e: React.PointerEvent) => {
+      if (!dragState || dragState.settling) return;
+      if (e.pointerId !== dragState.pointerId) return;
+      (e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId);
+
+      if (!dragState.activated) {
+        switchTab(dragState.tabId);
+        setDragState(null);
+        return;
+      }
+
+      const { fromIndex, targetIndex, tabId } = dragState;
+
+      setDragState((p) => (p ? { ...p, settling: true } : null));
+
+      if (targetIndex === fromIndex) {
+        settleTimer.current = setTimeout(() => setDragState(null), SETTLE_MS + 10);
+        return;
+      }
+
+      const actualFrom = tabs.findIndex((t) => t.id === tabId);
+      const tgtTab = displayVisible[targetIndex];
+      const actualTo = tgtTab ? tabs.findIndex((t) => t.id === tgtTab.id) : actualFrom;
+
+      settleTimer.current = setTimeout(() => {
+        setDragState(null);
+        if (actualFrom !== -1 && actualTo !== -1 && actualFrom !== actualTo) {
+          updateTabOrder(actualFrom, actualTo);
+        }
+      }, SETTLE_MS + 10);
+    },
+    [dragState, tabs, displayVisible, switchTab, updateTabOrder],
+  );
+
+  const handleLostPointerCapture = useCallback(() => {
+    if (dragState && !dragState.settling) {
+      setDragState(null);
+      if (settleTimer.current) {
+        clearTimeout(settleTimer.current);
+        settleTimer.current = null;
+      }
+    }
+  }, [dragState]);
+
+  // ============================================================
+  // 스타일 계산
+  // ============================================================
+
+  const getTabAnimStyle = (tabId: string, index: number): React.CSSProperties => {
+    if (externalDragIdx !== null && !dragState) {
+      return {
+        transform: index >= externalDragIdx ? `translateX(${TAB_UNIT}px)` : "none",
+        transition: `transform ${DROP_SETTLE_MS}ms cubic-bezier(0.25, 1, 0.5, 1)`,
+      };
+    }
+
+    if (!dragState || !dragState.activated) return {};
+
+    const { fromIndex, targetIndex, tabId: draggedId } = dragState;
+
+    if (tabId === draggedId) {
+      return { opacity: 0, transition: "none" };
+    }
+
+    let shift = 0;
+    if (fromIndex < targetIndex) {
+      if (index > fromIndex && index <= targetIndex) shift = -TAB_UNIT;
+    } else if (fromIndex > targetIndex) {
+      if (index >= targetIndex && index < fromIndex) shift = TAB_UNIT;
+    }
+
+    return {
+      transform: shift !== 0 ? `translateX(${shift}px)` : "none",
+      transition: `transform ${SETTLE_MS}ms cubic-bezier(0.25, 1, 0.5, 1)`,
+    };
+  };
+
+  const getGhostStyle = (): React.CSSProperties | null => {
+    if (!dragState || !dragState.activated) return null;
+    const bar = containerRef.current?.getBoundingClientRect();
+    if (!bar) return null;
+
+    const base: React.CSSProperties = {
+      position: "fixed",
+      top: dragState.tabRect.top,
+      width: TAB_WIDTH,
+      height: dragState.tabRect.height,
+      zIndex: 100,
+      pointerEvents: "none",
+      opacity: 0.9,
+    };
+
+    if (dragState.settling) {
+      return {
+        ...base,
+        left: bar.left + BAR_PAD_X + dragState.targetIndex * TAB_UNIT,
+        opacity: 1,
+        boxShadow: "none",
+        transition: `left ${SETTLE_MS}ms cubic-bezier(0.25, 1, 0.5, 1), box-shadow 80ms ease-out`,
+      };
+    }
+
+    const offsetX = dragState.currentX - dragState.startX;
+    const rawLeft = dragState.tabRect.left + offsetX;
+    return {
+      ...base,
+      left: Math.max(bar.left, Math.min(rawLeft, bar.right - TAB_WIDTH)),
+      transition: "none",
+    };
+  };
+
+  const ghostStyle = getGhostStyle();
+  const draggedTab = dragState ? tabs.find((t) => t.id === dragState.tabId) : null;
+
+  // ============================================================
+  // 우클릭 컨텍스트 메뉴
+  // ============================================================
+
+  const handleContextMenu = (e: React.MouseEvent, tabId: string) => {
+    e.preventDefault();
+    setContextMenu({ x: e.clientX, y: e.clientY, tabId });
+  };
+
+  useEffect(() => {
+    if (!contextMenu) return;
+    const close = () => setContextMenu(null);
+    window.addEventListener("click", close);
+    window.addEventListener("scroll", close);
+    return () => {
+      window.removeEventListener("click", close);
+      window.removeEventListener("scroll", close);
+    };
+  }, [contextMenu]);
+
+  // ============================================================
+  // 렌더링
+  // ============================================================
+
+  const renderTab = (tab: Tab, displayIndex: number) => {
+    const isActive = tab.id === activeTabId;
+    const animStyle = getTabAnimStyle(tab.id, displayIndex);
+    const hiddenByGhost =
+      !!dropGhost && displayIndex === dropGhost.targetIdx && tabs.length > dropGhost.tabCountAtCreation;
+
+    return (
+      <div
+        key={tab.id}
+        onPointerDown={(e) => handlePointerDown(e, tab.id, displayIndex)}
+        onPointerMove={handlePointerMove}
+        onPointerUp={handlePointerUp}
+        onLostPointerCapture={handleLostPointerCapture}
+        onContextMenu={(e) => handleContextMenu(e, tab.id)}
+        className={cn(
+          "group relative flex h-7 shrink-0 cursor-pointer items-center gap-0.5 rounded-t-md border border-b-0 px-3 select-none",
+          isActive
+            ? "text-foreground z-10 -mb-px h-[30px] bg-white"
+            : "bg-muted/50 text-muted-foreground hover:bg-muted hover:text-foreground border-transparent",
+        )}
+        style={{
+          width: TAB_WIDTH,
+          touchAction: "none",
+          ...animStyle,
+          ...(hiddenByGhost ? { opacity: 0 } : {}),
+          ...(isActive ? {} : {}),
+        }}
+        title={tab.title}
+      >
+        <span className="min-w-0 flex-1 truncate text-[11px] font-medium">{tab.title}</span>
+
+        <div className="flex shrink-0 items-center">
+          {isActive && (
+            <button
+              onClick={(e) => {
+                e.stopPropagation();
+                refreshTab(tab.id);
+              }}
+              className="text-muted-foreground hover:bg-accent hover:text-foreground flex h-4 w-4 items-center justify-center rounded-sm transition-colors"
+            >
+              <RotateCw className="h-2.5 w-2.5" />
+            </button>
+          )}
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              closeTab(tab.id);
+            }}
+            className={cn(
+              "text-muted-foreground hover:bg-destructive/10 hover:text-destructive flex h-4 w-4 items-center justify-center rounded-sm transition-colors",
+              !isActive && "opacity-0 group-hover:opacity-100",
+            )}
+          >
+            <X className="h-2.5 w-2.5" />
+          </button>
+        </div>
+      </div>
+    );
+  };
+
+  if (tabs.length === 0) return null;
+
+  return (
+    <>
+      <div
+        ref={containerRef}
+        className="border-border bg-background relative flex h-[33px] shrink-0 items-end gap-[2px] overflow-hidden px-1.5"
+        onDragOver={handleBarDragOver}
+        onDragLeave={handleBarDragLeave}
+        onDrop={handleBarDrop}
+      >
+        <div className="border-border pointer-events-none absolute inset-x-0 bottom-0 z-0 border-b" />
+        <div className="pointer-events-none absolute inset-0 z-5" />
+        {displayVisible.map((tab, i) => renderTab(tab, i))}
+
+        {hasOverflow && (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <button className="bg-muted/50 text-muted-foreground hover:bg-muted hover:text-foreground flex h-7 shrink-0 items-center gap-0.5 rounded-t-md border border-b-0 border-transparent px-2 text-[11px] font-medium transition-colors">
+                +{displayOverflow.length}
+                <ChevronDown className="h-2.5 w-2.5" />
+              </button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="max-h-[300px] overflow-y-auto">
+              {displayOverflow.map((tab) => (
+                <DropdownMenuItem
+                  key={tab.id}
+                  onClick={() => switchTab(tab.id)}
+                  className="flex items-center justify-between gap-2"
+                >
+                  <span className="min-w-0 flex-1 truncate text-xs">{tab.title}</span>
+                  <button
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      closeTab(tab.id);
+                    }}
+                    className="hover:bg-destructive/10 hover:text-destructive flex h-4 w-4 shrink-0 items-center justify-center rounded-sm"
+                  >
+                    <X className="h-3 w-3" />
+                  </button>
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        )}
+      </div>
+
+      {/* 탭 드래그 고스트 (내부 재정렬) */}
+      {ghostStyle && draggedTab && (
+        <div
+          style={ghostStyle}
+          className="border-primary/50 bg-background rounded-t-md border border-b-0 px-3"
+        >
+          <div className="flex h-full items-center">
+            <span className="truncate text-[11px] font-medium">{draggedTab.title}</span>
+          </div>
+        </div>
+      )}
+
+      {/* 사이드바 드롭 고스트 (드롭 지점 → 탭 슬롯 이동) */}
+      {dropGhost &&
+        (() => {
+          const bar = containerRef.current?.getBoundingClientRect();
+          if (!bar) return null;
+
+          const targetX = bar.left + BAR_PAD_X + dropGhost.targetIdx * TAB_UNIT;
+          const targetY = bar.bottom - 28;
+
+          return (
+            <div
+              ref={dropGhostRef}
+              style={{
+                position: "fixed",
+                left: targetX,
+                top: targetY,
+                width: TAB_WIDTH,
+                height: 28,
+                zIndex: 100,
+                pointerEvents: "none",
+              }}
+              className="border-border bg-background rounded-t-md border border-b-0 px-3"
+            >
+              <div className="flex h-full items-center">
+                <span className="truncate text-[11px] font-medium">{dropGhost.title}</span>
+              </div>
+            </div>
+          );
+        })()}
+
+      {/* 우클릭 컨텍스트 메뉴 */}
+      {contextMenu && (
+        <div
+          className="border-border bg-popover fixed z-50 min-w-[180px] rounded-md border p-1 shadow-md"
+          style={{ left: contextMenu.x, top: contextMenu.y }}
+        >
+          <ContextMenuItem
+            label="새로고침"
+            onClick={() => {
+              refreshTab(contextMenu.tabId);
+              setContextMenu(null);
+            }}
+          />
+          <div className="bg-border my-1 h-px" />
+          <ContextMenuItem
+            label="왼쪽 탭 닫기"
+            onClick={() => {
+              closeTabsToLeft(contextMenu.tabId);
+              setContextMenu(null);
+            }}
+          />
+          <ContextMenuItem
+            label="오른쪽 탭 닫기"
+            onClick={() => {
+              closeTabsToRight(contextMenu.tabId);
+              setContextMenu(null);
+            }}
+          />
+          <ContextMenuItem
+            label="다른 탭 모두 닫기"
+            onClick={() => {
+              closeOtherTabs(contextMenu.tabId);
+              setContextMenu(null);
+            }}
+          />
+          <div className="bg-border my-1 h-px" />
+          <ContextMenuItem
+            label="모든 탭 닫기"
+            onClick={() => {
+              closeAllTabs();
+              setContextMenu(null);
+            }}
+            destructive
+          />
+        </div>
+      )}
+    </>
+  );
+}
+
+function ContextMenuItem({
+  label,
+  onClick,
+  destructive,
+}: {
+  label: string;
+  onClick: () => void;
+  destructive?: boolean;
+}) {
+  return (
+    <button
+      onClick={onClick}
+      className={cn(
+        "flex w-full items-center rounded-sm px-2 py-1.5 text-xs transition-colors",
+        destructive ? "text-destructive hover:bg-destructive/10" : "text-foreground hover:bg-accent",
+      )}
+    >
+      {label}
+    </button>
+  );
+}
diff --git a/frontend/components/layout/TabContent.tsx b/frontend/components/layout/TabContent.tsx
new file mode 100644
index 00000000..0c1fabfb
--- /dev/null
+++ b/frontend/components/layout/TabContent.tsx
@@ -0,0 +1,248 @@
+"use client";
+
+import React, { useRef, useEffect, useCallback } from "react";
+import { useTabStore, selectTabs, selectActiveTabId } from "@/stores/tabStore";
+import { ScreenViewPageWrapper } from "@/app/(main)/screens/[screenId]/page";
+import { AdminPageRenderer } from "./AdminPageRenderer";
+import { EmptyDashboard } from "./EmptyDashboard";
+import { TabIdProvider } from "@/contexts/TabIdContext";
+import { registerModalPortal } from "@/lib/modalPortalRef";
+import ScreenModal from "@/components/common/ScreenModal";
+import {
+  saveTabCacheImmediate,
+  loadTabCache,
+  captureAllScrollPositions,
+  restoreAllScrollPositions,
+  getElementPath,
+  captureFormState,
+  restoreFormState,
+  clearTabCache,
+} from "@/lib/tabStateCache";
+
+export function TabContent() {
+  const tabs = useTabStore(selectTabs);
+  const activeTabId = useTabStore(selectActiveTabId);
+  const refreshKeys = useTabStore((s) => s.refreshKeys);
+
+  // 한 번이라도 활성화된 탭만 마운트 (지연 마운트)
+  const mountedTabIdsRef = useRef<Set<string>>(new Set());
+
+  // 각 탭의 스크롤 컨테이너 ref
+  const scrollRefsMap = useRef<Map<string, HTMLDivElement | null>>(new Map());
+
+  // 이전 활성 탭 ID 추적
+  const prevActiveTabIdRef = useRef<string | null>(null);
+
+  // 활성 탭의 스크롤 위치를 실시간 추적 (display:none 전에 캡처하기 위함)
+  // Map<tabId, Map<elementPath, {top, left}>> - 탭 내 여러 스크롤 영역을 각각 추적
+  const lastScrollMapRef = useRef<Map<string, Map<string, { top: number; left: number }>>>(new Map());
+  // 요소 → 경로 캐시 (매 스크롤 이벤트마다 경로를 재계산하지 않기 위함)
+  const pathCacheRef = useRef<WeakMap<HTMLElement, string | null>>(new WeakMap());
+
+  if (activeTabId) {
+    mountedTabIdsRef.current.add(activeTabId);
+  }
+
+  // 활성 탭의 scroll 이벤트를 감지하여 요소별 위치를 실시간 저장
+  useEffect(() => {
+    if (!activeTabId) return;
+
+    const container = scrollRefsMap.current.get(activeTabId);
+    if (!container) return;
+
+    const handleScroll = (e: Event) => {
+      const target = e.target as HTMLElement;
+
+      let path = pathCacheRef.current.get(target);
+      if (path === undefined) {
+        path = getElementPath(target, container);
+        pathCacheRef.current.set(target, path);
+      }
+      if (path === null) return;
+
+      let tabMap = lastScrollMapRef.current.get(activeTabId);
+      if (!tabMap) {
+        tabMap = new Map();
+        lastScrollMapRef.current.set(activeTabId, tabMap);
+      }
+
+      if (target.scrollTop > 0 || target.scrollLeft > 0) {
+        tabMap.set(path, { top: target.scrollTop, left: target.scrollLeft });
+      } else {
+        tabMap.delete(path);
+      }
+    };
+
+    container.addEventListener("scroll", handleScroll, true);
+    return () => container.removeEventListener("scroll", handleScroll, true);
+  }, [activeTabId]);
+
+  // 복원 관련 cleanup ref
+  const scrollRestoreCleanupRef = useRef<(() => void) | null>(null);
+  const formRestoreCleanupRef = useRef<(() => void) | null>(null);
+
+  // 탭 전환 시: 이전 탭 상태 캐싱, 새 탭 상태 복원
+  useEffect(() => {
+    // 이전 복원 작업 취소
+    if (scrollRestoreCleanupRef.current) {
+      scrollRestoreCleanupRef.current();
+      scrollRestoreCleanupRef.current = null;
+    }
+    if (formRestoreCleanupRef.current) {
+      formRestoreCleanupRef.current();
+      formRestoreCleanupRef.current = null;
+    }
+
+    const prevId = prevActiveTabIdRef.current;
+
+    // 이전 활성 탭의 스크롤 + 폼 상태 저장
+    // 키를 항상 포함하여 이전 캐시의 오래된 값이 병합으로 살아남지 않도록 함
+    if (prevId && prevId !== activeTabId) {
+      const tabMap = lastScrollMapRef.current.get(prevId);
+      const scrollPositions =
+        tabMap && tabMap.size > 0
+          ? Array.from(tabMap.entries()).map(([path, pos]) => ({ path, ...pos }))
+          : undefined;
+      const prevEl = scrollRefsMap.current.get(prevId);
+      const formFields = captureFormState(prevEl ?? null);
+      saveTabCacheImmediate(prevId, {
+        scrollPositions,
+        domFormFields: formFields ?? undefined,
+      });
+    }
+
+    // 새 활성 탭의 스크롤 + 폼 상태 복원
+    if (activeTabId) {
+      const cache = loadTabCache(activeTabId);
+      if (cache) {
+        const el = scrollRefsMap.current.get(activeTabId);
+        if (cache.scrollPositions) {
+          const cleanup = restoreAllScrollPositions(el ?? null, cache.scrollPositions);
+          if (cleanup) scrollRestoreCleanupRef.current = cleanup;
+        }
+        if (cache.domFormFields) {
+          const cleanup = restoreFormState(el ?? null, cache.domFormFields ?? null);
+          if (cleanup) formRestoreCleanupRef.current = cleanup;
+        }
+      }
+    }
+
+    prevActiveTabIdRef.current = activeTabId;
+  }, [activeTabId]);
+
+  // F5 새로고침 직전에 활성 탭의 스크롤/폼 상태를 저장
+  useEffect(() => {
+    const handleBeforeUnload = () => {
+      const currentActiveId = prevActiveTabIdRef.current;
+      if (!currentActiveId) return;
+
+      const el = scrollRefsMap.current.get(currentActiveId);
+      // 활성 탭은 display:block이므로 DOM에서 직접 캡처 (가장 정확)
+      const scrollPositions = captureAllScrollPositions(el ?? null);
+      // DOM 캡처 실패 시 실시간 추적 데이터 fallback
+      const tabMap = lastScrollMapRef.current.get(currentActiveId);
+      const trackedPositions =
+        !scrollPositions && tabMap && tabMap.size > 0
+          ? Array.from(tabMap.entries()).map(([path, pos]) => ({ path, ...pos }))
+          : undefined;
+
+      const finalPositions = scrollPositions || trackedPositions;
+      const formFields = captureFormState(el ?? null);
+      saveTabCacheImmediate(currentActiveId, {
+        scrollPositions: finalPositions,
+        domFormFields: formFields ?? undefined,
+      });
+    };
+
+    window.addEventListener("beforeunload", handleBeforeUnload);
+    return () => {
+      window.removeEventListener("beforeunload", handleBeforeUnload);
+      if (scrollRestoreCleanupRef.current) scrollRestoreCleanupRef.current();
+      if (formRestoreCleanupRef.current) formRestoreCleanupRef.current();
+    };
+  }, []);
+
+  // 탭 닫기 시 캐시 정리 (tabs 배열 변화 감지)
+  useEffect(() => {
+    const currentTabIds = new Set(tabs.map((t) => t.id));
+    const mountedIds = mountedTabIdsRef.current;
+
+    mountedIds.forEach((id) => {
+      if (!currentTabIds.has(id)) {
+        clearTabCache(id);
+        scrollRefsMap.current.delete(id);
+        mountedIds.delete(id);
+      }
+    });
+  }, [tabs]);
+
+  const setScrollRef = useCallback((tabId: string, el: HTMLDivElement | null) => {
+    scrollRefsMap.current.set(tabId, el);
+  }, []);
+
+  // 포탈 컨테이너 ref callback: 전역 레퍼런스에 등록
+  const portalRefCallback = useCallback((el: HTMLDivElement | null) => {
+    registerModalPortal(el);
+  }, []);
+
+  if (tabs.length === 0) {
+    return <EmptyDashboard />;
+  }
+
+  const tabLookup = new Map(tabs.map((t) => [t.id, t]));
+  const stableIds = Array.from(mountedTabIdsRef.current);
+
+  return (
+    <div ref={portalRefCallback} className="relative min-h-0 flex-1 overflow-hidden">
+      {stableIds.map((tabId) => {
+        const tab = tabLookup.get(tabId);
+        if (!tab) return null;
+
+        const isActive = tab.id === activeTabId;
+        const refreshKey = refreshKeys[tab.id] || 0;
+
+        return (
+          <div
+            key={tab.id}
+            ref={(el) => setScrollRef(tab.id, el)}
+            className="absolute inset-0 overflow-hidden"
+            style={{ display: isActive ? "block" : "none" }}
+          >
+            <TabIdProvider value={tab.id}>
+              <TabPageRenderer tab={tab} refreshKey={refreshKey} />
+              <ScreenModal key={`modal-${tab.id}-${refreshKey}`} />
+            </TabIdProvider>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+function TabPageRenderer({
+  tab,
+  refreshKey,
+}: {
+  tab: { id: string; type: string; screenId?: number; menuObjid?: number; adminUrl?: string };
+  refreshKey: number;
+}) {
+  if (tab.type === "screen" && tab.screenId != null) {
+    return (
+      <ScreenViewPageWrapper
+        key={`${tab.id}-${refreshKey}`}
+        screenIdProp={tab.screenId}
+        menuObjidProp={tab.menuObjid}
+      />
+    );
+  }
+
+  if (tab.type === "admin" && tab.adminUrl) {
+    return (
+      <div key={`${tab.id}-${refreshKey}`} className="h-full">
+        <AdminPageRenderer url={tab.adminUrl} />
+      </div>
+    );
+  }
+
+  return null;
+}
diff --git a/frontend/components/layout/ThemeToggle.tsx b/frontend/components/layout/ThemeToggle.tsx
new file mode 100644
index 00000000..b6ea71be
--- /dev/null
+++ b/frontend/components/layout/ThemeToggle.tsx
@@ -0,0 +1,42 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
+import { Moon, Sun } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+interface ThemeToggleProps {
+  collapsed?: boolean;
+}
+
+export function ThemeToggle({ collapsed = false }: ThemeToggleProps) {
+  const { theme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return (
+      <Button variant="ghost" size={collapsed ? "icon" : "default"} className="w-full justify-start gap-2 opacity-0">
+        <Sun className="h-4 w-4" />
+      </Button>
+    );
+  }
+
+  const isDark = theme === "dark";
+
+  return (
+    <Button
+      variant="ghost"
+      size={collapsed ? "icon" : "default"}
+      onClick={() => setTheme(isDark ? "light" : "dark")}
+      className="w-full justify-start gap-2 text-sm"
+      title={isDark ? "라이트 모드" : "다크 모드"}
+    >
+      {isDark ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
+      {!collapsed && (isDark ? "라이트 모드" : "다크 모드")}
+    </Button>
+  );
+}
diff --git a/frontend/components/mail/ConfirmDeleteModal.tsx b/frontend/components/mail/ConfirmDeleteModal.tsx
index 7c582834..4b69c6f7 100644
--- a/frontend/components/mail/ConfirmDeleteModal.tsx
+++ b/frontend/components/mail/ConfirmDeleteModal.tsx
@@ -30,49 +30,49 @@ export default function ConfirmDeleteModal({
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
-      <div className="bg-white rounded-xl shadow-2xl max-w-md w-full">
+      <div className="bg-background rounded-lg shadow-lg border max-w-[95vw] sm:max-w-[500px] w-full">
         {/* 헤더 */}
-        <div className="bg-gradient-to-r from-red-500 to-red-600 px-6 py-4 flex items-center justify-between rounded-t-xl">
-          <div className="flex items-center gap-3">
-            <AlertTriangle className="w-6 h-6 text-white" />
-            <h2 className="text-xl font-bold text-white">{title}</h2>
+        <div className="flex items-center justify-between px-6 py-4 border-b">
+          <div className="flex items-center gap-2">
+            <AlertTriangle className="w-5 h-5 text-destructive" />
+            <h2 className="text-base sm:text-lg font-semibold">{title}</h2>
           </div>
           <button
             onClick={onClose}
-            className="text-white hover:bg-white/20 rounded-lg p-2 transition"
+            className="text-muted-foreground hover:text-foreground rounded-md p-1 transition-colors"
           >
-            <X className="w-5 h-5" />
+            <X className="w-4 h-4" />
           </button>
         </div>
 
         {/* 내용 */}
-        <div className="p-6 space-y-4">
-          <p className="text-foreground">{message}</p>
+        <div className="px-6 py-4 space-y-3">
+          <p className="text-sm sm:text-base text-foreground">{message}</p>
           {itemName && (
-            <div className="bg-destructive/10 border border-destructive/20 rounded-lg p-3">
-              <p className="text-sm font-medium text-red-800">
+            <div className="bg-destructive/10 border border-destructive/20 rounded-md p-3">
+              <p className="text-xs sm:text-sm font-medium text-destructive">
                 삭제 대상: <span className="font-bold">{itemName}</span>
               </p>
             </div>
           )}
-          <p className="text-sm text-muted-foreground">
+          <p className="text-xs sm:text-sm text-muted-foreground">
             이 작업은 되돌릴 수 없습니다. 계속하시겠습니까?
           </p>
         </div>
 
         {/* 버튼 */}
-        <div className="flex gap-3 px-6 pb-6">
+        <div className="flex gap-2 px-6 pb-6">
           <Button
             onClick={onClose}
             variant="outline"
-            className="flex-1"
+            className="h-8 flex-1 text-xs sm:h-10 sm:text-sm"
           >
             취소
           </Button>
           <Button
             onClick={handleConfirm}
             variant="destructive"
-            className="flex-1"
+            className="h-8 flex-1 text-xs sm:h-10 sm:text-sm"
           >
             삭제
           </Button>
diff --git a/frontend/components/mail/MailAccountModal.tsx b/frontend/components/mail/MailAccountModal.tsx
index 43a56032..1bff5994 100644
--- a/frontend/components/mail/MailAccountModal.tsx
+++ b/frontend/components/mail/MailAccountModal.tsx
@@ -133,20 +133,20 @@ export default function MailAccountModal({
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
-      <div className="bg-white rounded-xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
+      <div className="bg-background rounded-lg shadow-lg border max-w-[95vw] sm:max-w-2xl w-full max-h-[90vh] overflow-y-auto">
         {/* 헤더 */}
-        <div className="sticky top-0 bg-gradient-to-r from-primary to-primary px-6 py-4 flex items-center justify-between">
-          <div className="flex items-center gap-3">
-            <Mail className="w-6 h-6 text-white" />
-            <h2 className="text-xl font-bold text-white">
+        <div className="sticky top-0 bg-background border-b px-6 py-4 flex items-center justify-between rounded-t-lg">
+          <div className="flex items-center gap-2">
+            <Mail className="w-5 h-5 text-primary" />
+            <h2 className="text-base sm:text-lg font-semibold">
               {mode === 'create' ? '새 메일 계정 추가' : '메일 계정 수정'}
             </h2>
           </div>
           <button
             onClick={onClose}
-            className="text-white hover:bg-white/20 rounded-lg p-2 transition"
+            className="text-muted-foreground hover:text-foreground rounded-md p-1 transition-colors"
           >
-            <X className="w-5 h-5" />
+            <X className="w-4 h-4" />
           </button>
         </div>
 
@@ -352,18 +352,18 @@ export default function MailAccountModal({
                 <div
                   className={`mt-3 p-3 rounded-lg flex items-start gap-2 ${
                     testResult.success
-                      ? 'bg-green-50 border border-green-500/20'
+                      ? 'bg-emerald-50 border border-emerald-500/20'
                       : 'bg-destructive/10 border border-destructive/20'
                   }`}
                 >
                   {testResult.success ? (
-                    <CheckCircle2 className="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5" />
+                    <CheckCircle2 className="w-5 h-5 text-emerald-600 flex-shrink-0 mt-0.5" />
                   ) : (
                     <AlertCircle className="w-5 h-5 text-destructive flex-shrink-0 mt-0.5" />
                   )}
                   <p
                     className={`text-sm ${
-                      testResult.success ? 'text-green-800' : 'text-red-800'
+                      testResult.success ? 'text-emerald-800' : 'text-red-800'
                     }`}
                   >
                     {testResult.message}
@@ -374,12 +374,12 @@ export default function MailAccountModal({
           )}
 
           {/* 버튼 */}
-          <div className="flex gap-3 pt-4">
+          <div className="flex gap-2 pt-4">
             <Button
               type="button"
               onClick={onClose}
               variant="outline"
-              className="flex-1"
+              className="h-8 flex-1 text-xs sm:h-10 sm:text-sm"
               disabled={isSubmitting}
             >
               취소
@@ -387,7 +387,7 @@ export default function MailAccountModal({
             <Button
               type="submit"
               variant="default"
-              className="flex-1"
+              className="h-8 flex-1 text-xs sm:h-10 sm:text-sm"
               disabled={isSubmitting}
             >
               {isSubmitting ? (
diff --git a/frontend/components/mail/MailAccountTable.tsx b/frontend/components/mail/MailAccountTable.tsx
index 31ae20fe..35af8e37 100644
--- a/frontend/components/mail/MailAccountTable.tsx
+++ b/frontend/components/mail/MailAccountTable.tsx
@@ -82,8 +82,8 @@ export default function MailAccountTable({
 
   if (accounts.length === 0) {
     return (
-      <div className="bg-gradient-to-br from-gray-50 to-gray-100 rounded-xl p-12 text-center border-2 border-dashed border">
-        <Mail className="w-16 h-16 text-gray-400 mx-auto mb-4" />
+      <div className="bg-muted/30 rounded-lg p-12 text-center border-2 border-dashed border">
+        <Mail className="w-16 h-16 text-muted-foreground/70 mx-auto mb-4" />
         <p className="text-lg font-medium text-muted-foreground mb-2">
           등록된 메일 계정이 없습니다
         </p>
@@ -98,7 +98,7 @@ export default function MailAccountTable({
     <div className="space-y-4">
       {/* 검색 */}
       <div className="relative">
-        <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
+        <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground/70" />
         <input
           type="text"
           value={searchTerm}
@@ -109,10 +109,10 @@ export default function MailAccountTable({
       </div>
 
       {/* 테이블 */}
-      <div className="bg-white rounded-xl shadow-sm border border overflow-hidden">
+      <div className="bg-card rounded-lg shadow-sm border overflow-hidden">
         <div className="overflow-x-auto">
           <table className="w-full">
-            <thead className="bg-gradient-to-r from-slate-50 to-gray-50 border-b border">
+            <thead className="bg-muted/50 border-b">
               <tr>
                 <th
                   className="px-6 py-4 text-left text-sm font-semibold text-foreground cursor-pointer hover:bg-muted transition"
@@ -166,11 +166,11 @@ export default function MailAccountTable({
                 </th>
               </tr>
             </thead>
-            <tbody className="divide-y divide-gray-100">
+            <tbody className="divide-y divide-border">
               {sortedAccounts.map((account) => (
                 <tr
                   key={account.id}
-                  className="hover:bg-orange-50/50 transition-colors"
+                  className="hover:bg-muted/40 transition-colors"
                 >
                   <td className="px-6 py-4">
                     <div className="font-medium text-foreground">{account.name}</div>
@@ -182,7 +182,7 @@ export default function MailAccountTable({
                     <div className="text-sm text-muted-foreground">
                       {account.smtpHost}:{account.smtpPort}
                     </div>
-                    <div className="text-xs text-gray-400">
+                    <div className="text-xs text-muted-foreground/70">
                       {account.smtpSecure ? 'SSL' : 'TLS'}
                     </div>
                   </td>
@@ -191,8 +191,8 @@ export default function MailAccountTable({
                       onClick={() => onToggleStatus(account)}
                       className={`inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium transition-all hover:scale-105 ${
                         account.status === 'active'
-                          ? 'bg-green-100 text-green-700 hover:bg-green-200'
-                          : 'bg-muted text-muted-foreground hover:bg-gray-200'
+                          ? 'bg-emerald-100 text-emerald-700 hover:bg-emerald-200'
+                          : 'bg-muted text-muted-foreground hover:bg-muted/80'
                       }`}
                     >
                       {account.status === 'active' ? (
@@ -224,7 +224,7 @@ export default function MailAccountTable({
                     <div className="flex items-center justify-center gap-2">
                       <button
                         onClick={() => onTestConnection(account)}
-                        className="p-2 text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
+                        className="p-2 text-primary hover:bg-primary/10 rounded-lg transition-colors"
                         title="SMTP 연결 테스트"
                       >
                         <Zap className="w-4 h-4" />
diff --git a/frontend/components/mail/MailDesigner.tsx b/frontend/components/mail/MailDesigner.tsx
index 464de85d..14652df9 100644
--- a/frontend/components/mail/MailDesigner.tsx
+++ b/frontend/components/mail/MailDesigner.tsx
@@ -133,7 +133,7 @@ export default function MailDesigner({
   const componentTypes = [
     // 레이아웃 컴포넌트
     { type: "header", icon: LayoutTemplate, label: "헤더", color: "bg-indigo-100 hover:bg-indigo-200", category: "layout" },
-    { type: "divider", icon: Minus, label: "구분선", color: "bg-gray-100 hover:bg-gray-200", category: "layout" },
+    { type: "divider", icon: Minus, label: "구분선", color: "bg-muted hover:bg-muted/80", category: "layout" },
     { type: "spacer", icon: Square, label: "여백", color: "bg-muted hover:bg-muted/80", category: "layout" },
     { type: "footer", icon: Building2, label: "푸터", color: "bg-slate-100 hover:bg-slate-200", category: "layout" },
     // 컨텐츠 컴포넌트
@@ -275,7 +275,7 @@ export default function MailDesigner({
     return (
       <div className="flex items-center justify-center h-screen bg-muted/30">
         <div className="text-center">
-          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-orange-500 mx-auto mb-4"></div>
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto mb-4"></div>
           <p className="text-muted-foreground">템플릿을 불러오는 중...</p>
         </div>
       </div>
@@ -289,7 +289,7 @@ export default function MailDesigner({
         {/* 레이아웃 컴포넌트 */}
         <div>
           <h3 className="text-sm font-semibold text-foreground mb-3 flex items-center">
-            <LayoutTemplate className="w-4 h-4 mr-2 text-indigo-500" />
+            <LayoutTemplate className="w-4 h-4 mr-2 text-primary" />
             레이아웃
           </h3>
           <div className="space-y-2">
@@ -374,8 +374,8 @@ export default function MailDesigner({
 
       {/* 중앙: 캔버스 */}
       <div className="flex-1 p-8 overflow-y-auto">
-        <Card className="max-w-3xl mx-auto">
-          <CardHeader className="bg-gradient-to-r from-muted to-muted border-b">
+          <Card className="max-w-3xl mx-auto">
+          <CardHeader className="bg-muted/40 border-b">
             <CardTitle className="flex items-center justify-between">
               <span>메일 미리보기</span>
               <span className="text-sm text-muted-foreground font-normal">
@@ -411,8 +411,8 @@ export default function MailDesigner({
                     onClick={() => selectComponent(comp.id)}
                     className={`relative group cursor-pointer rounded-lg transition-all ${
                       selectedComponent === comp.id
-                        ? "ring-2 ring-orange-500 bg-orange-50/30"
-                        : "hover:ring-2 hover:ring-gray-300"
+                        ? "ring-2 ring-orange-500 bg-amber-50/30"
+                        : "hover:ring-2 hover:ring-ring"
                     } ${draggedIndex === index ? "opacity-50 scale-95" : ""} ${
                       dragOverIndex === index ? "ring-2 ring-primary ring-dashed bg-primary/10" : ""
                     }`}
@@ -422,17 +422,17 @@ export default function MailDesigner({
                     <div className="absolute -left-10 top-1/2 -translate-y-1/2 flex flex-col items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
                       <button
                         onClick={(e) => { e.stopPropagation(); if (index > 0) moveComponent(index, index - 1); }}
-                        className="p-1 hover:bg-gray-200 rounded disabled:opacity-30"
+                        className="p-1 hover:bg-muted/80 rounded disabled:opacity-30"
                         disabled={index === 0}
                       >
                         <ChevronUp className="w-3 h-3" />
                       </button>
-                      <div className="cursor-grab active:cursor-grabbing p-1 hover:bg-gray-200 rounded">
-                        <GripVertical className="w-4 h-4 text-gray-400" />
+                      <div className="cursor-grab active:cursor-grabbing p-1 hover:bg-muted/80 rounded">
+                        <GripVertical className="w-4 h-4 text-muted-foreground/70" />
                       </div>
                       <button
                         onClick={(e) => { e.stopPropagation(); if (index < components.length - 1) moveComponent(index, index + 1); }}
-                        className="p-1 hover:bg-gray-200 rounded disabled:opacity-30"
+                        className="p-1 hover:bg-muted/80 rounded disabled:opacity-30"
                         disabled={index === components.length - 1}
                       >
                         <ChevronDown className="w-3 h-3" />
@@ -440,7 +440,7 @@ export default function MailDesigner({
                     </div>
 
                     {/* 순서 배지 */}
-                    <div className="absolute -left-10 top-0 text-xs text-gray-400 opacity-0 group-hover:opacity-100">
+                    <div className="absolute -left-10 top-0 text-xs text-muted-foreground/70 opacity-0 group-hover:opacity-100">
                       {index + 1}
                     </div>
 
@@ -474,7 +474,7 @@ export default function MailDesigner({
                       <img src={comp.src} alt="메일 이미지" className="w-full rounded" />
                     )}
                     {comp.type === "spacer" && (
-                      <div style={{ height: `${comp.height}px` }} className="bg-gray-100 rounded flex items-center justify-center text-xs text-gray-400">
+                      <div style={{ height: `${comp.height}px` }} className="bg-muted rounded flex items-center justify-center text-xs text-muted-foreground/70">
                         여백 {comp.height}px
                       </div>
                     )}
@@ -485,20 +485,20 @@ export default function MailDesigner({
                             {comp.logoSrc && <img src={comp.logoSrc} alt="로고" className="h-10" />}
                             <span className="font-bold text-lg">{comp.brandName}</span>
                           </div>
-                          <span className="text-sm text-gray-500">{comp.sendDate}</span>
+                          <span className="text-sm text-muted-foreground">{comp.sendDate}</span>
                         </div>
                       </div>
                     )}
                     {comp.type === "infoTable" && (
                       <div className="border rounded-lg overflow-hidden">
                         {comp.tableTitle && (
-                          <div className="bg-gray-50 px-4 py-2 font-semibold border-b">{comp.tableTitle}</div>
+                          <div className="bg-muted px-4 py-2 font-semibold border-b">{comp.tableTitle}</div>
                         )}
                         <table className="w-full">
                           <tbody>
                             {comp.rows?.map((row, i) => (
-                              <tr key={i} className={i % 2 === 0 ? "bg-white" : "bg-gray-50"}>
-                                <td className="px-4 py-2 font-medium text-gray-600 w-1/3 border-r">{row.label}</td>
+                              <tr key={i} className={i % 2 === 0 ? "bg-white" : "bg-muted"}>
+                                <td className="px-4 py-2 font-medium text-muted-foreground w-1/3 border-r">{row.label}</td>
                                 <td className="px-4 py-2">{row.value}</td>
                               </tr>
                             ))}
@@ -508,9 +508,9 @@ export default function MailDesigner({
                     )}
                     {comp.type === "alertBox" && (
                       <div className={`p-4 rounded-lg border-l-4 ${
-                        comp.alertType === "info" ? "bg-blue-50 border-blue-500 text-blue-800" :
+                        comp.alertType === "info" ? "bg-primary/10 border-primary text-primary" :
                         comp.alertType === "warning" ? "bg-amber-50 border-amber-500 text-amber-800" :
-                        comp.alertType === "danger" ? "bg-red-50 border-red-500 text-red-800" :
+                        comp.alertType === "danger" ? "bg-destructive/10 border-destructive text-red-800" :
                         "bg-emerald-50 border-emerald-500 text-emerald-800"
                       }`}>
                         {comp.alertTitle && <div className="font-bold mb-1">{comp.alertTitle}</div>}
@@ -518,11 +518,11 @@ export default function MailDesigner({
                       </div>
                     )}
                     {comp.type === "divider" && (
-                      <hr className="border-gray-300" style={{ borderWidth: `${comp.height || 1}px` }} />
+                      <hr className="border-input" style={{ borderWidth: `${comp.height || 1}px` }} />
                     )}
                     {comp.type === "footer" && (
-                      <div className="text-center text-sm text-gray-500 py-4 border-t bg-gray-50">
-                        {comp.companyName && <div className="font-semibold text-gray-700">{comp.companyName}</div>}
+                      <div className="text-center text-sm text-muted-foreground py-4 border-t bg-muted">
+                        {comp.companyName && <div className="font-semibold text-foreground">{comp.companyName}</div>}
                         {(comp.ceoName || comp.businessNumber) && (
                           <div className="mt-1">
                             {comp.ceoName && <span>대표: {comp.ceoName}</span>}
@@ -538,7 +538,7 @@ export default function MailDesigner({
                             {comp.email && <span>Email: {comp.email}</span>}
                           </div>
                         )}
-                        {comp.copyright && <div className="mt-2 text-xs text-gray-400">{comp.copyright}</div>}
+                        {comp.copyright && <div className="mt-2 text-xs text-muted-foreground/70">{comp.copyright}</div>}
                       </div>
                     )}
                     {comp.type === "numberedList" && (
@@ -754,7 +754,7 @@ export default function MailDesigner({
                         variant="ghost"
                         size="sm"
                         onClick={() => updateComponent(selected.id, { src: "" })}
-                        className="h-6 text-xs text-red-600 hover:text-red-700 hover:bg-red-50"
+                        className="h-6 text-xs text-destructive hover:text-destructive hover:bg-destructive/10"
                       >
                         <X className="w-3 h-3 mr-1" />
                         이미지 제거
@@ -925,9 +925,9 @@ export default function MailDesigner({
                         size="sm"
                         onClick={() => updateComponent(selected.id, { alertType: type })}
                         className={
-                          type === "info" ? "border-blue-300" :
+                          type === "info" ? "border-primary/40" :
                           type === "warning" ? "border-amber-300" :
-                          type === "danger" ? "border-red-300" : "border-emerald-300"
+                          type === "danger" ? "border-destructive/30" : "border-emerald-300"
                         }
                       >
                         {type === "info" ? "정보" : type === "warning" ? "주의" : type === "danger" ? "위험" : "성공"}
diff --git a/frontend/components/mail/MailDetailModal.tsx b/frontend/components/mail/MailDetailModal.tsx
index 31c2d7c0..4d5a3840 100644
--- a/frontend/components/mail/MailDetailModal.tsx
+++ b/frontend/components/mail/MailDetailModal.tsx
@@ -201,7 +201,7 @@ export default function MailDetailModal({
           </div>
         ) : error ? (
           <div className="flex flex-col items-center justify-center py-16">
-            <AlertCircle className="w-12 h-12 text-red-500 mb-4" />
+            <AlertCircle className="w-12 h-12 text-destructive mb-4" />
             <p className="text-destructive">{error}</p>
             <Button onClick={loadMailDetail} variant="outline" className="mt-4">
               다시 시도
@@ -307,7 +307,7 @@ export default function MailDetailModal({
                               {formatFileSize(attachment.size)}
                             </Badge>
                             {isImage && (
-                              <Badge variant="outline" className="text-xs bg-blue-50 text-blue-700 border-blue-200">
+                              <Badge variant="outline" className="text-xs bg-primary/10 text-primary border-primary/20">
                                 이미지
                               </Badge>
                             )}
diff --git a/frontend/components/mail/MailNotifications.tsx b/frontend/components/mail/MailNotifications.tsx
index a39d6002..20e7eb4f 100644
--- a/frontend/components/mail/MailNotifications.tsx
+++ b/frontend/components/mail/MailNotifications.tsx
@@ -258,11 +258,11 @@ export default function MailNotifications() {
   const getIcon = (type: MailNotification["type"]) => {
     switch (type) {
       case "new_mail":
-        return <Mail className="h-4 w-4 text-blue-600" />;
+        return <Mail className="h-4 w-4 text-primary" />;
       case "send_failed":
-        return <XCircle className="h-4 w-4 text-red-600" />;
+        return <XCircle className="h-4 w-4 text-destructive" />;
       case "limit_warning":
-        return <AlertCircle className="h-4 w-4 text-yellow-600" />;
+        return <AlertCircle className="h-4 w-4 text-amber-600" />;
       default:
         return <Bell className="h-4 w-4" />;
     }
@@ -271,11 +271,11 @@ export default function MailNotifications() {
   const getTypeColor = (type: MailNotification["type"]) => {
     switch (type) {
       case "new_mail":
-        return "bg-blue-50 border-blue-200";
+        return "bg-primary/10 border-primary/20";
       case "send_failed":
-        return "bg-red-50 border-red-200";
+        return "bg-destructive/10 border-destructive/20";
       case "limit_warning":
-        return "bg-yellow-50 border-yellow-200";
+        return "bg-amber-50 border-amber-200";
       default:
         return "bg-muted";
     }
@@ -353,7 +353,7 @@ export default function MailNotifications() {
                           {notification.title}
                         </h4>
                         {!notification.read && (
-                          <div className="w-2 h-2 bg-blue-600 rounded-full flex-shrink-0" />
+                          <div className="w-2 h-2 bg-primary rounded-full flex-shrink-0" />
                         )}
                       </div>
                       <p className="text-xs text-muted-foreground line-clamp-2">
diff --git a/frontend/components/mail/MailTemplateCard.tsx b/frontend/components/mail/MailTemplateCard.tsx
index 5fc629af..16629c7b 100644
--- a/frontend/components/mail/MailTemplateCard.tsx
+++ b/frontend/components/mail/MailTemplateCard.tsx
@@ -30,22 +30,22 @@ export default function MailTemplateCard({
 
   const getCategoryColor = (category?: string) => {
     const colors: Record<string, string> = {
-      welcome: 'bg-primary/20 text-blue-700 border-blue-300',
+      welcome: 'bg-primary/20 text-primary border-primary/40',
       promotion: 'bg-purple-100 text-purple-700 border-purple-300',
-      notification: 'bg-green-100 text-green-700 border-green-300',
-      newsletter: 'bg-orange-100 text-orange-700 border-orange-300',
+      notification: 'bg-emerald-100 text-emerald-700 border-green-300',
+      newsletter: 'bg-amber-100 text-orange-700 border-orange-300',
       system: 'bg-muted text-foreground border',
     };
     return colors[category || ''] || 'bg-muted text-foreground border';
   };
 
   return (
-    <div className="group bg-white rounded-xl border border shadow-sm hover:shadow-lg transition-all duration-300 overflow-hidden">
+    <div className="group bg-card rounded-lg border shadow-sm hover:shadow-md transition-all duration-300 overflow-hidden">
       {/* 헤더 */}
-      <div className="bg-gradient-to-r from-muted to-muted p-4 border-b border">
+      <div className="bg-muted/40 p-4 border-b">
         <div className="flex items-start justify-between">
           <div className="flex items-start gap-3 flex-1">
-            <div className="p-2 bg-white rounded-lg shadow-sm">
+            <div className="p-2 bg-background rounded-md border">
               <Mail className="w-5 h-5 text-primary" />
             </div>
             <div className="flex-1 min-w-0">
@@ -71,7 +71,7 @@ export default function MailTemplateCard({
 
       {/* 본문 미리보기 */}
       <div className="p-4 space-y-3">
-        <div className="bg-muted/30 rounded-lg p-3 border border min-h-[100px]">
+        <div className="bg-muted/30 rounded-md p-3 border min-h-[100px]">
           <p className="text-xs text-muted-foreground mb-2">컴포넌트 {template.components.length}개</p>
           <div className="space-y-1">
             {template.components.slice(0, 3).map((component, idx) => (
@@ -79,14 +79,14 @@ export default function MailTemplateCard({
                 <div className="w-1.5 h-1.5 rounded-full bg-orange-400" />
                 <span className="capitalize">{component.type}</span>
                 {component.type === 'text' && component.content && (
-                  <span className="text-gray-400 truncate flex-1">
+                  <span className="text-muted-foreground/70 truncate flex-1">
                     {component.content.replace(/<[^>]*>/g, '').substring(0, 30)}...
                   </span>
                 )}
               </div>
             ))}
             {template.components.length > 3 && (
-              <p className="text-xs text-gray-400 pl-3.5">
+              <p className="text-xs text-muted-foreground/70 pl-3.5">
                 +{template.components.length - 3}개 더보기
               </p>
             )}
@@ -100,7 +100,7 @@ export default function MailTemplateCard({
             <span>{formatDate(template.createdAt)}</span>
           </div>
           {template.updatedAt !== template.createdAt && (
-            <span className="text-gray-400">수정됨</span>
+            <span className="text-muted-foreground/70">수정됨</span>
           )}
         </div>
       </div>
@@ -110,7 +110,7 @@ export default function MailTemplateCard({
         <Button
           size="sm"
           variant="outline"
-          className="flex-1 hover:bg-accent hover:text-primary hover:border-blue-300"
+          className="flex-1 hover:bg-accent hover:text-primary hover:border-primary/40"
           onClick={() => onPreview(template)}
         >
           <Eye className="w-4 h-4 mr-1" />
@@ -119,7 +119,7 @@ export default function MailTemplateCard({
         <Button
           size="sm"
           variant="outline"
-          className="flex-1 hover:bg-green-50 hover:text-green-600 hover:border-green-300"
+          className="flex-1 hover:bg-emerald-50 hover:text-emerald-600 hover:border-green-300"
           onClick={() => onEdit(template)}
         >
           <Edit2 className="w-4 h-4 mr-1" />
@@ -138,7 +138,7 @@ export default function MailTemplateCard({
         <Button
           size="sm"
           variant="outline"
-          className="hover:bg-destructive/10 hover:text-destructive hover:border-red-300"
+          className="hover:bg-destructive/10 hover:text-destructive hover:border-destructive/30"
           onClick={() => onDelete(template)}
         >
           <Trash2 className="w-4 h-4" />
diff --git a/frontend/components/mail/MailTemplateEditorModal.tsx b/frontend/components/mail/MailTemplateEditorModal.tsx
index 2c89d5d3..1d575c1e 100644
--- a/frontend/components/mail/MailTemplateEditorModal.tsx
+++ b/frontend/components/mail/MailTemplateEditorModal.tsx
@@ -47,18 +47,18 @@ export default function MailTemplateEditorModal({
   return (
     <div className="fixed inset-0 z-50 bg-white">
       {/* 헤더 */}
-      <div className="sticky top-0 bg-gradient-to-r from-primary to-primary px-6 py-4 flex items-center justify-between shadow-lg z-10">
-        <div className="flex items-center gap-3">
-          <h2 className="text-xl font-bold text-white">
+      <div className="sticky top-0 bg-background border-b px-6 py-4 flex items-center justify-between shadow-sm z-10">
+        <div className="flex items-center gap-2">
+          <h2 className="text-base sm:text-lg font-semibold">
             {mode === 'create' ? '새 메일 템플릿 만들기' : '메일 템플릿 수정'}
           </h2>
         </div>
         <button
           onClick={onClose}
           disabled={isSaving}
-          className="text-white hover:bg-white/20 rounded-lg p-2 transition disabled:opacity-50"
+          className="text-muted-foreground hover:text-foreground rounded-md p-1 transition-colors disabled:opacity-50"
         >
-          <X className="w-5 h-5" />
+          <X className="w-4 h-4" />
         </button>
       </div>
 
diff --git a/frontend/components/numbering-rule/AutoConfigPanel.tsx b/frontend/components/numbering-rule/AutoConfigPanel.tsx
index 544eae9d..ac4d2ffa 100644
--- a/frontend/components/numbering-rule/AutoConfigPanel.tsx
+++ b/frontend/components/numbering-rule/AutoConfigPanel.tsx
@@ -401,7 +401,7 @@ const DateConfigPanel: React.FC<DateConfigPanelProps> = ({
                           />
                           <div className="flex flex-col">
                             <span className="font-medium">{table.displayName}</span>
-                            <span className="text-[10px] text-gray-500">{table.tableName}</span>
+                            <span className="text-[10px] text-muted-foreground">{table.tableName}</span>
                           </div>
                         </CommandItem>
                       ))}
@@ -466,7 +466,7 @@ const DateConfigPanel: React.FC<DateConfigPanelProps> = ({
                           />
                           <div className="flex flex-col">
                             <span className="font-medium">{column.displayName}</span>
-                            <span className="text-[10px] text-gray-500">
+                            <span className="text-[10px] text-muted-foreground">
                               {column.columnName} ({column.inputType || column.dataType})
                             </span>
                           </div>
diff --git a/frontend/components/pop/designer/PopCanvas.tsx b/frontend/components/pop/designer/PopCanvas.tsx
index 2edefb3a..ad99c219 100644
--- a/frontend/components/pop/designer/PopCanvas.tsx
+++ b/frontend/components/pop/designer/PopCanvas.tsx
@@ -488,9 +488,9 @@ export default function PopCanvas({
   const showRightPanel = showReviewPanel || showHiddenPanel;
 
   return (
-    <div className="flex h-full flex-col bg-gray-50">
+    <div className="flex h-full flex-col bg-muted">
       {/* 상단 컨트롤 */}
-      <div className="flex items-center gap-2 border-b bg-white px-4 py-2">
+      <div className="flex items-center gap-2 border-b bg-background px-4 py-2">
         {/* 모드 프리셋 버튼 */}
         <div className="flex gap-1">
           {VIEWPORT_PRESETS.map((preset) => {
@@ -517,7 +517,7 @@ export default function PopCanvas({
           })}
         </div>
 
-        <div className="h-4 w-px bg-gray-300" />
+        <div className="h-4 w-px bg-border" />
 
         {/* 고정/되돌리기 버튼 (기본 모드 아닐 때만 표시) */}
         {currentMode !== DEFAULT_PRESET && (
@@ -546,14 +546,14 @@ export default function PopCanvas({
           </>
         )}
 
-        <div className="h-4 w-px bg-gray-300" />
+        <div className="h-4 w-px bg-border" />
 
         {/* 해상도 표시 */}
         <div className="text-xs text-muted-foreground">
           {customWidth} × {Math.round(dynamicCanvasHeight)}
         </div>
         
-        <div className="h-4 w-px bg-gray-300" />
+        <div className="h-4 w-px bg-border" />
         
         {/* Gap 프리셋 선택 */}
         <div className="flex items-center gap-2">
@@ -610,7 +610,7 @@ export default function PopCanvas({
           </Button>
         </div>
         
-        <div className="h-4 w-px bg-gray-300" />
+        <div className="h-4 w-px bg-border" />
         
         {/* 그리드 가이드 토글 */}
         <Button
@@ -653,7 +653,7 @@ export default function PopCanvas({
       <div
         ref={containerRef}
         className={cn(
-          "canvas-scroll-area relative flex-1 overflow-auto bg-gray-100",
+          "canvas-scroll-area relative flex-1 overflow-auto bg-muted",
           isSpacePressed && "cursor-grab",
           isPanning && "cursor-grabbing"
         )}
@@ -689,7 +689,7 @@ export default function PopCanvas({
                   {gridLabels.columnLabels.map((num) => (
                     <div
                       key={`col-${num}`}
-                      className="flex items-center justify-center text-xs font-semibold text-blue-500"
+                      className="flex items-center justify-center text-xs font-semibold text-primary"
                       style={{
                         width: `calc((${customWidth}px - ${adjustedPadding * 2}px - ${adjustedGap * (breakpoint.columns - 1)}px) / ${breakpoint.columns})`,
                         height: "24px",
@@ -711,7 +711,7 @@ export default function PopCanvas({
                   {gridLabels.rowLabels.map((num) => (
                     <div
                       key={`row-${num}`}
-                      className="flex items-center justify-center text-xs font-semibold text-blue-500"
+                      className="flex items-center justify-center text-xs font-semibold text-primary"
                       style={{
                         width: "24px",
                         height: `${breakpoint.rowHeight}px`,
@@ -728,7 +728,7 @@ export default function PopCanvas({
             <div
               ref={canvasRef}
               className={cn(
-                "relative rounded-lg border-2 bg-white shadow-xl overflow-visible",
+                "relative rounded-lg border-2 bg-background shadow-xl overflow-visible",
                 canDrop && isOver && "ring-4 ring-primary/20"
               )}
               style={{
@@ -742,10 +742,10 @@ export default function PopCanvas({
                 // 빈 상태
                 <div className="flex h-full items-center justify-center p-8">
                   <div className="text-center">
-                    <div className="mb-2 text-sm font-medium text-gray-500">
+                    <div className="mb-2 text-sm font-medium text-muted-foreground">
                       컴포넌트를 드래그하여 배치하세요
                     </div>
-                    <div className="text-xs text-gray-400">
+                    <div className="text-xs text-muted-foreground/70">
                       {breakpoint.label} - {breakpoint.columns}칸 그리드
                     </div>
                   </div>
@@ -803,7 +803,7 @@ export default function PopCanvas({
       </div>
 
       {/* 하단 정보 */}
-      <div className="flex items-center justify-between border-t bg-white px-4 py-2">
+      <div className="flex items-center justify-between border-t bg-background px-4 py-2">
         <div className="text-xs text-muted-foreground">
           {breakpoint.label} - {breakpoint.columns}칸 그리드 (행 높이: {breakpoint.rowHeight}px)
         </div>
@@ -832,16 +832,16 @@ function ReviewPanel({
 }: ReviewPanelProps) {
   return (
     <div 
-      className="flex flex-col rounded-lg border-2 border-dashed border-blue-300 bg-blue-50/50"
+      className="flex flex-col rounded-lg border-2 border-dashed border-primary/40 bg-primary/5"
       style={{
         width: "200px",
         maxHeight: "300px",
       }}
     >
       {/* 헤더 */}
-      <div className="flex items-center gap-2 border-b border-blue-200 bg-blue-100/50 px-3 py-2 rounded-t-lg">
-        <AlertTriangle className="h-4 w-4 text-blue-600" />
-        <span className="text-xs font-semibold text-blue-700">
+      <div className="flex items-center gap-2 border-b border-primary/20 bg-primary/5 px-3 py-2 rounded-t-lg">
+        <AlertTriangle className="h-4 w-4 text-primary" />
+        <span className="text-xs font-semibold text-primary">
           검토 필요 ({components.length}개)
         </span>
       </div>
@@ -859,8 +859,8 @@ function ReviewPanel({
       </div>
       
       {/* 안내 문구 */}
-      <div className="border-t border-blue-200 px-3 py-2 bg-blue-50/80 rounded-b-lg">
-        <p className="text-[10px] text-blue-600 leading-tight">
+      <div className="border-t border-primary/20 px-3 py-2 bg-primary/10 rounded-b-lg">
+        <p className="text-[10px] text-primary leading-tight">
           자동 배치됨. 클릭하여 확인 후 편집 가능
         </p>
       </div>
@@ -888,18 +888,18 @@ function ReviewItem({
       className={cn(
         "flex flex-col gap-1 rounded-md border-2 p-2 cursor-pointer transition-all",
         isSelected
-          ? "border-blue-500 bg-blue-100 shadow-sm"
-          : "border-blue-200 bg-white hover:border-blue-400 hover:bg-blue-50"
+          ? "border-primary bg-primary/10 shadow-sm"
+          : "border-primary/20 bg-background hover:border-primary/60 hover:bg-primary/10"
       )}
       onClick={(e) => {
         e.stopPropagation();
         onSelect();
       }}
     >
-      <span className="text-xs font-medium text-blue-800 line-clamp-1">
+      <span className="text-xs font-medium text-primary line-clamp-1">
         {component.label || component.id}
       </span>
-      <span className="text-[10px] text-blue-600 bg-blue-50 rounded px-1.5 py-0.5 self-start">
+      <span className="text-[10px] text-primary bg-primary/10 rounded px-1.5 py-0.5 self-start">
         자동 배치됨
       </span>
     </div>
@@ -951,10 +951,10 @@ function HiddenPanel({
     <div 
       ref={drop}
       className={cn(
-        "flex flex-col rounded-lg border-2 border-dashed bg-gray-100/50 transition-colors",
+        "flex flex-col rounded-lg border-2 border-dashed bg-muted/50 transition-colors",
         isOver && canDrop
-          ? "border-gray-600 bg-gray-200/70"
-          : "border-gray-400"
+          ? "border-input bg-muted/70"
+          : "border-input"
       )}
       style={{
         width: "200px",
@@ -962,9 +962,9 @@ function HiddenPanel({
       }}
     >
       {/* 헤더 */}
-      <div className="flex items-center gap-2 border-b border-gray-300 bg-gray-200/50 px-3 py-2 rounded-t-lg">
-        <EyeOff className="h-4 w-4 text-gray-600" />
-        <span className="text-xs font-semibold text-gray-700">
+      <div className="flex items-center gap-2 border-b border-input bg-muted/50 px-3 py-2 rounded-t-lg">
+        <EyeOff className="h-4 w-4 text-muted-foreground" />
+        <span className="text-xs font-semibold text-foreground">
           숨김 ({components.length}개)
         </span>
       </div>
@@ -982,8 +982,8 @@ function HiddenPanel({
       </div>
       
       {/* 안내 문구 */}
-      <div className="border-t border-gray-300 px-3 py-2 bg-gray-100/80 rounded-b-lg">
-        <p className="text-[10px] text-gray-600 leading-tight">
+      <div className="border-t border-input px-3 py-2 bg-muted/80 rounded-b-lg">
+        <p className="text-[10px] text-muted-foreground leading-tight">
           그리드로 드래그하여 다시 표시
         </p>
       </div>
@@ -1026,22 +1026,22 @@ function HiddenItem({
     <div
       ref={drag}
       className={cn(
-        "rounded-md border-2 bg-white p-2 cursor-move transition-all opacity-60",
+        "rounded-md border-2 bg-background p-2 cursor-move transition-all opacity-60",
         isSelected
           ? "border-primary ring-2 ring-primary/30"
-          : "border-gray-400 hover:border-gray-500",
+          : "border-input hover:border-input",
         isDragging && "opacity-30"
       )}
       onClick={onSelect}
     >
       {/* 컴포넌트 이름 */}
-      <div className="flex items-center gap-1 text-xs font-medium text-gray-600 truncate">
+      <div className="flex items-center gap-1 text-xs font-medium text-muted-foreground truncate">
         <EyeOff className="h-3 w-3" />
         {component.label || component.type}
       </div>
       
       {/* 원본 위치 정보 */}
-      <div className="text-[10px] text-gray-500 mt-1">
+      <div className="text-[10px] text-muted-foreground mt-1">
         원본: {component.position.col}열, {component.position.row}행
       </div>
     </div>
@@ -1191,12 +1191,12 @@ function ModalSizeSettingsPanel({
               onClick={handleTogglePerMode}
               className={cn(
                 "relative inline-flex h-5 w-9 items-center rounded-full transition-colors",
-                usePerMode ? "bg-primary" : "bg-gray-300"
+                usePerMode ? "bg-primary" : "bg-muted/60"
               )}
             >
               <span
                 className={cn(
-                  "inline-block h-3.5 w-3.5 rounded-full bg-white transition-transform",
+                  "inline-block h-3.5 w-3.5 rounded-full bg-background transition-transform",
                   usePerMode ? "translate-x-4.5" : "translate-x-0.5"
                 )}
               />
@@ -1290,7 +1290,7 @@ function ModalThumbnailPreview({
       </div>
 
       <div
-        className="relative mx-auto rounded-md border bg-gray-100 overflow-hidden"
+        className="relative mx-auto rounded-md border bg-muted overflow-hidden"
         style={{ width: `${PREVIEW_WIDTH}px`, height: `${previewHeight}px` }}
       >
         {/* 반투명 배경 오버레이 (모달이 열렸을 때의 딤 효과) */}
diff --git a/frontend/components/pop/designer/panels/ComponentEditorPanel.tsx b/frontend/components/pop/designer/panels/ComponentEditorPanel.tsx
index 12c21e4f..b7d42bc2 100644
--- a/frontend/components/pop/designer/panels/ComponentEditorPanel.tsx
+++ b/frontend/components/pop/designer/panels/ComponentEditorPanel.tsx
@@ -181,18 +181,18 @@ export default function ComponentEditorPanel({
                         "flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-xs transition-colors",
                         isActive
                           ? "bg-primary/10 text-primary font-medium"
-                          : "hover:bg-gray-100 text-gray-600"
+                          : "hover:bg-muted text-muted-foreground"
                       )}
                     >
                       <span className="truncate flex-1">{label}</span>
-                      <span className="shrink-0 text-[10px] text-gray-400">
+                      <span className="shrink-0 text-[10px] text-muted-foreground/70">
                         ({comp.position.col},{comp.position.row})
                       </span>
                     </button>
                   );
                 })}
               </div>
-              <div className="h-px bg-gray-200 mt-3" />
+              <div className="h-px bg-muted/80 mt-3" />
             </div>
           )}
           <PositionForm
@@ -279,8 +279,8 @@ function PositionForm({ component, currentMode, isDefaultMode, columns, onUpdate
   return (
     <div className="space-y-6">
       {/* 그리드 정보 */}
-      <div className="rounded-lg bg-gray-50 p-3">
-        <p className="text-xs font-medium text-gray-700 mb-1">
+      <div className="rounded-lg bg-muted p-3">
+        <p className="text-xs font-medium text-foreground mb-1">
           현재 그리드: {GRID_BREAKPOINTS[currentMode].label}
         </p>
         <p className="text-xs text-muted-foreground">
@@ -331,7 +331,7 @@ function PositionForm({ component, currentMode, isDefaultMode, columns, onUpdate
         </div>
       </div>
 
-      <div className="h-px bg-gray-200" />
+      <div className="h-px bg-muted/80" />
 
       {/* 열 크기 */}
       <div className="space-y-2">
@@ -449,7 +449,7 @@ function ComponentSettingsForm({ component, onUpdate, currentMode, previewPageIn
           componentId={component.id}
         />
       ) : (
-        <div className="rounded-lg bg-gray-50 p-3">
+        <div className="rounded-lg bg-muted p-3">
           <p className="text-xs text-muted-foreground">
             {component.type} 전용 설정이 없습니다
           </p>
@@ -513,8 +513,8 @@ function VisibilityForm({ component, onUpdate }: VisibilityFormProps) {
         })}
       </div>
 
-      <div className="rounded-lg bg-blue-50 border border-blue-200 p-3">
-        <p className="text-xs text-blue-800">
+      <div className="rounded-lg bg-primary/10 border border-primary/20 p-3">
+        <p className="text-xs text-primary">
           체크 해제하면 해당 모드에서 컴포넌트가 숨겨집니다
         </p>
       </div>
diff --git a/frontend/components/pop/designer/panels/ComponentPalette.tsx b/frontend/components/pop/designer/panels/ComponentPalette.tsx
index dcd1d987..c510afa3 100644
--- a/frontend/components/pop/designer/panels/ComponentPalette.tsx
+++ b/frontend/components/pop/designer/panels/ComponentPalette.tsx
@@ -111,7 +111,7 @@ function DraggablePaletteItem({ item }: { item: PaletteItem }) {
 // 컴포넌트 팔레트 패널
 export default function ComponentPalette() {
   return (
-    <div className="flex h-full flex-col bg-gray-50">
+    <div className="flex h-full flex-col bg-muted">
       {/* 헤더 */}
       <div className="border-b bg-white px-4 py-3">
         <h3 className="text-sm font-semibold">컴포넌트</h3>
diff --git a/frontend/components/pop/designer/panels/ConnectionEditor.tsx b/frontend/components/pop/designer/panels/ConnectionEditor.tsx
index 52c8102f..c8135edb 100644
--- a/frontend/components/pop/designer/panels/ConnectionEditor.tsx
+++ b/frontend/components/pop/designer/panels/ConnectionEditor.tsx
@@ -73,9 +73,9 @@ export default function ConnectionEditor({
   if (!hasSendable && !hasReceivable) {
     return (
       <div className="space-y-4">
-        <div className="rounded-lg bg-gray-50 p-4 text-center">
+        <div className="rounded-lg bg-muted p-4 text-center">
           <Link2 className="mx-auto mb-2 h-8 w-8 text-muted-foreground" />
-          <p className="text-sm font-medium text-gray-700">연결 없음</p>
+          <p className="text-sm font-medium text-foreground">연결 없음</p>
           <p className="mt-1 text-xs text-muted-foreground">
             이 컴포넌트는 다른 컴포넌트와 연결할 수 없습니다
           </p>
@@ -173,7 +173,7 @@ function SendSection({
   return (
     <div className="space-y-3">
       <Label className="flex items-center gap-1 text-xs font-medium">
-        <ArrowRight className="h-3 w-3 text-blue-500" />
+        <ArrowRight className="h-3 w-3 text-primary" />
         보내기
       </Label>
 
@@ -207,7 +207,7 @@ function SendSection({
               />
             )
           ) : (
-            <div className="flex items-center gap-1 rounded border bg-blue-50/50 px-3 py-2">
+            <div className="flex items-center gap-1 rounded border bg-primary/10/50 px-3 py-2">
               <span className="flex-1 truncate text-xs">
                 {conn.label || `→ ${allComponents.find((c) => c.id === conn.targetComponent)?.label || conn.targetComponent}`}
               </span>
@@ -571,7 +571,7 @@ function FilterConnectionForm({
       )}
 
       {selectedTargetInput && !isEventTypeConnection(meta, selectedOutput, targetMeta, selectedTargetInput) && (
-        <div className="space-y-2 rounded bg-gray-50 p-2">
+        <div className="space-y-2 rounded bg-muted p-2">
           <p className="text-[10px] font-medium text-muted-foreground">필터할 컬럼</p>
 
           {dbColumnsLoading ? (
@@ -583,7 +583,7 @@ function FilterConnectionForm({
             <div className="space-y-2">
               {displayColumns.length > 0 && (
                 <div className="space-y-1">
-                  <p className="text-[9px] font-medium text-green-600">화면 표시 컬럼</p>
+                  <p className="text-[9px] font-medium text-emerald-600">화면 표시 컬럼</p>
                   {displayColumns.map((col) => (
                     <div key={col} className="flex items-center gap-2">
                       <Checkbox
@@ -605,7 +605,7 @@ function FilterConnectionForm({
               {dataOnlyColumns.length > 0 && (
                 <div className="space-y-1">
                   {displayColumns.length > 0 && (
-                    <div className="my-1 h-px bg-gray-200" />
+                    <div className="my-1 h-px bg-muted/80" />
                   )}
                   <p className="text-[9px] font-medium text-amber-600">데이터 전용 컬럼</p>
                   {dataOnlyColumns.map((col) => (
@@ -636,7 +636,7 @@ function FilterConnectionForm({
           )}
 
           {filterColumns.length > 0 && (
-            <p className="text-[10px] text-blue-600">
+            <p className="text-[10px] text-primary">
               {filterColumns.length}개 컬럼 중 하나라도 일치하면 표시
             </p>
           )}
@@ -690,7 +690,7 @@ function ReceiveSection({
   return (
     <div className="space-y-3">
       <Label className="flex items-center gap-1 text-xs font-medium">
-        <Unlink2 className="h-3 w-3 text-green-500" />
+        <Unlink2 className="h-3 w-3 text-emerald-500" />
         받기
       </Label>
 
@@ -703,9 +703,9 @@ function ReceiveSection({
             return (
               <div
                 key={conn.id}
-                className="flex items-center gap-2 rounded border bg-green-50/50 px-3 py-2 text-xs"
+                className="flex items-center gap-2 rounded border bg-emerald-50/50 px-3 py-2 text-xs"
               >
-                <ArrowRight className="h-3 w-3 text-green-500" />
+                <ArrowRight className="h-3 w-3 text-emerald-500" />
                 <span className="truncate">
                   {sourceComp?.label || conn.sourceComponent}
                 </span>
diff --git a/frontend/components/pop/designer/renderers/PopRenderer.tsx b/frontend/components/pop/designer/renderers/PopRenderer.tsx
index 32ac610b..598f0e90 100644
--- a/frontend/components/pop/designer/renderers/PopRenderer.tsx
+++ b/frontend/components/pop/designer/renderers/PopRenderer.tsx
@@ -234,7 +234,7 @@ export default function PopRenderer({
       {gridCells.map(cell => (
         <div
           key={cell.id}
-          className="pointer-events-none border border-dashed border-blue-300/40"
+          className="pointer-events-none border border-dashed border-primary/40/40"
           style={{
             gridColumn: cell.col,
             gridRow: cell.row,
@@ -284,7 +284,7 @@ export default function PopRenderer({
         return (
           <div
             key={comp.id}
-            className="relative overflow-hidden rounded-lg border-2 border-gray-200 bg-white transition-all z-10"
+            className="relative overflow-hidden rounded-lg border-2 border-border bg-white transition-all z-10"
             style={positionStyle}
           >
             <ComponentContent 
@@ -365,8 +365,8 @@ function DraggableComponent({
         "relative rounded-lg border-2 transition-all overflow-hidden z-10 bg-white",
         isSelected
           ? "border-primary ring-2 ring-primary/30"
-          : "border-gray-200",
-        isDesignMode && "cursor-move hover:border-gray-300 hover:shadow-sm",
+          : "border-border",
+        isDesignMode && "cursor-move hover:border-input hover:shadow-sm",
         isDragging && "opacity-50"
       )}
       style={positionStyle}
@@ -582,7 +582,7 @@ function ComponentContent({ component, effectivePosition, isDesignMode, isSelect
         {PreviewComponent ? (
           <PreviewComponent config={component.config} />
         ) : (
-          <span className="text-xs text-gray-400 p-2">
+          <span className="text-xs text-muted-foreground/70 p-2">
             {typeLabel}
           </span>
         )}
@@ -628,7 +628,7 @@ function renderActualComponent(
   const typeLabel = COMPONENT_TYPE_LABELS[component.type] || component.type;
   return (
     <div className="flex h-full w-full items-center justify-center p-2">
-      <span className="text-xs text-gray-500">{component.label || typeLabel}</span>
+      <span className="text-xs text-muted-foreground">{component.label || typeLabel}</span>
     </div>
   );
 }
diff --git a/frontend/components/pop/management/PopCategoryTree.tsx b/frontend/components/pop/management/PopCategoryTree.tsx
index 37e4f0ba..f2da3896 100644
--- a/frontend/components/pop/management/PopCategoryTree.tsx
+++ b/frontend/components/pop/management/PopCategoryTree.tsx
@@ -226,9 +226,9 @@ function TreeNode({
 
         {/* 폴더 아이콘 - 루트는 다른 색상 */}
         {isExpanded && hasChildren ? (
-          <FolderOpen className={cn("h-4 w-4 shrink-0", isRootLevel ? "text-orange-500" : "text-amber-500")} />
+          <FolderOpen className={cn("h-4 w-4 shrink-0", isRootLevel ? "text-amber-500" : "text-amber-500")} />
         ) : (
-          <Folder className={cn("h-4 w-4 shrink-0", isRootLevel ? "text-orange-500" : "text-amber-500")} />
+          <Folder className={cn("h-4 w-4 shrink-0", isRootLevel ? "text-amber-500" : "text-amber-500")} />
         )}
 
         {/* 그룹명 - 루트는 볼드체 + 회사코드 표시 */}
@@ -379,7 +379,7 @@ function TreeNode({
               >
                 {/* 트리 연결 표시 */}
                 <span className="text-muted-foreground/50 text-xs mr-1">ㄴ</span>
-                <Monitor className="h-4 w-4 text-blue-500 shrink-0" />
+                <Monitor className="h-4 w-4 text-primary shrink-0" />
                 <span className="flex-1 text-sm truncate">{screen.screenName}</span>
                 <span className="text-[10px] text-muted-foreground shrink-0">#{screen.screenId}</span>
                 
@@ -1075,7 +1075,7 @@ export function PopCategoryTree({
                             onClick={() => onScreenSelect(screen)}
                             onDoubleClick={() => onScreenDesign(screen)}
                           >
-                            <Monitor className="h-4 w-4 text-gray-400 shrink-0" />
+                            <Monitor className="h-4 w-4 text-muted-foreground/70 shrink-0" />
                             <span className="flex-1 text-sm truncate">{screen.screenName}</span>
                             <span className="text-[10px] text-muted-foreground shrink-0">#{screen.screenId}</span>
                             
@@ -1281,7 +1281,7 @@ export function PopCategoryTree({
                     >
                       <Folder className={cn(
                         "h-4 w-4 shrink-0",
-                        depth === 0 ? "text-orange-500" : "text-amber-500"
+                        depth === 0 ? "text-amber-500" : "text-amber-500"
                       )} />
                       <span className="text-sm truncate flex-1">
                         {group.group_name}
diff --git a/frontend/components/pop/management/PopDeployModal.tsx b/frontend/components/pop/management/PopDeployModal.tsx
index 46f8cc68..eac12074 100644
--- a/frontend/components/pop/management/PopDeployModal.tsx
+++ b/frontend/components/pop/management/PopDeployModal.tsx
@@ -358,7 +358,7 @@ export function PopDeployModal({
                               );
                             }}
                           />
-                          <Monitor className="h-3.5 w-3.5 shrink-0 text-blue-500" />
+                          <Monitor className="h-3.5 w-3.5 shrink-0 text-primary" />
                           <span className="flex-1 truncate">
                             {entry.screenName}
                           </span>
@@ -395,7 +395,7 @@ export function PopDeployModal({
                                   );
                                 }}
                               />
-                              <Monitor className="h-3.5 w-3.5 shrink-0 text-blue-500" />
+                              <Monitor className="h-3.5 w-3.5 shrink-0 text-primary" />
                               <span className="flex-1 truncate">
                                 {entry.screenName}
                               </span>
diff --git a/frontend/components/pop/management/PopScreenPreview.tsx b/frontend/components/pop/management/PopScreenPreview.tsx
index 66b605ab..a56188db 100644
--- a/frontend/components/pop/management/PopScreenPreview.tsx
+++ b/frontend/components/pop/management/PopScreenPreview.tsx
@@ -169,7 +169,7 @@ export function PopScreenPreview({ screen, className }: PopScreenPreviewProps) {
         ) : (
           // 디바이스 프레임 + iframe (심플한 테두리)
           <div
-            className="relative border-2 border-gray-300 rounded-lg shadow-lg overflow-hidden"
+            className="relative border-2 border-input rounded-lg shadow-lg overflow-hidden"
             style={{
               width: deviceSize.width * scale,
               height: deviceSize.height * scale,
diff --git a/frontend/components/providers/ThemeProvider.tsx b/frontend/components/providers/ThemeProvider.tsx
new file mode 100644
index 00000000..a3a3fa3a
--- /dev/null
+++ b/frontend/components/providers/ThemeProvider.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  return (
+    <NextThemesProvider
+      attribute="class"
+      defaultTheme="light"
+      enableSystem={false}
+      disableTransitionOnChange
+    >
+      {children}
+    </NextThemesProvider>
+  );
+}
diff --git a/frontend/components/report/designer/CanvasComponent.tsx b/frontend/components/report/designer/CanvasComponent.tsx
index da440abc..32760420 100644
--- a/frontend/components/report/designer/CanvasComponent.tsx
+++ b/frontend/components/report/designer/CanvasComponent.tsx
@@ -91,9 +91,9 @@ function BarcodeRenderer({
       <svg ref={svgRef} className={`max-h-full max-w-full ${error ? "hidden" : ""}`} />
       {/* 에러 메시지 오버레이 */}
       {error && (
-        <div className="absolute inset-0 flex flex-col items-center justify-center text-xs text-red-500">
+        <div className="absolute inset-0 flex flex-col items-center justify-center text-xs text-destructive">
           <span>{error}</span>
-          <span className="mt-1 text-gray-400">{value}</span>
+          <span className="mt-1 text-muted-foreground/70">{value}</span>
         </div>
       )}
     </div>
@@ -149,9 +149,9 @@ function QRCodeRenderer({ value, size, fgColor, bgColor, level }: QRCodeRenderer
       <canvas ref={canvasRef} className={`max-h-full max-w-full ${error ? "hidden" : ""}`} />
       {/* 에러 메시지 오버레이 */}
       {error && (
-        <div className="absolute inset-0 flex flex-col items-center justify-center text-xs text-red-500">
+        <div className="absolute inset-0 flex flex-col items-center justify-center text-xs text-destructive">
           <span>{error}</span>
-          <span className="mt-1 text-gray-400">{value}</span>
+          <span className="mt-1 text-muted-foreground/70">{value}</span>
         </div>
       )}
     </div>
@@ -711,7 +711,7 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
               onChange={(e) => setEditValue(e.target.value)}
               onBlur={handleEditSave}
               onKeyDown={handleEditKeyDown}
-              className="h-full w-full resize-none border-none bg-transparent p-0 outline-none focus:ring-2 focus:ring-blue-500"
+              className="h-full w-full resize-none border-none bg-transparent p-0 outline-none focus:ring-2 focus:ring-ring"
               style={{
                 fontSize: `${component.fontSize}px`,
                 color: component.fontColor,
@@ -773,7 +773,7 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
                       {columns.map((col) => (
                         <th
                           key={col.field}
-                          className={component.showBorder !== false ? "border border-gray-300" : ""}
+                          className={component.showBorder !== false ? "border border-input" : ""}
                           style={{
                             padding: "6px 8px",
                             textAlign: col.align || "left",
@@ -792,7 +792,7 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
                         {columns.map((col) => (
                           <td
                             key={col.field}
-                            className={component.showBorder !== false ? "border border-gray-300" : ""}
+                            className={component.showBorder !== false ? "border border-input" : ""}
                             style={{
                               padding: "6px 8px",
                               textAlign: col.align || "left",
@@ -813,7 +813,7 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
 
         // 기본 테이블 (데이터 없을 때)
         return (
-          <div className="flex h-full w-full items-center justify-center border-2 border-dashed border-gray-300 bg-gray-50 text-xs text-gray-400">
+          <div className="flex h-full w-full items-center justify-center border-2 border-dashed border-input bg-muted text-xs text-muted-foreground/70">
               쿼리를 연결하세요
           </div>
         );
@@ -832,7 +832,7 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
                 }}
               />
             ) : (
-              <div className="flex h-full w-full items-center justify-center border border-dashed border-gray-300 bg-gray-50 text-xs text-gray-400">
+              <div className="flex h-full w-full items-center justify-center border border-dashed border-input bg-muted text-xs text-muted-foreground/70">
                 이미지를 업로드하세요
               </div>
             )}
@@ -924,7 +924,7 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
                   />
                 ) : (
                   <div
-                    className="flex h-full w-full items-center justify-center border-2 border-dashed bg-gray-50 text-xs text-gray-400"
+                    className="flex h-full w-full items-center justify-center border-2 border-dashed bg-muted text-xs text-muted-foreground/70"
                     style={{
                       borderColor: component.borderColor || "#cccccc",
                     }}
@@ -959,7 +959,7 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
                   />
                 ) : (
                   <div
-                    className="flex h-full w-full items-center justify-center border-2 border-dashed bg-gray-50 text-xs text-gray-400"
+                    className="flex h-full w-full items-center justify-center border-2 border-dashed bg-muted text-xs text-muted-foreground/70"
                     style={{
                       borderColor: component.borderColor || "#cccccc",
                       borderRadius: "50%",
@@ -1442,8 +1442,8 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
       className={`absolute ${component.type === "divider" ? "p-0" : "p-2"} shadow-sm ${isLocked ? "cursor-not-allowed opacity-80" : "cursor-move"} ${
         isSelected
           ? isLocked
-            ? "ring-2 ring-red-500"
-            : "ring-2 ring-blue-500"
+            ? "ring-2 ring-destructive"
+            : "ring-2 ring-ring"
           : isMultiSelected
             ? isLocked
               ? "ring-2 ring-red-300"
@@ -1468,7 +1468,7 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
 
       {/* 잠금 표시 */}
       {isLocked && (
-        <div className="absolute top-1 right-1 rounded bg-red-500 px-1 py-0.5 text-[10px] text-white">🔒</div>
+        <div className="absolute top-1 right-1 rounded bg-destructive px-1 py-0.5 text-[10px] text-white">🔒</div>
       )}
 
       {/* 그룹화 표시 */}
@@ -1479,7 +1479,7 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
       {/* 리사이즈 핸들 (선택된 경우만, 잠금 안 된 경우만) */}
       {isSelected && !isLocked && (
         <div
-          className={`resize-handle absolute h-3 w-3 rounded-full bg-blue-500 ${
+          className={`resize-handle absolute h-3 w-3 rounded-full bg-primary ${
             component.type === "divider"
               ? component.orientation === "vertical"
                 ? "bottom-0 left-1/2 cursor-s-resize" // 세로 구분선: 하단 중앙
diff --git a/frontend/components/report/designer/ComponentPalette.tsx b/frontend/components/report/designer/ComponentPalette.tsx
index 68f445c4..59701f1d 100644
--- a/frontend/components/report/designer/ComponentPalette.tsx
+++ b/frontend/components/report/designer/ComponentPalette.tsx
@@ -35,7 +35,7 @@ function DraggableComponentItem({ type, label, icon }: ComponentItem) {
   return (
     <div
       ref={drag}
-      className={`flex cursor-move items-center gap-2 rounded border p-2 text-sm transition-all hover:border-blue-500 hover:bg-blue-50 ${
+      className={`flex cursor-move items-center gap-2 rounded border p-2 text-sm transition-all hover:border-primary hover:bg-primary/10 ${
         isDragging ? "opacity-50" : ""
       }`}
     >
diff --git a/frontend/components/report/designer/GridSettingsPanel.tsx b/frontend/components/report/designer/GridSettingsPanel.tsx
index 301514ba..3513f488 100644
--- a/frontend/components/report/designer/GridSettingsPanel.tsx
+++ b/frontend/components/report/designer/GridSettingsPanel.tsx
@@ -57,7 +57,7 @@ export function GridSettingsPanel() {
         <div className="space-y-2">
           <div className="flex items-center justify-between">
             <Label className="text-xs">셀 너비</Label>
-            <span className="text-xs text-gray-500">{gridConfig.cellWidth}px</span>
+            <span className="text-xs text-muted-foreground">{gridConfig.cellWidth}px</span>
           </div>
           <Slider
             value={[gridConfig.cellWidth]}
@@ -73,7 +73,7 @@ export function GridSettingsPanel() {
         <div className="space-y-2">
           <div className="flex items-center justify-between">
             <Label className="text-xs">셀 높이</Label>
-            <span className="text-xs text-gray-500">{gridConfig.cellHeight}px</span>
+            <span className="text-xs text-muted-foreground">{gridConfig.cellHeight}px</span>
           </div>
           <Slider
             value={[gridConfig.cellHeight]}
@@ -89,7 +89,7 @@ export function GridSettingsPanel() {
         <div className="space-y-2">
           <div className="flex items-center justify-between">
             <Label className="text-xs">투명도</Label>
-            <span className="text-xs text-gray-500">{Math.round(gridConfig.gridOpacity * 100)}%</span>
+            <span className="text-xs text-muted-foreground">{Math.round(gridConfig.gridOpacity * 100)}%</span>
           </div>
           <Slider
             value={[gridConfig.gridOpacity * 100]}
@@ -122,7 +122,7 @@ export function GridSettingsPanel() {
         </div>
 
         {/* 그리드 정보 */}
-        <div className="rounded border bg-gray-50 p-2 text-xs text-gray-600">
+        <div className="rounded border bg-muted p-2 text-xs text-muted-foreground">
           <div className="flex justify-between">
             <span>행:</span>
             <span className="font-mono">{gridConfig.rows}</span>
diff --git a/frontend/components/report/designer/QueryManager.tsx b/frontend/components/report/designer/QueryManager.tsx
index 39b0d173..19fdc0d3 100644
--- a/frontend/components/report/designer/QueryManager.tsx
+++ b/frontend/components/report/designer/QueryManager.tsx
@@ -264,7 +264,7 @@ export function QueryManager() {
               const queryParamTypes = parameterTypes[query.id] || {};
 
               return (
-                <AccordionItem key={query.id} value={query.id} className="border-b border-gray-200">
+                <AccordionItem key={query.id} value={query.id} className="border-b border-border">
                   <div className="flex items-center gap-1">
                     <AccordionTrigger className="flex-1 px-0 py-2.5 hover:no-underline">
                       <div className="flex items-center gap-2">
@@ -280,7 +280,7 @@ export function QueryManager() {
                         onClick={(e) => handleDeleteQuery(query.id, e)}
                       className="h-7 w-7 shrink-0 p-0"
                       >
-                        <Trash2 className="h-4 w-4 text-red-500" />
+                        <Trash2 className="h-4 w-4 text-destructive" />
                       </Button>
                     </div>
                   <AccordionContent className="space-y-4 pt-1 pr-0 pb-3 pl-0">
@@ -339,7 +339,7 @@ export function QueryManager() {
                           </SelectItem>
                           {externalConnections.length > 0 && (
                             <>
-                              <div className="px-2 py-1.5 text-xs font-semibold text-gray-500">외부 DB</div>
+                              <div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground">외부 DB</div>
                               {externalConnections.map((conn) => (
                                 <SelectItem key={conn.id} value={conn.id.toString()}>
                                   <div className="flex items-center gap-2">
@@ -369,9 +369,9 @@ export function QueryManager() {
 
                     {/* 파라미터 입력 */}
                     {query.parameters.length > 0 && (
-                      <div className="space-y-3 rounded-md border border-yellow-200 bg-yellow-50 p-3">
+                      <div className="space-y-3 rounded-md border border-amber-200 bg-amber-50 p-3">
                         <div className="flex items-center gap-2">
-                          <AlertCircle className="h-4 w-4 text-yellow-600" />
+                          <AlertCircle className="h-4 w-4 text-amber-600" />
                           <Label className="text-xs font-semibold text-yellow-800">파라미터</Label>
                         </div>
                         <div className="space-y-2">
@@ -435,7 +435,7 @@ export function QueryManager() {
                     <Button
                       size="sm"
                       variant="default"
-                      className="w-full bg-red-500 hover:bg-red-600"
+                      className="w-full bg-destructive hover:bg-destructive"
                       onClick={() => handleTestQuery(query)}
                       disabled={!queryValidation.isValid || isTestRunning[query.id] || !isAllParametersFilled(query)}
                     >
@@ -445,8 +445,8 @@ export function QueryManager() {
 
                     {/* 결과 필드 */}
                     {testResult && (
-                      <div className="space-y-2 rounded-md border border-green-200 bg-green-50 p-3">
-                        <Label className="text-xs font-semibold text-green-800">결과 필드</Label>
+                      <div className="space-y-2 rounded-md border border-emerald-200 bg-emerald-50 p-3">
+                        <Label className="text-xs font-semibold text-emerald-800">결과 필드</Label>
                         <div className="flex flex-wrap gap-2">
                           {testResult.fields.map((field) => (
                             <Badge key={field} variant="default" className="bg-teal-500">
@@ -454,7 +454,7 @@ export function QueryManager() {
                             </Badge>
                           ))}
                         </div>
-                        <p className="text-xs text-green-700">{testResult.rows.length}건의 데이터가 조회되었습니다.</p>
+                        <p className="text-xs text-emerald-700">{testResult.rows.length}건의 데이터가 조회되었습니다.</p>
                       </div>
                     )}
                   </AccordionContent>
@@ -464,8 +464,8 @@ export function QueryManager() {
           </Accordion>
         ) : (
           <div className="flex flex-col items-center justify-center py-8 text-center">
-            <Database className="mb-2 h-12 w-12 text-gray-300" />
-            <p className="text-sm text-gray-500">
+            <Database className="mb-2 h-12 w-12 text-muted-foreground/50" />
+            <p className="text-sm text-muted-foreground">
               쿼리를 추가하여 리포트에
               <br />
               데이터를 연결하세요
diff --git a/frontend/components/report/designer/ReportDesignerCanvas.tsx b/frontend/components/report/designer/ReportDesignerCanvas.tsx
index 07df9a4f..386f4ca3 100644
--- a/frontend/components/report/designer/ReportDesignerCanvas.tsx
+++ b/frontend/components/report/designer/ReportDesignerCanvas.tsx
@@ -715,17 +715,17 @@ export function ReportDesignerCanvas() {
   // 페이지가 없는 경우
   if (!currentPageId || !currentPage) {
     return (
-      <div className="flex flex-1 flex-col items-center justify-center bg-gray-100">
+      <div className="flex flex-1 flex-col items-center justify-center bg-muted">
         <div className="text-center">
-          <h3 className="text-lg font-semibold text-gray-700">페이지가 없습니다</h3>
-          <p className="mt-2 text-sm text-gray-500">좌측에서 페이지를 추가하세요.</p>
+          <h3 className="text-lg font-semibold text-foreground">페이지가 없습니다</h3>
+          <p className="mt-2 text-sm text-muted-foreground">좌측에서 페이지를 추가하세요.</p>
         </div>
       </div>
     );
   }
 
   return (
-    <div className="flex flex-1 flex-col overflow-hidden bg-gray-100">
+    <div className="flex flex-1 flex-col overflow-hidden bg-muted">
       {/* 캔버스 스크롤 영역 */}
       <div className="flex flex-1 items-center justify-center overflow-auto px-8 pt-[280px] pb-8">
         {/* 눈금자와 캔버스를 감싸는 컨테이너 */}
@@ -734,7 +734,7 @@ export function ReportDesignerCanvas() {
           {showRuler && (
             <div className="flex">
               {/* 좌상단 코너 (20x20) */}
-              <div className="h-5 w-5 bg-gray-200" />
+              <div className="h-5 w-5 bg-muted/80" />
               {/* 가로 눈금자 */}
               <Ruler orientation="horizontal" length={canvasWidth} />
             </div>
@@ -751,7 +751,7 @@ export function ReportDesignerCanvas() {
                 canvasRef.current = node;
                 drop(node);
               }}
-              className={`relative bg-white shadow-lg ${isOver ? "ring-2 ring-blue-500" : ""}`}
+              className={`relative bg-white shadow-lg ${isOver ? "ring-2 ring-ring" : ""}`}
               style={{
                 width: `${canvasWidth * MM_TO_PX}px`,
                 minHeight: `${canvasHeight * MM_TO_PX}px`,
@@ -770,7 +770,7 @@ export function ReportDesignerCanvas() {
               {/* 페이지 여백 가이드 */}
               {currentPage && (
                 <div
-                  className="pointer-events-none absolute border-2 border-dashed border-blue-300/50"
+                  className="pointer-events-none absolute border-2 border-dashed border-primary/40/50"
                   style={{
                     top: `${currentPage.margins.top * MM_TO_PX}px`,
                     left: `${currentPage.margins.left * MM_TO_PX}px`,
@@ -823,7 +823,7 @@ export function ReportDesignerCanvas() {
               {/* 드래그 영역 선택 사각형 */}
               {isMarqueeSelecting && (
                 <div
-                  className="pointer-events-none absolute border-2 border-blue-500 bg-blue-500/10"
+                  className="pointer-events-none absolute border-2 border-primary bg-primary/10"
                   style={{
                     left: `${getMarqueeRect().left}px`,
                     top: `${getMarqueeRect().top}px`,
@@ -836,7 +836,7 @@ export function ReportDesignerCanvas() {
 
               {/* 빈 캔버스 안내 */}
               {components.length === 0 && (
-                <div className="absolute inset-0 flex items-center justify-center text-gray-400">
+                <div className="absolute inset-0 flex items-center justify-center text-muted-foreground/70">
                   <p className="text-sm">왼쪽에서 컴포넌트를 드래그하여 추가하세요</p>
                 </div>
               )}
diff --git a/frontend/components/report/designer/ReportDesignerRightPanel.tsx b/frontend/components/report/designer/ReportDesignerRightPanel.tsx
index 7fcfed4e..f13ec032 100644
--- a/frontend/components/report/designer/ReportDesignerRightPanel.tsx
+++ b/frontend/components/report/designer/ReportDesignerRightPanel.tsx
@@ -188,7 +188,7 @@ export function ReportDesignerRightPanel() {
           <ScrollArea className="h-full">
             <div className="space-y-4 p-4">
               {!selectedComponent ? (
-                <div className="flex h-full items-center justify-center p-4 text-center text-sm text-gray-500">
+                <div className="flex h-full items-center justify-center p-4 text-center text-sm text-muted-foreground">
                   컴포넌트를 선택하면 속성을 편집할 수 있습니다
                 </div>
               ) : (
@@ -274,8 +274,8 @@ export function ReportDesignerRightPanel() {
                     </div>
 
                     {/* 스타일링 섹션 */}
-                    <div className="space-y-3 rounded-md border border-gray-200 bg-gray-50 p-3">
-                      <h4 className="text-xs font-semibold text-gray-700">스타일</h4>
+                    <div className="space-y-3 rounded-md border border-border bg-muted p-3">
+                      <h4 className="text-xs font-semibold text-foreground">스타일</h4>
 
                       {/* 글꼴 크기 */}
                       <div>
@@ -411,7 +411,7 @@ export function ReportDesignerRightPanel() {
                         <Label className="text-xs">테두리</Label>
                         <div className="grid grid-cols-2 gap-2">
                           <div>
-                            <Label className="text-xs text-gray-600">두께</Label>
+                            <Label className="text-xs text-muted-foreground">두께</Label>
                             <Input
                               type="number"
                               min="0"
@@ -426,7 +426,7 @@ export function ReportDesignerRightPanel() {
                             />
                           </div>
                           <div>
-                            <Label className="text-xs text-gray-600">색상</Label>
+                            <Label className="text-xs text-muted-foreground">색상</Label>
                             <Input
                               type="color"
                               value={selectedComponent.borderColor || "#cccccc"}
@@ -444,7 +444,7 @@ export function ReportDesignerRightPanel() {
 
                     {/* 테이블 스타일 */}
                     {selectedComponent.type === "table" && (
-                      <Card className="mt-4 border-indigo-200 bg-indigo-50">
+                      <Card className="mt-4 border-primary/20 bg-indigo-50">
                         <CardHeader className="pb-3">
                           <CardTitle className="text-sm text-indigo-900">테이블 스타일</CardTitle>
                         </CardHeader>
@@ -581,7 +581,7 @@ export function ReportDesignerRightPanel() {
                                 )}
                               </Button>
                             </div>
-                            <p className="mt-1 text-xs text-gray-500">JPG, PNG, GIF, WEBP (최대 10MB)</p>
+                            <p className="mt-1 text-xs text-muted-foreground">JPG, PNG, GIF, WEBP (최대 10MB)</p>
                             {selectedComponent.imageUrl && (
                               <p className="mt-2 truncate text-xs text-purple-600">
                                 현재: {selectedComponent.imageUrl}
@@ -616,9 +616,9 @@ export function ReportDesignerRightPanel() {
 
                     {/* 구분선 속성 */}
                     {selectedComponent.type === "divider" && (
-                      <Card className="mt-4 border-gray-200 bg-gray-50">
+                      <Card className="mt-4 border-border bg-muted">
                         <CardHeader className="pb-3">
-                          <CardTitle className="text-sm text-gray-900">구분선 설정</CardTitle>
+                          <CardTitle className="text-sm text-foreground">구분선 설정</CardTitle>
                         </CardHeader>
                         <CardContent className="space-y-3">
                           <div>
@@ -716,7 +716,7 @@ export function ReportDesignerRightPanel() {
 
                     {/* 서명/도장 속성 */}
                     {(selectedComponent.type === "signature" || selectedComponent.type === "stamp") && (
-                      <Card className="mt-4 border-indigo-200 bg-indigo-50">
+                      <Card className="mt-4 border-primary/20 bg-indigo-50">
                         <CardHeader className="pb-3">
                           <CardTitle className="text-sm text-indigo-900">
                             {selectedComponent.type === "signature" ? "서명란 설정" : "도장란 설정"}
@@ -790,9 +790,9 @@ export function ReportDesignerRightPanel() {
                                       )}
                                     </Button>
                                   </div>
-                                  <p className="text-xs text-gray-500">JPG, PNG, GIF, WEBP (최대 10MB)</p>
+                                  <p className="text-xs text-muted-foreground">JPG, PNG, GIF, WEBP (최대 10MB)</p>
                                   {selectedComponent.imageUrl && !selectedComponent.imageUrl.startsWith("data:") && (
-                                    <p className="truncate text-xs text-indigo-600">
+                                    <p className="truncate text-xs text-primary">
                                       현재: {selectedComponent.imageUrl}
                                     </p>
                                   )}
@@ -850,9 +850,9 @@ export function ReportDesignerRightPanel() {
                                   )}
                                 </Button>
                               </div>
-                              <p className="mt-1 text-xs text-gray-500">JPG, PNG, GIF, WEBP (최대 10MB)</p>
+                              <p className="mt-1 text-xs text-muted-foreground">JPG, PNG, GIF, WEBP (최대 10MB)</p>
                               {selectedComponent.imageUrl && !selectedComponent.imageUrl.startsWith("data:") && (
-                                <p className="mt-2 truncate text-xs text-indigo-600">
+                                <p className="mt-2 truncate text-xs text-primary">
                                   현재: {selectedComponent.imageUrl}
                                 </p>
                               )}
@@ -962,7 +962,7 @@ export function ReportDesignerRightPanel() {
                                 placeholder="예: 홍길동"
                                 className="h-8"
                               />
-                              <p className="mt-1 text-xs text-gray-500">도장 옆에 표시될 이름</p>
+                              <p className="mt-1 text-xs text-muted-foreground">도장 옆에 표시될 이름</p>
                             </div>
                           )}
                         </CardContent>
@@ -1228,7 +1228,7 @@ export function ReportDesignerRightPanel() {
                                       <Button
                                         size="sm"
                                         variant="ghost"
-                                        className="h-5 w-5 p-0 text-red-500 hover:text-red-700"
+                                        className="h-5 w-5 p-0 text-destructive hover:text-destructive"
                                         onClick={() => {
                                           const currentItems = [...(selectedComponent.cardItems || [])];
                                           currentItems.splice(index, 1);
@@ -1323,7 +1323,7 @@ export function ReportDesignerRightPanel() {
 
                     {/* 계산 컴포넌트 설정 */}
                     {selectedComponent.type === "calculation" && (
-                      <Card className="mt-4 border-orange-200 bg-orange-50">
+                      <Card className="mt-4 border-orange-200 bg-amber-50">
                         <CardHeader className="pb-3">
                           <CardTitle className="text-sm text-orange-900">계산 설정</CardTitle>
                         </CardHeader>
@@ -1554,7 +1554,7 @@ export function ReportDesignerRightPanel() {
                                     <Button
                                       size="sm"
                                       variant="ghost"
-                                      className="h-5 w-5 p-0 text-red-500 hover:text-red-700"
+                                      className="h-5 w-5 p-0 text-destructive hover:text-destructive"
                                       onClick={() => {
                                         const currentItems = [...(selectedComponent.calcItems || [])];
                                         currentItems.splice(index, 1);
@@ -1746,7 +1746,7 @@ export function ReportDesignerRightPanel() {
                               {(selectedComponent.barcodeType === "EAN13" || 
                                 selectedComponent.barcodeType === "EAN8" || 
                                 selectedComponent.barcodeType === "UPC") && (
-                                <p className="mt-1 text-[10px] text-gray-500">
+                                <p className="mt-1 text-[10px] text-muted-foreground">
                                   {selectedComponent.barcodeType === "EAN13" && "EAN-13: 12~13자리 숫자 필요"}
                                   {selectedComponent.barcodeType === "EAN8" && "EAN-8: 7~8자리 숫자 필요"}
                                   {selectedComponent.barcodeType === "UPC" && "UPC: 11~12자리 숫자 필요"}
@@ -1772,7 +1772,7 @@ export function ReportDesignerRightPanel() {
                                         ...(e.target.checked && { barcodeFieldName: "" }),
                                       })
                                     }
-                                    className="h-4 w-4 rounded border-gray-300"
+                                    className="h-4 w-4 rounded border-input"
                                   />
                                   <Label htmlFor="qrUseMultiField" className="text-xs">
                                     다중 필드 (JSON 형식)
@@ -1886,7 +1886,7 @@ export function ReportDesignerRightPanel() {
                                         <Button
                                           variant="ghost"
                                           size="sm"
-                                          className="h-7 w-7 p-0 text-red-500 hover:text-red-700"
+                                          className="h-7 w-7 p-0 text-destructive hover:text-destructive"
                                           onClick={() => {
                                             const newFields = (selectedComponent.qrDataFields || []).filter(
                                               (_, i) => i !== index
@@ -1901,12 +1901,12 @@ export function ReportDesignerRightPanel() {
                                   </div>
                                   
                                   {(selectedComponent.qrDataFields || []).length === 0 && (
-                                    <p className="text-center text-xs text-gray-400">
+                                    <p className="text-center text-xs text-muted-foreground/70">
                                       필드를 추가하세요
                                     </p>
                                   )}
                                   
-                                  <p className="text-[10px] text-gray-500">
+                                  <p className="text-[10px] text-muted-foreground">
                                     결과: {selectedComponent.qrIncludeAllRows 
                                       ? `[{"${(selectedComponent.qrDataFields || []).map(f => f.label || "key").join('":"값","')}"}, ...]`
                                       : `{"${(selectedComponent.qrDataFields || []).map(f => f.label || "key").join('":"값","')}":"값"}`
@@ -1929,7 +1929,7 @@ export function ReportDesignerRightPanel() {
                                     qrIncludeAllRows: e.target.checked,
                                   })
                                 }
-                                className="h-4 w-4 rounded border-gray-300"
+                                className="h-4 w-4 rounded border-input"
                               />
                               <Label htmlFor="qrIncludeAllRows" className="text-xs">
                                 모든 행 포함 (배열)
@@ -1949,7 +1949,7 @@ export function ReportDesignerRightPanel() {
                                     showBarcodeText: e.target.checked,
                                   })
                                 }
-                                className="h-4 w-4 rounded border-gray-300"
+                                className="h-4 w-4 rounded border-input"
                               />
                               <Label htmlFor="showBarcodeText" className="text-xs">
                                 바코드 아래 텍스트 표시
@@ -1979,7 +1979,7 @@ export function ReportDesignerRightPanel() {
                                   <SelectItem value="H">H (30% 복구)</SelectItem>
                                 </SelectContent>
                               </Select>
-                              <p className="mt-1 text-[10px] text-gray-500">
+                              <p className="mt-1 text-[10px] text-muted-foreground">
                                 높을수록 손상에 강하지만 크기 증가
                               </p>
                             </div>
@@ -2061,7 +2061,7 @@ export function ReportDesignerRightPanel() {
                                     checkboxChecked: e.target.checked,
                                   })
                                 }
-                                className="h-4 w-4 rounded border-gray-300"
+                                className="h-4 w-4 rounded border-input"
                               />
                               <Label htmlFor="checkboxChecked" className="text-xs">
                                 체크됨
@@ -2100,7 +2100,7 @@ export function ReportDesignerRightPanel() {
                                   })()}
                                 </SelectContent>
                               </Select>
-                              <p className="mt-1 text-[10px] text-gray-500">
+                              <p className="mt-1 text-[10px] text-muted-foreground">
                                 true, "Y", 1 등 truthy 값이면 체크됨
                               </p>
                             </div>
@@ -2206,11 +2206,11 @@ export function ReportDesignerRightPanel() {
                       selectedComponent.type === "table" ||
                       selectedComponent.type === "barcode" ||
                       selectedComponent.type === "checkbox") && (
-                      <Card className="mt-4 border-blue-200 bg-blue-50">
+                      <Card className="mt-4 border-primary/20 bg-primary/10">
                         <CardHeader className="pb-3">
                           <div className="flex items-center gap-2">
-                            <Link2 className="h-4 w-4 text-blue-600" />
-                            <CardTitle className="text-sm text-blue-900">데이터 바인딩</CardTitle>
+                            <Link2 className="h-4 w-4 text-primary" />
+                            <CardTitle className="text-sm text-primary">데이터 바인딩</CardTitle>
                           </div>
                         </CardHeader>
                         <CardContent className="space-y-3">
@@ -2276,7 +2276,7 @@ export function ReportDesignerRightPanel() {
 
                           {/* 테이블 컬럼 설정 */}
                           {selectedComponent.queryId && selectedComponent.type === "table" && (
-                            <Card className="border-green-200 bg-green-50">
+                            <Card className="border-emerald-200 bg-emerald-50">
                               <CardHeader className="pb-2">
                                 <CardTitle className="text-xs text-green-900">컬럼 설정</CardTitle>
                               </CardHeader>
@@ -2305,13 +2305,13 @@ export function ReportDesignerRightPanel() {
                                 {selectedComponent.tableColumns && selectedComponent.tableColumns.length > 0 && (
                                   <div className="mt-3 space-y-2">
                                     {selectedComponent.tableColumns.map((col, idx) => (
-                                      <div key={idx} className="space-y-1 rounded border border-green-200 bg-white p-2">
+                                      <div key={idx} className="space-y-1 rounded border border-emerald-200 bg-white p-2">
                                         <div className="flex items-center justify-between">
-                                          <span className="text-xs font-medium text-gray-700">컬럼 {idx + 1}</span>
+                                          <span className="text-xs font-medium text-foreground">컬럼 {idx + 1}</span>
                                           <Button
                                             size="sm"
                                             variant="ghost"
-                                            className="h-5 w-5 p-0 text-red-500 hover:bg-red-50"
+                                            className="h-5 w-5 p-0 text-destructive hover:bg-destructive/10"
                                             onClick={() => {
                                               const newColumns = [...selectedComponent.tableColumns!];
                                               newColumns.splice(idx, 1);
@@ -2833,7 +2833,7 @@ export function ReportDesignerRightPanel() {
                                       })
                                     }
                                   >
-                                    <Trash2 className="h-4 w-4 text-red-500" />
+                                    <Trash2 className="h-4 w-4 text-destructive" />
                                   </Button>
                                 )}
                               </div>
@@ -2841,7 +2841,7 @@ export function ReportDesignerRightPanel() {
                                 JPG, PNG, GIF, WEBP (최대 5MB)
                               </p>
                               {layoutConfig.watermark?.imageUrl && (
-                                <p className="mt-1 max-w-full overflow-hidden text-ellipsis whitespace-nowrap text-xs text-indigo-600">
+                                <p className="mt-1 max-w-full overflow-hidden text-ellipsis whitespace-nowrap text-xs text-primary">
                                   현재: ...{layoutConfig.watermark.imageUrl.slice(-30)}
                                 </p>
                               )}
diff --git a/frontend/components/report/designer/ReportDesignerToolbar.tsx b/frontend/components/report/designer/ReportDesignerToolbar.tsx
index acb0fc94..8438287f 100644
--- a/frontend/components/report/designer/ReportDesignerToolbar.tsx
+++ b/frontend/components/report/designer/ReportDesignerToolbar.tsx
@@ -219,13 +219,13 @@ export function ReportDesignerToolbar() {
             <ArrowLeft className="h-4 w-4" />
             목록으로
           </Button>
-          <div className="h-6 w-px bg-gray-300" />
+          <div className="h-6 w-px bg-muted/60" />
           <div>
-            <h2 className="text-lg font-semibold text-gray-900">
+            <h2 className="text-lg font-semibold text-foreground">
               {reportDetail?.report.report_name_kor || "리포트 디자이너"}
             </h2>
             {reportDetail?.report.report_name_eng && (
-              <p className="text-sm text-gray-500">{reportDetail.report.report_name_eng}</p>
+              <p className="text-sm text-muted-foreground">{reportDetail.report.report_name_eng}</p>
             )}
           </div>
         </div>
diff --git a/frontend/components/report/designer/ReportPreviewModal.tsx b/frontend/components/report/designer/ReportPreviewModal.tsx
index 7069bb75..bc7fc774 100644
--- a/frontend/components/report/designer/ReportPreviewModal.tsx
+++ b/frontend/components/report/designer/ReportPreviewModal.tsx
@@ -1156,7 +1156,7 @@ export function ReportPreviewModal({ isOpen, onClose }: ReportPreviewModalProps)
         </DialogHeader>
 
         {/* 미리보기 영역 - 모든 페이지 표시 */}
-        <div className="max-h-[500px] overflow-auto rounded border bg-gray-100 p-4">
+        <div className="max-h-[500px] overflow-auto rounded border bg-muted p-4">
           <div className="space-y-4">
             {layoutConfig.pages
               .sort((a, b) => a.page_order - b.page_order)
@@ -1294,7 +1294,7 @@ export function ReportPreviewModal({ isOpen, onClose }: ReportPreviewModalProps)
                               );
                             })()
                           ) : component.type === "table" ? (
-                            <div className="text-xs text-gray-400">쿼리를 실행해주세요</div>
+                            <div className="text-xs text-muted-foreground/70">쿼리를 실행해주세요</div>
                           ) : null}
 
                           {component.type === "image" && component.imageUrl && (
diff --git a/frontend/components/report/designer/Ruler.tsx b/frontend/components/report/designer/Ruler.tsx
index e293c593..50704316 100644
--- a/frontend/components/report/designer/Ruler.tsx
+++ b/frontend/components/report/designer/Ruler.tsx
@@ -31,7 +31,7 @@ export function Ruler({ orientation, length, offset = 0 }: RulerProps) {
         ticks.push(
           <div
             key={`major-${mm}`}
-            className="absolute bg-gray-700"
+            className="absolute bg-foreground/90"
             style={
               isHorizontal
                 ? {
@@ -55,7 +55,7 @@ export function Ruler({ orientation, length, offset = 0 }: RulerProps) {
           ticks.push(
             <div
               key={`label-${mm}`}
-              className="absolute text-[9px] text-gray-600"
+              className="absolute text-[9px] text-muted-foreground"
               style={
                 isHorizontal
                   ? {
@@ -79,7 +79,7 @@ export function Ruler({ orientation, length, offset = 0 }: RulerProps) {
         ticks.push(
           <div
             key={`medium-${mm}`}
-            className="absolute bg-gray-500"
+            className="absolute bg-muted0"
             style={
               isHorizontal
                 ? {
@@ -103,7 +103,7 @@ export function Ruler({ orientation, length, offset = 0 }: RulerProps) {
         ticks.push(
           <div
             key={`minor-${mm}`}
-            className="absolute bg-gray-400"
+            className="absolute bg-muted-foreground"
             style={
               isHorizontal
                 ? {
@@ -129,7 +129,7 @@ export function Ruler({ orientation, length, offset = 0 }: RulerProps) {
 
   return (
     <div
-      className="relative bg-gray-100 select-none"
+      className="relative bg-muted select-none"
       style={
         isHorizontal
           ? {
diff --git a/frontend/components/report/designer/SaveAsTemplateModal.tsx b/frontend/components/report/designer/SaveAsTemplateModal.tsx
index 7b471bb8..4b1a6797 100644
--- a/frontend/components/report/designer/SaveAsTemplateModal.tsx
+++ b/frontend/components/report/designer/SaveAsTemplateModal.tsx
@@ -81,7 +81,7 @@ export function SaveAsTemplateModal({ isOpen, onClose, onSave }: SaveAsTemplateM
         <div className="space-y-4 py-4">
           <div className="space-y-2">
             <Label htmlFor="templateNameKor">
-              템플릿명 (한국어) <span className="text-red-500">*</span>
+              템플릿명 (한국어) <span className="text-destructive">*</span>
             </Label>
             <Input
               id="templateNameKor"
diff --git a/frontend/components/report/designer/SignatureGenerator.tsx b/frontend/components/report/designer/SignatureGenerator.tsx
index a36b0b8c..a055bef4 100644
--- a/frontend/components/report/designer/SignatureGenerator.tsx
+++ b/frontend/components/report/designer/SignatureGenerator.tsx
@@ -240,7 +240,7 @@ export function SignatureGenerator({ onSignatureSelect }: SignatureGeneratorProp
       {generatedSignatures.length > 0 && (
         <div className="space-y-2">
           <Label className="text-xs">레이블 위치</Label>
-          <p className="text-xs text-gray-500">더블클릭하여 서명을 선택하세요</p>
+          <p className="text-xs text-muted-foreground">더블클릭하여 서명을 선택하세요</p>
           <ScrollArea className="h-[300px] rounded-md border bg-white">
             <div className="space-y-2 p-2">
               {generatedSignatures.map((signature, index) => (
@@ -255,7 +255,7 @@ export function SignatureGenerator({ onSignatureSelect }: SignatureGeneratorProp
                       alt={`서명 ${index + 1}`}
                       className="h-auto max-h-[45px] w-auto max-w-[280px] object-contain"
                     />
-                    <p className="ml-2 text-xs text-gray-400 opacity-0 transition-opacity group-hover:opacity-100">
+                    <p className="ml-2 text-xs text-muted-foreground/70 opacity-0 transition-opacity group-hover:opacity-100">
                       {fonts[index].name}
                     </p>
                   </div>
diff --git a/frontend/components/report/designer/SignaturePad.tsx b/frontend/components/report/designer/SignaturePad.tsx
index 3ed7b01e..079802e6 100644
--- a/frontend/components/report/designer/SignaturePad.tsx
+++ b/frontend/components/report/designer/SignaturePad.tsx
@@ -107,7 +107,7 @@ export function SignaturePad({ onSignatureChange, initialSignature }: SignatureP
 
   return (
     <div className="space-y-2">
-      <Card className="overflow-hidden border-2 border-dashed border-gray-300 bg-white p-2">
+      <Card className="overflow-hidden border-2 border-dashed border-input bg-white p-2">
         <canvas
           ref={canvasRef}
           width={300}
@@ -121,7 +121,7 @@ export function SignaturePad({ onSignatureChange, initialSignature }: SignatureP
         />
       </Card>
       <div className="flex items-center justify-between">
-        <p className="text-xs text-gray-500">
+        <p className="text-xs text-muted-foreground">
           <Pen className="mr-1 inline h-3 w-3" />
           마우스로 서명해주세요
         </p>
diff --git a/frontend/components/report/designer/TemplatePalette.tsx b/frontend/components/report/designer/TemplatePalette.tsx
index 27a062ad..1c6826e6 100644
--- a/frontend/components/report/designer/TemplatePalette.tsx
+++ b/frontend/components/report/designer/TemplatePalette.tsx
@@ -102,10 +102,10 @@ export function TemplatePalette() {
 
         {isLoading ? (
           <div className="flex items-center justify-center py-4">
-            <Loader2 className="h-4 w-4 animate-spin text-gray-400" />
+            <Loader2 className="h-4 w-4 animate-spin text-muted-foreground/70" />
           </div>
         ) : customTemplates.length === 0 ? (
-          <p className="py-4 text-center text-xs text-gray-400">저장된 템플릿이 없습니다</p>
+          <p className="py-4 text-center text-xs text-muted-foreground/70">저장된 템플릿이 없습니다</p>
         ) : (
           customTemplates.map((template) => (
             <div key={template.template_id} className="group relative">
@@ -131,7 +131,7 @@ export function TemplatePalette() {
                 {deletingId === template.template_id ? (
                   <Loader2 className="h-3 w-3 animate-spin" />
                 ) : (
-                  <Trash2 className="h-3 w-3 text-red-500" />
+                  <Trash2 className="h-3 w-3 text-destructive" />
                 )}
               </Button>
             </div>
diff --git a/frontend/components/screen-embedding/ScreenSplitPanel.tsx b/frontend/components/screen-embedding/ScreenSplitPanel.tsx
index 2f30a4ec..1fb412d3 100644
--- a/frontend/components/screen-embedding/ScreenSplitPanel.tsx
+++ b/frontend/components/screen-embedding/ScreenSplitPanel.tsx
@@ -8,10 +8,11 @@
 
 "use client";
 
-import React, { useState, useCallback, useMemo } from "react";
+import React, { useMemo } from "react";
 import { EmbeddedScreen } from "./EmbeddedScreen";
 import { Columns2 } from "lucide-react";
 import { SplitPanelProvider } from "@/contexts/SplitPanelContext";
+import { ResponsiveSplitPanel } from "@/components/common/ResponsiveSplitPanel";
 
 interface ScreenSplitPanelProps {
   screenId?: number;
@@ -27,28 +28,21 @@ interface ScreenSplitPanelProps {
 export function ScreenSplitPanel({ screenId, config, initialFormData, groupedData }: ScreenSplitPanelProps) {
   // config에서 splitRatio 추출 (기본값 50)
   const configSplitRatio = config?.splitRatio ?? 50;
-  
-  
-  // 드래그로 조절 가능한 splitRatio 상태
-  const [splitRatio, setSplitRatio] = useState(configSplitRatio);
-  
-  // config.splitRatio가 변경되면 동기화 (설정 패널에서 변경 시)
-  React.useEffect(() => {
-    setSplitRatio(configSplitRatio);
-  }, [configSplitRatio]);
 
   // 설정 패널에서 오는 간단한 config를 임베딩 설정으로 변환
+  const now = new Date().toISOString();
+
   const leftEmbedding = config?.leftScreenId
     ? {
         id: 1,
         parentScreenId: screenId || 0,
         childScreenId: config.leftScreenId,
         position: "left" as const,
-        mode: "view" as const, // 기본 view 모드 (select는 테이블 자체 설정)
+        mode: "view" as const,
         config: {},
         companyCode: "*",
-        createdAt: new Date(),
-        updatedAt: new Date(),
+        createdAt: now,
+        updatedAt: now,
       }
     : null;
 
@@ -58,21 +52,14 @@ export function ScreenSplitPanel({ screenId, config, initialFormData, groupedDat
         parentScreenId: screenId || 0,
         childScreenId: config.rightScreenId,
         position: "right" as const,
-        mode: "view" as const, // 기본 view 모드
+        mode: "view" as const,
         config: {},
         companyCode: "*",
-        createdAt: new Date(),
-        updatedAt: new Date(),
+        createdAt: now,
+        updatedAt: now,
       }
     : null;
 
-  /**
-   * 리사이저 드래그 핸들러
-   */
-  const handleResize = useCallback((newRatio: number) => {
-    setSplitRatio(Math.max(20, Math.min(80, newRatio)));
-  }, []);
-
   // config가 없는 경우 (디자이너 모드 또는 초기 상태)
   if (!config) {
     return (
@@ -114,58 +101,32 @@ export function ScreenSplitPanel({ screenId, config, initialFormData, groupedDat
       linkedFilters={config?.linkedFilters || []}
       disableAutoDataTransfer={config?.disableAutoDataTransfer ?? false}
     >
-      <div className="flex h-full">
-        {/* 좌측 패널 */}
-        <div style={{ width: `${splitRatio}%` }} className="h-full flex-shrink-0 overflow-hidden border-r">
-          {hasLeftScreen ? (
+      <ResponsiveSplitPanel
+        left={
+          hasLeftScreen ? (
             <EmbeddedScreen embedding={leftEmbedding!} position="left" initialFormData={initialFormData} groupedData={groupedData} />
           ) : (
             <div className="flex h-full items-center justify-center bg-muted/30">
               <p className="text-muted-foreground text-sm">좌측 화면을 선택하세요</p>
             </div>
-          )}
-        </div>
-
-        {/* 리사이저 */}
-        {config?.resizable !== false && (
-          <div
-            className="group bg-border hover:bg-primary/20 relative w-1 flex-shrink-0 cursor-col-resize transition-colors"
-            onMouseDown={(e) => {
-              e.preventDefault();
-              const startX = e.clientX;
-              const startRatio = splitRatio;
-              const containerWidth = e.currentTarget.parentElement!.offsetWidth;
-
-              const handleMouseMove = (moveEvent: MouseEvent) => {
-                const deltaX = moveEvent.clientX - startX;
-                const deltaRatio = (deltaX / containerWidth) * 100;
-                handleResize(startRatio + deltaRatio);
-              };
-
-              const handleMouseUp = () => {
-                document.removeEventListener("mousemove", handleMouseMove);
-                document.removeEventListener("mouseup", handleMouseUp);
-              };
-
-              document.addEventListener("mousemove", handleMouseMove);
-              document.addEventListener("mouseup", handleMouseUp);
-            }}
-          >
-            <div className="bg-primary absolute inset-y-0 left-1/2 w-1 -translate-x-1/2 opacity-0 transition-opacity group-hover:opacity-100" />
-          </div>
-        )}
-
-        {/* 우측 패널 */}
-        <div style={{ width: `${100 - splitRatio}%` }} className="h-full flex-shrink-0 overflow-hidden">
-          {hasRightScreen ? (
+          )
+        }
+        right={
+          hasRightScreen ? (
             <EmbeddedScreen embedding={rightEmbedding!} position="right" initialFormData={initialFormData} groupedData={groupedData} />
           ) : (
             <div className="flex h-full items-center justify-center bg-muted/30">
               <p className="text-muted-foreground text-sm">우측 화면을 선택하세요</p>
             </div>
-          )}
-        </div>
-      </div>
+          )
+        }
+        leftTitle="좌측 패널"
+        leftWidth={configSplitRatio}
+        minLeftWidth={20}
+        maxLeftWidth={80}
+        showResizer={config?.resizable !== false}
+        collapsedOnMobile={true}
+      />
     </SplitPanelProvider>
   );
 }
diff --git a/frontend/components/screen/CopyScreenModal.tsx b/frontend/components/screen/CopyScreenModal.tsx
index 070a0ce6..f8190ce7 100644
--- a/frontend/components/screen/CopyScreenModal.tsx
+++ b/frontend/components/screen/CopyScreenModal.tsx
@@ -1256,8 +1256,8 @@ export default function CopyScreenModal({
             )}
 
             {/* 원본 그룹 정보 */}
-            <div className="rounded-md bg-gray-50 p-3">
-              <h4 className="mb-2 text-sm font-medium text-gray-700">원본 그룹 정보</h4>
+            <div className="rounded-md bg-muted p-3">
+              <h4 className="mb-2 text-sm font-medium text-foreground">원본 그룹 정보</h4>
               <div className="space-y-1 text-sm text-muted-foreground">
                 <div>
                   <span className="font-medium">그룹명:</span> {sourceGroup?.group_name}
@@ -1540,7 +1540,7 @@ export default function CopyScreenModal({
                     id="useGroupBulkRename"
                     checked={useGroupBulkRename}
                     onChange={(e) => setUseGroupBulkRename(e.target.checked)}
-                    className="h-4 w-4 rounded border-gray-300"
+                    className="h-4 w-4 rounded border-input"
                   />
                   <label htmlFor="useGroupBulkRename" className="text-xs sm:text-sm">
                     폴더/화면 이름 일괄 변경 사용
@@ -1575,7 +1575,7 @@ export default function CopyScreenModal({
                       </p>
                     </div>
 
-                    <div className="rounded-md bg-gray-50 p-2 text-xs text-muted-foreground">
+                    <div className="rounded-md bg-muted p-2 text-xs text-muted-foreground">
                       <strong>미리보기:</strong>
                       <div className="mt-1">
                         "{sourceGroup?.group_name}" → "
diff --git a/frontend/components/screen/CreateScreenModal.tsx b/frontend/components/screen/CreateScreenModal.tsx
index a8bdcdf6..dd3b7216 100644
--- a/frontend/components/screen/CreateScreenModal.tsx
+++ b/frontend/components/screen/CreateScreenModal.tsx
@@ -318,7 +318,7 @@ export default function CreateScreenModal({ open, onOpenChange, onCreated, isPop
               value={screenCode}
               readOnly
               placeholder="자동 생성됩니다..."
-              className="cursor-not-allowed bg-gray-50"
+              className="cursor-not-allowed bg-muted"
             />
           </div>
 
@@ -396,10 +396,10 @@ export default function CreateScreenModal({ open, onOpenChange, onCreated, isPop
                             <Check
                               className={cn("mr-2 h-4 w-4", selectedDbSource === "internal" ? "opacity-100" : "opacity-0")}
                             />
-                            <Database className="mr-2 h-4 w-4 text-blue-500" />
+                            <Database className="mr-2 h-4 w-4 text-primary" />
                             <div className="flex flex-col">
                               <span className="font-medium">내부 데이터베이스</span>
-                              <span className="text-xs text-gray-500">PostgreSQL (현재 시스템)</span>
+                              <span className="text-xs text-muted-foreground">PostgreSQL (현재 시스템)</span>
                             </div>
                           </CommandItem>
                           {externalConnections.map((conn: any) => (
@@ -416,10 +416,10 @@ export default function CreateScreenModal({ open, onOpenChange, onCreated, isPop
                               <Check
                                 className={cn("mr-2 h-4 w-4", selectedDbSource === conn.id ? "opacity-100" : "opacity-0")}
                               />
-                              <Database className="mr-2 h-4 w-4 text-green-500" />
+                              <Database className="mr-2 h-4 w-4 text-emerald-500" />
                               <div className="flex flex-col">
                                 <span className="font-medium">{conn.connection_name}</span>
-                                <span className="text-xs text-gray-500">{conn.db_type?.toUpperCase()}</span>
+                                <span className="text-xs text-muted-foreground">{conn.db_type?.toUpperCase()}</span>
                               </div>
                             </CommandItem>
                           ))}
@@ -428,7 +428,7 @@ export default function CreateScreenModal({ open, onOpenChange, onCreated, isPop
                     </Command>
                   </PopoverContent>
                 </Popover>
-                <p className="text-xs text-gray-500">화면에서 사용할 데이터베이스를 선택합니다</p>
+                <p className="text-xs text-muted-foreground">화면에서 사용할 데이터베이스를 선택합니다</p>
               </div>
             </>
           )}
@@ -479,7 +479,7 @@ export default function CreateScreenModal({ open, onOpenChange, onCreated, isPop
                               <Globe className="mr-2 h-4 w-4 text-purple-500" />
                               <div className="flex flex-col">
                                 <span className="font-medium">{conn.connection_name}</span>
-                                <span className="text-xs text-gray-500 truncate max-w-[300px]">{conn.base_url}</span>
+                                <span className="text-xs text-muted-foreground truncate max-w-[300px]">{conn.base_url}</span>
                               </div>
                             </CommandItem>
                           ))}
@@ -488,7 +488,7 @@ export default function CreateScreenModal({ open, onOpenChange, onCreated, isPop
                     </Command>
                   </PopoverContent>
                 </Popover>
-                <p className="text-xs text-gray-500">
+                <p className="text-xs text-muted-foreground">
                   등록된 REST API 연결을 선택합니다.
                   <Link href="/admin/externalRestApi" className="ml-1 text-primary hover:underline">
                     새 연결 등록
@@ -505,7 +505,7 @@ export default function CreateScreenModal({ open, onOpenChange, onCreated, isPop
                   onChange={(e) => setRestApiEndpoint(e.target.value)}
                   placeholder="/api/data 또는 /users"
                 />
-                <p className="text-xs text-gray-500">기본 URL 뒤에 추가될 경로 (선택사항)</p>
+                <p className="text-xs text-muted-foreground">기본 URL 뒤에 추가될 경로 (선택사항)</p>
               </div>
 
               {/* JSON Path */}
@@ -517,7 +517,7 @@ export default function CreateScreenModal({ open, onOpenChange, onCreated, isPop
                   onChange={(e) => setRestApiJsonPath(e.target.value)}
                   placeholder="data 또는 result.items"
                 />
-                <p className="text-xs text-gray-500">API 응답에서 데이터 배열을 추출할 경로 (예: data, result.items)</p>
+                <p className="text-xs text-muted-foreground">API 응답에서 데이터 배열을 추출할 경로 (예: data, result.items)</p>
               </div>
             </>
           )}
@@ -548,7 +548,7 @@ export default function CreateScreenModal({ open, onOpenChange, onCreated, isPop
                 {/* 검색 입력 필드 */}
                 <div className="sticky top-0 z-10 border-b bg-white p-2" onKeyDown={(e) => e.stopPropagation()}>
                   <div className="relative">
-                    <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform text-gray-400" />
+                    <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform text-muted-foreground/70" />
                     <input
                       ref={searchInputRef}
                       type="text"
@@ -572,7 +572,7 @@ export default function CreateScreenModal({ open, onOpenChange, onCreated, isPop
                           e.stopPropagation();
                           setTableSearchTerm("");
                         }}
-                        className="hover:text-muted-foreground absolute top-1/2 right-2 h-4 w-4 -translate-y-1/2 transform text-gray-400"
+                        className="hover:text-muted-foreground absolute top-1/2 right-2 h-4 w-4 -translate-y-1/2 transform text-muted-foreground/70"
                       >
                         <X className="h-3 w-3" />
                       </button>
@@ -585,7 +585,7 @@ export default function CreateScreenModal({ open, onOpenChange, onCreated, isPop
                   {selectedDbSource === "internal" ? (
                     // 내부 DB 테이블 목록
                     filteredTables.length === 0 ? (
-                      <div className="px-2 py-6 text-center text-sm text-gray-500">
+                      <div className="px-2 py-6 text-center text-sm text-muted-foreground">
                         {tableSearchTerm ? `"${tableSearchTerm}"에 대한 검색 결과가 없습니다` : "테이블이 없습니다"}
                       </div>
                     ) : (
@@ -597,7 +597,7 @@ export default function CreateScreenModal({ open, onOpenChange, onCreated, isPop
                     )
                   ) : // 외부 DB 테이블 목록
                   filteredExternalTables.length === 0 ? (
-                    <div className="px-2 py-6 text-center text-sm text-gray-500">
+                    <div className="px-2 py-6 text-center text-sm text-muted-foreground">
                       {tableSearchTerm ? `"${tableSearchTerm}"에 대한 검색 결과가 없습니다` : "테이블이 없습니다"}
                     </div>
                   ) : (
diff --git a/frontend/components/screen/DesignerToolbar.tsx b/frontend/components/screen/DesignerToolbar.tsx
index 366a1418..449e4600 100644
--- a/frontend/components/screen/DesignerToolbar.tsx
+++ b/frontend/components/screen/DesignerToolbar.tsx
@@ -57,7 +57,7 @@ export const DesignerToolbar: React.FC<DesignerToolbarProps> = ({
   isGeneratingMultilang = false,
 }) => {
   return (
-    <div className="flex items-center justify-between border-b border-gray-200 bg-gradient-to-r from-gray-50 to-white px-4 py-3 shadow-sm">
+    <div className="flex items-center justify-between border-b border-border bg-background px-4 py-3 shadow-sm">
       {/* 좌측: 네비게이션 및 화면 정보 */}
       <div className="flex items-center space-x-4">
         <Button variant="ghost" size="sm" onClick={onBack} className="flex items-center space-x-2">
@@ -65,16 +65,16 @@ export const DesignerToolbar: React.FC<DesignerToolbarProps> = ({
           <span>목록으로</span>
         </Button>
 
-        <div className="h-6 w-px bg-gray-300" />
+        <div className="h-6 w-px bg-border" />
 
         <div className="flex items-center space-x-3">
           <Menu className="h-5 w-5 text-muted-foreground" />
           <div>
-            <h1 className="text-lg font-semibold text-gray-900">{screenName || "화면 설계"}</h1>
+            <h1 className="text-lg font-semibold text-foreground">{screenName || "화면 설계"}</h1>
             {tableName && (
               <div className="mt-0.5 flex items-center space-x-1">
-                <Database className="h-3 w-3 text-gray-500" />
-                <span className="font-mono text-xs text-gray-500">{tableName}</span>
+                <Database className="h-3 w-3 text-muted-foreground" />
+                <span className="font-mono text-xs text-muted-foreground">{tableName}</span>
               </div>
             )}
           </div>
@@ -152,7 +152,7 @@ export const DesignerToolbar: React.FC<DesignerToolbarProps> = ({
           variant={panelStates.grid?.isOpen ? "default" : "outline"}
           size="sm"
           onClick={() => onTogglePanel("grid")}
-          className={cn("flex items-center space-x-2", panelStates.grid?.isOpen && "bg-blue-600 text-white")}
+          className={cn("flex items-center space-x-2", panelStates.grid?.isOpen && "bg-primary text-white")}
         >
           <Grid3X3 className="h-4 w-4" />
           <span>격자</span>
@@ -167,7 +167,7 @@ export const DesignerToolbar: React.FC<DesignerToolbarProps> = ({
             variant={showZoneBorders ? "default" : "outline"}
             size="sm"
             onClick={onToggleZoneBorders}
-            className={cn("flex items-center space-x-2", showZoneBorders && "bg-green-600 text-white")}
+            className={cn("flex items-center space-x-2", showZoneBorders && "bg-emerald-600 text-white")}
             title="구역 경계 표시/숨김"
           >
             <Square className="h-4 w-4" />
@@ -182,7 +182,7 @@ export const DesignerToolbar: React.FC<DesignerToolbarProps> = ({
           variant={panelStates.detailSettings?.isOpen ? "default" : "outline"}
           size="sm"
           onClick={() => onTogglePanel("detailSettings")}
-          className={cn("flex items-center space-x-2", panelStates.detailSettings?.isOpen && "bg-blue-600 text-white")}
+          className={cn("flex items-center space-x-2", panelStates.detailSettings?.isOpen && "bg-primary text-white")}
         >
           <Cog className="h-4 w-4" />
           <span>상세</span>
@@ -195,7 +195,7 @@ export const DesignerToolbar: React.FC<DesignerToolbarProps> = ({
           variant={panelStates.resolution?.isOpen ? "default" : "outline"}
           size="sm"
           onClick={() => onTogglePanel("resolution")}
-          className={cn("flex items-center space-x-2", panelStates.resolution?.isOpen && "bg-blue-600 text-white")}
+          className={cn("flex items-center space-x-2", panelStates.resolution?.isOpen && "bg-primary text-white")}
         >
           <Monitor className="h-4 w-4" />
           <span>해상도</span>
@@ -229,7 +229,7 @@ export const DesignerToolbar: React.FC<DesignerToolbarProps> = ({
           <span className="hidden sm:inline">다시실행</span>
         </Button>
 
-        <div className="h-6 w-px bg-gray-300" />
+        <div className="h-6 w-px bg-border" />
 
         {onGenerateMultilang && (
           <Button
diff --git a/frontend/components/screen/EditModal.tsx b/frontend/components/screen/EditModal.tsx
index e55f46ea..b3d0c1cd 100644
--- a/frontend/components/screen/EditModal.tsx
+++ b/frontend/components/screen/EditModal.tsx
@@ -19,6 +19,9 @@ import { ConditionalZone, LayerDefinition } from "@/types/screen-management";
 import { convertV2ToLegacy, isValidV2Layout } from "@/lib/utils/layoutV2Converter";
 import { ScreenContextProvider } from "@/contexts/ScreenContext";
 import { entityJoinApi } from "@/lib/api/entityJoin";
+import { useTabId } from "@/contexts/TabIdContext";
+import { useTabStore } from "@/stores/tabStore";
+
 interface EditModalState {
   isOpen: boolean;
   screenId: number | null;
@@ -49,16 +52,13 @@ interface EditModalProps {
  */
 const findSaveButtonInComponents = (components: any[]): any | null => {
   if (!components || !Array.isArray(components)) return null;
-  
+
   for (const comp of components) {
     // button-primary이고 action.type이 save인 경우
-    if (
-      comp.componentType === "button-primary" &&
-      comp.componentConfig?.action?.type === "save"
-    ) {
+    if (comp.componentType === "button-primary" && comp.componentConfig?.action?.type === "save") {
       return comp;
     }
-    
+
     // conditional-container의 sections 내부 탐색
     if (comp.componentType === "conditional-container" && comp.componentConfig?.sections) {
       for (const section of comp.componentConfig.sections) {
@@ -69,19 +69,22 @@ const findSaveButtonInComponents = (components: any[]): any | null => {
         }
       }
     }
-    
+
     // 자식 컴포넌트가 있으면 재귀 탐색
     if (comp.children && Array.isArray(comp.children)) {
       const found = findSaveButtonInComponents(comp.children);
       if (found) return found;
     }
   }
-  
+
   return null;
 };
 
 export const EditModal: React.FC<EditModalProps> = ({ className }) => {
   const { user } = useAuth();
+  const tabId = useTabId();
+  const activeTabId = useTabStore((s) => s[s.mode].activeTabId);
+  const isTabActive = !tabId || tabId === activeTabId;
   const [modalState, setModalState] = useState<EditModalState>({
     isOpen: false,
     screenId: null,
@@ -176,7 +179,9 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
   };
 
   // 🆕 모달 내부 저장 버튼의 제어로직 설정 조회
-  const loadSaveButtonConfig = async (targetScreenId: number): Promise<{
+  const loadSaveButtonConfig = async (
+    targetScreenId: number,
+  ): Promise<{
     enableDataflowControl?: boolean;
     dataflowConfig?: any;
     dataflowTiming?: string;
@@ -184,15 +189,15 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
     try {
       // 1. 대상 화면의 레이아웃 조회
       const layoutData = await screenApi.getLayout(targetScreenId);
-      
+
       if (!layoutData?.components) {
         console.log("[EditModal] 레이아웃 컴포넌트 없음:", targetScreenId);
         return null;
       }
-      
+
       // 2. 저장 버튼 찾기
       let saveButton = findSaveButtonInComponents(layoutData.components);
-      
+
       // 3. conditional-container가 있는 경우 내부 화면도 탐색
       if (!saveButton) {
         for (const comp of layoutData.components) {
@@ -218,12 +223,12 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
           }
         }
       }
-      
+
       if (!saveButton) {
         // console.log("[EditModal] 저장 버튼을 찾을 수 없음:", targetScreenId);
         return null;
       }
-      
+
       // 4. webTypeConfig에서 제어로직 설정 추출
       const webTypeConfig = saveButton.webTypeConfig;
       if (webTypeConfig?.enableDataflowControl) {
@@ -235,7 +240,7 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
         // console.log("[EditModal] 저장 버튼 제어로직 설정 발견:", config);
         return config;
       }
-      
+
       // console.log("[EditModal] 저장 버튼에 제어로직 설정 없음");
       return null;
     } catch (error) {
@@ -277,7 +282,10 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
         return {};
       }
 
-      console.log("[EditModal:MasterLoad] entity join:", joinConfigs.map((c) => `${c.sourceColumn} → ${c.referenceTable}`));
+      console.log(
+        "[EditModal:MasterLoad] entity join:",
+        joinConfigs.map((c) => `${c.sourceColumn} → ${c.referenceTable}`),
+      );
 
       const masterDataResult: Record<string, any> = {};
       const processedTables = new Set<string>();
@@ -291,15 +299,12 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
         if (!fkValue) continue;
 
         try {
-          const response = await apiClient.post(
-            `/table-management/tables/${referenceTable}/data`,
-            {
-              search: { [referenceColumn || "id"]: fkValue },
-              size: 1,
-              page: 1,
-              autoFilter: true,
-            },
-          );
+          const response = await apiClient.post(`/table-management/tables/${referenceTable}/data`, {
+            search: { [referenceColumn || "id"]: fkValue },
+            size: 1,
+            page: 1,
+            autoFilter: true,
+          });
 
           const rows = response.data?.data?.data || response.data?.data?.rows || [];
           if (rows.length > 0) {
@@ -330,10 +335,27 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
     }
   };
 
-  // 전역 모달 이벤트 리스너
+  // 전역 모달 이벤트 리스너 (활성 탭에서만 처리)
   useEffect(() => {
     const handleOpenEditModal = async (event: CustomEvent) => {
-      const { screenId, title, description, modalSize, editData, onSave, groupByColumns, tableName, isCreateMode, buttonConfig, buttonContext, menuObjid } = event.detail;
+      const storeState = useTabStore.getState();
+      const currentActiveTabId = storeState[storeState.mode].activeTabId;
+      if (tabId && tabId !== currentActiveTabId) return;
+
+      const {
+        screenId,
+        title,
+        description,
+        modalSize,
+        editData,
+        onSave,
+        groupByColumns,
+        tableName,
+        isCreateMode,
+        buttonConfig,
+        buttonContext,
+        menuObjid,
+      } = event.detail;
 
       // 🆕 모달 내부 저장 버튼의 제어로직 설정 조회
       let saveButtonConfig: EditModalState["saveButtonConfig"] = undefined;
@@ -434,7 +456,7 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
       window.removeEventListener("openEditModal", handleOpenEditModal as EventListener);
       window.removeEventListener("closeEditModal", handleCloseEditModal);
     };
-  }, [modalState.onSave]); // modalState.onSave를 의존성에 추가하여 최신 콜백 참조
+  }, [tabId, modalState.onSave]);
 
   // 화면 데이터 로딩
   useEffect(() => {
@@ -615,9 +637,7 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
           const layerConditionValue = conditionConfig.condition_value;
 
           // 이 레이어가 속한 Zone 찾기
-          const associatedZone = loadedZones.find(
-            (z) => z.zone_id === layerZoneId
-          );
+          const associatedZone = loadedZones.find((z) => z.zone_id === layerZoneId);
 
           layerDefinitions.push({
             id: `layer-${layer.layer_id}`,
@@ -642,13 +662,16 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
         }
       }
 
-      console.log("[EditModal] 조건부 레이어 로드 완료:", layerDefinitions.length, "개",
+      console.log(
+        "[EditModal] 조건부 레이어 로드 완료:",
+        layerDefinitions.length,
+        "개",
         layerDefinitions.map((l) => ({
           id: l.id,
           name: l.name,
           conditionValue: l.conditionValue,
           condition: l.condition,
-        }))
+        })),
       );
 
       setConditionalLayers(layerDefinitions);
@@ -694,7 +717,10 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
             if (Array.isArray(value)) {
               isMatch = value.some((v) => String(v) === String(targetValue ?? ""));
             } else if (typeof value === "string" && value.includes(",")) {
-              isMatch = value.split(",").map((v) => v.trim()).includes(String(targetValue ?? ""));
+              isMatch = value
+                .split(",")
+                .map((v) => v.trim())
+                .includes(String(targetValue ?? ""));
             }
             break;
         }
@@ -972,14 +998,17 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
                 console.log(`🔍 [품목 수정 감지] ${key}: ${originalValue} → ${currentValue}`);
                 // 날짜 필드는 정규화된 값 사용, 나머지는 원본 값 사용
                 let finalValue = dateFields.includes(key) ? currentValue : currentData[key];
-                
+
                 // 🔧 배열이면 쉼표 구분 문자열로 변환 (리피터 데이터 제외)
                 if (Array.isArray(finalValue)) {
-                  const isRepeaterData = finalValue.length > 0 && 
-                    typeof finalValue[0] === "object" && 
+                  const isRepeaterData =
+                    finalValue.length > 0 &&
+                    typeof finalValue[0] === "object" &&
                     finalValue[0] !== null &&
-                    ("_targetTable" in finalValue[0] || "_isNewItem" in finalValue[0] || "_existingRecord" in finalValue[0]);
-                  
+                    ("_targetTable" in finalValue[0] ||
+                      "_isNewItem" in finalValue[0] ||
+                      "_existingRecord" in finalValue[0]);
+
                   if (!isRepeaterData) {
                     // 🔧 손상된 값 필터링 헬퍼
                     const isValidValue = (v: any): boolean => {
@@ -989,17 +1018,21 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
                       if (v.includes("{") || v.includes("}") || v.includes('"') || v.includes("\\")) return false;
                       return true;
                     };
-                    
+
                     const validValues = finalValue
-                      .map((v: any) => typeof v === "number" ? String(v) : v)
+                      .map((v: any) => (typeof v === "number" ? String(v) : v))
                       .filter(isValidValue);
-                    
+
                     const stringValue = validValues.join(",");
-                    console.log(`🔧 [EditModal 그룹UPDATE] 배열→문자열 변환: ${key}`, { original: finalValue.length, valid: validValues.length, converted: stringValue });
+                    console.log(`🔧 [EditModal 그룹UPDATE] 배열→문자열 변환: ${key}`, {
+                      original: finalValue.length,
+                      valid: validValues.length,
+                      converted: stringValue,
+                    });
                     finalValue = stringValue;
                   }
                 }
-                
+
                 changedData[key] = finalValue;
               }
             });
@@ -1096,37 +1129,35 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
           // 우선순위: 모달 내부 저장 버튼 설정(saveButtonConfig) > 수정 버튼에서 전달받은 설정(buttonConfig)
           try {
             const controlConfig = modalState.saveButtonConfig || modalState.buttonConfig;
-            
+
             console.log("[EditModal] 그룹 저장 완료 후 제어로직 실행 시도", {
               hasSaveButtonConfig: !!modalState.saveButtonConfig,
               hasButtonConfig: !!modalState.buttonConfig,
               controlConfig,
             });
-            
+
             // 🔧 executionTiming 체크: dataflowTiming 또는 flowConfig.executionTiming 또는 flowControls 확인
-            const flowTiming = controlConfig?.dataflowTiming 
-              || controlConfig?.dataflowConfig?.flowConfig?.executionTiming
-              || (controlConfig?.dataflowConfig?.flowControls?.length > 0 ? "after" : null);
-            
+            const flowTiming =
+              controlConfig?.dataflowTiming ||
+              controlConfig?.dataflowConfig?.flowConfig?.executionTiming ||
+              (controlConfig?.dataflowConfig?.flowControls?.length > 0 ? "after" : null);
+
             if (controlConfig?.enableDataflowControl && flowTiming === "after") {
               console.log("🎯 [EditModal] 저장 후 제어로직 발견:", controlConfig.dataflowConfig);
-              
+
               // buttonActions의 executeAfterSaveControl 동적 import
               const { ButtonActionExecutor } = await import("@/lib/utils/buttonActions");
-              
+
               // 제어로직 실행
-              await ButtonActionExecutor.executeAfterSaveControl(
-                controlConfig,
-                {
-                  formData: modalState.editData,
-                  screenId: modalState.buttonContext?.screenId || modalState.screenId,
-                  tableName: modalState.buttonContext?.tableName || screenData?.screenInfo?.tableName,
-                  userId: user?.userId,
-                  companyCode: user?.companyCode,
-                  onRefresh: modalState.onSave,
-                }
-              );
-              
+              await ButtonActionExecutor.executeAfterSaveControl(controlConfig, {
+                formData: modalState.editData,
+                screenId: modalState.buttonContext?.screenId || modalState.screenId,
+                tableName: modalState.buttonContext?.tableName || screenData?.screenInfo?.tableName,
+                userId: user?.userId,
+                companyCode: user?.companyCode,
+                onRefresh: modalState.onSave,
+              });
+
               console.log("✅ [EditModal] 제어로직 실행 완료");
             } else {
               console.log("ℹ️ [EditModal] 저장 후 실행할 제어로직 없음");
@@ -1198,29 +1229,27 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
           const { allocateNumberingCode } = await import("@/lib/api/numberingRule");
 
           // 🚀 Promise.all로 병렬 처리 (여러 채번 필드가 있을 경우 성능 향상)
-          const allocationPromises = Object.entries(fieldsWithNumbering).map(
-            async ([fieldName, ruleId]) => {
-              const userInputCode = dataToSave[fieldName] as string;
-              console.log(`🔄 [EditModal] ${fieldName} 필드에 대해 allocateCode 호출: ${ruleId}`);
-              
-              try {
-                const allocateResult = await allocateNumberingCode(ruleId, userInputCode, formData);
-                
-                if (allocateResult.success && allocateResult.data?.generatedCode) {
-                  return { fieldName, success: true, code: allocateResult.data.generatedCode };
-                } else {
-                  console.warn(`⚠️ [EditModal] ${fieldName} 코드 할당 실패:`, allocateResult.error);
-                  return { fieldName, success: false, hasExistingValue: !!(dataToSave[fieldName]) };
-                }
-              } catch (allocateError) {
-                console.error(`❌ [EditModal] ${fieldName} 코드 할당 오류:`, allocateError);
-                return { fieldName, success: false, hasExistingValue: !!(dataToSave[fieldName]) };
+          const allocationPromises = Object.entries(fieldsWithNumbering).map(async ([fieldName, ruleId]) => {
+            const userInputCode = dataToSave[fieldName] as string;
+            console.log(`🔄 [EditModal] ${fieldName} 필드에 대해 allocateCode 호출: ${ruleId}`);
+
+            try {
+              const allocateResult = await allocateNumberingCode(ruleId, userInputCode, formData);
+
+              if (allocateResult.success && allocateResult.data?.generatedCode) {
+                return { fieldName, success: true, code: allocateResult.data.generatedCode };
+              } else {
+                console.warn(`⚠️ [EditModal] ${fieldName} 코드 할당 실패:`, allocateResult.error);
+                return { fieldName, success: false, hasExistingValue: !!dataToSave[fieldName] };
               }
+            } catch (allocateError) {
+              console.error(`❌ [EditModal] ${fieldName} 코드 할당 오류:`, allocateError);
+              return { fieldName, success: false, hasExistingValue: !!dataToSave[fieldName] };
             }
-          );
+          });
 
           const allocationResults = await Promise.all(allocationPromises);
-          
+
           // 결과 처리
           const failedFields: string[] = [];
           for (const result of allocationResults) {
@@ -1256,11 +1285,12 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
             masterDataToSave[key] = value;
           } else {
             // 리피터 데이터인지 확인 (객체 배열이고 _targetTable 또는 _isNewItem이 있으면 리피터)
-            const isRepeaterData = value.length > 0 && 
-              typeof value[0] === "object" && 
+            const isRepeaterData =
+              value.length > 0 &&
+              typeof value[0] === "object" &&
               value[0] !== null &&
               ("_targetTable" in value[0] || "_isNewItem" in value[0] || "_existingRecord" in value[0]);
-            
+
             if (isRepeaterData) {
               console.log(`🔄 [EditModal] 리피터 데이터 제외 (별도 저장): ${key}, ${value.length}개 항목`);
             } else {
@@ -1272,14 +1302,16 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
                 if (v.includes("{") || v.includes("}") || v.includes('"') || v.includes("\\")) return false;
                 return true;
               };
-              
+
               // 🔧 다중 선택 배열 → 쉼표 구분 문자열로 변환 (손상된 값 필터링)
-              const validValues = value
-                .map((v: any) => typeof v === "number" ? String(v) : v)
-                .filter(isValidValue);
-              
+              const validValues = value.map((v: any) => (typeof v === "number" ? String(v) : v)).filter(isValidValue);
+
               const stringValue = validValues.join(",");
-              console.log(`🔧 [EditModal CREATE] 배열→문자열 변환: ${key}`, { original: value.length, valid: validValues.length, converted: stringValue });
+              console.log(`🔧 [EditModal CREATE] 배열→문자열 변환: ${key}`, {
+                original: value.length,
+                valid: validValues.length,
+                converted: stringValue,
+              });
               masterDataToSave[key] = stringValue;
             }
           }
@@ -1295,7 +1327,7 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
 
         if (response.success) {
           const masterRecordId = response.data?.id || formData.id;
-          
+
           toast.success("데이터가 생성되었습니다.");
 
           // 부모 컴포넌트의 onSave 콜백 실행 (테이블 새로고침)
@@ -1311,31 +1343,29 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
           // 우선순위: 모달 내부 저장 버튼 설정(saveButtonConfig) > 수정 버튼에서 전달받은 설정(buttonConfig)
           try {
             const controlConfig = modalState.saveButtonConfig || modalState.buttonConfig;
-            
+
             console.log("[EditModal] INSERT 완료 후 제어로직 실행 시도", { controlConfig });
-            
+
             // 🔧 executionTiming 체크: dataflowTiming 또는 flowConfig.executionTiming 또는 flowControls 확인
-            const flowTimingInsert = controlConfig?.dataflowTiming 
-              || controlConfig?.dataflowConfig?.flowConfig?.executionTiming
-              || (controlConfig?.dataflowConfig?.flowControls?.length > 0 ? "after" : null);
-            
+            const flowTimingInsert =
+              controlConfig?.dataflowTiming ||
+              controlConfig?.dataflowConfig?.flowConfig?.executionTiming ||
+              (controlConfig?.dataflowConfig?.flowControls?.length > 0 ? "after" : null);
+
             if (controlConfig?.enableDataflowControl && flowTimingInsert === "after") {
               console.log("🎯 [EditModal] 저장 후 제어로직 발견:", controlConfig.dataflowConfig);
-              
+
               const { ButtonActionExecutor } = await import("@/lib/utils/buttonActions");
-              
-              await ButtonActionExecutor.executeAfterSaveControl(
-                controlConfig,
-                {
-                  formData,
-                  screenId: modalState.buttonContext?.screenId || modalState.screenId,
-                  tableName: modalState.buttonContext?.tableName || screenData?.screenInfo?.tableName,
-                  userId: user?.userId,
-                  companyCode: user?.companyCode,
-                  onRefresh: modalState.onSave,
-                }
-              );
-              
+
+              await ButtonActionExecutor.executeAfterSaveControl(controlConfig, {
+                formData,
+                screenId: modalState.buttonContext?.screenId || modalState.screenId,
+                tableName: modalState.buttonContext?.tableName || screenData?.screenInfo?.tableName,
+                userId: user?.userId,
+                companyCode: user?.companyCode,
+                onRefresh: modalState.onSave,
+              });
+
               console.log("✅ [EditModal] 제어로직 실행 완료");
             }
           } catch (controlError) {
@@ -1395,18 +1425,19 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
         const dataToSave: Record<string, any> = {};
         Object.entries(formData).forEach(([key, value]) => {
           if (Array.isArray(value)) {
-            const isRepeaterData = value.length > 0 && 
-              typeof value[0] === "object" && 
+            const isRepeaterData =
+              value.length > 0 &&
+              typeof value[0] === "object" &&
               value[0] !== null &&
               ("_targetTable" in value[0] || "_isNewItem" in value[0] || "_existingRecord" in value[0]);
-            
+
             if (isRepeaterData) {
               // 리피터 데이터는 제외 (별도 저장)
               return;
             }
             // 다중 선택 배열 → 쉼표 구분 문자열
             const validValues = value
-              .map((v: any) => typeof v === "number" ? String(v) : v)
+              .map((v: any) => (typeof v === "number" ? String(v) : v))
               .filter((v: any) => {
                 if (typeof v === "number") return true;
                 if (typeof v !== "string") return false;
@@ -1438,31 +1469,29 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
           // 우선순위: 모달 내부 저장 버튼 설정(saveButtonConfig) > 수정 버튼에서 전달받은 설정(buttonConfig)
           try {
             const controlConfig = modalState.saveButtonConfig || modalState.buttonConfig;
-            
+
             console.log("[EditModal] UPDATE 완료 후 제어로직 실행 시도", { controlConfig });
-            
+
             // 🔧 executionTiming 체크: dataflowTiming 또는 flowConfig.executionTiming 또는 flowControls 확인
-            const flowTimingUpdate = controlConfig?.dataflowTiming 
-              || controlConfig?.dataflowConfig?.flowConfig?.executionTiming
-              || (controlConfig?.dataflowConfig?.flowControls?.length > 0 ? "after" : null);
-            
+            const flowTimingUpdate =
+              controlConfig?.dataflowTiming ||
+              controlConfig?.dataflowConfig?.flowConfig?.executionTiming ||
+              (controlConfig?.dataflowConfig?.flowControls?.length > 0 ? "after" : null);
+
             if (controlConfig?.enableDataflowControl && flowTimingUpdate === "after") {
               console.log("🎯 [EditModal] 저장 후 제어로직 발견:", controlConfig.dataflowConfig);
-              
+
               const { ButtonActionExecutor } = await import("@/lib/utils/buttonActions");
-              
-              await ButtonActionExecutor.executeAfterSaveControl(
-                controlConfig,
-                {
-                  formData,
-                  screenId: modalState.buttonContext?.screenId || modalState.screenId,
-                  tableName: modalState.buttonContext?.tableName || screenData?.screenInfo?.tableName,
-                  userId: user?.userId,
-                  companyCode: user?.companyCode,
-                  onRefresh: modalState.onSave,
-                }
-              );
-              
+
+              await ButtonActionExecutor.executeAfterSaveControl(controlConfig, {
+                formData,
+                screenId: modalState.buttonContext?.screenId || modalState.screenId,
+                tableName: modalState.buttonContext?.tableName || screenData?.screenInfo?.tableName,
+                userId: user?.userId,
+                companyCode: user?.companyCode,
+                onRefresh: modalState.onSave,
+              });
+
               console.log("✅ [EditModal] 제어로직 실행 완료");
             }
           } catch (controlError) {
@@ -1503,7 +1532,9 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
 
           // 리피터 저장 완료 후 메인 테이블 새로고침
           if (modalState.onSave) {
-            try { modalState.onSave(); } catch {}
+            try {
+              modalState.onSave();
+            } catch {}
           }
           handleClose();
         } else {
@@ -1562,11 +1593,11 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
           </div>
         </DialogHeader>
 
-        <div className="flex flex-1 justify-center overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-gray-300 [&::-webkit-scrollbar-track]:bg-transparent">
+        <div className="[&::-webkit-scrollbar-thumb]:bg-muted/60 flex flex-1 justify-center overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-transparent">
           {loading ? (
             <div className="flex h-full items-center justify-center">
               <div className="text-center">
-                <div className="mx-auto mb-4 h-8 w-8 animate-spin rounded-full border-b-2 border-blue-600"></div>
+                <div className="border-primary mx-auto mb-4 h-8 w-8 animate-spin rounded-full border-b-2"></div>
                 <p className="text-muted-foreground">화면을 불러오는 중...</p>
               </div>
             </div>
@@ -1575,171 +1606,170 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
               screenId={modalState.screenId || undefined}
               tableName={screenData.screenInfo?.tableName}
             >
-            <div
-              data-screen-runtime="true"
-              className="relative m-auto bg-white"
-              style={{
-                width: screenDimensions?.width || 800,
-                // 조건부 레이어가 활성화되면 높이 자동 확장
-                height: (() => {
-                  const baseHeight = (screenDimensions?.height || 600) + 30;
-                  if (activeConditionalComponents.length > 0) {
-                    // 조건부 레이어 컴포넌트 중 가장 아래 위치 계산
-                    const offsetY = screenDimensions?.offsetY || 0;
-                    let maxBottom = 0;
-                    activeConditionalComponents.forEach((comp) => {
-                      const y = parseFloat(comp.position?.y?.toString() || "0") - offsetY + 30;
-                      const h = parseFloat(comp.size?.height?.toString() || "40");
-                      maxBottom = Math.max(maxBottom, y + h);
-                    });
-                    return Math.max(baseHeight, maxBottom + 20); // 20px 여백
-                  }
-                  return baseHeight;
-                })(),
-                transformOrigin: "center center",
-                maxWidth: "100%",
-              }}
-            >
-              {/* 기본 레이어 컴포넌트 렌더링 */}
-              {screenData.components.map((component) => {
-                // 컴포넌트 위치를 offset만큼 조정
-                const offsetX = screenDimensions?.offsetX || 0;
-                const offsetY = screenDimensions?.offsetY || 0;
-                const labelSpace = 30; // 라벨 공간 (입력 필드 위 -top-6 라벨용)
+              <div
+                data-screen-runtime="true"
+                className="bg-card relative m-auto"
+                style={{
+                  width: screenDimensions?.width || 800,
+                  // 조건부 레이어가 활성화되면 높이 자동 확장
+                  height: (() => {
+                    const baseHeight = (screenDimensions?.height || 600) + 30;
+                    if (activeConditionalComponents.length > 0) {
+                      // 조건부 레이어 컴포넌트 중 가장 아래 위치 계산
+                      const offsetY = screenDimensions?.offsetY || 0;
+                      let maxBottom = 0;
+                      activeConditionalComponents.forEach((comp) => {
+                        const y = parseFloat(comp.position?.y?.toString() || "0") - offsetY + 30;
+                        const h = parseFloat(comp.size?.height?.toString() || "40");
+                        maxBottom = Math.max(maxBottom, y + h);
+                      });
+                      return Math.max(baseHeight, maxBottom + 20); // 20px 여백
+                    }
+                    return baseHeight;
+                  })(),
+                  transformOrigin: "center center",
+                  maxWidth: "100%",
+                }}
+              >
+                {/* 기본 레이어 컴포넌트 렌더링 */}
+                {screenData.components.map((component) => {
+                  // 컴포넌트 위치를 offset만큼 조정
+                  const offsetX = screenDimensions?.offsetX || 0;
+                  const offsetY = screenDimensions?.offsetY || 0;
+                  const labelSpace = 30; // 라벨 공간 (입력 필드 위 -top-6 라벨용)
 
-                const adjustedComponent = {
-                  ...component,
-                  position: {
-                    ...component.position,
-                    x: parseFloat(component.position?.x?.toString() || "0") - offsetX,
-                    y: parseFloat(component.position?.y?.toString() || "0") - offsetY + labelSpace, // 라벨 공간 추가
-                  },
-                };
+                  const adjustedComponent = {
+                    ...component,
+                    position: {
+                      ...component.position,
+                      x: parseFloat(component.position?.x?.toString() || "0") - offsetX,
+                      y: parseFloat(component.position?.y?.toString() || "0") - offsetY + labelSpace, // 라벨 공간 추가
+                    },
+                  };
 
-                const groupedDataProp = groupData.length > 0 ? groupData : undefined;
+                  const groupedDataProp = groupData.length > 0 ? groupData : undefined;
 
-                const hasUniversalFormModal = screenData.components.some(
-                  (c) => {
+                  const hasUniversalFormModal = screenData.components.some((c) => {
                     if (c.componentType === "universal-form-modal") return true;
                     return false;
-                  }
-                );
-                
-                const hasTableSectionData = Object.keys(formData).some(k => 
-                  k.startsWith("_tableSection_") || k.startsWith("__tableSection_")
-                );
-                
-                const shouldUseEditModalSave = !hasTableSectionData && (groupData.length > 0 || !hasUniversalFormModal);
+                  });
 
-                const enrichedFormData = {
-                  // 마스터 데이터(formData)를 기본으로 깔고, groupData[0]으로 덮어쓰기
-                  // → 디테일 행 수정 시에도 마스터 폼 필드가 표시됨
-                  ...formData,
-                  ...(groupData.length > 0 ? groupData[0] : {}),
-                  tableName: screenData.screenInfo?.tableName,
-                  screenId: modalState.screenId,
-                };
+                  const hasTableSectionData = Object.keys(formData).some(
+                    (k) => k.startsWith("_tableSection_") || k.startsWith("__tableSection_"),
+                  );
 
-                return (
-                  <InteractiveScreenViewerDynamic
-                    key={component.id}
-                    component={adjustedComponent}
-                    allComponents={[...screenData.components, ...activeConditionalComponents]}
-                    formData={enrichedFormData}
-                    originalData={originalData}
-                    onFormDataChange={(fieldName, value) => {
-                      if (groupData.length > 0) {
-                        if (Array.isArray(value)) {
-                          setGroupData(value);
+                  const shouldUseEditModalSave =
+                    !hasTableSectionData && (groupData.length > 0 || !hasUniversalFormModal);
+
+                  const enrichedFormData = {
+                    // 마스터 데이터(formData)를 기본으로 깔고, groupData[0]으로 덮어쓰기
+                    // → 디테일 행 수정 시에도 마스터 폼 필드가 표시됨
+                    ...formData,
+                    ...(groupData.length > 0 ? groupData[0] : {}),
+                    tableName: screenData.screenInfo?.tableName,
+                    screenId: modalState.screenId,
+                  };
+
+                  return (
+                    <InteractiveScreenViewerDynamic
+                      key={component.id}
+                      component={adjustedComponent}
+                      allComponents={[...screenData.components, ...activeConditionalComponents]}
+                      formData={enrichedFormData}
+                      originalData={originalData}
+                      onFormDataChange={(fieldName, value) => {
+                        if (groupData.length > 0) {
+                          if (Array.isArray(value)) {
+                            setGroupData(value);
+                          } else {
+                            setGroupData((prev) =>
+                              prev.map((item) => ({
+                                ...item,
+                                [fieldName]: value,
+                              })),
+                            );
+                          }
                         } else {
-                          setGroupData((prev) =>
-                            prev.map((item) => ({
-                              ...item,
-                              [fieldName]: value,
-                            })),
-                          );
+                          setFormData((prev) => ({
+                            ...prev,
+                            [fieldName]: value,
+                          }));
                         }
-                      } else {
-                        setFormData((prev) => ({
-                          ...prev,
-                          [fieldName]: value,
-                        }));
-                      }
-                    }}
-                    screenInfo={{
-                      id: modalState.screenId!,
-                      tableName: screenData.screenInfo?.tableName,
-                    }}
-                    menuObjid={modalState.menuObjid}
-                    onSave={shouldUseEditModalSave ? handleSave : undefined}
-                    isInModal={true}
-                    groupedData={groupedDataProp}
-                    disabledFields={["order_no", "partner_id"]}
-                  />
-                );
-              })}
+                      }}
+                      screenInfo={{
+                        id: modalState.screenId!,
+                        tableName: screenData.screenInfo?.tableName,
+                      }}
+                      menuObjid={modalState.menuObjid}
+                      onSave={shouldUseEditModalSave ? handleSave : undefined}
+                      isInModal={true}
+                      groupedData={groupedDataProp}
+                      disabledFields={["order_no", "partner_id"]}
+                    />
+                  );
+                })}
 
-              {/* 🆕 조건부 레이어 컴포넌트 렌더링 */}
-              {activeConditionalComponents.map((component) => {
-                const offsetX = screenDimensions?.offsetX || 0;
-                const offsetY = screenDimensions?.offsetY || 0;
-                const labelSpace = 30;
+                {/* 🆕 조건부 레이어 컴포넌트 렌더링 */}
+                {activeConditionalComponents.map((component) => {
+                  const offsetX = screenDimensions?.offsetX || 0;
+                  const offsetY = screenDimensions?.offsetY || 0;
+                  const labelSpace = 30;
 
-                const adjustedComponent = {
-                  ...component,
-                  position: {
-                    ...component.position,
-                    x: parseFloat(component.position?.x?.toString() || "0") - offsetX,
-                    y: parseFloat(component.position?.y?.toString() || "0") - offsetY + labelSpace,
-                  },
-                };
+                  const adjustedComponent = {
+                    ...component,
+                    position: {
+                      ...component.position,
+                      x: parseFloat(component.position?.x?.toString() || "0") - offsetX,
+                      y: parseFloat(component.position?.y?.toString() || "0") - offsetY + labelSpace,
+                    },
+                  };
 
-                const enrichedFormData = {
-                  ...formData,
-                  ...(groupData.length > 0 ? groupData[0] : {}),
-                  tableName: screenData.screenInfo?.tableName,
-                  screenId: modalState.screenId,
-                };
+                  const enrichedFormData = {
+                    ...formData,
+                    ...(groupData.length > 0 ? groupData[0] : {}),
+                    tableName: screenData.screenInfo?.tableName,
+                    screenId: modalState.screenId,
+                  };
 
-                const groupedDataProp = groupData.length > 0 ? groupData : undefined;
+                  const groupedDataProp = groupData.length > 0 ? groupData : undefined;
 
-                return (
-                  <InteractiveScreenViewerDynamic
-                    key={`conditional-${component.id}`}
-                    component={adjustedComponent}
-                    allComponents={[...screenData.components, ...activeConditionalComponents]}
-                    formData={enrichedFormData}
-                    originalData={originalData}
-                    onFormDataChange={(fieldName, value) => {
-                      if (groupData.length > 0) {
-                        if (Array.isArray(value)) {
-                          setGroupData(value);
+                  return (
+                    <InteractiveScreenViewerDynamic
+                      key={`conditional-${component.id}`}
+                      component={adjustedComponent}
+                      allComponents={[...screenData.components, ...activeConditionalComponents]}
+                      formData={enrichedFormData}
+                      originalData={originalData}
+                      onFormDataChange={(fieldName, value) => {
+                        if (groupData.length > 0) {
+                          if (Array.isArray(value)) {
+                            setGroupData(value);
+                          } else {
+                            setGroupData((prev) =>
+                              prev.map((item) => ({
+                                ...item,
+                                [fieldName]: value,
+                              })),
+                            );
+                          }
                         } else {
-                          setGroupData((prev) =>
-                            prev.map((item) => ({
-                              ...item,
-                              [fieldName]: value,
-                            })),
-                          );
+                          setFormData((prev) => ({
+                            ...prev,
+                            [fieldName]: value,
+                          }));
                         }
-                      } else {
-                        setFormData((prev) => ({
-                          ...prev,
-                          [fieldName]: value,
-                        }));
-                      }
-                    }}
-                    screenInfo={{
-                      id: modalState.screenId!,
-                      tableName: screenData.screenInfo?.tableName,
-                    }}
-                    menuObjid={modalState.menuObjid}
-                    isInModal={true}
-                    groupedData={groupedDataProp}
-                  />
-                );
-              })}
-            </div>
+                      }}
+                      screenInfo={{
+                        id: modalState.screenId!,
+                        tableName: screenData.screenInfo?.tableName,
+                      }}
+                      menuObjid={modalState.menuObjid}
+                      isInModal={true}
+                      groupedData={groupedDataProp}
+                    />
+                  );
+                })}
+              </div>
             </ScreenContextProvider>
           ) : (
             <div className="flex h-full items-center justify-center">
diff --git a/frontend/components/screen/EnhancedInteractiveScreenViewer.tsx b/frontend/components/screen/EnhancedInteractiveScreenViewer.tsx
index d0a99d91..ea291a6e 100644
--- a/frontend/components/screen/EnhancedInteractiveScreenViewer.tsx
+++ b/frontend/components/screen/EnhancedInteractiveScreenViewer.tsx
@@ -240,7 +240,7 @@ export const EnhancedInteractiveScreenViewer: React.FC<EnhancedInteractiveScreen
       return React.cloneElement(element, {
         style: inlineStyle,
         className:
-          `${element.props.className || ""} ${hasError ? "border-destructive" : ""} ${isValid && finalFormData[fieldName] ? "border-green-500" : ""}`.trim(),
+          `${element.props.className || ""} ${hasError ? "border-destructive" : ""} ${isValid && finalFormData[fieldName] ? "border-emerald-500" : ""}`.trim(),
       });
     };
 
diff --git a/frontend/components/screen/FileAttachmentDetailModal.tsx b/frontend/components/screen/FileAttachmentDetailModal.tsx
index 835f8940..383aea9a 100644
--- a/frontend/components/screen/FileAttachmentDetailModal.tsx
+++ b/frontend/components/screen/FileAttachmentDetailModal.tsx
@@ -381,8 +381,8 @@ export const FileAttachmentDetailModal: React.FC<FileAttachmentDetailModalProps>
                   <div
                     className={`
                       border-2 border-dashed rounded-lg p-8 text-center cursor-pointer transition-colors
-                      ${dragOver ? 'border-blue-400 bg-accent' : 'border-gray-300'}
-                      ${uploading ? 'opacity-50 cursor-not-allowed' : 'hover:border-gray-400'}
+                      ${dragOver ? 'border-primary/60 bg-accent' : 'border-input'}
+                      ${uploading ? 'opacity-50 cursor-not-allowed' : 'hover:border-input'}
                     `}
                     onDragOver={handleDragOver}
                     onDragLeave={handleDragLeave}
@@ -402,17 +402,17 @@ export const FileAttachmentDetailModal: React.FC<FileAttachmentDetailModalProps>
                     <div className="flex flex-col items-center space-y-3">
                       {uploading ? (
                         <>
-                          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
-                          <p className="text-lg font-medium text-gray-700">업로드 중...</p>
+                          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
+                          <p className="text-lg font-medium text-foreground">업로드 중...</p>
                         </>
                       ) : (
                         <>
-                          <Upload className="w-12 h-12 text-gray-400" />
+                          <Upload className="w-12 h-12 text-muted-foreground/70" />
                           <div>
-                            <p className="text-lg font-medium text-gray-700">
+                            <p className="text-lg font-medium text-foreground">
                               파일을 선택하거나 드래그하세요
                             </p>
-                            <p className="text-sm text-gray-500 mt-2">
+                            <p className="text-sm text-muted-foreground mt-2">
                               {fileConfig.accept && `지원 형식: ${fileConfig.accept}`}
                               {fileConfig.maxSize && ` • 최대 ${formatFileSize(fileConfig.maxSize)}`}
                               {fileConfig.multiple && ' • 여러 파일 선택 가능'}
@@ -446,24 +446,24 @@ export const FileAttachmentDetailModal: React.FC<FileAttachmentDetailModalProps>
                 </CardHeader>
                 <CardContent>
                   {uploadedFiles.length === 0 ? (
-                    <div className="text-center py-8 text-gray-500">
-                      <FileText className="w-12 h-12 mx-auto mb-3 text-gray-300" />
+                    <div className="text-center py-8 text-muted-foreground">
+                      <FileText className="w-12 h-12 mx-auto mb-3 text-muted-foreground/50" />
                       <p>업로드된 파일이 없습니다.</p>
                       <p className="text-sm mt-1">위의 업로드 영역을 사용해 파일을 추가하세요.</p>
                     </div>
                   ) : (
                     <div className="space-y-3 max-h-60 overflow-y-auto">
                       {uploadedFiles.map((file) => (
-                        <div key={file.objid} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
+                        <div key={file.objid} className="flex items-center justify-between p-3 bg-muted rounded-lg">
                           <div className="flex items-center space-x-3 flex-1 min-w-0">
                             <div className="flex-shrink-0">
                               {getFileIcon(file.fileExt)}
                             </div>
                             <div className="flex-1 min-w-0">
-                              <p className="text-sm font-medium text-gray-900 truncate">
+                              <p className="text-sm font-medium text-foreground truncate">
                                 {file.realFileName}
                               </p>
-                              <div className="flex items-center space-x-2 text-xs text-gray-500">
+                              <div className="flex items-center space-x-2 text-xs text-muted-foreground">
                                 <span>{formatFileSize(file.fileSize)}</span>
                                 <span>•</span>
                                 <span>{file.fileExt.toUpperCase()}</span>
@@ -505,7 +505,7 @@ export const FileAttachmentDetailModal: React.FC<FileAttachmentDetailModalProps>
                               variant="ghost"
                               size="sm"
                               onClick={() => handleFileDelete(file)}
-                              className="h-8 w-8 p-0 text-destructive hover:text-red-700"
+                              className="h-8 w-8 p-0 text-destructive hover:text-destructive"
                               title="삭제"
                             >
                               <Trash2 className="w-4 h-4" />
@@ -555,7 +555,7 @@ export const FileAttachmentDetailModal: React.FC<FileAttachmentDetailModalProps>
                       onChange={(e) => setFileConfig(prev => ({ ...prev, accept: e.target.value }))}
                       placeholder="예: image/*,.pdf,.doc,.docx"
                     />
-                    <p className="text-xs text-gray-500 mt-1">
+                    <p className="text-xs text-muted-foreground mt-1">
                       쉼표로 구분하여 입력 (예: image/*,.pdf,.doc)
                     </p>
                   </div>
@@ -581,7 +581,7 @@ export const FileAttachmentDetailModal: React.FC<FileAttachmentDetailModalProps>
                       type="checkbox"
                       checked={fileConfig.multiple}
                       onChange={(e) => setFileConfig(prev => ({ ...prev, multiple: e.target.checked }))}
-                      className="rounded border-gray-300"
+                      className="rounded border-input"
                     />
                     <Label htmlFor="multiple">여러 파일 업로드 허용</Label>
                   </div>
diff --git a/frontend/components/screen/GridControls.tsx b/frontend/components/screen/GridControls.tsx
index b33dc654..b6c707c7 100644
--- a/frontend/components/screen/GridControls.tsx
+++ b/frontend/components/screen/GridControls.tsx
@@ -74,7 +74,7 @@ export default function GridControls({ gridSettings, onGridSettingsChange, class
               className="w-16 text-xs"
             />
           </div>
-          <div className="text-xs text-gray-500">현재: {localSettings.columns}열</div>
+          <div className="text-xs text-muted-foreground">현재: {localSettings.columns}열</div>
         </div>
 
         {/* 격자 간격 */}
@@ -145,7 +145,7 @@ export default function GridControls({ gridSettings, onGridSettingsChange, class
         </div>
 
         {/* 격자 변경 안내 */}
-        <div className="rounded-md bg-accent p-2 text-xs text-blue-700">
+        <div className="rounded-md bg-accent p-2 text-xs text-primary">
           <div className="font-medium">💡 격자 변경 시 자동 조정</div>
           <div className="mt-1 text-primary">
             격자 설정을 변경하면 기존 컴포넌트들이 새 격자에 맞춰 자동으로 위치와 크기가 조정됩니다.
@@ -155,7 +155,7 @@ export default function GridControls({ gridSettings, onGridSettingsChange, class
         {/* 격자 미리보기 */}
         <div className="space-y-2">
           <Label className="text-xs font-medium">격자 미리보기</Label>
-          <div className="rounded border bg-gray-50 p-2">
+          <div className="rounded border bg-muted p-2">
             <div
               className="grid h-16 gap-px"
               style={{
diff --git a/frontend/components/screen/GridLayoutBuilder.tsx b/frontend/components/screen/GridLayoutBuilder.tsx
index f8d81d83..9715560e 100644
--- a/frontend/components/screen/GridLayoutBuilder.tsx
+++ b/frontend/components/screen/GridLayoutBuilder.tsx
@@ -135,7 +135,7 @@ export const GridLayoutBuilder: React.FC<GridLayoutBuilderProps> = ({
   );
 
   // 컨테이너 클래스
-  const containerClasses = cn("w-full h-full overflow-auto bg-gray-50 relative", isDraggingOver && "bg-blue-50");
+  const containerClasses = cn("w-full h-full overflow-auto bg-muted relative", isDraggingOver && "bg-primary/10");
 
   // 글로벌 컨테이너 클래스
   const globalContainerClasses = cn(
@@ -152,7 +152,7 @@ export const GridLayoutBuilder: React.FC<GridLayoutBuilderProps> = ({
           <div className={globalContainerClasses}>
             <div className="grid h-full grid-cols-12">
               {Array.from({ length: 12 }).map((_, i) => (
-                <div key={i} className="h-full border-l border-dashed border-gray-300 opacity-30" />
+                <div key={i} className="h-full border-l border-dashed border-input opacity-30" />
               ))}
             </div>
           </div>
@@ -163,10 +163,10 @@ export const GridLayoutBuilder: React.FC<GridLayoutBuilderProps> = ({
       <div className={cn(globalContainerClasses, "relative z-10 py-8")}>
         {layout.rows.length === 0 ? (
           // 빈 레이아웃
-          <div className="flex min-h-[400px] flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-white">
-            <Grid3x3 className="mb-4 h-16 w-16 text-gray-300" />
-            <h3 className="mb-2 text-lg font-medium text-gray-600">레이아웃이 비어있습니다</h3>
-            <p className="mb-6 text-sm text-gray-500">첫 번째 행을 추가하여 시작하세요</p>
+          <div className="flex min-h-[400px] flex-col items-center justify-center rounded-lg border-2 border-dashed border-input bg-white">
+            <Grid3x3 className="mb-4 h-16 w-16 text-muted-foreground/50" />
+            <h3 className="mb-2 text-lg font-medium text-muted-foreground">레이아웃이 비어있습니다</h3>
+            <p className="mb-6 text-sm text-muted-foreground">첫 번째 행을 추가하여 시작하세요</p>
             <Button onClick={() => addNewRow()} size="lg">
               <Plus className="mr-2 h-5 w-5" />첫 행 추가
             </Button>
@@ -248,7 +248,7 @@ export const GridLayoutBuilder: React.FC<GridLayoutBuilderProps> = ({
 
         {/* 레이아웃 정보 */}
         <div className="mt-8 rounded-lg border bg-white p-4">
-          <div className="flex items-center justify-between text-sm text-gray-600">
+          <div className="flex items-center justify-between text-sm text-muted-foreground">
             <div className="flex items-center gap-4">
               <span>행: {layout.rows.length}</span>
               <span>컴포넌트: {layout.components.size}</span>
@@ -258,8 +258,8 @@ export const GridLayoutBuilder: React.FC<GridLayoutBuilderProps> = ({
               </span>
             </div>
             <div className="flex items-center gap-2">
-              <span className="text-xs text-gray-400">12컬럼 그리드</span>
-              {showGridGuides && <span className="text-xs text-green-600">가이드 표시됨</span>}
+              <span className="text-xs text-muted-foreground/70">12컬럼 그리드</span>
+              {showGridGuides && <span className="text-xs text-emerald-600">가이드 표시됨</span>}
             </div>
           </div>
         </div>
diff --git a/frontend/components/screen/GroupingToolbar.tsx b/frontend/components/screen/GroupingToolbar.tsx
index f1047139..76012193 100644
--- a/frontend/components/screen/GroupingToolbar.tsx
+++ b/frontend/components/screen/GroupingToolbar.tsx
@@ -114,7 +114,7 @@ export const GroupingToolbar: React.FC<GroupingToolbarProps> = ({
 
   return (
     <>
-      <div className="flex items-center space-x-2 border-b bg-gray-50 p-2">
+      <div className="flex items-center space-x-2 border-b bg-muted p-2">
         <div className="flex items-center space-x-2">
           <Group className="h-4 w-4 text-primary" />
           <span className="text-sm font-medium">그룹화</span>
@@ -182,7 +182,7 @@ export const GroupingToolbar: React.FC<GroupingToolbarProps> = ({
           {/* 정렬/분배 도구 */}
           {selectedComponents.length > 1 && (
             <div className="ml-2 flex items-center space-x-1">
-              <span className="mr-1 text-xs text-gray-500">정렬</span>
+              <span className="mr-1 text-xs text-muted-foreground">정렬</span>
               <Button variant="outline" size="sm" onClick={() => onGroupAlign?.("left")} title="좌측 정렬">
                 <AlignLeft className="h-3 w-3" />
               </Button>
@@ -201,8 +201,8 @@ export const GroupingToolbar: React.FC<GroupingToolbarProps> = ({
               <Button variant="outline" size="sm" onClick={() => onGroupAlign?.("bottom")} title="하단 정렬">
                 <AlignRight className="h-3 w-3 rotate-90" />
               </Button>
-              <div className="mx-1 h-4 w-px bg-gray-200" />
-              <span className="mr-1 text-xs text-gray-500">균등</span>
+              <div className="mx-1 h-4 w-px bg-muted/80" />
+              <span className="mr-1 text-xs text-muted-foreground">균등</span>
               <Button
                 variant="outline"
                 size="sm"
diff --git a/frontend/components/screen/InteractiveDataTable.tsx b/frontend/components/screen/InteractiveDataTable.tsx
index 2de4d0df..62472b96 100644
--- a/frontend/components/screen/InteractiveDataTable.tsx
+++ b/frontend/components/screen/InteractiveDataTable.tsx
@@ -261,11 +261,11 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
       label: component.title || "데이터 테이블",
       tableName: component.tableName,
       columns: component.columns.map((col) => ({
-        columnName: col.field,
+        columnName: col.columnName,
         columnLabel: col.label,
-        inputType: col.inputType || "text",
+        inputType: col.widgetType || "text",
         visible: col.visible !== false,
-        width: col.width || 150,
+        width: (col as any).width || 150,
         sortable: col.sortable,
         filterable: col.filterable !== false,
       })),
@@ -308,6 +308,253 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
     [codeOptions],
   );
 
+  // 데이터 로드 함수 (useEffect보다 먼저 선언해야 함 - TS2448 방지)
+  const loadData = useCallback(
+    async (page: number = 1, searchParams: Record<string, any> = {}) => {
+      if (!component.tableName) return;
+
+      // 프리뷰 모드에서는 샘플 데이터만 표시
+      if (isPreviewMode) {
+        const sampleData = Array.from({ length: 3 }, (_, i) => {
+          const sample: Record<string, any> = { id: i + 1 };
+          component.columns.forEach((col) => {
+            if (col.widgetType === "number") {
+              sample[col.columnName] = Math.floor(Math.random() * 1000);
+            } else if (col.widgetType === "boolean") {
+              sample[col.columnName] = i % 2 === 0 ? "Y" : "N";
+            } else {
+              sample[col.columnName] = `샘플 ${col.label} ${i + 1}`;
+            }
+          });
+          return sample;
+        });
+        setData(sampleData);
+        setTotal(3);
+        setTotalPages(1);
+        setCurrentPage(1);
+        setLoading(false);
+        return;
+      }
+
+      setLoading(true);
+      try {
+        // 🆕 연결 필터 값 가져오기 (분할 패널 내부일 때)
+        let linkedFilterValues: Record<string, any> = {};
+        let hasLinkedFiltersConfigured = false; // 연결 필터가 설정되어 있는지 여부
+        let hasSelectedLeftData = false; // 좌측에서 데이터가 선택되었는지 여부
+
+        if (splitPanelContext) {
+          // 연결 필터 설정 여부 확인 (현재 테이블에 해당하는 필터가 있는지)
+          const linkedFiltersConfig = splitPanelContext.linkedFilters || [];
+          hasLinkedFiltersConfigured = linkedFiltersConfig.some(
+            (filter) =>
+              filter.targetColumn?.startsWith(component.tableName + ".") || filter.targetColumn === component.tableName,
+          );
+
+          // 좌측 데이터 선택 여부 확인
+          hasSelectedLeftData =
+            splitPanelContext.selectedLeftData && Object.keys(splitPanelContext.selectedLeftData).length > 0;
+
+          linkedFilterValues = splitPanelContext.getLinkedFilterValues();
+          // 현재 테이블에 해당하는 필터만 추출 (테이블명.컬럼명 형식에서)
+          const tableSpecificFilters: Record<string, any> = {};
+          for (const [key, value] of Object.entries(linkedFilterValues)) {
+            // key가 "테이블명.컬럼명" 형식인 경우
+            if (key.includes(".")) {
+              const [tableName, columnName] = key.split(".");
+              if (tableName === component.tableName) {
+                tableSpecificFilters[columnName] = value;
+                hasLinkedFiltersConfigured = true; // 이 테이블에 대한 필터가 있음
+              }
+            } else {
+              // 테이블명 없이 컬럼명만 있는 경우 그대로 사용
+              tableSpecificFilters[key] = value;
+            }
+          }
+          linkedFilterValues = tableSpecificFilters;
+        }
+
+        // 🆕 연결 필터가 설정되어 있지만 좌측에서 데이터가 선택되지 않은 경우
+        // → 빈 데이터 표시 (모든 데이터를 보여주지 않음)
+        if (hasLinkedFiltersConfigured && !hasSelectedLeftData) {
+          console.log("⚠️ [InteractiveDataTable] 연결 필터 설정됨 but 좌측 데이터 미선택 → 빈 데이터 표시");
+          setData([]);
+          setTotal(0);
+          setTotalPages(0);
+          setCurrentPage(1);
+          setLoading(false);
+          return;
+        }
+
+        // 🆕 RelatedDataButtons 필터 적용
+        const relatedButtonFilterValues: Record<string, any> = {};
+        if (relatedButtonFilter) {
+          relatedButtonFilterValues[relatedButtonFilter.filterColumn] = relatedButtonFilter.filterValue;
+        }
+
+        // 검색 파라미터와 연결 필터 병합
+        const mergedSearchParams = {
+          ...searchParams,
+          ...linkedFilterValues,
+          ...relatedButtonFilterValues, // 🆕 RelatedDataButtons 필터 추가
+        };
+
+        const currentPageSize = component.pagination?.pageSize || 10;
+
+        console.log("🔍 데이터 조회 시작:", {
+          tableName: component.tableName,
+          page,
+          pageSize: currentPageSize,
+          linkedFilterValues,
+          relatedButtonFilterValues,
+          mergedSearchParams,
+        });
+
+        const result = await tableTypeApi.getTableData(component.tableName, {
+          page,
+          size: currentPageSize,
+          search: mergedSearchParams,
+          autoFilter: component.autoFilter, // 🆕 자동 필터 설정 전달
+        });
+
+        console.log("✅ 데이터 조회 완료:", {
+          tableName: component.tableName,
+          dataLength: result.data.length,
+          total: result.total,
+          page: result.page,
+        });
+
+        setData(result.data);
+        setTotal(result.total);
+        setTotalPages(result.totalPages);
+        setCurrentPage(result.page);
+
+        // 카테고리 코드 패턴(CATEGORY_*) 검출 및 라벨 조회
+        const detectAndLoadCategoryLabels = async () => {
+          const categoryCodes = new Set<string>();
+          result.data.forEach((row: Record<string, any>) => {
+            Object.values(row).forEach((value) => {
+              if (typeof value === "string" && value.startsWith("CATEGORY_")) {
+                categoryCodes.add(value);
+              }
+            });
+          });
+
+          console.log("🏷️ [InteractiveDataTable] 감지된 카테고리 코드:", Array.from(categoryCodes));
+
+          // 새로운 카테고리 코드만 필터링 (이미 캐시된 것 제외)
+          const newCodes = Array.from(categoryCodes);
+
+          if (newCodes.length > 0) {
+            try {
+              console.log("🏷️ [InteractiveDataTable] 카테고리 라벨 API 호출:", newCodes);
+              const response = await apiClient.post("/table-categories/labels-by-codes", { valueCodes: newCodes });
+              console.log("🏷️ [InteractiveDataTable] 카테고리 라벨 API 응답:", response.data);
+              if (response.data.success && response.data.data) {
+                setCategoryCodeLabels((prev) => {
+                  const newLabels = {
+                    ...prev,
+                    ...response.data.data,
+                  };
+                  console.log("🏷️ [InteractiveDataTable] 카테고리 라벨 캐시 업데이트:", newLabels);
+                  return newLabels;
+                });
+              }
+            } catch (error) {
+              console.error("카테고리 라벨 조회 실패:", error);
+            }
+          }
+        };
+
+        detectAndLoadCategoryLabels();
+
+        // 각 행의 파일 상태 확인 (전체 행 + 가상 파일 컬럼별)
+        const fileStatusPromises = result.data.map(async (rowData: Record<string, any>) => {
+          const primaryKeyField = Object.keys(rowData)[0];
+          const recordId = rowData[primaryKeyField];
+
+          if (!recordId) return { rowKey: recordId, statuses: {} };
+
+          try {
+            const fileResponse = await getLinkedFiles(component.tableName, recordId);
+            const allFiles = fileResponse.files || [];
+
+            // 전체 행에 대한 파일 상태
+            const rowStatus = {
+              hasFiles: allFiles.length > 0,
+              fileCount: allFiles.length,
+            };
+
+            // 가상 파일 컬럼별 파일 상태
+            const columnStatuses: Record<string, { hasFiles: boolean; fileCount: number }> = {};
+
+            // 가상 파일 컬럼 찾기
+            const virtualFileColumns = component.columns.filter((col) => col.isVirtualFileColumn);
+
+            virtualFileColumns.forEach((column) => {
+              // 해당 컬럼의 파일만 필터링 (targetObjid로 수정)
+              let columnFiles = allFiles.filter((file: any) => file.targetObjid?.endsWith(`:${column.columnName}`));
+
+              // fallback: 컬럼명으로 찾지 못한 경우 모든 파일 컬럼 파일 포함
+              if (columnFiles.length === 0) {
+                columnFiles = allFiles.filter((file: any) =>
+                  file.targetObjid?.startsWith(`${component.tableName}:${recordId}:file_column_`),
+                );
+              }
+
+              const columnKey = `${recordId}_${column.columnName}`;
+              columnStatuses[columnKey] = {
+                hasFiles: columnFiles.length > 0,
+                fileCount: columnFiles.length,
+              };
+            });
+
+            return {
+              rowKey: recordId,
+              statuses: {
+                [recordId]: rowStatus, // 전체 행 상태
+                ...columnStatuses, // 컬럼별 상태
+              },
+            };
+          } catch {
+            // 에러 시 기본값
+            const defaultStatuses: Record<string, { hasFiles: boolean; fileCount: number }> = {
+              [recordId]: { hasFiles: false, fileCount: 0 },
+            };
+
+            // 가상 파일 컬럼에 대해서도 기본값 설정
+            const virtualFileColumns = component.columns.filter((col) => col.isVirtualFileColumn);
+            virtualFileColumns.forEach((column) => {
+              const columnKey = `${recordId}_${column.columnName}`;
+              defaultStatuses[columnKey] = { hasFiles: false, fileCount: 0 };
+            });
+
+            return { rowKey: recordId, statuses: defaultStatuses };
+          }
+        });
+
+        // 파일 상태 업데이트
+        Promise.all(fileStatusPromises).then((results) => {
+          const statusMap: Record<string, { hasFiles: boolean; fileCount: number }> = {};
+
+          results.forEach((result) => {
+            Object.assign(statusMap, result.statuses);
+          });
+
+          setFileStatusMap(statusMap);
+        });
+      } catch (error) {
+        // console.error("❌ 테이블 데이터 조회 실패:", error);
+        setData([]);
+        setTotal(0);
+        setTotalPages(1);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [component.tableName, component.pagination?.pageSize, component.autoFilter, splitPanelContext?.selectedLeftData, relatedButtonFilter],
+  );
+
   // 🆕 전역 테이블 새로고침 이벤트 리스너
   useEffect(() => {
     const handleRefreshTable = () => {
@@ -583,6 +830,15 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
   const [showDeleteDialog, setShowDeleteDialog] = useState(false);
   const [isDeleting, setIsDeleting] = useState(false);
 
+  // 추가/수정 모달 상태
+  const [showAddModal, setShowAddModal] = useState(false);
+  const [showEditModal, setShowEditModal] = useState(false);
+  const [addFormData, setAddFormData] = useState<Record<string, any>>({});
+  const [editFormData, setEditFormData] = useState<Record<string, any>>({});
+  const [editingRowData, setEditingRowData] = useState<Record<string, any> | null>(null);
+  const [isAdding, setIsAdding] = useState(false);
+  const [isEditing, setIsEditing] = useState(false);
+
   // 현재 사용자 정보
   const [currentUser, setCurrentUser] = useState<UserInfo | null>(null);
 
@@ -686,251 +942,6 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
     }
   }, [visibleColumns]);
 
-  // 데이터 로드 함수
-  const loadData = useCallback(
-    async (page: number = 1, searchParams: Record<string, any> = {}) => {
-      if (!component.tableName) return;
-
-      // 프리뷰 모드에서는 샘플 데이터만 표시
-      if (isPreviewMode) {
-        const sampleData = Array.from({ length: 3 }, (_, i) => {
-          const sample: Record<string, any> = { id: i + 1 };
-          component.columns.forEach((col) => {
-            if (col.type === "number") {
-              sample[col.key] = Math.floor(Math.random() * 1000);
-            } else if (col.type === "boolean") {
-              sample[col.key] = i % 2 === 0 ? "Y" : "N";
-            } else {
-              sample[col.key] = `샘플 ${col.label} ${i + 1}`;
-            }
-          });
-          return sample;
-        });
-        setData(sampleData);
-        setTotal(3);
-        setTotalPages(1);
-        setCurrentPage(1);
-        setLoading(false);
-        return;
-      }
-
-      setLoading(true);
-      try {
-        // 🆕 연결 필터 값 가져오기 (분할 패널 내부일 때)
-        let linkedFilterValues: Record<string, any> = {};
-        let hasLinkedFiltersConfigured = false; // 연결 필터가 설정되어 있는지 여부
-        let hasSelectedLeftData = false; // 좌측에서 데이터가 선택되었는지 여부
-
-        if (splitPanelContext) {
-          // 연결 필터 설정 여부 확인 (현재 테이블에 해당하는 필터가 있는지)
-          const linkedFiltersConfig = splitPanelContext.linkedFilters || [];
-          hasLinkedFiltersConfigured = linkedFiltersConfig.some(
-            (filter) =>
-              filter.targetColumn?.startsWith(component.tableName + ".") || filter.targetColumn === component.tableName,
-          );
-
-          // 좌측 데이터 선택 여부 확인
-          hasSelectedLeftData =
-            splitPanelContext.selectedLeftData && Object.keys(splitPanelContext.selectedLeftData).length > 0;
-
-          linkedFilterValues = splitPanelContext.getLinkedFilterValues();
-          // 현재 테이블에 해당하는 필터만 추출 (테이블명.컬럼명 형식에서)
-          const tableSpecificFilters: Record<string, any> = {};
-          for (const [key, value] of Object.entries(linkedFilterValues)) {
-            // key가 "테이블명.컬럼명" 형식인 경우
-            if (key.includes(".")) {
-              const [tableName, columnName] = key.split(".");
-              if (tableName === component.tableName) {
-                tableSpecificFilters[columnName] = value;
-                hasLinkedFiltersConfigured = true; // 이 테이블에 대한 필터가 있음
-              }
-            } else {
-              // 테이블명 없이 컬럼명만 있는 경우 그대로 사용
-              tableSpecificFilters[key] = value;
-            }
-          }
-          linkedFilterValues = tableSpecificFilters;
-        }
-
-        // 🆕 연결 필터가 설정되어 있지만 좌측에서 데이터가 선택되지 않은 경우
-        // → 빈 데이터 표시 (모든 데이터를 보여주지 않음)
-        if (hasLinkedFiltersConfigured && !hasSelectedLeftData) {
-          console.log("⚠️ [InteractiveDataTable] 연결 필터 설정됨 but 좌측 데이터 미선택 → 빈 데이터 표시");
-          setData([]);
-          setTotal(0);
-          setTotalPages(0);
-          setCurrentPage(1);
-          setLoading(false);
-          return;
-        }
-
-        // 🆕 RelatedDataButtons 필터 적용
-        const relatedButtonFilterValues: Record<string, any> = {};
-        if (relatedButtonFilter) {
-          relatedButtonFilterValues[relatedButtonFilter.filterColumn] = relatedButtonFilter.filterValue;
-        }
-
-        // 검색 파라미터와 연결 필터 병합
-        const mergedSearchParams = {
-          ...searchParams,
-          ...linkedFilterValues,
-          ...relatedButtonFilterValues, // 🆕 RelatedDataButtons 필터 추가
-        };
-
-        console.log("🔍 데이터 조회 시작:", {
-          tableName: component.tableName,
-          page,
-          pageSize,
-          linkedFilterValues,
-          relatedButtonFilterValues,
-          mergedSearchParams,
-        });
-
-        const result = await tableTypeApi.getTableData(component.tableName, {
-          page,
-          size: pageSize,
-          search: mergedSearchParams,
-          autoFilter: component.autoFilter, // 🆕 자동 필터 설정 전달
-        });
-
-        console.log("✅ 데이터 조회 완료:", {
-          tableName: component.tableName,
-          dataLength: result.data.length,
-          total: result.total,
-          page: result.page,
-        });
-
-        setData(result.data);
-        setTotal(result.total);
-        setTotalPages(result.totalPages);
-        setCurrentPage(result.page);
-
-        // 카테고리 코드 패턴(CATEGORY_*) 검출 및 라벨 조회
-        const detectAndLoadCategoryLabels = async () => {
-          const categoryCodes = new Set<string>();
-          result.data.forEach((row: Record<string, any>) => {
-            Object.values(row).forEach((value) => {
-              if (typeof value === "string" && value.startsWith("CATEGORY_")) {
-                categoryCodes.add(value);
-              }
-            });
-          });
-
-          console.log("🏷️ [InteractiveDataTable] 감지된 카테고리 코드:", Array.from(categoryCodes));
-
-          // 새로운 카테고리 코드만 필터링 (이미 캐시된 것 제외)
-          const newCodes = Array.from(categoryCodes);
-
-          if (newCodes.length > 0) {
-            try {
-              console.log("🏷️ [InteractiveDataTable] 카테고리 라벨 API 호출:", newCodes);
-              const response = await apiClient.post("/table-categories/labels-by-codes", { valueCodes: newCodes });
-              console.log("🏷️ [InteractiveDataTable] 카테고리 라벨 API 응답:", response.data);
-              if (response.data.success && response.data.data) {
-                setCategoryCodeLabels((prev) => {
-                  const newLabels = {
-                    ...prev,
-                    ...response.data.data,
-                  };
-                  console.log("🏷️ [InteractiveDataTable] 카테고리 라벨 캐시 업데이트:", newLabels);
-                  return newLabels;
-                });
-              }
-            } catch (error) {
-              console.error("카테고리 라벨 조회 실패:", error);
-            }
-          }
-        };
-
-        detectAndLoadCategoryLabels();
-
-        // 각 행의 파일 상태 확인 (전체 행 + 가상 파일 컬럼별)
-        const fileStatusPromises = result.data.map(async (rowData: Record<string, any>) => {
-          const primaryKeyField = Object.keys(rowData)[0];
-          const recordId = rowData[primaryKeyField];
-
-          if (!recordId) return { rowKey: recordId, statuses: {} };
-
-          try {
-            const fileResponse = await getLinkedFiles(component.tableName, recordId);
-            const allFiles = fileResponse.files || [];
-
-            // 전체 행에 대한 파일 상태
-            const rowStatus = {
-              hasFiles: allFiles.length > 0,
-              fileCount: allFiles.length,
-            };
-
-            // 가상 파일 컬럼별 파일 상태
-            const columnStatuses: Record<string, { hasFiles: boolean; fileCount: number }> = {};
-
-            // 가상 파일 컬럼 찾기
-            const virtualFileColumns = component.columns.filter((col) => col.isVirtualFileColumn);
-
-            virtualFileColumns.forEach((column) => {
-              // 해당 컬럼의 파일만 필터링 (targetObjid로 수정)
-              let columnFiles = allFiles.filter((file: any) => file.targetObjid?.endsWith(`:${column.columnName}`));
-
-              // fallback: 컬럼명으로 찾지 못한 경우 모든 파일 컬럼 파일 포함
-              if (columnFiles.length === 0) {
-                columnFiles = allFiles.filter((file: any) =>
-                  file.targetObjid?.startsWith(`${component.tableName}:${recordId}:file_column_`),
-                );
-              }
-
-              const columnKey = `${recordId}_${column.columnName}`;
-              columnStatuses[columnKey] = {
-                hasFiles: columnFiles.length > 0,
-                fileCount: columnFiles.length,
-              };
-            });
-
-            return {
-              rowKey: recordId,
-              statuses: {
-                [recordId]: rowStatus, // 전체 행 상태
-                ...columnStatuses, // 컬럼별 상태
-              },
-            };
-          } catch {
-            // 에러 시 기본값
-            const defaultStatuses: Record<string, { hasFiles: boolean; fileCount: number }> = {
-              [recordId]: { hasFiles: false, fileCount: 0 },
-            };
-
-            // 가상 파일 컬럼에 대해서도 기본값 설정
-            const virtualFileColumns = component.columns.filter((col) => col.isVirtualFileColumn);
-            virtualFileColumns.forEach((column) => {
-              const columnKey = `${recordId}_${column.columnName}`;
-              defaultStatuses[columnKey] = { hasFiles: false, fileCount: 0 };
-            });
-
-            return { rowKey: recordId, statuses: defaultStatuses };
-          }
-        });
-
-        // 파일 상태 업데이트
-        Promise.all(fileStatusPromises).then((results) => {
-          const statusMap: Record<string, { hasFiles: boolean; fileCount: number }> = {};
-
-          results.forEach((result) => {
-            Object.assign(statusMap, result.statuses);
-          });
-
-          setFileStatusMap(statusMap);
-        });
-      } catch (error) {
-        // console.error("❌ 테이블 데이터 조회 실패:", error);
-        setData([]);
-        setTotal(0);
-        setTotalPages(1);
-      } finally {
-        setLoading(false);
-      }
-    },
-    [component.tableName, pageSize, component.autoFilter, splitPanelContext?.selectedLeftData, relatedButtonFilter], // 🆕 autoFilter, 연결필터, RelatedDataButtons 필터 추가
-  );
-
   // 현재 사용자 정보 로드
   useEffect(() => {
     const fetchCurrentUser = async () => {
@@ -1240,6 +1251,13 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
     }));
   }, []);
 
+  const handleAddFormChange = useCallback((columnName: string, value: any) => {
+    setAddFormData((prev) => ({
+      ...prev,
+      [columnName]: value,
+    }));
+  }, []);
+
   // 파일 업로드 핸들러
   const handleFileUpload = useCallback(
     async (columnName: string, files: FileList | null, isEdit: boolean = false) => {
@@ -1346,12 +1364,12 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
       return (
         <div className="mt-2 space-y-2">
           {currentFiles.map((file, index) => (
-            <div key={index} className="flex items-center justify-between rounded border bg-gray-50 p-2">
+            <div key={index} className="flex items-center justify-between rounded border bg-muted p-2">
               <div className="flex items-center space-x-2">
                 <div className="text-muted-foreground text-xs">📄</div>
                 <div>
                   <p className="text-sm font-medium">{file.name}</p>
-                  <p className="text-xs text-gray-500">{(file.size / 1024).toFixed(1)} KB</p>
+                  <p className="text-xs text-muted-foreground">{(file.size / 1024).toFixed(1)} KB</p>
                 </div>
               </div>
               <Button
@@ -1554,10 +1572,10 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
           <Input
             value={value}
             readOnly
-            className="bg-gray-50 text-gray-700"
+            className="bg-muted text-foreground"
             placeholder={`${column.label} (자동 생성됨)`}
           />
-          <p className="mt-1 text-xs text-gray-500">자동 생성된 필드는 수정할 수 없습니다.</p>
+          <p className="mt-1 text-xs text-muted-foreground">자동 생성된 필드는 수정할 수 없습니다.</p>
         </div>
       );
     }
@@ -1569,10 +1587,10 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
           <Input
             value={value}
             readOnly
-            className="bg-gray-50 text-gray-700"
+            className="bg-muted text-foreground"
             placeholder={advancedConfig?.placeholder || `${column.label} (읽기 전용)`}
           />
-          {advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
+          {advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
         </div>
       );
     }
@@ -1598,7 +1616,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
               {...commonProps}
               maxLength={detailSettings?.maxLength}
             />
-            {advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
+            {advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
           </div>
         );
 
@@ -1613,7 +1631,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
               max={detailSettings?.max}
               {...commonProps}
             />
-            {advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
+            {advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
           </div>
         );
 
@@ -1621,7 +1639,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
         return (
           <div>
             <Input type="date" min={detailSettings?.minDate} max={detailSettings?.maxDate} {...commonProps} />
-            {advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
+            {advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
           </div>
         );
 
@@ -1629,7 +1647,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
         return (
           <div>
             <Input type="datetime-local" min={detailSettings?.minDate} max={detailSettings?.maxDate} {...commonProps} />
-            {advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
+            {advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
           </div>
         );
 
@@ -1649,7 +1667,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                 placeholder={commonProps.placeholder}
                 className={commonProps.className}
               />
-              {advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
+              {advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
             </div>
           );
         }
@@ -1671,7 +1689,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                   ))}
                 </SelectContent>
               </Select>
-              {advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
+              {advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
             </div>
           );
         } else {
@@ -1702,7 +1720,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                   </div>
                 ))}
               </div>
-              {advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
+              {advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
             </div>
           );
         } else {
@@ -1725,7 +1743,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
               rows={detailSettings?.rows || 3}
               maxLength={detailSettings?.maxLength}
             />
-            {advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
+            {advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
           </div>
         );
 
@@ -1738,7 +1756,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
               onCheckedChange={(checked) => handleEditFormChange(column.columnName, checked)}
             />
             <Label>{column.label}</Label>
-            {advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
+            {advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
           </div>
         );
 
@@ -1770,11 +1788,11 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                   )}
                   파일 선택
                 </Button>
-                {detailSettings?.accept && <span className="text-xs text-gray-500">({detailSettings.accept})</span>}
+                {detailSettings?.accept && <span className="text-xs text-muted-foreground">({detailSettings.accept})</span>}
               </div>
               {renderFileList(column.columnName, true)}
             </div>
-            {advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
+            {advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
           </div>
         );
 
@@ -1794,7 +1812,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
               required={isRequired}
               className={commonProps.className}
             />
-            {advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
+            {advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
           </div>
         );
       }
@@ -1803,7 +1821,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
         return (
           <div>
             <Input {...commonProps} />
-            {advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
+            {advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
           </div>
         );
     }
@@ -1826,10 +1844,10 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
           <Input
             value={value}
             readOnly
-            className="bg-gray-50 text-gray-700"
+            className="bg-muted text-foreground"
             placeholder={advancedConfig?.placeholder || `${column.label} (자동 생성)`}
           />
-          {advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
+          {advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
         </div>
       );
     }
@@ -1855,7 +1873,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
               {...commonProps}
               maxLength={detailSettings?.maxLength}
             />
-            {advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
+            {advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
           </div>
         );
 
@@ -1870,7 +1888,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
               max={detailSettings?.max}
               {...commonProps}
             />
-            {advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
+            {advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
           </div>
         );
 
@@ -1878,7 +1896,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
         return (
           <div>
             <Input type="date" min={detailSettings?.minDate} max={detailSettings?.maxDate} {...commonProps} />
-            {advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
+            {advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
           </div>
         );
 
@@ -1886,7 +1904,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
         return (
           <div>
             <Input type="datetime-local" min={detailSettings?.minDate} max={detailSettings?.maxDate} {...commonProps} />
-            {advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
+            {advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
           </div>
         );
 
@@ -1906,7 +1924,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                 placeholder={commonProps.placeholder}
                 className={commonProps.className}
               />
-              {advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
+              {advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
             </div>
           );
         }
@@ -1928,7 +1946,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                   ))}
                 </SelectContent>
               </Select>
-              {advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
+              {advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
             </div>
           );
         } else {
@@ -1967,7 +1985,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                   </div>
                 ))}
               </div>
-              {advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
+              {advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
             </div>
           );
         } else {
@@ -1983,7 +2001,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
               onCheckedChange={(checked) => handleAddFormChange(column.columnName, checked)}
             />
             <Label>{column.label}</Label>
-            {advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
+            {advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
           </div>
         );
 
@@ -2003,7 +2021,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
               rows={detailSettings?.rows || 3}
               maxLength={detailSettings?.maxLength}
             />
-            {advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
+            {advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
           </div>
         );
 
@@ -2032,14 +2050,14 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                   ))}
                 </SelectContent>
               </Select>
-              {advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
+              {advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
             </div>
           );
         } else {
           return (
             <div>
               <Input {...commonProps} placeholder={`${column.label} (코드 카테고리 설정 필요)`} readOnly />
-              {advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
+              {advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
             </div>
           );
         }
@@ -2072,11 +2090,11 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                   )}
                   파일 선택
                 </Button>
-                {detailSettings?.accept && <span className="text-xs text-gray-500">({detailSettings.accept})</span>}
+                {detailSettings?.accept && <span className="text-xs text-muted-foreground">({detailSettings.accept})</span>}
               </div>
               {renderFileList(column.columnName, false)}
             </div>
-            {advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
+            {advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
           </div>
         );
 
@@ -2096,7 +2114,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
               required={isRequired}
               className={commonProps.className}
             />
-            {advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
+            {advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
           </div>
         );
       }
@@ -2105,7 +2123,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
         return (
           <div>
             <Input {...commonProps} />
-            {advancedConfig?.helpText && <p className="mt-1 text-xs text-gray-500">{advancedConfig.helpText}</p>}
+            {advancedConfig?.helpText && <p className="mt-1 text-xs text-muted-foreground">{advancedConfig.helpText}</p>}
           </div>
         );
     }
@@ -2281,13 +2299,13 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
               <div className="relative">
                 <FolderOpen className="text-primary h-4 w-4" />
                 {fileCount > 0 && (
-                  <div className="absolute -top-1 -right-1 flex h-3 w-3 items-center justify-center rounded-full bg-blue-600 text-[10px] text-white">
+                  <div className="absolute -top-1 -right-1 flex h-3 w-3 items-center justify-center rounded-full bg-primary text-[10px] text-white">
                     {fileCount > 9 ? "9+" : fileCount}
                   </div>
                 )}
               </div>
             ) : (
-              <Folder className="h-4 w-4 text-gray-400" />
+              <Folder className="h-4 w-4 text-muted-foreground" />
             )}
           </Button>
         </div>
@@ -2400,7 +2418,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
   return (
     <div
       className={cn(
-        "flex h-full flex-col rounded-xl border border-gray-200/60 bg-gradient-to-br from-white to-gray-50/30 shadow-sm",
+        "flex h-full flex-col rounded-xl border border-border/60 bg-background shadow-sm",
         className,
       )}
       style={{ ...style, minHeight: "680px" }}
@@ -2526,9 +2544,9 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
         <div className="flex h-full flex-col">
           {visibleColumns.length > 0 ? (
             <>
-              <div className="overflow-hidden rounded-lg border border-gray-200/60 bg-white shadow-sm">
+              <div className="overflow-hidden rounded-lg border border-border/60 bg-white shadow-sm">
                 <Table style={{ tableLayout: "fixed" }}>
-                  <TableHeader className="from-muted/50 to-muted border-primary/20 border-b-2 bg-gradient-to-b">
+                  <TableHeader className="bg-muted/50 border-primary/20 border-b-2">
                     <TableRow>
                       {/* 체크박스 컬럼 (삭제 기능이 활성화된 경우) */}
                       {component.enableDelete && (
@@ -2556,7 +2574,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                             {/* 리사이즈 핸들 */}
                             {columnIndex < visibleColumns.length - 1 && (
                               <div
-                                className="absolute top-0 right-0 z-20 h-full w-2 cursor-col-resize hover:bg-blue-500"
+                                className="absolute top-0 right-0 z-20 h-full w-2 cursor-col-resize hover:bg-primary"
                                 style={{ marginRight: "-4px", paddingLeft: "4px", paddingRight: "4px" }}
                                 onClick={(e) => e.stopPropagation()}
                                 onMouseDown={(e) => {
@@ -2633,7 +2651,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                       </TableRow>
                     ) : data.length > 0 ? (
                       data.map((row, rowIndex) => (
-                        <TableRow key={rowIndex} className="transition-all duration-200 hover:bg-orange-100">
+                        <TableRow key={rowIndex} className="transition-colors duration-150 hover:bg-muted/50">
                           {/* 체크박스 셀 (삭제 기능이 활성화된 경우) */}
                           {component.enableDelete && (
                             <TableCell className="px-4" style={{ width: "48px", minWidth: "48px", maxWidth: "48px" }}>
@@ -2648,7 +2666,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                             return (
                               <TableCell
                                 key={column.id}
-                                className="overflow-hidden px-4 text-sm font-medium text-ellipsis whitespace-nowrap text-gray-900"
+                                className="overflow-hidden px-4 text-sm font-medium text-ellipsis whitespace-nowrap text-foreground"
                                 style={{ textAlign: isNumeric ? "right" : "left" }}
                               >
                                 {formatCellValue(row[column.columnName], column, row)}
@@ -2665,7 +2683,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                           className="h-32 text-center"
                         >
                           <div className="text-muted-foreground flex flex-col items-center gap-2">
-                            <Database className="h-8 w-8" />
+                            <Database className="h-8 w-8 opacity-40" />
                             <p>검색 결과가 없습니다</p>
                             <p className="text-xs">검색 조건을 변경하거나 새로고침을 시도해보세요</p>
                           </div>
@@ -2678,7 +2696,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
 
               {/* 페이지네이션 */}
               {component.pagination?.enabled && totalPages > 1 && (
-                <div className="mt-auto border-t border-gray-200/60 bg-gradient-to-r from-gray-50 to-slate-50">
+                <div className="mt-auto border-t border-border/60 bg-muted/30">
                   <div className="flex items-center justify-between px-6 py-3">
                     {component.pagination.showPageInfo && (
                       <div className="text-muted-foreground text-sm">
@@ -2743,7 +2761,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
           ) : (
             <div className="flex flex-1 items-center justify-center">
               <div className="text-muted-foreground flex flex-col items-center gap-2">
-                <Database className="h-8 w-8" />
+                <Database className="h-8 w-8 opacity-40" />
                 <p className="text-sm">표시할 컬럼이 없습니다</p>
                 <p className="text-xs">테이블 설정에서 컬럼을 추가해주세요</p>
               </div>
@@ -2788,7 +2806,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                 <div key={column.id} className="space-y-2">
                   <Label htmlFor={column.columnName} className="text-sm font-medium">
                     {column.label}
-                    {isRequiredField(column.columnName) && <span className="ml-1 text-orange-500">*</span>}
+                    {isRequiredField(column.columnName) && <span className="ml-1 text-amber-500">*</span>}
                   </Label>
                   <div>{renderAddFormInput(column)}</div>
                 </div>
@@ -2831,7 +2849,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                 <div key={column.id} className="space-y-2">
                   <Label htmlFor={`edit-${column.columnName}`} className="text-sm font-medium">
                     {column.label}
-                    {isRequiredField(column.columnName) && <span className="ml-1 text-orange-500">*</span>}
+                    {isRequiredField(column.columnName) && <span className="ml-1 text-amber-500">*</span>}
                   </Label>
                   <div>{renderEditFormInput(column)}</div>
                 </div>
@@ -2891,24 +2909,24 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                   const isImage = fileInfo.type?.startsWith("image/");
 
                   return (
-                    <div key={index} className="rounded-lg border bg-gray-50 p-4 transition-colors hover:bg-gray-100">
+                    <div key={index} className="rounded-lg border bg-muted p-4 transition-colors hover:bg-muted">
                       <div className="flex items-start gap-4">
                         {/* 파일 아이콘/미리보기 */}
                         <div className="flex-shrink-0">
                           {isImage ? (
                             <div className="flex h-16 w-16 items-center justify-center rounded border bg-white">
-                              <div className="text-xs font-medium text-green-600">IMG</div>
+                              <div className="text-xs font-medium text-emerald-600">IMG</div>
                             </div>
                           ) : (
                             <div className="flex h-16 w-16 items-center justify-center rounded border bg-white">
-                              <File className="h-8 w-8 text-gray-500" />
+                              <File className="h-8 w-8 text-muted-foreground" />
                             </div>
                           )}
                         </div>
 
                         {/* 파일 정보 */}
                         <div className="min-w-0 flex-1">
-                          <h4 className="truncate font-medium text-gray-900" title={fileInfo.name}>
+                          <h4 className="truncate font-medium text-foreground" title={fileInfo.name}>
                             {fileInfo.name}
                           </h4>
                           <div className="text-muted-foreground mt-1 space-y-1 text-sm">
@@ -2958,8 +2976,8 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
             {/* 요약 정보 */}
             {currentFileData && (
               <div className="border-primary/20 bg-accent mt-4 rounded-lg border p-3">
-                <h5 className="mb-2 font-medium text-blue-900">파일 요약</h5>
-                <div className="grid grid-cols-2 gap-4 text-sm text-blue-800">
+                <h5 className="mb-2 font-medium text-primary">파일 요약</h5>
+                <div className="grid grid-cols-2 gap-4 text-sm text-primary">
                   <div>
                     <span className="font-medium">총 파일 수:</span>
                     {"  "}
@@ -3027,7 +3045,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                 <Button size="sm" variant="outline" onClick={() => handleZoom("out")} disabled={zoom <= 0.25}>
                   <ZoomOut className="h-4 w-4" />
                 </Button>
-                <span className="min-w-[60px] text-center text-sm text-gray-500">{Math.round(zoom * 100)}%</span>
+                <span className="min-w-[60px] text-center text-sm text-muted-foreground">{Math.round(zoom * 100)}%</span>
                 <Button size="sm" variant="outline" onClick={() => handleZoom("in")} disabled={zoom >= 3}>
                   <ZoomIn className="h-4 w-4" />
                 </Button>
@@ -3049,7 +3067,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
             </DialogTitle>
           </DialogHeader>
 
-          <div className="flex flex-1 items-center justify-center overflow-auto rounded-lg bg-gray-50 p-4">
+          <div className="flex flex-1 items-center justify-center overflow-auto rounded-lg bg-muted p-4">
             {previewImage && (
               <img
                 src={alternativeImageUrl || getFilePreviewUrl(previewImage.id)}
@@ -3064,7 +3082,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
           </div>
 
           {previewImage && (
-            <div className="flex items-center justify-between border-t pt-3 text-sm text-gray-500">
+            <div className="flex items-center justify-between border-t pt-3 text-sm text-muted-foreground">
               <div>크기: {formatFileSize(previewImage.size)}</div>
               <div>타입: {previewImage.type}</div>
               <div>업로드: {new Date(previewImage.uploadedAt).toLocaleDateString("ko-KR")}</div>
@@ -3097,14 +3115,14 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
             {/* 기존 파일 목록 */}
             {linkedFiles.length > 0 && (
               <div className="space-y-3">
-                <h4 className="text-sm font-medium text-gray-900">연결된 파일</h4>
+                <h4 className="text-sm font-medium text-foreground">연결된 파일</h4>
                 {linkedFiles.map((file: any, index: number) => (
                   <div key={index} className="flex items-center justify-between rounded-lg border p-3">
                     <div className="flex items-center space-x-3">
                       <File className="text-primary h-5 w-5" />
                       <div>
                         <div className="font-medium">{file.realFileName}</div>
-                        <div className="text-sm text-gray-500">
+                        <div className="text-sm text-muted-foreground">
                           {(Number(file.fileSize) / 1024 / 1024).toFixed(2)} MB • {file.docTypeName}
                           {file.regdate && <span> • {new Date(file.regdate).toLocaleString("ko-KR")}</span>}
                           {file.writer && <span> • {file.writer}</span>}
@@ -3160,7 +3178,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                         size="sm"
                         variant="outline"
                         onClick={() => handleDeleteLinkedFile(file.objid, file.realFileName)}
-                        className="hover:bg-destructive/10 text-red-500 hover:text-red-700"
+                        className="hover:bg-destructive/10 text-destructive hover:text-destructive"
                       >
                         <Trash2 className="h-4 w-4" />
                       </Button>
@@ -3173,7 +3191,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
             {/* 파일 업로드 섹션 */}
             <div className="space-y-3">
               <div className="flex items-center justify-between">
-                <h4 className="text-sm font-medium text-gray-900">{selectedColumnForFiles?.label || "파일"} 업로드</h4>
+                <h4 className="text-sm font-medium text-foreground">{selectedColumnForFiles?.label || "파일"} 업로드</h4>
                 {selectedColumnForFiles?.isVirtualFileColumn && (
                   <Badge variant="secondary" className="text-xs">
                     {selectedColumnForFiles.fileColumnConfig?.docTypeName || "문서"}
diff --git a/frontend/components/screen/InteractiveScreenViewer.tsx b/frontend/components/screen/InteractiveScreenViewer.tsx
index 4d8a6fec..17fd7616 100644
--- a/frontend/components/screen/InteractiveScreenViewer.tsx
+++ b/frontend/components/screen/InteractiveScreenViewer.tsx
@@ -47,6 +47,7 @@ import { useFormValidation } from "@/hooks/useFormValidation";
 import { V2ColumnInfo as ColumnInfo } from "@/types";
 import { isFileComponent } from "@/lib/utils/componentTypeUtils";
 import { buildGridClasses } from "@/lib/constants/columnSpans";
+import { ButtonIconRenderer } from "@/lib/button-icon-map";
 import { cn } from "@/lib/utils";
 import { useScreenPreview } from "@/contexts/ScreenPreviewContext";
 import { TableOptionsProvider } from "@/contexts/TableOptionsContext";
@@ -245,6 +246,17 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
   // 통합된 폼 데이터
   const finalFormData = { ...localFormData, ...externalFormData };
 
+  // 테이블 타입관리 NOT NULL 기반 필수 여부 판단
+  const isColumnRequired = useCallback((columnName: string): boolean => {
+    if (!columnName || tableColumns.length === 0) return false;
+    const colInfo = tableColumns.find(
+      (c: any) => (c.columnName || c.column_name || "").toLowerCase() === columnName.toLowerCase()
+    );
+    if (!colInfo) return false;
+    const nullable = (colInfo as any).isNullable || (colInfo as any).is_nullable;
+    return nullable === "NO" || nullable === "N";
+  }, [tableColumns]);
+
   // 🆕 조건부 레이어 로직 (formData 변경 시 자동 평가)
   useEffect(() => {
     layers.forEach((layer) => {
@@ -1612,8 +1624,11 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
             return;
           }
 
-          // 필수 항목 검증
-          const requiredFields = allComponents.filter(c => c.required && (c.columnName || c.id));
+          // 필수 항목 검증 (테이블 타입관리 NOT NULL 기반 + 기존 required 속성 폴백)
+          const requiredFields = allComponents.filter(c => {
+            const colName = c.columnName || c.id;
+            return (c.required || isColumnRequired(colName)) && colName;
+          });
           const missingFields = requiredFields.filter(field => {
             const fieldName = field.columnName || field.id;
             const value = currentFormData[fieldName];
@@ -1835,7 +1850,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
           try {
             // console.log("🗑️ 삭제 실행:", { recordId, tableName, formData });
 
-            const result = await dynamicFormApi.deleteFormDataFromTable(recordId, tableName);
+            const result = await dynamicFormApi.deleteFormDataFromTable(recordId, tableName, screenInfo?.id);
 
             if (result.success) {
               alert("삭제되었습니다.");
@@ -2054,7 +2069,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
               borderColor: config?.borderColor,
             }}
           >
-            {label || "버튼"}
+            <ButtonIconRenderer componentConfig={(component as any).componentConfig} fallbackLabel={label || "버튼"} />
           </button>
         );
       }
@@ -2217,7 +2232,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
 
   const labelStyle: React.CSSProperties = {
     fontSize: component.style?.labelFontSize || "14px",
-    color: component.style?.labelColor || "#212121",
+    color: component.style?.labelColor || "hsl(var(--foreground))",
     fontWeight: component.style?.labelFontWeight || "500",
     backgroundColor: component.style?.labelBackgroundColor || "transparent",
     padding: component.style?.labelPadding || "0",
@@ -2486,7 +2501,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
                 style={labelStyle}
               >
                 {labelText}
-                {(component.required || component.componentConfig?.required) && <span className="ml-1 text-destructive">*</span>}
+                {(component.required || component.componentConfig?.required || isColumnRequired(component.columnName || component.style?.columnName || "")) && <span className="ml-1 text-destructive">*</span>}
               </label>
             )}
 
@@ -2505,7 +2520,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
                 }}
               >
                 {labelText}
-                {(component.required || component.componentConfig?.required) && <span className="ml-1 text-destructive">*</span>}
+                {(component.required || component.componentConfig?.required || isColumnRequired(component.columnName || component.style?.columnName || "")) && <span className="ml-1 text-destructive">*</span>}
               </label>
             )}
           </div>
diff --git a/frontend/components/screen/InteractiveScreenViewerDynamic.tsx b/frontend/components/screen/InteractiveScreenViewerDynamic.tsx
index 1bb04e97..75e7248e 100644
--- a/frontend/components/screen/InteractiveScreenViewerDynamic.tsx
+++ b/frontend/components/screen/InteractiveScreenViewerDynamic.tsx
@@ -11,7 +11,7 @@ import { ComponentData, WidgetComponent, DataTableComponent, FileComponent, Butt
 import { FileUploadComponent } from "@/lib/registry/components/file-upload/FileUploadComponent";
 import { InteractiveDataTable } from "./InteractiveDataTable";
 import { DynamicWebTypeRenderer } from "@/lib/registry";
-import { DynamicComponentRenderer } from "@/lib/registry/DynamicComponentRenderer";
+import { DynamicComponentRenderer, isColumnRequiredByMeta } from "@/lib/registry/DynamicComponentRenderer";
 import { filterDOMProps } from "@/lib/utils/domPropsFilter";
 import { isFileComponent, isDataTableComponent, isButtonComponent } from "@/lib/utils/componentTypeUtils";
 import { FlowButtonGroup } from "./widgets/FlowButtonGroup";
@@ -26,6 +26,9 @@ import {
   getServerSnapshot as canvasSplitGetServerSnapshot,
   subscribeDom as canvasSplitSubscribeDom,
 } from "@/lib/registry/components/v2-split-line/canvasSplitStore";
+import { ButtonIconRenderer } from "@/lib/button-icon-map";
+
+import { getAdaptiveLabelColor } from "@/lib/utils/darkModeColor";
 
 // 컴포넌트 렌더러들을 강제로 로드하여 레지스트리에 등록
 import "@/lib/registry/components/ButtonRenderer";
@@ -447,6 +450,7 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
           onClose={() => {
             // buttonActions.ts가 이미 처리함
           }}
+          isInModal={isInModal}
           // 탭 관련 정보 전달
           parentTabId={parentTabId}
           parentTabsComponentId={parentTabsComponentId}
@@ -558,9 +562,13 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
       if (onSave) {
         try {
           await onSave();
-        } catch (error) {
+        } catch (error: any) {
           console.error("저장 오류:", error);
-          toast.error("저장 중 오류가 발생했습니다.");
+          const msg =
+            error?.response?.data?.message ||
+            error?.message ||
+            "저장에 실패했습니다.";
+          toast.error(msg);
         }
         return;
       }
@@ -595,8 +603,12 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
           );
 
           toast.success("데이터가 성공적으로 저장되었습니다.");
-        } catch (error) {
-          toast.error("저장 중 오류가 발생했습니다.");
+        } catch (error: any) {
+          const msg =
+            error?.response?.data?.message ||
+            error?.message ||
+            "저장에 실패했습니다.";
+          toast.error(msg);
         }
         return;
       }
@@ -656,8 +668,12 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
         } else {
           toast.error(response.message || "저장에 실패했습니다.");
         }
-      } catch (error) {
-        toast.error("저장 중 오류가 발생했습니다.");
+      } catch (error: any) {
+        const msg =
+          error?.response?.data?.message ||
+          error?.message ||
+          "저장에 실패했습니다.";
+        toast.error(msg);
       }
     };
 
@@ -956,7 +972,7 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
 
     // 커스텀 색상이 있으면 Tailwind 클래스 대신 직접 스타일 적용
     const hasCustomColors = config?.backgroundColor || config?.textColor || comp.style?.backgroundColor || comp.style?.color;
-    
+
     return (
       <button
         onClick={handleClick}
@@ -977,7 +993,7 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
           height: "100%",
         }}
       >
-        {label || "버튼"}
+        <ButtonIconRenderer componentConfig={(comp as any).componentConfig} fallbackLabel={label || "버튼"} />
       </button>
     );
   };
@@ -1285,18 +1301,18 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
 
   const externalLabelComponent = needsExternalLabel ? (
     <label
+      htmlFor={component.id}
       className="text-sm font-medium leading-none"
       style={{
         fontSize: style?.labelFontSize || "14px",
-        color: style?.labelColor || "#212121",
+        color: getAdaptiveLabelColor(style?.labelColor),
         fontWeight: style?.labelFontWeight || "500",
         ...(isHorizLabel ? { whiteSpace: "nowrap" as const, display: "flex", alignItems: "center" } : {}),
         ...(labelPos === "bottom" ? { marginTop: style?.labelMarginBottom || "4px" } : {}),
       }}
     >
-      {labelText}
-      {((component as any).required || (component as any).componentConfig?.required) && (
-        <span className="ml-1 text-destructive">*</span>
+      {labelText}{((component as any).required || (component as any).componentConfig?.required || isColumnRequiredByMeta((component as any).tableName, (component as any).columnName)) && (
+        <span className="text-orange-500">*</span>
       )}
     </label>
   ) : null;
@@ -1335,6 +1351,7 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
           isHorizLabel ? (
             <div style={{ position: "relative", width: "100%", height: "100%" }}>
               <label
+                htmlFor={component.id}
                 className="text-sm font-medium leading-none"
                 style={{
                   position: "absolute",
@@ -1344,14 +1361,13 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
                     ? { right: "100%", marginRight: labelGapValue }
                     : { left: "100%", marginLeft: labelGapValue }),
                   fontSize: style?.labelFontSize || "14px",
-                  color: style?.labelColor || "#212121",
+                  color: getAdaptiveLabelColor(style?.labelColor),
                   fontWeight: style?.labelFontWeight || "500",
                   whiteSpace: "nowrap",
                 }}
               >
-                {labelText}
-                {((component as any).required || (component as any).componentConfig?.required) && (
-                  <span className="ml-1 text-destructive">*</span>
+                {labelText}{((component as any).required || (component as any).componentConfig?.required || isColumnRequiredByMeta((component as any).tableName, (component as any).columnName)) && (
+                  <span className="text-orange-500">*</span>
                 )}
               </label>
               <div style={{ width: "100%", height: "100%" }}>
@@ -1396,7 +1412,7 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
 
             {popupLoading ? (
               <div className="flex items-center justify-center p-8">
-                <div className="text-gray-500">로딩 중...</div>
+                <div className="text-muted-foreground">로딩 중...</div>
               </div>
             ) : (
               <div
diff --git a/frontend/components/screen/LayerManagerPanel.tsx b/frontend/components/screen/LayerManagerPanel.tsx
index a8a96862..171af7b9 100644
--- a/frontend/components/screen/LayerManagerPanel.tsx
+++ b/frontend/components/screen/LayerManagerPanel.tsx
@@ -376,7 +376,7 @@ export const LayerManagerPanel: React.FC<LayerManagerPanelProps> = ({
                   )}
                   onClick={() => onLayerChange(1)}
                 >
-                  <span className="shrink-0 rounded bg-blue-100 p-1 text-blue-700 dark:bg-blue-900 dark:text-blue-300">
+                  <span className="shrink-0 rounded bg-primary/10 p-1 text-primary dark:bg-primary/20 dark:text-primary/80">
                     <Layers className="h-3 w-3" />
                   </span>
                   <div className="min-w-0 flex-1">
diff --git a/frontend/components/screen/LayoutRowRenderer.tsx b/frontend/components/screen/LayoutRowRenderer.tsx
index b0f49eaa..1df226a1 100644
--- a/frontend/components/screen/LayoutRowRenderer.tsx
+++ b/frontend/components/screen/LayoutRowRenderer.tsx
@@ -57,10 +57,10 @@ export const LayoutRowRenderer: React.FC<LayoutRowRendererProps> = ({
     row.verticalAlignment === "stretch" && "items-stretch",
 
     // 선택 상태
-    isSelected && "ring-2 ring-blue-500 ring-inset",
+    isSelected && "ring-2 ring-ring ring-inset",
 
     // 호버 효과
-    "hover:bg-gray-50 transition-colors cursor-pointer border-2 border-dashed border-transparent hover:border-gray-300",
+    "hover:bg-muted transition-colors cursor-pointer border-2 border-dashed border-transparent hover:border-input",
   );
 
   // 배경색 스타일
@@ -71,19 +71,19 @@ export const LayoutRowRenderer: React.FC<LayoutRowRendererProps> = ({
   return (
     <div className={rowClasses} style={rowStyle} onClick={onSelectRow} data-row-id={row.id}>
       {/* 행 인덱스 표시 */}
-      <div className="absolute top-1/2 -left-8 -translate-y-1/2 font-mono text-xs text-gray-400">
+      <div className="absolute top-1/2 -left-8 -translate-y-1/2 font-mono text-xs text-muted-foreground/70">
         {row.rowIndex + 1}
       </div>
 
       {row.components.length === 0 ? (
         // 빈 행
-        <div className="col-span-12 flex items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 p-8">
+        <div className="col-span-12 flex items-center justify-center rounded-lg border-2 border-dashed border-input bg-muted p-8">
           <div className="text-center">
-            <p className="mb-2 text-sm text-gray-400">컴포넌트를 여기에 드래그하세요</p>
+            <p className="mb-2 text-sm text-muted-foreground/70">컴포넌트를 여기에 드래그하세요</p>
             <div className="flex justify-center gap-2">
-              <button className="rounded border bg-white px-2 py-1 text-xs hover:bg-gray-50">폼 행 추가</button>
-              <button className="rounded border bg-white px-2 py-1 text-xs hover:bg-gray-50">2분할</button>
-              <button className="rounded border bg-white px-2 py-1 text-xs hover:bg-gray-50">전체</button>
+              <button className="rounded border bg-white px-2 py-1 text-xs hover:bg-muted">폼 행 추가</button>
+              <button className="rounded border bg-white px-2 py-1 text-xs hover:bg-muted">2분할</button>
+              <button className="rounded border bg-white px-2 py-1 text-xs hover:bg-muted">전체</button>
             </div>
           </div>
         </div>
@@ -140,14 +140,14 @@ export const LayoutRowRenderer: React.FC<LayoutRowRendererProps> = ({
       {isSelected && (
         <div className="absolute top-1/2 -right-8 flex -translate-y-1/2 flex-col gap-1">
           <button
-            className="rounded border bg-white p-1 shadow-sm hover:bg-gray-50"
+            className="rounded border bg-white p-1 shadow-sm hover:bg-muted"
             title="행 설정"
             onClick={(e) => {
               e.stopPropagation();
               // 행 설정 패널 열기
             }}
           >
-            <svg className="h-4 w-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <svg className="h-4 w-4 text-muted-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path
                 strokeLinecap="round"
                 strokeLinejoin="round"
@@ -158,7 +158,7 @@ export const LayoutRowRenderer: React.FC<LayoutRowRendererProps> = ({
             </svg>
           </button>
           <button
-            className="rounded border bg-white p-1 shadow-sm hover:bg-red-50 hover:text-red-600"
+            className="rounded border bg-white p-1 shadow-sm hover:bg-destructive/10 hover:text-destructive"
             title="행 삭제"
             onClick={(e) => {
               e.stopPropagation();
diff --git a/frontend/components/screen/MenuAssignmentModal.tsx b/frontend/components/screen/MenuAssignmentModal.tsx
index 55e57f74..23099efc 100644
--- a/frontend/components/screen/MenuAssignmentModal.tsx
+++ b/frontend/components/screen/MenuAssignmentModal.tsx
@@ -303,7 +303,7 @@ export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
     // 관리자 메뉴 섹션
     if (adminMenus.length > 0) {
       options.push(
-        <div key="admin-header" className="bg-blue-50 px-2 py-1.5 text-xs font-semibold text-blue-600">
+        <div key="admin-header" className="bg-primary/10 px-2 py-1.5 text-xs font-semibold text-primary">
           👤 관리자 메뉴
         </div>,
       );
@@ -325,7 +325,7 @@ export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
         options.push(<div key="separator" className="my-1 border-t" />);
       }
       options.push(
-        <div key="user-header" className="bg-green-50 px-2 py-1.5 text-xs font-semibold text-green-600">
+        <div key="user-header" className="bg-emerald-50 px-2 py-1.5 text-xs font-semibold text-emerald-600">
           👥 사용자 메뉴
         </div>,
       );
@@ -353,8 +353,8 @@ export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
             <>
               <DialogHeader>
                 <DialogTitle className="flex items-center gap-2">
-                  <div className="flex h-8 w-8 items-center justify-center rounded-full bg-green-100">
-                    <svg className="h-5 w-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <div className="flex h-8 w-8 items-center justify-center rounded-full bg-emerald-100">
+                    <svg className="h-5 w-5 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                     </svg>
                   </div>
@@ -368,22 +368,22 @@ export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
               </DialogHeader>
 
               <div className="space-y-4">
-                <div className="rounded-lg border bg-green-50 p-4">
+                <div className="rounded-lg border bg-emerald-50 p-4">
                   <div className="flex items-center gap-3">
-                    <div className="flex h-10 w-10 items-center justify-center rounded-full bg-green-100">
-                      <Monitor className="h-5 w-5 text-green-600" />
+                    <div className="flex h-10 w-10 items-center justify-center rounded-full bg-emerald-100">
+                      <Monitor className="h-5 w-5 text-emerald-600" />
                     </div>
                     <div className="flex-1">
                       <p className="text-sm font-medium text-green-900">{assignmentMessage}</p>
-                      <p className="mt-1 text-xs text-green-700">3초 후 자동으로 화면 목록으로 이동합니다...</p>
+                      <p className="mt-1 text-xs text-emerald-700">3초 후 자동으로 화면 목록으로 이동합니다...</p>
                     </div>
                   </div>
                 </div>
 
                 <div className="flex items-center justify-center space-x-2">
-                  <div className="h-2 w-2 animate-bounce rounded-full bg-green-500 [animation-delay:-0.3s]"></div>
-                  <div className="h-2 w-2 animate-bounce rounded-full bg-green-500 [animation-delay:-0.15s]"></div>
-                  <div className="h-2 w-2 animate-bounce rounded-full bg-green-500"></div>
+                  <div className="h-2 w-2 animate-bounce rounded-full bg-emerald-500 [animation-delay:-0.3s]"></div>
+                  <div className="h-2 w-2 animate-bounce rounded-full bg-emerald-500 [animation-delay:-0.15s]"></div>
+                  <div className="h-2 w-2 animate-bounce rounded-full bg-emerald-500"></div>
                 </div>
               </div>
 
@@ -403,7 +403,7 @@ export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
                       onClose();
                     }
                   }}
-                  className="bg-green-600 text-white hover:bg-green-700"
+                  className="bg-emerald-600 text-white hover:bg-green-700"
                 >
                   <Monitor className="mr-2 h-4 w-4" />
                   화면 목록으로 이동
@@ -425,12 +425,12 @@ export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
                   <div className="bg-accent mt-2 rounded-lg border p-3">
                     <div className="flex items-center gap-2">
                       <Monitor className="text-primary h-4 w-4" />
-                      <span className="font-medium text-blue-900">{screenInfo.screenName}</span>
+                      <span className="font-medium text-primary">{screenInfo.screenName}</span>
                       <Badge variant="outline" className="font-mono text-xs">
                         {screenInfo.screenCode}
                       </Badge>
                     </div>
-                    {screenInfo.description && <p className="mt-1 text-sm text-blue-700">{screenInfo.description}</p>}
+                    {screenInfo.description && <p className="mt-1 text-sm text-primary">{screenInfo.description}</p>}
                   </div>
                 )}
               </DialogHeader>
@@ -465,7 +465,7 @@ export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
                         }}
                       >
                         <div className="relative">
-                          <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform text-gray-400" />
+                          <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform text-muted-foreground/70" />
                           <input
                             ref={searchInputRef}
                             type="text"
@@ -492,7 +492,7 @@ export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
                                 e.stopPropagation();
                                 setSearchTerm("");
                               }}
-                              className="hover:text-muted-foreground absolute top-1/2 right-2 h-4 w-4 -translate-y-1/2 transform text-gray-400"
+                              className="hover:text-muted-foreground absolute top-1/2 right-2 h-4 w-4 -translate-y-1/2 transform text-muted-foreground/70"
                             >
                               <X className="h-3 w-3" />
                             </button>
@@ -507,7 +507,7 @@ export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
 
                 {/* 선택된 메뉴 정보 */}
                 {selectedMenu && (
-                  <div className="rounded-lg border bg-gray-50 p-4">
+                  <div className="rounded-lg border bg-muted p-4">
                     <div className="flex items-center justify-between">
                       <div className="flex-1">
                         <div className="flex items-center gap-2">
@@ -527,7 +527,7 @@ export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
 
                         {/* 기존 할당된 화면 정보 */}
                         {existingScreens.length > 0 && (
-                          <div className="mt-3 rounded border bg-yellow-50 p-2">
+                          <div className="mt-3 rounded border bg-amber-50 p-2">
                             <p className="text-sm font-medium text-yellow-800">
                               ⚠️ 이미 할당된 화면 ({existingScreens.length}개)
                             </p>
@@ -542,7 +542,7 @@ export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
                                 </div>
                               ))}
                             </div>
-                            <p className="mt-1 text-xs text-yellow-600">새 화면을 할당하면 기존 화면들이 제거됩니다.</p>
+                            <p className="mt-1 text-xs text-amber-600">새 화면을 할당하면 기존 화면들이 제거됩니다.</p>
                           </div>
                         )}
                       </div>
@@ -559,7 +559,7 @@ export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
                 <Button
                   onClick={handleAssignScreen}
                   disabled={!selectedMenu || assigning}
-                  className="bg-blue-600 text-white hover:bg-blue-700"
+                  className="bg-primary text-white hover:bg-primary/90"
                 >
                   {assigning ? (
                     <>
@@ -584,7 +584,7 @@ export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
         <DialogContent className="max-w-md">
           <DialogHeader>
             <DialogTitle className="flex items-center gap-2">
-              <Monitor className="h-5 w-5 text-orange-600" />
+              <Monitor className="h-5 w-5 text-amber-600" />
               화면 교체 확인
             </DialogTitle>
             <DialogDescription>선택한 메뉴에 이미 할당된 화면이 있습니다.</DialogDescription>
@@ -596,7 +596,7 @@ export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
               <p className="mb-2 text-sm font-medium text-red-800">제거될 화면 ({existingScreens.length}개):</p>
               <div className="space-y-1">
                 {existingScreens.map((screen) => (
-                  <div key={screen.screenId} className="flex items-center gap-2 text-sm text-red-700">
+                  <div key={screen.screenId} className="flex items-center gap-2 text-sm text-destructive">
                     <X className="h-3 w-3" />
                     <span>{screen.screenName}</span>
                     <Badge variant="outline" className="text-xs">
@@ -609,9 +609,9 @@ export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
 
             {/* 새로 할당될 화면 */}
             {screenInfo && (
-              <div className="rounded-lg border bg-green-50 p-3">
-                <p className="mb-2 text-sm font-medium text-green-800">새로 할당될 화면:</p>
-                <div className="flex items-center gap-2 text-sm text-green-700">
+              <div className="rounded-lg border bg-emerald-50 p-3">
+                <p className="mb-2 text-sm font-medium text-emerald-800">새로 할당될 화면:</p>
+                <div className="flex items-center gap-2 text-sm text-emerald-700">
                   <Plus className="h-3 w-3" />
                   <span>{screenInfo.screenName}</span>
                   <Badge variant="outline" className="text-xs">
@@ -621,7 +621,7 @@ export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
               </div>
             )}
 
-            <div className="rounded-lg border-l-4 border-orange-400 bg-orange-50 p-3">
+            <div className="rounded-lg border-l-4 border-orange-400 bg-amber-50 p-3">
               <p className="text-sm text-orange-800">
                 <strong>주의:</strong> 기존 화면들이 메뉴에서 제거되고 새 화면으로 교체됩니다. 이 작업은 되돌릴 수
                 없습니다.
diff --git a/frontend/components/screen/NodeSettingModal.tsx b/frontend/components/screen/NodeSettingModal.tsx
index 287dcaff..1670b5af 100644
--- a/frontend/components/screen/NodeSettingModal.tsx
+++ b/frontend/components/screen/NodeSettingModal.tsx
@@ -430,9 +430,9 @@ export default function NodeSettingModal({
         <DialogHeader>
           <DialogTitle className="flex items-center gap-2 text-base sm:text-lg">
             {nodeType === "screen" ? (
-              <Database className="h-5 w-5 text-blue-500" />
+              <Database className="h-5 w-5 text-primary" />
             ) : (
-              <Database className="h-5 w-5 text-green-500" />
+              <Database className="h-5 w-5 text-emerald-500" />
             )}
             {modalTitle}
           </DialogTitle>
@@ -848,13 +848,13 @@ function TableRelationTab({
               </TableRow>
             ) : (
               v2TableRelations.map((item) => (
-                <TableRow key={item.id} className={item.source === "designer" ? "bg-orange-50/50" : ""}>
+                <TableRow key={item.id} className={item.source === "designer" ? "bg-amber-50/50" : ""}>
                   <TableCell className="text-xs">
                     <Badge variant="outline" className={cn(
                       "h-5 px-2",
                       item.source === "designer" 
-                        ? "border-orange-400 text-orange-700 bg-orange-100" 
-                        : "border-blue-400 text-blue-700 bg-blue-100"
+                        ? "border-orange-400 text-orange-700 bg-amber-100" 
+                        : "border-primary/60 text-primary bg-primary/10"
                     )}>
                       {item.source === "designer" ? "화면" : "DB"}
                     </Badge>
@@ -879,7 +879,7 @@ function TableRelationTab({
                     {item.source === "designer" && "joinColumnRefs" in item && item.joinColumnRefs && item.joinColumnRefs.length > 0 && (
                       <div className="flex flex-wrap gap-1 mt-1">
                         {item.joinColumnRefs.map((join, idx) => (
-                          <span key={idx} className="px-1.5 py-0.5 bg-orange-100 text-orange-600 text-[10px] rounded">
+                          <span key={idx} className="px-1.5 py-0.5 bg-amber-100 text-amber-600 text-[10px] rounded">
                             {join.column}→{join.refTable}
                           </span>
                         ))}
@@ -888,10 +888,10 @@ function TableRelationTab({
                   </TableCell>
                   <TableCell className="text-xs">
                     <span className={`px-2 py-1 rounded text-xs ${
-                      item.relation_type === "main" ? "bg-blue-100 text-blue-700" :
+                      item.relation_type === "main" ? "bg-primary/10 text-primary" :
                       item.relation_type === "sub" ? "bg-purple-100 text-purple-700" :
                       item.relation_type === "save" ? "bg-pink-100 text-pink-700" :
-                      "bg-gray-100 text-gray-700"
+                      "bg-muted text-foreground"
                     }`}>
                       {item.relation_type === "main" ? "메인" :
                        item.relation_type === "sub" ? "필터" :
@@ -1234,10 +1234,10 @@ function JoinSettingTab({
 
       {/* 참조 정보 (이 테이블을 참조하는 다른 테이블들) */}
       {existingConfig?.referencedBy && existingConfig.referencedBy.length > 0 && (
-        <div className="bg-green-50 border border-green-200 rounded-lg p-4">
+        <div className="bg-emerald-50 border border-emerald-200 rounded-lg p-4">
           <div className="flex items-center gap-2 mb-3">
-            <GitBranch className="h-4 w-4 text-green-600" />
-            <span className="text-sm font-medium text-green-800">이 테이블을 참조하는 관계</span>
+            <GitBranch className="h-4 w-4 text-emerald-600" />
+            <span className="text-sm font-medium text-emerald-800">이 테이블을 참조하는 관계</span>
           </div>
           <Table>
             <TableHeader>
@@ -1255,9 +1255,9 @@ function JoinSettingTab({
                   </TableCell>
                   <TableCell className="text-xs">
                     <span className={`px-2 py-0.5 rounded text-xs ${
-                      ref.relationType === 'join' ? 'bg-orange-100 text-orange-700' :
+                      ref.relationType === 'join' ? 'bg-amber-100 text-orange-700' :
                       ref.relationType === 'filter' ? 'bg-purple-100 text-purple-700' :
-                      'bg-gray-100 text-gray-700'
+                      'bg-muted text-foreground'
                     }`}>
                       {ref.relationType}
                     </span>
@@ -1434,14 +1434,14 @@ function JoinSettingTab({
               </TableRow>
             ) : (
               v2Joins.map((item) => (
-                <TableRow key={item.id} className={item.source === "designer" ? "bg-orange-50/50" : ""}>
+                <TableRow key={item.id} className={item.source === "designer" ? "bg-amber-50/50" : ""}>
                   <TableCell className="text-xs">
                     {item.source === "designer" ? (
-                      <span className="px-2 py-0.5 rounded bg-orange-100 text-orange-700 text-xs">
+                      <span className="px-2 py-0.5 rounded bg-amber-100 text-orange-700 text-xs">
                         화면
                       </span>
                     ) : (
-                      <span className="px-2 py-0.5 rounded bg-blue-100 text-blue-700 text-xs">
+                      <span className="px-2 py-0.5 rounded bg-primary/10 text-primary text-xs">
                         DB
                       </span>
                     )}
@@ -1451,7 +1451,7 @@ function JoinSettingTab({
                   <TableCell className="text-xs">{item.join_table_label || item.join_table}</TableCell>
                   <TableCell className="text-xs font-mono">{item.join_column}</TableCell>
                   <TableCell className="text-xs">
-                    <span className="px-2 py-1 rounded bg-gray-100 text-gray-700 text-xs">
+                    <span className="px-2 py-1 rounded bg-muted text-foreground text-xs">
                       {item.join_type}
                     </span>
                   </TableCell>
@@ -1485,9 +1485,9 @@ function JoinSettingTab({
           </TableBody>
         </Table>
         {designerJoins.length > 0 && (
-          <div className="px-4 py-2 border-t text-xs text-muted-foreground bg-orange-50/30">
-            <span className="text-orange-600">* 화면</span>: 화면 디자이너 설정 (수정 시 DB에 저장) | 
-            <span className="text-blue-600 ml-1">* DB</span>: DB 저장 설정 (직접 수정/삭제 가능)
+          <div className="px-4 py-2 border-t text-xs text-muted-foreground bg-amber-50/30">
+            <span className="text-amber-600">* 화면</span>: 화면 디자이너 설정 (수정 시 DB에 저장) | 
+            <span className="text-primary ml-1">* DB</span>: DB 저장 설정 (직접 수정/삭제 가능)
           </div>
         )}
       </div>
@@ -1745,7 +1745,7 @@ function DataFlowTab({
                     <span className={`px-2 py-1 rounded text-xs ${
                       item.flow_type === "bidirectional" 
                         ? "bg-purple-100 text-purple-700" 
-                        : "bg-blue-100 text-blue-700"
+                        : "bg-primary/10 text-primary"
                     }`}>
                       {item.flow_type === "bidirectional" ? "양방향" : "단방향"}
                     </span>
@@ -1805,7 +1805,7 @@ function FieldMappingTab({
     <div className="space-y-4">
       <div className="bg-muted/50 rounded-lg p-4">
         <div className="flex items-center gap-2 mb-2">
-          <Columns3 className="h-5 w-5 text-blue-500" />
+          <Columns3 className="h-5 w-5 text-primary" />
           <span className="text-sm font-medium">필드-컬럼 매핑</span>
         </div>
         <p className="text-xs text-muted-foreground">
@@ -1851,13 +1851,13 @@ function FieldMappingTab({
                     <TableCell className="text-xs">{col.displayName}</TableCell>
                     <TableCell className="text-xs text-muted-foreground">{col.dbType}</TableCell>
                     <TableCell className="text-xs">
-                      <span className="px-2 py-0.5 rounded bg-gray-100 text-gray-700 text-xs">
+                      <span className="px-2 py-0.5 rounded bg-muted text-foreground text-xs">
                         {col.webType}
                       </span>
                     </TableCell>
                     <TableCell className="text-xs">
                       {col.isPrimaryKey && (
-                        <span className="px-2 py-0.5 rounded bg-yellow-100 text-yellow-700 text-xs">
+                        <span className="px-2 py-0.5 rounded bg-amber-100 text-yellow-700 text-xs">
                           PK
                         </span>
                       )}
diff --git a/frontend/components/screen/OptimizedButtonComponent.tsx b/frontend/components/screen/OptimizedButtonComponent.tsx
index 4da98941..12f28756 100644
--- a/frontend/components/screen/OptimizedButtonComponent.tsx
+++ b/frontend/components/screen/OptimizedButtonComponent.tsx
@@ -15,6 +15,7 @@ import { cn } from "@/lib/utils";
 import { Badge } from "@/components/ui/badge";
 import { executeButtonWithFlow, handleFlowExecutionResult } from "@/lib/utils/nodeFlowButtonExecutor";
 import { useCurrentFlowStep } from "@/stores/flowStepStore";
+import { ButtonIconRenderer, getButtonDisplayContent } from "@/lib/button-icon-map";
 
 interface OptimizedButtonProps {
   component: ComponentData;
@@ -606,10 +607,10 @@ export const OptimizedButtonComponent: React.FC<OptimizedButtonProps> = ({
       return <Loader2 className="h-4 w-4 animate-spin" />;
     }
     if (lastResult?.success === false) {
-      return <AlertCircle className="h-4 w-4 text-red-500" />;
+      return <AlertCircle className="h-4 w-4 text-destructive" />;
     }
     if (lastResult?.success === true) {
-      return <CheckCircle2 className="h-4 w-4 text-green-500" />;
+      return <CheckCircle2 className="h-4 w-4 text-emerald-500" />;
     }
     return null;
   };
@@ -650,17 +651,14 @@ export const OptimizedButtonComponent: React.FC<OptimizedButtonProps> = ({
       <Button
         onClick={handleClick}
         disabled={isExecuting || disabled}
-        // 색상이 설정되어 있으면 variant를 적용하지 않아서 Tailwind 색상 클래스가 덮어씌우지 않도록 함
         variant={hasCustomColors ? undefined : (config?.variant || "default")}
         className={cn(
           "transition-all duration-200",
           isExecuting && "cursor-wait opacity-75",
           backgroundJobs.size > 0 && "border-primary/20 bg-accent",
-          // 커스텀 색상이 없을 때만 기본 스타일 적용
           !hasCustomColors && "bg-primary text-primary-foreground hover:bg-primary/90",
         )}
         style={{
-          // 커스텀 색상이 있을 때만 인라인 스타일 적용
           ...(config?.backgroundColor && { backgroundColor: config.backgroundColor }),
           ...(config?.textColor && { color: config.textColor }),
           ...(config?.borderColor && { borderColor: config.borderColor }),
@@ -669,7 +667,14 @@ export const OptimizedButtonComponent: React.FC<OptimizedButtonProps> = ({
         {/* 메인 버튼 내용 */}
         <div className="flex items-center space-x-2">
           {getStatusIcon()}
-          <span>{isExecuting ? "처리 중..." : buttonLabel}</span>
+          <span>
+            {isExecuting ? "처리 중..." : (
+              <ButtonIconRenderer
+                componentConfig={component.componentConfig}
+                fallbackLabel={buttonLabel}
+              />
+            )}
+          </span>
         </div>
 
         {/* 개발 모드에서 성능 정보 표시 */}
diff --git a/frontend/components/screen/RealtimePreview.tsx b/frontend/components/screen/RealtimePreview.tsx
index 4efcb696..cb9d157f 100644
--- a/frontend/components/screen/RealtimePreview.tsx
+++ b/frontend/components/screen/RealtimePreview.tsx
@@ -79,7 +79,7 @@ const getAreaIcon = (layoutDirection?: "horizontal" | "vertical") => {
     case "vertical":
       return <Columns className="h-4 w-4 text-purple-600" />;
     default:
-      return <Square className="h-4 w-4 text-gray-500" />;
+      return <Square className="h-4 w-4 text-muted-foreground" />;
   }
 };
 
@@ -92,11 +92,11 @@ const renderArea = (component: ComponentData, children?: React.ReactNode) => {
   const { layoutDirection, label } = area;
 
   const renderPlaceholder = () => (
-    <div className="flex h-full w-full items-center justify-center rounded border-2 border-dashed border-gray-300 bg-gray-50">
+    <div className="flex h-full w-full items-center justify-center rounded border-2 border-dashed border-input bg-muted">
       <div className="text-center">
         {getAreaIcon(layoutDirection)}
         <p className="text-muted-foreground mt-2 text-sm">{label || `${layoutDirection || "기본"} 영역`}</p>
-        <p className="text-xs text-gray-400">컴포넌트를 드래그해서 추가하세요</p>
+        <p className="text-xs text-muted-foreground/70">컴포넌트를 드래그해서 추가하세요</p>
       </div>
     </div>
   );
@@ -124,7 +124,7 @@ const WidgetRenderer: React.FC<{
   
   // 위젯 컴포넌트가 아닌 경우 빈 div 반환
   if (!isWidgetComponent(component)) {
-    return <div className="text-xs text-gray-500">위젯이 아닙니다</div>;
+    return <div className="text-xs text-muted-foreground">위젯이 아닙니다</div>;
   }
 
   const widget = component;
@@ -151,7 +151,7 @@ const WidgetRenderer: React.FC<{
     // isFileComponent: true
     // });
 
-    return <div className="p-2 text-xs text-gray-500">파일 컴포넌트 (별도 렌더링)</div>;
+    return <div className="p-2 text-xs text-muted-foreground">파일 컴포넌트 (별도 렌더링)</div>;
   }
 
   // 동적 웹타입 렌더링 사용
@@ -188,7 +188,7 @@ const WidgetRenderer: React.FC<{
 // 동적 위젯 타입 아이콘 (레지스트리에서 조회)
 const getWidgetIcon = (widgetType: WebType | undefined) => {
   if (!widgetType) {
-    return <Type className="h-4 w-4 text-gray-500" />;
+    return <Type className="h-4 w-4 text-muted-foreground" />;
   }
 
   // 레지스트리에서 웹타입 정의 조회
@@ -206,15 +206,15 @@ const getWidgetIcon = (widgetType: WebType | undefined) => {
       return <Type className="text-primary h-4 w-4" />;
     case "number":
     case "decimal":
-      return <Hash className="h-4 w-4 text-green-600" />;
+      return <Hash className="h-4 w-4 text-emerald-600" />;
     case "date":
     case "datetime":
       return <Calendar className="h-4 w-4 text-purple-600" />;
     case "select":
     case "dropdown":
-      return <List className="h-4 w-4 text-orange-600" />;
+      return <List className="h-4 w-4 text-amber-600" />;
     case "textarea":
-      return <AlignLeft className="h-4 w-4 text-indigo-600" />;
+      return <AlignLeft className="h-4 w-4 text-primary" />;
     case "boolean":
     case "checkbox":
       return <CheckSquare className="text-primary h-4 w-4" />;
@@ -225,9 +225,9 @@ const getWidgetIcon = (widgetType: WebType | undefined) => {
     case "entity":
       return <Building className="h-4 w-4 text-cyan-600" />;
     case "file":
-      return <File className="h-4 w-4 text-yellow-600" />;
+      return <File className="h-4 w-4 text-amber-600" />;
     default:
-      return <Type className="h-4 w-4 text-gray-500" />;
+      return <Type className="h-4 w-4 text-muted-foreground" />;
   }
 };
 
@@ -690,13 +690,13 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
               const tabs = tabsComponent.componentConfig?.tabs || tabsComponent.tabs || [];
 
               return (
-                <div className="flex h-full w-full items-center justify-center rounded border-2 border-dashed border-gray-300 bg-gray-50">
+                <div className="flex h-full w-full items-center justify-center rounded border-2 border-dashed border-input bg-muted">
                   <div className="text-center">
                     <div className="flex items-center justify-center">
-                      <Folder className="h-8 w-8 text-gray-400" />
+                      <Folder className="h-8 w-8 text-muted-foreground/70" />
                     </div>
                     <p className="text-muted-foreground mt-2 text-sm font-medium">탭 컴포넌트</p>
-                    <p className="text-xs text-gray-400">
+                    <p className="text-xs text-muted-foreground/70">
                       {tabs.length > 0
                         ? `${tabs.length}개의 탭 (실제 화면에서 표시됩니다)`
                         : "탭이 없습니다. 설정 패널에서 탭을 추가하세요"}
@@ -707,7 +707,7 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
                           <Badge key={tab.id} variant="outline" className="text-xs">
                             {tab.label || `탭 ${index + 1}`}
                             {tab.screenName && (
-                              <span className="ml-1 text-[10px] text-gray-400">({tab.screenName})</span>
+                              <span className="ml-1 text-[10px] text-muted-foreground/70">({tab.screenName})</span>
                             )}
                           </Badge>
                         ))}
@@ -806,10 +806,10 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
 
             return (
               <div key={`file-component-${component.id}-${fileUpdateTrigger}`} className="flex h-full flex-col">
-                <div className="pointer-events-none flex-1 rounded border-2 border-dashed border-gray-300 bg-gray-50 p-2">
+                <div className="pointer-events-none flex-1 rounded border-2 border-dashed border-input bg-muted p-2">
                   {currentFiles.length > 0 ? (
                     <div className="h-full overflow-y-auto">
-                      <div className="mb-1 text-xs font-medium text-gray-700">
+                      <div className="mb-1 text-xs font-medium text-foreground">
                         업로드된 파일 ({currentFiles.length})
                       </div>
                       <div className="space-y-1">
@@ -818,27 +818,27 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
                           const getFileIcon = (fileName: string) => {
                             const ext = fileName.split(".").pop()?.toLowerCase() || "";
                             if (["jpg", "jpeg", "png", "gif", "webp", "svg"].includes(ext)) {
-                              return <ImageIcon className="h-4 w-4 flex-shrink-0 text-green-500" />;
+                              return <ImageIcon className="h-4 w-4 flex-shrink-0 text-emerald-500" />;
                             }
                             if (["pdf", "doc", "docx", "txt", "rtf", "hwp", "hwpx", "hwpml", "pages"].includes(ext)) {
-                              return <FileText className="h-4 w-4 flex-shrink-0 text-red-500" />;
+                              return <FileText className="h-4 w-4 flex-shrink-0 text-destructive" />;
                             }
                             if (["ppt", "pptx", "hpt", "keynote"].includes(ext)) {
-                              return <Presentation className="h-4 w-4 flex-shrink-0 text-orange-600" />;
+                              return <Presentation className="h-4 w-4 flex-shrink-0 text-amber-600" />;
                             }
                             if (["xls", "xlsx", "hcdt", "numbers"].includes(ext)) {
-                              return <FileText className="h-4 w-4 flex-shrink-0 text-green-600" />;
+                              return <FileText className="h-4 w-4 flex-shrink-0 text-emerald-600" />;
                             }
                             if (["mp4", "avi", "mov", "wmv", "webm", "ogg"].includes(ext)) {
                               return <Video className="h-4 w-4 flex-shrink-0 text-purple-500" />;
                             }
                             if (["mp3", "wav", "flac", "aac"].includes(ext)) {
-                              return <Music className="h-4 w-4 flex-shrink-0 text-orange-500" />;
+                              return <Music className="h-4 w-4 flex-shrink-0 text-amber-500" />;
                             }
                             if (["zip", "rar", "7z", "tar"].includes(ext)) {
-                              return <Archive className="h-4 w-4 flex-shrink-0 text-yellow-500" />;
+                              return <Archive className="h-4 w-4 flex-shrink-0 text-amber-500" />;
                             }
-                            return <File className="h-4 w-4 flex-shrink-0 text-blue-500" />;
+                            return <File className="h-4 w-4 flex-shrink-0 text-primary" />;
                           };
 
                           return (
@@ -848,10 +848,10 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
                             >
                               {getFileIcon(file.realFileName || file.name || "")}
                               <div className="min-w-0 flex-1">
-                                <p className="truncate font-medium text-gray-900">
+                                <p className="truncate font-medium text-foreground">
                                   {file.realFileName || file.name || `파일 ${index + 1}`}
                                 </p>
-                                <p className="text-gray-500">
+                                <p className="text-muted-foreground">
                                   {file.fileSize ? `${Math.round(file.fileSize / 1024)} KB` : ""}
                                 </p>
                               </div>
@@ -862,10 +862,10 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
                     </div>
                   ) : (
                     <div className="flex h-full flex-col items-center justify-center text-center">
-                      <File className="mb-2 h-8 w-8 text-gray-400" />
-                      <p className="mb-1 text-xs font-medium text-gray-700">업로드된 파일 (0)</p>
+                      <File className="mb-2 h-8 w-8 text-muted-foreground/70" />
+                      <p className="mb-1 text-xs font-medium text-foreground">업로드된 파일 (0)</p>
                       <p className="text-muted-foreground text-sm">파일 업로드 영역</p>
-                      <p className="mt-1 text-xs text-gray-400">상세설정에서 파일을 업로드하세요</p>
+                      <p className="mt-1 text-xs text-muted-foreground/70">상세설정에서 파일을 업로드하세요</p>
                     </div>
                   )}
                 </div>
@@ -876,7 +876,7 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
 
       {/* 선택된 컴포넌트 정보 표시 */}
       {isSelected && (
-        <div className="absolute -top-6 left-0 rounded bg-blue-600 px-2 py-1 text-xs text-white">
+        <div className="absolute -top-6 left-0 rounded bg-primary px-2 py-1 text-xs text-white">
           {type === "widget" && (
             <div className="flex items-center gap-1">
               {getWidgetIcon(isWidgetComponent(component) ? (component.widgetType as WebType) : undefined)}
diff --git a/frontend/components/screen/RealtimePreviewDynamic.tsx b/frontend/components/screen/RealtimePreviewDynamic.tsx
index dcca4d0d..17615147 100644
--- a/frontend/components/screen/RealtimePreviewDynamic.tsx
+++ b/frontend/components/screen/RealtimePreviewDynamic.tsx
@@ -357,8 +357,30 @@ const RealtimePreviewDynamicComponent: React.FC<RealtimePreviewProps> = ({
       return `${actualHeight}px`;
     }
 
-    // 🆕 1순위: size.height가 있으면 우선 사용 (레이아웃에서 관리되는 실제 크기)
-    // size는 레이아웃 상태에서 직접 관리되며 리사이즈로 변경됨
+    // 런타임 모드에서 컴포넌트 타입별 높이 처리
+    if (!isDesignMode) {
+      const compType = (component as any).componentType || component.componentConfig?.type || "";
+      // 테이블: 부모 flex 컨테이너가 높이 관리 (flex: 1)
+      const flexGrowTypes = [
+        "table-list", "v2-table-list",
+        "split-panel-layout", "split-panel-layout2",
+        "v2-split-panel-layout", "screen-split-panel",
+        "v2-tab-container", "tab-container",
+        "tabs-widget", "v2-tabs-widget",
+      ];
+      if (flexGrowTypes.some(t => compType === t)) {
+        return "100%";
+      }
+      const autoHeightTypes = [
+        "table-search-widget", "v2-table-search-widget",
+        "flow-widget",
+      ];
+      if (autoHeightTypes.some(t => compType === t || compType.includes(t))) {
+        return "auto";
+      }
+    }
+
+    // 1순위: size.height가 있으면 우선 사용
     if (size?.height && size.height > 0) {
       if (component.componentConfig?.type === "table-list") {
         return `${Math.max(size.height, 200)}px`;
@@ -407,8 +429,8 @@ const RealtimePreviewDynamicComponent: React.FC<RealtimePreviewProps> = ({
   const isButtonComponent =
     (type === "widget" && widgetType === "button") ||
     (type === "component" &&
-      (["button-primary", "button-secondary"].includes(componentType) ||
-        ["button-primary", "button-secondary"].includes(componentId)));
+      (["button-primary", "button-secondary", "v2-button-primary"].includes(componentType) ||
+        ["button-primary", "button-secondary", "v2-button-primary"].includes(componentId)));
 
   // 레거시 분할 패널용 refs
   const initialPanelRatioRef = React.useRef<number | null>(null);
@@ -548,20 +570,24 @@ const RealtimePreviewDynamicComponent: React.FC<RealtimePreviewProps> = ({
   const origWidth = size?.width || 100;
   const isSplitShrunk = splitAdjustedWidth !== null && splitAdjustedWidth < origWidth;
 
-  // v2 수평 라벨 컴포넌트: position wrapper에서 border 제거 (DynamicComponentRenderer가 내부에서 처리)
+  // position wrapper에서 border 제거 (내부 컴포넌트가 자체적으로 border를 렌더링하는 경우)
+  // - v2 수평 라벨 컴포넌트: DynamicComponentRenderer가 내부에서 처리
+  // - 버튼 컴포넌트: buttonElementStyle에서 자체 border 적용
   const isV2HorizLabel = !!(
     componentStyle &&
     (componentStyle.labelDisplay === true || componentStyle.labelDisplay === "true") &&
     (componentStyle.labelPosition === "left" || componentStyle.labelPosition === "right")
   );
-  const safeComponentStyle = isV2HorizLabel
+  const needsStripBorder = isV2HorizLabel || isButtonComponent;
+  const safeComponentStyle = needsStripBorder
     ? (() => {
         const { borderWidth, borderColor, borderStyle, border, borderRadius, ...rest } = componentStyle as any;
         return rest;
       })()
     : componentStyle;
 
-  const baseStyle = {
+  const baseStyle = isDesignMode ? {
+    // 디자인 모드: 기존 절대 좌표 방식 그대로 유지
     left: `${adjustedPositionX}px`,
     top: `${position.y}px`,
     ...safeComponentStyle,
@@ -574,6 +600,12 @@ const RealtimePreviewDynamicComponent: React.FC<RealtimePreviewProps> = ({
     transition:
       isResizing ? "none" :
       isOnSplitPanel ? (isDraggingSplitPanel ? "none" : "left 0.15s ease-out, width 0.15s ease-out") : undefined,
+  } : {
+    // 런타임 모드: 부모(ResponsiveGridRenderer)가 위치/너비 관리
+    ...safeComponentStyle,
+    width: "100%",
+    height: displayHeight,
+    position: "relative" as const,
   };
 
   // 크기 정보는 필요시에만 디버깅 (개발 중 문제 발생 시 주석 해제)
@@ -676,7 +708,7 @@ const RealtimePreviewDynamicComponent: React.FC<RealtimePreviewProps> = ({
       ref={outerDivRef}
       id={`component-${id}`}
       data-component-id={id}
-      className="absolute cursor-pointer transition-all duration-200 ease-out"
+      className={`${isDesignMode ? "absolute" : "relative"} cursor-pointer transition-all duration-200 ease-out`}
       style={{ ...baseStyle, ...selectionStyle }}
       onClick={handleClick}
       onDoubleClick={handleDoubleClick}
diff --git a/frontend/components/screen/ResponsiveDesignerContainer.tsx b/frontend/components/screen/ResponsiveDesignerContainer.tsx
index 392e59ce..41c0ac44 100644
--- a/frontend/components/screen/ResponsiveDesignerContainer.tsx
+++ b/frontend/components/screen/ResponsiveDesignerContainer.tsx
@@ -106,15 +106,15 @@ export const ResponsiveDesignerContainer: React.FC<ResponsiveDesignerContainerPr
   };
 
   return (
-    <div className="flex h-full w-full flex-col bg-gray-100">
+    <div className="flex h-full w-full flex-col bg-muted">
       {/* 상단 컨트롤 바 */}
       <div className="flex items-center justify-between border-b bg-white px-4 py-2 shadow-sm">
         <div className="flex items-center space-x-2">
-          <span className="text-sm font-medium text-gray-700">
+          <span className="text-sm font-medium text-foreground">
             {screenName && `${screenName} - `}
             {designWidth} × {designHeight}
           </span>
-          <span className="text-xs text-gray-500">
+          <span className="text-xs text-muted-foreground">
             (배율: {Math.round(scale * 100)}% | 컨테이너: {containerSize.width}×{containerSize.height})
           </span>
         </div>
diff --git a/frontend/components/screen/ResponsiveGridRenderer.tsx b/frontend/components/screen/ResponsiveGridRenderer.tsx
new file mode 100644
index 00000000..8f671c21
--- /dev/null
+++ b/frontend/components/screen/ResponsiveGridRenderer.tsx
@@ -0,0 +1,357 @@
+"use client";
+
+import React, { useRef, useState, useEffect } from "react";
+import { ComponentData } from "@/types/screen";
+import { useResponsive } from "@/lib/hooks/useResponsive";
+import { cn } from "@/lib/utils";
+
+interface ResponsiveGridRendererProps {
+  components: ComponentData[];
+  canvasWidth: number;
+  canvasHeight: number;
+  renderComponent: (component: ComponentData) => React.ReactNode;
+}
+
+const FULL_WIDTH_TYPES = new Set([
+  "table-list",
+  "v2-table-list",
+  "table-search-widget",
+  "v2-table-search-widget",
+  "conditional-container",
+  "split-panel-layout",
+  "split-panel-layout2",
+  "v2-split-panel-layout",
+  "screen-split-panel",
+  "v2-split-line",
+  "flow-widget",
+  "v2-tab-container",
+  "tab-container",
+  "tabs-widget",
+  "v2-tabs-widget",
+]);
+
+const FLEX_GROW_TYPES = new Set([
+  "table-list",
+  "v2-table-list",
+  "split-panel-layout",
+  "split-panel-layout2",
+  "v2-split-panel-layout",
+  "screen-split-panel",
+  "v2-tab-container",
+  "tab-container",
+  "tabs-widget",
+  "v2-tabs-widget",
+]);
+
+function groupComponentsIntoRows(
+  components: ComponentData[],
+  threshold: number = 30
+): ComponentData[][] {
+  if (components.length === 0) return [];
+  const sorted = [...components].sort((a, b) => a.position.y - b.position.y);
+  const rows: ComponentData[][] = [];
+  let currentRow: ComponentData[] = [];
+  let currentRowY = -Infinity;
+
+  for (const comp of sorted) {
+    if (comp.position.y - currentRowY > threshold) {
+      if (currentRow.length > 0) rows.push(currentRow);
+      currentRow = [comp];
+      currentRowY = comp.position.y;
+    } else {
+      currentRow.push(comp);
+    }
+  }
+  if (currentRow.length > 0) rows.push(currentRow);
+  return rows.map((row) => row.sort((a, b) => a.position.x - b.position.x));
+}
+
+function getComponentTypeId(component: ComponentData): string {
+  const direct =
+    (component as any).componentType || (component as any).widgetType;
+  if (direct) return direct;
+  const url = (component as any).url;
+  if (url && typeof url === "string") {
+    const parts = url.split("/");
+    return parts[parts.length - 1];
+  }
+  return component.type || "";
+}
+
+function isButtonComponent(component: ComponentData): boolean {
+  return getComponentTypeId(component).includes("button");
+}
+
+function isFullWidthComponent(component: ComponentData): boolean {
+  return FULL_WIDTH_TYPES.has(getComponentTypeId(component));
+}
+
+function shouldFlexGrow(component: ComponentData): boolean {
+  return FLEX_GROW_TYPES.has(getComponentTypeId(component));
+}
+
+function getPercentageWidth(componentWidth: number, canvasWidth: number): number {
+  const pct = (componentWidth / canvasWidth) * 100;
+  return pct >= 95 ? 100 : pct;
+}
+
+function getRowGap(row: ComponentData[], canvasWidth: number): number {
+  if (row.length < 2) return 0;
+  const totalW = row.reduce((s, c) => s + (c.size?.width || 100), 0);
+  const gap = canvasWidth - totalW;
+  const cnt = row.length - 1;
+  if (gap <= 0 || cnt <= 0) return 8;
+  return Math.min(Math.max(Math.round(gap / cnt), 4), 24);
+}
+
+interface ProcessedRow {
+  type: "normal" | "fullwidth";
+  mainComponent?: ComponentData;
+  overlayComps: ComponentData[];
+  normalComps: ComponentData[];
+}
+
+function FullWidthOverlayRow({
+  main,
+  overlayComps,
+  canvasWidth,
+  renderComponent,
+}: {
+  main: ComponentData;
+  overlayComps: ComponentData[];
+  canvasWidth: number;
+  renderComponent: (component: ComponentData) => React.ReactNode;
+}) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [containerW, setContainerW] = useState(0);
+
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const ro = new ResizeObserver((entries) => {
+      const w = entries[0]?.contentRect.width;
+      if (w && w > 0) setContainerW(w);
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+
+  const compFlexGrow = shouldFlexGrow(main);
+  const mainY = main.position.y;
+  const scale = containerW > 0 ? containerW / canvasWidth : 1;
+
+  const minButtonY = Math.min(...overlayComps.map((c) => c.position.y));
+  const rawYOffset = minButtonY - mainY;
+  const maxBtnH = Math.max(
+    ...overlayComps.map((c) => c.size?.height || 40)
+  );
+  const yOffset = rawYOffset + (maxBtnH / 2) * (1 - scale);
+
+  return (
+    <div
+      ref={containerRef}
+      className={cn(
+        "relative flex w-full flex-col",
+        compFlexGrow ? "min-h-0 flex-1" : "flex-shrink-0"
+      )}
+    >
+      <div
+        data-component-id={main.id}
+        data-component-type={getComponentTypeId(main)}
+        className="min-h-0 min-w-0"
+        style={{
+          width: "100%",
+          height: compFlexGrow ? "100%" : "auto",
+          minHeight: compFlexGrow ? "300px" : undefined,
+          flexGrow: 1,
+        }}
+      >
+        {renderComponent(main)}
+      </div>
+
+      {overlayComps.length > 0 && containerW > 0 && (
+        <div
+          className="pointer-events-none absolute left-0 z-10"
+          style={{
+            top: `${yOffset}px`,
+            width: `${canvasWidth}px`,
+            height: `${maxBtnH}px`,
+            transform: `scale(${scale})`,
+            transformOrigin: "top left",
+          }}
+        >
+          {overlayComps.map((comp) => (
+            <div
+              key={comp.id}
+              data-component-id={comp.id}
+              data-component-type={getComponentTypeId(comp)}
+              className="pointer-events-auto absolute"
+              style={{
+                left: `${comp.position.x}px`,
+                top: `${comp.position.y - minButtonY}px`,
+                width: `${comp.size?.width || 90}px`,
+                height: `${comp.size?.height || 40}px`,
+              }}
+            >
+              {renderComponent(comp)}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function ResponsiveGridRenderer({
+  components,
+  canvasWidth,
+  canvasHeight,
+  renderComponent,
+}: ResponsiveGridRendererProps) {
+  const { isMobile } = useResponsive();
+
+  const topLevel = components.filter((c) => !c.parentId);
+
+  const rows = groupComponentsIntoRows(topLevel);
+  const processedRows: ProcessedRow[] = [];
+
+  for (const row of rows) {
+    const fullWidthComps: ComponentData[] = [];
+    const normalComps: ComponentData[] = [];
+
+    for (const comp of row) {
+      if (isFullWidthComponent(comp)) {
+        fullWidthComps.push(comp);
+      } else {
+        normalComps.push(comp);
+      }
+    }
+
+    if (fullWidthComps.length > 0 && normalComps.length > 0) {
+      for (const fwComp of fullWidthComps) {
+        processedRows.push({
+          type: "fullwidth",
+          mainComponent: fwComp,
+          overlayComps: normalComps,
+          normalComps: [],
+        });
+      }
+    } else if (fullWidthComps.length > 0) {
+      for (const fwComp of fullWidthComps) {
+        processedRows.push({
+          type: "fullwidth",
+          mainComponent: fwComp,
+          overlayComps: [],
+          normalComps: [],
+        });
+      }
+    } else {
+      processedRows.push({
+        type: "normal",
+        overlayComps: [],
+        normalComps,
+      });
+    }
+  }
+
+  return (
+    <div
+      data-screen-runtime="true"
+      className="bg-background flex h-full w-full flex-col overflow-x-hidden"
+      style={{ minHeight: "200px" }}
+    >
+      {processedRows.map((processedRow, rowIndex) => {
+        if (processedRow.type === "fullwidth" && processedRow.mainComponent) {
+          return (
+            <FullWidthOverlayRow
+              key={`row-${rowIndex}`}
+              main={processedRow.mainComponent}
+              overlayComps={processedRow.overlayComps}
+              canvasWidth={canvasWidth}
+              renderComponent={renderComponent}
+            />
+          );
+        }
+
+        const { normalComps } = processedRow;
+        const allButtons = normalComps.every((c) => isButtonComponent(c));
+        const gap = isMobile ? 8 : allButtons ? 8 : getRowGap(normalComps, canvasWidth);
+
+        const hasFlexHeightComp = normalComps.some((c) => {
+          const h = c.size?.height || 0;
+          return h / canvasHeight >= 0.8;
+        });
+
+        return (
+          <div
+            key={`row-${rowIndex}`}
+            className={cn(
+              "flex w-full flex-wrap overflow-hidden",
+              allButtons && "justify-end px-2 py-1",
+              hasFlexHeightComp ? "min-h-0 flex-1" : "flex-shrink-0"
+            )}
+            style={{ gap: `${gap}px` }}
+          >
+            {normalComps.map((component) => {
+              const typeId = getComponentTypeId(component);
+              const isButton = isButtonComponent(component);
+              const isFullWidth = isMobile && !isButton;
+
+              if (isButton) {
+                return (
+                  <div
+                    key={component.id}
+                    data-component-id={component.id}
+                    data-component-type={typeId}
+                    className="flex-shrink-0"
+                    style={{
+                      height: component.size?.height
+                        ? `${component.size.height}px`
+                        : "40px",
+                    }}
+                  >
+                    {renderComponent(component)}
+                  </div>
+                );
+              }
+
+              const percentWidth = isFullWidth
+                ? 100
+                : getPercentageWidth(component.size?.width || 100, canvasWidth);
+              const flexBasis = isFullWidth
+                ? "100%"
+                : `calc(${percentWidth}% - ${gap}px)`;
+
+              const heightPct = (component.size?.height || 0) / canvasHeight;
+              const useFlexHeight = heightPct >= 0.8;
+
+              return (
+                <div
+                  key={component.id}
+                  data-component-id={component.id}
+                  data-component-type={typeId}
+                  className={cn("min-w-0 overflow-hidden", useFlexHeight && "min-h-0 flex-1")}
+                  style={{
+                    width: isFullWidth ? "100%" : undefined,
+                    flexBasis: useFlexHeight ? undefined : flexBasis,
+                    flexGrow: 1,
+                    flexShrink: 1,
+                    minWidth: isMobile ? "100%" : undefined,
+                    minHeight: useFlexHeight ? "300px" : undefined,
+                    height: useFlexHeight ? "100%" : (component.size?.height
+                      ? `${component.size.height}px`
+                      : "auto"),
+                  }}
+                >
+                  {renderComponent(component)}
+                </div>
+              );
+            })}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+export default ResponsiveGridRenderer;
diff --git a/frontend/components/screen/ResponsivePreviewModal.tsx b/frontend/components/screen/ResponsivePreviewModal.tsx
index 1e05a86b..8ff86207 100644
--- a/frontend/components/screen/ResponsivePreviewModal.tsx
+++ b/frontend/components/screen/ResponsivePreviewModal.tsx
@@ -100,9 +100,9 @@ export const ResponsivePreviewModal: React.FC<ResponsivePreviewModalProps> = ({
 
         {/* 미리보기 영역 - Context Provider로 감싸서 브레이크포인트 전달 */}
         <PreviewBreakpointContext.Provider value={selectedDevice.breakpoint}>
-          <div className="flex min-h-[600px] items-start justify-center overflow-auto bg-gray-50 p-6">
+          <div className="flex min-h-[600px] items-start justify-center overflow-auto bg-muted p-6">
             <div
-              className="relative border border-gray-300 bg-white shadow-2xl"
+              className="relative border border-input bg-white shadow-2xl"
               style={{
                 width: `${selectedDevice.width}px`,
                 height: `${selectedDevice.height}px`,
@@ -112,11 +112,11 @@ export const ResponsivePreviewModal: React.FC<ResponsivePreviewModalProps> = ({
               }}
             >
               {/* 디바이스 프레임 헤더 (선택사항) */}
-              <div className="sticky top-0 z-10 flex items-center justify-between border-b border-gray-300 bg-gray-100 px-4 py-2">
-                <div className="text-xs text-gray-600">
+              <div className="sticky top-0 z-10 flex items-center justify-between border-b border-input bg-muted px-4 py-2">
+                <div className="text-xs text-muted-foreground">
                   {selectedDevice.name} - {selectedDevice.width}×{selectedDevice.height}
                 </div>
-                <div className="text-xs text-gray-500">스케일: {Math.round(scale * 100)}%</div>
+                <div className="text-xs text-muted-foreground">스케일: {Math.round(scale * 100)}%</div>
               </div>
 
               {/* 실제 컴포넌트 렌더링 */}
@@ -134,7 +134,7 @@ export const ResponsivePreviewModal: React.FC<ResponsivePreviewModalProps> = ({
         </PreviewBreakpointContext.Provider>
 
         {/* 푸터 정보 */}
-        <div className="border-t bg-gray-50 px-6 py-3 text-xs text-gray-600">
+        <div className="border-t bg-muted px-6 py-3 text-xs text-muted-foreground">
           💡 Tip: 각 디바이스 버튼을 클릭하여 다양한 화면 크기에서 레이아웃을 확인할 수 있습니다.
         </div>
       </DialogContent>
diff --git a/frontend/components/screen/ResponsiveScreenContainer.tsx b/frontend/components/screen/ResponsiveScreenContainer.tsx
index 2cf7c9c2..2b553a91 100644
--- a/frontend/components/screen/ResponsiveScreenContainer.tsx
+++ b/frontend/components/screen/ResponsiveScreenContainer.tsx
@@ -31,7 +31,7 @@ export const ResponsiveScreenContainer: React.FC<ResponsiveScreenContainerProps>
   };
 
   return (
-    <div className="h-full w-full overflow-auto bg-gray-50">
+    <div className="h-full w-full overflow-auto bg-muted">
       <div style={wrapperStyle}>
         <div style={screenStyle}>{children}</div>
       </div>
diff --git a/frontend/components/screen/SaveModal.tsx b/frontend/components/screen/SaveModal.tsx
index 259bf238..e8868cfb 100644
--- a/frontend/components/screen/SaveModal.tsx
+++ b/frontend/components/screen/SaveModal.tsx
@@ -10,9 +10,9 @@ import { DynamicComponentRenderer } from "@/lib/registry/DynamicComponentRendere
 import { InteractiveScreenViewer } from "./InteractiveScreenViewer";
 import { screenApi } from "@/lib/api/screen";
 import { dynamicFormApi, DynamicFormData } from "@/lib/api/dynamicForm";
+import { getTableColumns, ColumnTypeInfo } from "@/lib/api/tableManagement";
 import { ComponentData } from "@/lib/types/screen";
 import { useAuth } from "@/hooks/useAuth";
-
 interface SaveModalProps {
   isOpen: boolean;
   onClose: () => void;
@@ -42,6 +42,7 @@ export const SaveModal: React.FC<SaveModalProps> = ({
   const [originalData, setOriginalData] = useState<Record<string, any>>(initialData || {});
   const [screenData, setScreenData] = useState<any>(null);
   const [components, setComponents] = useState<ComponentData[]>([]);
+  const [tableColumnsInfo, setTableColumnsInfo] = useState<ColumnTypeInfo[]>([]);
   const [loading, setLoading] = useState(true);
   const [isSaving, setIsSaving] = useState(false);
 
@@ -70,6 +71,19 @@ export const SaveModal: React.FC<SaveModalProps> = ({
         const layout = await screenApi.getLayout(screenId);
         setComponents(layout.components || []);
 
+        // 테이블 컬럼 정보 로드 (NOT NULL 필수값 자동 인식용)
+        const tblName = screen?.tableName || layout.components?.find((c: any) => c.columnName)?.tableName;
+        if (tblName) {
+          try {
+            const colResult = await getTableColumns(tblName);
+            if (colResult.success && colResult.data?.columns) {
+              setTableColumnsInfo(colResult.data.columns);
+            }
+          } catch (colErr) {
+            console.warn("테이블 컬럼 정보 로드 실패 (필수값 검증 시 기존 방식 사용):", colErr);
+          }
+        }
+
         // initialData가 있으면 폼에 채우기
         if (initialData) {
           setFormData(initialData);
@@ -106,34 +120,37 @@ export const SaveModal: React.FC<SaveModalProps> = ({
     };
   }, [onClose]);
 
-  // 필수 항목 검증
+  // 테이블 타입관리의 NOT NULL 설정 기반으로 필수 여부 판단
+  const isColumnRequired = (columnName: string): boolean => {
+    if (!columnName || tableColumnsInfo.length === 0) return false;
+    const colInfo = tableColumnsInfo.find((c) => c.columnName.toLowerCase() === columnName.toLowerCase());
+    if (!colInfo) return false;
+    // is_nullable가 "NO"이면 필수
+    return colInfo.isNullable === "NO" || colInfo.isNullable === "N";
+  };
+
+  // 필수 항목 검증 (테이블 타입관리 NOT NULL + 기존 required 속성 병합)
   const validateRequiredFields = (): { isValid: boolean; missingFields: string[] } => {
     const missingFields: string[] = [];
 
     components.forEach((component) => {
-      // 컴포넌트의 required 속성 확인 (여러 위치에서 체크)
-      const isRequired = 
-        component.required === true || 
-        component.style?.required === true ||
-        component.componentConfig?.required === true;
-      
       const columnName = component.columnName || component.style?.columnName;
       const label = component.label || component.style?.label || columnName;
 
-      console.log("🔍 필수 항목 검증:", {
-        componentId: component.id,
-        columnName,
-        label,
-        isRequired,
-        "component.required": component.required,
-        "style.required": component.style?.required,
-        "componentConfig.required": component.componentConfig?.required,
-        value: formData[columnName || ""],
-      });
+      // 기존 required 속성 (화면 디자이너에서 수동 설정한 것)
+      const manualRequired =
+        component.required === true ||
+        component.style?.required === true ||
+        component.componentConfig?.required === true;
+
+      // 테이블 타입관리 NOT NULL 기반 필수 (컬럼 정보가 있을 때만)
+      const notNullRequired = columnName ? isColumnRequired(columnName) : false;
+
+      // 둘 중 하나라도 필수이면 검증
+      const isRequired = manualRequired || notNullRequired;
 
       if (isRequired && columnName) {
         const value = formData[columnName];
-        // 값이 비어있는지 확인 (null, undefined, 빈 문자열, 공백만 있는 문자열)
         if (value === null || value === undefined || (typeof value === "string" && value.trim() === "")) {
           missingFields.push(label || columnName);
         }
@@ -190,7 +207,7 @@ export const SaveModal: React.FC<SaveModalProps> = ({
       // 🆕 자동으로 작성자 정보 추가 (user.userId가 확실히 있음)
       const writerValue = user.userId;
       const companyCodeValue = user.companyCode || "";
-      
+
       console.log("👤 현재 사용자 정보:", {
         userId: user.userId,
         userName: userName,
@@ -235,11 +252,11 @@ export const SaveModal: React.FC<SaveModalProps> = ({
 
       if (result.success) {
         const masterRecordId = result.data?.id || dataToSave.id;
-        
+
         // 🆕 리피터 데이터 저장 이벤트 발생 (V2Repeater 컴포넌트가 리스닝)
         window.dispatchEvent(
           new CustomEvent("repeaterSave", {
-            detail: { 
+            detail: {
               parentId: masterRecordId,
               masterRecordId,
               mainFormData: dataToSave,
@@ -248,7 +265,7 @@ export const SaveModal: React.FC<SaveModalProps> = ({
           }),
         );
         console.log("📋 [SaveModal] repeaterSave 이벤트 발생:", { masterRecordId, tableName });
-        
+
         // ✅ 저장 성공
         toast.success(initialData ? "수정되었습니다!" : "저장되었습니다!");
 
@@ -262,7 +279,8 @@ export const SaveModal: React.FC<SaveModalProps> = ({
           }, 300); // 모달 닫힘 애니메이션 후 실행
         }
       } else {
-        throw new Error(result.message || "저장에 실패했습니다.");
+        const errorMsg = result.message || result.error?.message || "저장에 실패했습니다.";
+        toast.error(errorMsg);
       }
     } catch (error: any) {
       // ❌ 저장 실패 - 모달은 닫히지 않음
@@ -279,29 +297,29 @@ export const SaveModal: React.FC<SaveModalProps> = ({
   const calculateDynamicSize = () => {
     if (!components.length) return { width: 800, height: 600 };
 
-    const maxX = Math.max(...components.map((c) => {
-      const x = c.position?.x || 0;
-      const width = typeof c.size?.width === 'number' 
-        ? c.size.width 
-        : parseInt(String(c.size?.width || 200), 10);
-      return x + width;
-    }));
-    
-    const maxY = Math.max(...components.map((c) => {
-      const y = c.position?.y || 0;
-      const height = typeof c.size?.height === 'number' 
-        ? c.size.height 
-        : parseInt(String(c.size?.height || 40), 10);
-      return y + height;
-    }));
+    const maxX = Math.max(
+      ...components.map((c) => {
+        const x = c.position?.x || 0;
+        const width = typeof c.size?.width === "number" ? c.size.width : parseInt(String(c.size?.width || 200), 10);
+        return x + width;
+      }),
+    );
+
+    const maxY = Math.max(
+      ...components.map((c) => {
+        const y = c.position?.y || 0;
+        const height = typeof c.size?.height === "number" ? c.size.height : parseInt(String(c.size?.height || 40), 10);
+        return y + height;
+      }),
+    );
 
     // 컨텐츠 영역 크기 (화면관리 설정 크기)
     const contentWidth = Math.max(maxX, 400);
     const contentHeight = Math.max(maxY, 300);
-    
+
     // 실제 모달 크기 = 컨텐츠 + 헤더
     const headerHeight = 60; // DialogHeader
-    
+
     return {
       width: contentWidth,
       height: contentHeight + headerHeight, // 헤더 높이 포함
@@ -319,9 +337,9 @@ export const SaveModal: React.FC<SaveModalProps> = ({
           minWidth: "400px",
           minHeight: "300px",
         }}
-        className="gap-0 p-0 max-w-none"
+        className="max-w-none gap-0 p-0"
       >
-        <DialogHeader className="border-b px-6 py-4 flex-shrink-0">
+        <DialogHeader className="flex-shrink-0 border-b px-6 py-4">
           <div className="flex items-center justify-between">
             <DialogTitle className="text-lg font-semibold">{initialData ? "데이터 수정" : "데이터 등록"}</DialogTitle>
             <div className="flex items-center gap-2">
@@ -345,7 +363,7 @@ export const SaveModal: React.FC<SaveModalProps> = ({
           </div>
         </DialogHeader>
 
-        <div className="overflow-auto p-6 flex-1">
+        <div className="flex-1 overflow-auto p-6">
           {loading ? (
             <div className="flex items-center justify-center py-12">
               <Loader2 className="text-muted-foreground h-8 w-8 animate-spin" />
@@ -363,89 +381,92 @@ export const SaveModal: React.FC<SaveModalProps> = ({
               <div className="relative" style={{ width: `${dynamicSize.width}px`, height: `${dynamicSize.height}px` }}>
                 {components.map((component, index) => {
                   // ✅ 격자 시스템 잔재 제거: size의 픽셀 값만 사용
-                  const widthPx = typeof component.size?.width === 'number' 
-                    ? component.size.width 
-                    : parseInt(String(component.size?.width || 200), 10);
-                  const heightPx = typeof component.size?.height === 'number'
-                    ? component.size.height
-                    : parseInt(String(component.size?.height || 40), 10);
+                  const widthPx =
+                    typeof component.size?.width === "number"
+                      ? component.size.width
+                      : parseInt(String(component.size?.width || 200), 10);
+                  const heightPx =
+                    typeof component.size?.height === "number"
+                      ? component.size.height
+                      : parseInt(String(component.size?.height || 40), 10);
 
                   // 디버깅: 실제 크기 확인
                   if (index === 0) {
-                    console.log('🔍 SaveModal 컴포넌트 크기:', {
+                    console.log("🔍 SaveModal 컴포넌트 크기:", {
                       componentId: component.id,
-                      'size.width (원본)': component.size?.width,
-                      'size.width 타입': typeof component.size?.width,
-                      'widthPx (계산)': widthPx,
-                      'style.width': component.style?.width,
+                      "size.width (원본)": component.size?.width,
+                      "size.width 타입": typeof component.size?.width,
+                      "widthPx (계산)": widthPx,
+                      "style.width": component.style?.width,
                     });
                   }
 
                   return (
-                  <div
-                    key={component.id}
-                    style={{
-                      position: "absolute",
-                      top: component.position?.y || 0,
-                      left: component.position?.x || 0,
-                      width: `${widthPx}px`,  // ✅ 픽셀 단위 강제
-                      height: `${heightPx}px`,  // ✅ 픽셀 단위 강제
-                      zIndex: component.position?.z || 1000 + index,
-                    }}
-                  >
-                    {component.type === "widget" ? (
-                      <InteractiveScreenViewer
-                        component={component}
-                        allComponents={components}
-                        formData={formData}
-                        onFormDataChange={(fieldName, value) => {
-                          setFormData((prev) => ({
-                            ...prev,
-                            [fieldName]: value,
-                          }));
-                        }}
-                        hideLabel={false}
-                        menuObjid={menuObjid} // 🆕 메뉴 OBJID 전달 (카테고리 스코프용)
-                      />
-                    ) : (
-                      <DynamicComponentRenderer
-                        component={{
-                          ...component,
-                          style: {
-                            ...component.style,
-                            labelDisplay: true,
-                          },
-                        }}
-                        screenId={screenId}
-                        tableName={screenData.tableName}
-                        menuObjid={menuObjid} // 🆕 메뉴 OBJID 전달 (카테고리 스코프용)
-                        userId={user?.userId} // ✅ 사용자 ID 전달
-                        userName={user?.userName} // ✅ 사용자 이름 전달
-                        companyCode={user?.companyCode} // ✅ 회사 코드 전달
-                        formData={formData}
-                        originalData={originalData}
-                        onFormDataChange={(fieldName, value) => {
-                          console.log("📝 SaveModal - formData 변경:", {
-                            fieldName,
-                            value,
-                            componentType: component.type,
-                            componentId: component.id,
-                          });
-                          setFormData((prev) => {
-                            const newData = {
+                    <div
+                      key={component.id}
+                      style={{
+                        position: "absolute",
+                        top: component.position?.y || 0,
+                        left: component.position?.x || 0,
+                        width: `${widthPx}px`, // ✅ 픽셀 단위 강제
+                        height: `${heightPx}px`, // ✅ 픽셀 단위 강제
+                        zIndex: component.position?.z || 1000 + index,
+                      }}
+                    >
+                      {component.type === "widget" ? (
+                        <InteractiveScreenViewer
+                          component={component}
+                          allComponents={components}
+                          formData={formData}
+                          onFormDataChange={(fieldName, value) => {
+                            setFormData((prev) => ({
                               ...prev,
                               [fieldName]: value,
-                            };
-                            console.log("📦 새 formData:", newData);
-                            return newData;
-                          });
-                        }}
-                        mode="edit"
-                        isInModal={true}
-                        isInteractive={true}
-                      />
-                    )}
-                  </div>
+                            }));
+                          }}
+                          hideLabel={false}
+                          menuObjid={menuObjid}
+                          tableColumns={tableColumnsInfo as any}
+                        />
+                      ) : (
+                        <DynamicComponentRenderer
+                          component={{
+                            ...component,
+                            style: {
+                              ...component.style,
+                              labelDisplay: true,
+                            },
+                          }}
+                          screenId={screenId}
+                          tableName={screenData.tableName}
+                          menuObjid={menuObjid} // 🆕 메뉴 OBJID 전달 (카테고리 스코프용)
+                          userId={user?.userId} // ✅ 사용자 ID 전달
+                          userName={user?.userName} // ✅ 사용자 이름 전달
+                          companyCode={user?.companyCode} // ✅ 회사 코드 전달
+                          formData={formData}
+                          originalData={originalData}
+                          onFormDataChange={(fieldName, value) => {
+                            console.log("📝 SaveModal - formData 변경:", {
+                              fieldName,
+                              value,
+                              componentType: component.type,
+                              componentId: component.id,
+                            });
+                            setFormData((prev) => {
+                              const newData = {
+                                ...prev,
+                                [fieldName]: value,
+                              };
+                              console.log("📦 새 formData:", newData);
+                              return newData;
+                            });
+                          }}
+                          mode="edit"
+                          isInModal={true}
+                          isInteractive={true}
+                        />
+                      )}
+                    </div>
                   );
                 })}
               </div>
diff --git a/frontend/components/screen/ScreenDesigner.tsx b/frontend/components/screen/ScreenDesigner.tsx
index 2cbacb03..10e1153d 100644
--- a/frontend/components/screen/ScreenDesigner.tsx
+++ b/frontend/components/screen/ScreenDesigner.tsx
@@ -5475,7 +5475,6 @@ export default function ScreenDesigner({
         { ctrl: true, key: "s" }, // 저장 (필요시 차단 해제)
         { ctrl: true, key: "p" }, // 인쇄
         { ctrl: true, key: "o" }, // 파일 열기
-        { ctrl: true, key: "v" }, // 붙여넣기 (브라우저 기본 동작 차단)
 
         // 개발자 도구
         { key: "F12" }, // 개발자 도구
@@ -5500,7 +5499,20 @@ export default function ScreenDesigner({
         return ctrlMatch && shiftMatch && keyMatch;
       });
 
+      // 입력 필드(input, textarea 등)에 포커스 시 편집 단축키는 기본 동작 허용
+      const _target = e.target as HTMLElement;
+      const _activeEl = document.activeElement as HTMLElement;
+      const _isEditable = (el: HTMLElement | null) =>
+        el instanceof HTMLInputElement ||
+        el instanceof HTMLTextAreaElement ||
+        el instanceof HTMLSelectElement ||
+        el?.isContentEditable;
+      const isEditableFieldFocused = _isEditable(_target) || _isEditable(_activeEl);
+
       if (isBrowserShortcut) {
+        if (isEditableFieldFocused) {
+          return;
+        }
         // console.log("🚫 브라우저 기본 단축키 차단:", e.key);
         e.preventDefault();
         e.stopPropagation();
@@ -5509,6 +5521,11 @@ export default function ScreenDesigner({
 
       // ✅ 애플리케이션 전용 단축키 처리
 
+      // 입력 필드 포커스 시 앱 단축키 무시 (텍스트 편집 우선)
+      if (isEditableFieldFocused && (e.ctrlKey || e.metaKey)) {
+        return;
+      }
+
       // 1. 그룹 관련 단축키
       if ((e.ctrlKey || e.metaKey) && e.key?.toLowerCase() === "g" && !e.shiftKey) {
         // console.log("🔄 그룹 생성 단축키");
@@ -5585,7 +5602,6 @@ export default function ScreenDesigner({
 
       // 5. 붙여넣기 (컴포넌트 붙여넣기)
       if ((e.ctrlKey || e.metaKey) && e.key?.toLowerCase() === "v") {
-        // console.log("🔄 컴포넌트 붙여넣기");
         e.preventDefault();
         e.stopPropagation();
         e.stopImmediatePropagation();
@@ -6681,7 +6697,7 @@ export default function ScreenDesigner({
                       )}
 
                       {/* 상태 표시 */}
-                      {hasFlowGroupButton && <p className="mt-1 text-[10px] text-blue-600">✓ 플로우 그룹 버튼</p>}
+                      {hasFlowGroupButton && <p className="mt-1 text-[10px] text-primary">✓ 플로우 그룹 버튼</p>}
                     </div>
                   </div>
                 );
@@ -6698,7 +6714,7 @@ export default function ScreenDesigner({
                       </span>
                     )}
                     {!activeLayerZone && (
-                      <span className="ml-2 text-red-500">
+                      <span className="ml-2 text-destructive">
                         (조건부 영역 미설정 - 기본 레이어에서 Zone을 먼저 생성하세요)
                       </span>
                     )}
diff --git a/frontend/components/screen/ScreenGroupTreeView.tsx b/frontend/components/screen/ScreenGroupTreeView.tsx
index 74133a16..ead6ddd3 100644
--- a/frontend/components/screen/ScreenGroupTreeView.tsx
+++ b/frontend/components/screen/ScreenGroupTreeView.tsx
@@ -1185,9 +1185,9 @@ export function ScreenGroupTreeView({
                             <ChevronRight className="h-3 w-3 shrink-0 text-muted-foreground" />
                           )}
                           {isChildExpanded ? (
-                            <FolderOpen className="h-3 w-3 shrink-0 text-blue-500" />
+                            <FolderOpen className="h-3 w-3 shrink-0 text-primary" />
                           ) : (
-                            <Folder className="h-3 w-3 shrink-0 text-blue-500" />
+                            <Folder className="h-3 w-3 shrink-0 text-primary" />
                           )}
                           <span className={cn("truncate flex-1", isChildMatching && "font-medium text-primary/80")}>{childGroup.group_name}</span>
                           <Badge variant="secondary" className="text-[10px] h-4">
@@ -1247,9 +1247,9 @@ export function ScreenGroupTreeView({
                                       <ChevronRight className="h-3 w-3 shrink-0 text-muted-foreground" />
                                     )}
                                     {isGrandExpanded ? (
-                                      <FolderOpen className="h-3 w-3 shrink-0 text-green-500" />
+                                      <FolderOpen className="h-3 w-3 shrink-0 text-emerald-500" />
                                     ) : (
-                                      <Folder className="h-3 w-3 shrink-0 text-green-500" />
+                                      <Folder className="h-3 w-3 shrink-0 text-emerald-500" />
                                     )}
                                     <span className={cn("truncate flex-1", isGrandMatching && "font-medium text-primary/80")}>{grandChild.group_name}</span>
                                     <Badge variant="outline" className="text-[10px] h-4">
@@ -1302,7 +1302,7 @@ export function ScreenGroupTreeView({
                                             onDoubleClick={() => handleScreenDoubleClick(screen)}
                                             onContextMenu={(e) => handleContextMenu(e, screen)}
                                           >
-                                            <Monitor className="h-3 w-3 shrink-0 text-blue-500" />
+                                            <Monitor className="h-3 w-3 shrink-0 text-primary" />
                                             <span className="truncate flex-1">{screen.screenName}</span>
                                             <span className="text-[10px] text-muted-foreground truncate max-w-[80px]">
                                               {screen.screenCode}
@@ -1338,7 +1338,7 @@ export function ScreenGroupTreeView({
                                   onDoubleClick={() => handleScreenDoubleClick(screen)}
                                   onContextMenu={(e) => handleContextMenu(e, screen)}
                                 >
-                                  <Monitor className="h-3 w-3 shrink-0 text-blue-500" />
+                                  <Monitor className="h-3 w-3 shrink-0 text-primary" />
                                   <span className="truncate flex-1">{screen.screenName}</span>
                                   <span className="text-[10px] text-muted-foreground truncate max-w-[80px]">
                                     {screen.screenCode}
@@ -1374,7 +1374,7 @@ export function ScreenGroupTreeView({
                         onDoubleClick={() => handleScreenDoubleClick(screen)}
                         onContextMenu={(e) => handleContextMenu(e, screen)}
                       >
-                        <Monitor className="h-4 w-4 shrink-0 text-blue-500" />
+                        <Monitor className="h-4 w-4 shrink-0 text-primary" />
                         <span className="truncate flex-1">{screen.screenName}</span>
                         <span className="text-xs text-muted-foreground truncate max-w-[100px]">
                           {screen.screenCode}
@@ -1424,7 +1424,7 @@ export function ScreenGroupTreeView({
                     onDoubleClick={() => handleScreenDoubleClick(screen)}
                     onContextMenu={(e) => handleContextMenu(e, screen)}
                   >
-                    <Monitor className="h-4 w-4 shrink-0 text-blue-500" />
+                    <Monitor className="h-4 w-4 shrink-0 text-primary" />
                     <span className="truncate flex-1">{screen.screenName}</span>
                     <span className="text-xs text-muted-foreground truncate max-w-[100px]">
                       {screen.screenCode}
@@ -1519,7 +1519,7 @@ export function ScreenGroupTreeView({
                 id="deleteScreensWithGroup"
                 checked={deleteScreensWithGroup}
                 onChange={(e) => setDeleteScreensWithGroup(e.target.checked)}
-                className="h-4 w-4 rounded border-gray-300 text-destructive focus:ring-destructive"
+                className="h-4 w-4 rounded border-input text-destructive focus:ring-destructive"
               />
               <label 
                 htmlFor="deleteScreensWithGroup" 
@@ -2080,15 +2080,15 @@ export function ScreenGroupTreeView({
                   onClick={() => handleSync("screen-to-menu")}
                   disabled={isSyncing}
                   variant="outline"
-                  className="w-full justify-start gap-2 border-blue-200 bg-blue-50/50 hover:bg-blue-100/70 hover:border-blue-300"
+                  className="w-full justify-start gap-2 border-primary/20 bg-primary/10/50 hover:bg-primary/10/70 hover:border-primary/40"
                 >
                   {isSyncing && syncDirection === "screen-to-menu" ? (
-                    <Loader2 className="h-4 w-4 animate-spin text-blue-600" />
+                    <Loader2 className="h-4 w-4 animate-spin text-primary" />
                   ) : (
-                    <FolderTree className="h-4 w-4 text-blue-600" />
+                    <FolderTree className="h-4 w-4 text-primary" />
                   )}
-                  <span className="flex-1 text-left text-blue-700">화면관리 → 메뉴 동기화</span>
-                  <span className="text-xs text-blue-500/70">
+                  <span className="flex-1 text-left text-primary">화면관리 → 메뉴 동기화</span>
+                  <span className="text-xs text-primary/70">
                     폴더 구조를 메뉴에 반영
                   </span>
                 </Button>
diff --git a/frontend/components/screen/ScreenList.tsx b/frontend/components/screen/ScreenList.tsx
index 2c900442..f7ad1bd6 100644
--- a/frontend/components/screen/ScreenList.tsx
+++ b/frontend/components/screen/ScreenList.tsx
@@ -1367,7 +1367,7 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
       <AlertDialog open={showDependencyWarning} onOpenChange={setShowDependencyWarning}>
         <AlertDialogContent className="max-w-2xl">
           <AlertDialogHeader>
-            <AlertDialogTitle className="text-orange-600">⚠️ 화면 삭제 경고</AlertDialogTitle>
+            <AlertDialogTitle className="text-amber-600">⚠️ 화면 삭제 경고</AlertDialogTitle>
             <AlertDialogDescription>
               "{screenToDelete?.screenName}" 화면이 다른 화면에서 사용 중입니다.
               <br />이 화면을 삭제하면 아래 화면들의 버튼 기능이 작동하지 않을 수 있습니다.
@@ -1378,14 +1378,14 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
             <div className="space-y-3">
               <h4 className="font-medium">사용 중인 화면 목록:</h4>
               {dependencies.map((dep, index) => (
-                <div key={index} className="rounded-lg border border-orange-200 bg-orange-50 p-3">
+                <div key={index} className="rounded-lg border border-orange-200 bg-amber-50 p-3">
                   <div className="flex items-center justify-between">
                     <div>
                       <div className="font-medium">{dep.screenName}</div>
                       <div className="text-muted-foreground text-sm">화면 코드: {dep.screenCode}</div>
                     </div>
                     <div className="text-right">
-                      <div className="text-sm font-medium text-orange-600">
+                      <div className="text-sm font-medium text-amber-600">
                         {dep.referenceType === "popup" && "팝업 버튼"}
                         {dep.referenceType === "navigate" && "이동 버튼"}
                         {dep.referenceType === "url" && "URL 링크"}
@@ -1615,7 +1615,7 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
                               />
                               <div className="flex flex-col">
                                 <span className="font-medium">{table.tableLabel}</span>
-                                <span className="text-[10px] text-gray-500">{table.tableName}</span>
+                                <span className="text-[10px] text-muted-foreground">{table.tableName}</span>
                               </div>
                             </CommandItem>
                           ))}
@@ -1676,7 +1676,7 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
                                 />
                                 <div className="flex flex-col">
                                   <span className="font-medium">{conn.connection_name}</span>
-                                  <span className="text-[10px] text-gray-500">{conn.base_url}</span>
+                                  <span className="text-[10px] text-muted-foreground">{conn.base_url}</span>
                                 </div>
                               </CommandItem>
                             ))}
@@ -1767,7 +1767,7 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
           </DialogHeader>
           <ScreenPreviewProvider isPreviewMode={true}>
             <TableOptionsProvider>
-              <div className="flex flex-1 items-center justify-center overflow-hidden bg-gradient-to-br from-gray-50 to-slate-100 p-6">
+              <div className="flex flex-1 items-center justify-center overflow-hidden bg-muted/30 p-6">
               {isLoadingPreview ? (
                 <div className="flex h-full items-center justify-center">
                   <div className="text-center">
@@ -1841,7 +1841,7 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
                             >
                               {/* 그룹 제목 */}
                               {component.title && (
-                                <div className="mb-3 inline-block rounded-lg bg-blue-50 px-3 py-1 text-sm font-semibold text-blue-700">
+                                <div className="mb-3 inline-block rounded-lg bg-primary/10 px-3 py-1 text-sm font-semibold text-primary">
                                   {component.title}
                                 </div>
                               )}
diff --git a/frontend/components/screen/ScreenNode.tsx b/frontend/components/screen/ScreenNode.tsx
index bcaaf054..ff5ade46 100644
--- a/frontend/components/screen/ScreenNode.tsx
+++ b/frontend/components/screen/ScreenNode.tsx
@@ -118,7 +118,7 @@ const getScreenTypeColor = (screenType?: string, isMain?: boolean) => {
     case "action":
       return "bg-rose-500";
     default:
-      return "bg-blue-500";
+      return "bg-primary";
   }
 };
 
@@ -133,7 +133,7 @@ const getScreenRoleColor = (screenRole?: string) => {
     return "bg-violet-500"; // 보라색 - 메인 그리드
   }
   if (role.includes("등록") || role.includes("폼") || role.includes("form") || role.includes("register") || role.includes("input")) {
-    return "bg-blue-500"; // 파란색 - 등록 폼
+    return "bg-primary"; // 파란색 - 등록 폼
   }
   if (role.includes("액션") || role.includes("action") || role.includes("이벤트") || role.includes("event") || role.includes("클릭")) {
     return "bg-rose-500"; // 빨간색 - 액션/이벤트
@@ -169,7 +169,7 @@ export const ScreenNode: React.FC<{ data: ScreenNodeData }> = ({ data }) => {
   let headerColor: string;
   if (isInGroup) {
     if (isFaded) {
-      headerColor = "bg-gray-300"; // 흑백 처리 - 더 확실한 회색
+      headerColor = "bg-muted/60"; // 흑백 처리 - 더 확실한 회색
     } else {
       // 포커스되었거나 아직 아무것도 선택 안됐을 때: 역할별 색상
       headerColor = getScreenRoleColor(screenRole);
@@ -184,7 +184,7 @@ export const ScreenNode: React.FC<{ data: ScreenNodeData }> = ({ data }) => {
         isFocused 
           ? "border-2 border-primary ring-4 ring-primary/50 shadow-xl scale-105" 
           : isFaded
-          ? "border-gray-200 opacity-50"
+          ? "border-border opacity-50"
           : "border-border hover:shadow-lg hover:ring-2 hover:ring-primary/20"
       }`}
       style={{
@@ -198,19 +198,19 @@ export const ScreenNode: React.FC<{ data: ScreenNodeData }> = ({ data }) => {
         type="target"
         position={Position.Left}
         id="left"
-        className="!h-2 !w-2 !border-2 !border-background !bg-blue-500 opacity-0 transition-opacity group-hover:opacity-100"
+        className="!h-2 !w-2 !border-2 !border-background !bg-primary opacity-0 transition-opacity group-hover:opacity-100"
       />
       <Handle
         type="source"
         position={Position.Right}
         id="right"
-        className="!h-2 !w-2 !border-2 !border-background !bg-blue-500 opacity-0 transition-opacity group-hover:opacity-100"
+        className="!h-2 !w-2 !border-2 !border-background !bg-primary opacity-0 transition-opacity group-hover:opacity-100"
       />
       <Handle
         type="source"
         position={Position.Bottom}
         id="bottom"
-        className="!h-2 !w-2 !border-2 !border-background !bg-blue-500 opacity-0 transition-opacity group-hover:opacity-100"
+        className="!h-2 !w-2 !border-2 !border-background !bg-primary opacity-0 transition-opacity group-hover:opacity-100"
       />
 
       {/* 헤더 (컬러) */}
@@ -221,7 +221,7 @@ export const ScreenNode: React.FC<{ data: ScreenNodeData }> = ({ data }) => {
       </div>
 
       {/* 화면 미리보기 영역 (컴팩트) */}
-      <div className="h-[140px] overflow-hidden bg-slate-50 p-2">
+      <div className="h-[140px] overflow-hidden bg-muted/50 p-2">
         {layoutSummary ? (
           <ScreenPreview layoutSummary={layoutSummary} screenType={screenType} />
         ) : (
@@ -233,11 +233,11 @@ export const ScreenNode: React.FC<{ data: ScreenNodeData }> = ({ data }) => {
       </div>
 
       {/* 필드 매핑 영역 */}
-      <div className="flex-1 overflow-hidden border-t border-slate-200 bg-white px-2 py-1.5">
-        <div className="mb-1 flex items-center gap-1 text-[9px] font-medium text-slate-500">
+      <div className="flex-1 overflow-hidden border-t border-border bg-card px-2 py-1.5">
+        <div className="mb-1 flex items-center gap-1 text-[9px] font-medium text-muted-foreground">
           <Columns3 className="h-3 w-3" />
           <span>필드 매핑</span>
-          <span className="ml-auto text-[8px] text-slate-400">
+          <span className="ml-auto text-[8px] text-muted-foreground/70">
             {layoutSummary?.layoutItems?.filter(i => i.label && !i.componentKind?.includes('button')).length || 0}개
           </span>
         </div>
@@ -288,7 +288,7 @@ const getComponentColor = (componentKind: string) => {
   }
   // 버튼 관련
   if (componentKind?.includes("button")) {
-    return "bg-blue-300 border-blue-500";
+    return "bg-blue-300 border-primary";
   }
   // 입력 필드
   if (componentKind?.includes("input") || componentKind?.includes("text")) {
@@ -319,13 +319,13 @@ const ScreenPreview: React.FC<{ layoutSummary: ScreenLayoutSummary; screenType:
   // 그리드 화면 일러스트
   if (screenType === "grid") {
   return (
-      <div className="flex h-full flex-col gap-2 rounded-lg border border-slate-200 bg-gradient-to-b from-slate-50 to-white p-3">
+      <div className="flex h-full flex-col gap-2 rounded-lg border border-border bg-muted/30 p-3">
         {/* 상단 툴바 */}
         <div className="flex items-center gap-2">
           <div className="h-4 w-16 rounded bg-pink-400/80 shadow-sm" />
           <div className="flex-1" />
-          <div className="h-4 w-8 rounded bg-blue-500 shadow-sm" />
-          <div className="h-4 w-8 rounded bg-blue-500 shadow-sm" />
+          <div className="h-4 w-8 rounded bg-primary shadow-sm" />
+          <div className="h-4 w-8 rounded bg-primary shadow-sm" />
           <div className="h-4 w-8 rounded bg-rose-500 shadow-sm" />
         </div>
         {/* 테이블 헤더 */}
@@ -337,19 +337,19 @@ const ScreenPreview: React.FC<{ layoutSummary: ScreenLayoutSummary; screenType:
         {/* 테이블 행들 */}
         <div className="flex flex-1 flex-col gap-1 overflow-hidden">
           {[...Array(7)].map((_, i) => (
-            <div key={i} className={`flex gap-1 rounded px-2 py-1.5 ${i % 2 === 0 ? "bg-slate-100" : "bg-white"}`}>
+            <div key={i} className={`flex gap-1 rounded px-2 py-1.5 ${i % 2 === 0 ? "bg-muted" : "bg-card"}`}>
               {[...Array(5)].map((_, j) => (
-                <div key={j} className="h-2 flex-1 rounded bg-slate-300/70" />
+                <div key={j} className="h-2 flex-1 rounded bg-muted-foreground/30" />
               ))}
             </div>
           ))}
         </div>
         {/* 페이지네이션 */}
         <div className="flex items-center justify-center gap-2 pt-1">
-          <div className="h-2.5 w-4 rounded bg-slate-300" />
-          <div className="h-2.5 w-4 rounded bg-blue-500" />
-          <div className="h-2.5 w-4 rounded bg-slate-300" />
-          <div className="h-2.5 w-4 rounded bg-slate-300" />
+          <div className="h-2.5 w-4 rounded bg-muted-foreground/40" />
+          <div className="h-2.5 w-4 rounded bg-primary" />
+          <div className="h-2.5 w-4 rounded bg-muted-foreground/40" />
+          <div className="h-2.5 w-4 rounded bg-muted-foreground/40" />
         </div>
         {/* 컴포넌트 수 */}
         <div className="absolute bottom-2 right-2 rounded-md bg-slate-800/80 px-2 py-1 text-[10px] font-medium text-white shadow-sm">
@@ -362,18 +362,18 @@ const ScreenPreview: React.FC<{ layoutSummary: ScreenLayoutSummary; screenType:
   // 폼 화면 일러스트
   if (screenType === "form") {
     return (
-      <div className="flex h-full flex-col gap-3 rounded-lg border border-slate-200 bg-gradient-to-b from-slate-50 to-white p-3">
+      <div className="flex h-full flex-col gap-3 rounded-lg border border-border bg-muted/30 p-3">
         {/* 폼 필드들 */}
         {[...Array(6)].map((_, i) => (
           <div key={i} className="flex items-center gap-3">
-            <div className="h-2.5 w-14 rounded bg-slate-400" />
-            <div className="h-5 flex-1 rounded-md border border-slate-300 bg-white shadow-sm" />
+            <div className="h-2.5 w-14 rounded bg-muted-foreground/50" />
+            <div className="h-5 flex-1 rounded-md border border-border bg-card shadow-sm" />
           </div>
         ))}
         {/* 버튼 영역 */}
-        <div className="mt-auto flex justify-end gap-2 border-t border-slate-100 pt-3">
-          <div className="h-5 w-14 rounded-md bg-slate-300 shadow-sm" />
-          <div className="h-5 w-14 rounded-md bg-blue-500 shadow-sm" />
+        <div className="mt-auto flex justify-end gap-2 border-t border-border pt-3">
+          <div className="h-5 w-14 rounded-md bg-muted-foreground/40 shadow-sm" />
+          <div className="h-5 w-14 rounded-md bg-primary shadow-sm" />
         </div>
         {/* 컴포넌트 수 */}
         <div className="absolute bottom-2 right-2 rounded-md bg-slate-800/80 px-2 py-1 text-[10px] font-medium text-white shadow-sm">
@@ -386,7 +386,7 @@ const ScreenPreview: React.FC<{ layoutSummary: ScreenLayoutSummary; screenType:
   // 대시보드 화면 일러스트
   if (screenType === "dashboard") {
     return (
-      <div className="grid h-full grid-cols-2 gap-2 rounded-lg border border-slate-200 bg-gradient-to-b from-slate-50 to-white p-3">
+      <div className="grid h-full grid-cols-2 gap-2 rounded-lg border border-border bg-muted/30 p-3">
         {/* 카드/차트들 */}
         <div className="rounded-lg bg-emerald-100 p-2 shadow-sm">
           <div className="mb-2 h-2.5 w-10 rounded bg-emerald-400" />
@@ -396,13 +396,13 @@ const ScreenPreview: React.FC<{ layoutSummary: ScreenLayoutSummary; screenType:
           <div className="mb-2 h-2.5 w-10 rounded bg-amber-400" />
           <div className="h-10 rounded-md bg-amber-300/80" />
                 </div>
-        <div className="col-span-2 rounded-lg bg-blue-100 p-2 shadow-sm">
-          <div className="mb-2 h-2.5 w-12 rounded bg-blue-400" />
+        <div className="col-span-2 rounded-lg bg-primary/10 p-2 shadow-sm">
+          <div className="mb-2 h-2.5 w-12 rounded bg-primary/70" />
           <div className="flex h-14 items-end gap-1">
             {[...Array(10)].map((_, i) => (
               <div
                 key={i}
-                className="flex-1 rounded-t bg-blue-400/80"
+                className="flex-1 rounded-t bg-primary/70/80"
                 style={{ height: `${25 + Math.random() * 75}%` }}
               />
             ))}
@@ -419,15 +419,15 @@ const ScreenPreview: React.FC<{ layoutSummary: ScreenLayoutSummary; screenType:
   // 액션 화면 일러스트 (버튼 중심)
   if (screenType === "action") {
     return (
-      <div className="flex h-full flex-col items-center justify-center gap-4 rounded-lg border border-slate-200 bg-gradient-to-b from-slate-50 to-white p-3">
-        <div className="rounded-full bg-slate-100 p-4 text-slate-400">
+      <div className="flex h-full flex-col items-center justify-center gap-4 rounded-lg border border-border bg-muted/30 p-3">
+        <div className="rounded-full bg-muted p-4 text-muted-foreground">
           <MousePointer2 className="h-10 w-10" />
             </div>
         <div className="flex gap-3">
-          <div className="h-7 w-16 rounded-md bg-blue-500 shadow-sm" />
-          <div className="h-7 w-16 rounded-md bg-slate-300 shadow-sm" />
+          <div className="h-7 w-16 rounded-md bg-primary shadow-sm" />
+          <div className="h-7 w-16 rounded-md bg-muted-foreground/40 shadow-sm" />
             </div>
-        <div className="text-xs font-medium text-slate-400">액션 화면</div>
+        <div className="text-xs font-medium text-muted-foreground">액션 화면</div>
         {/* 컴포넌트 수 */}
         <div className="absolute bottom-2 right-2 rounded-md bg-slate-800/80 px-2 py-1 text-[10px] font-medium text-white shadow-sm">
           {totalComponents}개
@@ -438,7 +438,7 @@ const ScreenPreview: React.FC<{ layoutSummary: ScreenLayoutSummary; screenType:
 
   // 기본 (알 수 없는 타입)
   return (
-    <div className="flex h-full flex-col items-center justify-center gap-3 rounded-lg border border-slate-200 bg-gradient-to-b from-slate-50 to-white text-slate-400">
+    <div className="flex h-full flex-col items-center justify-center gap-3 rounded-lg border border-slate-200 bg-muted/30 text-slate-400">
       <div className="rounded-full bg-slate-100 p-4">
         {getScreenTypeIcon(screenType)}
       </div>
@@ -586,7 +586,7 @@ export const TableNode: React.FC<{ data: TableNodeData }> = ({ data }) => {
           ? "border-2 border-emerald-500 ring-4 ring-emerald-500/30 shadow-xl bg-card" 
           // 4. 흐리게 처리
           : isFaded
-          ? "border-gray-200 opacity-60 bg-card"
+          ? "border-border opacity-60 bg-card"
           // 5. 기본
           : "border-border hover:shadow-lg hover:ring-2 hover:ring-emerald-500/20 bg-card"
       }`}
@@ -624,7 +624,7 @@ export const TableNode: React.FC<{ data: TableNodeData }> = ({ data }) => {
         position={Position.Top}
         id="top_source"
         style={{ top: -4 }}
-        className="!h-2 !w-2 !border-2 !border-background !bg-orange-500 opacity-0 transition-opacity group-hover:opacity-100"
+        className="!h-2 !w-2 !border-2 !border-background !bg-amber-500 opacity-0 transition-opacity group-hover:opacity-100"
       />
       <Handle
         type="target"
@@ -642,7 +642,7 @@ export const TableNode: React.FC<{ data: TableNodeData }> = ({ data }) => {
         type="source"
         position={Position.Bottom}
         id="bottom"
-        className="!h-2 !w-2 !border-2 !border-background !bg-orange-500 opacity-0 transition-opacity group-hover:opacity-100"
+        className="!h-2 !w-2 !border-2 !border-background !bg-amber-500 opacity-0 transition-opacity group-hover:opacity-100"
       />
       {/* bottom target: 메인테이블 ← 메인테이블 연결용 (아래에서 들어오는 선) */}
       <Handle
@@ -650,12 +650,12 @@ export const TableNode: React.FC<{ data: TableNodeData }> = ({ data }) => {
         position={Position.Bottom}
         id="bottom_target"
         style={{ bottom: -4 }}
-        className="!h-2 !w-2 !border-2 !border-background !bg-orange-500 opacity-0 transition-opacity group-hover:opacity-100"
+        className="!h-2 !w-2 !border-2 !border-background !bg-amber-500 opacity-0 transition-opacity group-hover:opacity-100"
       />
 
       {/* 헤더 (필터 관계: 보라색, 필터 소스: 보라색, 메인: 초록색, 기본: 슬레이트) */}
       <div className={`flex items-center gap-2 px-3 py-1.5 text-white rounded-t-xl transition-colors duration-700 ease-in-out ${
-        isFaded ? "bg-gray-400" : (hasFilterRelation || isFilterSource) ? "bg-violet-600" : isMain ? "bg-emerald-600" : "bg-slate-500"
+        isFaded ? "bg-muted-foreground" : (hasFilterRelation || isFilterSource) ? "bg-violet-600" : isMain ? "bg-emerald-600" : "bg-slate-500"
       }`}>
         <Database className="h-3.5 w-3.5 shrink-0" />
         <div className="flex-1 min-w-0">
@@ -695,7 +695,7 @@ export const TableNode: React.FC<{ data: TableNodeData }> = ({ data }) => {
           if (filterRefs.length === 0 && lookupRefs.length === 0) return null;
           
           return (
-            <div className="flex items-center gap-1.5 px-2 py-1 mb-1.5 rounded border border-slate-300 bg-slate-50 text-[9px]">
+            <div className="flex items-center gap-1.5 px-2 py-1 mb-1.5 rounded border border-border bg-muted text-[9px]">
               {/* 필터 뱃지 */}
               {filterRefs.length > 0 && (
                 <span 
@@ -745,11 +745,11 @@ export const TableNode: React.FC<{ data: TableNodeData }> = ({ data }) => {
                   key={col.name}
                   className={`flex items-center gap-1 rounded px-1.5 py-0.5 transition-all duration-300 ${
                     isJoinColumn 
-                      ? "bg-orange-100 border border-orange-300 shadow-sm" 
+                      ? "bg-amber-100 border border-orange-300 shadow-sm" 
                       : isFilterColumn || isFilterSourceColumn
                       ? "bg-violet-100 border border-violet-300 shadow-sm"  // 필터 컬럼/필터 소스: 보라색
                       : isHighlighted 
-                      ? "bg-blue-100 border border-blue-300 shadow-sm"
+                      ? "bg-primary/10 border border-primary/40 shadow-sm"
                       : hasActiveColumns
                       ? "bg-slate-100"
                       : "bg-slate-50 hover:bg-slate-100"
@@ -760,17 +760,17 @@ export const TableNode: React.FC<{ data: TableNodeData }> = ({ data }) => {
                   }}
                 >
                   {/* PK/FK/조인/필터 아이콘 */}
-                  {isJoinColumn && <Link2 className="h-2.5 w-2.5 text-orange-500" />}
+                  {isJoinColumn && <Link2 className="h-2.5 w-2.5 text-amber-500" />}
                   {(isFilterColumn || isFilterSourceColumn) && !isJoinColumn && <Link2 className="h-2.5 w-2.5 text-violet-500" />}
                   {!isJoinColumn && !isFilterColumn && !isFilterSourceColumn && col.isPrimaryKey && <Key className="h-2.5 w-2.5 text-amber-500" />}
-                  {!isJoinColumn && !isFilterColumn && !isFilterSourceColumn && col.isForeignKey && !col.isPrimaryKey && <Link2 className="h-2.5 w-2.5 text-blue-500" />}
+                  {!isJoinColumn && !isFilterColumn && !isFilterSourceColumn && col.isForeignKey && !col.isPrimaryKey && <Link2 className="h-2.5 w-2.5 text-primary" />}
                   {!isJoinColumn && !isFilterColumn && !isFilterSourceColumn && !col.isPrimaryKey && !col.isForeignKey && <div className="w-2.5" />}
 
                   {/* 컬럼명 */}
                   <span className={`flex-1 truncate font-mono text-[9px] font-medium ${
                     isJoinColumn ? "text-orange-700" 
                     : (isFilterColumn || isFilterSourceColumn) ? "text-violet-700"
-                    : isHighlighted ? "text-blue-700" 
+                    : isHighlighted ? "text-primary" 
                     : "text-slate-700"
                   }`}>
                     {col.name}
@@ -781,13 +781,13 @@ export const TableNode: React.FC<{ data: TableNodeData }> = ({ data }) => {
                     <>
                       {/* 조인 참조 테이블 표시 (joinColumnRefs에서) */}
                       {joinRefMap.has(colOriginal) && (
-                        <span className="rounded bg-orange-100 px-1 text-[7px] text-orange-600">
+                        <span className="rounded bg-amber-100 px-1 text-[7px] text-amber-600">
                           ← {joinRefMap.get(colOriginal)?.refTableLabel}
                         </span>
                       )}
                       {/* 필드 매핑 참조 표시 (fieldMappingMap에서, joinRefMap에 없는 경우) */}
                       {!joinRefMap.has(colOriginal) && fieldMappingMap.has(colOriginal) && (
-                        <span className="rounded bg-orange-100 px-1 text-[7px] text-orange-600">
+                        <span className="rounded bg-amber-100 px-1 text-[7px] text-amber-600">
                           ← {fieldMappingMap.get(colOriginal)?.sourceDisplayName}
                         </span>
                       )}
@@ -802,12 +802,12 @@ export const TableNode: React.FC<{ data: TableNodeData }> = ({ data }) => {
                     <>
                       <span className="rounded bg-violet-200 px-1 text-[7px] text-violet-700">필터</span>
                       {isHighlighted && (
-                        <span className="rounded bg-blue-200 px-1 text-[7px] text-blue-700">사용</span>
+                        <span className="rounded bg-blue-200 px-1 text-[7px] text-primary">사용</span>
                       )}
                     </>
                   )}
                   {isHighlighted && !isJoinColumn && !isFilterColumn && !isFilterSourceColumn && (
-                    <span className="rounded bg-blue-200 px-1 text-[7px] text-blue-700">사용</span>
+                    <span className="rounded bg-blue-200 px-1 text-[7px] text-primary">사용</span>
                   )}
 
                   {/* 타입 */}
@@ -861,7 +861,7 @@ export const TableNode: React.FC<{ data: TableNodeData }> = ({ data }) => {
 export const LegacyScreenNode = ScreenNode;
 export const AggregateNode: React.FC<{ data: any }> = ({ data }) => {
   return (
-    <div className="rounded-lg border-2 border-purple-300 bg-white p-3 shadow-lg">
+    <div className="rounded-lg border-2 border-purple-300 bg-card p-3 shadow-lg">
       <Handle type="target" position={Position.Left} id="left" className="!h-3 !w-3 !bg-purple-500" />
       <Handle type="source" position={Position.Right} id="right" className="!h-3 !w-3 !bg-purple-500" />
       <div className="flex items-center gap-2 text-purple-600">
diff --git a/frontend/components/screen/ScreenRelationFlow.tsx b/frontend/components/screen/ScreenRelationFlow.tsx
index a3609378..cad4fc1f 100644
--- a/frontend/components/screen/ScreenRelationFlow.tsx
+++ b/frontend/components/screen/ScreenRelationFlow.tsx
@@ -690,7 +690,7 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
             type: "smoothstep",
               label: `${i + 1}`,
               labelStyle: { fontSize: 11, fill: "#0ea5e9", fontWeight: 600 },
-              labelBgStyle: { fill: "white", stroke: "#e2e8f0", strokeWidth: 1 },
+              labelBgStyle: { fill: "hsl(var(--card))", stroke: "hsl(var(--border))", strokeWidth: 1 },
               labelBgPadding: [4, 2] as [number, number],
               markerEnd: { type: MarkerType.ArrowClosed, color: "#0ea5e9" },
             animated: true,
@@ -1007,7 +1007,7 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
               type: "smoothstep",
                 label: rel.relation_type === "join" ? "조인" : rel.crud_operations || "",
                 labelStyle: { fontSize: 9, fill: "#10b981" },
-                labelBgStyle: { fill: "white", stroke: "#e2e8f0", strokeWidth: 1 },
+                labelBgStyle: { fill: "hsl(var(--card))", stroke: "hsl(var(--border))", strokeWidth: 1 },
                 labelBgPadding: [3, 2] as [number, number],
               style: { stroke: "#10b981", strokeWidth: 1.5 },
             });
@@ -1030,7 +1030,7 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
                 animated: true,
                 label: flow.flow_label || flow.flow_type || "이동",
                 labelStyle: { fontSize: 10, fill: "#8b5cf6", fontWeight: 500 },
-                labelBgStyle: { fill: "white", stroke: "#e2e8f0", strokeWidth: 1 },
+                labelBgStyle: { fill: "hsl(var(--card))", stroke: "hsl(var(--border))", strokeWidth: 1 },
                 labelBgPadding: [4, 2] as [number, number],
                 markerEnd: { type: MarkerType.ArrowClosed, color: "#8b5cf6" },
                 style: { stroke: "#8b5cf6", strokeWidth: 2 },
@@ -2333,7 +2333,7 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
         maxZoom={1.5}
         proOptions={{ hideAttribution: true }}
       >
-          <Background variant={BackgroundVariant.Dots} gap={20} size={1} color="#e2e8f0" />
+          <Background variant={BackgroundVariant.Dots} gap={20} size={1} color="hsl(var(--border))" />
         <Controls position="bottom-right" />
       </ReactFlow>
       </div>
diff --git a/frontend/components/screen/ScreenRelationView.tsx b/frontend/components/screen/ScreenRelationView.tsx
index 56e98e8c..ce235123 100644
--- a/frontend/components/screen/ScreenRelationView.tsx
+++ b/frontend/components/screen/ScreenRelationView.tsx
@@ -118,8 +118,8 @@ export function ScreenRelationView({ screen }: ScreenRelationViewProps) {
     <div className="p-4 space-y-4 overflow-auto h-full">
       {/* 화면 기본 정보 */}
       <div className="flex items-start gap-4">
-        <div className="flex items-center justify-center w-12 h-12 rounded-lg bg-blue-500/10">
-          <Monitor className="h-6 w-6 text-blue-500" />
+        <div className="flex items-center justify-center w-12 h-12 rounded-lg bg-primary/10">
+          <Monitor className="h-6 w-6 text-primary" />
         </div>
         <div className="flex-1 min-w-0">
           <h3 className="font-semibold text-lg truncate">{screen.screenName}</h3>
@@ -141,7 +141,7 @@ export function ScreenRelationView({ screen }: ScreenRelationViewProps) {
       <Card>
         <CardHeader className="py-3 px-4">
           <CardTitle className="text-sm font-medium flex items-center gap-2">
-            <Database className="h-4 w-4 text-green-500" />
+            <Database className="h-4 w-4 text-emerald-500" />
             연결된 테이블
           </CardTitle>
         </CardHeader>
@@ -191,13 +191,13 @@ export function ScreenRelationView({ screen }: ScreenRelationViewProps) {
                   <div className="flex items-center gap-1">
                     <span className="font-mono text-xs">{join.sourceTable}</span>
                     <span className="text-muted-foreground">.</span>
-                    <span className="font-mono text-xs text-blue-600">{join.sourceColumn}</span>
+                    <span className="font-mono text-xs text-primary">{join.sourceColumn}</span>
                   </div>
                   <ArrowRight className="h-3 w-3 text-muted-foreground" />
                   <div className="flex items-center gap-1">
                     <span className="font-mono text-xs">{join.targetTable}</span>
                     <span className="text-muted-foreground">.</span>
-                    <span className="font-mono text-xs text-green-600">{join.targetColumn}</span>
+                    <span className="font-mono text-xs text-emerald-600">{join.targetColumn}</span>
                   </div>
                   <Badge variant="outline" className="ml-auto text-xs">
                     {join.joinType}
@@ -215,7 +215,7 @@ export function ScreenRelationView({ screen }: ScreenRelationViewProps) {
       <Card>
         <CardHeader className="py-3 px-4">
           <CardTitle className="text-sm font-medium flex items-center gap-2">
-            <GitBranch className="h-4 w-4 text-orange-500" />
+            <GitBranch className="h-4 w-4 text-amber-500" />
             데이터 흐름
             {dataFlows.length > 0 && (
               <Badge variant="secondary" className="ml-auto">{dataFlows.length}</Badge>
@@ -230,10 +230,10 @@ export function ScreenRelationView({ screen }: ScreenRelationViewProps) {
                   key={flow.id}
                   className="flex items-center gap-2 p-2 rounded-md bg-muted/50 text-sm"
                 >
-                  <Monitor className="h-4 w-4 text-blue-500" />
+                  <Monitor className="h-4 w-4 text-primary" />
                   <span className="truncate">{flow.flowName || "이름 없음"}</span>
                   <ArrowRight className="h-3 w-3 text-muted-foreground" />
-                  <Monitor className="h-4 w-4 text-green-500" />
+                  <Monitor className="h-4 w-4 text-emerald-500" />
                   <span className="text-muted-foreground truncate">
                     화면 #{flow.targetScreenId}
                   </span>
diff --git a/frontend/components/screen/ScreenSettingModal.tsx b/frontend/components/screen/ScreenSettingModal.tsx
index fa802893..b0f85351 100644
--- a/frontend/components/screen/ScreenSettingModal.tsx
+++ b/frontend/components/screen/ScreenSettingModal.tsx
@@ -369,7 +369,7 @@ export function ScreenSettingModal({
       <DialogContent className="flex h-[90vh] max-h-[950px] w-[98vw] max-w-[1600px] flex-col">
         <DialogHeader className="flex-shrink-0">
           <DialogTitle className="flex items-center gap-2 text-lg">
-            <Settings2 className="h-5 w-5 text-blue-500" />
+            <Settings2 className="h-5 w-5 text-primary" />
             화면 설정:
             {groupScreens.length > 1 ? (
               <Select
@@ -404,7 +404,7 @@ export function ScreenSettingModal({
         {/* 2컬럼 레이아웃: 왼쪽 탭(좁게) + 오른쪽 프리뷰(넓게) */}
         <div className="flex min-h-0 flex-1 gap-3">
           {/* 왼쪽: 탭 컨텐츠 (40%) */}
-          <div className="flex min-h-0 w-[40%] flex-col rounded-lg border bg-white">
+          <div className="flex min-h-0 w-[40%] flex-col rounded-lg border bg-card">
             <Tabs
               value={activeTab}
               onValueChange={setActiveTab}
@@ -511,7 +511,7 @@ export function ScreenSettingModal({
           </div>
 
           {/* 오른쪽: 화면 프리뷰 (60%, 항상 표시) */}
-          <div className="flex min-h-0 w-[60%] flex-col overflow-hidden rounded-lg border bg-white">
+          <div className="flex min-h-0 w-[60%] flex-col overflow-hidden rounded-lg border bg-card">
             <PreviewTab 
               screenId={currentScreenId} 
               screenName={currentScreenName} 
@@ -926,7 +926,7 @@ function TableColumnAccordion({
 
       {/* 펼쳐진 내용 */}
       {isOpen && (
-        <div className={`border-t border-${themeColor}-100 p-3 space-y-3 bg-white/50`}>
+        <div className={`border-t border-${themeColor}-100 p-3 space-y-3 bg-card/50`}>
           {/* 필터 연결 정보 (필터 테이블만) */}
           {!isMain && filterKeyMapping && (
             <div className="flex items-center gap-1 text-xs">
@@ -944,14 +944,14 @@ function TableColumnAccordion({
           {/* 테이블 컬럼 정보 */}
           <div className="space-y-2">
             <div className="flex items-center justify-between">
-              <div className="flex items-center gap-1 text-xs font-medium text-gray-700">
+              <div className="flex items-center gap-1 text-xs font-medium text-foreground">
                 <Table2 className="h-3 w-3" />
                 테이블 컬럼 ({loadingColumns ? "로딩중..." : `${columns.length}개`})
               </div>
               {columnMappings.length > 0 && (
                 <div className="flex items-center gap-2 text-[10px] text-muted-foreground">
                   <div className="flex items-center gap-1">
-                    <div className="w-2 h-2 rounded-full bg-blue-500" />
+                    <div className="w-2 h-2 rounded-full bg-primary" />
                     <span>화면에서 사용 ({columnMappings.length}개)</span>
                   </div>
                 </div>
@@ -996,8 +996,8 @@ function TableColumnAccordion({
                     
                     if (isUsed) {
                       baseClass = isSelected
-                        ? "bg-blue-100 border-blue-300"
-                        : "bg-blue-50 border-blue-200 hover:bg-blue-100 hover:border-blue-300";
+                        ? "bg-primary/10 border-primary/40"
+                        : "bg-primary/10 border-primary/20 hover:bg-primary/10 hover:border-primary/40";
                       if (isJoinKey) {
                         leftBorderClass = "border-l-4 border-l-orange-500";
                       } else if (isFilterKey) {
@@ -1005,16 +1005,16 @@ function TableColumnAccordion({
                       }
                     } else if (isJoinKey) {
                       baseClass = isSelected
-                        ? "bg-orange-100 border-orange-400"
-                        : "bg-orange-50 border-orange-200 hover:bg-orange-100 hover:border-orange-300";
+                        ? "bg-amber-100 border-orange-400"
+                        : "bg-amber-50 border-orange-200 hover:bg-amber-100 hover:border-orange-300";
                     } else if (isFilterKey) {
                       baseClass = isSelected
                         ? "bg-purple-100 border-purple-400"
                         : "bg-purple-50 border-purple-200 hover:bg-purple-100 hover:border-purple-300";
                     } else {
                       baseClass = isSelected
-                        ? "bg-gray-100 border-gray-400"
-                        : "bg-gray-50 border-gray-200 hover:bg-gray-100";
+                        ? "bg-muted border-input"
+                        : "bg-muted border-border hover:bg-muted";
                     }
                     
                     return (
@@ -1032,10 +1032,10 @@ function TableColumnAccordion({
                         className={`flex items-center justify-between gap-2 text-xs rounded px-2 py-1.5 border transition-all cursor-pointer ${baseClass} ${leftBorderClass} ${isDragging ? "opacity-50 scale-95" : ""} ${canDrag ? "cursor-grab active:cursor-grabbing" : ""}`}
                       >
                         <span className={`font-medium truncate flex-1 min-w-0 ${
-                          isUsed ? "text-blue-700"
+                          isUsed ? "text-primary"
                           : isJoinKey ? "text-orange-800"
                           : isFilterKey ? "text-purple-800"
-                          : "text-gray-500"
+                          : "text-muted-foreground"
                         }`}>
                           {col.displayName || col.columnName}
                         </span>
@@ -1047,7 +1047,7 @@ function TableColumnAccordion({
                             <Badge variant="outline" className="h-4 px-1 text-[8px] bg-orange-200 text-orange-700 border-orange-300">조인</Badge>
                           )}
                           {isUsed && (
-                            <Badge className="text-white text-[8px] px-1 py-0 h-4 bg-blue-500">필드</Badge>
+                            <Badge className="text-white text-[8px] px-1 py-0 h-4 bg-primary">필드</Badge>
                           )}
                           <span className="text-muted-foreground text-[10px] w-20 truncate text-right" title={col.dataType}>
                             {col.dataType?.split("(")[0]}
@@ -1074,21 +1074,21 @@ function TableColumnAccordion({
                     
                     return (
                       <div className="space-y-3">
-                        <div className="text-xs font-medium text-gray-700">컬럼 설정</div>
+                        <div className="text-xs font-medium text-foreground">컬럼 설정</div>
                         
                         {/* 화면 필드 정보 (필드인 경우만) */}
                         {isUsed && (
                           <>
                             <div className="space-y-1">
                               <span className="text-[10px] text-muted-foreground">화면 필드</span>
-                              <div className="text-sm font-medium text-blue-700">
+                              <div className="text-sm font-medium text-primary">
                                 {selectedColumn?.displayName || selectedMapping?.columnName || editingField}
                               </div>
                             </div>
                             
                             <div className="space-y-1">
                               <span className="text-[10px] text-muted-foreground">현재 컬럼</span>
-                              <div className="text-sm font-mono text-gray-600">
+                              <div className="text-sm font-mono text-muted-foreground">
                                 {selectedMapping?.columnName || "-"}
                               </div>
                             </div>
@@ -1134,7 +1134,7 @@ function TableColumnAccordion({
                             <Button
                               variant="outline"
                               size="sm"
-                              className="w-full h-7 text-xs text-red-600 border-red-300 hover:bg-red-50"
+                              className="w-full h-7 text-xs text-destructive border-destructive/30 hover:bg-destructive/10"
                               onClick={() => {
                                 if (selectedMapping && onColumnChange) {
                                   onColumnChange(selectedMapping.fieldLabel!, selectedMapping.columnName, "__REMOVE_FIELD__");
@@ -1166,7 +1166,7 @@ function TableColumnAccordion({
                             <Button
                               variant="outline"
                               size="sm"
-                              className="w-full h-7 text-xs text-blue-600 border-blue-300 hover:bg-blue-50"
+                              className="w-full h-7 text-xs text-primary border-primary/40 hover:bg-primary/10"
                               onClick={() => {
                                 if (selectedColumn?.columnName && onColumnChange) {
                                   onColumnChange("__NEW_FIELD__", "", selectedColumn.columnName);
@@ -1185,19 +1185,19 @@ function TableColumnAccordion({
                         <div className="space-y-2 pt-2 border-t border-orange-200">
                           <div className="flex items-center justify-between">
                             <div className="flex items-center gap-1">
-                              <Badge variant="outline" className={`h-4 px-1 text-[8px] ${hasJoinSetting ? "bg-orange-200 text-orange-700 border-orange-300" : "bg-gray-100 text-gray-600 border-gray-300"}`}>
+                              <Badge variant="outline" className={`h-4 px-1 text-[8px] ${hasJoinSetting ? "bg-orange-200 text-orange-700 border-orange-300" : "bg-muted text-muted-foreground border-input"}`}>
                                 조인
                               </Badge>
-                              <span className={`text-[10px] font-medium ${hasJoinSetting ? "text-orange-700" : "text-gray-600"}`}>
+                              <span className={`text-[10px] font-medium ${hasJoinSetting ? "text-orange-700" : "text-muted-foreground"}`}>
                                 {editingJoin && editingJoin.columnName === (selectedColumn?.columnName || editingField) ? "연결 편집" : (hasJoinSetting ? "연결 정보" : "연결 설정")}
                               </span>
                             </div>
                             {editingJoin && editingJoin.columnName === (selectedColumn?.columnName || editingField) ? (
                               <div className="flex gap-1">
-                                <Button variant="ghost" size="sm" className="h-5 px-1.5 text-[10px] text-gray-500 hover:text-gray-700" onClick={() => setEditingJoin(null)}>
+                                <Button variant="ghost" size="sm" className="h-5 px-1.5 text-[10px] text-muted-foreground hover:text-foreground" onClick={() => setEditingJoin(null)}>
                                   취소
                                 </Button>
-                                <Button size="sm" className="h-5 px-1.5 text-[10px] bg-orange-500 hover:bg-orange-600 text-white" onClick={handleSaveJoinSetting} disabled={!editingJoin.referenceTable || !editingJoin.referenceColumn || savingJoinSetting}>
+                                <Button size="sm" className="h-5 px-1.5 text-[10px] bg-amber-500 hover:bg-orange-600 text-white" onClick={handleSaveJoinSetting} disabled={!editingJoin.referenceTable || !editingJoin.referenceColumn || savingJoinSetting}>
                                   {savingJoinSetting ? "..." : "저장"}
                                 </Button>
                               </div>
@@ -1205,7 +1205,7 @@ function TableColumnAccordion({
                               <Button
                                 variant="ghost"
                                 size="sm"
-                                className={`h-5 px-1 text-[10px] ${hasJoinSetting ? "text-orange-600 hover:text-orange-800" : "text-gray-500 hover:text-gray-700"}`}
+                                className={`h-5 px-1 text-[10px] ${hasJoinSetting ? "text-amber-600 hover:text-orange-800" : "text-muted-foreground hover:text-foreground"}`}
                                 onClick={() => startEditingJoin(
                                   selectedColumn?.columnName || editingField,
                                   isJoinKey && joinRef ? joinRef.refTable : (selectedColumn?.referenceTable || ""),
@@ -2190,21 +2190,21 @@ function OverviewTab({
     <div className="space-y-6">
       {/* 기본 정보 카드 */}
       <div className="grid grid-cols-2 gap-4 md:grid-cols-5">
-        <div className="rounded-lg border bg-blue-50 p-4">
-          <div className="text-2xl font-bold text-blue-600">{stats.tableCount}</div>
-          <div className="text-xs text-blue-700">연결된 테이블</div>
+        <div className="rounded-lg border bg-primary/10 p-4">
+          <div className="text-2xl font-bold text-primary">{stats.tableCount}</div>
+          <div className="text-xs text-primary">연결된 테이블</div>
         </div>
         <div className="rounded-lg border bg-purple-50 p-4">
           <div className="text-2xl font-bold text-purple-600">{stats.fieldCount}</div>
           <div className="text-xs text-purple-700">필드 매핑</div>
         </div>
-        <div className="rounded-lg border bg-orange-50 p-4">
-          <div className="text-2xl font-bold text-orange-600">{stats.joinCount}</div>
+        <div className="rounded-lg border bg-amber-50 p-4">
+          <div className="text-2xl font-bold text-amber-600">{stats.joinCount}</div>
           <div className="text-xs text-orange-700">조인 설정</div>
         </div>
-        <div className="rounded-lg border bg-green-50 p-4">
-          <div className="text-2xl font-bold text-green-600">{stats.filterCount}</div>
-          <div className="text-xs text-green-700">필터 컬럼</div>
+        <div className="rounded-lg border bg-emerald-50 p-4">
+          <div className="text-2xl font-bold text-emerald-600">{stats.filterCount}</div>
+          <div className="text-xs text-emerald-700">필터 컬럼</div>
         </div>
         <div className="rounded-lg border bg-pink-50 p-4">
           <div className="text-2xl font-bold text-pink-600">{stats.flowCount}</div>
@@ -2216,7 +2216,7 @@ function OverviewTab({
       <div className="space-y-2">
         <div className="flex items-center justify-between">
           <h3 className="flex items-center gap-2 text-sm font-semibold">
-            <Database className="h-4 w-4 text-blue-500" />
+            <Database className="h-4 w-4 text-primary" />
             메인 테이블
           </h3>
         </div>
@@ -2529,12 +2529,12 @@ function FieldMappingTab({
             {componentColumns.map((comp, idx) => (
               <div
                 key={idx}
-                className="rounded-lg border bg-white overflow-hidden"
+                className="rounded-lg border bg-card overflow-hidden"
               >
                 {/* 컴포넌트 헤더 */}
-                <div className="flex items-center justify-between px-3 py-2 bg-gray-50 border-b">
+                <div className="flex items-center justify-between px-3 py-2 bg-muted border-b">
                   <div className="flex items-center gap-2">
-                    <Table2 className="h-4 w-4 text-blue-500" />
+                    <Table2 className="h-4 w-4 text-primary" />
                     <span className="text-sm font-medium">
                       {comp.componentLabel || comp.componentKind}
                     </span>
@@ -2550,7 +2550,7 @@ function FieldMappingTab({
                 {/* 필드 → 컬럼 매핑 테이블 */}
                 <div className="divide-y">
                   {/* 테이블 헤더 */}
-                  <div className="grid grid-cols-[1fr_28px_1fr] gap-1 px-3 py-1.5 bg-gray-100 text-[10px] font-medium text-gray-500 uppercase">
+                  <div className="grid grid-cols-[1fr_28px_1fr] gap-1 px-3 py-1.5 bg-muted text-[10px] font-medium text-muted-foreground uppercase">
                     <span>필드명 (화면 표시)</span>
                     <span></span>
                     <span>컬럼명 (데이터베이스)</span>
@@ -2567,16 +2567,16 @@ function FieldMappingTab({
                         key={cIdx}
                         className={cn(
                           "grid grid-cols-[1fr_28px_1fr] gap-1 px-3 py-1.5 items-center text-xs",
-                          isJoinColumn && "bg-orange-50"
+                          isJoinColumn && "bg-amber-50"
                         )}
                       >
                         {/* 필드명 (화면 표시) */}
                         <div className="flex items-center gap-1.5 min-w-0">
-                          <span className="font-medium text-gray-900 truncate">
+                          <span className="font-medium text-foreground truncate">
                             {displayName}
                           </span>
                           {isJoinColumn && (
-                            <Badge variant="outline" className="text-[9px] bg-orange-100 text-orange-700 px-1 py-0 flex-shrink-0">
+                            <Badge variant="outline" className="text-[9px] bg-amber-100 text-orange-700 px-1 py-0 flex-shrink-0">
                               조인
                             </Badge>
                           )}
@@ -2584,7 +2584,7 @@ function FieldMappingTab({
                         
                         {/* 화살표 */}
                         <div className="flex justify-center">
-                          <ArrowRight className="h-3 w-3 text-gray-400" />
+                          <ArrowRight className="h-3 w-3 text-muted-foreground/70" />
                         </div>
                         
                         {/* 컬럼명 (데이터베이스) */}
@@ -2604,12 +2604,12 @@ function FieldMappingTab({
                               <button
                                 className={cn(
                                   "flex items-center gap-1 px-2 py-0.5 rounded text-left min-w-0",
-                                  "hover:bg-blue-50 border border-transparent hover:border-blue-300",
+                                  "hover:bg-primary/10 border border-transparent hover:border-primary/40",
                                   "transition-colors cursor-pointer group"
                                 )}
                               >
-                                <code className="text-blue-700 font-mono text-[11px] truncate">{col}</code>
-                                <Pencil className="h-3 w-3 text-gray-400 group-hover:text-blue-500 flex-shrink-0" />
+                                <code className="text-primary font-mono text-[11px] truncate">{col}</code>
+                                <Pencil className="h-3 w-3 text-muted-foreground/70 group-hover:text-primary flex-shrink-0" />
                               </button>
                             </PopoverTrigger>
                             <PopoverContent className="w-64 p-0" align="start">
@@ -2644,7 +2644,7 @@ function FieldMappingTab({
                                           <div className="flex flex-col">
                                             <span className={cn(
                                               "font-medium",
-                                              tableCol.columnName === col && "text-blue-600"
+                                              tableCol.columnName === col && "text-primary"
                                             )}>
                                               {tableCol.displayName || tableCol.columnName}
                                             </span>
@@ -2655,7 +2655,7 @@ function FieldMappingTab({
                                             )}
                                           </div>
                                           {tableCol.columnName === col && (
-                                            <Check className="ml-auto h-3 w-3 text-blue-600" />
+                                            <Check className="ml-auto h-3 w-3 text-primary" />
                                           )}
                                         </CommandItem>
                                       ))
@@ -2666,7 +2666,7 @@ function FieldMappingTab({
                             </PopoverContent>
                           </Popover>
                         ) : (
-                          <code className="text-blue-700 font-mono text-[11px] truncate">{col}</code>
+                          <code className="text-primary font-mono text-[11px] truncate">{col}</code>
                         )}
                       </div>
                     );
@@ -2712,12 +2712,12 @@ function FieldMappingTab({
                       {idx + 1}
                     </TableCell>
                     <TableCell className="text-xs font-medium">
-                      <Badge variant="outline" className="bg-blue-50 text-blue-700">
+                      <Badge variant="outline" className="bg-primary/10 text-primary">
                         {mainTable}.{mapping.targetField}
                       </Badge>
                     </TableCell>
                     <TableCell className="text-center">
-                      <ArrowRight className="mx-auto h-3 w-3 text-gray-400" />
+                      <ArrowRight className="mx-auto h-3 w-3 text-muted-foreground/70" />
                     </TableCell>
                     <TableCell className="text-xs">
                       <Badge variant="outline" className="bg-purple-50 text-purple-700">
@@ -2725,7 +2725,7 @@ function FieldMappingTab({
                       </Badge>
                     </TableCell>
                     <TableCell className="text-xs">
-                      <Badge variant="outline" className="bg-green-50 text-green-700">
+                      <Badge variant="outline" className="bg-emerald-50 text-emerald-700">
                         {mapping.sourceField}
                       </Badge>
                     </TableCell>
@@ -2747,10 +2747,10 @@ function FieldMappingTab({
                   <Badge
                     key={type}
                     variant="outline"
-                    className="gap-1 bg-gray-50"
+                    className="gap-1 bg-muted"
                   >
                     {type}
-                    <span className="rounded-full bg-gray-200 px-1.5 text-[10px]">
+                    <span className="rounded-full bg-muted/80 px-1.5 text-[10px]">
                       {groupedMappings[type].length}
                     </span>
                   </Badge>
@@ -3003,8 +3003,8 @@ function DataFlowTab({
                       variant="outline"
                       className={cn(
                         "text-xs",
-                        flow.flow_type === "forward" && "bg-blue-50 text-blue-700",
-                        flow.flow_type === "return" && "bg-green-50 text-green-700",
+                        flow.flow_type === "forward" && "bg-primary/10 text-primary",
+                        flow.flow_type === "return" && "bg-emerald-50 text-emerald-700",
                         flow.flow_type === "broadcast" && "bg-purple-50 text-purple-700"
                       )}
                     >
@@ -3693,12 +3693,12 @@ function ControlManagementTab({
     switch (type) {
       case "save":
       case "quickInsert":
-        return "bg-green-100 text-green-700 hover:bg-green-100 hover:text-green-700";
+        return "bg-emerald-100 text-emerald-700 hover:bg-emerald-100 hover:text-emerald-700";
       case "delete":
-        return "bg-red-100 text-red-700 hover:bg-red-100 hover:text-red-700";
+        return "bg-destructive/10 text-destructive hover:bg-destructive/10 hover:text-destructive";
       case "edit":
       case "copy":
-        return "bg-blue-100 text-blue-700 hover:bg-blue-100 hover:text-blue-700";
+        return "bg-primary/10 text-primary hover:bg-primary/10 hover:text-primary";
       case "modal":
       case "openModalWithData":
       case "openRelatedModal":
@@ -3714,7 +3714,7 @@ function ControlManagementTab({
       case "view_table_history":
         return "bg-slate-100 text-slate-700 hover:bg-slate-100 hover:text-slate-700";
       default:
-        return "bg-gray-100 text-gray-700 hover:bg-gray-100 hover:text-gray-700";
+        return "bg-muted text-foreground hover:bg-muted hover:text-foreground";
     }
   };
 
@@ -3729,11 +3729,11 @@ function ControlManagementTab({
   return (
     <div className="space-y-6">
       {/* 버튼 액션 설정 - 구분된 섹션 */}
-      <div className="rounded-lg border border-blue-200 bg-blue-50/30">
-        <div className="flex items-center gap-2 px-3 py-2 border-b border-blue-200 bg-blue-100/50 rounded-t-lg">
-          <MousePointer className="h-4 w-4 text-blue-600" />
-          <span className="text-sm font-semibold text-blue-900">버튼 액션 설정</span>
-          <Badge className="h-5 text-[10px] bg-blue-600 text-white hover:bg-blue-600">
+      <div className="rounded-lg border border-primary/20 bg-primary/10/30">
+        <div className="flex items-center gap-2 px-3 py-2 border-b border-primary/20 bg-primary/10/50 rounded-t-lg">
+          <MousePointer className="h-4 w-4 text-primary" />
+          <span className="text-sm font-semibold text-primary">버튼 액션 설정</span>
+          <Badge className="h-5 text-[10px] bg-primary text-white hover:bg-primary">
             {buttonControls.length}개
           </Badge>
         </div>
@@ -3880,7 +3880,7 @@ function ControlManagementTab({
                                 ...prev,
                                 [btn.id]: { ...prev[btn.id], backgroundColor: preset.bg, textColor: preset.text }
                               }))}
-                              className="h-5 w-5 rounded border border-gray-300 hover:ring-2 hover:ring-blue-300 transition-all"
+                              className="h-5 w-5 rounded border border-input hover:ring-2 hover:ring-blue-300 transition-all"
                               style={{ backgroundColor: preset.bg }}
                               title={preset.name}
                             />
@@ -4094,7 +4094,7 @@ function ControlManagementTab({
                               {currentFlows.map((lf: { id: number; name: string; timing?: string }, idx: number) => (
                                 <div key={lf.id} className="flex items-center gap-2 p-1.5 border rounded-md bg-muted/30">
                                   <Workflow className="h-3 w-3 text-purple-500 shrink-0" />
-                                  <span className="text-xs font-medium text-gray-700 flex-1 truncate">
+                                  <span className="text-xs font-medium text-foreground flex-1 truncate">
                                     {lf.name}
                                   </span>
                                   {/* 타이밍 선택 */}
@@ -4120,7 +4120,7 @@ function ControlManagementTab({
                                   {/* 삭제 버튼 */}
                                   <button
                                     type="button"
-                                    className="h-5 w-5 rounded hover:bg-red-100 flex items-center justify-center text-gray-400 hover:text-red-500"
+                                    className="h-5 w-5 rounded hover:bg-destructive/10 flex items-center justify-center text-muted-foreground/70 hover:text-destructive"
                                     onClick={() => {
                                       const newFlows = currentFlows.filter((f: any) => f.id !== lf.id);
                                       setEditedValues(prev => ({ 
@@ -4236,7 +4236,7 @@ function ControlManagementTab({
           <Badge className="h-5 text-[10px] bg-purple-600 text-white hover:bg-purple-600">
             {flows.length}개 플로우
           </Badge>
-          <Badge className="h-5 text-[10px] bg-green-600 text-white hover:bg-green-600">
+          <Badge className="h-5 text-[10px] bg-emerald-600 text-white hover:bg-emerald-600">
             {buttonControls.filter(b => (b.linkedFlows && b.linkedFlows.length > 0) || b.linkedFlow).length}개 연동
           </Badge>
           <span className="flex-1" />
@@ -4282,10 +4282,10 @@ function ControlManagementTab({
                 );
                 const tableName = (flow as any).tableType || (flow as any).tableName;
                 return (
-                  <div key={`flow-list-${flow.flowId}`} className="flex items-center gap-2 px-2 py-1.5 rounded bg-white/50 hover:bg-white">
+                  <div key={`flow-list-${flow.flowId}`} className="flex items-center gap-2 px-2 py-1.5 rounded bg-card/50 hover:bg-card">
                     {/* 플로우 이름 - 일반 텍스트 */}
                     <Workflow className="h-3.5 w-3.5 text-purple-500 shrink-0" />
-                    <span className="text-xs font-medium text-gray-700 shrink-0">
+                    <span className="text-xs font-medium text-foreground shrink-0">
                       {flow.flowName}
                     </span>
                     {tableName && (
@@ -4302,8 +4302,8 @@ function ControlManagementTab({
                           const timing = flowInfo?.timing || btn.flowTiming || "after";
                           return (
                             <div key={`${flow.flowId}-${btn.id}`} className="flex items-center gap-1">
-                              {idx === 0 && <ArrowRight className="h-3 w-3 text-green-500" />}
-                              <span className="text-xs text-green-600 font-medium">
+                              {idx === 0 && <ArrowRight className="h-3 w-3 text-emerald-500" />}
+                              <span className="text-xs text-emerald-600 font-medium">
                                 [{btn.label}]
                               </span>
                               <Badge className={cn("h-4 text-[9px]", getActionTypeColor(btn.actionType))}>
@@ -4406,7 +4406,7 @@ function ControlManagementTab({
                                   className="text-xs"
                                 >
                                   <Check className={cn("mr-2 h-3 w-3", quickFlowData.tableName === table ? "opacity-100" : "opacity-0")} />
-                                  <Database className="mr-2 h-3 w-3 text-blue-500" />
+                                  <Database className="mr-2 h-3 w-3 text-primary" />
                                   {table}
                                 </CommandItem>
                               ))}
@@ -4440,9 +4440,9 @@ function ControlManagementTab({
               <Label className="text-xs sm:text-sm">액션 타입</Label>
               <div className="flex gap-2 mt-2">
                 {[
-                  { value: "insert", label: "INSERT", color: "bg-green-100 text-green-700 border-green-300" },
-                  { value: "update", label: "UPDATE", color: "bg-blue-100 text-blue-700 border-blue-300" },
-                  { value: "delete", label: "DELETE", color: "bg-red-100 text-red-700 border-red-300" },
+                  { value: "insert", label: "INSERT", color: "bg-emerald-100 text-emerald-700 border-green-300" },
+                  { value: "update", label: "UPDATE", color: "bg-primary/10 text-primary border-primary/40" },
+                  { value: "delete", label: "DELETE", color: "bg-destructive/10 text-destructive border-destructive/30" },
                 ].map((action) => (
                   <button
                     key={action.value}
@@ -4452,7 +4452,7 @@ function ControlManagementTab({
                       "flex-1 py-2 px-3 text-xs font-medium rounded-md border transition-all",
                       quickFlowData.actionType === action.value
                         ? action.color + " ring-2 ring-offset-1"
-                        : "bg-gray-50 text-gray-600 border-gray-200 hover:bg-gray-100"
+                        : "bg-muted text-muted-foreground border-border hover:bg-muted"
                     )}
                   >
                     {action.label}
@@ -4480,7 +4480,7 @@ function ControlManagementTab({
                   id="autoLink"
                   checked={quickFlowData.autoLink}
                   onChange={(e) => setQuickFlowData(prev => ({ ...prev, autoLink: e.target.checked }))}
-                  className="h-4 w-4 rounded border-gray-300"
+                  className="h-4 w-4 rounded border-input"
                 />
                 <label htmlFor="autoLink" className="text-xs text-purple-700">
                   생성 후 [{buttonControls.find(b => b.id === quickFlowData.targetButtonId)?.label}] 버튼에 자동 연동
@@ -4712,7 +4712,7 @@ function PreviewTab({ screenId, screenName, companyCode, iframeKey = 0, canvasWi
       {/* 상단 툴바 (최소화) */}
       <div className="flex h-7 shrink-0 items-center justify-between border-b px-2">
         <div className="flex items-center gap-1.5">
-          <Eye className="h-3 w-3 text-blue-500" />
+          <Eye className="h-3 w-3 text-primary" />
           <span className="truncate text-xs font-medium">{screenName}</span>
           <span className="text-[10px] text-muted-foreground">(휠: 확대/축소, 드래그: 이동)</span>
         </div>
@@ -4741,10 +4741,10 @@ function PreviewTab({ screenId, screenName, companyCode, iframeKey = 0, canvasWi
       {/* iframe 영역 - Ctrl+휠로 확대/축소, 내부 버튼/목록 클릭 가능 */}
       <div 
         ref={containerRef} 
-        className="relative min-h-0 flex-1 overflow-hidden flex items-center justify-center bg-gray-100"
+        className="relative min-h-0 flex-1 overflow-hidden flex items-center justify-center bg-muted"
       >
         {loading && (
-          <div className="absolute inset-0 z-10 flex items-center justify-center bg-white/80">
+          <div className="absolute inset-0 z-10 flex items-center justify-center bg-background/80">
             <div className="text-center">
               <Loader2 className="mx-auto h-8 w-8 animate-spin text-primary" />
               <p className="mt-2 text-sm text-muted-foreground">화면 로딩 중...</p>
@@ -4797,7 +4797,7 @@ function PreviewTab({ screenId, screenName, companyCode, iframeKey = 0, canvasWi
                     key={iframeKey}
                     id="screen-preview-iframe"
                     src={previewUrl}
-                    className="border-0 shadow-lg rounded bg-white pointer-events-none"
+                    className="border-0 shadow-lg rounded bg-card pointer-events-none"
                     style={{
                       width: "100%",
                       height: "100%",
diff --git a/frontend/components/screen/SimpleScreenDesigner.tsx b/frontend/components/screen/SimpleScreenDesigner.tsx
index d748bb8c..19d81b37 100644
--- a/frontend/components/screen/SimpleScreenDesigner.tsx
+++ b/frontend/components/screen/SimpleScreenDesigner.tsx
@@ -185,7 +185,7 @@ export default function SimpleScreenDesigner({ selectedScreen, onBackToList }: S
   }
 
   return (
-    <div className="flex h-screen w-full flex-col bg-gray-100">
+    <div className="flex h-screen w-full flex-col bg-muted">
       {/* 상단 툴바 */}
       <DesignerToolbar
         screenName={selectedScreen?.screenName}
@@ -203,23 +203,23 @@ export default function SimpleScreenDesigner({ selectedScreen, onBackToList }: S
       />
 
       {/* 간단한 컨트롤 버튼들 */}
-      <div className="border-b border-gray-300 bg-white p-4">
+      <div className="border-b border-input bg-white p-4">
         <div className="flex gap-2">
-          <button onClick={handleAddText} className="rounded bg-accent0 px-3 py-1 text-white hover:bg-blue-600">
+          <button onClick={handleAddText} className="rounded bg-accent0 px-3 py-1 text-white hover:bg-primary">
             텍스트 추가
           </button>
-          <button onClick={handleAddContainer} className="rounded bg-green-500 px-3 py-1 text-white hover:bg-green-600">
+          <button onClick={handleAddContainer} className="rounded bg-emerald-500 px-3 py-1 text-white hover:bg-emerald-600">
             컨테이너 추가
           </button>
         </div>
       </div>
 
       {/* 메인 캔버스 영역 */}
-      <div className="relative flex-1 overflow-auto bg-gray-100 p-8">
+      <div className="relative flex-1 overflow-auto bg-muted p-8">
         {/* 해상도 정보 표시 */}
         <div className="mb-4 flex items-center justify-center">
           <div className="rounded-lg border bg-white px-4 py-2 shadow-sm">
-            <span className="text-sm font-medium text-gray-700">
+            <span className="text-sm font-medium text-foreground">
               {screenResolution.name} ({screenResolution.width} × {screenResolution.height})
             </span>
           </div>
diff --git a/frontend/components/screen/StyleEditor.tsx b/frontend/components/screen/StyleEditor.tsx
index 3add842c..b768e107 100644
--- a/frontend/components/screen/StyleEditor.tsx
+++ b/frontend/components/screen/StyleEditor.tsx
@@ -53,13 +53,13 @@ export default function StyleEditor({ style, onStyleChange, className }: StyleEd
     <div className={`space-y-2 ${className}`}>
       {/* 테두리 섹션 */}
       <Collapsible open={openSections.border} onOpenChange={() => toggleSection("border")}>
-        <CollapsibleTrigger className="flex w-full items-center justify-between rounded-md bg-gray-50 px-2 py-1.5 hover:bg-gray-100">
+        <CollapsibleTrigger className="flex w-full items-center justify-between rounded-md bg-muted px-2 py-1.5 hover:bg-muted">
           <div className="flex items-center gap-1.5">
             <Square className="text-primary h-3 w-3" />
             <span className="text-xs font-medium">테두리</span>
           </div>
           <ChevronDown
-            className={`h-3 w-3 text-gray-500 transition-transform ${openSections.border ? "rotate-180" : ""}`}
+            className={`h-3 w-3 text-muted-foreground transition-transform ${openSections.border ? "rotate-180" : ""}`}
           />
         </CollapsibleTrigger>
         <CollapsibleContent className="pt-2">
@@ -142,13 +142,13 @@ export default function StyleEditor({ style, onStyleChange, className }: StyleEd
 
       {/* 배경 섹션 */}
       <Collapsible open={openSections.background} onOpenChange={() => toggleSection("background")}>
-        <CollapsibleTrigger className="flex w-full items-center justify-between rounded-md bg-gray-50 px-2 py-1.5 hover:bg-gray-100">
+        <CollapsibleTrigger className="flex w-full items-center justify-between rounded-md bg-muted px-2 py-1.5 hover:bg-muted">
           <div className="flex items-center gap-1.5">
             <Palette className="text-primary h-3 w-3" />
             <span className="text-xs font-medium">배경</span>
           </div>
           <ChevronDown
-            className={`h-3 w-3 text-gray-500 transition-transform ${openSections.background ? "rotate-180" : ""}`}
+            className={`h-3 w-3 text-muted-foreground transition-transform ${openSections.background ? "rotate-180" : ""}`}
           />
         </CollapsibleTrigger>
         <CollapsibleContent className="pt-2">
@@ -186,13 +186,13 @@ export default function StyleEditor({ style, onStyleChange, className }: StyleEd
 
       {/* 텍스트 섹션 */}
       <Collapsible open={openSections.text} onOpenChange={() => toggleSection("text")}>
-        <CollapsibleTrigger className="flex w-full items-center justify-between rounded-md bg-gray-50 px-2 py-1.5 hover:bg-gray-100">
+        <CollapsibleTrigger className="flex w-full items-center justify-between rounded-md bg-muted px-2 py-1.5 hover:bg-muted">
           <div className="flex items-center gap-1.5">
             <Type className="text-primary h-3 w-3" />
             <span className="text-xs font-medium">텍스트</span>
           </div>
           <ChevronDown
-            className={`h-3 w-3 text-gray-500 transition-transform ${openSections.text ? "rotate-180" : ""}`}
+            className={`h-3 w-3 text-muted-foreground transition-transform ${openSections.text ? "rotate-180" : ""}`}
           />
         </CollapsibleTrigger>
         <CollapsibleContent className="pt-2">
diff --git a/frontend/components/screen/TableSettingModal.tsx b/frontend/components/screen/TableSettingModal.tsx
index c176c25c..3ac40c13 100644
--- a/frontend/components/screen/TableSettingModal.tsx
+++ b/frontend/components/screen/TableSettingModal.tsx
@@ -652,7 +652,7 @@ export function TableSettingModal({
           {/* 헤더 */}
           <div className="flex flex-shrink-0 items-center justify-between border-b pb-2 px-3 pt-2">
             <div className="flex items-center gap-2">
-              <Table2 className="h-4 w-4 text-green-500" />
+              <Table2 className="h-4 w-4 text-emerald-500" />
               <span className="text-sm font-medium">{tableLabel || tableName}</span>
               {tableName !== tableLabel && tableName !== (tableLabel || tableName) && (
                 <span className="text-xs text-muted-foreground">({tableName})</span>
@@ -803,7 +803,7 @@ export function TableSettingModal({
         <DialogHeader className="flex-shrink-0">
           <div className="flex items-center justify-between">
             <DialogTitle className="flex items-center gap-2 text-lg">
-              <Table2 className="h-5 w-5 text-green-500" />
+              <Table2 className="h-5 w-5 text-emerald-500" />
               테이블 설정: {tableLabel || tableName}
               {tableName !== tableLabel && tableName !== (tableLabel || tableName) && (
                 <span className="text-sm font-normal text-muted-foreground">
@@ -1057,7 +1057,7 @@ function ColumnListTab({
                   className={cn(
                     "cursor-pointer rounded-lg border p-3 transition-colors",
                     isSelected
-                      ? "border-green-300 bg-green-50"
+                      ? "border-green-300 bg-emerald-50"
                       : "border-transparent bg-background hover:bg-muted/50"
                   )}
                 >
@@ -1072,14 +1072,14 @@ function ColumnListTab({
                     </div>
                     <div className="flex gap-1">
                       {col.isPK && (
-                        <Badge variant="outline" className="bg-orange-100 text-orange-700 text-[10px] px-1.5">
+                        <Badge variant="outline" className="bg-amber-100 text-orange-700 text-[10px] px-1.5">
                           <Key className="mr-0.5 h-2.5 w-2.5" />
                           PK
                         </Badge>
                       )}
                       {/* 엔티티 타입이거나 referenceTable이 설정되어 있으면 조인 배지 표시 (FK와 동일 의미) */}
                       {(inputType === "entity" || edited.referenceTable || col.referenceTable) && (
-                        <Badge variant="outline" className="bg-blue-100 text-blue-700 text-[10px] px-1.5">
+                        <Badge variant="outline" className="bg-primary/10 text-primary text-[10px] px-1.5">
                           <Link2 className="mr-0.5 h-2.5 w-2.5" />
                           조인
                         </Badge>
@@ -1134,7 +1134,7 @@ function ColumnDetailPanel({
       {/* 헤더 */}
       <div className="flex-shrink-0 border-b pb-4">
         <div className="flex items-center gap-2">
-          <Settings2 className="h-5 w-5 text-green-500" />
+          <Settings2 className="h-5 w-5 text-emerald-500" />
           <h3 className="text-lg font-semibold">컬럼 설정</h3>
         </div>
         <div className="mt-2 flex items-center gap-2">
@@ -1143,13 +1143,13 @@ function ColumnDetailPanel({
           </span>
           <span className="text-xs text-muted-foreground">{columnInfo.dataType}</span>
           {columnInfo.isPK && (
-            <Badge variant="outline" className="bg-orange-100 text-orange-700 text-[10px]">
+            <Badge variant="outline" className="bg-amber-100 text-orange-700 text-[10px]">
               Primary Key
             </Badge>
           )}
           {/* 엔티티 타입이거나 referenceTable이 있으면 조인 배지 표시 */}
           {(currentInputType === "entity" || currentRefTable) && (
-            <Badge variant="outline" className="bg-blue-100 text-blue-700 text-[10px]">
+            <Badge variant="outline" className="bg-primary/10 text-primary text-[10px]">
               조인
             </Badge>
           )}
@@ -1333,7 +1333,7 @@ function ScreensTab({ screensUsingTable, loading }: ScreensTabProps) {
               className="flex items-center justify-between rounded-lg border bg-background p-3 hover:bg-muted/50"
             >
               <div className="flex items-center gap-3">
-                <Monitor className="h-4 w-4 text-blue-500" />
+                <Monitor className="h-4 w-4 text-primary" />
                 <div>
                   <p className="text-sm font-medium">{screen.screenName}</p>
                   {screen.screenCode && (
@@ -1349,10 +1349,10 @@ function ScreensTab({ screensUsingTable, loading }: ScreensTabProps) {
                   className={cn(
                     "text-[10px]",
                     screen.tableRole === "main"
-                      ? "bg-blue-100 text-blue-700"
+                      ? "bg-primary/10 text-primary"
                       : screen.tableRole === "filter"
                       ? "bg-purple-100 text-purple-700"
-                      : "bg-orange-100 text-orange-700"
+                      : "bg-amber-100 text-orange-700"
                   )}
                 >
                   {screen.tableRole === "main"
@@ -1405,7 +1405,7 @@ function ReferenceTab({
       {/* 이 테이블이 참조하는 테이블 */}
       <div className="space-y-2">
         <h3 className="flex items-center gap-2 text-sm font-semibold">
-          <ArrowRight className="h-4 w-4 text-orange-500" />
+          <ArrowRight className="h-4 w-4 text-amber-500" />
           이 테이블이 참조하는 테이블 ({joinColumnRefs.length}개)
         </h3>
         {joinColumnRefs.length > 0 ? (
@@ -1413,9 +1413,9 @@ function ReferenceTab({
             {joinColumnRefs.map((ref, idx) => (
               <div
                 key={idx}
-                className="flex items-center gap-3 rounded-lg border bg-orange-50/50 p-3"
+                className="flex items-center gap-3 rounded-lg border bg-amber-50/50 p-3"
               >
-                <Badge variant="outline" className="bg-orange-100 text-orange-700">
+                <Badge variant="outline" className="bg-amber-100 text-orange-700">
                   {ref.column}
                 </Badge>
                 <ArrowRight className="h-4 w-4 text-muted-foreground" />
@@ -1438,7 +1438,7 @@ function ReferenceTab({
       {/* 이 테이블을 참조하는 테이블 */}
       <div className="space-y-2">
         <h3 className="flex items-center gap-2 text-sm font-semibold">
-          <Eye className="h-4 w-4 text-green-500" />
+          <Eye className="h-4 w-4 text-emerald-500" />
           이 테이블을 참조하는 테이블 ({referencedBy.length}개)
         </h3>
         {referencedBy.length > 0 ? (
@@ -1446,7 +1446,7 @@ function ReferenceTab({
             {referencedBy.map((ref, idx) => (
               <div
                 key={idx}
-                className="flex items-center gap-3 rounded-lg border bg-green-50/50 p-3"
+                className="flex items-center gap-3 rounded-lg border bg-emerald-50/50 p-3"
               >
                 <div className="flex-1">
                   <span className="font-medium">
@@ -1455,7 +1455,7 @@ function ReferenceTab({
                   <span className="text-muted-foreground">.{ref.fromColumn}</span>
                 </div>
                 <ArrowRight className="h-4 w-4 text-muted-foreground" />
-                <Badge variant="outline" className="bg-green-100 text-green-700">
+                <Badge variant="outline" className="bg-emerald-100 text-emerald-700">
                   {ref.toColumn}
                 </Badge>
               </div>
diff --git a/frontend/components/screen/TableTypeSelector.tsx b/frontend/components/screen/TableTypeSelector.tsx
index c6757d92..4a52cdc6 100644
--- a/frontend/components/screen/TableTypeSelector.tsx
+++ b/frontend/components/screen/TableTypeSelector.tsx
@@ -194,7 +194,7 @@ export default function TableTypeSelector({
         </CardHeader>
         <CardContent className="space-y-3">
           <div className="relative">
-            <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400" />
+            <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-muted-foreground/70" />
             <Input
               placeholder="테이블명으로 검색..."
               value={searchTerm}
@@ -215,7 +215,7 @@ export default function TableTypeSelector({
                 <Database className="mr-2 h-3 w-3" />
                 <div className="flex flex-col items-start">
                   <span className="font-medium">{table.displayName}</span>
-                  <span className="text-xs text-gray-500">{table.columnCount}개 컬럼</span>
+                  <span className="text-xs text-muted-foreground">{table.columnCount}개 컬럼</span>
                 </div>
               </Button>
             ))}
diff --git a/frontend/components/screen/TemplateManager.tsx b/frontend/components/screen/TemplateManager.tsx
index d61cf1c8..b04a7175 100644
--- a/frontend/components/screen/TemplateManager.tsx
+++ b/frontend/components/screen/TemplateManager.tsx
@@ -282,7 +282,7 @@ export default function TemplateManager({
                 <Card
                   key={template.templateId}
                   className={`cursor-pointer transition-all hover:shadow-md ${
-                    selectedTemplate?.templateId === template.templateId ? "ring-2 ring-blue-500" : ""
+                    selectedTemplate?.templateId === template.templateId ? "ring-2 ring-ring" : ""
                   }`}
                   onClick={() => handleTemplateSelect(template)}
                 >
@@ -334,7 +334,7 @@ export default function TemplateManager({
                               e.stopPropagation();
                               handleTemplateDelete(template.templateId);
                             }}
-                            className="text-destructive hover:text-red-700"
+                            className="text-destructive hover:text-destructive"
                           >
                             <Trash2 className="h-3 w-3" />
                           </Button>
diff --git a/frontend/components/screen/WidgetFactory.tsx b/frontend/components/screen/WidgetFactory.tsx
index 77b6ab8a..55e16334 100644
--- a/frontend/components/screen/WidgetFactory.tsx
+++ b/frontend/components/screen/WidgetFactory.tsx
@@ -28,11 +28,11 @@ export default function WidgetFactory({ widget, value, onChange, className }: Wi
           {widget.label && (
             <label htmlFor={widget.id} className="text-sm font-medium">
               {widget.label}
-              {widget.required && <span className="ml-1 text-red-500">*</span>}
+              {widget.required && <span className="ml-1 text-destructive">*</span>}
             </label>
           )}
           <div className="relative">
-            <Calendar className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400" />
+            <Calendar className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-muted-foreground/70" />
             <input
               id={widget.id}
               type="date"
@@ -41,7 +41,7 @@ export default function WidgetFactory({ widget, value, onChange, className }: Wi
               onChange={(e) => onChange?.(e.target.value)}
               required={widget.required}
               readOnly={widget.readonly}
-              className="w-full rounded-md border border-gray-300 py-2 pr-3 pl-10 text-sm focus:border-primary focus:ring-1 focus:ring-blue-500 focus:outline-none"
+              className="w-full rounded-md border border-input py-2 pr-3 pl-10 text-sm focus:border-primary focus:ring-1 focus:ring-ring focus:outline-none"
             />
           </div>
         </div>
@@ -53,11 +53,11 @@ export default function WidgetFactory({ widget, value, onChange, className }: Wi
           {widget.label && (
             <label htmlFor={widget.id} className="text-sm font-medium">
               {widget.label}
-              {widget.required && <span className="ml-1 text-red-500">*</span>}
+              {widget.required && <span className="ml-1 text-destructive">*</span>}
             </label>
           )}
           <div className="relative">
-            <Hash className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400" />
+            <Hash className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-muted-foreground/70" />
             <input
               id={widget.id}
               type="text"
@@ -66,7 +66,7 @@ export default function WidgetFactory({ widget, value, onChange, className }: Wi
               onChange={(e) => onChange?.(e.target.value)}
               required={widget.required}
               readOnly={widget.readonly}
-              className="w-full rounded-md border border-gray-300 py-2 pr-3 pl-10 font-mono text-sm focus:border-primary focus:ring-1 focus:ring-blue-500 focus:outline-none"
+              className="w-full rounded-md border border-input py-2 pr-3 pl-10 font-mono text-sm focus:border-primary focus:ring-1 focus:ring-ring focus:outline-none"
             />
           </div>
         </div>
@@ -78,11 +78,11 @@ export default function WidgetFactory({ widget, value, onChange, className }: Wi
           {widget.label && (
             <label htmlFor={widget.id} className="text-sm font-medium">
               {widget.label}
-              {widget.required && <span className="ml-1 text-red-500">*</span>}
+              {widget.required && <span className="ml-1 text-destructive">*</span>}
             </label>
           )}
           <div className="relative">
-            <Database className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400" />
+            <Database className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-muted-foreground/70" />
             <input
               id={widget.id}
               type="text"
@@ -91,7 +91,7 @@ export default function WidgetFactory({ widget, value, onChange, className }: Wi
               onChange={(e) => onChange?.(e.target.value)}
               required={widget.required}
               readOnly={widget.readonly}
-              className="w-full rounded-md border border-gray-300 py-2 pr-3 pl-10 text-sm focus:border-primary focus:ring-1 focus:ring-blue-500 focus:outline-none"
+              className="w-full rounded-md border border-input py-2 pr-3 pl-10 text-sm focus:border-primary focus:ring-1 focus:ring-ring focus:outline-none"
             />
           </div>
         </div>
@@ -103,18 +103,18 @@ export default function WidgetFactory({ widget, value, onChange, className }: Wi
           {widget.label && (
             <label htmlFor={widget.id} className="text-sm font-medium">
               {widget.label}
-              {widget.required && <span className="ml-1 text-red-500">*</span>}
+              {widget.required && <span className="ml-1 text-destructive">*</span>}
             </label>
           )}
           <div className="relative">
-            <FileText className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400" />
+            <FileText className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-muted-foreground/70" />
             <input
               id={widget.id}
               type="file"
               onChange={(e) => onChange?.(e.target.files?.[0]?.name || "")}
               required={widget.required}
               disabled={widget.readonly}
-              className="w-full rounded-md border border-gray-300 py-2 pr-3 pl-10 text-sm file:mr-4 file:rounded-md file:border-0 file:bg-accent file:px-4 file:py-1 file:text-sm file:font-medium file:text-blue-700 hover:file:bg-primary/20 focus:border-primary focus:ring-1 focus:ring-blue-500 focus:outline-none"
+              className="w-full rounded-md border border-input py-2 pr-3 pl-10 text-sm file:mr-4 file:rounded-md file:border-0 file:bg-accent file:px-4 file:py-1 file:text-sm file:font-medium file:text-primary hover:file:bg-primary/20 focus:border-primary focus:ring-1 focus:ring-ring focus:outline-none"
             />
           </div>
         </div>
@@ -127,7 +127,7 @@ export default function WidgetFactory({ widget, value, onChange, className }: Wi
       return (
         <div className={`space-y-2 ${className}`}>
           <div className="flex items-center space-x-2">
-            <CheckSquare className="h-4 w-4 text-gray-400" />
+            <CheckSquare className="h-4 w-4 text-muted-foreground/70" />
             <input
               id={widget.id}
               type="checkbox"
@@ -135,12 +135,12 @@ export default function WidgetFactory({ widget, value, onChange, className }: Wi
               onChange={(e) => onChange?.(e.target.checked ? "true" : "false")}
               required={widget.required}
               disabled={widget.readonly}
-              className="h-4 w-4 rounded border-gray-300 text-primary focus:ring-blue-500"
+              className="h-4 w-4 rounded border-input text-primary focus:ring-ring"
             />
             {widget.label && (
               <label htmlFor={widget.id} className="text-sm font-medium">
                 {widget.label}
-                {widget.required && <span className="ml-1 text-red-500">*</span>}
+                {widget.required && <span className="ml-1 text-destructive">*</span>}
               </label>
             )}
           </div>
@@ -153,12 +153,12 @@ export default function WidgetFactory({ widget, value, onChange, className }: Wi
           {widget.label && (
             <label className="text-sm font-medium">
               {widget.label}
-              {widget.required && <span className="ml-1 text-red-500">*</span>}
+              {widget.required && <span className="ml-1 text-destructive">*</span>}
             </label>
           )}
           <div className="space-y-2">
             <div className="flex items-center space-x-2">
-              <Radio className="h-4 w-4 text-gray-400" />
+              <Radio className="h-4 w-4 text-muted-foreground/70" />
               <input
                 id={`${widget.id}-yes`}
                 name={widget.id}
@@ -168,14 +168,14 @@ export default function WidgetFactory({ widget, value, onChange, className }: Wi
                 onChange={(e) => onChange?.(e.target.value)}
                 required={widget.required}
                 disabled={widget.readonly}
-                className="h-4 w-4 border-gray-300 text-primary focus:ring-blue-500"
+                className="h-4 w-4 border-input text-primary focus:ring-ring"
               />
               <label htmlFor={`${widget.id}-yes`} className="text-sm">
                 예
               </label>
             </div>
             <div className="flex items-center space-x-2">
-              <Radio className="h-4 w-4 text-gray-400" />
+              <Radio className="h-4 w-4 text-muted-foreground/70" />
               <input
                 id={`${widget.id}-no`}
                 name={widget.id}
@@ -185,7 +185,7 @@ export default function WidgetFactory({ widget, value, onChange, className }: Wi
                 onChange={(e) => onChange?.(e.target.value)}
                 required={widget.required}
                 disabled={widget.readonly}
-                className="h-4 w-4 border-gray-300 text-primary focus:ring-blue-500"
+                className="h-4 w-4 border-input text-primary focus:ring-ring"
               />
               <label htmlFor={`${widget.id}-no`} className="text-sm">
                 아니오
@@ -200,9 +200,9 @@ export default function WidgetFactory({ widget, value, onChange, className }: Wi
 
     default:
       return (
-        <div className={`rounded border border-red-300 bg-destructive/10 p-4 text-destructive ${className}`}>
+        <div className={`rounded border border-destructive/30 bg-destructive/10 p-4 text-destructive ${className}`}>
           <p className="text-sm font-medium">지원하지 않는 위젯 타입</p>
-          <p className="text-xs text-red-500">타입: {widget.widgetType}</p>
+          <p className="text-xs text-destructive">타입: {widget.widgetType}</p>
         </div>
       );
   }
diff --git a/frontend/components/screen/common/ColorPickerWithTransparent.tsx b/frontend/components/screen/common/ColorPickerWithTransparent.tsx
index c0d3bf6f..ff6e32c5 100644
--- a/frontend/components/screen/common/ColorPickerWithTransparent.tsx
+++ b/frontend/components/screen/common/ColorPickerWithTransparent.tsx
@@ -51,7 +51,7 @@ export function ColorPickerWithTransparent({
               backgroundPosition: "0 0, 0 4px, 4px -4px, -4px 0px"
             }}
           >
-            <span className="text-[8px] font-bold text-gray-600 bg-white/80 px-0.5 rounded">투명</span>
+            <span className="text-[8px] font-bold text-muted-foreground bg-white/80 px-0.5 rounded">투명</span>
           </div>
         )}
       </div>
diff --git a/frontend/components/screen/config-panels/ButtonConfigPanel-fixed.tsx b/frontend/components/screen/config-panels/ButtonConfigPanel-fixed.tsx
index dc991519..51322c3e 100644
--- a/frontend/components/screen/config-panels/ButtonConfigPanel-fixed.tsx
+++ b/frontend/components/screen/config-panels/ButtonConfigPanel-fixed.tsx
@@ -257,8 +257,8 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
 
       {/* 모달 열기 액션 설정 */}
       {localSelects.actionType === "modal" && (
-        <div className="mt-4 space-y-4 rounded-lg border bg-gray-50 p-4">
-          <h4 className="text-sm font-medium text-gray-700">모달 설정</h4>
+        <div className="mt-4 space-y-4 rounded-lg border bg-muted p-4">
+          <h4 className="text-sm font-medium text-foreground">모달 설정</h4>
 
           <div>
             <Label htmlFor="modal-title">모달 제목</Label>
@@ -328,15 +328,15 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
                     {(() => {
                       const filteredScreens = filterScreens(modalSearchTerm);
                       if (screensLoading) {
-                        return <div className="p-3 text-sm text-gray-500">화면 목록을 불러오는 중...</div>;
+                        return <div className="p-3 text-sm text-muted-foreground">화면 목록을 불러오는 중...</div>;
                       }
                       if (filteredScreens.length === 0) {
-                        return <div className="p-3 text-sm text-gray-500">검색 결과가 없습니다.</div>;
+                        return <div className="p-3 text-sm text-muted-foreground">검색 결과가 없습니다.</div>;
                       }
                       return filteredScreens.map((screen, index) => (
                         <div
                           key={`modal-screen-${screen.id}-${index}`}
-                          className="flex cursor-pointer items-center px-3 py-2 hover:bg-gray-100"
+                          className="flex cursor-pointer items-center px-3 py-2 hover:bg-muted"
                           onClick={() => {
                             onUpdateProperty("componentConfig.action.targetScreenId", screen.id);
                             setModalScreenOpen(false);
@@ -351,7 +351,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
                           />
                           <div className="flex flex-col">
                             <span className="font-medium">{screen.name}</span>
-                            {screen.description && <span className="text-xs text-gray-500">{screen.description}</span>}
+                            {screen.description && <span className="text-xs text-muted-foreground">{screen.description}</span>}
                           </div>
                         </div>
                       ));
@@ -366,8 +366,8 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
 
       {/* 수정 액션 설정 */}
       {localSelects.actionType === "edit" && (
-        <div className="mt-4 space-y-4 rounded-lg border bg-green-50 p-4">
-          <h4 className="text-sm font-medium text-gray-700">수정 설정</h4>
+        <div className="mt-4 space-y-4 rounded-lg border bg-emerald-50 p-4">
+          <h4 className="text-sm font-medium text-foreground">수정 설정</h4>
 
           <div>
             <Label htmlFor="edit-screen">수정 폼 화면 선택</Label>
@@ -402,15 +402,15 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
                     {(() => {
                       const filteredScreens = filterScreens(modalSearchTerm);
                       if (screensLoading) {
-                        return <div className="p-3 text-sm text-gray-500">화면 목록을 불러오는 중...</div>;
+                        return <div className="p-3 text-sm text-muted-foreground">화면 목록을 불러오는 중...</div>;
                       }
                       if (filteredScreens.length === 0) {
-                        return <div className="p-3 text-sm text-gray-500">검색 결과가 없습니다.</div>;
+                        return <div className="p-3 text-sm text-muted-foreground">검색 결과가 없습니다.</div>;
                       }
                       return filteredScreens.map((screen, index) => (
                         <div
                           key={`edit-screen-${screen.id}-${index}`}
-                          className="flex cursor-pointer items-center px-3 py-2 hover:bg-gray-100"
+                          className="flex cursor-pointer items-center px-3 py-2 hover:bg-muted"
                           onClick={() => {
                             onUpdateProperty("componentConfig.action.targetScreenId", screen.id);
                             setModalScreenOpen(false);
@@ -431,8 +431,8 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
 
       {/* 복사 액션 설정 */}
       {localSelects.actionType === "copy" && (
-        <div className="mt-4 space-y-4 rounded-lg border bg-blue-50 p-4">
-          <h4 className="text-sm font-medium text-gray-700">복사 설정 (품목코드 자동 초기화)</h4>
+        <div className="mt-4 space-y-4 rounded-lg border bg-primary/10 p-4">
+          <h4 className="text-sm font-medium text-foreground">복사 설정 (품목코드 자동 초기화)</h4>
 
           <div>
             <Label htmlFor="copy-screen">복사 폼 화면 선택</Label>
@@ -467,15 +467,15 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
                     {(() => {
                       const filteredScreens = filterScreens(modalSearchTerm);
                       if (screensLoading) {
-                        return <div className="p-3 text-sm text-gray-500">화면 목록을 불러오는 중...</div>;
+                        return <div className="p-3 text-sm text-muted-foreground">화면 목록을 불러오는 중...</div>;
                       }
                       if (filteredScreens.length === 0) {
-                        return <div className="p-3 text-sm text-gray-500">검색 결과가 없습니다.</div>;
+                        return <div className="p-3 text-sm text-muted-foreground">검색 결과가 없습니다.</div>;
                       }
                       return filteredScreens.map((screen, index) => (
                         <div
                           key={`edit-screen-${screen.id}-${index}`}
-                          className="flex cursor-pointer items-center px-3 py-2 hover:bg-gray-100"
+                          className="flex cursor-pointer items-center px-3 py-2 hover:bg-muted"
                           onClick={() => {
                             onUpdateProperty("componentConfig.action.targetScreenId", screen.id);
                             setModalScreenOpen(false);
@@ -490,7 +490,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
                           />
                           <div className="flex flex-col">
                             <span className="font-medium">{screen.name}</span>
-                            {screen.description && <span className="text-xs text-gray-500">{screen.description}</span>}
+                            {screen.description && <span className="text-xs text-muted-foreground">{screen.description}</span>}
                           </div>
                         </div>
                       ));
@@ -499,7 +499,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
                 </div>
               </PopoverContent>
             </Popover>
-            <p className="mt-1 text-xs text-gray-500">
+            <p className="mt-1 text-xs text-muted-foreground">
               선택된 데이터가 복사되며, 품목코드는 자동으로 초기화됩니다
             </p>
           </div>
@@ -539,7 +539,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
                     onUpdateProperty("webTypeConfig.editModalTitle", newValue);
                   }}
                 />
-                <p className="mt-1 text-xs text-gray-500">비워두면 기본 제목이 표시됩니다</p>
+                <p className="mt-1 text-xs text-muted-foreground">비워두면 기본 제목이 표시됩니다</p>
               </div>
 
               <div>
@@ -555,7 +555,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
                     onUpdateProperty("webTypeConfig.editModalDescription", newValue);
                   }}
                 />
-                <p className="mt-1 text-xs text-gray-500">비워두면 설명이 표시되지 않습니다</p>
+                <p className="mt-1 text-xs text-muted-foreground">비워두면 설명이 표시되지 않습니다</p>
               </div>
 
               <div>
@@ -586,8 +586,8 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
 
       {/* 페이지 이동 액션 설정 */}
       {localSelects.actionType === "navigate" && (
-        <div className="mt-4 space-y-4 rounded-lg border bg-gray-50 p-4">
-          <h4 className="text-sm font-medium text-gray-700">페이지 이동 설정</h4>
+        <div className="mt-4 space-y-4 rounded-lg border bg-muted p-4">
+          <h4 className="text-sm font-medium text-foreground">페이지 이동 설정</h4>
 
           <div>
             <Label htmlFor="target-screen-nav">이동할 화면 선택</Label>
@@ -622,15 +622,15 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
                     {(() => {
                       const filteredScreens = filterScreens(navSearchTerm);
                       if (screensLoading) {
-                        return <div className="p-3 text-sm text-gray-500">화면 목록을 불러오는 중...</div>;
+                        return <div className="p-3 text-sm text-muted-foreground">화면 목록을 불러오는 중...</div>;
                       }
                       if (filteredScreens.length === 0) {
-                        return <div className="p-3 text-sm text-gray-500">검색 결과가 없습니다.</div>;
+                        return <div className="p-3 text-sm text-muted-foreground">검색 결과가 없습니다.</div>;
                       }
                       return filteredScreens.map((screen, index) => (
                         <div
                           key={`navigate-screen-${screen.id}-${index}`}
-                          className="flex cursor-pointer items-center px-3 py-2 hover:bg-gray-100"
+                          className="flex cursor-pointer items-center px-3 py-2 hover:bg-muted"
                           onClick={() => {
                             onUpdateProperty("componentConfig.action.targetScreenId", screen.id);
                             setNavScreenOpen(false);
@@ -645,7 +645,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
                           />
                           <div className="flex flex-col">
                             <span className="font-medium">{screen.name}</span>
-                            {screen.description && <span className="text-xs text-gray-500">{screen.description}</span>}
+                            {screen.description && <span className="text-xs text-muted-foreground">{screen.description}</span>}
                           </div>
                         </div>
                       ));
@@ -654,7 +654,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
                 </div>
               </PopoverContent>
             </Popover>
-            <p className="mt-1 text-xs text-gray-500">
+            <p className="mt-1 text-xs text-muted-foreground">
               선택한 화면으로 /screens/{"{"}화면ID{"}"} 형태로 이동합니다
             </p>
           </div>
@@ -671,15 +671,15 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
                 onUpdateProperty("componentConfig.action.targetUrl", newValue);
               }}
             />
-            <p className="mt-1 text-xs text-gray-500">URL을 입력하면 화면 선택보다 우선 적용됩니다</p>
+            <p className="mt-1 text-xs text-muted-foreground">URL을 입력하면 화면 선택보다 우선 적용됩니다</p>
           </div>
         </div>
       )}
 
       {/* 🔥 NEW: 제어관리 기능 섹션 */}
-      <div className="mt-8 border-t border-gray-200 pt-6">
+      <div className="mt-8 border-t border-border pt-6">
         <div className="mb-4">
-          <h3 className="text-lg font-medium text-gray-900">🔧 고급 기능</h3>
+          <h3 className="text-lg font-medium text-foreground">🔧 고급 기능</h3>
           <p className="text-muted-foreground mt-1 text-sm">버튼 액션과 함께 실행될 추가 기능을 설정합니다</p>
         </div>
 
diff --git a/frontend/components/screen/config-panels/ButtonConfigPanel.tsx b/frontend/components/screen/config-panels/ButtonConfigPanel.tsx
index 126f6a4d..295371c0 100644
--- a/frontend/components/screen/config-panels/ButtonConfigPanel.tsx
+++ b/frontend/components/screen/config-panels/ButtonConfigPanel.tsx
@@ -10,7 +10,19 @@ import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
-import { Check, ChevronsUpDown, Search, Plus, X, ChevronUp, ChevronDown, Type, Database } from "lucide-react";
+import {
+  Check,
+  ChevronsUpDown,
+  Search,
+  Plus,
+  X,
+  ChevronUp,
+  ChevronDown,
+  Type,
+  Database,
+  Info,
+  RotateCcw,
+} from "lucide-react";
 import { cn } from "@/lib/utils";
 import { ComponentData } from "@/types/screen";
 import { apiClient } from "@/lib/api/client";
@@ -19,6 +31,18 @@ import { ImprovedButtonControlConfigPanel } from "./ImprovedButtonControlConfigP
 import { FlowVisibilityConfigPanel } from "./FlowVisibilityConfigPanel";
 import { QuickInsertConfigSection } from "./QuickInsertConfigSection";
 import { getApprovalDefinitions, type ApprovalDefinition } from "@/lib/api/approval";
+import DOMPurify from "isomorphic-dompurify";
+import { ColorPickerWithTransparent } from "../common/ColorPickerWithTransparent";
+import { icons as allLucideIcons } from "lucide-react";
+import {
+  actionIconMap,
+  noIconActions,
+  NO_ICON_MESSAGE,
+  iconSizePresets,
+  getLucideIcon,
+  addToIconMap,
+  getDefaultIconForAction,
+} from "@/lib/button-icon-map";
 
 // 🆕 제목 블록 타입
 interface TitleBlock {
@@ -71,6 +95,25 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
     groupByColumn: String(config.action?.groupByColumns?.[0] || ""),
   });
 
+  // 아이콘 설정 상태
+  const [displayMode, setDisplayMode] = useState<"text" | "icon" | "icon-text">(config.displayMode || "text");
+  const [selectedIcon, setSelectedIcon] = useState<string>(config.icon?.name || "");
+  const [selectedIconType, setSelectedIconType] = useState<"lucide" | "svg">(config.icon?.type || "lucide");
+  const [iconSize, setIconSize] = useState<string>(config.icon?.size || "보통");
+  const [iconColor, setIconColor] = useState<string>(config.icon?.color || "");
+  const [iconGap, setIconGap] = useState<number>(config.iconGap ?? 6);
+  const [iconTextPosition, setIconTextPosition] = useState<"right" | "left" | "bottom" | "top">(
+    config.iconTextPosition || "right",
+  );
+
+  // 커스텀 아이콘 UI 상태
+  const [lucideSearchOpen, setLucideSearchOpen] = useState(false);
+  const [lucideSearchTerm, setLucideSearchTerm] = useState("");
+  const [svgPasteOpen, setSvgPasteOpen] = useState(false);
+  const [svgInput, setSvgInput] = useState("");
+  const [svgName, setSvgName] = useState("");
+  const [svgError, setSvgError] = useState("");
+
   const [screens, setScreens] = useState<ScreenOption[]>([]);
   const [screensLoading, setScreensLoading] = useState(false);
   const [modalScreenOpen, setModalScreenOpen] = useState(false);
@@ -94,7 +137,9 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
   const [blockColumnPopoverOpen, setBlockColumnPopoverOpen] = useState<Record<string, boolean>>({}); // 블록별 컬럼 Popover 열림 상태
 
   // 🆕 데이터 전달 필드 매핑용 상태 (멀티 테이블 매핑 지원)
-  const [mappingSourceColumnsMap, setMappingSourceColumnsMap] = useState<Record<string, Array<{ name: string; label: string }>>>({});
+  const [mappingSourceColumnsMap, setMappingSourceColumnsMap] = useState<
+    Record<string, Array<{ name: string; label: string }>>
+  >({});
   const [mappingTargetColumns, setMappingTargetColumns] = useState<Array<{ name: string; label: string }>>([]);
   const [mappingSourcePopoverOpen, setMappingSourcePopoverOpen] = useState<Record<string, boolean>>({});
   const [mappingTargetPopoverOpen, setMappingTargetPopoverOpen] = useState<Record<string, boolean>>({});
@@ -351,7 +396,12 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
     };
 
     loadAll();
-  }, [config.action?.dataTransfer?.multiTableMappings, config.action?.dataTransfer?.sourceTable, config.action?.dataTransfer?.targetTable, loadMappingColumns]);
+  }, [
+    config.action?.dataTransfer?.multiTableMappings,
+    config.action?.dataTransfer?.sourceTable,
+    config.action?.dataTransfer?.targetTable,
+    loadMappingColumns,
+  ]);
 
   // 🆕 modal 액션: 대상 화면 테이블 조회 및 필드 매핑 로드
   useEffect(() => {
@@ -802,38 +852,146 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
     );
   };
 
+  // 아이콘 선택 핸들러
+  const handleSelectIcon = (iconName: string, iconType: "lucide" | "svg" = "lucide") => {
+    setSelectedIcon(iconName);
+    setSelectedIconType(iconType);
+    onUpdateProperty("componentConfig.icon", {
+      name: iconName,
+      type: iconType,
+      size: iconSize,
+      ...(iconColor ? { color: iconColor } : {}),
+    });
+  };
+
+  // 선택 중인 아이콘이 삭제되었을 때 디폴트 아이콘으로 복귀
+  const revertToDefaultIcon = () => {
+    const def = getDefaultIconForAction(localInputs.actionType);
+    setSelectedIcon(def.name);
+    setSelectedIconType(def.type);
+    handleSelectIcon(def.name, def.type);
+  };
+
+  // 표시 모드 변경 핸들러 — icon/icon-text 전환 시 아이콘 미선택이면 디폴트 부여
+  const handleDisplayModeChange = (mode: "text" | "icon" | "icon-text") => {
+    setDisplayMode(mode);
+    onUpdateProperty("componentConfig.displayMode", mode);
+
+    if ((mode === "icon" || mode === "icon-text") && !selectedIcon) {
+      revertToDefaultIcon();
+    }
+  };
+
+  // 아이콘 크기 프리셋 변경 (아이콘 미선택 시 로컬만 업데이트)
+  const handleIconSizePreset = (preset: string) => {
+    setIconSize(preset);
+    if (selectedIcon) {
+      onUpdateProperty("componentConfig.icon.size", preset);
+    }
+  };
+
+  // 아이콘 색상 변경
+  const handleIconColorChange = (color: string | undefined) => {
+    const val = color || "";
+    setIconColor(val);
+    if (selectedIcon) {
+      if (val) {
+        onUpdateProperty("componentConfig.icon.color", val);
+      } else {
+        onUpdateProperty("componentConfig.icon.color", undefined);
+      }
+    }
+  };
+
+  // 현재 액션의 추천 아이콘 목록
+  const currentActionIcons = actionIconMap[localInputs.actionType] || [];
+  const isNoIconAction = noIconActions.has(localInputs.actionType);
+  const customIcons: string[] = config.customIcons || [];
+  const customSvgIcons: Array<{ name: string; svg: string }> = config.customSvgIcons || [];
+  const showIconSettings = displayMode === "icon" || displayMode === "icon-text";
+
   return (
     <div className="space-y-4">
+      {/* 표시 모드 선택 */}
       <div>
-        <Label htmlFor="button-text">버튼 텍스트</Label>
-        <Input
-          id="button-text"
-          value={localInputs.text}
-          onChange={(e) => {
-            const newValue = e.target.value;
-            setLocalInputs((prev) => ({ ...prev, text: newValue }));
-            onUpdateProperty("componentConfig.text", newValue);
-          }}
-          placeholder="버튼 텍스트를 입력하세요"
-        />
+        <Label className="mb-1.5 block text-xs sm:text-sm">표시 모드</Label>
+        <div className="flex rounded-md border">
+          {(
+            [
+              { value: "text", label: "텍스트" },
+              { value: "icon", label: "아이콘" },
+              { value: "icon-text", label: "아이콘+텍스트" },
+            ] as const
+          ).map((opt) => (
+            <button
+              key={opt.value}
+              type="button"
+              onClick={() => handleDisplayModeChange(opt.value)}
+              className={cn(
+                "flex-1 px-2 py-1.5 text-xs font-medium transition-colors first:rounded-l-md last:rounded-r-md",
+                displayMode === opt.value
+                  ? "bg-primary text-primary-foreground"
+                  : "hover:bg-muted text-muted-foreground",
+              )}
+            >
+              {opt.label}
+            </button>
+          ))}
+        </div>
       </div>
 
+      {/* 아이콘 모드 레이아웃 안내 */}
+      {displayMode === "icon" && (
+        <div className="flex items-start gap-2 rounded-md bg-blue-50 p-2.5 text-xs text-blue-700 dark:bg-blue-950/20 dark:text-blue-300">
+          <Info className="mt-0.5 h-3.5 w-3.5 shrink-0" />
+          <span>아이콘만 표시할 때는 버튼 영역의 가로 폭을 줄여 정사각형에 가깝게 만들면 더 깔끔합니다.</span>
+        </div>
+      )}
+
+      {/* 버튼 텍스트 (텍스트 / 아이콘+텍스트 모드에서 표시) */}
+      {(displayMode === "text" || displayMode === "icon-text") && (
+        <div>
+          <Label htmlFor="button-text">버튼 텍스트</Label>
+          <Input
+            id="button-text"
+            value={localInputs.text}
+            onChange={(e) => {
+              const newValue = e.target.value;
+              setLocalInputs((prev) => ({ ...prev, text: newValue }));
+              onUpdateProperty("componentConfig.text", newValue);
+            }}
+            placeholder="버튼 텍스트를 입력하세요"
+          />
+        </div>
+      )}
+
       <div>
-        <Label htmlFor="button-action">버튼 액션</Label>
+        <Label htmlFor="button-action" className="mb-1.5 block">
+          버튼 액션
+        </Label>
         <Select
           key={`action-${component.id}`}
           value={localInputs.actionType}
           onValueChange={(value) => {
-            // 🔥 로컬 상태 먼저 업데이트
             setLocalInputs((prev) => ({ ...prev, actionType: value }));
-            // 🔥 action.type 업데이트
             onUpdateProperty("componentConfig.action.type", value);
 
-            // 🔥 색상 업데이트는 충분히 지연 (React 리렌더링 완료 후)
+            // 액션 변경 시: 선택된 아이콘이 새 액션의 추천 목록에 없으면 초기화
+            const newActionIcons = actionIconMap[value] || [];
+            if (
+              selectedIcon &&
+              selectedIconType === "lucide" &&
+              !newActionIcons.includes(selectedIcon) &&
+              !customIcons.includes(selectedIcon)
+            ) {
+              setSelectedIcon("");
+              onUpdateProperty("componentConfig.icon", undefined);
+            }
+
             setTimeout(() => {
               const newColor = value === "delete" ? "#ef4444" : "#212121";
               onUpdateProperty("style.labelColor", newColor);
-            }, 100); // 0 → 100ms로 증가
+            }, 100);
           }}
         >
           <SelectTrigger>
@@ -868,10 +1026,11 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
             {/* 복사 */}
             <SelectItem value="copy">복사 (품목코드 초기화)</SelectItem>
 
-            {/* 🔒 숨김 처리 - 기존 시스템 호환성 유지, UI에서만 숨김
+            {/* 🔒 숨김 처리 - 기존 시스템 호환성 유지, UI에서만 숨김 */}
+            {/*
+            <SelectItem value="view_table_history">테이블 이력 보기</SelectItem>
             <SelectItem value="openRelatedModal">연관 데이터 버튼 모달 열기</SelectItem>
             <SelectItem value="openModalWithData">(deprecated) 데이터 전달 + 모달 열기</SelectItem>
-            <SelectItem value="view_table_history">테이블 이력 보기</SelectItem>
             <SelectItem value="code_merge">코드 병합</SelectItem>
             <SelectItem value="empty_vehicle">공차등록</SelectItem>
             */}
@@ -879,6 +1038,581 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
         </Select>
       </div>
 
+      {/* ────────────────── 아이콘 설정 영역 ────────────────── */}
+      {showIconSettings && (
+        <div className="space-y-4">
+          {/* 추천 아이콘 / 안내 문구 */}
+          {isNoIconAction ? (
+            <div>
+              <div className="text-muted-foreground rounded-md border border-dashed p-3 text-center text-xs">
+                {NO_ICON_MESSAGE}
+              </div>
+
+              {/* 커스텀 아이콘이 있으면 표시 */}
+              {(customIcons.length > 0 || customSvgIcons.length > 0) && (
+                <>
+                  <div className="my-2 flex items-center gap-2">
+                    <div className="bg-border h-px flex-1" />
+                    <span className="text-muted-foreground text-[10px]">커스텀 아이콘</span>
+                    <div className="bg-border h-px flex-1" />
+                  </div>
+                  <div className="grid grid-cols-4 gap-1.5">
+                    {customIcons.map((iconName) => {
+                      const Icon = getLucideIcon(iconName);
+                      if (!Icon) return null;
+                      return (
+                        <div key={`custom-${iconName}`} className="relative">
+                          <button
+                            type="button"
+                            onClick={() => handleSelectIcon(iconName, "lucide")}
+                            className={cn(
+                              "hover:bg-muted flex w-full flex-col items-center gap-1 rounded-md border p-2 transition-colors",
+                              selectedIcon === iconName && selectedIconType === "lucide"
+                                ? "border-primary ring-primary/30 bg-primary/5 ring-2"
+                                : "border-transparent",
+                            )}
+                          >
+                            <Icon className="h-6 w-6" />
+                            <span className="text-muted-foreground truncate text-[10px]">{iconName}</span>
+                          </button>
+                          <button
+                            type="button"
+                            onClick={() => {
+                              const next = customIcons.filter((n) => n !== iconName);
+                              onUpdateProperty("componentConfig.customIcons", next);
+                              if (selectedIcon === iconName) revertToDefaultIcon();
+                            }}
+                            className="bg-destructive text-destructive-foreground hover:bg-destructive/80 absolute -top-1 -right-1 rounded-full p-0.5"
+                          >
+                            <X className="h-3 w-3" />
+                          </button>
+                        </div>
+                      );
+                    })}
+                    {customSvgIcons.map((svgIcon) => (
+                      <div key={`svg-${svgIcon.name}`} className="relative">
+                        <button
+                          type="button"
+                          onClick={() => handleSelectIcon(svgIcon.name, "svg")}
+                          className={cn(
+                            "hover:bg-muted flex w-full flex-col items-center gap-1 rounded-md border p-2 transition-colors",
+                            selectedIcon === svgIcon.name && selectedIconType === "svg"
+                              ? "border-primary ring-primary/30 bg-primary/5 ring-2"
+                              : "border-transparent",
+                          )}
+                        >
+                          <span
+                            className="flex h-6 w-6 items-center justify-center [&>svg]:h-full [&>svg]:w-full"
+                            dangerouslySetInnerHTML={{
+                              __html: DOMPurify.sanitize(svgIcon.svg, { USE_PROFILES: { svg: true } }),
+                            }}
+                          />
+                          <span className="text-muted-foreground truncate text-[10px]">{svgIcon.name}</span>
+                        </button>
+                        <button
+                          type="button"
+                          onClick={() => {
+                            const next = customSvgIcons.filter((s) => s.name !== svgIcon.name);
+                            onUpdateProperty("componentConfig.customSvgIcons", next);
+                            if (selectedIcon === svgIcon.name) revertToDefaultIcon();
+                          }}
+                          className="bg-destructive text-destructive-foreground hover:bg-destructive/80 absolute -top-1 -right-1 rounded-full p-0.5"
+                        >
+                          <X className="h-3 w-3" />
+                        </button>
+                      </div>
+                    ))}
+                  </div>
+                </>
+              )}
+
+              {/* 커스텀 아이콘 추가 버튼 */}
+              <div className="mt-2 flex gap-2">
+                <Popover open={lucideSearchOpen} onOpenChange={setLucideSearchOpen}>
+                  <PopoverTrigger asChild>
+                    <Button variant="outline" size="sm" className="h-7 flex-1 text-xs">
+                      <Plus className="mr-1 h-3 w-3" />
+                      lucide 검색
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-64 p-0" align="start">
+                    <Command>
+                      <CommandInput
+                        placeholder="아이콘 이름 검색..."
+                        value={lucideSearchTerm}
+                        onValueChange={setLucideSearchTerm}
+                        className="text-xs"
+                      />
+                      <CommandList className="max-h-48">
+                        <CommandEmpty className="py-3 text-xs">아이콘을 찾을 수 없습니다.</CommandEmpty>
+                        <CommandGroup>
+                          {Object.keys(allLucideIcons)
+                            .filter((name) => name.toLowerCase().includes(lucideSearchTerm.toLowerCase()))
+                            .slice(0, 30)
+                            .map((iconName) => {
+                              const Icon = allLucideIcons[iconName as keyof typeof allLucideIcons];
+                              return (
+                                <CommandItem
+                                  key={iconName}
+                                  value={iconName}
+                                  onSelect={() => {
+                                    const next = [...customIcons];
+                                    if (!next.includes(iconName)) {
+                                      next.push(iconName);
+                                      onUpdateProperty("componentConfig.customIcons", next);
+                                      if (Icon) addToIconMap(iconName, Icon);
+                                    }
+                                    setLucideSearchOpen(false);
+                                    setLucideSearchTerm("");
+                                  }}
+                                  className="flex items-center gap-2 text-xs"
+                                >
+                                  {Icon ? <Icon className="h-4 w-4" /> : <span className="h-4 w-4" />}
+                                  {iconName}
+                                  {customIcons.includes(iconName) && <Check className="text-primary ml-auto h-3 w-3" />}
+                                </CommandItem>
+                              );
+                            })}
+                        </CommandGroup>
+                      </CommandList>
+                    </Command>
+                  </PopoverContent>
+                </Popover>
+
+                <Popover open={svgPasteOpen} onOpenChange={setSvgPasteOpen}>
+                  <PopoverTrigger asChild>
+                    <Button variant="outline" size="sm" className="h-7 flex-1 text-xs">
+                      <Plus className="mr-1 h-3 w-3" />
+                      SVG 붙여넣기
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-72 space-y-2 p-3" align="start">
+                    <Label className="text-xs">아이콘 이름</Label>
+                    <Input
+                      value={svgName}
+                      onChange={(e) => setSvgName(e.target.value)}
+                      placeholder="예: 회사로고"
+                      className="h-7 text-xs"
+                    />
+                    <Label className="text-xs">SVG 코드</Label>
+                    <textarea
+                      value={svgInput}
+                      onChange={(e) => {
+                        setSvgInput(e.target.value);
+                        setSvgError("");
+                      }}
+                      onPaste={(e) => {
+                        e.stopPropagation();
+                        const text = e.clipboardData.getData("text/plain");
+                        if (text) {
+                          e.preventDefault();
+                          setSvgInput(text);
+                          setSvgError("");
+                        }
+                      }}
+                      onKeyDown={(e) => e.stopPropagation()}
+                      placeholder={'<svg xmlns="http://www.w3.org/2000/svg" ...>...</svg>'}
+                      className="bg-background focus:ring-ring h-20 w-full rounded-md border px-2 py-1.5 text-xs focus:ring-2 focus:outline-none"
+                    />
+                    {svgInput && (
+                      <div className="bg-muted/50 flex items-center justify-center rounded border p-2">
+                        <span
+                          className="flex h-8 w-8 items-center justify-center [&>svg]:h-full [&>svg]:w-full"
+                          dangerouslySetInnerHTML={{
+                            __html: DOMPurify.sanitize(svgInput, { USE_PROFILES: { svg: true } }),
+                          }}
+                        />
+                      </div>
+                    )}
+                    {svgError && <p className="text-destructive text-xs">{svgError}</p>}
+                    <Button
+                      size="sm"
+                      className="h-7 w-full text-xs"
+                      onClick={() => {
+                        if (!svgName.trim()) {
+                          setSvgError("아이콘 이름을 입력하세요.");
+                          return;
+                        }
+                        if (!svgInput.trim().includes("<svg")) {
+                          setSvgError("유효한 SVG 코드가 아닙니다.");
+                          return;
+                        }
+                        const sanitized = DOMPurify.sanitize(svgInput, { USE_PROFILES: { svg: true } });
+                        let finalName = svgName.trim();
+                        const existingNames = new Set(customSvgIcons.map((s) => s.name));
+                        if (existingNames.has(finalName)) {
+                          let counter = 2;
+                          while (existingNames.has(`${svgName.trim()}(${counter})`)) counter++;
+                          finalName = `${svgName.trim()}(${counter})`;
+                        }
+                        const next = [...customSvgIcons, { name: finalName, svg: sanitized }];
+                        onUpdateProperty("componentConfig.customSvgIcons", next);
+                        setSvgInput("");
+                        setSvgName("");
+                        setSvgError("");
+                        setSvgPasteOpen(false);
+                      }}
+                    >
+                      추가
+                    </Button>
+                  </PopoverContent>
+                </Popover>
+              </div>
+            </div>
+          ) : (
+            <div>
+              <Label className="mb-1.5 block text-xs sm:text-sm">아이콘 선택</Label>
+              <div className="grid grid-cols-4 gap-1.5">
+                {currentActionIcons.map((iconName) => {
+                  const Icon = getLucideIcon(iconName);
+                  if (!Icon) return null;
+                  return (
+                    <button
+                      key={iconName}
+                      type="button"
+                      onClick={() => handleSelectIcon(iconName, "lucide")}
+                      className={cn(
+                        "hover:bg-muted flex flex-col items-center gap-1 rounded-md border p-2 transition-colors",
+                        selectedIcon === iconName && selectedIconType === "lucide"
+                          ? "border-primary ring-primary/30 bg-primary/5 ring-2"
+                          : "border-transparent",
+                      )}
+                    >
+                      <Icon className="h-6 w-6" />
+                      <span className="text-muted-foreground truncate text-[10px]">{iconName}</span>
+                    </button>
+                  );
+                })}
+              </div>
+
+              {/* 커스텀 아이콘 영역 */}
+              {(customIcons.length > 0 || customSvgIcons.length > 0) && (
+                <>
+                  <div className="my-2 flex items-center gap-2">
+                    <div className="bg-border h-px flex-1" />
+                    <span className="text-muted-foreground text-[10px]">커스텀 아이콘</span>
+                    <div className="bg-border h-px flex-1" />
+                  </div>
+                  <div className="grid grid-cols-4 gap-1.5">
+                    {customIcons.map((iconName) => {
+                      const Icon = getLucideIcon(iconName);
+                      if (!Icon) return null;
+                      return (
+                        <div key={`custom-${iconName}`} className="relative">
+                          <button
+                            type="button"
+                            onClick={() => handleSelectIcon(iconName, "lucide")}
+                            className={cn(
+                              "hover:bg-muted flex w-full flex-col items-center gap-1 rounded-md border p-2 transition-colors",
+                              selectedIcon === iconName && selectedIconType === "lucide"
+                                ? "border-primary ring-primary/30 bg-primary/5 ring-2"
+                                : "border-transparent",
+                            )}
+                          >
+                            <Icon className="h-6 w-6" />
+                            <span className="text-muted-foreground truncate text-[10px]">{iconName}</span>
+                          </button>
+                          <button
+                            type="button"
+                            onClick={() => {
+                              const next = customIcons.filter((n) => n !== iconName);
+                              onUpdateProperty("componentConfig.customIcons", next);
+                              if (selectedIcon === iconName) revertToDefaultIcon();
+                            }}
+                            className="bg-destructive text-destructive-foreground hover:bg-destructive/80 absolute -top-1 -right-1 rounded-full p-0.5"
+                          >
+                            <X className="h-3 w-3" />
+                          </button>
+                        </div>
+                      );
+                    })}
+                    {customSvgIcons.map((svgIcon) => (
+                      <div key={`svg-${svgIcon.name}`} className="relative">
+                        <button
+                          type="button"
+                          onClick={() => handleSelectIcon(svgIcon.name, "svg")}
+                          className={cn(
+                            "hover:bg-muted flex w-full flex-col items-center gap-1 rounded-md border p-2 transition-colors",
+                            selectedIcon === svgIcon.name && selectedIconType === "svg"
+                              ? "border-primary ring-primary/30 bg-primary/5 ring-2"
+                              : "border-transparent",
+                          )}
+                        >
+                          <span
+                            className="flex h-6 w-6 items-center justify-center [&>svg]:h-full [&>svg]:w-full"
+                            dangerouslySetInnerHTML={{ __html: svgIcon.svg }}
+                          />
+                          <span className="text-muted-foreground truncate text-[10px]">{svgIcon.name}</span>
+                        </button>
+                        <button
+                          type="button"
+                          onClick={() => {
+                            const next = customSvgIcons.filter((s) => s.name !== svgIcon.name);
+                            onUpdateProperty("componentConfig.customSvgIcons", next);
+                            if (selectedIcon === svgIcon.name) revertToDefaultIcon();
+                          }}
+                          className="bg-destructive text-destructive-foreground hover:bg-destructive/80 absolute -top-1 -right-1 rounded-full p-0.5"
+                        >
+                          <X className="h-3 w-3" />
+                        </button>
+                      </div>
+                    ))}
+                  </div>
+                </>
+              )}
+
+              {/* 커스텀 아이콘 추가 버튼 */}
+              <div className="mt-2 flex gap-2">
+                <Popover open={lucideSearchOpen} onOpenChange={setLucideSearchOpen}>
+                  <PopoverTrigger asChild>
+                    <Button variant="outline" size="sm" className="h-7 flex-1 text-xs">
+                      <Plus className="mr-1 h-3 w-3" />
+                      lucide 검색
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-64 p-0" align="start">
+                    <Command>
+                      <CommandInput
+                        placeholder="아이콘 이름 검색..."
+                        value={lucideSearchTerm}
+                        onValueChange={setLucideSearchTerm}
+                        className="text-xs"
+                      />
+                      <CommandList className="max-h-48">
+                        <CommandEmpty className="py-3 text-xs">아이콘을 찾을 수 없습니다.</CommandEmpty>
+                        <CommandGroup>
+                          {Object.keys(allLucideIcons)
+                            .filter((name) => name.toLowerCase().includes(lucideSearchTerm.toLowerCase()))
+                            .slice(0, 30)
+                            .map((iconName) => {
+                              const Icon = allLucideIcons[iconName as keyof typeof allLucideIcons];
+                              return (
+                                <CommandItem
+                                  key={iconName}
+                                  value={iconName}
+                                  onSelect={() => {
+                                    const next = [...customIcons];
+                                    if (!next.includes(iconName)) {
+                                      next.push(iconName);
+                                      onUpdateProperty("componentConfig.customIcons", next);
+                                      // iconMap에 동적 추가 (렌더링용)
+                                      if (Icon) addToIconMap(iconName, Icon);
+                                    }
+                                    setLucideSearchOpen(false);
+                                    setLucideSearchTerm("");
+                                  }}
+                                  className="flex items-center gap-2 text-xs"
+                                >
+                                  {Icon ? <Icon className="h-4 w-4" /> : <span className="h-4 w-4" />}
+                                  {iconName}
+                                  {customIcons.includes(iconName) && <Check className="text-primary ml-auto h-3 w-3" />}
+                                </CommandItem>
+                              );
+                            })}
+                        </CommandGroup>
+                      </CommandList>
+                    </Command>
+                  </PopoverContent>
+                </Popover>
+
+                <Popover open={svgPasteOpen} onOpenChange={setSvgPasteOpen}>
+                  <PopoverTrigger asChild>
+                    <Button variant="outline" size="sm" className="h-7 flex-1 text-xs">
+                      <Plus className="mr-1 h-3 w-3" />
+                      SVG 붙여넣기
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-72 space-y-2 p-3" align="start">
+                    <Label className="text-xs">아이콘 이름</Label>
+                    <Input
+                      value={svgName}
+                      onChange={(e) => setSvgName(e.target.value)}
+                      placeholder="예: 회사로고"
+                      className="h-7 text-xs"
+                    />
+                    <Label className="text-xs">SVG 코드</Label>
+                    <textarea
+                      value={svgInput}
+                      onChange={(e) => {
+                        setSvgInput(e.target.value);
+                        setSvgError("");
+                      }}
+                      onPaste={(e) => {
+                        e.stopPropagation();
+                        const text = e.clipboardData.getData("text/plain");
+                        if (text) {
+                          e.preventDefault();
+                          setSvgInput(text);
+                          setSvgError("");
+                        }
+                      }}
+                      onKeyDown={(e) => e.stopPropagation()}
+                      placeholder={'<svg xmlns="http://www.w3.org/2000/svg" ...>...</svg>'}
+                      className="bg-background focus:ring-ring h-20 w-full rounded-md border px-2 py-1.5 text-xs focus:ring-2 focus:outline-none"
+                    />
+                    {svgInput && (
+                      <div className="bg-muted/50 flex items-center justify-center rounded border p-2">
+                        <span
+                          className="flex h-8 w-8 items-center justify-center [&>svg]:h-full [&>svg]:w-full"
+                          dangerouslySetInnerHTML={{
+                            __html: DOMPurify.sanitize(svgInput, { USE_PROFILES: { svg: true } }),
+                          }}
+                        />
+                      </div>
+                    )}
+                    {svgError && <p className="text-destructive text-xs">{svgError}</p>}
+                    <Button
+                      size="sm"
+                      className="h-7 w-full text-xs"
+                      onClick={() => {
+                        if (!svgName.trim()) {
+                          setSvgError("아이콘 이름을 입력하세요.");
+                          return;
+                        }
+                        if (!svgInput.trim().includes("<svg")) {
+                          setSvgError("유효한 SVG 코드가 아닙니다.");
+                          return;
+                        }
+                        const sanitized = DOMPurify.sanitize(svgInput, { USE_PROFILES: { svg: true } });
+                        let finalName = svgName.trim();
+                        const existingNames = new Set(customSvgIcons.map((s) => s.name));
+                        if (existingNames.has(finalName)) {
+                          let counter = 2;
+                          while (existingNames.has(`${svgName.trim()}(${counter})`)) counter++;
+                          finalName = `${svgName.trim()}(${counter})`;
+                        }
+                        const next = [...customSvgIcons, { name: finalName, svg: sanitized }];
+                        onUpdateProperty("componentConfig.customSvgIcons", next);
+                        setSvgInput("");
+                        setSvgName("");
+                        setSvgError("");
+                        setSvgPasteOpen(false);
+                      }}
+                    >
+                      추가
+                    </Button>
+                  </PopoverContent>
+                </Popover>
+              </div>
+            </div>
+          )}
+
+          {/* 아이콘 크기 비율 */}
+          <div>
+            <Label className="mb-1.5 block text-xs sm:text-sm">아이콘 크기 비율</Label>
+            <div className="flex rounded-md border">
+              {Object.keys(iconSizePresets).map((preset) => (
+                <button
+                  key={preset}
+                  type="button"
+                  onClick={() => handleIconSizePreset(preset)}
+                  className={cn(
+                    "flex-1 px-1 py-1 text-xs font-medium whitespace-nowrap transition-colors first:rounded-l-md last:rounded-r-md",
+                    iconSize === preset ? "bg-primary text-primary-foreground" : "hover:bg-muted text-muted-foreground",
+                  )}
+                >
+                  {preset}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* 텍스트 위치 (icon-text 모드 전용) */}
+          {displayMode === "icon-text" && (
+            <div>
+              <Label className="mb-1.5 block text-xs sm:text-sm">텍스트 위치</Label>
+              <div className="flex rounded-md border">
+                {(
+                  [
+                    { value: "left", label: "왼쪽" },
+                    { value: "right", label: "오른쪽" },
+                    { value: "top", label: "위쪽" },
+                    { value: "bottom", label: "아래쪽" },
+                  ] as const
+                ).map((pos) => (
+                  <button
+                    key={pos.value}
+                    type="button"
+                    onClick={() => {
+                      setIconTextPosition(pos.value);
+                      onUpdateProperty("componentConfig.iconTextPosition", pos.value);
+                    }}
+                    className={cn(
+                      "flex-1 px-2 py-1 text-xs font-medium transition-colors first:rounded-l-md last:rounded-r-md",
+                      iconTextPosition === pos.value
+                        ? "bg-primary text-primary-foreground"
+                        : "hover:bg-muted text-muted-foreground",
+                    )}
+                  >
+                    {pos.label}
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* 아이콘-텍스트 간격 (icon-text 모드 전용) */}
+          {displayMode === "icon-text" && (
+            <div>
+              <Label className="mb-1.5 block text-xs sm:text-sm">아이콘-텍스트 간격</Label>
+              <div className="flex items-center gap-2">
+                <input
+                  type="range"
+                  min={0}
+                  max={32}
+                  step={1}
+                  value={Math.min(iconGap, 32)}
+                  onChange={(e) => {
+                    const val = Number(e.target.value);
+                    setIconGap(val);
+                    onUpdateProperty("componentConfig.iconGap", val);
+                  }}
+                  className="accent-primary h-1.5 flex-1 cursor-pointer"
+                />
+                <div className="flex items-center gap-1">
+                  <Input
+                    type="number"
+                    min={0}
+                    value={iconGap}
+                    onChange={(e) => {
+                      const val = Math.max(0, Number(e.target.value) || 0);
+                      setIconGap(val);
+                      onUpdateProperty("componentConfig.iconGap", val);
+                    }}
+                    className="h-7 w-14 text-center text-xs"
+                  />
+                  <span className="text-muted-foreground text-xs">px</span>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* 아이콘 색상 */}
+          <div>
+            <Label className="mb-1.5 block text-xs sm:text-sm">아이콘 색상</Label>
+            <div className="flex items-center gap-2">
+              <ColorPickerWithTransparent
+                value={iconColor || undefined}
+                onChange={handleIconColorChange}
+                placeholder="텍스트 색상 상속"
+                className="flex-1"
+              />
+              {iconColor && (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-7 shrink-0 text-xs"
+                  onClick={() => handleIconColorChange(undefined)}
+                >
+                  <RotateCcw className="mr-1 h-3 w-3" />
+                  텍스트 색상과 동일
+                </Button>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+
       {/* 모달 열기 액션 설정 */}
       {localInputs.actionType === "modal" && (
         <div className="bg-muted/50 mt-4 space-y-4 rounded-lg border p-4">
@@ -1046,7 +1780,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
               {modalActionSourceTable &&
                 modalActionTargetTable &&
                 modalActionSourceTable === modalActionTargetTable && (
-                  <div className="rounded-md bg-green-50 p-2 text-xs text-green-700 dark:bg-green-950/30 dark:text-green-400">
+                  <div className="rounded-md bg-emerald-50 p-2 text-xs text-emerald-700 dark:bg-emerald-950/30 dark:text-emerald-400">
                     동일한 테이블입니다. 컬럼명이 같은 필드는 자동으로 매핑됩니다.
                   </div>
                 )}
@@ -1314,9 +2048,9 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                       {/* 블록 타입 표시 */}
                       <div className="mt-1 flex-shrink-0">
                         {block.type === "text" ? (
-                          <Type className="h-4 w-4 text-blue-500" />
+                          <Type className="h-4 w-4 text-primary" />
                         ) : (
-                          <Database className="h-4 w-4 text-green-500" />
+                          <Database className="h-4 w-4 text-emerald-500" />
                         )}
                       </div>
 
@@ -1498,7 +2232,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                         variant="ghost"
                         size="sm"
                         onClick={() => removeBlock(block.id)}
-                        className="h-7 w-7 p-0 text-red-500"
+                        className="h-7 w-7 p-0 text-destructive"
                       >
                         <X className="h-4 w-4" />
                       </Button>
@@ -2072,7 +2806,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
 
       {/* 복사 액션 설정 */}
       {localInputs.actionType === "copy" && (
-        <div className="mt-4 space-y-4 rounded-lg border bg-blue-50 p-4">
+        <div className="mt-4 space-y-4 rounded-lg border bg-primary/10 p-4">
           <h4 className="text-foreground text-sm font-medium">복사 설정 (품목코드 자동 초기화)</h4>
 
           <div>
@@ -2513,8 +3247,8 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
             />
           </div>
 
-          <div className="rounded-md bg-blue-50 p-3 dark:bg-blue-950">
-            <p className="text-xs text-blue-900 dark:text-blue-100">
+          <div className="rounded-md bg-primary/10 p-3 dark:bg-primary/15">
+            <p className="text-xs text-primary dark:text-primary/60">
               <strong>사용 방법:</strong>
               <br />
               1. 테이블에서 병합할 두 개의 행을 선택합니다
@@ -2785,7 +3519,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
           </div>
 
           {config.action?.updateWithTracking && (
-            <div className="mt-3 space-y-3 rounded-md bg-green-50 p-3 dark:bg-green-950">
+            <div className="mt-3 space-y-3 rounded-md bg-emerald-50 p-3 dark:bg-emerald-950">
               <div>
                 <Label>
                   추적 모드 <span className="text-destructive">*</span>
@@ -2825,7 +3559,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                 </div>
               )}
 
-              <p className="text-[10px] text-green-700 dark:text-green-300">
+              <p className="text-[10px] text-emerald-700 dark:text-emerald-300">
                 {config.action?.updateTrackingMode === "start"
                   ? "버튼 클릭 시 연속 위치 추적이 시작되고, vehicle_location_history 테이블에 경로가 저장됩니다."
                   : "버튼 클릭 시 진행 중인 위치 추적이 종료됩니다."}
@@ -2851,7 +3585,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
             </div>
 
             {config.action?.requireLocationFields && (
-              <div className="mt-3 space-y-2 rounded-md bg-orange-50 p-3 dark:bg-orange-950">
+              <div className="mt-3 space-y-2 rounded-md bg-amber-50 p-3 dark:bg-orange-950">
                 <div className="grid grid-cols-2 gap-2">
                   <div>
                     <Label>출발지 필드명</Label>
@@ -2962,8 +3696,8 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
             )}
           </div>
 
-          <div className="rounded-md bg-blue-50 p-3 dark:bg-blue-950">
-            <p className="text-xs text-blue-900 dark:text-blue-100">
+          <div className="rounded-md bg-primary/10 p-3 dark:bg-primary/15">
+            <p className="text-xs text-primary dark:text-primary/60">
               <strong>사용 예시:</strong>
               <br />
               - 운행 시작: status를 &quot;active&quot;로 + 연속 추적 시작
@@ -3041,7 +3775,8 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
               </SelectContent>
             </Select>
             <p className="text-muted-foreground mt-1 text-xs">
-              레이어별로 다른 테이블이 있을 경우 "자동 탐색"을 선택하면 현재 활성화된 레이어의 테이블을 자동으로 사용합니다
+              레이어별로 다른 테이블이 있을 경우 "자동 탐색"을 선택하면 현재 활성화된 레이어의 테이블을 자동으로
+              사용합니다
             </p>
           </div>
 
@@ -3322,11 +4057,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                 </Label>
                 <Popover>
                   <PopoverTrigger asChild>
-                    <Button
-                      variant="outline"
-                      role="combobox"
-                      className="h-8 w-full justify-between text-xs"
-                    >
+                    <Button variant="outline" role="combobox" className="h-8 w-full justify-between text-xs">
                       {(() => {
                         const fieldName = config.action?.dataTransfer?.additionalSources?.[0]?.fieldName;
                         if (!fieldName) return "필드 선택 (비워두면 전체 데이터)";
@@ -3357,7 +4088,14 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                             }}
                             className="text-xs"
                           >
-                            <Check className={cn("mr-2 h-3 w-3", !config.action?.dataTransfer?.additionalSources?.[0]?.fieldName ? "opacity-100" : "opacity-0")} />
+                            <Check
+                              className={cn(
+                                "mr-2 h-3 w-3",
+                                !config.action?.dataTransfer?.additionalSources?.[0]?.fieldName
+                                  ? "opacity-100"
+                                  : "opacity-0",
+                              )}
+                            />
                             <span className="text-muted-foreground">선택 안 함 (전체 데이터 병합)</span>
                           </CommandItem>
                           {(mappingTargetColumns.length > 0 ? mappingTargetColumns : currentTableColumns).map((col) => (
@@ -3376,7 +4114,14 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                               }}
                               className="text-xs"
                             >
-                              <Check className={cn("mr-2 h-3 w-3", config.action?.dataTransfer?.additionalSources?.[0]?.fieldName === col.name ? "opacity-100" : "opacity-0")} />
+                              <Check
+                                className={cn(
+                                  "mr-2 h-3 w-3",
+                                  config.action?.dataTransfer?.additionalSources?.[0]?.fieldName === col.name
+                                    ? "opacity-100"
+                                    : "opacity-0",
+                                )}
+                              />
                               <span className="font-medium">{col.label || col.name}</span>
                               {col.label && col.label !== col.name && (
                                 <span className="text-muted-foreground ml-1 text-[10px]">({col.name})</span>
@@ -3466,7 +4211,8 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                 </Button>
               </div>
               <p className="text-muted-foreground text-[10px]">
-                여러 소스 테이블에서 데이터를 전달할 때, 각 테이블별로 매핑 규칙을 설정합니다. 런타임에 소스 테이블을 자동 감지합니다.
+                여러 소스 테이블에서 데이터를 전달할 때, 각 테이블별로 매핑 규칙을 설정합니다. 런타임에 소스 테이블을
+                자동 감지합니다.
               </p>
 
               {!config.action?.dataTransfer?.targetTable ? (
@@ -3475,9 +4221,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                 </div>
               ) : !(config.action?.dataTransfer?.multiTableMappings || []).length ? (
                 <div className="rounded-md border border-dashed p-3 text-center">
-                  <p className="text-muted-foreground text-xs">
-                    매핑 그룹이 없습니다. 소스 테이블을 추가하세요.
-                  </p>
+                  <p className="text-muted-foreground text-xs">매핑 그룹이 없습니다. 소스 테이블을 추가하세요.</p>
                 </div>
               ) : (
                 <div className="space-y-2">
@@ -3546,7 +4290,8 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                             <PopoverTrigger asChild>
                               <Button variant="outline" role="combobox" className="h-8 w-full justify-between text-xs">
                                 {activeSourceTable
-                                  ? availableTables.find((t) => t.name === activeSourceTable)?.label || activeSourceTable
+                                  ? availableTables.find((t) => t.name === activeSourceTable)?.label ||
+                                    activeSourceTable
                                   : "소스 테이블 선택"}
                                 <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
                               </Button>
@@ -3555,7 +4300,9 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                               <Command>
                                 <CommandInput placeholder="테이블 검색..." className="h-8 text-xs" />
                                 <CommandList>
-                                  <CommandEmpty className="py-2 text-center text-xs">테이블을 찾을 수 없습니다</CommandEmpty>
+                                  <CommandEmpty className="py-2 text-center text-xs">
+                                    테이블을 찾을 수 없습니다
+                                  </CommandEmpty>
                                   <CommandGroup>
                                     {availableTables.map((table) => (
                                       <CommandItem
@@ -3597,7 +4344,10 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                               size="sm"
                               className="h-5 text-[10px]"
                               onClick={() => {
-                                updateGroupField("mappingRules", [...activeRules, { sourceField: "", targetField: "" }]);
+                                updateGroupField("mappingRules", [
+                                  ...activeRules,
+                                  { sourceField: "", targetField: "" },
+                                ]);
                               }}
                               disabled={!activeSourceTable}
                             >
@@ -3624,9 +4374,14 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                                       }
                                     >
                                       <PopoverTrigger asChild>
-                                        <Button variant="outline" role="combobox" className="h-7 w-full justify-between text-xs">
+                                        <Button
+                                          variant="outline"
+                                          role="combobox"
+                                          className="h-7 w-full justify-between text-xs"
+                                        >
                                           {rule.sourceField
-                                            ? activeSourceColumns.find((c) => c.name === rule.sourceField)?.label || rule.sourceField
+                                            ? activeSourceColumns.find((c) => c.name === rule.sourceField)?.label ||
+                                              rule.sourceField
                                             : "소스 필드"}
                                           <ChevronsUpDown className="ml-1 h-3 w-3 shrink-0 opacity-50" />
                                         </Button>
@@ -3645,13 +4400,23 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                                                     const newRules = [...activeRules];
                                                     newRules[rIdx] = { ...newRules[rIdx], sourceField: col.name };
                                                     updateGroupField("mappingRules", newRules);
-                                                    setMappingSourcePopoverOpen((prev) => ({ ...prev, [popoverKeyS]: false }));
+                                                    setMappingSourcePopoverOpen((prev) => ({
+                                                      ...prev,
+                                                      [popoverKeyS]: false,
+                                                    }));
                                                   }}
                                                   className="text-xs"
                                                 >
-                                                  <Check className={cn("mr-2 h-3 w-3", rule.sourceField === col.name ? "opacity-100" : "opacity-0")} />
+                                                  <Check
+                                                    className={cn(
+                                                      "mr-2 h-3 w-3",
+                                                      rule.sourceField === col.name ? "opacity-100" : "opacity-0",
+                                                    )}
+                                                  />
                                                   <span>{col.label}</span>
-                                                  {col.label !== col.name && <span className="text-muted-foreground ml-1">({col.name})</span>}
+                                                  {col.label !== col.name && (
+                                                    <span className="text-muted-foreground ml-1">({col.name})</span>
+                                                  )}
                                                 </CommandItem>
                                               ))}
                                             </CommandGroup>
@@ -3671,9 +4436,14 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                                       }
                                     >
                                       <PopoverTrigger asChild>
-                                        <Button variant="outline" role="combobox" className="h-7 w-full justify-between text-xs">
+                                        <Button
+                                          variant="outline"
+                                          role="combobox"
+                                          className="h-7 w-full justify-between text-xs"
+                                        >
                                           {rule.targetField
-                                            ? mappingTargetColumns.find((c) => c.name === rule.targetField)?.label || rule.targetField
+                                            ? mappingTargetColumns.find((c) => c.name === rule.targetField)?.label ||
+                                              rule.targetField
                                             : "타겟 필드"}
                                           <ChevronsUpDown className="ml-1 h-3 w-3 shrink-0 opacity-50" />
                                         </Button>
@@ -3692,13 +4462,23 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                                                     const newRules = [...activeRules];
                                                     newRules[rIdx] = { ...newRules[rIdx], targetField: col.name };
                                                     updateGroupField("mappingRules", newRules);
-                                                    setMappingTargetPopoverOpen((prev) => ({ ...prev, [popoverKeyT]: false }));
+                                                    setMappingTargetPopoverOpen((prev) => ({
+                                                      ...prev,
+                                                      [popoverKeyT]: false,
+                                                    }));
                                                   }}
                                                   className="text-xs"
                                                 >
-                                                  <Check className={cn("mr-2 h-3 w-3", rule.targetField === col.name ? "opacity-100" : "opacity-0")} />
+                                                  <Check
+                                                    className={cn(
+                                                      "mr-2 h-3 w-3",
+                                                      rule.targetField === col.name ? "opacity-100" : "opacity-0",
+                                                    )}
+                                                  />
                                                   <span>{col.label}</span>
-                                                  {col.label !== col.name && <span className="text-muted-foreground ml-1">({col.name})</span>}
+                                                  {col.label !== col.name && (
+                                                    <span className="text-muted-foreground ml-1">({col.name})</span>
+                                                  )}
                                                 </CommandItem>
                                               ))}
                                             </CommandGroup>
@@ -3734,8 +4514,8 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
             </div>
           </div>
 
-          <div className="rounded-md bg-blue-50 p-3 dark:bg-blue-950">
-            <p className="text-xs text-blue-900 dark:text-blue-100">
+          <div className="rounded-md bg-primary/10 p-3 dark:bg-primary/15">
+            <p className="text-xs text-primary dark:text-primary/60">
               <strong>사용 방법:</strong>
               <br />
               1. 소스 컴포넌트에서 데이터를 선택합니다
@@ -3773,7 +4553,10 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
             <Select
               value={String(component.componentConfig?.action?.approvalDefinitionId || "")}
               onValueChange={(value) => {
-                onUpdateProperty("componentConfig.action.approvalDefinitionId", value === "none" ? null : Number(value));
+                onUpdateProperty(
+                  "componentConfig.action.approvalDefinitionId",
+                  value === "none" ? null : Number(value),
+                );
               }}
             >
               <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
@@ -3824,9 +4607,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
               onChange={(e) => onUpdateProperty("componentConfig.action.approvalRecordIdField", e.target.value)}
               className="h-8 text-xs sm:h-10 sm:text-sm"
             />
-            <p className="text-muted-foreground mt-1 text-[10px] sm:text-xs">
-              현재 선택된 레코드의 PK 컬럼명
-            </p>
+            <p className="text-muted-foreground mt-1 text-[10px] sm:text-xs">현재 선택된 레코드의 PK 컬럼명</p>
           </div>
         </div>
       )}
@@ -3918,8 +4699,8 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
                 />
               </div>
 
-              <div className="rounded-md bg-blue-50 p-2 dark:bg-blue-950/20">
-                <p className="text-xs text-blue-800 dark:text-blue-200">
+              <div className="rounded-md bg-primary/10 p-2 dark:bg-primary/10">
+                <p className="text-xs text-primary dark:text-primary/70">
                   <strong>동작 방식:</strong> 테이블에서 선택된 데이터를 기반으로 스케줄을 자동 생성합니다. 생성 전
                   미리보기 확인 다이얼로그가 표시됩니다.
                 </p>
@@ -3990,7 +4771,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
             </div>
 
             {!(component.componentConfig?.action?.allowMultiRowSelection ?? true) && (
-              <div className="rounded-md bg-yellow-50 p-2 dark:bg-yellow-950/20">
+              <div className="rounded-md bg-amber-50 p-2 dark:bg-yellow-950/20">
                 <p className="text-xs text-yellow-800 dark:text-yellow-200">
                   정확히 1개의 행만 선택되어야 버튼이 활성화됩니다.
                 </p>
@@ -4215,7 +4996,7 @@ const MasterDetailExcelUploadConfig: React.FC<{
       <h5 className="text-muted-foreground text-xs font-medium">마스터-디테일 설정 (자동 감지)</h5>
 
       {/* 자동 감지된 정보 표시 */}
-      <div className="rounded-md bg-gray-50 p-3 dark:bg-gray-900">
+      <div className="rounded-md bg-muted p-3 dark:bg-foreground">
         <p className="mb-2 text-xs font-medium">분할 패널에서 감지된 정보:</p>
         <div className="grid grid-cols-2 gap-2 text-xs">
           <div>
@@ -4234,11 +5015,11 @@ const MasterDetailExcelUploadConfig: React.FC<{
           <div className="mt-2 grid grid-cols-2 gap-2 text-xs">
             <div>
               <span className="text-muted-foreground">마스터 키:</span>{" "}
-              <span className="font-medium text-green-600">{relationInfo.masterKeyColumn}</span>
+              <span className="font-medium text-emerald-600">{relationInfo.masterKeyColumn}</span>
             </div>
             <div>
               <span className="text-muted-foreground">디테일 FK:</span>{" "}
-              <span className="font-medium text-green-600">{relationInfo.detailFkColumn}</span>
+              <span className="font-medium text-emerald-600">{relationInfo.detailFkColumn}</span>
             </div>
           </div>
         ) : (
@@ -4251,8 +5032,8 @@ const MasterDetailExcelUploadConfig: React.FC<{
       {/* 마스터 키 자동 생성 안내 */}
       {relationInfo && (
         <p className="text-muted-foreground border-t pt-2 text-xs">
-          마스터 테이블의 <strong>{relationInfo.masterKeyColumn}</strong> 값은 테이블 타입 관리에서 설정된 채번 규칙으로 자동
-          생성됩니다.
+          마스터 테이블의 <strong>{relationInfo.masterKeyColumn}</strong> 값은 테이블 타입 관리에서 설정된 채번 규칙으로
+          자동 생성됩니다.
         </p>
       )}
 
@@ -4293,12 +5074,12 @@ const MasterDetailExcelUploadConfig: React.FC<{
                         }
                         updateMasterDetailConfig({ masterSelectFields: newFields });
                       }}
-                      className="h-4 w-4 rounded border-gray-300"
+                      className="h-4 w-4 rounded border-input"
                     />
                     <label htmlFor={`master-field-${col.columnName}`} className="flex-1 cursor-pointer text-xs">
                       {col.columnLabel}
                       <span className="text-muted-foreground ml-1">({col.columnName})</span>
-                      {col.inputType === "entity" && <span className="ml-1 text-blue-500">[엔티티]</span>}
+                      {col.inputType === "entity" && <span className="ml-1 text-primary">[엔티티]</span>}
                     </label>
                   </div>
                 );
@@ -4468,7 +5249,7 @@ const ExcelAfterUploadControlConfig: React.FC<{
                 <Button
                   variant="ghost"
                   size="sm"
-                  className="h-5 w-5 p-0 text-red-500"
+                  className="h-5 w-5 p-0 text-destructive"
                   onClick={() => removeFlow(selected.flowId)}
                 >
                   <X className="h-3 w-3" />
@@ -4690,4 +5471,3 @@ const ExcelUploadConfigSection: React.FC<{
     </div>
   );
 };
-
diff --git a/frontend/components/screen/config-panels/ButtonDataflowConfigPanel.tsx b/frontend/components/screen/config-panels/ButtonDataflowConfigPanel.tsx
index e3226a10..40434c77 100644
--- a/frontend/components/screen/config-panels/ButtonDataflowConfigPanel.tsx
+++ b/frontend/components/screen/config-panels/ButtonDataflowConfigPanel.tsx
@@ -296,7 +296,7 @@ export const ButtonDataflowConfigPanel: React.FC<ButtonDataflowConfigPanelProps>
                 </SelectItem>
               </SelectContent>
             </Select>
-            <p className="text-xs text-gray-500">
+            <p className="text-xs text-muted-foreground">
               {dataflowConfig.controlDataSource === "form" && "현재 폼의 입력값으로 조건을 체크합니다"}
               {dataflowConfig.controlDataSource === "table-selection" && "테이블에서 선택된 항목의 데이터로 조건을 체크합니다"}
               {dataflowConfig.controlDataSource === "table-all" && "테이블의 모든 데이터(페이징 무관)로 조건을 체크합니다"}
@@ -313,7 +313,7 @@ export const ButtonDataflowConfigPanel: React.FC<ButtonDataflowConfigPanelProps>
       {config.enableDataflowControl && (
         <div className="space-y-6 border-l-2 border-primary/20 pl-4">
           {/* 현재 액션 정보 (간소화) */}
-          <div className="rounded bg-gray-100 p-2">
+          <div className="rounded bg-muted p-2">
             <p className="text-xs text-muted-foreground">
               <strong>{getActionDisplayName(config.actionType || "save")}</strong> 액션에 제어관리 연결
             </p>
@@ -362,8 +362,8 @@ export const ButtonDataflowConfigPanel: React.FC<ButtonDataflowConfigPanelProps>
 
           {/* 간편 모드 설정 */}
           {(dataflowConfig.controlMode === "simple" || !dataflowConfig.controlMode) && (
-            <div className="space-y-3 rounded border bg-gray-50 p-3">
-              <h4 className="text-sm font-medium text-gray-700">관계 선택</h4>
+            <div className="space-y-3 rounded border bg-muted p-3">
+              <h4 className="text-sm font-medium text-foreground">관계 선택</h4>
 
               {/* 관계 선택 */}
               <div>
@@ -393,9 +393,9 @@ export const ButtonDataflowConfigPanel: React.FC<ButtonDataflowConfigPanelProps>
                   <PopoverContent className="w-80 p-0">
                     <div className="p-2">
                       {diagramsLoading ? (
-                        <div className="p-4 text-center text-sm text-gray-500">관계 목록을 불러오는 중...</div>
+                        <div className="p-4 text-center text-sm text-muted-foreground">관계 목록을 불러오는 중...</div>
                       ) : diagrams.length === 0 ? (
-                        <div className="p-4 text-center text-sm text-gray-500">사용 가능한 관계가 없습니다</div>
+                        <div className="p-4 text-center text-sm text-muted-foreground">사용 가능한 관계가 없습니다</div>
                       ) : (
                         <div className="max-h-60 overflow-y-auto">
                           {diagrams.map((diagram) => (
@@ -419,7 +419,7 @@ export const ButtonDataflowConfigPanel: React.FC<ButtonDataflowConfigPanelProps>
                                 />
                                 <div className="flex-1 text-left">
                                   <div className="font-medium">{diagram.name}</div>
-                                  <div className="text-xs text-gray-500">{diagram.relationshipCount}개 관계</div>
+                                  <div className="text-xs text-muted-foreground">{diagram.relationshipCount}개 관계</div>
                                 </div>
                               </div>
                             </Button>
@@ -460,9 +460,9 @@ export const ButtonDataflowConfigPanel: React.FC<ButtonDataflowConfigPanelProps>
                     <PopoverContent className="w-96 p-0">
                       <div className="p-2">
                         {relationshipsLoading ? (
-                          <div className="p-4 text-center text-sm text-gray-500">관계 목록을 불러오는 중...</div>
+                          <div className="p-4 text-center text-sm text-muted-foreground">관계 목록을 불러오는 중...</div>
                         ) : relationships.length === 0 ? (
-                          <div className="p-4 text-center text-sm text-gray-500">
+                          <div className="p-4 text-center text-sm text-muted-foreground">
                             이 관계에는 사용 가능한 관계가 없습니다
                           </div>
                         ) : (
@@ -489,7 +489,7 @@ export const ButtonDataflowConfigPanel: React.FC<ButtonDataflowConfigPanelProps>
                                   />
                                   <div className="flex-1 text-left">
                                     <div className="font-medium">{relationship.name}</div>
-                                    <div className="text-xs text-gray-500">
+                                    <div className="text-xs text-muted-foreground">
                                       {relationship.sourceTable} → {relationship.targetTable}
                                     </div>
                                     <Badge variant="outline" className="mt-1 text-xs">
@@ -510,7 +510,7 @@ export const ButtonDataflowConfigPanel: React.FC<ButtonDataflowConfigPanelProps>
               {/* 선택된 관계 간단 정보 */}
               {selectedRelationship && (
                 <div className="mt-2 rounded border bg-accent p-2">
-                  <p className="text-xs text-blue-700">
+                  <p className="text-xs text-primary">
                     <strong>{selectedRelationship.sourceTable}</strong> →{" "}
                     <strong>{selectedRelationship.targetTable}</strong>
                     {previewData && (
diff --git a/frontend/components/screen/config-panels/CodeConfigPanel.tsx b/frontend/components/screen/config-panels/CodeConfigPanel.tsx
index 7e43f844..d41a4f8b 100644
--- a/frontend/components/screen/config-panels/CodeConfigPanel.tsx
+++ b/frontend/components/screen/config-panels/CodeConfigPanel.tsx
@@ -320,7 +320,7 @@ export const CodeConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
               <button
                 type="button"
                 onClick={setSampleCode}
-                className="text-xs text-primary underline hover:text-blue-800"
+                className="text-xs text-primary underline hover:text-primary"
               >
                 샘플 코드 사용
               </button>
@@ -375,25 +375,25 @@ export const CodeConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
           <div className="bg-muted/50 rounded-md border p-3">
             <div
               className={`rounded border font-mono text-xs ${
-                localConfig.theme === "dark" ? "bg-gray-900 text-gray-100" : "bg-white text-gray-900"
+                localConfig.theme === "dark" ? "bg-foreground text-muted-foreground/20" : "bg-white text-foreground"
               }`}
               style={{ height: `${Math.min(localConfig.height || 300, 200)}px` }}
             >
-              <div className="flex items-center border-b bg-gray-50 px-3 py-1 text-gray-700">
+              <div className="flex items-center border-b bg-muted px-3 py-1 text-foreground">
                 <Code className="mr-2 h-3 w-3" />
                 <span className="text-xs">
                   {supportedLanguages.find((l) => l.value === localConfig.language)?.label || "JavaScript"}
                 </span>
-                {localConfig.showLineNumbers && <span className="ml-auto text-xs text-gray-500">줄번호</span>}
+                {localConfig.showLineNumbers && <span className="ml-auto text-xs text-muted-foreground">줄번호</span>}
               </div>
               <div className="overflow-auto p-3" style={{ height: "calc(100% - 32px)" }}>
                 {localConfig.defaultValue ? (
                   <pre className="text-xs">
-                    {localConfig.showLineNumbers && <span className="mr-3 text-gray-400 select-none">1</span>}
+                    {localConfig.showLineNumbers && <span className="mr-3 text-muted-foreground/70 select-none">1</span>}
                     {localConfig.defaultValue}
                   </pre>
                 ) : (
-                  <div className="text-gray-400 italic">{localConfig.placeholder}</div>
+                  <div className="text-muted-foreground/70 italic">{localConfig.placeholder}</div>
                 )}
               </div>
             </div>
diff --git a/frontend/components/screen/config-panels/DataFilterConfigPanel.tsx b/frontend/components/screen/config-panels/DataFilterConfigPanel.tsx
index fe089ac5..48a7cbf9 100644
--- a/frontend/components/screen/config-panels/DataFilterConfigPanel.tsx
+++ b/frontend/components/screen/config-panels/DataFilterConfigPanel.tsx
@@ -69,7 +69,7 @@ const FilterItemCollapsible: React.FC<FilterItemCollapsibleProps> = ({
             </div>
             {/* 하단: 필터 요약 (전체 너비 사용) */}
             <div className="mt-1 pl-4">
-              <span className="text-xs font-medium text-blue-600" title={filterSummary}>
+              <span className="text-xs font-medium text-primary" title={filterSummary}>
                 {filterSummary}
               </span>
             </div>
@@ -608,8 +608,8 @@ export function DataFilterConfigPanel({
 
                   {/* date_range_contains의 dynamic 타입 안내 */}
                   {filter.operator === "date_range_contains" && filter.valueType === "dynamic" && (
-                    <div className="rounded-md bg-blue-50 p-2">
-                      <p className="text-[10px] text-blue-700">오늘 날짜를 기준으로 기간 내 데이터를 필터링합니다.</p>
+                    <div className="rounded-md bg-primary/10 p-2">
+                      <p className="text-[10px] text-primary">오늘 날짜를 기준으로 기간 내 데이터를 필터링합니다.</p>
                     </div>
                   )}
                 </FilterItemCollapsible>
diff --git a/frontend/components/screen/config-panels/EntityConfigPanel.tsx b/frontend/components/screen/config-panels/EntityConfigPanel.tsx
index 83773500..c4da574f 100644
--- a/frontend/components/screen/config-panels/EntityConfigPanel.tsx
+++ b/frontend/components/screen/config-panels/EntityConfigPanel.tsx
@@ -416,11 +416,11 @@ export const EntityConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
           <div className="bg-muted/50 rounded-md border p-3">
             <div className="space-y-2">
               <div className="flex items-center gap-2 rounded border bg-white p-2">
-                <Database className="h-4 w-4 text-gray-400" />
+                <Database className="h-4 w-4 text-muted-foreground/70" />
                 <span className="flex-1 text-xs text-muted-foreground">
                   {localConfig.placeholder || "항목을 선택하세요"}
                 </span>
-                {localConfig.searchable && <Search className="h-4 w-4 text-gray-400" />}
+                {localConfig.searchable && <Search className="h-4 w-4 text-muted-foreground/70" />}
               </div>
 
               <div className="text-muted-foreground text-xs">
diff --git a/frontend/components/screen/config-panels/FileConfigPanel.tsx b/frontend/components/screen/config-panels/FileConfigPanel.tsx
index d00200f1..915ae870 100644
--- a/frontend/components/screen/config-panels/FileConfigPanel.tsx
+++ b/frontend/components/screen/config-panels/FileConfigPanel.tsx
@@ -358,11 +358,11 @@ export const FileConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
             <div
               className={`space-y-2 rounded-md border-2 border-dashed p-4 text-center ${
                 localConfig.dragAndDrop && !localConfig.readonly
-                  ? "border-gray-300 hover:border-gray-400"
-                  : "border-gray-200"
+                  ? "border-input hover:border-input"
+                  : "border-border"
               }`}
             >
-              <File className="mx-auto h-8 w-8 text-gray-400" />
+              <File className="mx-auto h-8 w-8 text-muted-foreground/70" />
               <p className="text-xs text-muted-foreground">{localConfig.uploadText}</p>
               <Button size="sm" variant="outline" disabled={localConfig.readonly} className="text-xs">
                 {localConfig.browseText}
diff --git a/frontend/components/screen/config-panels/ImprovedButtonControlConfigPanel.tsx b/frontend/components/screen/config-panels/ImprovedButtonControlConfigPanel.tsx
index 1cbad525..4b55cddd 100644
--- a/frontend/components/screen/config-panels/ImprovedButtonControlConfigPanel.tsx
+++ b/frontend/components/screen/config-panels/ImprovedButtonControlConfigPanel.tsx
@@ -214,7 +214,7 @@ export const ImprovedButtonControlConfigPanel: React.FC<ImprovedButtonControlCon
           {/* 제어 목록 헤더 */}
           <div className="flex items-center justify-between">
             <div className="flex items-center space-x-2">
-              <Workflow className="h-4 w-4 text-green-600" />
+              <Workflow className="h-4 w-4 text-emerald-600" />
               <Label>제어 목록 (순서대로 실행)</Label>
             </div>
             <Button variant="outline" size="sm" onClick={handleAddControl} className="h-8">
@@ -226,8 +226,8 @@ export const ImprovedButtonControlConfigPanel: React.FC<ImprovedButtonControlCon
           {/* 제어 목록 */}
           {flowControls.length === 0 ? (
             <div className="rounded-md border border-dashed p-6 text-center">
-              <Workflow className="mx-auto h-8 w-8 text-gray-400" />
-              <p className="mt-2 text-sm text-gray-500">등록된 제어가 없습니다</p>
+              <Workflow className="mx-auto h-8 w-8 text-muted-foreground/70" />
+              <p className="mt-2 text-sm text-muted-foreground">등록된 제어가 없습니다</p>
               <Button variant="outline" size="sm" onClick={handleAddControl} className="mt-3">
                 <Plus className="mr-1 h-3 w-3" />첫 번째 제어 추가
               </Button>
@@ -254,10 +254,10 @@ export const ImprovedButtonControlConfigPanel: React.FC<ImprovedButtonControlCon
 
           {/* 안내 메시지 */}
           {flowControls.length > 0 && (
-            <div className="rounded bg-blue-50 p-3">
+            <div className="rounded bg-primary/10 p-3">
               <div className="flex items-start space-x-2">
-                <Info className="mt-0.5 h-4 w-4 text-blue-600" />
-                <div className="text-xs text-blue-800">
+                <Info className="mt-0.5 h-4 w-4 text-primary" />
+                <div className="text-xs text-primary">
                   <p className="font-medium">다중 제어 실행 정보:</p>
                   <p className="mt-1">• 제어는 위에서 아래 순서대로 순차 실행됩니다</p>
                   <p>• 각 제어는 독립 트랜잭션으로 처리됩니다</p>
@@ -314,9 +314,9 @@ const FlowControlItem: React.FC<{
             </SelectTrigger>
             <SelectContent>
               {loading ? (
-                <div className="p-2 text-center text-xs text-gray-500">로딩 중...</div>
+                <div className="p-2 text-center text-xs text-muted-foreground">로딩 중...</div>
               ) : flows.length === 0 ? (
-                <div className="p-2 text-center text-xs text-gray-500">플로우가 없습니다</div>
+                <div className="p-2 text-center text-xs text-muted-foreground">플로우가 없습니다</div>
               ) : (
                 flows.map((flow) => (
                   <SelectItem key={flow.flowId} value={flow.flowId.toString()}>
@@ -350,7 +350,7 @@ const FlowControlItem: React.FC<{
         <Button
           variant="ghost"
           size="icon"
-          className="h-8 w-8 text-red-500 hover:bg-red-50 hover:text-red-600"
+          className="h-8 w-8 text-destructive hover:bg-destructive/10 hover:text-destructive"
           onClick={onRemove}
         >
           <Trash2 className="h-4 w-4" />
diff --git a/frontend/components/screen/config-panels/QuickInsertConfigSection.tsx b/frontend/components/screen/config-panels/QuickInsertConfigSection.tsx
index 39b2e83a..8d6bfdad 100644
--- a/frontend/components/screen/config-panels/QuickInsertConfigSection.tsx
+++ b/frontend/components/screen/config-panels/QuickInsertConfigSection.tsx
@@ -175,7 +175,7 @@ export const QuickInsertConfigSection: React.FC<QuickInsertConfigSectionProps> =
   });
 
   return (
-    <div className="mt-4 space-y-4 rounded-lg border bg-green-50 p-4 dark:bg-green-950/20">
+    <div className="mt-4 space-y-4 rounded-lg border bg-emerald-50 p-4 dark:bg-emerald-950/20">
       <h4 className="text-sm font-medium text-foreground">즉시 저장 설정</h4>
       <p className="text-xs text-muted-foreground">
         화면에서 선택한 데이터를 버튼 클릭 시 특정 테이블에 즉시 저장합니다.
@@ -639,7 +639,7 @@ export const QuickInsertConfigSection: React.FC<QuickInsertConfigSectionProps> =
       )}
 
       {/* 사용 안내 */}
-      <div className="rounded-md bg-green-100 p-3 dark:bg-green-900/30">
+      <div className="rounded-md bg-emerald-100 p-3 dark:bg-emerald-900/30">
         <p className="text-xs text-green-900 dark:text-green-100">
           <strong>사용 방법:</strong>
           <br />
diff --git a/frontend/components/screen/config-panels/TabsConfigPanel.tsx b/frontend/components/screen/config-panels/TabsConfigPanel.tsx
index 8369b115..98fcb7c3 100644
--- a/frontend/components/screen/config-panels/TabsConfigPanel.tsx
+++ b/frontend/components/screen/config-panels/TabsConfigPanel.tsx
@@ -424,11 +424,11 @@ export function TabsConfigPanel({ config, onChange }: TabsConfigPanelProps) {
       </div>
 
       {/* 사용 안내 */}
-      <div className="rounded-lg border border-blue-200 bg-blue-50 p-3">
-        <h4 className="mb-1 text-xs font-semibold text-blue-900">
+      <div className="rounded-lg border border-primary/20 bg-primary/10 p-3">
+        <h4 className="mb-1 text-xs font-semibold text-primary">
           컴포넌트 추가 방법
         </h4>
-        <ol className="list-inside list-decimal space-y-1 text-[10px] text-blue-800">
+        <ol className="list-inside list-decimal space-y-1 text-[10px] text-primary">
           <li>디자인 화면에서 탭을 선택합니다</li>
           <li>좌측 패널에서 원하는 컴포넌트를 드래그합니다</li>
           <li>선택한 탭 영역에 드롭하여 배치합니다</li>
diff --git a/frontend/components/screen/config-panels/TextareaConfigPanel.tsx b/frontend/components/screen/config-panels/TextareaConfigPanel.tsx
index b074074c..e50f0813 100644
--- a/frontend/components/screen/config-panels/TextareaConfigPanel.tsx
+++ b/frontend/components/screen/config-panels/TextareaConfigPanel.tsx
@@ -105,7 +105,7 @@ export const TextareaConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
               rows={3}
             />
             {localConfig.showCharCount && (
-              <div className={`text-xs ${isOverLimit ? "text-red-500" : "text-muted-foreground"}`}>
+              <div className={`text-xs ${isOverLimit ? "text-destructive" : "text-muted-foreground"}`}>
                 {currentCharCount}
                 {localConfig.maxLength && ` / ${localConfig.maxLength}`} 글자
               </div>
diff --git a/frontend/components/screen/config-panels/button/DataTab.tsx b/frontend/components/screen/config-panels/button/DataTab.tsx
index 29b35c78..43cba580 100644
--- a/frontend/components/screen/config-panels/button/DataTab.tsx
+++ b/frontend/components/screen/config-panels/button/DataTab.tsx
@@ -855,8 +855,8 @@ export const DataTab: React.FC<DataTabProps> = ({
           </div>
         </div>
 
-        <div className="rounded-md bg-blue-50 p-3 dark:bg-blue-950">
-          <p className="text-xs text-blue-900 dark:text-blue-100">
+        <div className="rounded-md bg-primary/10 p-3 dark:bg-primary/15">
+          <p className="text-xs text-primary dark:text-primary/60">
             <strong>사용 방법:</strong>
             <br />
             1. 소스 컴포넌트에서 데이터를 선택합니다
diff --git a/frontend/components/screen/dialogs/FlowButtonGroupDialog.tsx b/frontend/components/screen/dialogs/FlowButtonGroupDialog.tsx
index f40bd9ea..c8bc525f 100644
--- a/frontend/components/screen/dialogs/FlowButtonGroupDialog.tsx
+++ b/frontend/components/screen/dialogs/FlowButtonGroupDialog.tsx
@@ -61,7 +61,7 @@ export const FlowButtonGroupDialog: React.FC<FlowButtonGroupDialogProps> = ({
               <div className="flex items-center space-x-3">
                 <RadioGroupItem value="horizontal" id="direction-horizontal" />
                 <Label htmlFor="direction-horizontal" className="flex items-center gap-2 text-sm font-normal">
-                  <ArrowRight className="h-4 w-4 text-blue-600" />
+                  <ArrowRight className="h-4 w-4 text-primary" />
                   <span>가로 정렬</span>
                   <Badge variant="secondary" className="ml-2 text-xs">
                     ← →
@@ -71,7 +71,7 @@ export const FlowButtonGroupDialog: React.FC<FlowButtonGroupDialogProps> = ({
               <div className="flex items-center space-x-3">
                 <RadioGroupItem value="vertical" id="direction-vertical" />
                 <Label htmlFor="direction-vertical" className="flex items-center gap-2 text-sm font-normal">
-                  <ArrowDown className="h-4 w-4 text-blue-600" />
+                  <ArrowDown className="h-4 w-4 text-primary" />
                   <span>세로 정렬</span>
                   <Badge variant="secondary" className="ml-2 text-xs">
                     ↑ ↓
@@ -161,9 +161,9 @@ export const FlowButtonGroupDialog: React.FC<FlowButtonGroupDialogProps> = ({
           </div>
 
           {/* 미리보기 */}
-          <div className="rounded-lg border border-blue-200 bg-blue-50 p-4">
-            <p className="mb-3 text-xs font-medium text-blue-900">설정 미리보기</p>
-            <div className="space-y-2 text-xs text-blue-700">
+          <div className="rounded-lg border border-primary/20 bg-primary/10 p-4">
+            <p className="mb-3 text-xs font-medium text-primary">설정 미리보기</p>
+            <div className="space-y-2 text-xs text-primary">
               <div className="flex items-center gap-2">
                 {direction === "horizontal" ? <ArrowRight className="h-3 w-3" /> : <ArrowDown className="h-3 w-3" />}
                 <span>
diff --git a/frontend/components/screen/layout/ColumnComponent.tsx b/frontend/components/screen/layout/ColumnComponent.tsx
index a00305b8..800391b1 100644
--- a/frontend/components/screen/layout/ColumnComponent.tsx
+++ b/frontend/components/screen/layout/ColumnComponent.tsx
@@ -62,7 +62,7 @@ export default function ColumnComponent({
   return (
     <div
       className={cn(
-        "flex-1 rounded border border-gray-200 p-2",
+        "flex-1 rounded border border-border p-2",
         isSelected && "border-primary bg-accent",
         isMoving && "cursor-move",
         className,
@@ -71,7 +71,7 @@ export default function ColumnComponent({
       onClick={onClick}
       onMouseDown={onMouseDown}
     >
-      <div className="mb-2 text-xs text-gray-500">열</div>
+      <div className="mb-2 text-xs text-muted-foreground">열</div>
       {children}
     </div>
   );
diff --git a/frontend/components/screen/layout/ContainerComponent.tsx b/frontend/components/screen/layout/ContainerComponent.tsx
index 4001f284..540def82 100644
--- a/frontend/components/screen/layout/ContainerComponent.tsx
+++ b/frontend/components/screen/layout/ContainerComponent.tsx
@@ -71,7 +71,7 @@ export default function ContainerComponent({
   return (
     <div
       className={cn(
-        "rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 p-4",
+        "rounded-lg border-2 border-dashed border-input bg-muted p-4",
         gridClasses, // 🆕 그리드 클래스 추가
         isSelected && "border-primary bg-accent",
         isMoving && "cursor-move",
@@ -81,7 +81,7 @@ export default function ContainerComponent({
       onClick={onClick}
       onMouseDown={onMouseDown}
     >
-      <div className="mb-2 text-xs text-gray-500">{component.title || "컨테이너"}</div>
+      <div className="mb-2 text-xs text-muted-foreground">{component.title || "컨테이너"}</div>
       {children}
     </div>
   );
diff --git a/frontend/components/screen/layout/RowComponent.tsx b/frontend/components/screen/layout/RowComponent.tsx
index b1a31b23..fec93a86 100644
--- a/frontend/components/screen/layout/RowComponent.tsx
+++ b/frontend/components/screen/layout/RowComponent.tsx
@@ -62,7 +62,7 @@ export default function RowComponent({
   return (
     <div
       className={cn(
-        "flex gap-4 rounded border border-gray-200 p-2",
+        "flex gap-4 rounded border border-border p-2",
         isSelected && "border-primary bg-accent",
         isMoving && "cursor-move",
         className,
@@ -71,7 +71,7 @@ export default function RowComponent({
       onClick={onClick}
       onMouseDown={onMouseDown}
     >
-      <div className="mr-2 text-xs text-gray-500">행</div>
+      <div className="mr-2 text-xs text-muted-foreground">행</div>
       {children}
     </div>
   );
diff --git a/frontend/components/screen/modals/MultilangSettingsModal.tsx b/frontend/components/screen/modals/MultilangSettingsModal.tsx
index ea1c10b3..a1f62b82 100644
--- a/frontend/components/screen/modals/MultilangSettingsModal.tsx
+++ b/frontend/components/screen/modals/MultilangSettingsModal.tsx
@@ -282,7 +282,7 @@ const KeySelectCombobox: React.FC<KeySelectComboboxProps> = ({
                     onChange(null);
                     setOpen(false);
                   }}
-                  className="text-red-600"
+                  className="text-destructive"
                 >
                   <X className="mr-2 h-4 w-4" />
                   연결 해제
@@ -895,12 +895,12 @@ export const MultilangSettingsModal: React.FC<MultilangSettingsModalProps> = ({
   const TranslationStatusIcon: React.FC<{ status: TranslationStatus }> = ({ status }) => {
     switch (status) {
       case "complete":
-        return <CheckCircle2 className="h-4 w-4 text-green-500" />;
+        return <CheckCircle2 className="h-4 w-4 text-emerald-500" />;
       case "partial":
-        return <CircleDot className="h-4 w-4 text-yellow-500" />;
+        return <CircleDot className="h-4 w-4 text-amber-500" />;
       case "none":
       default:
-        return <Circle className="h-4 w-4 text-gray-300" />;
+        return <Circle className="h-4 w-4 text-muted-foreground/50" />;
     }
   };
 
@@ -1270,10 +1270,10 @@ export const MultilangSettingsModal: React.FC<MultilangSettingsModalProps> = ({
                                   isSelected
                                     ? "border-primary bg-primary/10 ring-1 ring-primary"
                                     : translationStatus === "complete"
-                                      ? "border-green-200 bg-green-50 hover:bg-green-100"
+                                      ? "border-emerald-200 bg-emerald-50 hover:bg-emerald-100"
                                       : translationStatus === "partial"
-                                        ? "border-yellow-200 bg-yellow-50 hover:bg-yellow-100"
-                                        : "border-gray-200 bg-white hover:bg-gray-50"
+                                        ? "border-amber-200 bg-amber-50 hover:bg-amber-100"
+                                        : "border-border bg-white hover:bg-muted"
                                 )}
                               >
                                 {/* 번역 상태 아이콘 */}
@@ -1301,7 +1301,7 @@ export const MultilangSettingsModal: React.FC<MultilangSettingsModalProps> = ({
           </div>
 
           {/* 오른쪽: 선택된 항목 상세 및 번역 편집 */}
-          <div className="flex w-1/2 flex-col rounded-md border bg-gray-50 p-4">
+          <div className="flex w-1/2 flex-col rounded-md border bg-muted p-4">
             {selectedLabelItem ? (
               <>
                 {/* 선택된 항목 정보 */}
@@ -1388,15 +1388,15 @@ export const MultilangSettingsModal: React.FC<MultilangSettingsModalProps> = ({
               <span className="font-medium">번역 현황</span>
               <div className="flex items-center gap-3 text-xs text-muted-foreground">
                 <span className="flex items-center gap-1">
-                  <CheckCircle2 className="h-3 w-3 text-green-500" />
+                  <CheckCircle2 className="h-3 w-3 text-emerald-500" />
                   완료 {translationStats.complete}
                 </span>
                 <span className="flex items-center gap-1">
-                  <CircleDot className="h-3 w-3 text-yellow-500" />
+                  <CircleDot className="h-3 w-3 text-amber-500" />
                   부분 {translationStats.partial}
                 </span>
                 <span className="flex items-center gap-1">
-                  <Circle className="h-3 w-3 text-gray-300" />
+                  <Circle className="h-3 w-3 text-muted-foreground/50" />
                   미완료 {translationStats.none}
                 </span>
               </div>
diff --git a/frontend/components/screen/panels/ComponentsPanel.tsx b/frontend/components/screen/panels/ComponentsPanel.tsx
index 9329ae39..e0d914a9 100644
--- a/frontend/components/screen/panels/ComponentsPanel.tsx
+++ b/frontend/components/screen/panels/ComponentsPanel.tsx
@@ -231,17 +231,17 @@ export function ComponentsPanel({
   const getCategoryColor = (category: string) => {
     switch (category) {
       case "data":
-        return "from-blue-500/10 to-blue-600/10 text-blue-600 group-hover:from-blue-500/20 group-hover:to-blue-600/20";
+        return "bg-primary/10 text-primary group-hover:bg-primary/20";
       case "display":
-        return "from-emerald-500/10 to-emerald-600/10 text-emerald-600 group-hover:from-emerald-500/20 group-hover:to-emerald-600/20";
+        return "bg-emerald-500/10 text-emerald-600 group-hover:bg-emerald-500/20";
       case "input":
-        return "from-violet-500/10 to-violet-600/10 text-violet-600 group-hover:from-violet-500/20 group-hover:to-violet-600/20";
+        return "bg-violet-500/10 text-violet-600 group-hover:bg-violet-500/20";
       case "layout":
-        return "from-amber-500/10 to-amber-600/10 text-amber-600 group-hover:from-amber-500/20 group-hover:to-amber-600/20";
+        return "bg-amber-500/10 text-amber-600 group-hover:bg-amber-500/20";
       case "action":
-        return "from-rose-500/10 to-rose-600/10 text-rose-600 group-hover:from-rose-500/20 group-hover:to-rose-600/20";
+        return "bg-rose-500/10 text-rose-600 group-hover:bg-rose-500/20";
       default:
-        return "from-slate-500/10 to-slate-600/10 text-slate-600 group-hover:from-slate-500/20 group-hover:to-slate-600/20";
+        return "bg-muted text-muted-foreground group-hover:bg-muted/80";
     }
   };
 
@@ -263,7 +263,7 @@ export function ComponentsPanel({
     >
       <div className="flex items-center gap-2.5">
         <div
-          className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-gradient-to-br transition-all duration-200 ${getCategoryColor(component.category)}`}
+          className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-md transition-all duration-200 ${getCategoryColor(component.category)}`}
         >
           {getCategoryIcon(component.category)}
         </div>
diff --git a/frontend/components/screen/panels/DataTableConfigPanel.tsx b/frontend/components/screen/panels/DataTableConfigPanel.tsx
index b1d8b971..29bec31f 100644
--- a/frontend/components/screen/panels/DataTableConfigPanel.tsx
+++ b/frontend/components/screen/panels/DataTableConfigPanel.tsx
@@ -702,7 +702,7 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
           );
 
         default:
-          return <div className="py-2 text-xs text-gray-500">이 웹 타입({webType})에 대한 상세 설정이 없습니다.</div>;
+          return <div className="py-2 text-xs text-muted-foreground">이 웹 타입({webType})에 대한 상세 설정이 없습니다.</div>;
       }
     },
     [getColumnWebType, getColumnCurrentDetailSettings, localColumnDetailSettings, updateColumnDetailSettings],
@@ -1141,7 +1141,7 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
               <div className="space-y-2">
                 <Label htmlFor="table-select">연결 테이블</Label>
                 <select
-                  className="focus:border-primary w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:ring-1 focus:ring-blue-500 focus:outline-none"
+                  className="focus:border-primary w-full rounded-md border border-input px-3 py-2 text-sm focus:ring-1 focus:ring-ring focus:outline-none"
                   value={localValues.tableName}
                   onChange={(e) => handleTableChange(e.target.value)}
                 >
@@ -1436,8 +1436,8 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
 
               {/* 수정 모달 설정 */}
               {localValues.enableEdit && (
-                <div className="rounded-lg border border-gray-200 bg-gray-50 p-4">
-                  <h4 className="mb-3 text-sm font-medium text-gray-900">수정 모달 설정</h4>
+                <div className="rounded-lg border border-border bg-muted p-4">
+                  <h4 className="mb-3 text-sm font-medium text-foreground">수정 모달 설정</h4>
 
                   <div className="space-y-3">
                     <div className="space-y-2">
@@ -1457,7 +1457,7 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
                         placeholder="데이터 수정"
                         className="h-6 w-full px-2 py-0 text-xs"
                       />
-                      <p className="text-xs text-gray-500">비워두면 기본 제목이 표시됩니다</p>
+                      <p className="text-xs text-muted-foreground">비워두면 기본 제목이 표시됩니다</p>
                     </div>
 
                     <div className="space-y-2">
@@ -1477,7 +1477,7 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
                         placeholder="선택한 데이터를 수정합니다"
                         className="h-6 w-full px-2 py-0 text-xs"
                       />
-                      <p className="text-xs text-gray-500">비워두면 설명이 표시되지 않습니다</p>
+                      <p className="text-xs text-muted-foreground">비워두면 설명이 표시되지 않습니다</p>
                     </div>
                   </div>
                 </div>
@@ -2204,7 +2204,7 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
                   <Filter className="h-4 w-4" />
                   현재 사용자 정보로 필터링
                 </h4>
-                <div className="space-y-3 rounded-md border border-gray-200 p-3">
+                <div className="space-y-3 rounded-md border border-border p-3">
                   <div className="flex items-center space-x-2">
                     <Checkbox
                       id="auto-filter-enabled"
@@ -2306,7 +2306,7 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
                       <div className="space-y-2">
                         <Label>페이지당 행 수</Label>
                         <select
-                          className="focus:border-primary w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:ring-1 focus:ring-blue-500 focus:outline-none"
+                          className="focus:border-primary w-full rounded-md border border-input px-3 py-2 text-sm focus:ring-1 focus:ring-ring focus:outline-none"
                           value={component.pagination.pageSize.toString()}
                           onChange={(e) =>
                             onUpdateComponent({
@@ -2394,7 +2394,7 @@ const DataTableConfigPanelComponent: React.FC<DataTableConfigPanelProps> = ({
               {/* 모달 설정은 여기에 추가 가능 */}
               <div className="space-y-4">
                 <h4 className="text-sm font-medium">모달 설정</h4>
-                <p className="text-xs text-gray-500">추가/수정 모달 관련 설정들이 여기에 표시됩니다.</p>
+                <p className="text-xs text-muted-foreground">추가/수정 모달 관련 설정들이 여기에 표시됩니다.</p>
               </div>
             </CardContent>
           </Card>
diff --git a/frontend/components/screen/panels/DetailSettingsPanel.tsx b/frontend/components/screen/panels/DetailSettingsPanel.tsx
index 7ec1c557..81488444 100644
--- a/frontend/components/screen/panels/DetailSettingsPanel.tsx
+++ b/frontend/components/screen/panels/DetailSettingsPanel.tsx
@@ -125,10 +125,10 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
           {/* 그리드 레이아웃 설정 */}
           {layoutComponent.layoutType === "grid" && (
             <div className="space-y-3">
-              <h4 className="text-sm font-medium text-gray-900">그리드 설정</h4>
+              <h4 className="text-sm font-medium text-foreground">그리드 설정</h4>
               <div className="grid grid-cols-2 gap-3">
                 <div>
-                  <label className="mb-1 block text-xs font-medium text-gray-700">행 수</label>
+                  <label className="mb-1 block text-xs font-medium text-foreground">행 수</label>
                   <input
                     type="number"
                     min="1"
@@ -161,11 +161,11 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                         onUpdateProperty(layoutComponent.id, "zones", newZones);
                       }
                     }}
-                    className="w-full rounded border border-gray-300 px-2 py-1 text-xs"
+                    className="w-full rounded border border-input px-2 py-1 text-xs"
                   />
                 </div>
                 <div>
-                  <label className="mb-1 block text-xs font-medium text-gray-700">열 수</label>
+                  <label className="mb-1 block text-xs font-medium text-foreground">열 수</label>
                   <input
                     type="number"
                     min="1"
@@ -198,12 +198,12 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                         onUpdateProperty(layoutComponent.id, "zones", newZones);
                       }
                     }}
-                    className="w-full rounded border border-gray-300 px-2 py-1 text-xs"
+                    className="w-full rounded border border-input px-2 py-1 text-xs"
                   />
                 </div>
               </div>
               <div>
-                <label className="mb-1 block text-xs font-medium text-gray-700">간격 (px)</label>
+                <label className="mb-1 block text-xs font-medium text-foreground">간격 (px)</label>
                 <input
                   type="number"
                   min="0"
@@ -212,7 +212,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                   onChange={(e) =>
                     onUpdateProperty(layoutComponent.id, "layoutConfig.grid.gap", parseInt(e.target.value))
                   }
-                  className="w-full rounded border border-gray-300 px-2 py-1 text-xs"
+                  className="w-full rounded border border-input px-2 py-1 text-xs"
                 />
               </div>
             </div>
@@ -221,9 +221,9 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
           {/* 플렉스박스 레이아웃 설정 */}
           {layoutComponent.layoutType === "flexbox" && (
             <div className="space-y-3">
-              <h4 className="text-sm font-medium text-gray-900">플렉스박스 설정</h4>
+              <h4 className="text-sm font-medium text-foreground">플렉스박스 설정</h4>
               <div>
-                <label className="mb-1 block text-xs font-medium text-gray-700">방향</label>
+                <label className="mb-1 block text-xs font-medium text-foreground">방향</label>
                 <select
                   value={layoutComponent.layoutConfig?.flexbox?.direction || "row"}
                   onChange={(e) => {
@@ -256,7 +256,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                       onUpdateProperty(layoutComponent.id, "zones", updatedZones);
                     }
                   }}
-                  className="w-full rounded border border-gray-300 px-2 py-1 text-xs"
+                  className="w-full rounded border border-input px-2 py-1 text-xs"
                 >
                   <option value="row">가로 (row)</option>
                   <option value="column">세로 (column)</option>
@@ -265,7 +265,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                 </select>
               </div>
               <div>
-                <label className="mb-1 block text-xs font-medium text-gray-700">존 개수</label>
+                <label className="mb-1 block text-xs font-medium text-foreground">존 개수</label>
                 <div className="flex items-center space-x-2">
                   <input
                     type="number"
@@ -315,13 +315,13 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                         onUpdateProperty(layoutComponent.id, "zones", newZones);
                       }
                     }}
-                    className="w-20 rounded border border-gray-300 px-2 py-1 text-xs"
+                    className="w-20 rounded border border-input px-2 py-1 text-xs"
                   />
-                  <span className="text-xs text-gray-500">개</span>
+                  <span className="text-xs text-muted-foreground">개</span>
                 </div>
               </div>
               <div>
-                <label className="mb-1 block text-xs font-medium text-gray-700">간격 (px)</label>
+                <label className="mb-1 block text-xs font-medium text-foreground">간격 (px)</label>
                 <input
                   type="number"
                   min="0"
@@ -330,7 +330,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                   onChange={(e) =>
                     onUpdateProperty(layoutComponent.id, "layoutConfig.flexbox.gap", parseInt(e.target.value))
                   }
-                  className="w-full rounded border border-gray-300 px-2 py-1 text-xs"
+                  className="w-full rounded border border-input px-2 py-1 text-xs"
                 />
               </div>
             </div>
@@ -339,13 +339,13 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
           {/* 분할 레이아웃 설정 */}
           {layoutComponent.layoutType === "split" && (
             <div className="space-y-3">
-              <h4 className="text-sm font-medium text-gray-900">분할 설정</h4>
+              <h4 className="text-sm font-medium text-foreground">분할 설정</h4>
               <div>
-                <label className="mb-1 block text-xs font-medium text-gray-700">분할 방향</label>
+                <label className="mb-1 block text-xs font-medium text-foreground">분할 방향</label>
                 <select
                   value={layoutComponent.layoutConfig?.split?.direction || "horizontal"}
                   onChange={(e) => onUpdateProperty(layoutComponent.id, "layoutConfig.split.direction", e.target.value)}
-                  className="w-full rounded border border-gray-300 px-2 py-1 text-xs"
+                  className="w-full rounded border border-input px-2 py-1 text-xs"
                 >
                   <option value="horizontal">가로 분할</option>
                   <option value="vertical">세로 분할</option>
@@ -357,12 +357,12 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
           {/* 카드 레이아웃 설정 */}
           {layoutComponent.layoutType === "card-layout" && (
             <div className="space-y-4">
-              <h4 className="text-sm font-medium text-gray-900">카드 설정</h4>
+              <h4 className="text-sm font-medium text-foreground">카드 설정</h4>
 
               {/* 테이블 컬럼 매핑 */}
               <div className="space-y-3">
                 <div className="flex items-center justify-between">
-                  <h5 className="text-xs font-medium text-gray-700">테이블 컬럼 매핑</h5>
+                  <h5 className="text-xs font-medium text-foreground">테이블 컬럼 매핑</h5>
                   {currentTable && (
                     <span className="bg-accent text-primary rounded px-2 py-1 text-xs">
                       테이블: {currentTable.table_name}
@@ -372,9 +372,9 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
 
                 {/* 테이블이 선택되지 않은 경우 안내 */}
                 {!currentTable && (
-                  <div className="rounded-lg bg-yellow-50 p-3 text-center">
+                  <div className="rounded-lg bg-amber-50 p-3 text-center">
                     <p className="text-sm text-yellow-700">테이블을 먼저 선택해주세요</p>
-                    <p className="mt-1 text-xs text-yellow-600">
+                    <p className="mt-1 text-xs text-amber-600">
                       화면 설정에서 테이블을 선택하면 컬럼 목록이 표시됩니다
                     </p>
                   </div>
@@ -394,7 +394,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                             e.target.value,
                           )
                         }
-                        className="w-full rounded border border-gray-300 px-2 py-1 text-xs"
+                        className="w-full rounded border border-input px-2 py-1 text-xs"
                       >
                         <option value="">컬럼을 선택하세요</option>
                         {currentTable.columns?.map((column) => (
@@ -416,7 +416,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                             e.target.value,
                           )
                         }
-                        className="w-full rounded border border-gray-300 px-2 py-1 text-xs"
+                        className="w-full rounded border border-input px-2 py-1 text-xs"
                       >
                         <option value="">컬럼을 선택하세요</option>
                         {currentTable.columns?.map((column) => (
@@ -438,7 +438,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                             e.target.value,
                           )
                         }
-                        className="w-full rounded border border-gray-300 px-2 py-1 text-xs"
+                        className="w-full rounded border border-input px-2 py-1 text-xs"
                       >
                         <option value="">컬럼을 선택하세요</option>
                         {currentTable.columns?.map((column) => (
@@ -460,7 +460,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                             e.target.value,
                           )
                         }
-                        className="w-full rounded border border-gray-300 px-2 py-1 text-xs"
+                        className="w-full rounded border border-input px-2 py-1 text-xs"
                       >
                         <option value="">컬럼을 선택하세요</option>
                         {currentTable.columns?.map((column) => (
@@ -510,7 +510,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                                     currentColumns,
                                   );
                                 }}
-                                className="flex-1 rounded border border-gray-300 px-2 py-1 text-xs"
+                                className="flex-1 rounded border border-input px-2 py-1 text-xs"
                               >
                                 <option value="">컬럼을 선택하세요</option>
                                 {currentTable.columns?.map((col) => (
@@ -542,7 +542,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
 
                         {(!layoutComponent.layoutConfig?.card?.columnMapping?.displayColumns ||
                           layoutComponent.layoutConfig.card.columnMapping.displayColumns.length === 0) && (
-                          <div className="rounded border border-dashed border-gray-300 py-2 text-center text-xs text-gray-500">
+                          <div className="rounded border border-dashed border-input py-2 text-center text-xs text-muted-foreground">
                             "컬럼 추가" 버튼을 클릭하여 표시할 컬럼을 추가하세요
                           </div>
                         )}
@@ -554,7 +554,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
 
               {/* 카드 스타일 설정 */}
               <div className="space-y-3">
-                <h5 className="text-xs font-medium text-gray-700">카드 스타일</h5>
+                <h5 className="text-xs font-medium text-foreground">카드 스타일</h5>
 
                 <div className="grid grid-cols-2 gap-2">
                   <div>
@@ -567,7 +567,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                       onChange={(e) =>
                         onUpdateProperty(layoutComponent.id, "layoutConfig.card.cardsPerRow", parseInt(e.target.value))
                       }
-                      className="w-full rounded border border-gray-300 px-2 py-1 text-xs"
+                      className="w-full rounded border border-input px-2 py-1 text-xs"
                     />
                   </div>
 
@@ -581,7 +581,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                       onChange={(e) =>
                         onUpdateProperty(layoutComponent.id, "layoutConfig.card.cardSpacing", parseInt(e.target.value))
                       }
-                      className="w-full rounded border border-gray-300 px-2 py-1 text-xs"
+                      className="w-full rounded border border-input px-2 py-1 text-xs"
                     />
                   </div>
                 </div>
@@ -595,7 +595,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                       onChange={(e) =>
                         onUpdateProperty(layoutComponent.id, "layoutConfig.card.cardStyle.showTitle", e.target.checked)
                       }
-                      className="rounded border-gray-300"
+                      className="rounded border-input"
                     />
                     <label htmlFor="showTitle" className="text-muted-foreground text-xs">
                       타이틀 표시
@@ -614,7 +614,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                           e.target.checked,
                         )
                       }
-                      className="rounded border-gray-300"
+                      className="rounded border-input"
                     />
                     <label htmlFor="showSubtitle" className="text-muted-foreground text-xs">
                       서브타이틀 표시
@@ -633,7 +633,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                           e.target.checked,
                         )
                       }
-                      className="rounded border-gray-300"
+                      className="rounded border-input"
                     />
                     <label htmlFor="showDescription" className="text-muted-foreground text-xs">
                       설명 표시
@@ -648,7 +648,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                       onChange={(e) =>
                         onUpdateProperty(layoutComponent.id, "layoutConfig.card.cardStyle.showImage", e.target.checked)
                       }
-                      className="rounded border-gray-300"
+                      className="rounded border-input"
                     />
                     <label htmlFor="showImage" className="text-muted-foreground text-xs">
                       이미지 표시
@@ -670,7 +670,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                         parseInt(e.target.value),
                       )
                     }
-                    className="w-full rounded border border-gray-300 px-2 py-1 text-xs"
+                    className="w-full rounded border border-input px-2 py-1 text-xs"
                   />
                 </div>
               </div>
@@ -680,13 +680,13 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
           {/* 존 목록 - 카드 레이아웃은 데이터 기반이므로 존 관리 불필요 */}
           {layoutComponent.layoutType !== "card-layout" && (
             <div className="space-y-3">
-              <h4 className="text-sm font-medium text-gray-900">존 목록</h4>
+              <h4 className="text-sm font-medium text-foreground">존 목록</h4>
               <div className="space-y-2">
                 {layoutComponent.zones?.map((zone, index) => (
-                  <div key={zone.id} className="rounded-lg bg-gray-50 p-3">
+                  <div key={zone.id} className="rounded-lg bg-muted p-3">
                     <div className="mb-2 flex items-center justify-between">
-                      <span className="text-sm font-medium text-gray-700">{zone.name}</span>
-                      <span className="text-xs text-gray-500">ID: {zone.id}</span>
+                      <span className="text-sm font-medium text-foreground">{zone.name}</span>
+                      <span className="text-xs text-muted-foreground">ID: {zone.id}</span>
                     </div>
                     <div className="grid grid-cols-2 gap-2">
                       <div>
@@ -697,7 +697,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                           onChange={(e) =>
                             onUpdateProperty(layoutComponent.id, `zones.${index}.size.width`, e.target.value)
                           }
-                          className="w-full rounded border border-gray-300 px-2 py-1 text-xs"
+                          className="w-full rounded border border-input px-2 py-1 text-xs"
                           placeholder="100%"
                         />
                       </div>
@@ -709,7 +709,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                           onChange={(e) =>
                             onUpdateProperty(layoutComponent.id, `zones.${index}.size.height`, e.target.value)
                           }
-                          className="w-full rounded border border-gray-300 px-2 py-1 text-xs"
+                          className="w-full rounded border border-input px-2 py-1 text-xs"
                           placeholder="auto"
                         />
                       </div>
@@ -813,20 +813,20 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
 
   if (!selectedComponent) {
     return (
-      <div className="flex h-full flex-col border-r border-gray-200/60 bg-gradient-to-br from-slate-50 to-orange-50/30 shadow-sm">
+      <div className="flex h-full flex-col border-r border-border/60 bg-background shadow-sm">
         <div className="p-6">
           {/* 헤더 */}
           <div className="mb-6">
-            <h2 className="mb-1 text-lg font-semibold text-gray-900">상세 설정</h2>
-            <p className="text-sm text-gray-500">컴포넌트를 선택하여 상세 설정을 편집하세요</p>
+            <h2 className="mb-1 text-lg font-semibold text-foreground">상세 설정</h2>
+            <p className="text-sm text-muted-foreground">컴포넌트를 선택하여 상세 설정을 편집하세요</p>
           </div>
         </div>
 
         {/* 빈 상태 */}
         <div className="flex flex-1 flex-col items-center justify-center p-6 text-center">
-          <Settings className="mb-4 h-12 w-12 text-gray-400" />
-          <h3 className="mb-2 text-lg font-medium text-gray-900">컴포넌트를 선택하세요</h3>
-          <p className="text-sm text-gray-500">위젯 컴포넌트를 선택하면 상세 설정을 편집할 수 있습니다.</p>
+          <Settings className="mb-4 h-12 w-12 text-muted-foreground/70" />
+          <h3 className="mb-2 text-lg font-medium text-foreground">컴포넌트를 선택하세요</h3>
+          <p className="text-sm text-muted-foreground">위젯 컴포넌트를 선택하면 상세 설정을 편집할 수 있습니다.</p>
         </div>
       </div>
     );
@@ -840,9 +840,9 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
       // console.error("❌ selectedComponent가 undefined입니다!");
       return (
         <div className="flex h-full flex-col items-center justify-center p-6 text-center">
-          <Settings className="mb-4 h-12 w-12 text-red-400" />
+          <Settings className="mb-4 h-12 w-12 text-destructive/80" />
           <h3 className="mb-2 text-lg font-medium text-red-900">오류</h3>
-          <p className="text-sm text-red-500">선택된 컴포넌트가 없습니다.</p>
+          <p className="text-sm text-destructive">선택된 컴포넌트가 없습니다.</p>
         </div>
       );
     }
@@ -944,9 +944,9 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
       default:
         return (
           <div className="flex h-full flex-col items-center justify-center p-6 text-center">
-            <Settings className="mb-4 h-12 w-12 text-gray-400" />
-            <h3 className="mb-2 text-lg font-medium text-gray-900">⚠️ 설정 패널 없음</h3>
-            <p className="text-sm text-gray-500">
+            <Settings className="mb-4 h-12 w-12 text-muted-foreground/70" />
+            <h3 className="mb-2 text-lg font-medium text-foreground">⚠️ 설정 패널 없음</h3>
+            <p className="text-sm text-muted-foreground">
               컴포넌트 "{componentId || componentType}"에 대한 설정 패널이 없습니다.
             </p>
           </div>
@@ -988,16 +988,16 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
     return (
       <div className="flex h-full flex-col">
         {/* 헤더 */}
-        <div className="border-b border-gray-200 p-4">
+        <div className="border-b border-border p-4">
           <div className="flex items-center space-x-2">
             <Settings className="text-muted-foreground h-4 w-4" />
-            <h3 className="font-medium text-gray-900">컴포넌트 설정</h3>
+            <h3 className="font-medium text-foreground">컴포넌트 설정</h3>
           </div>
           <div className="mt-2 flex items-center space-x-2">
             <span className="text-muted-foreground text-xs">
               타입:
             </span>
-            <span className="rounded bg-green-100 px-2 py-1 text-xs font-medium text-green-800">{componentType}</span>
+            <span className="rounded bg-emerald-100 px-2 py-1 text-xs font-medium text-emerald-800">{componentType}</span>
           </div>
         </div>
 
@@ -1020,9 +1020,9 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
   ) {
     return (
       <div className="flex h-full flex-col items-center justify-center p-6 text-center">
-        <Settings className="mb-4 h-12 w-12 text-gray-400" />
-        <h3 className="mb-2 text-lg font-medium text-gray-900">설정할 수 없는 컴포넌트입니다</h3>
-        <p className="text-sm text-gray-500">
+        <Settings className="mb-4 h-12 w-12 text-muted-foreground/70" />
+        <h3 className="mb-2 text-lg font-medium text-foreground">설정할 수 없는 컴포넌트입니다</h3>
+        <p className="text-sm text-muted-foreground">
           상세 설정은 위젯, 파일, 버튼, 컴포넌트, 레이아웃에서만 사용할 수 있습니다.
           <br />
           현재 선택된 컴포넌트: {selectedComponent.type}
@@ -1038,10 +1038,10 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
     return (
       <div className="flex h-full flex-col">
         {/* 헤더 */}
-        <div className="border-b border-gray-200 p-4">
+        <div className="border-b border-border p-4">
           <div className="flex items-center space-x-2">
             <Settings className="text-muted-foreground h-4 w-4" />
-            <h3 className="font-medium text-gray-900">파일 컴포넌트 설정</h3>
+            <h3 className="font-medium text-foreground">파일 컴포넌트 설정</h3>
           </div>
           <div className="mt-2 flex items-center space-x-2">
             <span className="text-muted-foreground text-xs">
@@ -1049,7 +1049,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
             </span>
             <span className="rounded bg-purple-100 px-2 py-1 text-xs font-medium text-purple-800">파일 업로드</span>
           </div>
-          <div className="mt-1 text-xs text-gray-500">
+          <div className="mt-1 text-xs text-muted-foreground">
             {selectedComponent.type === "widget"
               ? `위젯타입: ${selectedComponent.widgetType}`
               : `문서 타입: ${fileComponent.fileConfig?.docTypeName || "일반 문서"}`}
@@ -1102,9 +1102,9 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
     if (!componentId) {
       return (
         <div className="flex h-full flex-col items-center justify-center p-6 text-center">
-          <Settings className="mb-4 h-12 w-12 text-gray-400" />
-          <h3 className="mb-2 text-lg font-medium text-gray-900">컴포넌트 ID가 없습니다</h3>
-          <p className="text-sm text-gray-500">componentConfig.type이 설정되지 않았습니다.</p>
+          <Settings className="mb-4 h-12 w-12 text-muted-foreground/70" />
+          <h3 className="mb-2 text-lg font-medium text-foreground">컴포넌트 ID가 없습니다</h3>
+          <p className="text-sm text-muted-foreground">componentConfig.type이 설정되지 않았습니다.</p>
         </div>
       );
     }
@@ -1122,12 +1122,12 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
     };
 
     return (
-      <div className="flex h-full flex-col border-r border-gray-200/60 bg-gradient-to-br from-slate-50 to-orange-50/30 shadow-sm">
+      <div className="flex h-full flex-col border-r border-border/60 bg-background shadow-sm">
         <div className="p-6">
           {/* 헤더 */}
           <div className="mb-6">
-            <h2 className="mb-1 text-lg font-semibold text-gray-900">상세 설정</h2>
-            <p className="text-sm text-gray-500">선택한 컴포넌트의 속성을 편집하세요</p>
+            <h2 className="mb-1 text-lg font-semibold text-foreground">상세 설정</h2>
+            <p className="text-sm text-muted-foreground">선택한 컴포넌트의 속성을 편집하세요</p>
           </div>
 
           {/* 컴포넌트 정보 */}
@@ -1136,14 +1136,14 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
               <span className="text-muted-foreground text-xs">
                 컴포넌트:
               </span>
-              <span className="rounded bg-green-100 px-2 py-1 text-xs font-medium text-green-800">{componentId}</span>
+              <span className="rounded bg-emerald-100 px-2 py-1 text-xs font-medium text-emerald-800">{componentId}</span>
             </div>
             {webType && currentBaseInputType && (
               <div className="flex items-center space-x-2">
                 <span className="text-muted-foreground text-xs">
                   입력 타입:
                 </span>
-                <span className="rounded bg-blue-100 px-2 py-1 text-xs font-medium text-blue-800">
+                <span className="rounded bg-primary/10 px-2 py-1 text-xs font-medium text-primary">
                   {currentBaseInputType}
                 </span>
               </div>
@@ -1153,7 +1153,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                 <span className="text-muted-foreground text-xs">
                   컬럼:
                 </span>
-                <span className="text-xs text-gray-700">{selectedComponent.columnName}</span>
+                <span className="text-xs text-foreground">{selectedComponent.columnName}</span>
               </div>
             )}
           </div>
@@ -1195,7 +1195,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
             />
 
             {/* 조건부 표시 설정 (component 타입용) */}
-            <div className="space-y-4 rounded-md border border-gray-200 p-4">
+            <div className="space-y-4 rounded-md border border-border p-4">
               <ConditionalConfigPanel
                 config={selectedComponent.conditional as ConditionalConfig | undefined}
                 onChange={(newConfig) => {
@@ -1216,7 +1216,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
             <Separator />
 
             {/* 테이블 데이터 자동 입력 섹션 (component 타입용) */}
-            <div className="space-y-4 rounded-md border border-gray-200 p-4">
+            <div className="space-y-4 rounded-md border border-border p-4">
               <h4 className="flex items-center gap-2 text-sm font-medium">
                 <Database className="h-4 w-4" />
                 테이블 데이터 자동 입력
@@ -1379,26 +1379,26 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
   return (
     <div className="flex h-full flex-col">
       {/* 헤더 */}
-      <div className="border-b border-gray-200 p-4">
+      <div className="border-b border-border p-4">
         <div className="flex items-center space-x-2">
           <Settings className="text-muted-foreground h-4 w-4" />
-          <h3 className="font-medium text-gray-900">상세 설정</h3>
+          <h3 className="font-medium text-foreground">상세 설정</h3>
         </div>
         <div className="mt-2 flex items-center space-x-2">
           <span className="text-muted-foreground text-xs">
             입력 타입:
           </span>
-          <span className="rounded bg-blue-100 px-2 py-1 text-xs font-medium text-blue-800">
+          <span className="rounded bg-primary/10 px-2 py-1 text-xs font-medium text-primary">
             {currentBaseInputType}
           </span>
         </div>
-        <div className="mt-1 text-xs text-gray-500">컬럼: {widget.columnName}</div>
+        <div className="mt-1 text-xs text-muted-foreground">컬럼: {widget.columnName}</div>
       </div>
 
       {/* 세부 타입 선택 영역 */}
-      <div className="border-b border-gray-200 bg-gray-50 p-4">
+      <div className="border-b border-border bg-muted p-4">
         <div className="space-y-2">
-          <label className="block text-sm font-medium text-gray-700">세부 타입 선택</label>
+          <label className="block text-sm font-medium text-foreground">세부 타입 선택</label>
           <Select value={localDetailType} onValueChange={handleDetailTypeChange}>
             <SelectTrigger className="h-6 w-full px-2 py-0 bg-white text-xs">
               <SelectValue placeholder="세부 타입을 선택하세요" />
@@ -1408,13 +1408,13 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                 <SelectItem key={option.value} value={option.value}>
                   <div className="flex flex-col">
                     <span className="font-medium">{option.label}</span>
-                    <span className="text-xs text-gray-500">{option.description}</span>
+                    <span className="text-xs text-muted-foreground">{option.description}</span>
                   </div>
                 </SelectItem>
               ))}
             </SelectContent>
           </Select>
-          <p className="text-xs text-gray-500">
+          <p className="text-xs text-muted-foreground">
             입력 타입 "{currentBaseInputType}"에 사용할 구체적인 형태를 선택하세요
           </p>
         </div>
@@ -1424,7 +1424,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
       <div className="flex-1 overflow-y-auto overflow-x-hidden p-4 w-full min-w-0">
         <div className="space-y-6 w-full min-w-0">
           {/* 조건부 표시 설정 */}
-          <div className="space-y-4 rounded-md border border-gray-200 p-4">
+          <div className="space-y-4 rounded-md border border-border p-4">
             <ConditionalConfigPanel
               config={widget.conditional as ConditionalConfig | undefined}
               onChange={(newConfig) => {
@@ -1445,7 +1445,7 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
           <Separator />
 
           {/* 자동 입력 섹션 */}
-          <div className="space-y-4 rounded-md border border-gray-200 p-4">
+          <div className="space-y-4 rounded-md border border-border p-4">
             <h4 className="text-sm font-medium flex items-center gap-2">
               <Database className="h-4 w-4" />
               🔥 테이블 데이터 자동 입력 (테스트)
diff --git a/frontend/components/screen/panels/FileComponentConfigPanel.tsx b/frontend/components/screen/panels/FileComponentConfigPanel.tsx
index 21c21956..812a4cdc 100644
--- a/frontend/components/screen/panels/FileComponentConfigPanel.tsx
+++ b/frontend/components/screen/panels/FileComponentConfigPanel.tsx
@@ -1230,8 +1230,8 @@ export const FileComponentConfigPanel: React.FC<FileComponentConfigPanelProps> =
           <div className="mt-4 p-3 bg-accent border border-primary/20 rounded-lg">
             <div className="flex items-center justify-between">
               <div className="flex items-center space-x-2">
-                <div className="w-2 h-2 bg-orange-500 rounded-full animate-pulse"></div>
-                <span className="text-sm font-medium text-blue-900">
+                <div className="w-2 h-2 bg-amber-500 rounded-full animate-pulse"></div>
+                <span className="text-sm font-medium text-primary">
                   {uploadedFiles.length}개 파일이 임시 저장됨
                 </span>
               </div>
diff --git a/frontend/components/screen/panels/FlowButtonGroupPanel.tsx b/frontend/components/screen/panels/FlowButtonGroupPanel.tsx
index 83720945..e5f7e805 100644
--- a/frontend/components/screen/panels/FlowButtonGroupPanel.tsx
+++ b/frontend/components/screen/panels/FlowButtonGroupPanel.tsx
@@ -82,7 +82,7 @@ export const FlowButtonGroupPanel: React.FC<FlowButtonGroupPanelProps> = ({
       <CardContent className="space-y-3">
         {groupInfos.map((groupInfo, index) => (
           <div key={groupInfo.groupId}>
-            <div className="rounded-lg border border-gray-200 bg-gray-50 p-3 space-y-2">
+            <div className="rounded-lg border border-border bg-muted p-3 space-y-2">
               {/* 그룹 헤더 */}
               <div className="flex items-center justify-between">
                 <div className="flex items-center gap-2">
@@ -106,7 +106,7 @@ export const FlowButtonGroupPanel: React.FC<FlowButtonGroupPanelProps> = ({
                     size="sm"
                     variant="ghost"
                     onClick={() => onDeleteGroup(groupInfo.groupId)}
-                    className="h-7 px-2 text-xs text-red-600 hover:bg-red-50 hover:text-red-700"
+                    className="h-7 px-2 text-xs text-destructive hover:bg-destructive/10 hover:text-destructive"
                   >
                     <Trash2 className="h-3 w-3" />
                   </Button>
@@ -117,18 +117,18 @@ export const FlowButtonGroupPanel: React.FC<FlowButtonGroupPanelProps> = ({
               <div className="flex flex-wrap items-center gap-2 text-[11px]">
                 <div className="flex items-center gap-1">
                   {groupInfo.direction === "horizontal" ? (
-                    <ArrowRight className="h-3 w-3 text-blue-600" />
+                    <ArrowRight className="h-3 w-3 text-primary" />
                   ) : (
-                    <ArrowDown className="h-3 w-3 text-blue-600" />
+                    <ArrowDown className="h-3 w-3 text-primary" />
                   )}
-                  <span className="text-gray-600">
+                  <span className="text-muted-foreground">
                     {groupInfo.direction === "horizontal" ? "가로" : "세로"}
                   </span>
                 </div>
-                <span className="text-gray-400">•</span>
-                <span className="text-gray-600">간격 {groupInfo.gap}px</span>
-                <span className="text-gray-400">•</span>
-                <span className="text-gray-600">
+                <span className="text-muted-foreground/70">•</span>
+                <span className="text-muted-foreground">간격 {groupInfo.gap}px</span>
+                <span className="text-muted-foreground/70">•</span>
+                <span className="text-muted-foreground">
                   {groupInfo.align === "start" && "시작점"}
                   {groupInfo.align === "center" && "중앙"}
                   {groupInfo.align === "end" && "끝점"}
@@ -139,10 +139,10 @@ export const FlowButtonGroupPanel: React.FC<FlowButtonGroupPanelProps> = ({
 
               {/* 그룹 ID (디버깅용) */}
               <details className="text-[10px]">
-                <summary className="cursor-pointer text-gray-500 hover:text-gray-700">
+                <summary className="cursor-pointer text-muted-foreground hover:text-foreground">
                   그룹 ID 보기
                 </summary>
-                <code className="mt-1 block rounded bg-gray-200 px-2 py-1 text-[9px]">
+                <code className="mt-1 block rounded bg-muted/80 px-2 py-1 text-[9px]">
                   {groupInfo.groupId}
                 </code>
               </details>
@@ -154,11 +154,11 @@ export const FlowButtonGroupPanel: React.FC<FlowButtonGroupPanelProps> = ({
                     key={button.id}
                     className="flex items-center gap-2 rounded bg-white px-2 py-1.5 text-xs"
                   >
-                    <div className="h-2 w-2 rounded-full bg-blue-500" />
+                    <div className="h-2 w-2 rounded-full bg-primary" />
                     <span className="flex-1 truncate font-medium">
                       {button.label || button.text || "버튼"}
                     </span>
-                    <code className="text-[10px] text-gray-400">{button.id.slice(-8)}</code>
+                    <code className="text-[10px] text-muted-foreground/70">{button.id.slice(-8)}</code>
                   </div>
                 ))}
               </div>
diff --git a/frontend/components/screen/panels/GridPanel.tsx b/frontend/components/screen/panels/GridPanel.tsx
index d58d9375..6f4007c4 100644
--- a/frontend/components/screen/panels/GridPanel.tsx
+++ b/frontend/components/screen/panels/GridPanel.tsx
@@ -154,7 +154,7 @@ export const GridPanel: React.FC<GridPanelProps> = ({
               opacity: gridSettings.gridOpacity || 0.5,
             }}
           >
-            <div className="bg-primary/20 flex h-16 items-center justify-center rounded border-2 border-dashed border-blue-300">
+            <div className="bg-primary/20 flex h-16 items-center justify-center rounded border-2 border-dashed border-primary/40">
               <span className="text-primary text-xs">10px 격자</span>
             </div>
           </div>
diff --git a/frontend/components/screen/panels/LayoutsPanel.tsx b/frontend/components/screen/panels/LayoutsPanel.tsx
index 57da317c..d4990eb4 100644
--- a/frontend/components/screen/panels/LayoutsPanel.tsx
+++ b/frontend/components/screen/panels/LayoutsPanel.tsx
@@ -147,7 +147,7 @@ export default function LayoutsPanel({
   };
 
   return (
-    <div className={`layouts-panel h-full bg-gradient-to-br from-slate-50 to-indigo-50/30 border-r border-gray-200/60 shadow-sm ${className || ""}`}>
+    <div className={`layouts-panel h-full bg-background border-r border-border/60 shadow-sm ${className || ""}`}>
       <div className="flex h-full flex-col">
         {/* 헤더 */}
         <div className="border-b p-4">
@@ -160,7 +160,7 @@ export default function LayoutsPanel({
 
           {/* 검색 */}
           <div className="relative">
-            <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform text-gray-400" />
+            <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform text-muted-foreground/70" />
             <Input
               placeholder="레이아웃 검색..."
               value={searchTerm}
@@ -190,7 +190,7 @@ export default function LayoutsPanel({
           {/* 레이아웃 목록 */}
           <div className="flex-1 overflow-auto p-4">
             {filteredLayouts.length === 0 ? (
-              <div className="flex h-32 items-center justify-center text-center text-sm text-gray-500">
+              <div className="flex h-32 items-center justify-center text-center text-sm text-muted-foreground">
                 {searchTerm ? "검색 결과가 없습니다." : "레이아웃이 없습니다."}
               </div>
             ) : (
@@ -220,7 +220,7 @@ export default function LayoutsPanel({
                         {layout.description && (
                           <p className="line-clamp-2 text-xs text-muted-foreground">{layout.description}</p>
                         )}
-                        <div className="mt-2 text-xs text-gray-500">존 개수: {layout.defaultZones.length}개</div>
+                        <div className="mt-2 text-xs text-muted-foreground">존 개수: {layout.defaultZones.length}개</div>
                       </CardContent>
                     </Card>
                   );
diff --git a/frontend/components/screen/panels/PropertiesPanel.tsx b/frontend/components/screen/panels/PropertiesPanel.tsx
index 31025238..3d014be6 100644
--- a/frontend/components/screen/panels/PropertiesPanel.tsx
+++ b/frontend/components/screen/panels/PropertiesPanel.tsx
@@ -505,7 +505,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
     return (
       <div className="flex h-full flex-col">
         {/* 헤더 */}
-        <div className="border-b border-gray-200 p-4">
+        <div className="border-b border-border p-4">
           <div className="mb-3 flex items-center justify-between">
             <div className="flex items-center space-x-2">
               <Settings className="text-muted-foreground h-5 w-5" />
@@ -546,7 +546,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
   return (
     <div className="flex h-full flex-col">
       {/* 헤더 */}
-      <div className="border-b border-gray-200 p-4">
+      <div className="border-b border-border p-4">
         <div className="mb-4 flex items-center justify-between">
           <div className="flex items-center gap-2">
             <Settings className="text-muted-foreground h-4 w-4" />
@@ -688,7 +688,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
         <div className="space-y-3">
           <div className="flex items-center space-x-2">
             <Move className="text-muted-foreground h-4 w-4" />
-            <h4 className="font-medium text-gray-900">위치 및 크기</h4>
+            <h4 className="font-medium text-foreground">위치 및 크기</h4>
           </div>
 
           <div className="grid grid-cols-2 gap-3">
@@ -716,7 +716,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
                 }}
                 className={`mt-1 ${
                   dragState?.isDragging && dragState.draggedComponent?.id === selectedComponent?.id
-                    ? "bg-accent border-blue-300 text-blue-700"
+                    ? "bg-accent border-primary/40 text-primary"
                     : ""
                 }`}
                 readOnly={dragState?.isDragging && dragState.draggedComponent?.id === selectedComponent?.id}
@@ -747,7 +747,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
                 }}
                 className={`mt-1 ${
                   dragState?.isDragging && dragState.draggedComponent?.id === selectedComponent?.id
-                    ? "bg-accent border-blue-300 text-blue-700"
+                    ? "bg-accent border-primary/40 text-primary"
                     : ""
                 }`}
                 readOnly={dragState?.isDragging && dragState.draggedComponent?.id === selectedComponent?.id}
@@ -882,7 +882,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
                           <SelectItem key={key} value={key}>
                             <div className="flex w-full items-center justify-between gap-4">
                               <span>{info.label}</span>
-                              <span className="text-xs text-gray-500">
+                              <span className="text-xs text-muted-foreground">
                                 {info.value}/12 ({info.percentage})
                               </span>
                             </div>
@@ -893,7 +893,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
 
                   {/* 시각적 프리뷰 - 기존 UI 유지, localWidthSpan 기반 */}
                   <div className="mt-3 space-y-2">
-                    <Label className="text-xs text-gray-500">미리보기</Label>
+                    <Label className="text-xs text-muted-foreground">미리보기</Label>
                     <div className="grid h-6 grid-cols-12 gap-0.5 overflow-hidden rounded border">
                       {Array.from({ length: 12 }).map((_, i) => {
                         // localWidthSpan으로부터 활성 컬럼 계산
@@ -928,12 +928,12 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
                         return (
                           <div
                             key={i}
-                            className={cn("h-full transition-colors", isActive ? "bg-blue-500" : "bg-gray-100")}
+                            className={cn("h-full transition-colors", isActive ? "bg-primary" : "bg-muted")}
                           />
                         );
                       })}
                     </div>
-                    <p className="text-center text-xs text-gray-500">
+                    <p className="text-center text-xs text-muted-foreground">
                       {(() => {
                         const spanValues: Record<string, number> = {
                           // 표준 옵션
@@ -985,9 +985,9 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
                       }}
                       className="flex-1"
                     />
-                    <span className="text-sm text-gray-500">{localInputs.height || 40}px</span>
+                    <span className="text-sm text-muted-foreground">{localInputs.height || 40}px</span>
                   </div>
-                  <p className="mt-1 text-xs text-gray-500">
+                  <p className="mt-1 text-xs text-muted-foreground">
                     높이 자유 조절 (10px ~ 2000px, 1px 단위)
                   </p>
                 </div>
@@ -995,7 +995,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
             ) : (
               <div className="bg-accent col-span-2 rounded-lg p-3 text-center">
                 <p className="text-primary text-xs">카드 레이아웃은 자동으로 크기가 계산됩니다</p>
-                <p className="mt-1 text-xs text-blue-500">카드 개수와 간격 설정은 상세설정에서 조정하세요</p>
+                <p className="mt-1 text-xs text-primary">카드 개수와 간격 설정은 상세설정에서 조정하세요</p>
               </div>
             )}
 
@@ -1028,7 +1028,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
         <div className="space-y-3">
           <div className="flex items-center space-x-2">
             <Type className="text-muted-foreground h-4 w-4" />
-            <h4 className="font-medium text-gray-900">라벨 설정</h4>
+            <h4 className="font-medium text-foreground">라벨 설정</h4>
           </div>
 
           {/* 라벨 표시 토글 */}
@@ -1112,7 +1112,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
                 폰트 굵기
               </Label>
               <select
-                className="focus:border-primary mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:ring-1 focus:ring-blue-500 focus:outline-none"
+                className="focus:border-primary mt-1 w-full rounded-md border border-input px-3 py-2 text-sm focus:ring-1 focus:ring-ring focus:outline-none"
                 value={selectedComponent.style?.labelFontWeight || "500"}
                 onChange={(e) => onUpdateProperty("style.labelFontWeight", e.target.value)}
               >
@@ -1135,7 +1135,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
                 텍스트 정렬
               </Label>
               <select
-                className="focus:border-primary mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:ring-1 focus:ring-blue-500 focus:outline-none"
+                className="focus:border-primary mt-1 w-full rounded-md border border-input px-3 py-2 text-sm focus:ring-1 focus:ring-ring focus:outline-none"
                 value={selectedComponent.style?.labelTextAlign || "left"}
                 onChange={(e) => onUpdateProperty("style.labelTextAlign", e.target.value)}
               >
@@ -1173,7 +1173,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
             <div className="space-y-3">
               <div className="flex items-center space-x-2">
                 <Group className="text-muted-foreground h-4 w-4" />
-                <h4 className="font-medium text-gray-900">그룹 설정</h4>
+                <h4 className="font-medium text-foreground">그룹 설정</h4>
               </div>
 
               <div>
@@ -1204,7 +1204,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
             <div className="space-y-3">
               <div className="flex items-center space-x-2">
                 <Settings className="text-muted-foreground h-4 w-4" />
-                <h4 className="font-medium text-gray-900">영역 설정</h4>
+                <h4 className="font-medium text-foreground">영역 설정</h4>
               </div>
 
               <div>
@@ -1246,7 +1246,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
                   레이아웃 타입
                 </Label>
                 <select
-                  className="focus:border-primary mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:ring-1 focus:ring-blue-500 focus:outline-none"
+                  className="focus:border-primary mt-1 w-full rounded-md border border-input px-3 py-2 text-sm focus:ring-1 focus:ring-ring focus:outline-none"
                   value={(selectedComponent as AreaComponent).layoutType}
                   onChange={(e) => onUpdateProperty("layoutType", e.target.value as AreaLayoutType)}
                 >
@@ -1309,7 +1309,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
                   <div>
                     <Label className="text-xs">정렬 방식</Label>
                     <select
-                      className="focus:border-primary mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:ring-1 focus:ring-blue-500 focus:outline-none"
+                      className="focus:border-primary mt-1 w-full rounded-md border border-input px-3 py-2 text-sm focus:ring-1 focus:ring-ring focus:outline-none"
                       value={(selectedComponent as AreaComponent).layoutConfig?.justifyContent || "flex-start"}
                       onChange={(e) => onUpdateProperty("layoutConfig.justifyContent", e.target.value)}
                     >
@@ -1344,7 +1344,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
                   <div>
                     <Label className="text-xs">사이드바 위치</Label>
                     <select
-                      className="focus:border-primary mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:ring-1 focus:ring-blue-500 focus:outline-none"
+                      className="focus:border-primary mt-1 w-full rounded-md border border-input px-3 py-2 text-sm focus:ring-1 focus:ring-ring focus:outline-none"
                       value={(selectedComponent as AreaComponent).layoutConfig?.sidebarPosition || "left"}
                       onChange={(e) => onUpdateProperty("layoutConfig.sidebarPosition", e.target.value)}
                     >
diff --git a/frontend/components/screen/panels/ResolutionPanel.tsx b/frontend/components/screen/panels/ResolutionPanel.tsx
index c7aecfd4..f801541e 100644
--- a/frontend/components/screen/panels/ResolutionPanel.tsx
+++ b/frontend/components/screen/panels/ResolutionPanel.tsx
@@ -70,7 +70,7 @@ const ResolutionPanel: React.FC<ResolutionPanelProps> = ({ currentResolution, on
       case "desktop":
         return "text-primary";
       case "tablet":
-        return "text-green-600";
+        return "text-emerald-600";
       case "mobile":
         return "text-purple-600";
       default:
@@ -89,7 +89,7 @@ const ResolutionPanel: React.FC<ResolutionPanelProps> = ({ currentResolution, on
           </SelectTrigger>
           <SelectContent>
             {/* Desktop */}
-            <div className="px-2 py-1 text-xs font-medium text-gray-500">데스크톱</div>
+            <div className="px-2 py-1 text-xs font-medium text-muted-foreground">데스크톱</div>
             {SCREEN_RESOLUTIONS.filter((r) => r.category === "desktop").map((resolution) => (
               <SelectItem key={resolution.name} value={resolution.name}>
                 <div className="flex items-center space-x-2">
@@ -100,18 +100,18 @@ const ResolutionPanel: React.FC<ResolutionPanelProps> = ({ currentResolution, on
             ))}
 
             {/* Tablet */}
-            <div className="px-2 py-1 text-xs font-medium text-gray-500">태블릿</div>
+            <div className="px-2 py-1 text-xs font-medium text-muted-foreground">태블릿</div>
             {SCREEN_RESOLUTIONS.filter((r) => r.category === "tablet").map((resolution) => (
               <SelectItem key={resolution.name} value={resolution.name}>
                 <div className="flex items-center space-x-2">
-                  <Tablet className="h-4 w-4 text-green-600" />
+                  <Tablet className="h-4 w-4 text-emerald-600" />
                   <span>{resolution.name}</span>
                 </div>
               </SelectItem>
             ))}
 
             {/* Mobile */}
-            <div className="px-2 py-1 text-xs font-medium text-gray-500">모바일</div>
+            <div className="px-2 py-1 text-xs font-medium text-muted-foreground">모바일</div>
             {SCREEN_RESOLUTIONS.filter((r) => r.category === "mobile").map((resolution) => (
               <SelectItem key={resolution.name} value={resolution.name}>
                 <div className="flex items-center space-x-2">
@@ -122,7 +122,7 @@ const ResolutionPanel: React.FC<ResolutionPanelProps> = ({ currentResolution, on
             ))}
 
             {/* Custom */}
-            <div className="px-2 py-1 text-xs font-medium text-gray-500">사용자 정의</div>
+            <div className="px-2 py-1 text-xs font-medium text-muted-foreground">사용자 정의</div>
             <SelectItem value="custom">
               <div className="flex items-center space-x-2">
                 <Settings className="text-muted-foreground h-4 w-4" />
@@ -135,7 +135,7 @@ const ResolutionPanel: React.FC<ResolutionPanelProps> = ({ currentResolution, on
 
       {/* 사용자 정의 해상도 */}
       {selectedPreset === "custom" && (
-        <div className="space-y-3 rounded-lg border bg-gray-50 p-3">
+        <div className="space-y-3 rounded-lg border bg-muted p-3">
           <Label className="text-sm font-medium">사용자 정의 해상도</Label>
           <div className="grid grid-cols-2 gap-3">
             <div className="space-y-1">
diff --git a/frontend/components/screen/panels/ResponsiveConfigPanel.tsx b/frontend/components/screen/panels/ResponsiveConfigPanel.tsx
index 1565b58e..40bb7351 100644
--- a/frontend/components/screen/panels/ResponsiveConfigPanel.tsx
+++ b/frontend/components/screen/panels/ResponsiveConfigPanel.tsx
@@ -53,7 +53,7 @@ export const ResponsiveConfigPanel: React.FC<ResponsiveConfigPanelProps> = ({ co
           <Label htmlFor="smartDefaults">스마트 기본값 사용 (권장)</Label>
         </div>
 
-        <div className="text-xs text-gray-500">
+        <div className="text-xs text-muted-foreground">
           스마트 기본값은 컴포넌트 크기에 따라 자동으로 반응형 레이아웃을 생성합니다.
         </div>
 
@@ -122,7 +122,7 @@ export const ResponsiveConfigPanel: React.FC<ResponsiveConfigPanelProps> = ({ co
                     });
                   }}
                 />
-                <div className="text-xs text-gray-500">작은 숫자가 먼저 표시됩니다.</div>
+                <div className="text-xs text-muted-foreground">작은 숫자가 먼저 표시됩니다.</div>
               </div>
 
               {/* 숨김 */}
diff --git a/frontend/components/screen/panels/RowSettingsPanel.tsx b/frontend/components/screen/panels/RowSettingsPanel.tsx
index 49a3d05f..f4d44ad5 100644
--- a/frontend/components/screen/panels/RowSettingsPanel.tsx
+++ b/frontend/components/screen/panels/RowSettingsPanel.tsx
@@ -23,7 +23,7 @@ export const RowSettingsPanel: React.FC<RowSettingsPanelProps> = ({ row, onUpdat
       <div className="flex items-center gap-2">
         <Rows className="text-primary h-5 w-5" />
         <h3 className="text-lg font-semibold">행 설정</h3>
-        <span className="text-sm text-gray-500">#{row.rowIndex + 1}</span>
+        <span className="text-sm text-muted-foreground">#{row.rowIndex + 1}</span>
       </div>
 
       <Separator />
@@ -49,7 +49,7 @@ export const RowSettingsPanel: React.FC<RowSettingsPanelProps> = ({ row, onUpdat
         {/* 고정 높이 입력 */}
         {row.height === "fixed" && (
           <div>
-            <Label className="text-xs text-gray-500">높이 (px)</Label>
+            <Label className="text-xs text-muted-foreground">높이 (px)</Label>
             <Input
               type="number"
               value={row.fixedHeight || 100}
@@ -66,7 +66,7 @@ export const RowSettingsPanel: React.FC<RowSettingsPanelProps> = ({ row, onUpdat
         {/* 최소 높이 입력 */}
         {row.height === "min" && (
           <div>
-            <Label className="text-xs text-gray-500">최소 높이 (px)</Label>
+            <Label className="text-xs text-muted-foreground">최소 높이 (px)</Label>
             <Input
               type="number"
               value={row.minHeight || 50}
@@ -83,7 +83,7 @@ export const RowSettingsPanel: React.FC<RowSettingsPanelProps> = ({ row, onUpdat
         {/* 최대 높이 입력 */}
         {row.height === "max" && (
           <div>
-            <Label className="text-xs text-gray-500">최대 높이 (px)</Label>
+            <Label className="text-xs text-muted-foreground">최대 높이 (px)</Label>
             <Input
               type="number"
               value={row.maxHeight || 500}
@@ -116,7 +116,7 @@ export const RowSettingsPanel: React.FC<RowSettingsPanelProps> = ({ row, onUpdat
             </Button>
           ))}
         </div>
-        <p className="text-xs text-gray-500">현재: {GAP_PRESETS[row.gap].pixels}</p>
+        <p className="text-xs text-muted-foreground">현재: {GAP_PRESETS[row.gap].pixels}</p>
       </div>
 
       <Separator />
@@ -137,7 +137,7 @@ export const RowSettingsPanel: React.FC<RowSettingsPanelProps> = ({ row, onUpdat
             </Button>
           ))}
         </div>
-        <p className="text-xs text-gray-500">현재: {GAP_PRESETS[row.padding].pixels}</p>
+        <p className="text-xs text-muted-foreground">현재: {GAP_PRESETS[row.padding].pixels}</p>
       </div>
 
       <Separator />
@@ -145,7 +145,7 @@ export const RowSettingsPanel: React.FC<RowSettingsPanelProps> = ({ row, onUpdat
       {/* 수평 정렬 */}
       <div className="space-y-3">
         <div className="flex items-center gap-2">
-          <AlignHorizontalJustifyCenter className="h-4 w-4 text-gray-600" />
+          <AlignHorizontalJustifyCenter className="h-4 w-4 text-muted-foreground" />
           <Label className="text-sm font-medium">수평 정렬</Label>
         </div>
         <div className="grid grid-cols-2 gap-2">
@@ -185,7 +185,7 @@ export const RowSettingsPanel: React.FC<RowSettingsPanelProps> = ({ row, onUpdat
       {/* 수직 정렬 */}
       <div className="space-y-3">
         <div className="flex items-center gap-2">
-          <AlignVerticalJustifyCenter className="h-4 w-4 text-gray-600" />
+          <AlignVerticalJustifyCenter className="h-4 w-4 text-muted-foreground" />
           <Label className="text-sm font-medium">수직 정렬</Label>
         </div>
         <div className="grid grid-cols-2 gap-2">
diff --git a/frontend/components/screen/panels/TablesPanel.tsx b/frontend/components/screen/panels/TablesPanel.tsx
index cc5da2fc..2d1da469 100644
--- a/frontend/components/screen/panels/TablesPanel.tsx
+++ b/frontend/components/screen/panels/TablesPanel.tsx
@@ -72,16 +72,16 @@ const getWidgetIcon = (widgetType: WebType) => {
       return <Type className="text-primary h-3 w-3" />;
     case "number":
     case "decimal":
-      return <Hash className="h-3 w-3 text-green-600" />;
+      return <Hash className="h-3 w-3 text-emerald-600" />;
     case "date":
     case "datetime":
       return <Calendar className="h-3 w-3 text-purple-600" />;
     case "select":
     case "dropdown":
-      return <List className="h-3 w-3 text-orange-600" />;
+      return <List className="h-3 w-3 text-amber-600" />;
     case "textarea":
     case "text_area":
-      return <AlignLeft className="h-3 w-3 text-indigo-600" />;
+      return <AlignLeft className="h-3 w-3 text-primary" />;
     case "boolean":
     case "checkbox":
       return <CheckSquare className="text-primary h-3 w-3" />;
@@ -90,9 +90,9 @@ const getWidgetIcon = (widgetType: WebType) => {
     case "entity":
       return <Building className="h-3 w-3 text-cyan-600" />;
     case "file":
-      return <File className="h-3 w-3 text-yellow-600" />;
+      return <File className="h-3 w-3 text-amber-600" />;
     default:
-      return <Type className="h-3 w-3 text-gray-500" />;
+      return <Type className="h-3 w-3 text-muted-foreground" />;
   }
 };
 
@@ -301,21 +301,21 @@ export const TablesPanel: React.FC<TablesPanelProps> = ({
                 {/* 검색 */}
                 <div className="border-b p-2">
                   <div className="relative">
-                    <Search className="absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
+                    <Search className="absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground/70" />
                     <input
                       type="text"
                       placeholder="테이블 검색..."
                       value={tableSearchTerm}
                       onChange={(e) => setTableSearchTerm(e.target.value)}
                       autoFocus
-                      className="w-full rounded-md border px-8 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                      className="w-full rounded-md border px-8 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
                     />
                     {tableSearchTerm && (
                       <button
                         onClick={() => setTableSearchTerm("")}
                         className="absolute right-2 top-1/2 -translate-y-1/2"
                       >
-                        <X className="h-3.5 w-3.5 text-gray-400" />
+                        <X className="h-3.5 w-3.5 text-muted-foreground/70" />
                       </button>
                     )}
                   </div>
@@ -324,9 +324,9 @@ export const TablesPanel: React.FC<TablesPanelProps> = ({
                 {/* 테이블 목록 */}
                 <div className="max-h-60 overflow-y-auto">
                   {loadingAllTables ? (
-                    <div className="p-4 text-center text-sm text-gray-500">로드 중...</div>
+                    <div className="p-4 text-center text-sm text-muted-foreground">로드 중...</div>
                   ) : filteredAllTables.length === 0 ? (
-                    <div className="p-4 text-center text-sm text-gray-500">
+                    <div className="p-4 text-center text-sm text-muted-foreground">
                       {tableSearchTerm ? "검색 결과 없음" : "테이블 없음"}
                     </div>
                   ) : (
@@ -334,12 +334,12 @@ export const TablesPanel: React.FC<TablesPanelProps> = ({
                       <button
                         key={t.tableName}
                         onClick={() => handleTableSelect(t.tableName)}
-                        className="flex w-full items-center gap-2 px-3 py-2 text-left text-sm hover:bg-gray-100"
+                        className="flex w-full items-center gap-2 px-3 py-2 text-left text-sm hover:bg-muted"
                       >
-                        <Database className="h-3.5 w-3.5 text-blue-600" />
+                        <Database className="h-3.5 w-3.5 text-primary" />
                         <div className="min-w-0 flex-1">
                           <div className="truncate font-medium">{t.displayName}</div>
-                          <div className="truncate text-xs text-gray-500">{t.tableName}</div>
+                          <div className="truncate text-xs text-muted-foreground">{t.tableName}</div>
                         </div>
                       </button>
                     ))
@@ -481,7 +481,7 @@ export const TablesPanel: React.FC<TablesPanelProps> = ({
                                 </div>
                               </div>
                               <div className="flex flex-shrink-0 items-center gap-1">
-                                <Badge variant="secondary" className="h-4 border-gray-300 bg-gray-100 px-1 text-[9px] text-gray-600">
+                                <Badge variant="secondary" className="h-4 border-input bg-muted px-1 text-[9px] text-muted-foreground">
                                   읽기
                                 </Badge>
                                 <Badge variant="outline" className="h-4 border-cyan-300 px-1.5 text-[10px]">
diff --git a/frontend/components/screen/panels/TemplatesPanel.tsx b/frontend/components/screen/panels/TemplatesPanel.tsx
index b869410d..5a34d8f9 100644
--- a/frontend/components/screen/panels/TemplatesPanel.tsx
+++ b/frontend/components/screen/panels/TemplatesPanel.tsx
@@ -487,17 +487,17 @@ export const TemplatesPanel: React.FC<TemplatesPanelProps> = ({ onDragStart }) =
   });
 
   return (
-    <div className="flex h-full flex-col bg-slate-50 p-6 border-r border-gray-200/60 shadow-sm">
+    <div className="flex h-full flex-col bg-background p-6 border-r border-border/60 shadow-sm">
       {/* 헤더 */}
       <div className="mb-6">
-        <h2 className="text-lg font-semibold text-gray-900 mb-1">템플릿</h2>
-        <p className="text-sm text-gray-500">캔버스로 드래그하여 화면을 구성하세요</p>
+        <h2 className="text-lg font-semibold text-foreground mb-1">템플릿</h2>
+        <p className="text-sm text-muted-foreground">캔버스로 드래그하여 화면을 구성하세요</p>
       </div>
 
       {/* 검색 */}
       <div className="space-y-4">
         <div className="relative">
-          <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400" />
+          <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-muted-foreground/70" />
           <Input
             placeholder="템플릿 검색..."
             value={searchTerm}
@@ -541,14 +541,14 @@ export const TemplatesPanel: React.FC<TemplatesPanelProps> = ({ onDragStart }) =
         {isLoading ? (
           <div className="flex h-32 items-center justify-center">
             <LoadingSpinner />
-            <span className="ml-2 text-sm text-gray-500">템플릿 로딩 중...</span>
+            <span className="ml-2 text-sm text-muted-foreground">템플릿 로딩 중...</span>
           </div>
         ) : filteredTemplates.length === 0 ? (
-          <div className="flex h-32 items-center justify-center text-center text-gray-500">
+          <div className="flex h-32 items-center justify-center text-center text-muted-foreground">
             <div className="p-8">
-              <FileText className="mx-auto mb-3 h-12 w-12 text-gray-300" />
+              <FileText className="mx-auto mb-3 h-12 w-12 text-muted-foreground/50" />
               <p className="text-sm font-medium text-muted-foreground">템플릿을 찾을 수 없습니다</p>
-              <p className="text-xs text-gray-400 mt-1">검색어나 필터를 조정해보세요</p>
+              <p className="text-xs text-muted-foreground/70 mt-1">검색어나 필터를 조정해보세요</p>
             </div>
           </div>
         ) : (
@@ -567,27 +567,27 @@ export const TemplatesPanel: React.FC<TemplatesPanelProps> = ({ onDragStart }) =
                 e.currentTarget.style.opacity = '1';
                 e.currentTarget.style.transform = 'none';
               }}
-              className="group cursor-grab rounded-lg border border-gray-200/40 bg-white/90 backdrop-blur-sm p-6 shadow-sm transition-all duration-300 hover:bg-white hover:shadow-lg hover:shadow-blue-500/15 hover:scale-[1.02] hover:border-blue-300/60 hover:-translate-y-1 active:cursor-grabbing active:scale-[0.98] active:translate-y-0"
+              className="group cursor-grab rounded-lg border border-border/40 bg-white/90 backdrop-blur-sm p-6 shadow-sm transition-all duration-300 hover:bg-white hover:shadow-lg hover:shadow-blue-500/15 hover:scale-[1.02] hover:border-primary/40/60 hover:-translate-y-1 active:cursor-grabbing active:scale-[0.98] active:translate-y-0"
             >
               <div className="flex items-start space-x-4">
-                <div className="flex h-14 w-14 items-center justify-center rounded-xl bg-gradient-to-br from-blue-100 to-indigo-100 text-blue-700 shadow-md group-hover:shadow-lg group-hover:scale-110 transition-all duration-300">
+                <div className="flex h-14 w-14 items-center justify-center rounded-xl bg-primary/10 text-primary group-hover:bg-primary/15 group-hover:scale-110 transition-all duration-300">
                   {template.icon}
                 </div>
                 <div className="min-w-0 flex-1">
                   <div className="flex items-start justify-between mb-2">
-                    <h4 className="font-semibold text-gray-900 text-sm leading-tight">{template.name}</h4>
-                    <Badge variant="secondary" className="text-xs bg-blue-50 text-blue-600 border-0 ml-2 px-2 py-1 rounded-full font-medium">
+                    <h4 className="font-semibold text-foreground text-sm leading-tight">{template.name}</h4>
+                    <Badge variant="secondary" className="text-xs bg-primary/10 text-primary border-0 ml-2 px-2 py-1 rounded-full font-medium">
                       {template.components.length}
                     </Badge>
                   </div>
-                  <p className="text-xs text-gray-500 line-clamp-2 leading-relaxed mb-3">{template.description}</p>
+                  <p className="text-xs text-muted-foreground line-clamp-2 leading-relaxed mb-3">{template.description}</p>
                   <div className="flex items-center justify-between">
-                    <div className="flex items-center space-x-2 text-xs text-gray-400">
-                      <span className="bg-gradient-to-r from-blue-100 to-indigo-100 px-3 py-1 rounded-full font-medium text-blue-700 shadow-sm">
+                    <div className="flex items-center space-x-2 text-xs text-muted-foreground/70">
+                      <span className="bg-primary/10 px-3 py-1 rounded-full font-medium text-primary">
                         {template.defaultSize.width}×{template.defaultSize.height}
                       </span>
                     </div>
-                    <span className="text-xs font-medium text-primary capitalize bg-gradient-to-r from-blue-50 to-indigo-50 px-3 py-1 rounded-full border border-primary/20/50">
+                    <span className="text-xs font-medium text-primary capitalize bg-primary/5 px-3 py-1 rounded-full border border-primary/20">
                       {template.category}
                     </span>
                   </div>
@@ -599,12 +599,12 @@ export const TemplatesPanel: React.FC<TemplatesPanelProps> = ({ onDragStart }) =
       </div>
 
       {/* 도움말 */}
-      <div className="rounded-xl bg-gradient-to-r from-blue-50 to-indigo-50 border border-blue-100/60 p-4 mt-6">
+      <div className="rounded-lg bg-primary/5 border border-primary/10 p-4 mt-6">
         <div className="flex items-start space-x-3">
           <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary/20 text-primary">
             <Info className="h-4 w-4" />
           </div>
-          <div className="text-xs text-blue-800">
+          <div className="text-xs text-primary">
             <p className="font-semibold mb-1">사용 방법</p>
             <p className="text-primary leading-relaxed">템플릿을 캔버스로 드래그하여 빠르게 화면을 구성하세요.</p>
           </div>
diff --git a/frontend/components/screen/panels/V2PropertiesPanel.tsx b/frontend/components/screen/panels/V2PropertiesPanel.tsx
index 90e44c8e..b3377139 100644
--- a/frontend/components/screen/panels/V2PropertiesPanel.tsx
+++ b/frontend/components/screen/panels/V2PropertiesPanel.tsx
@@ -943,19 +943,31 @@ export const V2PropertiesPanel: React.FC<V2PropertiesPanelProps> = ({
 
         {/* 옵션 - 입력 필드에서는 항상 표시, 기타 컴포넌트는 속성이 정의된 경우만 표시 */}
         <div className="grid grid-cols-2 gap-2">
-          {(isInputField || widget.required !== undefined) && (
-            <div className="flex items-center space-x-2">
-              <Checkbox
-                checked={widget.required === true || selectedComponent.componentConfig?.required === true}
-                onCheckedChange={(checked) => {
-                  handleUpdate("required", checked);
-                  handleUpdate("componentConfig.required", checked);
-                }}
-                className="h-4 w-4"
-              />
-              <Label className="text-xs">필수</Label>
-            </div>
-          )}
+          {(isInputField || widget.required !== undefined) && (() => {
+            const colName = widget.columnName || selectedComponent?.columnName;
+            const colMeta = colName ? currentTable?.columns?.find(
+              (c: any) => (c.columnName || c.column_name || "").toLowerCase() === colName.toLowerCase()
+            ) : null;
+            const isNotNull = colMeta && ((colMeta as any).isNullable === "NO" || (colMeta as any).isNullable === "N" || (colMeta as any).is_nullable === "NO" || (colMeta as any).is_nullable === "N");
+            return (
+              <div className="flex items-center space-x-2">
+                <Checkbox
+                  checked={isNotNull || widget.required === true || selectedComponent.componentConfig?.required === true}
+                  onCheckedChange={(checked) => {
+                    if (isNotNull) return;
+                    handleUpdate("required", checked);
+                    handleUpdate("componentConfig.required", checked);
+                  }}
+                  disabled={!!isNotNull}
+                  className="h-4 w-4"
+                />
+                <Label className="text-xs">
+                  필수
+                  {isNotNull && <span className="text-muted-foreground ml-1">(NOT NULL)</span>}
+                </Label>
+              </div>
+            );
+          })()}
           {(isInputField || widget.readonly !== undefined) && (
             <div className="flex items-center space-x-2">
               <Checkbox
@@ -1333,7 +1345,7 @@ export const V2PropertiesPanel: React.FC<V2PropertiesPanelProps> = ({
 
           {/* 🆕 테이블 데이터 자동 입력 (모든 widget 컴포넌트) */}
           <Separator />
-          <div className="space-y-3 border-4 border-red-500 bg-yellow-100 p-4">
+          <div className="space-y-3 border-4 border-destructive bg-amber-100 p-4">
             <div className="flex items-center gap-2">
               <Database className="text-primary h-4 w-4" />
               <h4 className="text-xs font-semibold">테이블 데이터 자동 입력</h4>
@@ -1502,7 +1514,7 @@ export const V2PropertiesPanel: React.FC<V2PropertiesPanelProps> = ({
                   <Zap className="text-primary h-3 w-3" />
                   <h4 className="text-xs font-semibold">조건부 표시</h4>
                 </div>
-                <div className="rounded-md border border-gray-200 p-2">
+                <div className="rounded-md border border-border p-2">
                   <ConditionalConfigPanel
                     config={
                       (selectedComponent as any).conditional || {
diff --git a/frontend/components/screen/panels/WebTypeConfigPanel.tsx b/frontend/components/screen/panels/WebTypeConfigPanel.tsx
index da190e91..015ba162 100644
--- a/frontend/components/screen/panels/WebTypeConfigPanel.tsx
+++ b/frontend/components/screen/panels/WebTypeConfigPanel.tsx
@@ -98,7 +98,7 @@ export const WebTypeConfigPanel: React.FC<WebTypeConfigPanelProps> = ({ webType,
                   onUpdateConfig({ ...config, options: newOptions });
                 }}
               >
-                <Trash2 className="h-4 w-4 text-red-500" />
+                <Trash2 className="h-4 w-4 text-destructive" />
               </Button>
             </div>
           ))}
@@ -150,7 +150,7 @@ export const WebTypeConfigPanel: React.FC<WebTypeConfigPanelProps> = ({ webType,
 
         <div className="grid grid-cols-2 gap-2">
           <div>
-            <Label htmlFor="min" className="text-xs text-gray-500">
+            <Label htmlFor="min" className="text-xs text-muted-foreground">
               최소값
             </Label>
             <Input
@@ -167,7 +167,7 @@ export const WebTypeConfigPanel: React.FC<WebTypeConfigPanelProps> = ({ webType,
             />
           </div>
           <div>
-            <Label htmlFor="max" className="text-xs text-gray-500">
+            <Label htmlFor="max" className="text-xs text-muted-foreground">
               최대값
             </Label>
             <Input
@@ -186,7 +186,7 @@ export const WebTypeConfigPanel: React.FC<WebTypeConfigPanelProps> = ({ webType,
         </div>
 
         <div>
-          <Label htmlFor="step" className="text-xs text-gray-500">
+          <Label htmlFor="step" className="text-xs text-muted-foreground">
             증감 단위
           </Label>
           <Input
@@ -218,7 +218,7 @@ export const WebTypeConfigPanel: React.FC<WebTypeConfigPanelProps> = ({ webType,
         <Label className="text-sm font-medium">날짜/시간 형식 설정</Label>
 
         <div>
-          <Label htmlFor="format" className="text-xs text-gray-500">
+          <Label htmlFor="format" className="text-xs text-muted-foreground">
             표시 형식
           </Label>
           <Select
@@ -293,7 +293,7 @@ export const WebTypeConfigPanel: React.FC<WebTypeConfigPanelProps> = ({ webType,
 
         <div className="grid grid-cols-2 gap-2">
           <div>
-            <Label htmlFor="minLength" className="text-xs text-gray-500">
+            <Label htmlFor="minLength" className="text-xs text-muted-foreground">
               최소 길이
             </Label>
             <Input
@@ -310,7 +310,7 @@ export const WebTypeConfigPanel: React.FC<WebTypeConfigPanelProps> = ({ webType,
             />
           </div>
           <div>
-            <Label htmlFor="maxLength" className="text-xs text-gray-500">
+            <Label htmlFor="maxLength" className="text-xs text-muted-foreground">
               최대 길이
             </Label>
             <Input
@@ -330,7 +330,7 @@ export const WebTypeConfigPanel: React.FC<WebTypeConfigPanelProps> = ({ webType,
 
         {(webType === "text" || webType === "textarea") && (
           <div>
-            <Label htmlFor="pattern" className="text-xs text-gray-500">
+            <Label htmlFor="pattern" className="text-xs text-muted-foreground">
               정규식 패턴 (선택)
             </Label>
             <Input
@@ -344,7 +344,7 @@ export const WebTypeConfigPanel: React.FC<WebTypeConfigPanelProps> = ({ webType,
                 });
               }}
             />
-            <p className="mt-1 text-xs text-gray-400">입력값 검증에 사용할 정규식 패턴</p>
+            <p className="mt-1 text-xs text-muted-foreground/70">입력값 검증에 사용할 정규식 패턴</p>
           </div>
         )}
       </div>
@@ -362,7 +362,7 @@ export const WebTypeConfigPanel: React.FC<WebTypeConfigPanelProps> = ({ webType,
         <Label className="text-sm font-medium">파일 업로드 설정</Label>
 
         <div>
-          <Label htmlFor="accept" className="text-xs text-gray-500">
+          <Label htmlFor="accept" className="text-xs text-muted-foreground">
             허용 파일 타입
           </Label>
           <Input
@@ -373,11 +373,11 @@ export const WebTypeConfigPanel: React.FC<WebTypeConfigPanelProps> = ({ webType,
               onUpdateConfig({ ...config, accept: e.target.value });
             }}
           />
-          <p className="mt-1 text-xs text-gray-400">쉼표로 구분된 파일 확장자 또는 MIME 타입</p>
+          <p className="mt-1 text-xs text-muted-foreground/70">쉼표로 구분된 파일 확장자 또는 MIME 타입</p>
         </div>
 
         <div>
-          <Label htmlFor="maxSize" className="text-xs text-gray-500">
+          <Label htmlFor="maxSize" className="text-xs text-muted-foreground">
             최대 파일 크기 (MB)
           </Label>
           <Input
@@ -412,7 +412,7 @@ export const WebTypeConfigPanel: React.FC<WebTypeConfigPanelProps> = ({ webType,
 
   // 기본 메시지 (설정 불필요)
   return (
-    <div className="space-y-2 text-sm text-gray-500">
+    <div className="space-y-2 text-sm text-muted-foreground">
       <p>이 웹타입은 추가 설정이 필요하지 않습니다.</p>
     </div>
   );
diff --git a/frontend/components/screen/panels/webtype-configs/CheckboxTypeConfigPanel.tsx b/frontend/components/screen/panels/webtype-configs/CheckboxTypeConfigPanel.tsx
index b483d74d..9002b69e 100644
--- a/frontend/components/screen/panels/webtype-configs/CheckboxTypeConfigPanel.tsx
+++ b/frontend/components/screen/panels/webtype-configs/CheckboxTypeConfigPanel.tsx
@@ -190,8 +190,8 @@ export const CheckboxTypeConfigPanel: React.FC<CheckboxTypeConfigPanelProps> = (
       </div>
 
       {/* 미리보기 */}
-      <div className="rounded-md border bg-gray-50 p-3">
-        <Label className="text-sm font-medium text-gray-700">미리보기</Label>
+      <div className="rounded-md border bg-muted p-3">
+        <Label className="text-sm font-medium text-foreground">미리보기</Label>
         <div className="mt-2 flex items-center space-x-2">
           {localValues.labelPosition === "left" && localValues.checkboxText && (
             <span className="text-xs">{localValues.checkboxText}</span>
@@ -210,7 +210,7 @@ export const CheckboxTypeConfigPanel: React.FC<CheckboxTypeConfigPanelProps> = (
           )}
           {localValues.labelPosition === "left" && <Checkbox checked={localValues.defaultChecked} />}
         </div>
-        <div className="mt-2 text-xs text-gray-500">
+        <div className="mt-2 text-xs text-muted-foreground">
           체크됨: {localValues.trueValue}, 해제됨: {localValues.falseValue}
           {localValues.indeterminate && ", 불확정 상태 지원"}
         </div>
@@ -219,8 +219,8 @@ export const CheckboxTypeConfigPanel: React.FC<CheckboxTypeConfigPanelProps> = (
       {/* 안내 메시지 */}
       {localValues.indeterminate && (
         <div className="bg-accent rounded-md p-3">
-          <div className="text-sm font-medium text-blue-900">불확정 상태</div>
-          <div className="mt-1 text-xs text-blue-800">
+          <div className="text-sm font-medium text-primary">불확정 상태</div>
+          <div className="mt-1 text-xs text-primary">
             체크박스가 부분적으로 선택된 상태를 나타낼 수 있습니다. 주로 트리 구조에서 일부 하위 항목만 선택된 경우에
             사용됩니다.
           </div>
diff --git a/frontend/components/screen/panels/webtype-configs/CodeTypeConfigPanel.tsx b/frontend/components/screen/panels/webtype-configs/CodeTypeConfigPanel.tsx
index 08b3fd1a..414b3927 100644
--- a/frontend/components/screen/panels/webtype-configs/CodeTypeConfigPanel.tsx
+++ b/frontend/components/screen/panels/webtype-configs/CodeTypeConfigPanel.tsx
@@ -167,7 +167,7 @@ export const CodeTypeConfigPanel: React.FC<CodeTypeConfigPanelProps> = ({ config
             step={1}
             className="w-full"
           />
-          <div className="mt-1 flex justify-between text-xs text-gray-500">
+          <div className="mt-1 flex justify-between text-xs text-muted-foreground">
             <span>10px</span>
             <span>24px</span>
           </div>
@@ -240,18 +240,18 @@ export const CodeTypeConfigPanel: React.FC<CodeTypeConfigPanelProps> = ({ config
       </div>
 
       {/* 미리보기 */}
-      <div className="rounded-md border bg-gray-50 p-3">
-        <Label className="text-sm font-medium text-gray-700">미리보기</Label>
+      <div className="rounded-md border bg-muted p-3">
+        <Label className="text-sm font-medium text-foreground">미리보기</Label>
         <div className="mt-2">
           <div
             className={`rounded border p-3 font-mono ${
-              localValues.theme === "dark" ? "bg-gray-900 text-white" : "bg-white text-black"
+              localValues.theme === "dark" ? "bg-foreground text-white" : "bg-white text-black"
             }`}
             style={{ fontSize: `${localValues.fontSize}px` }}
           >
             <div className="flex">
               {localValues.lineNumbers && (
-                <div className="mr-3 text-gray-400">
+                <div className="mr-3 text-muted-foreground/70">
                   <div>1</div>
                   <div>2</div>
                   <div>3</div>
@@ -263,7 +263,7 @@ export const CodeTypeConfigPanel: React.FC<CodeTypeConfigPanelProps> = ({ config
             </div>
           </div>
         </div>
-        <div className="mt-2 text-xs text-gray-500">
+        <div className="mt-2 text-xs text-muted-foreground">
           언어: {languages.find((l) => l.value === localValues.language)?.label}, 테마:{" "}
           {themes.find((t) => t.value === localValues.theme)?.label}, 폰트: {localValues.fontSize}px
           {localValues.readOnly && ", 읽기전용"}
@@ -272,8 +272,8 @@ export const CodeTypeConfigPanel: React.FC<CodeTypeConfigPanelProps> = ({ config
 
       {/* 안내 메시지 */}
       <div className="bg-accent rounded-md p-3">
-        <div className="text-sm font-medium text-blue-900">코드 에디터 설정</div>
-        <div className="mt-1 text-xs text-blue-800">
+        <div className="text-sm font-medium text-primary">코드 에디터 설정</div>
+        <div className="mt-1 text-xs text-primary">
           • 문법 강조 표시는 선택된 언어에 따라 적용됩니다
           <br />
           • 자동 포맷팅은 저장 시 또는 단축키로 실행됩니다
diff --git a/frontend/components/screen/panels/webtype-configs/EntityTypeConfigPanel.tsx b/frontend/components/screen/panels/webtype-configs/EntityTypeConfigPanel.tsx
index 1cae7dce..c4ade093 100644
--- a/frontend/components/screen/panels/webtype-configs/EntityTypeConfigPanel.tsx
+++ b/frontend/components/screen/panels/webtype-configs/EntityTypeConfigPanel.tsx
@@ -192,8 +192,8 @@ export const EntityTypeConfigPanel: React.FC<EntityTypeConfigPanelProps> = ({ co
         {/* 현재 선택된 표시 컬럼들 */}
         <div className="space-y-2">
           {localValues.displayColumns.map((column, index) => (
-            <div key={index} className="flex items-center space-x-2 rounded border bg-gray-50 p-2">
-              <Database className="h-4 w-4 text-gray-500" />
+            <div key={index} className="flex items-center space-x-2 rounded border bg-muted p-2">
+              <Database className="h-4 w-4 text-muted-foreground" />
               <span className="flex-1 text-sm font-medium">{column}</span>
               <Button size="sm" variant="outline" onClick={() => removeDisplayColumn(index)}>
                 <X className="h-3 w-3" />
@@ -202,7 +202,7 @@ export const EntityTypeConfigPanel: React.FC<EntityTypeConfigPanelProps> = ({ co
           ))}
 
           {localValues.displayColumns.length === 0 && (
-            <div className="text-sm text-gray-500 italic">표시할 컬럼을 추가해주세요</div>
+            <div className="text-sm text-muted-foreground italic">표시할 컬럼을 추가해주세요</div>
           )}
         </div>
 
@@ -224,7 +224,7 @@ export const EntityTypeConfigPanel: React.FC<EntityTypeConfigPanelProps> = ({ co
           </Button>
         </div>
 
-        <div className="text-xs text-gray-500">
+        <div className="text-xs text-muted-foreground">
           • 여러 컬럼을 선택하면 "{localValues.separator || " - "}"로 구분하여 표시됩니다
           <br />• 예: 이름{localValues.separator || " - "}부서명
         </div>
@@ -331,7 +331,7 @@ export const EntityTypeConfigPanel: React.FC<EntityTypeConfigPanelProps> = ({ co
                 placeholder="필드명"
                 className="flex-1"
               />
-              <span className="text-gray-500">=</span>
+              <span className="text-muted-foreground">=</span>
               <Input
                 value={value as string}
                 onChange={(e) => updateFilter(field, field, e.target.value)}
@@ -346,14 +346,14 @@ export const EntityTypeConfigPanel: React.FC<EntityTypeConfigPanelProps> = ({ co
         </div>
 
         {/* 새 필터 추가 */}
-        <div className="flex items-center space-x-2 rounded border-2 border-dashed border-gray-300 p-2">
+        <div className="flex items-center space-x-2 rounded border-2 border-dashed border-input p-2">
           <Input
             value={newFilter.field}
             onChange={(e) => setNewFilter((prev) => ({ ...prev, field: e.target.value }))}
             placeholder="필드명"
             className="flex-1"
           />
-          <span className="text-gray-500">=</span>
+          <span className="text-muted-foreground">=</span>
           <Input
             value={newFilter.value}
             onChange={(e) => setNewFilter((prev) => ({ ...prev, value: e.target.value }))}
@@ -365,22 +365,22 @@ export const EntityTypeConfigPanel: React.FC<EntityTypeConfigPanelProps> = ({ co
           </Button>
         </div>
 
-        <div className="text-xs text-gray-500">총 {Object.keys(safeConfig.filters || {}).length}개 필터</div>
+        <div className="text-xs text-muted-foreground">총 {Object.keys(safeConfig.filters || {}).length}개 필터</div>
       </div>
 
       {/* 미리보기 */}
-      <div className="rounded-md border bg-gray-50 p-3">
-        <Label className="text-sm font-medium text-gray-700">미리보기</Label>
+      <div className="rounded-md border bg-muted p-3">
+        <Label className="text-sm font-medium text-foreground">미리보기</Label>
         <div className="mt-2">
           <div className="flex items-center space-x-2 rounded border bg-white p-2">
-            <Search className="h-4 w-4 text-gray-400" />
+            <Search className="h-4 w-4 text-muted-foreground/70" />
             <div className="text-muted-foreground flex-1 text-xs">
               {localValues.placeholder || `${localValues.referenceTable || "엔터티"}를 선택하세요`}
             </div>
-            <Database className="h-4 w-4 text-gray-400" />
+            <Database className="h-4 w-4 text-muted-foreground/70" />
           </div>
         </div>
-        <div className="mt-2 text-xs text-gray-500">
+        <div className="mt-2 text-xs text-muted-foreground">
           참조테이블: {localValues.referenceTable || "없음"}, 조인컬럼: {localValues.referenceColumn}
           <br />
           표시컬럼:{" "}
@@ -392,8 +392,8 @@ export const EntityTypeConfigPanel: React.FC<EntityTypeConfigPanelProps> = ({ co
 
       {/* 안내 메시지 */}
       <div className="bg-accent rounded-md p-3">
-        <div className="text-sm font-medium text-blue-900">엔터티 타입 설정 가이드</div>
-        <div className="mt-1 text-xs text-blue-800">
+        <div className="text-sm font-medium text-primary">엔터티 타입 설정 가이드</div>
+        <div className="mt-1 text-xs text-primary">
           • <strong>참조 테이블</strong>: 데이터를 가져올 다른 테이블 이름
           <br />• <strong>조인 컬럼</strong>: 테이블 간 연결에 사용할 기준 컬럼 (보통 ID)
           <br />• <strong>표시 컬럼</strong>: 사용자에게 보여질 컬럼들 (여러 개 가능)
diff --git a/frontend/components/screen/panels/webtype-configs/FileTypeConfigPanel.tsx b/frontend/components/screen/panels/webtype-configs/FileTypeConfigPanel.tsx
index 6ab97dad..da521dd5 100644
--- a/frontend/components/screen/panels/webtype-configs/FileTypeConfigPanel.tsx
+++ b/frontend/components/screen/panels/webtype-configs/FileTypeConfigPanel.tsx
@@ -150,7 +150,7 @@ export const FileTypeConfigPanel: React.FC<FileTypeConfigPanelProps> = ({ config
           placeholder="예: image/*,.pdf,.docx"
           className="mt-1"
         />
-        <div className="mt-1 text-xs text-gray-500">MIME 타입 또는 파일 확장자를 쉼표로 구분하여 입력</div>
+        <div className="mt-1 text-xs text-muted-foreground">MIME 타입 또는 파일 확장자를 쉼표로 구분하여 입력</div>
       </div>
 
       {/* 허용 확장자 관리 */}
@@ -203,7 +203,7 @@ export const FileTypeConfigPanel: React.FC<FileTypeConfigPanelProps> = ({ config
             step={0.1}
             className="w-full"
           />
-          <div className="mt-1 flex justify-between text-xs text-gray-500">
+          <div className="mt-1 flex justify-between text-xs text-muted-foreground">
             <span>100 KB</span>
             <span>100 MB</span>
           </div>
@@ -225,7 +225,7 @@ export const FileTypeConfigPanel: React.FC<FileTypeConfigPanelProps> = ({ config
               step={1}
               className="w-full"
             />
-            <div className="mt-1 flex justify-between text-xs text-gray-500">
+            <div className="mt-1 flex justify-between text-xs text-muted-foreground">
               <span>1</span>
               <span>20</span>
             </div>
@@ -258,19 +258,19 @@ export const FileTypeConfigPanel: React.FC<FileTypeConfigPanelProps> = ({ config
       </div>
 
       {/* 미리보기 */}
-      <div className="rounded-md border bg-gray-50 p-3">
-        <Label className="text-sm font-medium text-gray-700">미리보기</Label>
+      <div className="rounded-md border bg-muted p-3">
+        <Label className="text-sm font-medium text-foreground">미리보기</Label>
         <div className="mt-2">
           <div
             className={`rounded border-2 border-dashed p-4 text-center ${
-              localValues.dragDrop ? "border-blue-300 bg-accent" : "border-gray-300"
+              localValues.dragDrop ? "border-primary/40 bg-accent" : "border-input"
             }`}
           >
-            <Upload className="mx-auto h-8 w-8 text-gray-400" />
+            <Upload className="mx-auto h-8 w-8 text-muted-foreground/70" />
             <div className="mt-2 text-sm text-muted-foreground">
               {localValues.dragDrop ? "파일을 드래그하여 놓거나 클릭하여 선택" : "클릭하여 파일 선택"}
             </div>
-            <div className="mt-1 text-xs text-gray-500">
+            <div className="mt-1 text-xs text-muted-foreground">
               {localValues.accept && `허용 타입: ${localValues.accept}`}
               {(safeConfig.allowedExtensions || []).length > 0 && (
                 <div>확장자: {(safeConfig.allowedExtensions || []).join(", ")}</div>
@@ -284,8 +284,8 @@ export const FileTypeConfigPanel: React.FC<FileTypeConfigPanelProps> = ({ config
 
       {/* 안내 메시지 */}
       <div className="rounded-md bg-accent p-3">
-        <div className="text-sm font-medium text-blue-900">파일 업로드 설정</div>
-        <div className="mt-1 text-xs text-blue-800">
+        <div className="text-sm font-medium text-primary">파일 업로드 설정</div>
+        <div className="mt-1 text-xs text-primary">
           • Accept 속성은 파일 선택 다이얼로그에서 필터링됩니다
           <br />
           • 허용 확장자는 추가 검증에 사용됩니다
diff --git a/frontend/components/screen/panels/webtype-configs/RadioTypeConfigPanel.tsx b/frontend/components/screen/panels/webtype-configs/RadioTypeConfigPanel.tsx
index 9d856612..05fed645 100644
--- a/frontend/components/screen/panels/webtype-configs/RadioTypeConfigPanel.tsx
+++ b/frontend/components/screen/panels/webtype-configs/RadioTypeConfigPanel.tsx
@@ -150,7 +150,7 @@ export const RadioTypeConfigPanel: React.FC<RadioTypeConfigPanelProps> = ({ conf
           레이아웃 방향
         </Label>
         <select
-          className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-primary focus:ring-1 focus:ring-blue-500 focus:outline-none"
+          className="mt-1 w-full rounded-md border border-input px-3 py-2 text-sm focus:border-primary focus:ring-1 focus:ring-ring focus:outline-none"
           value={localValues.layout}
           onChange={(e) => updateConfig("layout", e.target.value)}
         >
@@ -167,7 +167,7 @@ export const RadioTypeConfigPanel: React.FC<RadioTypeConfigPanelProps> = ({ conf
           기본 선택값
         </Label>
         <select
-          className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-primary focus:ring-1 focus:ring-blue-500 focus:outline-none"
+          className="mt-1 w-full rounded-md border border-input px-3 py-2 text-sm focus:border-primary focus:ring-1 focus:ring-ring focus:outline-none"
           value={localValues.defaultValue || "__none__"}
           onChange={(e) => updateConfig("defaultValue", e.target.value)}
         >
@@ -220,7 +220,7 @@ export const RadioTypeConfigPanel: React.FC<RadioTypeConfigPanelProps> = ({ conf
         </div>
 
         {/* 새 옵션 추가 */}
-        <div className="flex items-center space-x-2 rounded border-2 border-dashed border-gray-300 p-2">
+        <div className="flex items-center space-x-2 rounded border-2 border-dashed border-input p-2">
           <Input
             value={newOption.label}
             onChange={(e) => setNewOption((prev) => ({ ...prev, label: e.target.value }))}
@@ -238,13 +238,13 @@ export const RadioTypeConfigPanel: React.FC<RadioTypeConfigPanelProps> = ({ conf
           </Button>
         </div>
 
-        <div className="text-xs text-gray-500">총 {(safeConfig.options || []).length}개 옵션</div>
+        <div className="text-xs text-muted-foreground">총 {(safeConfig.options || []).length}개 옵션</div>
       </div>
 
       {/* 미리보기 */}
       {(safeConfig.options || []).length > 0 && (
-        <div className="rounded-md border bg-gray-50 p-3">
-          <Label className="text-sm font-medium text-gray-700">미리보기</Label>
+        <div className="rounded-md border bg-muted p-3">
+          <Label className="text-sm font-medium text-foreground">미리보기</Label>
           <div className="mt-2">
             <RadioGroup
               value={localValues.defaultValue}
@@ -266,7 +266,7 @@ export const RadioTypeConfigPanel: React.FC<RadioTypeConfigPanelProps> = ({ conf
               ))}
             </RadioGroup>
           </div>
-          <div className="mt-2 text-xs text-gray-500">
+          <div className="mt-2 text-xs text-muted-foreground">
             레이아웃:{" "}
             {localValues.layout === "vertical" ? "세로" : localValues.layout === "horizontal" ? "가로" : "격자"},
             기본값: {localValues.defaultValue || "없음"}
@@ -278,8 +278,8 @@ export const RadioTypeConfigPanel: React.FC<RadioTypeConfigPanelProps> = ({ conf
       {/* 안내 메시지 */}
       {localValues.allowNone && (
         <div className="rounded-md bg-accent p-3">
-          <div className="text-sm font-medium text-blue-900">선택 해제 허용</div>
-          <div className="mt-1 text-xs text-blue-800">
+          <div className="text-sm font-medium text-primary">선택 해제 허용</div>
+          <div className="mt-1 text-xs text-primary">
             사용자가 같은 라디오 버튼을 다시 클릭하여 선택을 해제할 수 있습니다.
           </div>
         </div>
diff --git a/frontend/components/screen/panels/webtype-configs/TextTypeConfigPanel.tsx b/frontend/components/screen/panels/webtype-configs/TextTypeConfigPanel.tsx
index 99dd7712..b2f9a98a 100644
--- a/frontend/components/screen/panels/webtype-configs/TextTypeConfigPanel.tsx
+++ b/frontend/components/screen/panels/webtype-configs/TextTypeConfigPanel.tsx
@@ -281,7 +281,7 @@ export const TextTypeConfigPanel: React.FC<TextTypeConfigPanelProps> = ({
           className="mt-1"
           placeholder="예: ^[0-9]{3}-[0-9]{4}-[0-9]{4}$"
         />
-        <div className="mt-1 text-xs text-gray-500">JavaScript 정규식 패턴을 입력하세요 (선택사항)</div>
+        <div className="mt-1 text-xs text-muted-foreground">JavaScript 정규식 패턴을 입력하세요 (선택사항)</div>
       </div>
 
       {/* 플레이스홀더 */}
@@ -455,8 +455,8 @@ export const TextTypeConfigPanel: React.FC<TextTypeConfigPanelProps> = ({
             )}
 
             <div className="bg-accent rounded-md p-3">
-              <div className="text-sm font-medium text-blue-900">자동입력 안내</div>
-              <div className="mt-1 text-xs text-blue-800">
+              <div className="text-sm font-medium text-primary">자동입력 안내</div>
+              <div className="mt-1 text-xs text-primary">
                 자동입력이 활성화되면 해당 필드는 읽기 전용이 되며, 설정된 타입에 따라 자동으로 값이 입력됩니다.
               </div>
             </div>
@@ -479,8 +479,8 @@ export const TextTypeConfigPanel: React.FC<TextTypeConfigPanelProps> = ({
       {/* 형식별 안내 메시지 */}
       {localValues.format !== "none" && (
         <div className="bg-accent rounded-md p-3">
-          <div className="text-sm font-medium text-blue-900">형식 안내</div>
-          <div className="mt-1 text-xs text-blue-800">
+          <div className="text-sm font-medium text-primary">형식 안내</div>
+          <div className="mt-1 text-xs text-primary">
             {localValues.format === "email" && "유효한 이메일 주소를 입력해야 합니다 (예: user@example.com)"}
             {localValues.format === "phone" && "전화번호 형식으로 입력해야 합니다 (예: 010-1234-5678)"}
             {localValues.format === "url" && "유효한 URL을 입력해야 합니다 (예: https://example.com)"}
diff --git a/frontend/components/screen/panels/webtype-configs/TextareaTypeConfigPanel.tsx b/frontend/components/screen/panels/webtype-configs/TextareaTypeConfigPanel.tsx
index 17fa6760..a0aec716 100644
--- a/frontend/components/screen/panels/webtype-configs/TextareaTypeConfigPanel.tsx
+++ b/frontend/components/screen/panels/webtype-configs/TextareaTypeConfigPanel.tsx
@@ -107,7 +107,7 @@ export const TextareaTypeConfigPanel: React.FC<TextareaTypeConfigPanelProps> = (
             step={1}
             className="w-full"
           />
-          <div className="mt-1 flex justify-between text-xs text-gray-500">
+          <div className="mt-1 flex justify-between text-xs text-muted-foreground">
             <span>1</span>
             <span>20</span>
           </div>
@@ -198,11 +198,11 @@ export const TextareaTypeConfigPanel: React.FC<TextareaTypeConfigPanelProps> = (
       </div>
 
       {/* 설정 미리보기 */}
-      <div className="rounded-md border bg-gray-50 p-3">
-        <Label className="text-sm font-medium text-gray-700">미리보기</Label>
+      <div className="rounded-md border bg-muted p-3">
+        <Label className="text-sm font-medium text-foreground">미리보기</Label>
         <div className="mt-2">
           <textarea
-            className="w-full rounded border border-gray-300 p-2 text-xs"
+            className="w-full rounded border border-input p-2 text-xs"
             rows={localValues.rows}
             placeholder={localValues.placeholder || "텍스트를 입력하세요..."}
             style={{
@@ -212,7 +212,7 @@ export const TextareaTypeConfigPanel: React.FC<TextareaTypeConfigPanelProps> = (
             readOnly
           />
         </div>
-        <div className="mt-1 text-xs text-gray-500">
+        <div className="mt-1 text-xs text-muted-foreground">
           행 수: {localValues.rows},{localValues.minLength && ` 최소: ${localValues.minLength}자,`}
           {localValues.maxLength && ` 최대: ${localValues.maxLength}자,`}
           {localValues.resizable ? " 크기조정 가능" : " 크기고정"}
diff --git a/frontend/components/screen/table-options/ColumnVisibilityPanel.tsx b/frontend/components/screen/table-options/ColumnVisibilityPanel.tsx
index 67c11171..ce7f4bba 100644
--- a/frontend/components/screen/table-options/ColumnVisibilityPanel.tsx
+++ b/frontend/components/screen/table-options/ColumnVisibilityPanel.tsx
@@ -207,7 +207,7 @@ export const ColumnVisibilityPanel: React.FC<Props> = ({
                     onDragEnd={handleDragEnd}
                     className={`flex items-center gap-3 rounded-lg border p-3 transition-colors cursor-move ${
                       isFrozen 
-                        ? "bg-blue-50 border-blue-200 dark:bg-blue-950/30 dark:border-blue-800" 
+                        ? "bg-primary/10 border-primary/20 dark:bg-primary/15/30 dark:border-primary/30" 
                         : "bg-background hover:bg-muted/50"
                     }`}
                   >
@@ -227,7 +227,7 @@ export const ColumnVisibilityPanel: React.FC<Props> = ({
 
                     {/* 가시성/틀고정 아이콘 */}
                     {isFrozen ? (
-                      <Lock className="h-4 w-4 shrink-0 text-blue-500" />
+                      <Lock className="h-4 w-4 shrink-0 text-primary" />
                     ) : col.visible ? (
                       <Eye className="h-4 w-4 shrink-0 text-primary" />
                     ) : (
@@ -241,7 +241,7 @@ export const ColumnVisibilityPanel: React.FC<Props> = ({
                           {columnMeta?.columnLabel}
                         </span>
                         {isFrozen && (
-                          <span className="text-[10px] text-blue-600 dark:text-blue-400 font-medium">
+                          <span className="text-[10px] text-primary dark:text-primary/80 font-medium">
                             (고정)
                           </span>
                         )}
diff --git a/frontend/components/screen/table-options/TableSettingsModal.tsx b/frontend/components/screen/table-options/TableSettingsModal.tsx
index 4f9325cb..3d37c153 100644
--- a/frontend/components/screen/table-options/TableSettingsModal.tsx
+++ b/frontend/components/screen/table-options/TableSettingsModal.tsx
@@ -388,7 +388,7 @@ export const TableSettingsModal: React.FC<Props> = ({ isOpen, onClose, onFilters
                         onDragEnd={() => setDraggedColumnIndex(null)}
                         className={`flex cursor-move items-center gap-3 rounded-lg border p-3 transition-colors ${
                           isFrozen
-                            ? "border-blue-200 bg-blue-50 dark:border-blue-800 dark:bg-blue-950/30"
+                            ? "border-primary/20 bg-primary/10 dark:border-primary/30 dark:bg-primary/15/30"
                             : "bg-background hover:bg-muted/50"
                         }`}
                       >
@@ -405,7 +405,7 @@ export const TableSettingsModal: React.FC<Props> = ({ isOpen, onClose, onFilters
 
                         {/* 가시성/틀고정 아이콘 */}
                         {isFrozen ? (
-                          <Lock className="h-4 w-4 shrink-0 text-blue-500" />
+                          <Lock className="h-4 w-4 shrink-0 text-primary" />
                         ) : col.visible ? (
                           <Eye className="text-primary h-4 w-4 shrink-0" />
                         ) : (
@@ -419,7 +419,7 @@ export const TableSettingsModal: React.FC<Props> = ({ isOpen, onClose, onFilters
                               {originalCol.columnLabel}
                             </span>
                             {isFrozen && (
-                              <span className="text-[10px] font-medium text-blue-600 dark:text-blue-400">
+                              <span className="text-[10px] font-medium text-primary dark:text-primary/80">
                                 (고정)
                               </span>
                             )}
diff --git a/frontend/components/screen/templates/DataTableTemplate.tsx b/frontend/components/screen/templates/DataTableTemplate.tsx
index b24f27c3..99171be5 100644
--- a/frontend/components/screen/templates/DataTableTemplate.tsx
+++ b/frontend/components/screen/templates/DataTableTemplate.tsx
@@ -259,14 +259,14 @@ export const DataTableTemplate: React.FC<DataTableTemplateProps> = ({
         
         {/* 🆕 선택된 컬럼의 검색 입력 필드 */}
         {searchFilterColumns.size > 0 && (
-          <div className="grid grid-cols-1 gap-3 rounded-lg border bg-gray-50/50 p-4 md:grid-cols-2 lg:grid-cols-3">
+          <div className="grid grid-cols-1 gap-3 rounded-lg border bg-muted/50 p-4 md:grid-cols-2 lg:grid-cols-3">
             {Array.from(searchFilterColumns).map((columnId) => {
               const column = defaultColumns.find(col => col.id === columnId);
               if (!column) return null;
               
               return (
                 <div key={columnId} className="space-y-1.5">
-                  <label className="text-xs font-medium text-gray-700">
+                  <label className="text-xs font-medium text-foreground">
                     {column.label}
                   </label>
                   <Input
@@ -378,7 +378,7 @@ export const DataTableTemplate: React.FC<DataTableTemplateProps> = ({
                             )}
                             {actions.enableDelete && (
                               <Button variant="ghost" size="sm" disabled>
-                                <Trash2 className="h-3 w-3 text-red-500" />
+                                <Trash2 className="h-3 w-3 text-destructive" />
                               </Button>
                             )}
                           </div>
@@ -465,7 +465,7 @@ export const DataTableTemplate: React.FC<DataTableTemplateProps> = ({
           
           <div className="max-h-[400px] space-y-2 overflow-y-auto py-4">
             {defaultColumns.map((column) => (
-              <div key={column.id} className="flex items-center space-x-3 rounded-lg p-3 hover:bg-gray-50">
+              <div key={column.id} className="flex items-center space-x-3 rounded-lg p-3 hover:bg-muted">
                 <Checkbox
                   id={`filter-${column.id}`}
                   checked={searchFilterColumns.has(column.id)}
@@ -473,7 +473,7 @@ export const DataTableTemplate: React.FC<DataTableTemplateProps> = ({
                 />
                 <label htmlFor={`filter-${column.id}`} className="flex-1 cursor-pointer text-sm">
                   {column.label}
-                  <span className="ml-2 text-xs text-gray-500">({column.type})</span>
+                  <span className="ml-2 text-xs text-muted-foreground">({column.type})</span>
                 </label>
               </div>
             ))}
diff --git a/frontend/components/screen/toolbar/LeftV2Toolbar.tsx b/frontend/components/screen/toolbar/LeftV2Toolbar.tsx
index efa0640f..69dcde53 100644
--- a/frontend/components/screen/toolbar/LeftV2Toolbar.tsx
+++ b/frontend/components/screen/toolbar/LeftV2Toolbar.tsx
@@ -2,8 +2,7 @@
 
 import React from "react";
 import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import { Database, Layout, Cog, Settings, Palette, Monitor } from "lucide-react";
+import { Layout } from "lucide-react";
 import { cn } from "@/lib/utils";
 
 export interface ToolbarButton {
@@ -39,15 +38,15 @@ export const LeftV2Toolbar: React.FC<LeftV2ToolbarProps> = ({ buttons, panelStat
         className={cn(
           "flex h-14 w-14 flex-col items-center justify-center gap-1 rounded-lg transition-all duration-200",
           isActive
-            ? "bg-gradient-to-br from-blue-500 to-blue-600 text-white shadow-lg hover:from-blue-600 hover:to-blue-700"
-            : "text-slate-600 hover:bg-slate-100 hover:text-slate-900",
+            ? "bg-primary text-primary-foreground shadow-md hover:bg-primary/90"
+            : "text-muted-foreground hover:bg-accent hover:text-accent-foreground",
         )}
       >
         <div className="relative">
           {button.icon}
           {isActive && <div className="absolute -top-1 -right-1 h-2 w-2 rounded-full bg-white" />}
           {badge !== undefined && badge > 0 && (
-            <div className="absolute -top-2 -right-2 flex h-5 w-5 items-center justify-center rounded-full bg-red-500 text-[10px] font-bold text-white shadow-md">
+            <div className="absolute -top-2 -right-2 flex h-5 w-5 items-center justify-center rounded-full bg-destructive text-[10px] font-bold text-white shadow-md">
               {badge > 99 ? "99+" : badge}
             </div>
           )}
@@ -58,9 +57,9 @@ export const LeftV2Toolbar: React.FC<LeftV2ToolbarProps> = ({ buttons, panelStat
   };
 
   return (
-    <div className="flex h-full w-[60px] flex-col border-r border-slate-200 bg-white">
+    <div className="border-border bg-background flex h-full w-[60px] flex-col border-r">
       {/* 입력/소스 그룹 */}
-      <div className="flex flex-col gap-1 border-b border-slate-200 p-1">{sourceButtons.map(renderButton)}</div>
+      <div className="border-border flex flex-col gap-1 border-b p-1">{sourceButtons.map(renderButton)}</div>
 
       {/* 편집/설정 그룹 */}
       <div className="flex flex-col gap-1 p-1">{editorButtons.map(renderButton)}</div>
diff --git a/frontend/components/screen/toolbar/SlimToolbar.tsx b/frontend/components/screen/toolbar/SlimToolbar.tsx
index 5f775b23..dd4b60b5 100644
--- a/frontend/components/screen/toolbar/SlimToolbar.tsx
+++ b/frontend/components/screen/toolbar/SlimToolbar.tsx
@@ -35,7 +35,8 @@ import {
   Keyboard,
   Equal,
 } from "lucide-react";
-import { ScreenResolution, SCREEN_RESOLUTIONS } from "@/types/screen";
+import { ScreenResolution } from "@/types/screen";
+import { SCREEN_RESOLUTIONS } from "@/types/screen-management";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -123,13 +124,13 @@ export const SlimToolbar: React.FC<SlimToolbarProps> = ({
   const getCategoryIcon = (category: string) => {
     switch (category) {
       case "desktop":
-        return <Monitor className="h-4 w-4 text-blue-600" />;
+        return <Monitor className="h-4 w-4 text-primary" />;
       case "tablet":
-        return <Tablet className="h-4 w-4 text-green-600" />;
+        return <Tablet className="h-4 w-4 text-emerald-600" />;
       case "mobile":
         return <Smartphone className="h-4 w-4 text-purple-600" />;
       default:
-        return <Monitor className="h-4 w-4 text-blue-600" />;
+        return <Monitor className="h-4 w-4 text-primary" />;
     }
   };
 
@@ -158,7 +159,7 @@ export const SlimToolbar: React.FC<SlimToolbarProps> = ({
   };
 
   return (
-    <div className="flex h-14 items-center justify-between border-b border-gray-200 bg-gradient-to-r from-gray-50 to-white px-4 shadow-sm">
+    <div className="flex h-14 items-center justify-between border-b border-border bg-background px-4 shadow-sm">
       {/* 좌측: 네비게이션 + 패널 토글 + 화면 정보 */}
       <div className="flex items-center space-x-4">
         <Button variant="ghost" size="sm" onClick={onBack} className="flex items-center space-x-2">
@@ -166,7 +167,7 @@ export const SlimToolbar: React.FC<SlimToolbarProps> = ({
           <span>목록으로</span>
         </Button>
 
-        {onTogglePanel && <div className="h-6 w-px bg-gray-300" />}
+        {onTogglePanel && <div className="h-6 w-px bg-border" />}
 
         {/* 패널 토글 버튼 */}
         {onTogglePanel && (
@@ -186,15 +187,15 @@ export const SlimToolbar: React.FC<SlimToolbarProps> = ({
           </Button>
         )}
 
-        <div className="h-6 w-px bg-gray-300" />
+        <div className="h-6 w-px bg-border" />
 
         <div className="flex items-center space-x-3">
           <div>
-            <h1 className="text-lg font-semibold text-gray-900">{screenName || "화면 설계"}</h1>
+            <h1 className="text-lg font-semibold text-foreground">{screenName || "화면 설계"}</h1>
             {tableName && (
               <div className="mt-0.5 flex items-center space-x-1">
-                <Database className="h-3 w-3 text-gray-500" />
-                <span className="font-mono text-xs text-gray-500">{tableName}</span>
+                <Database className="h-3 w-3 text-muted-foreground" />
+                <span className="font-mono text-xs text-muted-foreground">{tableName}</span>
               </div>
             )}
           </div>
@@ -203,51 +204,51 @@ export const SlimToolbar: React.FC<SlimToolbarProps> = ({
         {/* 해상도 선택 드롭다운 */}
         {screenResolution && (
           <>
-            <div className="h-6 w-px bg-gray-300" />
+            <div className="h-6 w-px bg-border" />
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
-                <button className="flex items-center space-x-2 rounded-md bg-blue-50 px-3 py-1.5 transition-colors hover:bg-blue-100">
+                <button className="flex items-center space-x-2 rounded-md bg-primary/10 px-3 py-1.5 transition-colors hover:bg-primary/20">
                   {getCategoryIcon(screenResolution.category || "desktop")}
-                  <span className="text-sm font-medium text-blue-900">{screenResolution.name}</span>
-                  <span className="text-xs text-blue-600">
+                  <span className="text-sm font-medium text-primary">{screenResolution.name}</span>
+                  <span className="text-xs text-primary">
                     ({screenResolution.width} × {screenResolution.height})
                   </span>
-                  {onResolutionChange && <ChevronDown className="h-3 w-3 text-blue-600" />}
+                  {onResolutionChange && <ChevronDown className="h-3 w-3 text-primary" />}
                 </button>
               </DropdownMenuTrigger>
               {onResolutionChange && (
                 <DropdownMenuContent align="start" className="w-64">
-                  <DropdownMenuLabel className="text-xs text-gray-500">데스크톱</DropdownMenuLabel>
+                  <DropdownMenuLabel className="text-xs text-muted-foreground">데스크톱</DropdownMenuLabel>
                   {SCREEN_RESOLUTIONS.filter((r) => r.category === "desktop").map((resolution) => (
                     <DropdownMenuItem
                       key={resolution.name}
                       onClick={() => onResolutionChange(resolution)}
                       className="flex items-center space-x-2"
                     >
-                      <Monitor className="h-4 w-4 text-blue-600" />
+                      <Monitor className="h-4 w-4 text-primary" />
                       <span className="flex-1">{resolution.name}</span>
-                      <span className="text-xs text-gray-400">
+                      <span className="text-xs text-muted-foreground/70">
                         {resolution.width}×{resolution.height}
                       </span>
                     </DropdownMenuItem>
                   ))}
                   <DropdownMenuSeparator />
-                  <DropdownMenuLabel className="text-xs text-gray-500">태블릿</DropdownMenuLabel>
+                  <DropdownMenuLabel className="text-xs text-muted-foreground">태블릿</DropdownMenuLabel>
                   {SCREEN_RESOLUTIONS.filter((r) => r.category === "tablet").map((resolution) => (
                     <DropdownMenuItem
                       key={resolution.name}
                       onClick={() => onResolutionChange(resolution)}
                       className="flex items-center space-x-2"
                     >
-                      <Tablet className="h-4 w-4 text-green-600" />
+                      <Tablet className="h-4 w-4 text-emerald-600" />
                       <span className="flex-1">{resolution.name}</span>
-                      <span className="text-xs text-gray-400">
+                      <span className="text-xs text-muted-foreground/70">
                         {resolution.width}×{resolution.height}
                       </span>
                     </DropdownMenuItem>
                   ))}
                   <DropdownMenuSeparator />
-                  <DropdownMenuLabel className="text-xs text-gray-500">모바일</DropdownMenuLabel>
+                  <DropdownMenuLabel className="text-xs text-muted-foreground">모바일</DropdownMenuLabel>
                   {SCREEN_RESOLUTIONS.filter((r) => r.category === "mobile").map((resolution) => (
                     <DropdownMenuItem
                       key={resolution.name}
@@ -256,13 +257,13 @@ export const SlimToolbar: React.FC<SlimToolbarProps> = ({
                     >
                       <Smartphone className="h-4 w-4 text-purple-600" />
                       <span className="flex-1">{resolution.name}</span>
-                      <span className="text-xs text-gray-400">
+                      <span className="text-xs text-muted-foreground/70">
                         {resolution.width}×{resolution.height}
                       </span>
                     </DropdownMenuItem>
                   ))}
                   <DropdownMenuSeparator />
-                  <DropdownMenuLabel className="text-xs text-gray-500">사용자 정의</DropdownMenuLabel>
+                  <DropdownMenuLabel className="text-xs text-muted-foreground">사용자 정의</DropdownMenuLabel>
                   <DropdownMenuItem
                     onClick={() => {
                       setCustomWidth(screenResolution.width.toString());
@@ -271,7 +272,7 @@ export const SlimToolbar: React.FC<SlimToolbarProps> = ({
                     }}
                     className="flex items-center space-x-2"
                   >
-                    <Settings className="h-4 w-4 text-gray-600" />
+                    <Settings className="h-4 w-4 text-muted-foreground" />
                     <span className="flex-1">사용자 정의...</span>
                   </DropdownMenuItem>
                 </DropdownMenuContent>
@@ -322,31 +323,31 @@ export const SlimToolbar: React.FC<SlimToolbarProps> = ({
         {/* 격자 설정 */}
         {gridSettings && onGridSettingsChange && (
           <>
-            <div className="h-6 w-px bg-gray-300" />
-            <div className="flex items-center space-x-2 rounded-md bg-gray-50 px-3 py-1.5">
-              <Grid3X3 className="h-4 w-4 text-gray-600" />
+            <div className="h-6 w-px bg-border" />
+            <div className="flex items-center space-x-2 rounded-md bg-muted px-3 py-1.5">
+              <Grid3X3 className="h-4 w-4 text-muted-foreground" />
               <div className="flex items-center space-x-3">
                 <label className="flex cursor-pointer items-center space-x-1.5">
                   {gridSettings.showGrid ? (
                     <Eye className="h-3.5 w-3.5 text-primary" />
                   ) : (
-                    <EyeOff className="h-3.5 w-3.5 text-gray-400" />
+                    <EyeOff className="h-3.5 w-3.5 text-muted-foreground/70" />
                   )}
                   <Checkbox
                     checked={gridSettings.showGrid}
                     onCheckedChange={(checked) => updateGridSetting("showGrid", checked as boolean)}
                     className="h-3.5 w-3.5"
                   />
-                  <span className="text-xs text-gray-600">격자 표시</span>
+                  <span className="text-xs text-muted-foreground">격자 표시</span>
                 </label>
                 <label className="flex cursor-pointer items-center space-x-1.5">
-                  <Zap className={`h-3.5 w-3.5 ${gridSettings.snapToGrid ? "text-primary" : "text-gray-400"}`} />
+                  <Zap className={`h-3.5 w-3.5 ${gridSettings.snapToGrid ? "text-primary" : "text-muted-foreground/70"}`} />
                   <Checkbox
                     checked={gridSettings.snapToGrid}
                     onCheckedChange={(checked) => updateGridSetting("snapToGrid", checked as boolean)}
                     className="h-3.5 w-3.5"
                   />
-                  <span className="text-xs text-gray-600">격자 스냅</span>
+                  <span className="text-xs text-muted-foreground">격자 스냅</span>
                 </label>
               </div>
             </div>
@@ -356,11 +357,11 @@ export const SlimToolbar: React.FC<SlimToolbarProps> = ({
 
       {/* 중앙: 정렬/배분 도구 (다중 선택 시 표시) */}
       {selectedCount >= 2 && (onAlign || onDistribute || onMatchSize) && (
-        <div className="flex items-center space-x-1 rounded-md bg-blue-50 px-2 py-1">
+        <div className="flex items-center space-x-1 rounded-md bg-primary/10 px-2 py-1">
           {/* 정렬 */}
           {onAlign && (
             <>
-              <span className="mr-1 text-xs font-medium text-blue-700">정렬</span>
+              <span className="mr-1 text-xs font-medium text-primary">정렬</span>
               <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => onAlign("left")} title="좌측 정렬 (Alt+L)">
                 <AlignStartVertical className="h-3.5 w-3.5" />
               </Button>
@@ -370,7 +371,7 @@ export const SlimToolbar: React.FC<SlimToolbarProps> = ({
               <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => onAlign("right")} title="우측 정렬 (Alt+R)">
                 <AlignEndVertical className="h-3.5 w-3.5" />
               </Button>
-              <div className="mx-0.5 h-4 w-px bg-blue-200" />
+              <div className="mx-0.5 h-4 w-px bg-border" />
               <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => onAlign("top")} title="상단 정렬 (Alt+T)">
                 <AlignStartHorizontal className="h-3.5 w-3.5" />
               </Button>
@@ -386,8 +387,8 @@ export const SlimToolbar: React.FC<SlimToolbarProps> = ({
           {/* 배분 (3개 이상 선택 시) */}
           {onDistribute && selectedCount >= 3 && (
             <>
-              <div className="mx-1 h-4 w-px bg-blue-200" />
-              <span className="mr-1 text-xs font-medium text-blue-700">배분</span>
+              <div className="mx-1 h-4 w-px bg-border" />
+              <span className="mr-1 text-xs font-medium text-primary">배분</span>
               <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => onDistribute("horizontal")} title="가로 균등 배분 (Alt+H)">
                 <AlignHorizontalSpaceAround className="h-3.5 w-3.5" />
               </Button>
@@ -400,8 +401,8 @@ export const SlimToolbar: React.FC<SlimToolbarProps> = ({
           {/* 크기 맞추기 */}
           {onMatchSize && (
             <>
-              <div className="mx-1 h-4 w-px bg-blue-200" />
-              <span className="mr-1 text-xs font-medium text-blue-700">크기</span>
+              <div className="mx-1 h-4 w-px bg-border" />
+              <span className="mr-1 text-xs font-medium text-primary">크기</span>
               <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => onMatchSize("width")} title="너비 맞추기 (Alt+W)">
                 <RulerIcon className="h-3.5 w-3.5" />
               </Button>
@@ -414,8 +415,8 @@ export const SlimToolbar: React.FC<SlimToolbarProps> = ({
             </>
           )}
 
-          <div className="mx-1 h-4 w-px bg-blue-200" />
-          <span className="text-xs text-blue-600">{selectedCount}개 선택</span>
+          <div className="mx-1 h-4 w-px bg-border" />
+          <span className="text-xs text-primary">{selectedCount}개 선택</span>
         </div>
       )}
 
diff --git a/frontend/components/screen/widgets/CategoryWidget.tsx b/frontend/components/screen/widgets/CategoryWidget.tsx
index a4e93256..6514166c 100644
--- a/frontend/components/screen/widgets/CategoryWidget.tsx
+++ b/frontend/components/screen/widgets/CategoryWidget.tsx
@@ -1,9 +1,9 @@
 "use client";
 
-import React, { useState, useRef, useCallback } from "react";
+import React, { useState } from "react";
 import { CategoryColumnList } from "@/components/table-category/CategoryColumnList";
 import { CategoryValueManager } from "@/components/table-category/CategoryValueManager";
-import { GripVertical } from "lucide-react";
+import { ResponsiveSplitPanel } from "@/components/common/ResponsiveSplitPanel";
 
 interface CategoryWidgetProps {
   widgetId?: string;
@@ -54,74 +54,24 @@ export function CategoryWidget({ widgetId, tableName, menuObjid, component, ...p
     columnLabel: string;
     tableName: string;
   } | null>(null);
-  
-  const [leftWidth, setLeftWidth] = useState(15); // 초기값 15%
-  const containerRef = useRef<HTMLDivElement>(null);
-  const isDraggingRef = useRef(false);
-
-  const handleMouseDown = useCallback(() => {
-    isDraggingRef.current = true;
-    document.body.style.cursor = "col-resize";
-    document.body.style.userSelect = "none";
-  }, []);
-
-  const handleMouseMove = useCallback((e: MouseEvent) => {
-    if (!isDraggingRef.current || !containerRef.current) return;
-
-    const containerRect = containerRef.current.getBoundingClientRect();
-    const newLeftWidth = ((e.clientX - containerRect.left) / containerRect.width) * 100;
-
-    // 최소 10%, 최대 40%로 제한
-    if (newLeftWidth >= 10 && newLeftWidth <= 40) {
-      setLeftWidth(newLeftWidth);
-    }
-  }, []);
-
-  const handleMouseUp = useCallback(() => {
-    isDraggingRef.current = false;
-    document.body.style.cursor = "";
-    document.body.style.userSelect = "";
-  }, []);
-
-  React.useEffect(() => {
-    document.addEventListener("mousemove", handleMouseMove);
-    document.addEventListener("mouseup", handleMouseUp);
-
-    return () => {
-      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseup", handleMouseUp);
-    };
-  }, [handleMouseMove, handleMouseUp]);
 
   return (
-    <div ref={containerRef} className="flex h-full min-h-[10px] gap-0">
-      {/* 좌측: 카테고리 컬럼 리스트 */}
-      <div style={{ width: `${leftWidth}%` }} className="pr-3">
+    <ResponsiveSplitPanel
+      left={
         <CategoryColumnList
-          tableName={tableName}
+          tableName={tableName ?? ""}
           selectedColumn={selectedColumn?.uniqueKey || null}
-          onColumnSelect={(uniqueKey, columnLabel, tableName) => {
-            // uniqueKey는 "테이블명.컬럼명" 형식
+          onColumnSelect={(uniqueKey, columnLabel, tblName) => {
             const columnName = uniqueKey.split('.')[1];
-            setSelectedColumn({ uniqueKey, columnName, columnLabel, tableName });
+            setSelectedColumn({ uniqueKey, columnName, columnLabel, tableName: tblName });
           }}
           menuObjid={effectiveMenuObjid}
         />
-      </div>
-
-      {/* 리사이저 */}
-      <div
-        onMouseDown={handleMouseDown}
-        className="group relative flex w-3 cursor-col-resize items-center justify-center border-r hover:bg-accent/50 transition-colors"
-      >
-        <GripVertical className="h-4 w-4 text-muted-foreground group-hover:text-foreground transition-colors" />
-      </div>
-
-      {/* 우측: 카테고리 값 관리 */}
-      <div style={{ width: `${100 - leftWidth - 1}%` }} className="pl-3">
-        {selectedColumn ? (
+      }
+      right={
+        selectedColumn ? (
           <CategoryValueManager
-            key={selectedColumn.uniqueKey} // 테이블명.컬럼명으로 컴포넌트 재생성
+            key={selectedColumn.uniqueKey}
             tableName={selectedColumn.tableName}
             columnName={selectedColumn.columnName}
             columnLabel={selectedColumn.columnLabel}
@@ -135,9 +85,12 @@ export function CategoryWidget({ widgetId, tableName, menuObjid, component, ...p
               </p>
             </div>
           </div>
-        )}
-      </div>
-    </div>
+        )
+      }
+      leftTitle="카테고리 컬럼"
+      leftWidth={15}
+      minLeftWidth={10}
+      maxLeftWidth={40}
+    />
   );
 }
-
diff --git a/frontend/components/screen/widgets/FileUpload.tsx b/frontend/components/screen/widgets/FileUpload.tsx
index 6c81b0a4..9248e944 100644
--- a/frontend/components/screen/widgets/FileUpload.tsx
+++ b/frontend/components/screen/widgets/FileUpload.tsx
@@ -1,14 +1,65 @@
 import React, { useState, useCallback, useRef, useEffect } from "react";
 import { Upload, X, File, Image, Eye, Download, AlertCircle, CheckCircle, Loader2 } from "lucide-react";
-import { FileComponent, AttachedFileInfo } from "@/types/screen";
+import { FileComponent } from "@/types/screen-management";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { apiClient } from "@/lib/api/client";
 import { useAuth } from "@/hooks/useAuth";
 
+// 첨부파일 정보 (attach_file_info 테이블 기반, UI 확장 속성 포함)
+export interface AttachedFileInfo {
+  objid: string;
+  savedFileName: string;
+  realFileName: string;
+  fileSize: number;
+  fileExt: string;
+  filePath: string;
+  docType: string;
+  docTypeName: string;
+  targetObjid: string;
+  parentTargetObjid?: string;
+  companyCode: string;
+  writer: string;
+  regdate: string;
+  status: string;
+  uploadProgress?: number;
+  isUploading?: boolean;
+  hasError?: boolean;
+  errorMessage?: string;
+}
+
+// FileTypeConfig 확장 (FileComponent에서 사용하는 추가 속성 포함)
+interface ExtendedFileTypeConfig {
+  accept?: string[];
+  multiple?: boolean;
+  maxSize?: number;
+  maxFiles?: number;
+  showPreview?: boolean;
+  showProgress?: boolean;
+  docType?: string;
+  docTypeName?: string;
+  dragDropText?: string;
+  uploadButtonText?: string;
+  autoUpload?: boolean;
+  chunkedUpload?: boolean;
+  linkedTable?: string;
+  linkedField?: string;
+  autoLink?: boolean;
+  companyCode?: string;
+  recordId?: string;
+  isVirtualFileColumn?: boolean;
+  columnName?: string;
+}
+
+// FileComponent를 AttachedFileInfo 기반으로 확장한 컴포넌트 타입
+interface FileComponentWithAttached extends Omit<FileComponent, "uploadedFiles" | "fileConfig"> {
+  uploadedFiles?: AttachedFileInfo[];
+  fileConfig: ExtendedFileTypeConfig;
+}
+
 interface FileUploadProps {
-  component: FileComponent;
-  onUpdateComponent?: (updates: Partial<FileComponent>) => void;
+  component: FileComponentWithAttached;
+  onUpdateComponent?: (updates: Partial<FileComponentWithAttached>) => void;
   onFileUpload?: (files: AttachedFileInfo[]) => void; // 파일 업로드 완료 콜백
   userInfo?: any; // 사용자 정보 (선택적)
 }
@@ -90,7 +141,7 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
   }, [component.id]);
 
   const { fileConfig = {} } = component;
-  const { user: authUser, isLoading, isLoggedIn } = useAuth(); // 인증 상태도 함께 가져오기
+  const { user: authUser, loading: isLoading, isLoggedIn } = useAuth(); // 인증 상태도 함께 가져오기
 
   // props로 받은 userInfo를 우선 사용, 없으면 useAuth에서 가져온 user 사용
   const user = userInfo || authUser;
@@ -169,9 +220,9 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
   const getFileIcon = (fileExt: string) => {
     const ext = fileExt.toLowerCase();
     if (["jpg", "jpeg", "png", "gif", "webp"].includes(ext)) {
-      return <Image className="h-5 w-5 text-blue-500" />;
+      return <Image className="h-5 w-5 text-primary" />;
     }
-    return <File className="h-5 w-5 text-gray-500" />;
+    return <File className="h-5 w-5 text-muted-foreground" />;
   };
 
   // 파일 확장자 검증
@@ -709,60 +760,39 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
     <div className="w-full space-y-4">
       {/* 드래그 앤 드롭 영역 */}
       <div
-        className={`group relative rounded-2xl border-2 border-dashed p-10 text-center transition-all duration-300 ${
+        className={`group relative rounded-lg border-2 border-dashed p-8 text-center transition-colors duration-150 ${
           isDragOver
-            ? "border-primary scale-105 bg-gradient-to-br from-blue-100/90 to-indigo-100/80 shadow-xl shadow-blue-500/20"
-            : "border-gray-300/60 bg-gradient-to-br from-gray-50/80 to-blue-50/40 hover:border-blue-400/80 hover:bg-gradient-to-br hover:from-blue-50/90 hover:to-indigo-50/60 hover:shadow-lg hover:shadow-blue-500/10"
+            ? "border-primary bg-muted/50"
+            : "border-border bg-muted/30 hover:border-primary/60 hover:bg-muted/40"
         }`}
         onDragOver={handleDragOver}
         onDragLeave={handleDragLeave}
         onDrop={handleDrop}
       >
-        <div className="relative">
-          <Upload
-            className={`mx-auto mb-4 h-16 w-16 transition-all duration-300 ${
-              isDragOver ? "scale-110 text-blue-500" : "text-gray-400 group-hover:scale-105 group-hover:text-blue-500"
-            }`}
-          />
-          <div className="absolute inset-0 flex items-center justify-center">
-            <div
-              className={`h-20 w-20 rounded-full transition-all duration-300 ${
-                isDragOver
-                  ? "scale-110 bg-blue-200/80"
-                  : "bg-primary/20/50 opacity-0 group-hover:scale-110 group-hover:opacity-100"
-              }`}
-            ></div>
-          </div>
-        </div>
+        <Upload
+          className={`mx-auto mb-3 h-10 w-10 transition-colors duration-150 ${
+            isDragOver ? "text-primary" : "text-muted-foreground group-hover:text-primary"
+          }`}
+        />
         <p
-          className={`mb-2 text-xl font-semibold transition-colors duration-300 ${
-            isDragOver ? "text-primary" : "group-hover:text-primary text-gray-700"
+          className={`mb-1 text-sm font-medium transition-colors duration-150 ${
+            isDragOver ? "text-primary" : "text-foreground"
           }`}
         >
           {fileConfig.dragDropText || "파일을 드래그하여 업로드하세요"}
         </p>
-        <p
-          className={`mb-4 text-sm transition-colors duration-300 ${
-            isDragOver ? "text-blue-500" : "text-gray-500 group-hover:text-blue-500"
-          }`}
-        >
-          또는 클릭하여 파일을 선택하세요
-        </p>
+        <p className="mb-4 text-xs text-muted-foreground">또는 클릭하여 파일을 선택하세요</p>
 
         <Button
           variant="outline"
           onClick={handleFileInputClick}
-          className={`mb-4 rounded-xl border-2 transition-all duration-200 ${
-            isDragOver
-              ? "bg-accent text-primary border-blue-400 shadow-md"
-              : "hover:bg-accent/50 border-gray-300/60 hover:border-blue-400/60 hover:shadow-sm"
-          }`}
+          className="mb-4"
         >
           <Upload className="mr-2 h-4 w-4" />
           {fileConfig?.uploadButtonText || "파일 선택"}
         </Button>
 
-        <div className="text-xs text-gray-500">
+        <div className="text-xs text-muted-foreground">
           <p>허용 파일: {(fileConfig?.accept || ["*/*"]).join(", ")}</p>
           <p>
             최대 크기: {fileConfig?.maxSize || 10}MB | 최대 개수: {fileConfig?.maxFiles || 5}개
@@ -781,68 +811,57 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
 
       {/* 업로드된 파일 목록 */}
       {uploadedFiles.length > 0 && (
-        <div className="space-y-4">
-          <div className="border-primary/20/40 flex items-center justify-between rounded-xl border bg-gradient-to-r from-blue-50/80 to-indigo-50/60 px-4 py-3">
-            <div className="flex items-center space-x-3">
-              <div className="bg-primary/20 flex h-8 w-8 items-center justify-center rounded-full">
-                <File className="text-primary h-4 w-4" />
-              </div>
+        <div className="space-y-3">
+          <div className="flex items-center justify-between rounded-md border border-border bg-muted/20 px-4 py-2.5">
+            <div className="flex items-center space-x-2">
+              <File className="h-4 w-4 text-muted-foreground" />
               <div>
-                <h4 className="text-lg font-semibold text-gray-800">
+                <span className="text-sm font-medium text-foreground">
                   업로드된 파일 ({uploadedFiles.length}/{fileConfig.maxFiles})
-                </h4>
-                <p className="text-muted-foreground text-sm">
+                </span>
+                <span className="ml-2 text-xs text-muted-foreground">
                   총 {formatFileSize(uploadedFiles.reduce((sum, file) => sum + file.fileSize, 0))}
-                </p>
+                </span>
               </div>
             </div>
-            <Button
-              variant="outline"
-              size="sm"
-              className="border-primary/20/60 hover:bg-accent/80 rounded-lg bg-white/80"
-            >
+            <Button variant="outline" size="sm">
               자세히보기
             </Button>
           </div>
 
-          <div className="space-y-3">
+          <div className="space-y-2">
             {uploadedFiles.map((fileInfo) => (
               <div
                 key={fileInfo.objid}
-                className="group hover:bg-accent/30 relative flex items-center justify-between rounded-xl border border-gray-200/60 bg-white/90 p-4 shadow-sm transition-all duration-200 hover:border-blue-300/60 hover:shadow-md"
+                className="group flex items-center justify-between rounded-md border border-border bg-background p-3 transition-colors duration-150 hover:bg-accent/30"
               >
-                <div className="flex flex-1 items-center space-x-4">
-                  <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-gray-50 to-gray-100/80 shadow-sm">
+                <div className="flex flex-1 items-center space-x-3">
+                  <div className="flex h-9 w-9 items-center justify-center rounded-md bg-muted">
                     {getFileIcon(fileInfo.fileExt)}
                   </div>
                   <div className="min-w-0 flex-1">
-                    <p className="group-hover:text-primary truncate text-base font-semibold text-gray-800 transition-colors duration-200">
+                    <p className="truncate text-sm font-medium text-foreground">
                       {fileInfo.realFileName}
                     </p>
-                    <div className="mt-1 flex items-center space-x-3 text-sm text-gray-500">
-                      <span className="flex items-center space-x-1">
-                        <div className="h-1.5 w-1.5 rounded-full bg-blue-400"></div>
-                        <span className="font-medium">{formatFileSize(fileInfo.fileSize)}</span>
-                      </span>
-                      <span className="flex items-center space-x-1">
-                        <div className="h-1.5 w-1.5 rounded-full bg-gray-400"></div>
-                        <span className="rounded-md bg-gray-100 px-2 py-1 text-xs font-medium">
-                          {fileInfo.fileExt.toUpperCase()}
-                        </span>
+                    <div className="mt-0.5 flex items-center space-x-2 text-xs text-muted-foreground">
+                      <span>{formatFileSize(fileInfo.fileSize)}</span>
+                      <span>·</span>
+                      <span className="rounded bg-muted px-1.5 py-0.5 font-medium">
+                        {fileInfo.fileExt.toUpperCase()}
                       </span>
                       {fileInfo.writer && (
-                        <span className="flex items-center space-x-1">
-                          <div className="h-1.5 w-1.5 rounded-full bg-green-400"></div>
-                          <span className="text-xs">{fileInfo.writer}</span>
-                        </span>
+                        <>
+                          <span>·</span>
+                          <span>{fileInfo.writer}</span>
+                        </>
                       )}
                     </div>
 
                     {/* 업로드 진행률 */}
                     {fileInfo.isUploading && fileConfig.showProgress && (
-                      <div className="mt-2 h-1 w-full rounded-full bg-gray-200">
+                      <div className="mt-1.5 h-1 w-full rounded-full bg-muted">
                         <div
-                          className="h-1 rounded-full bg-blue-600 transition-all duration-300"
+                          className="h-1 rounded-full bg-primary transition-all duration-300"
                           style={{ width: `${fileInfo.uploadProgress || 0}%` }}
                         />
                       </div>
@@ -850,32 +869,32 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
 
                     {/* 에러 메시지 */}
                     {fileInfo.hasError && (
-                      <div className="bg-destructive/10 mt-2 flex items-center space-x-2 rounded-md p-2 text-sm text-red-700">
-                        <AlertCircle className="h-4 w-4 flex-shrink-0" />
+                      <div className="mt-1.5 flex items-center space-x-1.5 rounded-md bg-destructive/10 p-1.5 text-xs text-destructive">
+                        <AlertCircle className="h-3.5 w-3.5 flex-shrink-0" />
                         <span>{fileInfo.errorMessage}</span>
                       </div>
                     )}
                   </div>
                 </div>
 
-                <div className="flex items-center space-x-2">
+                <div className="flex items-center space-x-1">
                   {/* 상태 표시 */}
                   {fileInfo.isUploading && (
-                    <div className="bg-accent flex items-center space-x-2 rounded-lg px-3 py-2">
-                      <Loader2 className="h-4 w-4 animate-spin text-blue-500" />
-                      <span className="text-primary text-xs font-medium">업로드 중...</span>
+                    <div className="flex items-center space-x-1.5 rounded-md bg-muted px-2 py-1">
+                      <Loader2 className="h-3.5 w-3.5 animate-spin text-primary" />
+                      <span className="text-xs text-muted-foreground">업로드 중...</span>
                     </div>
                   )}
                   {fileInfo.status === "ACTIVE" && (
-                    <div className="flex items-center space-x-2 rounded-lg bg-green-50 px-3 py-2">
-                      <CheckCircle className="h-4 w-4 text-green-500" />
-                      <span className="text-xs font-medium text-green-600">완료</span>
+                    <div className="flex items-center space-x-1.5 rounded-md bg-muted px-2 py-1">
+                      <CheckCircle className="h-3.5 w-3.5 text-success" />
+                      <span className="text-xs text-muted-foreground">완료</span>
                     </div>
                   )}
                   {fileInfo.hasError && (
-                    <div className="bg-destructive/10 flex items-center space-x-2 rounded-lg px-3 py-2">
-                      <AlertCircle className="h-4 w-4 text-red-500" />
-                      <span className="text-destructive text-xs font-medium">오류</span>
+                    <div className="flex items-center space-x-1.5 rounded-md bg-destructive/10 px-2 py-1">
+                      <AlertCircle className="h-3.5 w-3.5 text-destructive" />
+                      <span className="text-xs text-destructive">오류</span>
                     </div>
                   )}
 
@@ -887,7 +906,7 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
                           variant="ghost"
                           size="sm"
                           onClick={() => previewFile(fileInfo)}
-                          className="hover:bg-accent hover:text-primary h-9 w-9 rounded-lg transition-all duration-200"
+                          className="h-8 w-8"
                         >
                           <Eye className="h-4 w-4" />
                         </Button>
@@ -897,7 +916,7 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
                         variant="ghost"
                         size="sm"
                         onClick={() => previewFile(fileInfo)}
-                        className="h-9 w-9 rounded-lg transition-all duration-200 hover:bg-green-50 hover:text-green-600"
+                        className="h-8 w-8"
                       >
                         <Download className="h-4 w-4" />
                       </Button>
@@ -906,7 +925,7 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
                         variant="ghost"
                         size="sm"
                         onClick={() => deleteFile(fileInfo)}
-                        className="hover:bg-destructive/10 h-9 w-9 rounded-lg text-red-500 transition-all duration-200 hover:text-red-700"
+                        className="h-8 w-8 text-destructive hover:bg-destructive/10 hover:text-destructive"
                       >
                         <X className="h-4 w-4" />
                       </Button>
@@ -920,16 +939,14 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
       )}
 
       {/* 문서 타입 정보 */}
-      <div className="flex items-center justify-center space-x-2 rounded-xl border border-amber-200/40 bg-gradient-to-r from-amber-50/80 to-orange-50/60 px-4 py-3">
+      <div className="flex items-center justify-between rounded-md border border-border bg-muted/20 px-4 py-2.5">
         <div className="flex items-center space-x-2">
-          <div className="flex h-6 w-6 items-center justify-center rounded-full bg-amber-100">
-            <File className="h-3 w-3 text-amber-600" />
-          </div>
-          <span className="text-sm font-medium text-amber-700">
+          <File className="h-4 w-4 text-muted-foreground" />
+          <span className="text-xs text-muted-foreground">
             파일명 클릭으로 미리보기 또는 "전체 자세히보기"로 파일 관리
           </span>
         </div>
-        <Badge variant="outline" className="border-amber-200/60 bg-white/80 text-amber-700">
+        <Badge variant="outline">
           {fileConfig.docTypeName}
         </Badge>
       </div>
diff --git a/frontend/components/screen/widgets/FlowButtonGroup.tsx b/frontend/components/screen/widgets/FlowButtonGroup.tsx
index 6ae229d1..ee1159ee 100644
--- a/frontend/components/screen/widgets/FlowButtonGroup.tsx
+++ b/frontend/components/screen/widgets/FlowButtonGroup.tsx
@@ -139,12 +139,12 @@ export const FlowButtonGroup: React.FC<FlowButtonGroupProps> = ({
             {renderButton(button, buttonVisibility[index])}
             {!buttonVisibility[index] && (
               <div
-                className="pointer-events-none absolute inset-0 flex items-center justify-center bg-gray-900/10"
+                className="pointer-events-none absolute inset-0 flex items-center justify-center bg-foreground/10"
                 style={{
                   border: "1px dashed #94a3b8",
                 }}
               >
-                <span className="text-[10px] text-gray-500">숨김</span>
+                <span className="text-[10px] text-muted-foreground">숨김</span>
               </div>
             )}
           </div>
diff --git a/frontend/components/screen/widgets/FlowWidget.tsx b/frontend/components/screen/widgets/FlowWidget.tsx
index ecb189c3..27e6a91b 100644
--- a/frontend/components/screen/widgets/FlowWidget.tsx
+++ b/frontend/components/screen/widgets/FlowWidget.tsx
@@ -1573,7 +1573,7 @@ export function FlowWidget({
                     className="h-7 text-xs"
                     title="Excel 내보내기"
                   >
-                    <FileSpreadsheet className="mr-1 h-3 w-3 text-green-600" />
+                    <FileSpreadsheet className="mr-1 h-3 w-3 text-emerald-600" />
                     Excel
                   </Button>
                   <Button
@@ -1583,7 +1583,7 @@ export function FlowWidget({
                     className="h-7 text-xs"
                     title="PDF 내보내기"
                   >
-                    <FileText className="mr-1 h-3 w-3 text-red-600" />
+                    <FileText className="mr-1 h-3 w-3 text-destructive" />
                     PDF
                   </Button>
                 </div>
diff --git a/frontend/components/screen/widgets/TabsWidget.tsx b/frontend/components/screen/widgets/TabsWidget.tsx
index 486e76d9..83c55777 100644
--- a/frontend/components/screen/widgets/TabsWidget.tsx
+++ b/frontend/components/screen/widgets/TabsWidget.tsx
@@ -9,6 +9,7 @@ import { cn } from "@/lib/utils";
 import { useActiveTab } from "@/contexts/ActiveTabContext";
 import { DynamicComponentRenderer } from "@/lib/registry/DynamicComponentRenderer";
 import { screenApi } from "@/lib/api/screen";
+import { ResponsiveGridRenderer } from "@/components/screen/ResponsiveGridRenderer";
 
 // 확장된 TabItem 타입 (screenId 지원)
 interface ExtendedTabItem extends TabItem {
@@ -295,7 +296,7 @@ export function TabsWidget({
 
     // 3. 둘 다 없는 경우
     return (
-      <div className="flex h-full w-full items-center justify-center rounded border-2 border-dashed border-gray-300 bg-gray-50">
+      <div className="flex h-full w-full items-center justify-center rounded border-2 border-dashed border-input bg-muted">
         <p className="text-muted-foreground text-sm">
           {isDesignMode ? "컴포넌트를 드래그하여 추가하세요" : "컴포넌트가 없습니다"}
         </p>
@@ -305,131 +306,158 @@ export function TabsWidget({
 
   // screenId로 로드한 화면 컴포넌트 렌더링
   const renderScreenComponents = (tab: ExtendedTabItem, components: ComponentData[]) => {
-    // InteractiveScreenViewerDynamic 동적 로드
     const InteractiveScreenViewerDynamic =
       require("@/components/screen/InteractiveScreenViewerDynamic").InteractiveScreenViewerDynamic;
 
-    // 컴포넌트들의 최대 위치를 계산하여 스크롤 가능한 영역 확보
-    const maxBottom = Math.max(...components.map((c) => (c.position?.y || 0) + (c.size?.height || 100)), 300);
-    const maxRight = Math.max(...components.map((c) => (c.position?.x || 0) + (c.size?.width || 200)), 400);
+    const canvasWidth = Math.max(
+      ...components.map((c) => (c.position?.x || 0) + (c.size?.width || 200)),
+      800,
+    );
+    const canvasHeight = Math.max(
+      ...components.map((c) => (c.position?.y || 0) + (c.size?.height || 100)),
+      400,
+    );
 
     return (
-      <div
-        className="relative h-full w-full overflow-auto"
-        style={{
-          minHeight: maxBottom + 20,
-          minWidth: maxRight + 20,
-        }}
-      >
-        {components.map((comp) => (
-          <div
-            key={comp.id}
-            className="absolute"
-            style={{
-              left: comp.position?.x || 0,
-              top: comp.position?.y || 0,
-              width: comp.size?.width || "auto",
-              height: comp.size?.height || "auto",
-            }}
-          >
-            <InteractiveScreenViewerDynamic
-              component={comp}
-              allComponents={components}
-              formData={formData}
-              onFormDataChange={onFormDataChange}
-              screenInfo={screenInfoMap[tab.id]}
-              menuObjid={menuObjid}
-              parentTabId={tab.id}
-              parentTabsComponentId={component.id}
-            />
-          </div>
-        ))}
-      </div>
+      <ResponsiveGridRenderer
+        components={components}
+        canvasWidth={canvasWidth}
+        canvasHeight={canvasHeight}
+        renderComponent={(comp) => (
+          <InteractiveScreenViewerDynamic
+            component={comp}
+            allComponents={components}
+            formData={formData}
+            onFormDataChange={onFormDataChange}
+            screenInfo={screenInfoMap[tab.id]}
+            menuObjid={menuObjid}
+            parentTabId={tab.id}
+            parentTabsComponentId={component.id}
+          />
+        )}
+      />
     );
   };
 
   // 인라인 컴포넌트 렌더링 (v2 방식)
   const renderInlineComponents = (tab: ExtendedTabItem, components: TabInlineComponent[]) => {
-    // 컴포넌트들의 최대 위치를 계산하여 스크롤 가능한 영역 확보
-    const maxBottom = Math.max(
-      ...components.map((c) => (c.position?.y || 0) + (c.size?.height || 100)),
-      300, // 최소 높이
-    );
-    const maxRight = Math.max(
+    if (isDesignMode) {
+      const maxBottom = Math.max(
+        ...components.map((c) => (c.position?.y || 0) + (c.size?.height || 100)),
+        300,
+      );
+      const maxRight = Math.max(
+        ...components.map((c) => (c.position?.x || 0) + (c.size?.width || 200)),
+        400,
+      );
+
+      return (
+        <div
+          className="relative"
+          style={{ minHeight: maxBottom + 20, minWidth: maxRight + 20 }}
+        >
+          {components.map((comp: TabInlineComponent) => {
+            const isSelected = selectedComponentId === comp.id;
+            return (
+              <div
+                key={comp.id}
+                className={cn("absolute cursor-move", isSelected && "ring-primary ring-2 ring-offset-2")}
+                style={{
+                  left: comp.position?.x || 0,
+                  top: comp.position?.y || 0,
+                  width: comp.size?.width || 200,
+                  height: comp.size?.height || 100,
+                }}
+                onClick={(e) => {
+                  if (onComponentSelect) {
+                    e.stopPropagation();
+                    onComponentSelect(tab.id, comp.id);
+                  }
+                }}
+              >
+                <DynamicComponentRenderer
+                  {...restProps}
+                  component={{
+                    id: comp.id,
+                    type: "component" as const,
+                    componentType: comp.componentType,
+                    label: comp.label,
+                    position: comp.position,
+                    size: comp.size,
+                    componentConfig: comp.componentConfig || {},
+                    style: comp.style,
+                  } as any}
+                  formData={formData}
+                  onFormDataChange={onFormDataChange}
+                  menuObjid={menuObjid}
+                  isDesignMode={true}
+                  isInteractive={false}
+                  selectedRowsData={localSelectedRowsData}
+                  onSelectedRowsChange={handleSelectedRowsChange}
+                  parentTabId={tab.id}
+                  parentTabsComponentId={component.id}
+                  {...(screenInfoMap[tab.id]
+                    ? { tableName: screenInfoMap[tab.id].tableName, screenId: screenInfoMap[tab.id].id }
+                    : {})}
+                />
+              </div>
+            );
+          })}
+        </div>
+      );
+    }
+
+    // 런타임: ResponsiveGridRenderer 사용
+    const canvasWidth = Math.max(
       ...components.map((c) => (c.position?.x || 0) + (c.size?.width || 200)),
-      400, // 최소 너비
+      800,
     );
+    const canvasHeight = Math.max(
+      ...components.map((c) => (c.position?.y || 0) + (c.size?.height || 100)),
+      400,
+    );
+
+    const componentDataList: ComponentData[] = components.map((comp) => ({
+      id: comp.id,
+      componentType: comp.componentType,
+      label: comp.label,
+      position: comp.position,
+      size: comp.size,
+      componentConfig: comp.componentConfig || {},
+      style: comp.style,
+      type: "component",
+    })) as any;
 
     return (
-      <div
-        className="relative"
-        style={{
-          minHeight: maxBottom + 20,
-          minWidth: maxRight + 20,
-        }}
-      >
-        {components.map((comp: TabInlineComponent) => {
-          const isSelected = selectedComponentId === comp.id;
-
-          return (
-            <div
-              key={comp.id}
-              className={cn(
-                "absolute",
-                isDesignMode && "cursor-move",
-                isDesignMode && isSelected && "ring-primary ring-2 ring-offset-2",
-              )}
-              style={{
-                left: comp.position?.x || 0,
-                top: comp.position?.y || 0,
-                width: comp.size?.width || 200,
-                height: comp.size?.height || 100,
-              }}
-              onClick={(e) => {
-                if (isDesignMode && onComponentSelect) {
-                  e.stopPropagation();
-                  onComponentSelect(tab.id, comp.id);
-                }
-              }}
-            >
-              <DynamicComponentRenderer
-                {...restProps}
-                component={{
-                  id: comp.id,
-                  componentType: comp.componentType,
-                  label: comp.label,
-                  position: comp.position,
-                  size: comp.size,
-                  componentConfig: comp.componentConfig || {},
-                  style: comp.style,
-                }}
-                formData={formData}
-                onFormDataChange={onFormDataChange}
-                menuObjid={menuObjid}
-                isDesignMode={isDesignMode}
-                isInteractive={!isDesignMode}
-                selectedRowsData={localSelectedRowsData}
-                onSelectedRowsChange={handleSelectedRowsChange}
-                parentTabId={tab.id}
-                parentTabsComponentId={component.id}
-                // 탭에 screenId가 있으면 해당 화면의 tableName/screenId로 오버라이드
-                {...(screenInfoMap[tab.id]
-                  ? {
-                      tableName: screenInfoMap[tab.id].tableName,
-                      screenId: screenInfoMap[tab.id].id,
-                    }
-                  : {})}
-              />
-            </div>
-          );
-        })}
-      </div>
+      <ResponsiveGridRenderer
+        components={componentDataList}
+        canvasWidth={canvasWidth}
+        canvasHeight={canvasHeight}
+        renderComponent={(comp) => (
+          <DynamicComponentRenderer
+            {...restProps}
+            component={comp}
+            formData={formData}
+            onFormDataChange={onFormDataChange}
+            menuObjid={menuObjid}
+            isDesignMode={false}
+            isInteractive={true}
+            selectedRowsData={localSelectedRowsData}
+            onSelectedRowsChange={handleSelectedRowsChange}
+            parentTabId={tab.id}
+            parentTabsComponentId={component.id}
+            {...(screenInfoMap[tab.id]
+              ? { tableName: screenInfoMap[tab.id].tableName, screenId: screenInfoMap[tab.id].id }
+              : {})}
+          />
+        )}
+      />
     );
   };
 
   if (visibleTabs.length === 0) {
     return (
-      <div className="flex h-full w-full items-center justify-center rounded border-2 border-dashed border-gray-300 bg-gray-50">
+      <div className="flex h-full w-full items-center justify-center rounded border-2 border-dashed border-input bg-muted">
         <p className="text-muted-foreground text-sm">탭이 없습니다</p>
       </div>
     );
diff --git a/frontend/components/screen/widgets/types/ButtonWidget.tsx b/frontend/components/screen/widgets/types/ButtonWidget.tsx
index 988167d2..d877fbcc 100644
--- a/frontend/components/screen/widgets/types/ButtonWidget.tsx
+++ b/frontend/components/screen/widgets/types/ButtonWidget.tsx
@@ -2,6 +2,7 @@
 
 import React from "react";
 import { WebTypeComponentProps } from "@/lib/registry/types";
+import { ButtonIconRenderer } from "@/lib/button-icon-map";
 
 export const ButtonWidget: React.FC<WebTypeComponentProps> = ({
   config,
@@ -14,40 +15,36 @@ export const ButtonWidget: React.FC<WebTypeComponentProps> = ({
   required,
   className,
   style,
-  isDesignMode = false, // 디자인 모드 플래그
+  isDesignMode = false,
   ...restProps
 }) => {
   const handleClick = (e: React.MouseEvent) => {
-    // 디자인 모드에서는 아무것도 하지 않고 그냥 이벤트 전파
     if (isDesignMode) {
       return;
     }
 
-    // 버튼 클릭 시 동작 (추후 버튼 액션 시스템과 연동)
     console.log("Button clicked:", config);
 
-    // onChange를 통해 클릭 이벤트 전달
     if (onChange) {
       onChange("clicked");
     }
   };
 
-  // 커스텀 색상 확인 (config 또는 style에서)
   const hasCustomBg = config?.backgroundColor || style?.backgroundColor;
   const hasCustomColor = config?.textColor || style?.color;
   const hasCustomColors = hasCustomBg || hasCustomColor;
   
-  // 실제 적용할 배경색과 글자색
   const bgColor = config?.backgroundColor || style?.backgroundColor;
   const textColor = config?.textColor || style?.color;
-  
-  // 디자인 모드에서는 div로 렌더링하여 버튼 동작 완전 차단
+
+  const fallbackLabel = config?.label || config?.text || (value as string) || placeholder || "버튼";
+
   if (isDesignMode) {
     return (
       <div
-        onClick={handleClick} // 클릭 핸들러 추가하여 이벤트 전파
+        onClick={handleClick}
         className={`flex items-center justify-center rounded-md px-4 text-sm font-medium ${
-          hasCustomColors ? '' : 'bg-blue-600 text-white'
+          hasCustomColors ? '' : 'bg-primary text-white'
         } ${className || ""}`}
         style={{
           ...style,
@@ -55,11 +52,10 @@ export const ButtonWidget: React.FC<WebTypeComponentProps> = ({
           color: textColor,
           width: "100%",
           height: "100%",
-          cursor: "pointer", // 선택 가능하도록 포인터 표시
+          cursor: "pointer",
         }}
-        title={config?.tooltip || placeholder}
       >
-        {config?.label || config?.text || value || placeholder || "버튼"}
+        <ButtonIconRenderer componentConfig={config} fallbackLabel={fallbackLabel} />
       </div>
     );
   }
@@ -69,8 +65,8 @@ export const ButtonWidget: React.FC<WebTypeComponentProps> = ({
       type="button"
       onClick={handleClick}
       disabled={disabled || readonly}
-      className={`flex items-center justify-center rounded-md px-4 text-sm font-medium transition-colors duration-200 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:bg-gray-300 disabled:text-gray-500 ${
-        hasCustomColors ? '' : 'bg-blue-600 text-white hover:bg-blue-700'
+      className={`flex items-center justify-center rounded-md px-4 text-sm font-medium transition-colors duration-200 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:bg-muted/60 disabled:text-muted-foreground ${
+        hasCustomColors ? '' : 'bg-primary text-white hover:bg-primary/90'
       } ${className || ""}`}
       style={{
         ...style,
@@ -79,9 +75,8 @@ export const ButtonWidget: React.FC<WebTypeComponentProps> = ({
         width: "100%",
         height: "100%",
       }}
-      title={config?.tooltip || placeholder}
     >
-      {config?.label || config?.text || value || placeholder || "버튼"}
+      <ButtonIconRenderer componentConfig={config} fallbackLabel={fallbackLabel} />
     </button>
   );
 };
diff --git a/frontend/components/screen/widgets/types/CheckboxWidget.tsx b/frontend/components/screen/widgets/types/CheckboxWidget.tsx
index 2a76c745..abbd18c8 100644
--- a/frontend/components/screen/widgets/types/CheckboxWidget.tsx
+++ b/frontend/components/screen/widgets/types/CheckboxWidget.tsx
@@ -47,7 +47,7 @@ export const CheckboxWidget: React.FC<WebTypeComponentProps> = ({ component, val
         className="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
       >
         {checkboxText}
-        {required && <span className="ml-1 text-red-500">*</span>}
+        {required && <span className="ml-1 text-destructive">*</span>}
       </Label>
     </div>
   );
diff --git a/frontend/components/screen/widgets/types/FileWidget.tsx b/frontend/components/screen/widgets/types/FileWidget.tsx
index 50fd61dc..f828d223 100644
--- a/frontend/components/screen/widgets/types/FileWidget.tsx
+++ b/frontend/components/screen/widgets/types/FileWidget.tsx
@@ -134,22 +134,17 @@ export const FileWidget: React.FC<WebTypeComponentProps> = ({ component, value,
     <div className="h-full w-full space-y-2">
       {/* 파일 업로드 영역 */}
       <div
-        className="group relative cursor-pointer rounded-2xl border-2 border-dashed border-gray-300/60 bg-gradient-to-br from-gray-50/80 to-blue-50/40 p-8 text-center transition-all duration-300 hover:border-blue-400/80 hover:bg-gradient-to-br hover:from-blue-50/90 hover:to-indigo-50/60 hover:shadow-lg hover:shadow-blue-500/10"
+        className="group cursor-pointer rounded-lg border-2 border-dashed border-border bg-muted/20 p-6 text-center transition-colors duration-150 hover:border-primary/60 hover:bg-muted/30"
         onClick={handleFileSelect}
         onDragOver={handleDragOver}
         onDrop={handleDrop}
         style={style}
       >
-        <div className="relative">
-          <Upload className="mx-auto mb-3 h-12 w-12 text-blue-400 transition-all duration-300 group-hover:scale-110 group-hover:text-blue-500" />
-          <div className="absolute inset-0 flex items-center justify-center">
-            <div className="h-16 w-16 rounded-full bg-primary/20/50 opacity-0 transition-all duration-300 group-hover:opacity-100 group-hover:scale-110"></div>
-          </div>
-        </div>
-        <p className="mb-2 text-lg font-semibold text-gray-700 transition-colors duration-300 group-hover:text-primary">
+        <Upload className="mx-auto mb-2 h-8 w-8 text-muted-foreground transition-colors duration-150 group-hover:text-primary" />
+        <p className="mb-1 text-sm font-medium text-foreground">
           {readonly ? "파일 업로드 불가" : "파일을 선택하거나 드래그하여 업로드"}
         </p>
-        <p className="text-sm text-gray-500 transition-colors duration-300 group-hover:text-blue-500">
+        <p className="text-xs text-muted-foreground">
           {config?.accept && `허용 형식: ${config.accept}`}
           {config?.maxSize && ` (최대 ${config.maxSize}MB)`}
         </p>
@@ -167,39 +162,32 @@ export const FileWidget: React.FC<WebTypeComponentProps> = ({ component, value,
 
       {/* 업로드된 파일 목록 */}
       {files.length > 0 && (
-        <div className="space-y-3">
-          <div className="flex items-center justify-between rounded-xl bg-gradient-to-r from-blue-50/80 to-indigo-50/60 px-4 py-3 border border-primary/20/40">
-            <div className="flex items-center space-x-3">
-              <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary/20">
-                <File className="h-4 w-4 text-primary" />
-              </div>
-              <div>
-                <h4 className="text-lg font-semibold text-gray-800">
-                  업로드된 파일 ({files.length}/{config?.maxFiles || "∞"})
-                </h4>
-                <p className="text-sm text-muted-foreground">
-                  총 {formatFileSize(files.reduce((sum, file) => sum + file.size, 0))}
-                </p>
-              </div>
+        <div className="space-y-2">
+          <div className="flex items-center justify-between rounded-md border border-border bg-muted/20 px-3 py-2">
+            <div className="flex items-center space-x-2">
+              <File className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-medium text-foreground">
+                업로드된 파일 ({files.length}/{config?.maxFiles || "∞"})
+              </span>
+              <span className="text-xs text-muted-foreground">
+                · 총 {formatFileSize(files.reduce((sum, file) => sum + file.size, 0))}
+              </span>
             </div>
           </div>
 
-          <div className="max-h-40 space-y-2 overflow-y-auto">
+          <div className="max-h-40 space-y-1.5 overflow-y-auto">
             {files.map((file, index) => (
-              <div key={index} className="group flex items-center justify-between rounded-xl border border-gray-200/60 bg-white/90 p-3 shadow-sm transition-all duration-200 hover:shadow-md hover:border-blue-300/60 hover:bg-accent/30">
-                <div className="flex flex-1 items-center space-x-3">
-                  <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-gradient-to-br from-gray-50 to-gray-100/80 shadow-sm">
-                    <File className="h-5 w-5 text-gray-500" />
+              <div key={index} className="flex items-center justify-between rounded-md border border-border bg-background p-2.5 transition-colors duration-150 hover:bg-accent/30">
+                <div className="flex flex-1 items-center space-x-2">
+                  <div className="flex h-8 w-8 items-center justify-center rounded-md bg-muted">
+                    <File className="h-4 w-4 text-muted-foreground" />
                   </div>
                   <div className="min-w-0 flex-1">
-                    <p className="truncate text-sm font-semibold text-gray-800 group-hover:text-primary transition-colors duration-200">
+                    <p className="truncate text-sm font-medium text-foreground">
                       {file.name}
                     </p>
                     {file.size > 0 && (
-                      <div className="flex items-center space-x-2 mt-1">
-                        <div className="h-1.5 w-1.5 rounded-full bg-blue-400"></div>
-                        <span className="text-xs font-medium text-gray-500">{formatFileSize(file.size)}</span>
-                      </div>
+                      <span className="text-xs text-muted-foreground">{formatFileSize(file.size)}</span>
                     )}
                   </div>
                 </div>
@@ -212,9 +200,9 @@ export const FileWidget: React.FC<WebTypeComponentProps> = ({ component, value,
                       e.stopPropagation();
                       removeFile(index);
                     }}
-                    className="h-8 w-8 rounded-lg text-red-500 hover:bg-destructive/10 hover:text-red-700 transition-all duration-200"
+                    className="h-7 w-7 text-destructive hover:bg-destructive/10 hover:text-destructive"
                   >
-                    <X className="h-4 w-4" />
+                    <X className="h-3.5 w-3.5" />
                   </Button>
                 )}
               </div>
@@ -225,21 +213,17 @@ export const FileWidget: React.FC<WebTypeComponentProps> = ({ component, value,
 
       {/* 파일 개수 표시 */}
       {files.length > 0 && (
-        <div className="flex items-center justify-center space-x-2 rounded-xl bg-gradient-to-r from-amber-50/80 to-orange-50/60 border border-amber-200/40 px-4 py-3">
-          <div className="flex items-center space-x-2">
-            <div className="flex h-6 w-6 items-center justify-center rounded-full bg-amber-100">
-              <File className="h-3 w-3 text-amber-600" />
-            </div>
-            <span className="text-sm font-medium text-amber-700">
-              파일명 클릭으로 미리보기 또는 "전체 자세히보기"로 파일 관리
+        <div className="flex items-center justify-between rounded-md border border-border bg-muted/20 px-3 py-2">
+          <div className="flex items-center space-x-1.5">
+            <File className="h-3.5 w-3.5 text-muted-foreground" />
+            <span className="text-xs text-muted-foreground">
+              파일명 클릭으로 미리보기 또는 파일 관리
             </span>
           </div>
-          <div className="flex items-center space-x-2">
-            <Badge variant="outline" className="bg-white/80 border-amber-200/60 text-amber-700">
-              {files.length}개 파일
-            </Badge>
+          <div className="flex items-center space-x-1.5">
+            <Badge variant="outline">{files.length}개 파일</Badge>
             {config?.maxFiles && (
-              <Badge variant="outline" className="bg-white/80 border-gray-200/60 text-muted-foreground">
+              <Badge variant="outline" className="text-muted-foreground">
                 최대 {config.maxFiles}개
               </Badge>
             )}
@@ -247,7 +231,7 @@ export const FileWidget: React.FC<WebTypeComponentProps> = ({ component, value,
         </div>
       )}
 
-      {required && files.length === 0 && <div className="text-xs text-red-500">* 파일을 업로드해야 합니다</div>}
+      {required && files.length === 0 && <div className="text-xs text-destructive">* 파일을 업로드해야 합니다</div>}
     </div>
   );
 };
diff --git a/frontend/components/screen/widgets/types/ImageWidget.tsx b/frontend/components/screen/widgets/types/ImageWidget.tsx
index a9bd62d3..f4d1517b 100644
--- a/frontend/components/screen/widgets/types/ImageWidget.tsx
+++ b/frontend/components/screen/widgets/types/ImageWidget.tsx
@@ -136,7 +136,7 @@ export const ImageWidget: React.FC<
       {imageUrl ? (
         // 이미지 표시 모드
         <div
-          className="group relative w-full flex-1 overflow-hidden rounded-lg border border-gray-200 bg-gray-50 shadow-sm transition-all hover:shadow-md"
+          className="group relative w-full flex-1 overflow-hidden rounded-lg border border-border bg-muted shadow-sm transition-all hover:shadow-md"
           style={filteredStyle}
         >
           <img
@@ -164,8 +164,8 @@ export const ImageWidget: React.FC<
         <div
           className={`group relative flex w-full flex-1 flex-col items-center justify-center rounded-lg border-2 border-dashed p-3 text-center shadow-sm transition-all duration-300 ${
             isDesignMode
-              ? "cursor-default border-gray-200 bg-gray-50"
-              : "cursor-pointer border-gray-300 bg-white hover:border-blue-400 hover:bg-blue-50/50 hover:shadow-md"
+              ? "cursor-default border-border bg-muted"
+              : "cursor-pointer border-input bg-white hover:border-primary/60 hover:bg-primary/10/50 hover:shadow-md"
           }`}
           onClick={handleFileSelect}
           onDragOver={handleDragOver}
@@ -173,13 +173,13 @@ export const ImageWidget: React.FC<
           style={filteredStyle}
         >
           {uploading ? (
-            <p className="text-xs font-medium text-blue-600">업로드 중...</p>
+            <p className="text-xs font-medium text-primary">업로드 중...</p>
           ) : readonly ? (
-            <p className="text-xs font-medium text-gray-500">업로드 불가</p>
+            <p className="text-xs font-medium text-muted-foreground">업로드 불가</p>
           ) : isDesignMode ? (
-            <p className="text-xs font-medium text-gray-400">이미지 업로드</p>
+            <p className="text-xs font-medium text-muted-foreground/70">이미지 업로드</p>
           ) : (
-            <p className="text-xs font-medium text-gray-700 transition-colors duration-300 group-hover:text-blue-600">
+            <p className="text-xs font-medium text-foreground transition-colors duration-300 group-hover:text-primary">
               이미지 업로드
             </p>
           )}
@@ -197,7 +197,7 @@ export const ImageWidget: React.FC<
       />
 
       {/* 필수 필드 경고 */}
-      {required && !imageUrl && <div className="text-xs text-red-500">* 이미지를 업로드해야 합니다</div>}
+      {required && !imageUrl && <div className="text-xs text-destructive">* 이미지를 업로드해야 합니다</div>}
     </div>
   );
 };
diff --git a/frontend/components/screen/widgets/types/NumberWidget.tsx b/frontend/components/screen/widgets/types/NumberWidget.tsx
index 9c28528a..eadc15c4 100644
--- a/frontend/components/screen/widgets/types/NumberWidget.tsx
+++ b/frontend/components/screen/widgets/types/NumberWidget.tsx
@@ -4,6 +4,7 @@ import React from "react";
 import { Input } from "@/components/ui/input";
 import { WebTypeComponentProps } from "@/lib/registry/types";
 import { WidgetComponent, NumberTypeConfig } from "@/types/screen";
+import { formatNumber as formatNum, formatCurrency } from "@/lib/formatting";
 
 export const NumberWidget: React.FC<WebTypeComponentProps> = ({ component, value, onChange, readonly = false }) => {
   const widget = component as WidgetComponent;
@@ -21,10 +22,7 @@ export const NumberWidget: React.FC<WebTypeComponentProps> = ({ component, value
     if (isNaN(numValue)) return "";
 
     if (config?.format === "currency") {
-      return new Intl.NumberFormat("ko-KR", {
-        style: "currency",
-        currency: "KRW",
-      }).format(numValue);
+      return formatCurrency(numValue);
     }
 
     if (config?.format === "percentage") {
@@ -32,7 +30,7 @@ export const NumberWidget: React.FC<WebTypeComponentProps> = ({ component, value
     }
 
     if (config?.thousandSeparator) {
-      return new Intl.NumberFormat("ko-KR").format(numValue);
+      return formatNum(numValue);
     }
 
     return numValue.toString();
diff --git a/frontend/components/screen/widgets/types/RadioWidget.tsx b/frontend/components/screen/widgets/types/RadioWidget.tsx
index dbc8e22c..f5fa86dd 100644
--- a/frontend/components/screen/widgets/types/RadioWidget.tsx
+++ b/frontend/components/screen/widgets/types/RadioWidget.tsx
@@ -55,7 +55,7 @@ export const RadioWidget: React.FC<WebTypeComponentProps> = ({ component, value,
         })}
       </RadioGroup>
 
-      {required && <div className="mt-1 text-xs text-red-500">* 필수 선택 항목입니다</div>}
+      {required && <div className="mt-1 text-xs text-destructive">* 필수 선택 항목입니다</div>}
     </div>
   );
 };
diff --git a/frontend/components/screen/widgets/types/RatingWidget.tsx b/frontend/components/screen/widgets/types/RatingWidget.tsx
index 6a10e32f..e5b9f19f 100644
--- a/frontend/components/screen/widgets/types/RatingWidget.tsx
+++ b/frontend/components/screen/widgets/types/RatingWidget.tsx
@@ -68,7 +68,7 @@ export const RatingWidget: React.FC<RatingWidgetProps> = ({
         <button
           key={i}
           type="button"
-          className={` ${sizeClasses[finalSize]} transition-colors duration-150 ${disabled || readonly ? "cursor-not-allowed opacity-50" : "cursor-pointer hover:scale-110"} ${isFilled ? "text-yellow-400" : "text-gray-300"} `}
+          className={` ${sizeClasses[finalSize]} transition-colors duration-150 ${disabled || readonly ? "cursor-not-allowed opacity-50" : "cursor-pointer hover:scale-110"} ${isFilled ? "text-yellow-400" : "text-muted-foreground/50"} `}
           onClick={() => handleStarClick(i)}
           onMouseEnter={() => handleStarHover(i)}
           disabled={disabled || readonly}
diff --git a/frontend/components/table-category/CategoryValueManagerTree.tsx b/frontend/components/table-category/CategoryValueManagerTree.tsx
index b3329a41..88ecfb49 100644
--- a/frontend/components/table-category/CategoryValueManagerTree.tsx
+++ b/frontend/components/table-category/CategoryValueManagerTree.tsx
@@ -123,7 +123,7 @@ const TreeNode: React.FC<TreeNodeProps> = ({
         <Folder className="h-4 w-4 text-amber-500" />
       );
     }
-    return <Tag className="h-4 w-4 text-blue-500" />;
+    return <Tag className="h-4 w-4 text-primary" />;
   };
 
   // 깊이별 라벨
diff --git a/frontend/components/tax-invoice/CostTypeStats.tsx b/frontend/components/tax-invoice/CostTypeStats.tsx
index 786c093a..3902a006 100644
--- a/frontend/components/tax-invoice/CostTypeStats.tsx
+++ b/frontend/components/tax-invoice/CostTypeStats.tsx
@@ -46,12 +46,12 @@ const costTypeIcons: Record<CostType, React.ReactNode> = {
 
 // 비용 유형별 색상
 const costTypeColors: Record<CostType, string> = {
-  purchase: "bg-blue-500",
-  installation: "bg-green-500",
-  repair: "bg-orange-500",
+  purchase: "bg-primary",
+  installation: "bg-emerald-500",
+  repair: "bg-amber-500",
   maintenance: "bg-purple-500",
-  disposal: "bg-red-500",
-  other: "bg-gray-500",
+  disposal: "bg-destructive",
+  other: "bg-muted0",
 };
 
 export function CostTypeStats() {
@@ -168,7 +168,7 @@ export function CostTypeStats() {
         <Card>
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
             <CardTitle className="text-sm font-medium">구매 비용</CardTitle>
-            <Package className="h-4 w-4 text-blue-500" />
+            <Package className="h-4 w-4 text-primary" />
           </CardHeader>
           <CardContent>
             <div className="text-2xl font-bold">
@@ -184,7 +184,7 @@ export function CostTypeStats() {
         <Card>
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
             <CardTitle className="text-sm font-medium">수리/유지보수</CardTitle>
-            <Wrench className="h-4 w-4 text-orange-500" />
+            <Wrench className="h-4 w-4 text-amber-500" />
           </CardHeader>
           <CardContent>
             <div className="text-2xl font-bold">
@@ -200,7 +200,7 @@ export function CostTypeStats() {
         <Card>
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
             <CardTitle className="text-sm font-medium">설치/폐기</CardTitle>
-            <Settings className="h-4 w-4 text-green-500" />
+            <Settings className="h-4 w-4 text-emerald-500" />
           </CardHeader>
           <CardContent>
             <div className="text-2xl font-bold">
@@ -238,7 +238,7 @@ export function CostTypeStats() {
                       <div className="flex items-center gap-2">
                         <div className="flex-1 h-3 rounded-full bg-muted overflow-hidden">
                           <div
-                            className={`h-full ${costType ? costTypeColors[costType] : "bg-gray-400"}`}
+                            className={`h-full ${costType ? costTypeColors[costType] : "bg-muted-foreground"}`}
                             style={{ width: `${Math.max(percentage, 2)}%` }}
                           />
                         </div>
@@ -296,7 +296,7 @@ export function CostTypeStats() {
                           return (
                             <div
                               key={costType || "none"}
-                              className={`h-6 ${costType ? costTypeColors[costType] : "bg-gray-400"} rounded`}
+                              className={`h-6 ${costType ? costTypeColors[costType] : "bg-muted-foreground"} rounded`}
                               style={{ width: `${Math.max(width, 5)}%` }}
                               title={`${costType ? costTypeLabels[costType] : "미분류"}: ${formatAmount(item.total_amount)}원`}
                             />
diff --git a/frontend/components/tax-invoice/TaxInvoiceDetail.tsx b/frontend/components/tax-invoice/TaxInvoiceDetail.tsx
index 9fe45e91..8d747b16 100644
--- a/frontend/components/tax-invoice/TaxInvoiceDetail.tsx
+++ b/frontend/components/tax-invoice/TaxInvoiceDetail.tsx
@@ -61,10 +61,10 @@ const statusLabels: Record<string, string> = {
 
 // 상태 색상
 const statusColors: Record<string, string> = {
-  draft: "bg-gray-100 text-gray-800",
-  issued: "bg-green-100 text-green-800",
-  sent: "bg-blue-100 text-blue-800",
-  cancelled: "bg-red-100 text-red-800",
+  draft: "bg-muted text-foreground",
+  issued: "bg-success/10 text-success",
+  sent: "bg-primary/10 text-primary",
+  cancelled: "bg-destructive/10 text-destructive",
 };
 
 export function TaxInvoiceDetail({ open, onClose, invoiceId }: TaxInvoiceDetailProps) {
@@ -458,7 +458,7 @@ export function TaxInvoiceDetail({ open, onClose, invoiceId }: TaxInvoiceDetailP
 
               {/* 품목 내역 */}
               <div className="mb-6">
-                <h3 className="mb-3 border-b-2 border-gray-800 pb-2 font-semibold">품목 내역</h3>
+                <h3 className="mb-3 border-b-2 border-foreground pb-2 font-semibold">품목 내역</h3>
                 <Table>
                   <TableHeader>
                     <TableRow>
@@ -555,7 +555,7 @@ export function TaxInvoiceDetail({ open, onClose, invoiceId }: TaxInvoiceDetailP
                       .map((file) => (
                         <div
                           key={file.id}
-                          className="group relative aspect-square overflow-hidden rounded-lg border bg-gray-50"
+                          className="group relative aspect-square overflow-hidden rounded-lg border bg-muted"
                         >
                           <img
                             src={getFilePreviewUrl(file)}
@@ -565,7 +565,7 @@ export function TaxInvoiceDetail({ open, onClose, invoiceId }: TaxInvoiceDetailP
                               (e.target as HTMLImageElement).style.display = "none";
                             }}
                           />
-                          <div className="absolute inset-0 flex items-end bg-gradient-to-t from-black/60 to-transparent opacity-0 transition-opacity group-hover:opacity-100">
+                          <div className="absolute inset-0 flex items-end bg-black/50 opacity-0 transition-opacity group-hover:opacity-100">
                             <div className="w-full p-2">
                               <p className="truncate text-xs text-white">{file.file_name}</p>
                               <Button
diff --git a/frontend/components/tax-invoice/TaxInvoiceList.tsx b/frontend/components/tax-invoice/TaxInvoiceList.tsx
index 1ee7e571..03fd5c3f 100644
--- a/frontend/components/tax-invoice/TaxInvoiceList.tsx
+++ b/frontend/components/tax-invoice/TaxInvoiceList.tsx
@@ -707,7 +707,7 @@ export function TaxInvoiceList() {
                               onClick={() => handleIssueConfirm(invoice)}
                               title="발행"
                             >
-                              <CheckCircle className="h-4 w-4 text-green-600" />
+                              <CheckCircle className="h-4 w-4 text-emerald-600" />
                             </Button>
                             <Button
                               variant="ghost"
@@ -724,7 +724,7 @@ export function TaxInvoiceList() {
                           <Button
                             variant="ghost"
                             size="icon"
-                            className="h-8 w-8 text-orange-600"
+                            className="h-8 w-8 text-amber-600"
                             onClick={() => handleCancelConfirm(invoice)}
                             title="취소"
                           >
diff --git a/frontend/components/theme/ThemeSettings.tsx b/frontend/components/theme/ThemeSettings.tsx
index 060bd578..6feaa06b 100644
--- a/frontend/components/theme/ThemeSettings.tsx
+++ b/frontend/components/theme/ThemeSettings.tsx
@@ -17,16 +17,16 @@ export const ThemeSettings: React.FC = () => {
 
   return (
     <div className="fixed top-4 right-4 z-50">
-      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 p-4 min-w-[300px]">
+      <div className="bg-white dark:bg-foreground/90 rounded-lg shadow-lg border border-border dark:border-border p-4 min-w-[300px]">
         <div className="flex items-center gap-2 mb-4">
-          <Settings className="w-5 h-5 text-muted-foreground dark:text-gray-400" />
-          <h3 className="font-semibold text-gray-900 dark:text-white">테마 설정</h3>
+          <Settings className="w-5 h-5 text-muted-foreground dark:text-muted-foreground/70" />
+          <h3 className="font-semibold text-foreground dark:text-white">테마 설정</h3>
         </div>
 
         {/* 다크모드 토글 */}
         <div className="space-y-3">
           <div>
-            <label className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 block">
+            <label className="text-sm font-medium text-foreground dark:text-muted-foreground/50 mb-2 block">
               테마 모드
             </label>
             <div className="flex gap-2">
@@ -34,8 +34,8 @@ export const ThemeSettings: React.FC = () => {
                 onClick={() => setTheme({ mode: "light" })}
                 className={`flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium transition-all ${
                   theme.mode === "light"
-                    ? "bg-orange-100 text-orange-700 border border-orange-300"
-                    : "bg-gray-100 text-gray-700 hover:bg-gray-200"
+                    ? "bg-amber-100 text-orange-700 border border-orange-300"
+                    : "bg-muted text-foreground hover:bg-muted/80"
                 }`}
               >
                 <Sun className="w-4 h-4" />
@@ -45,8 +45,8 @@ export const ThemeSettings: React.FC = () => {
                 onClick={() => setTheme({ mode: "dark" })}
                 className={`flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium transition-all ${
                   theme.mode === "dark"
-                    ? "bg-orange-100 text-orange-700 border border-orange-300"
-                    : "bg-gray-100 text-gray-700 hover:bg-gray-200"
+                    ? "bg-amber-100 text-orange-700 border border-orange-300"
+                    : "bg-muted text-foreground hover:bg-muted/80"
                 }`}
               >
                 <Moon className="w-4 h-4" />
@@ -56,8 +56,8 @@ export const ThemeSettings: React.FC = () => {
                 onClick={() => setTheme({ mode: "system" })}
                 className={`flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium transition-all ${
                   theme.mode === "system"
-                    ? "bg-orange-100 text-orange-700 border border-orange-300"
-                    : "bg-gray-100 text-gray-700 hover:bg-gray-200"
+                    ? "bg-amber-100 text-orange-700 border border-orange-300"
+                    : "bg-muted text-foreground hover:bg-muted/80"
                 }`}
               >
                 <Monitor className="w-4 h-4" />
@@ -68,7 +68,7 @@ export const ThemeSettings: React.FC = () => {
 
           {/* 색상 스키마 */}
           <div>
-            <label className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 block">
+            <label className="text-sm font-medium text-foreground dark:text-muted-foreground/50 mb-2 block">
               색상 스키마
             </label>
             <div className="grid grid-cols-5 gap-2">
@@ -79,14 +79,14 @@ export const ThemeSettings: React.FC = () => {
                   className={`p-3 rounded-lg border-2 transition-all ${
                     theme.colorScheme === scheme.id
                       ? "border-orange-500 shadow-md"
-                      : "border-gray-200 hover:border-gray-300"
+                      : "border-border hover:border-input"
                   }`}
                 >
                   <div
                     className="w-6 h-6 rounded-full mx-auto"
                     style={{ backgroundColor: scheme.color }}
                   />
-                  <div className="text-xs text-muted-foreground dark:text-gray-400 mt-1">
+                  <div className="text-xs text-muted-foreground dark:text-muted-foreground/70 mt-1">
                     {scheme.name}
                   </div>
                 </button>
@@ -96,22 +96,22 @@ export const ThemeSettings: React.FC = () => {
 
           {/* 현재 색상 미리보기 */}
           <div>
-            <label className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 block">
+            <label className="text-sm font-medium text-foreground dark:text-muted-foreground/50 mb-2 block">
               현재 색상
             </label>
             <div className="flex gap-2">
               <div
-                className="w-8 h-8 rounded-lg border border-gray-200"
+                className="w-8 h-8 rounded-lg border border-border"
                 style={{ backgroundColor: colors.primary }}
                 title="Primary"
               />
               <div
-                className="w-8 h-8 rounded-lg border border-gray-200"
+                className="w-8 h-8 rounded-lg border border-border"
                 style={{ backgroundColor: colors.secondary }}
                 title="Secondary"
               />
               <div
-                className="w-8 h-8 rounded-lg border border-gray-200"
+                className="w-8 h-8 rounded-lg border border-border"
                 style={{ backgroundColor: colors.accent }}
                 title="Accent"
               />
@@ -119,10 +119,10 @@ export const ThemeSettings: React.FC = () => {
           </div>
 
           {/* 빠른 토글 버튼 */}
-          <div className="pt-2 border-t border-gray-200 dark:border-gray-700">
+          <div className="pt-2 border-t border-border dark:border-border">
             <button
               onClick={toggleMode}
-              className="w-full flex items-center justify-center gap-2 px-4 py-2 bg-orange-500 text-white rounded-lg hover:bg-orange-600 transition-colors"
+              className="w-full flex items-center justify-center gap-2 px-4 py-2 bg-amber-500 text-white rounded-lg hover:bg-orange-600 transition-colors"
             >
               {isDark ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
               {isDark ? "라이트 모드로" : "다크 모드로"} 전환
diff --git a/frontend/components/ui/accordion.tsx b/frontend/components/ui/accordion.tsx
index 49d4dc24..9c8c362f 100644
--- a/frontend/components/ui/accordion.tsx
+++ b/frontend/components/ui/accordion.tsx
@@ -149,7 +149,7 @@ function AccordionTrigger({ className, children, ...props }: AccordionTriggerPro
   return (
     <button
       className={cn(
-        "accordion-trigger flex w-full cursor-pointer items-center justify-between p-4 text-left font-medium transition-colors focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none",
+        "accordion-trigger flex w-full cursor-pointer items-center justify-between p-4 text-left font-medium transition-colors focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-none",
         className,
       )}
       onClick={handleClick}
diff --git a/frontend/components/ui/alert-dialog.tsx b/frontend/components/ui/alert-dialog.tsx
index 2da0647f..f75c75ee 100644
--- a/frontend/components/ui/alert-dialog.tsx
+++ b/frontend/components/ui/alert-dialog.tsx
@@ -2,11 +2,64 @@
 
 import * as React from "react";
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
 
 import { cn } from "@/lib/utils";
 import { buttonVariants } from "@/components/ui/button";
+import { useModalPortal } from "@/lib/modalPortalRef";
+import { useTabId } from "@/contexts/TabIdContext";
+import { useTabStore } from "@/stores/tabStore";
 
-const AlertDialog = AlertDialogPrimitive.Root;
+/**
+ * 탭 시스템 스코프 여부를 하위 컴포넌트에 전달하는 내부 Context.
+ * scoped=true 이면 AlertDialogPrimitive 대신 DialogPrimitive 사용.
+ */
+const ScopedAlertCtx = React.createContext(false);
+
+const AlertDialog: React.FC<React.ComponentProps<typeof AlertDialogPrimitive.Root>> = ({
+  open,
+  children,
+  onOpenChange,
+  ...props
+}) => {
+  const autoContainer = useModalPortal();
+  const scoped = !!autoContainer;
+  const tabId = useTabId();
+  const activeTabId = useTabStore((s) => s[s.mode].activeTabId);
+  const isTabActive = !tabId || tabId === activeTabId;
+
+  const isTabActiveRef = React.useRef(isTabActive);
+  isTabActiveRef.current = isTabActive;
+
+  const effectiveOpen = open != null ? open && isTabActive : undefined;
+
+  const guardedOnOpenChange = React.useCallback(
+    (newOpen: boolean) => {
+      if (scoped && !newOpen && !isTabActiveRef.current) return;
+      onOpenChange?.(newOpen);
+    },
+    [scoped, onOpenChange],
+  );
+
+  if (scoped) {
+    return (
+      <ScopedAlertCtx.Provider value={true}>
+        <DialogPrimitive.Root open={effectiveOpen} onOpenChange={guardedOnOpenChange} modal={false}>
+          {children}
+        </DialogPrimitive.Root>
+      </ScopedAlertCtx.Provider>
+    );
+  }
+
+  return (
+    <ScopedAlertCtx.Provider value={false}>
+      <AlertDialogPrimitive.Root {...props} open={effectiveOpen} onOpenChange={guardedOnOpenChange}>
+        {children}
+      </AlertDialogPrimitive.Root>
+    </ScopedAlertCtx.Provider>
+  );
+};
+AlertDialog.displayName = "AlertDialog";
 
 const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 
@@ -18,7 +71,7 @@ const AlertDialogOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Overlay
     className={cn(
-      "fixed inset-0 z-[1050] bg-black/80",
+      "fixed inset-0 z-1050 bg-black/80",
       className,
     )}
     {...props}
@@ -27,22 +80,82 @@ const AlertDialogOverlay = React.forwardRef<
 ));
 AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
 
+interface ScopedAlertDialogContentProps
+  extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content> {
+  container?: HTMLElement | null;
+  hidden?: boolean;
+}
+
 const AlertDialogContent = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <AlertDialogPortal>
-    <AlertDialogOverlay />
-    <AlertDialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        "bg-background fixed top-[50%] left-[50%] z-[1100] grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg sm:rounded-lg",
-        className,
-      )}
-      {...props}
-    />
-  </AlertDialogPortal>
-));
+  ScopedAlertDialogContentProps
+>(({ className, container: explicitContainer, hidden: hiddenProp, style, ...props }, ref) => {
+  const autoContainer = useModalPortal();
+  const container = explicitContainer !== undefined ? explicitContainer : autoContainer;
+  const scoped = React.useContext(ScopedAlertCtx);
+
+  const adjustedStyle = scoped && style
+    ? { ...style, maxHeight: undefined, maxWidth: undefined }
+    : style;
+
+  const handleInteractOutside = React.useCallback(
+    (e: any) => {
+      if (scoped && container) {
+        const target = (e.detail?.originalEvent?.target ?? e.target) as HTMLElement | null;
+        if (target && !container.contains(target)) {
+          e.preventDefault();
+          return;
+        }
+      }
+      e.preventDefault();
+    },
+    [scoped, container],
+  );
+
+  if (scoped) {
+    return (
+      <DialogPrimitive.Portal container={container ?? undefined}>
+        <div
+          className="absolute inset-0 z-1050 flex items-center justify-center overflow-hidden p-4"
+          style={hiddenProp ? { display: "none" } : undefined}
+        >
+          <div className="absolute inset-0 bg-black/80" />
+          <DialogPrimitive.Content
+            ref={ref}
+            onInteractOutside={handleInteractOutside}
+            onFocusOutside={(e: any) => e.preventDefault()}
+            onEscapeKeyDown={(e) => e.preventDefault()}
+            className={cn(
+              "bg-background relative z-1 grid w-full max-w-lg max-h-full gap-4 border p-6 shadow-lg sm:rounded-lg",
+              className,
+            )}
+            style={adjustedStyle}
+            {...props}
+          />
+        </div>
+      </DialogPrimitive.Portal>
+    );
+  }
+
+  return (
+    <AlertDialogPortal container={container ?? undefined}>
+      <div
+        style={hiddenProp ? { display: "none" } : undefined}
+      >
+        <AlertDialogPrimitive.Overlay className="fixed inset-0 z-1050 bg-black/80" />
+        <AlertDialogPrimitive.Content
+          ref={ref}
+          className={cn(
+            "bg-background fixed top-[50%] left-[50%] z-1100 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg sm:rounded-lg",
+            className,
+          )}
+          style={adjustedStyle}
+          {...props}
+        />
+      </div>
+    </AlertDialogPortal>
+  );
+});
 AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
 
 const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
@@ -58,37 +171,47 @@ AlertDialogFooter.displayName = "AlertDialogFooter";
 const AlertDialogTitle = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Title>,
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Title ref={ref} className={cn("text-lg font-semibold", className)} {...props} />
-));
+>(({ className, ...props }, ref) => {
+  const scoped = React.useContext(ScopedAlertCtx);
+  const Comp = scoped ? DialogPrimitive.Title : AlertDialogPrimitive.Title;
+  return <Comp ref={ref} className={cn("text-lg font-semibold", className)} {...props} />;
+});
 AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
 
 const AlertDialogDescription = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Description>,
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Description ref={ref} className={cn("text-muted-foreground text-sm", className)} {...props} />
-));
+>(({ className, ...props }, ref) => {
+  const scoped = React.useContext(ScopedAlertCtx);
+  const Comp = scoped ? DialogPrimitive.Description : AlertDialogPrimitive.Description;
+  return <Comp ref={ref} className={cn("text-muted-foreground text-sm", className)} {...props} />;
+});
 AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
 
 const AlertDialogAction = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Action>,
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
-));
+>(({ className, ...props }, ref) => {
+  const scoped = React.useContext(ScopedAlertCtx);
+  const Comp = scoped ? DialogPrimitive.Close : AlertDialogPrimitive.Action;
+  return <Comp ref={ref} className={cn(buttonVariants(), className)} {...props} />;
+});
 AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
 
 const AlertDialogCancel = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Cancel
-    ref={ref}
-    className={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
-    {...props}
-  />
-));
+>(({ className, ...props }, ref) => {
+  const scoped = React.useContext(ScopedAlertCtx);
+  const Comp = scoped ? DialogPrimitive.Close : AlertDialogPrimitive.Cancel;
+  return (
+    <Comp
+      ref={ref}
+      className={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
+      {...props}
+    />
+  );
+});
 AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
 
 export {
diff --git a/frontend/components/ui/button.tsx b/frontend/components/ui/button.tsx
index 9a7847f7..0ebd79de 100644
--- a/frontend/components/ui/button.tsx
+++ b/frontend/components/ui/button.tsx
@@ -9,14 +9,18 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default: "bg-background border border-foreground text-foreground shadow-xs hover:bg-muted/50",
+        default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
         destructive:
           "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
         outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+          "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
         secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
         link: "text-primary underline-offset-4 hover:underline",
+        success:
+          "bg-success text-success-foreground shadow-xs hover:bg-success/90 focus-visible:ring-success/20 dark:focus-visible:ring-success/40",
+        warning:
+          "bg-warning text-warning-foreground shadow-xs hover:bg-warning/90 focus-visible:ring-warning/20 dark:focus-visible:ring-warning/40",
       },
       size: {
         default: "h-9 px-4 py-2 has-[>svg]:px-3",
@@ -44,7 +48,14 @@ function Button({
   }) {
   const Comp = asChild ? Slot : "button";
 
-  return <Comp data-slot="button" className={cn(buttonVariants({ variant, size, className }))} {...props} />;
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant || "default"}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
 }
 
 export { Button, buttonVariants };
diff --git a/frontend/components/ui/dialog.tsx b/frontend/components/ui/dialog.tsx
index 4813828e..abcc2537 100644
--- a/frontend/components/ui/dialog.tsx
+++ b/frontend/components/ui/dialog.tsx
@@ -5,8 +5,46 @@ import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { X } from "lucide-react";
 
 import { cn } from "@/lib/utils";
+import { useModalPortal } from "@/lib/modalPortalRef";
+import { useTabId } from "@/contexts/TabIdContext";
+import { useTabStore } from "@/stores/tabStore";
+import { useDialogAutoValidation } from "@/lib/hooks/useDialogAutoValidation";
 
-const Dialog = DialogPrimitive.Root;
+// Dialog: 탭 시스템 내에서 자동으로 modal={false} + 비활성 탭이면 open={false} 처리
+const Dialog: React.FC<React.ComponentProps<typeof DialogPrimitive.Root>> = ({
+  modal,
+  open,
+  onOpenChange,
+  ...props
+}) => {
+  const autoContainer = useModalPortal();
+  const scoped = !!autoContainer;
+  const tabId = useTabId();
+  const activeTabId = useTabStore((s) => s[s.mode].activeTabId);
+  const isTabActive = !tabId || tabId === activeTabId;
+
+  // ref로 최신 isTabActive를 동기적으로 추적 (useEffect보다 빠르게 업데이트)
+  const isTabActiveRef = React.useRef(isTabActive);
+  isTabActiveRef.current = isTabActive;
+
+  const effectiveModal = modal !== undefined ? modal : !scoped ? undefined : false;
+  const effectiveOpen = open != null ? open && isTabActive : undefined;
+
+  // 비활성 탭에서 발생하는 onOpenChange(false) 차단
+  // (탭 전환 시 content unmount → focus 이동 → Radix가 onOpenChange(false)를 호출하는 것을 방지)
+  const guardedOnOpenChange = React.useCallback(
+    (newOpen: boolean) => {
+      if (scoped && !newOpen && !isTabActiveRef.current) {
+        return;
+      }
+      onOpenChange?.(newOpen);
+    },
+    [scoped, onOpenChange, tabId],
+  );
+
+  return <DialogPrimitive.Root {...props} open={effectiveOpen} onOpenChange={guardedOnOpenChange} modal={effectiveModal} />;
+};
+Dialog.displayName = "Dialog";
 
 const DialogTrigger = DialogPrimitive.Trigger;
 
@@ -21,7 +59,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-[999] bg-black/60",
+      "fixed inset-0 z-999 bg-black/60",
       className,
     )}
     {...props}
@@ -29,28 +67,100 @@ const DialogOverlay = React.forwardRef<
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
+interface ScopedDialogContentProps
+  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
+  /** 포탈 대상 컨테이너. 명시적으로 전달하면 해당 값 사용, 미전달 시 탭 시스템 자동 감지 */
+  container?: HTMLElement | null;
+  /** 탭 비활성 시 포탈 내용 숨김 */
+  hidden?: boolean;
+}
+
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <DialogPortal>
-    <DialogOverlay />
-    <DialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        "bg-background fixed top-[50%] left-[50%] z-[1000] flex w-full max-w-lg translate-x-[-50%] translate-y-[-50%] flex-col gap-4 border p-6 shadow-lg sm:rounded-lg",
-        className,
-      )}
-      {...props}
-    >
-      {children}
-      <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 cursor-pointer rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none">
-        <X className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
-    </DialogPrimitive.Content>
-  </DialogPortal>
-));
+  ScopedDialogContentProps
+>(({ className, children, container: explicitContainer, hidden: hiddenProp, onInteractOutside, onFocusOutside, style, ...props }, ref) => {
+  const autoContainer = useModalPortal();
+  const container = explicitContainer !== undefined ? explicitContainer : autoContainer;
+  const scoped = !!container;
+
+  // state 기반 ref: DialogPrimitive.Content 마운트/언마운트 시 useEffect 재실행 보장
+  const [contentNode, setContentNode] = React.useState<HTMLDivElement | null>(null);
+  const mergedRef = React.useCallback(
+    (node: HTMLDivElement | null) => {
+      setContentNode(node);
+      if (typeof ref === "function") ref(node);
+      else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;
+    },
+    [ref],
+  );
+  useDialogAutoValidation(contentNode);
+
+  const handleInteractOutside = React.useCallback(
+    (e: any) => {
+      if (scoped && container) {
+        const target = (e.detail?.originalEvent?.target ?? e.target) as HTMLElement | null;
+        if (target && !container.contains(target)) {
+          e.preventDefault();
+          return;
+        }
+      }
+      onInteractOutside?.(e);
+    },
+    [scoped, container, onInteractOutside],
+  );
+
+  // scoped 모드: content unmount 시 포커스 이동으로 인한 onOpenChange(false) 방지
+  const handleFocusOutside = React.useCallback(
+    (e: any) => {
+      if (scoped) {
+        e.preventDefault();
+        return;
+      }
+      onFocusOutside?.(e);
+    },
+    [scoped, onFocusOutside],
+  );
+
+  // scoped 모드: 뷰포트 기반 maxHeight/maxWidth 제거 → className의 max-h-full이 컨테이너 기준으로 적용됨
+  const adjustedStyle = scoped && style
+    ? { ...style, maxHeight: undefined, maxWidth: undefined }
+    : style;
+
+  return (
+    <DialogPortal container={container ?? undefined}>
+      <div
+        className={scoped ? "absolute inset-0 z-999 flex items-center justify-center overflow-hidden p-4" : undefined}
+        style={hiddenProp ? { display: "none" } : undefined}
+      >
+        {scoped ? (
+          <div className="absolute inset-0 bg-black/60" />
+        ) : (
+          <DialogPrimitive.Overlay className="fixed inset-0 z-999 bg-black/60" />
+        )}
+        <DialogPrimitive.Content
+          ref={mergedRef}
+          onInteractOutside={handleInteractOutside}
+          onFocusOutside={handleFocusOutside}
+          className={cn(
+            scoped
+              ? "bg-background relative z-1 flex w-full max-w-lg max-h-full flex-col gap-4 border p-6 shadow-lg sm:rounded-lg"
+              : "bg-background fixed top-[50%] left-[50%] z-1000 flex w-full max-w-lg translate-x-[-50%] translate-y-[-50%] flex-col gap-4 border p-6 shadow-lg sm:rounded-lg",
+            className,
+            scoped && "max-h-full",
+          )}
+          style={adjustedStyle}
+          {...props}
+        >
+          {children}
+          <DialogPrimitive.Close data-dialog-close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 cursor-pointer rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none">
+            <X className="h-4 w-4" />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        </DialogPrimitive.Content>
+      </div>
+    </DialogPortal>
+  );
+});
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 
 const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
@@ -59,7 +169,7 @@ const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivEleme
 DialogHeader.displayName = "DialogHeader";
 
 const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 shrink-0", className)} {...props} />
+  <div data-slot="dialog-footer" className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 shrink-0", className)} {...props} />
 );
 DialogFooter.displayName = "DialogFooter";
 
diff --git a/frontend/components/ui/slider.tsx b/frontend/components/ui/slider.tsx
index 9a7218c4..3b584db9 100644
--- a/frontend/components/ui/slider.tsx
+++ b/frontend/components/ui/slider.tsx
@@ -30,15 +30,15 @@ const Slider = React.forwardRef<HTMLInputElement, SliderProps>(
           value={value[0]}
           onChange={handleChange}
           className={cn(
-            "relative h-2 w-full cursor-pointer appearance-none rounded-lg bg-gray-200 outline-none",
-            "focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none",
+            "relative h-2 w-full cursor-pointer appearance-none rounded-lg bg-muted/80 outline-none",
+            "focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-none",
             "disabled:cursor-not-allowed disabled:opacity-50",
             // WebKit 스타일
-            "[&::-webkit-slider-track]:h-2 [&::-webkit-slider-track]:rounded-lg [&::-webkit-slider-track]:bg-gray-200",
-            "[&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-0 [&::-webkit-slider-thumb]:bg-blue-600 [&::-webkit-slider-thumb]:shadow-sm",
+            "[&::-webkit-slider-track]:h-2 [&::-webkit-slider-track]:rounded-lg [&::-webkit-slider-track]:bg-muted/80",
+            "[&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-0 [&::-webkit-slider-thumb]:bg-primary [&::-webkit-slider-thumb]:shadow-sm",
             // Firefox 스타일
-            "[&::-moz-range-track]:h-2 [&::-moz-range-track]:rounded-lg [&::-moz-range-track]:border-0 [&::-moz-range-track]:bg-gray-200",
-            "[&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:bg-blue-600 [&::-moz-range-thumb]:shadow-sm",
+            "[&::-moz-range-track]:h-2 [&::-moz-range-track]:rounded-lg [&::-moz-range-track]:border-0 [&::-moz-range-track]:bg-muted/80",
+            "[&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:bg-primary [&::-moz-range-thumb]:shadow-sm",
           )}
           {...props}
         />
diff --git a/frontend/components/ui/switch.tsx b/frontend/components/ui/switch.tsx
index 4ae887e8..b771feed 100644
--- a/frontend/components/ui/switch.tsx
+++ b/frontend/components/ui/switch.tsx
@@ -11,8 +11,8 @@ function Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimi
       data-slot="switch"
       className={cn(
         "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border border-transparent shadow-sm transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
-        "data-[state=checked]:bg-green-500 data-[state=unchecked]:bg-gray-300",
-        "hover:data-[state=checked]:bg-green-600 hover:data-[state=unchecked]:bg-gray-400",
+        "data-[state=checked]:bg-emerald-500 data-[state=unchecked]:bg-muted/60",
+        "hover:data-[state=checked]:bg-emerald-600 hover:data-[state=unchecked]:bg-muted-foreground",
         "focus-visible:border-ring focus-visible:ring-ring/50",
         className,
       )}
diff --git a/frontend/components/ui/tooltip.tsx b/frontend/components/ui/tooltip.tsx
new file mode 100644
index 00000000..ec65c1e4
--- /dev/null
+++ b/frontend/components/ui/tooltip.tsx
@@ -0,0 +1,57 @@
+"use client"
+
+import * as React from "react"
+import { Tooltip as TooltipPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 w-fit origin-(--radix-tooltip-content-transform-origin) animate-in rounded-md bg-foreground px-3 py-1.5 text-xs text-balance text-background fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
diff --git a/frontend/components/unified/UnifiedSelect.tsx b/frontend/components/unified/UnifiedSelect.tsx
index 9560fa38..d307fbc1 100644
--- a/frontend/components/unified/UnifiedSelect.tsx
+++ b/frontend/components/unified/UnifiedSelect.tsx
@@ -801,7 +801,7 @@ export const UnifiedSelect = forwardRef<HTMLDivElement, UnifiedSelectProps>((pro
           className="flex-shrink-0 text-sm font-medium"
         >
           {label}
-          {required && <span className="ml-0.5 text-orange-500">*</span>}
+          {required && <span className="ml-0.5 text-amber-500">*</span>}
         </Label>
       )}
       <div className="min-h-0 flex-1">{renderSelect()}</div>
diff --git a/frontend/components/v2/ConditionalConfigPanel.tsx b/frontend/components/v2/ConditionalConfigPanel.tsx
index 99d7f813..8622c207 100644
--- a/frontend/components/v2/ConditionalConfigPanel.tsx
+++ b/frontend/components/v2/ConditionalConfigPanel.tsx
@@ -367,7 +367,7 @@ export function ConditionalConfigPanel({
       {/* 헤더 */}
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-2">
-          <Zap className="h-4 w-4 text-orange-500" />
+          <Zap className="h-4 w-4 text-amber-500" />
           <span className="text-sm font-medium">조건부 표시</span>
           <span 
             className="text-muted-foreground cursor-help" 
@@ -475,7 +475,7 @@ export function ConditionalConfigPanel({
                     operator === "in" ? "에 포함되면" : "에 포함되지 않으면"}`}
                 </span>{" "}
                 → 이 필드를{" "}
-                <span className="font-medium text-orange-600">
+                <span className="font-medium text-amber-600">
                   {action === "show" ? "표시" :
                    action === "hide" ? "숨김" :
                    action === "enable" ? "활성화" : "비활성화"}
diff --git a/frontend/components/v2/V2Biz.tsx b/frontend/components/v2/V2Biz.tsx
index 4f4bec36..f9ee721d 100644
--- a/frontend/components/v2/V2Biz.tsx
+++ b/frontend/components/v2/V2Biz.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import { getAdaptiveLabelColor } from "@/lib/utils/darkModeColor";
+
 /**
  * V2Biz
  * 
@@ -335,7 +337,7 @@ export const V2Biz = forwardRef<HTMLDivElement, V2BizProps>(
               top: `-${estimatedLabelHeight}px`,
               left: 0,
               fontSize: style?.labelFontSize || "14px",
-              color: style?.labelColor || "#64748b",
+              color: getAdaptiveLabelColor(style?.labelColor),
               fontWeight: style?.labelFontWeight || "500",
             }}
             className="text-sm font-medium whitespace-nowrap"
diff --git a/frontend/components/v2/V2ComponentsDemo.tsx b/frontend/components/v2/V2ComponentsDemo.tsx
index 477dcd7c..223b2c8f 100644
--- a/frontend/components/v2/V2ComponentsDemo.tsx
+++ b/frontend/components/v2/V2ComponentsDemo.tsx
@@ -126,7 +126,7 @@ export function V2ComponentsDemo({ onBack }: V2ComponentsDemoProps) {
       <div className="flex-1 overflow-auto p-4">
         <Tabs value={activeTab} onValueChange={setActiveTab}>
           <TabsList className="grid w-full grid-cols-5 lg:grid-cols-10">
-            <TabsTrigger value="conditional" className="gap-1 text-orange-600">
+            <TabsTrigger value="conditional" className="gap-1 text-amber-600">
               <Zap className="h-3 w-3" />
               조건부
             </TabsTrigger>
@@ -471,22 +471,22 @@ export function V2ComponentsDemo({ onBack }: V2ComponentsDemoProps) {
                     v2Type="V2Layout"
                     config={{ type: "grid", columns: 12, gap: "8px", use12Column: true }}
                   >
-                    <div className="col-span-12 p-3 bg-blue-100 rounded text-center text-sm">
+                    <div className="col-span-12 p-3 bg-primary/10 rounded text-center text-sm">
                       col-span-12 (전체)
                     </div>
-                    <div className="col-span-6 p-3 bg-green-100 rounded text-center text-sm">
+                    <div className="col-span-6 p-3 bg-emerald-100 rounded text-center text-sm">
                       col-span-6 (절반)
                     </div>
-                    <div className="col-span-6 p-3 bg-green-100 rounded text-center text-sm">
+                    <div className="col-span-6 p-3 bg-emerald-100 rounded text-center text-sm">
                       col-span-6 (절반)
                     </div>
-                    <div className="col-span-4 p-3 bg-yellow-100 rounded text-center text-sm">
+                    <div className="col-span-4 p-3 bg-amber-100 rounded text-center text-sm">
                       col-span-4 (1/3)
                     </div>
-                    <div className="col-span-4 p-3 bg-yellow-100 rounded text-center text-sm">
+                    <div className="col-span-4 p-3 bg-amber-100 rounded text-center text-sm">
                       col-span-4 (1/3)
                     </div>
-                    <div className="col-span-4 p-3 bg-yellow-100 rounded text-center text-sm">
+                    <div className="col-span-4 p-3 bg-amber-100 rounded text-center text-sm">
                       col-span-4 (1/3)
                     </div>
                     <div className="col-span-3 p-3 bg-purple-100 rounded text-center text-sm">
@@ -501,10 +501,10 @@ export function V2ComponentsDemo({ onBack }: V2ComponentsDemoProps) {
                     <div className="col-span-3 p-3 bg-purple-100 rounded text-center text-sm">
                       col-span-3 (1/4)
                     </div>
-                    <div className="col-span-8 p-3 bg-red-100 rounded text-center text-sm">
+                    <div className="col-span-8 p-3 bg-destructive/10 rounded text-center text-sm">
                       col-span-8 (2/3)
                     </div>
-                    <div className="col-span-4 p-3 bg-red-100 rounded text-center text-sm">
+                    <div className="col-span-4 p-3 bg-destructive/10 rounded text-center text-sm">
                       col-span-4 (1/3)
                     </div>
                   </V2Layout>
@@ -521,10 +521,10 @@ export function V2ComponentsDemo({ onBack }: V2ComponentsDemoProps) {
                     config={{ type: "split", direction: "horizontal", splitRatio: [30, 70] }}
                     style={{ height: "200px" }}
                   >
-                    <div className="p-4 bg-blue-100 h-full flex items-center justify-center">
+                    <div className="p-4 bg-primary/10 h-full flex items-center justify-center">
                       왼쪽 패널
                     </div>
-                    <div className="p-4 bg-green-100 h-full flex items-center justify-center">
+                    <div className="p-4 bg-emerald-100 h-full flex items-center justify-center">
                       오른쪽 패널
                     </div>
                   </V2Layout>
@@ -813,8 +813,8 @@ function ConditionalDemoContent() {
 
           {/* B2B 전용 필드 */}
           {b2bState.visible && (
-            <div className="p-4 bg-blue-50 rounded-lg space-y-4 border-l-4 border-blue-500">
-              <p className="text-sm font-medium text-blue-700">B2B 전용 입력 필드</p>
+            <div className="p-4 bg-primary/10 rounded-lg space-y-4 border-l-4 border-primary">
+              <p className="text-sm font-medium text-primary">B2B 전용 입력 필드</p>
               <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                 <V2Input
                   id="companyName"
@@ -839,8 +839,8 @@ function ConditionalDemoContent() {
 
           {/* B2C 전용 필드 */}
           {b2cState.visible && (
-            <div className="p-4 bg-green-50 rounded-lg space-y-4 border-l-4 border-green-500">
-              <p className="text-sm font-medium text-green-700">B2C 전용 입력 필드</p>
+            <div className="p-4 bg-emerald-50 rounded-lg space-y-4 border-l-4 border-emerald-500">
+              <p className="text-sm font-medium text-emerald-700">B2C 전용 입력 필드</p>
               <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                 <V2Input
                   id="customerName"
@@ -894,7 +894,7 @@ function ConditionalDemoContent() {
 
           {/* VIP 전용 할인율 필드 */}
           {discountState.visible && (
-            <div className="p-4 bg-yellow-50 rounded-lg border-l-4 border-yellow-500">
+            <div className="p-4 bg-amber-50 rounded-lg border-l-4 border-yellow-500">
               <p className="text-sm font-medium text-yellow-700 mb-3">VIP 전용 혜택 설정</p>
               <V2Input
                 id="discountRate"
@@ -1028,10 +1028,10 @@ function ConditionalConfigUIDemo({ formData }: { formData: Record<string, unknow
   const conditionResult = demoConfig ? evaluateCondition("demoField", demoConfig) : { visible: true, disabled: false };
 
   return (
-    <Card className="border-orange-200 bg-orange-50/30">
+    <Card className="border-orange-200 bg-amber-50/30">
       <CardHeader>
         <CardTitle className="text-lg flex items-center gap-2">
-          <Zap className="h-5 w-5 text-orange-500" />
+          <Zap className="h-5 w-5 text-amber-500" />
           조건부 설정 UI 데모
         </CardTitle>
         <CardDescription>
@@ -1106,8 +1106,8 @@ function ConditionalConfigUIDemo({ formData }: { formData: Record<string, unknow
         </div>
 
         {/* 안내 메시지 */}
-        <div className="mt-4 p-3 bg-blue-50 rounded-lg">
-          <p className="text-xs text-blue-700">
+        <div className="mt-4 p-3 bg-primary/10 rounded-lg">
+          <p className="text-xs text-primary">
             위의 "조건부 표시" 스위치를 켜고 설정을 변경해보세요. 
             위 시나리오들의 필드 값을 변경하면 조건 평가 결과가 실시간으로 바뀝니다.
           </p>
diff --git a/frontend/components/v2/V2Date.tsx b/frontend/components/v2/V2Date.tsx
index c6bbff8b..868adbd9 100644
--- a/frontend/components/v2/V2Date.tsx
+++ b/frontend/components/v2/V2Date.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import { getAdaptiveLabelColor } from "@/lib/utils/darkModeColor";
+
 /**
  * V2Date
  *
@@ -11,7 +13,19 @@
  */
 
 import React, { forwardRef, useCallback, useMemo, useState, useEffect } from "react";
-import { format, parse, isValid, addMonths, subMonths, startOfMonth, endOfMonth, eachDayOfInterval, isSameMonth, isSameDay, isToday as isTodayFn } from "date-fns";
+import {
+  format,
+  parse,
+  isValid,
+  addMonths,
+  subMonths,
+  startOfMonth,
+  endOfMonth,
+  eachDayOfInterval,
+  isSameMonth,
+  isSameDay,
+  isToday as isTodayFn,
+} from "date-fns";
 import { ko } from "date-fns/locale";
 import { Calendar as CalendarIcon, Clock, ChevronLeft, ChevronRight } from "lucide-react";
 import { Label } from "@/components/ui/label";
@@ -91,7 +105,18 @@ const SingleDatePicker = forwardRef<
   }
 >(
   (
-    { value, onChange, dateFormat = "YYYY-MM-DD", showToday = true, minDate, maxDate, disabled, readonly, className, placeholder = "날짜 선택" },
+    {
+      value,
+      onChange,
+      dateFormat = "YYYY-MM-DD",
+      showToday = true,
+      minDate,
+      maxDate,
+      disabled,
+      readonly,
+      className,
+      placeholder = "날짜 선택",
+    },
     ref,
   ) => {
     const [open, setOpen] = useState(false);
@@ -126,11 +151,14 @@ const SingleDatePicker = forwardRef<
       }
     }, [open]);
 
-    const handleDateClick = useCallback((clickedDate: Date) => {
-      onChange?.(formatDate(clickedDate, dateFormat));
-      setIsTyping(false);
-      setOpen(false);
-    }, [dateFormat, onChange]);
+    const handleDateClick = useCallback(
+      (clickedDate: Date) => {
+        onChange?.(formatDate(clickedDate, dateFormat));
+        setIsTyping(false);
+        setOpen(false);
+      },
+      [dateFormat, onChange],
+    );
 
     const handleToday = useCallback(() => {
       onChange?.(formatDate(new Date(), dateFormat));
@@ -144,20 +172,26 @@ const SingleDatePicker = forwardRef<
       setOpen(false);
     }, [onChange]);
 
-    const handleTriggerInput = useCallback((raw: string) => {
-      setIsTyping(true);
-      setTypingValue(raw);
-      if (!open) setOpen(true);
-      const digitsOnly = raw.replace(/\D/g, "");
-      if (digitsOnly.length === 8) {
-        const parsed = parseManualDateInput(digitsOnly);
-        if (parsed) {
-          onChange?.(formatDate(parsed, dateFormat));
-          setCurrentMonth(new Date(parsed.getFullYear(), parsed.getMonth(), 1));
-          setTimeout(() => { setIsTyping(false); setOpen(false); }, 400);
+    const handleTriggerInput = useCallback(
+      (raw: string) => {
+        setIsTyping(true);
+        setTypingValue(raw);
+        if (!open) setOpen(true);
+        const digitsOnly = raw.replace(/\D/g, "");
+        if (digitsOnly.length === 8) {
+          const parsed = parseManualDateInput(digitsOnly);
+          if (parsed) {
+            onChange?.(formatDate(parsed, dateFormat));
+            setCurrentMonth(new Date(parsed.getFullYear(), parsed.getMonth(), 1));
+            setTimeout(() => {
+              setIsTyping(false);
+              setOpen(false);
+            }, 400);
+          }
         }
-      }
-    }, [dateFormat, onChange, open]);
+      },
+      [dateFormat, onChange, open],
+    );
 
     const mStart = startOfMonth(currentMonth);
     const mEnd = endOfMonth(currentMonth);
@@ -167,7 +201,15 @@ const SingleDatePicker = forwardRef<
     const allDays = [...Array(padding).fill(null), ...days];
 
     return (
-      <Popover open={open} onOpenChange={(v) => { if (!v) { setOpen(false); setIsTyping(false); } }}>
+      <Popover
+        open={open}
+        onOpenChange={(v) => {
+          if (!v) {
+            setOpen(false);
+            setIsTyping(false);
+          }
+        }}
+      >
         <PopoverTrigger asChild>
           <div
             ref={ref}
@@ -176,20 +218,26 @@ const SingleDatePicker = forwardRef<
               (disabled || readonly) && "cursor-not-allowed opacity-50",
               className,
             )}
-            onClick={() => { if (!disabled && !readonly) setOpen(true); }}
+            onClick={() => {
+              if (!disabled && !readonly) setOpen(true);
+            }}
           >
             <CalendarIcon className="text-muted-foreground mr-2 h-4 w-4 shrink-0" />
             <input
               ref={inputRef}
               type="text"
               inputMode="numeric"
-              value={isTyping ? typingValue : (displayText || "")}
+              value={isTyping ? typingValue : displayText || ""}
               placeholder={placeholder}
               disabled={disabled || readonly}
               onChange={(e) => handleTriggerInput(e.target.value)}
               onClick={(e) => e.stopPropagation()}
-              onFocus={() => { if (!disabled && !readonly && !open) setOpen(true); }}
-              onBlur={() => { if (!open) setIsTyping(false); }}
+              onFocus={() => {
+                if (!disabled && !readonly && !open) setOpen(true);
+              }}
+              onBlur={() => {
+                if (!open) setIsTyping(false);
+              }}
               className={cn(
                 "h-full w-full bg-transparent text-sm outline-none",
                 "placeholder:text-muted-foreground disabled:cursor-not-allowed",
@@ -214,11 +262,23 @@ const SingleDatePicker = forwardRef<
             {viewMode === "year" ? (
               <>
                 <div className="mb-4 flex items-center justify-between">
-                  <Button variant="ghost" size="sm" className="h-8 w-8 p-0" onClick={() => setYearRangeStart(yearRangeStart - 12)}>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-8 w-8 p-0"
+                    onClick={() => setYearRangeStart(yearRangeStart - 12)}
+                  >
                     <ChevronLeft className="h-4 w-4" />
                   </Button>
-                  <div className="text-sm font-medium">{yearRangeStart} - {yearRangeStart + 11}</div>
-                  <Button variant="ghost" size="sm" className="h-8 w-8 p-0" onClick={() => setYearRangeStart(yearRangeStart + 12)}>
+                  <div className="text-sm font-medium">
+                    {yearRangeStart} - {yearRangeStart + 11}
+                  </div>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-8 w-8 p-0"
+                    onClick={() => setYearRangeStart(yearRangeStart + 12)}
+                  >
                     <ChevronRight className="h-4 w-4" />
                   </Button>
                 </div>
@@ -231,9 +291,14 @@ const SingleDatePicker = forwardRef<
                       className={cn(
                         "h-9 text-xs",
                         year === currentMonth.getFullYear() && "bg-primary text-primary-foreground hover:bg-primary",
-                        year === new Date().getFullYear() && year !== currentMonth.getFullYear() && "border-primary border",
+                        year === new Date().getFullYear() &&
+                          year !== currentMonth.getFullYear() &&
+                          "border-primary border",
                       )}
-                      onClick={() => { setCurrentMonth(new Date(year, currentMonth.getMonth(), 1)); setViewMode("month"); }}
+                      onClick={() => {
+                        setCurrentMonth(new Date(year, currentMonth.getMonth(), 1));
+                        setViewMode("month");
+                      }}
                     >
                       {year}
                     </Button>
@@ -243,13 +308,34 @@ const SingleDatePicker = forwardRef<
             ) : viewMode === "month" ? (
               <>
                 <div className="mb-4 flex items-center justify-between">
-                  <Button variant="ghost" size="sm" className="h-8 w-8 p-0" onClick={() => setCurrentMonth(new Date(currentMonth.getFullYear() - 1, currentMonth.getMonth(), 1))}>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-8 w-8 p-0"
+                    onClick={() =>
+                      setCurrentMonth(new Date(currentMonth.getFullYear() - 1, currentMonth.getMonth(), 1))
+                    }
+                  >
                     <ChevronLeft className="h-4 w-4" />
                   </Button>
-                  <button type="button" className="hover:bg-accent rounded-md px-2 py-1 text-sm font-medium transition-colors" onClick={() => { setYearRangeStart(Math.floor(currentMonth.getFullYear() / 12) * 12); setViewMode("year"); }}>
+                  <button
+                    type="button"
+                    className="hover:bg-accent rounded-md px-2 py-1 text-sm font-medium transition-colors"
+                    onClick={() => {
+                      setYearRangeStart(Math.floor(currentMonth.getFullYear() / 12) * 12);
+                      setViewMode("year");
+                    }}
+                  >
                     {currentMonth.getFullYear()}년
                   </button>
-                  <Button variant="ghost" size="sm" className="h-8 w-8 p-0" onClick={() => setCurrentMonth(new Date(currentMonth.getFullYear() + 1, currentMonth.getMonth(), 1))}>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-8 w-8 p-0"
+                    onClick={() =>
+                      setCurrentMonth(new Date(currentMonth.getFullYear() + 1, currentMonth.getMonth(), 1))
+                    }
+                  >
                     <ChevronRight className="h-4 w-4" />
                   </Button>
                 </div>
@@ -262,9 +348,15 @@ const SingleDatePicker = forwardRef<
                       className={cn(
                         "h-9 text-xs",
                         month === currentMonth.getMonth() && "bg-primary text-primary-foreground hover:bg-primary",
-                        month === new Date().getMonth() && currentMonth.getFullYear() === new Date().getFullYear() && month !== currentMonth.getMonth() && "border-primary border",
+                        month === new Date().getMonth() &&
+                          currentMonth.getFullYear() === new Date().getFullYear() &&
+                          month !== currentMonth.getMonth() &&
+                          "border-primary border",
                       )}
-                      onClick={() => { setCurrentMonth(new Date(currentMonth.getFullYear(), month, 1)); setViewMode("calendar"); }}
+                      onClick={() => {
+                        setCurrentMonth(new Date(currentMonth.getFullYear(), month, 1));
+                        setViewMode("calendar");
+                      }}
                     >
                       {month + 1}월
                     </Button>
@@ -274,19 +366,38 @@ const SingleDatePicker = forwardRef<
             ) : (
               <>
                 <div className="mb-4 flex items-center justify-between">
-                  <Button variant="ghost" size="sm" className="h-8 w-8 p-0" onClick={() => setCurrentMonth(subMonths(currentMonth, 1))}>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-8 w-8 p-0"
+                    onClick={() => setCurrentMonth(subMonths(currentMonth, 1))}
+                  >
                     <ChevronLeft className="h-4 w-4" />
                   </Button>
-                  <button type="button" className="hover:bg-accent rounded-md px-2 py-1 text-sm font-medium transition-colors" onClick={() => { setYearRangeStart(Math.floor(currentMonth.getFullYear() / 12) * 12); setViewMode("year"); }}>
+                  <button
+                    type="button"
+                    className="hover:bg-accent rounded-md px-2 py-1 text-sm font-medium transition-colors"
+                    onClick={() => {
+                      setYearRangeStart(Math.floor(currentMonth.getFullYear() / 12) * 12);
+                      setViewMode("year");
+                    }}
+                  >
                     {format(currentMonth, "yyyy년 MM월", { locale: ko })}
                   </button>
-                  <Button variant="ghost" size="sm" className="h-8 w-8 p-0" onClick={() => setCurrentMonth(addMonths(currentMonth, 1))}>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-8 w-8 p-0"
+                    onClick={() => setCurrentMonth(addMonths(currentMonth, 1))}
+                  >
                     <ChevronRight className="h-4 w-4" />
                   </Button>
                 </div>
                 <div className="mb-2 grid grid-cols-7 gap-1">
                   {["월", "화", "수", "목", "금", "토", "일"].map((d) => (
-                    <div key={d} className="text-muted-foreground p-2 text-center text-xs font-medium">{d}</div>
+                    <div key={d} className="text-muted-foreground p-2 text-center text-xs font-medium">
+                      {d}
+                    </div>
                   ))}
                 </div>
                 <div className="grid grid-cols-7 gap-1">
@@ -383,7 +494,15 @@ const RangeCalendarPopover: React.FC<{
   const allDays = [...Array(padding).fill(null), ...days];
 
   return (
-    <Popover open={open} onOpenChange={(v) => { if (!v) { setIsTyping(false); } onOpenChange(v); }}>
+    <Popover
+      open={open}
+      onOpenChange={(v) => {
+        if (!v) {
+          setIsTyping(false);
+        }
+        onOpenChange(v);
+      }}
+    >
       <PopoverTrigger asChild>
         <div
           className={cn(
@@ -391,20 +510,26 @@ const RangeCalendarPopover: React.FC<{
             (disabled || readonly) && "cursor-not-allowed opacity-50",
             !displayValue && !isTyping && "text-muted-foreground",
           )}
-          onClick={() => { if (!disabled && !readonly) onOpenChange(true); }}
+          onClick={() => {
+            if (!disabled && !readonly) onOpenChange(true);
+          }}
         >
           <CalendarIcon className="text-muted-foreground mr-2 h-4 w-4 shrink-0" />
           <input
             type="text"
             inputMode="numeric"
-            value={isTyping ? typingValue : (displayValue || "")}
+            value={isTyping ? typingValue : displayValue || ""}
             placeholder={label}
             disabled={disabled || readonly}
             onChange={(e) => handleTriggerInput(e.target.value)}
             onClick={(e) => e.stopPropagation()}
-            onFocus={() => { if (!disabled && !readonly && !open) onOpenChange(true); }}
-            onBlur={() => { if (!open) setIsTyping(false); }}
-            className="h-full w-full bg-transparent text-sm font-normal outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed"
+            onFocus={() => {
+              if (!disabled && !readonly && !open) onOpenChange(true);
+            }}
+            onBlur={() => {
+              if (!open) setIsTyping(false);
+            }}
+            className="placeholder:text-muted-foreground h-full w-full bg-transparent text-sm font-normal outline-none disabled:cursor-not-allowed"
           />
         </div>
       </PopoverTrigger>
@@ -413,41 +538,138 @@ const RangeCalendarPopover: React.FC<{
           {viewMode === "year" ? (
             <>
               <div className="mb-4 flex items-center justify-between">
-                <Button variant="ghost" size="sm" className="h-8 w-8 p-0" onClick={() => setYearRangeStart(yearRangeStart - 12)}><ChevronLeft className="h-4 w-4" /></Button>
-                <div className="text-sm font-medium">{yearRangeStart} - {yearRangeStart + 11}</div>
-                <Button variant="ghost" size="sm" className="h-8 w-8 p-0" onClick={() => setYearRangeStart(yearRangeStart + 12)}><ChevronRight className="h-4 w-4" /></Button>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-8 w-8 p-0"
+                  onClick={() => setYearRangeStart(yearRangeStart - 12)}
+                >
+                  <ChevronLeft className="h-4 w-4" />
+                </Button>
+                <div className="text-sm font-medium">
+                  {yearRangeStart} - {yearRangeStart + 11}
+                </div>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-8 w-8 p-0"
+                  onClick={() => setYearRangeStart(yearRangeStart + 12)}
+                >
+                  <ChevronRight className="h-4 w-4" />
+                </Button>
               </div>
               <div className="grid grid-cols-4 gap-2">
                 {Array.from({ length: 12 }, (_, i) => yearRangeStart + i).map((year) => (
-                  <Button key={year} variant="ghost" size="sm" className={cn("h-9 text-xs", year === currentMonth.getFullYear() && "bg-primary text-primary-foreground hover:bg-primary", year === new Date().getFullYear() && year !== currentMonth.getFullYear() && "border-primary border")}
-                    onClick={() => { setCurrentMonth(new Date(year, currentMonth.getMonth(), 1)); setViewMode("month"); }}>{year}</Button>
+                  <Button
+                    key={year}
+                    variant="ghost"
+                    size="sm"
+                    className={cn(
+                      "h-9 text-xs",
+                      year === currentMonth.getFullYear() && "bg-primary text-primary-foreground hover:bg-primary",
+                      year === new Date().getFullYear() &&
+                        year !== currentMonth.getFullYear() &&
+                        "border-primary border",
+                    )}
+                    onClick={() => {
+                      setCurrentMonth(new Date(year, currentMonth.getMonth(), 1));
+                      setViewMode("month");
+                    }}
+                  >
+                    {year}
+                  </Button>
                 ))}
               </div>
             </>
           ) : viewMode === "month" ? (
             <>
               <div className="mb-4 flex items-center justify-between">
-                <Button variant="ghost" size="sm" className="h-8 w-8 p-0" onClick={() => setCurrentMonth(new Date(currentMonth.getFullYear() - 1, currentMonth.getMonth(), 1))}><ChevronLeft className="h-4 w-4" /></Button>
-                <button type="button" className="hover:bg-accent rounded-md px-2 py-1 text-sm font-medium transition-colors" onClick={() => { setYearRangeStart(Math.floor(currentMonth.getFullYear() / 12) * 12); setViewMode("year"); }}>{currentMonth.getFullYear()}년</button>
-                <Button variant="ghost" size="sm" className="h-8 w-8 p-0" onClick={() => setCurrentMonth(new Date(currentMonth.getFullYear() + 1, currentMonth.getMonth(), 1))}><ChevronRight className="h-4 w-4" /></Button>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-8 w-8 p-0"
+                  onClick={() => setCurrentMonth(new Date(currentMonth.getFullYear() - 1, currentMonth.getMonth(), 1))}
+                >
+                  <ChevronLeft className="h-4 w-4" />
+                </Button>
+                <button
+                  type="button"
+                  className="hover:bg-accent rounded-md px-2 py-1 text-sm font-medium transition-colors"
+                  onClick={() => {
+                    setYearRangeStart(Math.floor(currentMonth.getFullYear() / 12) * 12);
+                    setViewMode("year");
+                  }}
+                >
+                  {currentMonth.getFullYear()}년
+                </button>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-8 w-8 p-0"
+                  onClick={() => setCurrentMonth(new Date(currentMonth.getFullYear() + 1, currentMonth.getMonth(), 1))}
+                >
+                  <ChevronRight className="h-4 w-4" />
+                </Button>
               </div>
               <div className="grid grid-cols-4 gap-2">
                 {Array.from({ length: 12 }, (_, i) => i).map((month) => (
-                  <Button key={month} variant="ghost" size="sm" className={cn("h-9 text-xs", month === currentMonth.getMonth() && "bg-primary text-primary-foreground hover:bg-primary", month === new Date().getMonth() && currentMonth.getFullYear() === new Date().getFullYear() && month !== currentMonth.getMonth() && "border-primary border")}
-                    onClick={() => { setCurrentMonth(new Date(currentMonth.getFullYear(), month, 1)); setViewMode("calendar"); }}>{month + 1}월</Button>
+                  <Button
+                    key={month}
+                    variant="ghost"
+                    size="sm"
+                    className={cn(
+                      "h-9 text-xs",
+                      month === currentMonth.getMonth() && "bg-primary text-primary-foreground hover:bg-primary",
+                      month === new Date().getMonth() &&
+                        currentMonth.getFullYear() === new Date().getFullYear() &&
+                        month !== currentMonth.getMonth() &&
+                        "border-primary border",
+                    )}
+                    onClick={() => {
+                      setCurrentMonth(new Date(currentMonth.getFullYear(), month, 1));
+                      setViewMode("calendar");
+                    }}
+                  >
+                    {month + 1}월
+                  </Button>
                 ))}
               </div>
             </>
           ) : (
             <>
               <div className="mb-4 flex items-center justify-between">
-                <Button variant="ghost" size="sm" className="h-8 w-8 p-0" onClick={() => setCurrentMonth(subMonths(currentMonth, 1))}><ChevronLeft className="h-4 w-4" /></Button>
-                <button type="button" className="hover:bg-accent rounded-md px-2 py-1 text-sm font-medium transition-colors" onClick={() => { setYearRangeStart(Math.floor(currentMonth.getFullYear() / 12) * 12); setViewMode("year"); }}>{format(currentMonth, "yyyy년 MM월", { locale: ko })}</button>
-                <Button variant="ghost" size="sm" className="h-8 w-8 p-0" onClick={() => setCurrentMonth(addMonths(currentMonth, 1))}><ChevronRight className="h-4 w-4" /></Button>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-8 w-8 p-0"
+                  onClick={() => setCurrentMonth(subMonths(currentMonth, 1))}
+                >
+                  <ChevronLeft className="h-4 w-4" />
+                </Button>
+                <button
+                  type="button"
+                  className="hover:bg-accent rounded-md px-2 py-1 text-sm font-medium transition-colors"
+                  onClick={() => {
+                    setYearRangeStart(Math.floor(currentMonth.getFullYear() / 12) * 12);
+                    setViewMode("year");
+                  }}
+                >
+                  {format(currentMonth, "yyyy년 MM월", { locale: ko })}
+                </button>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-8 w-8 p-0"
+                  onClick={() => setCurrentMonth(addMonths(currentMonth, 1))}
+                >
+                  <ChevronRight className="h-4 w-4" />
+                </Button>
               </div>
               <div className="mb-2 grid grid-cols-7 gap-1">
                 {["월", "화", "수", "목", "금", "토", "일"].map((d) => (
-                  <div key={d} className="text-muted-foreground p-2 text-center text-xs font-medium">{d}</div>
+                  <div key={d} className="text-muted-foreground p-2 text-center text-xs font-medium">
+                    {d}
+                  </div>
                 ))}
               </div>
               <div className="grid grid-cols-7 gap-1">
@@ -457,8 +679,21 @@ const RangeCalendarPopover: React.FC<{
                   const isSel = selectedDate ? isSameDay(d, selectedDate) : false;
                   const isT = isTodayFn(d);
                   return (
-                    <Button key={d.toISOString()} variant="ghost" size="sm" className={cn("h-8 w-8 p-0 text-xs", !isCur && "text-muted-foreground opacity-50", isSel && "bg-primary text-primary-foreground hover:bg-primary", isT && !isSel && "border-primary border")}
-                      onClick={() => onSelect(d)} disabled={!isCur}>{format(d, "d")}</Button>
+                    <Button
+                      key={d.toISOString()}
+                      variant="ghost"
+                      size="sm"
+                      className={cn(
+                        "h-8 w-8 p-0 text-xs",
+                        !isCur && "text-muted-foreground opacity-50",
+                        isSel && "bg-primary text-primary-foreground hover:bg-primary",
+                        isT && !isSel && "border-primary border",
+                      )}
+                      onClick={() => onSelect(d)}
+                      disabled={!isCur}
+                    >
+                      {format(d, "d")}
+                    </Button>
                   );
                 })}
               </div>
@@ -516,10 +751,28 @@ const RangeDatePicker = forwardRef<
   );
 
   return (
-    <div ref={ref} className={cn("flex items-center gap-2 h-full", className)}>
-      <RangeCalendarPopover open={openStart} onOpenChange={setOpenStart} selectedDate={startDate} onSelect={handleStartSelect} label="시작일" disabled={disabled} readonly={readonly} displayValue={value[0]} />
+    <div ref={ref} className={cn("flex h-full items-center gap-2", className)}>
+      <RangeCalendarPopover
+        open={openStart}
+        onOpenChange={setOpenStart}
+        selectedDate={startDate}
+        onSelect={handleStartSelect}
+        label="시작일"
+        disabled={disabled}
+        readonly={readonly}
+        displayValue={value[0]}
+      />
       <span className="text-muted-foreground">~</span>
-      <RangeCalendarPopover open={openEnd} onOpenChange={setOpenEnd} selectedDate={endDate} onSelect={handleEndSelect} label="종료일" disabled={disabled} readonly={readonly} displayValue={value[1]} />
+      <RangeCalendarPopover
+        open={openEnd}
+        onOpenChange={setOpenEnd}
+        selectedDate={endDate}
+        onSelect={handleEndSelect}
+        label="종료일"
+        disabled={disabled}
+        readonly={readonly}
+        displayValue={value[1]}
+      />
     </div>
   );
 });
@@ -595,8 +848,8 @@ const DateTimePicker = forwardRef<
   );
 
   return (
-    <div ref={ref} className={cn("flex gap-2 h-full", className)}>
-      <div className="flex-1 h-full">
+    <div ref={ref} className={cn("flex h-full gap-2", className)}>
+      <div className="h-full flex-1">
         <SingleDatePicker
           value={datePart}
           onChange={handleDateChange}
@@ -607,7 +860,7 @@ const DateTimePicker = forwardRef<
           readonly={readonly}
         />
       </div>
-      <div className="w-1/3 min-w-[100px] h-full">
+      <div className="h-full w-1/3 min-w-[100px]">
         <TimePicker value={timePart} onChange={handleTimeChange} disabled={disabled} readonly={readonly} />
       </div>
     </div>
@@ -700,7 +953,7 @@ export const V2Date = forwardRef<HTMLDivElement, V2DateProps>((props, ref) => {
     }
   };
 
-  const showLabel = label && style?.labelDisplay !== false && style?.labelDisplay !== "false";
+  const showLabel = label && style?.labelDisplay !== false;
   const componentWidth = size?.width || style?.width;
   const componentHeight = size?.height || style?.height;
 
@@ -717,20 +970,25 @@ export const V2Date = forwardRef<HTMLDivElement, V2DateProps>((props, ref) => {
       htmlFor={id}
       style={{
         ...(labelPos === "top" ? { position: "absolute" as const, top: `-${estimatedLabelHeight}px`, left: 0 } : {}),
-        ...(labelPos === "bottom" ? { position: "absolute" as const, bottom: `-${estimatedLabelHeight}px`, left: 0 } : {}),
+        ...(labelPos === "bottom"
+          ? { position: "absolute" as const, bottom: `-${estimatedLabelHeight}px`, left: 0 }
+          : {}),
         fontSize: style?.labelFontSize || "14px",
-        color: style?.labelColor || "#64748b",
+        color: getAdaptiveLabelColor(style?.labelColor),
         fontWeight: style?.labelFontWeight || "500",
       }}
       className="text-sm font-medium whitespace-nowrap"
     >
       {label}
-      {required && <span className="ml-0.5 text-orange-500">*</span>}
+      {required && <span className="ml-0.5 text-amber-500">*</span>}
     </Label>
   ) : null;
 
   const dateContent = (
-    <div className={isHorizLabel ? "min-w-0 flex-1" : "h-full w-full"} style={isHorizLabel ? { height: "100%" } : undefined}>
+    <div
+      className={isHorizLabel ? "min-w-0 flex-1" : "h-full w-full"}
+      style={isHorizLabel ? { height: "100%" } : undefined}
+    >
       {renderDatePicker()}
     </div>
   );
@@ -740,17 +998,29 @@ export const V2Date = forwardRef<HTMLDivElement, V2DateProps>((props, ref) => {
       <div
         ref={ref}
         id={id}
+        className={cn(
+          "flex flex-col gap-1",
+          labelPos === "left" ? "sm:flex-row sm:items-center" : "sm:flex-row-reverse sm:items-center",
+        )}
         style={{
           width: componentWidth,
           height: componentHeight,
-          display: "flex",
-          flexDirection: labelPos === "left" ? "row" : "row-reverse",
-          alignItems: "center",
           gap: labelGapValue,
         }}
       >
-        {labelElement}
-        {dateContent}
+        <Label
+          htmlFor={id}
+          style={{
+            fontSize: style?.labelFontSize || "14px",
+            color: getAdaptiveLabelColor(style?.labelColor),
+            fontWeight: style?.labelFontWeight || "500",
+          }}
+          className="w-full text-sm font-medium whitespace-nowrap sm:w-[120px] sm:shrink-0"
+        >
+          {label}
+          {required && <span className="ml-0.5 text-amber-500">*</span>}
+        </Label>
+        <div className="w-full min-w-0 flex-1">{renderDatePicker()}</div>
       </div>
     );
   }
diff --git a/frontend/components/v2/V2Group.tsx b/frontend/components/v2/V2Group.tsx
index 8e156ff1..885d2be7 100644
--- a/frontend/components/v2/V2Group.tsx
+++ b/frontend/components/v2/V2Group.tsx
@@ -244,10 +244,10 @@ const ModalGroup = forwardRef<HTMLDivElement, {
   className?: string;
 }>(({ title, description, open = false, onOpenChange, modalSize = "md", children, className }, ref) => {
   const sizeClasses = {
-    sm: "max-w-sm",
-    md: "max-w-md",
-    lg: "max-w-lg",
-    xl: "max-w-xl",
+    sm: "max-w-[95vw] sm:max-w-sm",
+    md: "max-w-[95vw] sm:max-w-md",
+    lg: "max-w-[95vw] sm:max-w-lg",
+    xl: "max-w-[95vw] sm:max-w-xl",
   };
 
   return (
@@ -297,10 +297,10 @@ const FormModalGroup = forwardRef<HTMLDivElement, {
   className 
 }, ref) => {
   const sizeClasses = {
-    sm: "max-w-sm",
-    md: "max-w-md",
-    lg: "max-w-lg",
-    xl: "max-w-xl",
+    sm: "max-w-[95vw] sm:max-w-sm",
+    md: "max-w-[95vw] sm:max-w-md",
+    lg: "max-w-[95vw] sm:max-w-lg",
+    xl: "max-w-[95vw] sm:max-w-xl",
   };
 
   const handleCancel = useCallback(() => {
@@ -325,10 +325,17 @@ const FormModalGroup = forwardRef<HTMLDivElement, {
         )}
         <div className="py-4">{children}</div>
         <DialogFooter className="gap-2 sm:gap-0">
-          <Button variant="outline" onClick={handleCancel}>
+          <Button
+            variant="outline"
+            onClick={handleCancel}
+            className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+          >
             {cancelLabel}
           </Button>
-          <Button onClick={handleSubmit}>
+          <Button
+            onClick={handleSubmit}
+            className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+          >
             {submitLabel}
           </Button>
         </DialogFooter>
diff --git a/frontend/components/v2/V2Hierarchy.tsx b/frontend/components/v2/V2Hierarchy.tsx
index 28f51fee..071e2e02 100644
--- a/frontend/components/v2/V2Hierarchy.tsx
+++ b/frontend/components/v2/V2Hierarchy.tsx
@@ -1,8 +1,10 @@
 "use client";
 
+import { getAdaptiveLabelColor } from "@/lib/utils/darkModeColor";
+
 /**
  * V2Hierarchy
- * 
+ *
  * 통합 계층 구조 컴포넌트
  * - tree: 트리 뷰
  * - org: 조직도
@@ -18,44 +20,37 @@ import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/component
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { cn } from "@/lib/utils";
 import { V2HierarchyProps, HierarchyNode } from "@/types/v2-components";
-import { 
-  ChevronRight, 
-  ChevronDown, 
-  Folder, 
-  FolderOpen, 
-  File, 
-  Plus, 
+import {
+  ChevronRight,
+  ChevronDown,
+  Folder,
+  FolderOpen,
+  File,
+  Plus,
   Minus,
   GripVertical,
   User,
   Users,
-  Building
+  Building,
 } from "lucide-react";
 
 /**
  * 트리 노드 컴포넌트
  */
-const TreeNode = forwardRef<HTMLDivElement, {
-  node: HierarchyNode;
-  level: number;
-  maxLevel?: number;
-  selectedNode?: HierarchyNode;
-  onSelect?: (node: HierarchyNode) => void;
-  editable?: boolean;
-  draggable?: boolean;
-  showQty?: boolean;
-  className?: string;
-}>(({ 
-  node, 
-  level, 
-  maxLevel,
-  selectedNode, 
-  onSelect, 
-  editable,
-  draggable,
-  showQty,
-  className 
-}, ref) => {
+const TreeNode = forwardRef<
+  HTMLDivElement,
+  {
+    node: HierarchyNode;
+    level: number;
+    maxLevel?: number;
+    selectedNode?: HierarchyNode;
+    onSelect?: (node: HierarchyNode) => void;
+    editable?: boolean;
+    draggable?: boolean;
+    showQty?: boolean;
+    className?: string;
+  }
+>(({ node, level, maxLevel, selectedNode, onSelect, editable, draggable, showQty, className }, ref) => {
   const [isOpen, setIsOpen] = useState(level < 2);
   const hasChildren = node.children && node.children.length > 0;
   const isSelected = selectedNode?.id === node.id;
@@ -70,26 +65,20 @@ const TreeNode = forwardRef<HTMLDivElement, {
       <Collapsible open={isOpen} onOpenChange={setIsOpen}>
         <div
           className={cn(
-            "flex items-center gap-1 py-1 px-2 rounded cursor-pointer hover:bg-muted/50",
-            isSelected && "bg-primary/10 text-primary"
+            "hover:bg-muted/50 flex cursor-pointer items-center gap-1 rounded px-2 py-1",
+            isSelected && "bg-primary/10 text-primary",
           )}
           style={{ paddingLeft: `${level * 16 + 8}px` }}
           onClick={() => onSelect?.(node)}
         >
           {/* 드래그 핸들 */}
-          {draggable && (
-            <GripVertical className="h-4 w-4 text-muted-foreground cursor-grab" />
-          )}
+          {draggable && <GripVertical className="text-muted-foreground h-4 w-4 cursor-grab" />}
 
           {/* 확장/축소 아이콘 */}
           {hasChildren ? (
             <CollapsibleTrigger asChild onClick={(e) => e.stopPropagation()}>
               <Button variant="ghost" size="icon" className="h-5 w-5 p-0">
-                {isOpen ? (
-                  <ChevronDown className="h-4 w-4" />
-                ) : (
-                  <ChevronRight className="h-4 w-4" />
-                )}
+                {isOpen ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
               </Button>
             </CollapsibleTrigger>
           ) : (
@@ -104,15 +93,15 @@ const TreeNode = forwardRef<HTMLDivElement, {
               <Folder className="h-4 w-4 text-amber-500" />
             )
           ) : (
-            <File className="h-4 w-4 text-muted-foreground" />
+            <File className="text-muted-foreground h-4 w-4" />
           )}
 
           {/* 라벨 */}
-          <span className="flex-1 text-sm truncate">{node.label}</span>
+          <span className="flex-1 truncate text-sm">{node.label}</span>
 
           {/* 수량 (BOM용) */}
           {showQty && node.data?.qty && (
-            <span className="text-xs text-muted-foreground bg-muted px-1.5 py-0.5 rounded">
+            <span className="text-muted-foreground bg-muted rounded px-1.5 py-0.5 text-xs">
               x{String(node.data.qty)}
             </span>
           )}
@@ -120,11 +109,13 @@ const TreeNode = forwardRef<HTMLDivElement, {
           {/* 편집 버튼 */}
           {editable && (
             <div className="flex gap-1">
-              <Button 
-                variant="ghost" 
-                size="icon" 
+              <Button
+                variant="ghost"
+                size="icon"
                 className="h-5 w-5 p-0 opacity-0 group-hover:opacity-100"
-                onClick={(e) => { e.stopPropagation(); }}
+                onClick={(e) => {
+                  e.stopPropagation();
+                }}
               >
                 <Plus className="h-3 w-3" />
               </Button>
@@ -159,21 +150,22 @@ TreeNode.displayName = "TreeNode";
 /**
  * 트리 뷰 컴포넌트
  */
-const TreeView = forwardRef<HTMLDivElement, {
-  data: HierarchyNode[];
-  selectedNode?: HierarchyNode;
-  onNodeSelect?: (node: HierarchyNode) => void;
-  editable?: boolean;
-  draggable?: boolean;
-  maxLevel?: number;
-  className?: string;
-}>(({ data, selectedNode, onNodeSelect, editable, draggable, maxLevel, className }, ref) => {
+const TreeView = forwardRef<
+  HTMLDivElement,
+  {
+    data: HierarchyNode[];
+    selectedNode?: HierarchyNode;
+    onNodeSelect?: (node: HierarchyNode) => void;
+    editable?: boolean;
+    draggable?: boolean;
+    maxLevel?: number;
+    className?: string;
+  }
+>(({ data, selectedNode, onNodeSelect, editable, draggable, maxLevel, className }, ref) => {
   return (
-    <div ref={ref} className={cn("border rounded-lg p-2", className)}>
+    <div ref={ref} className={cn("rounded-lg border p-2", className)}>
       {data.length === 0 ? (
-        <div className="py-8 text-center text-muted-foreground text-sm">
-          데이터가 없습니다
-        </div>
+        <div className="text-muted-foreground py-8 text-center text-sm">데이터가 없습니다</div>
       ) : (
         data.map((node) => (
           <TreeNode
@@ -196,12 +188,15 @@ TreeView.displayName = "TreeView";
 /**
  * 조직도 뷰 컴포넌트
  */
-const OrgView = forwardRef<HTMLDivElement, {
-  data: HierarchyNode[];
-  selectedNode?: HierarchyNode;
-  onNodeSelect?: (node: HierarchyNode) => void;
-  className?: string;
-}>(({ data, selectedNode, onNodeSelect, className }, ref) => {
+const OrgView = forwardRef<
+  HTMLDivElement,
+  {
+    data: HierarchyNode[];
+    selectedNode?: HierarchyNode;
+    onNodeSelect?: (node: HierarchyNode) => void;
+    className?: string;
+  }
+>(({ data, selectedNode, onNodeSelect, className }, ref) => {
   const renderOrgNode = (node: HierarchyNode, isRoot = false) => {
     const isSelected = selectedNode?.id === node.id;
     const hasChildren = node.children && node.children.length > 0;
@@ -211,16 +206,18 @@ const OrgView = forwardRef<HTMLDivElement, {
         {/* 노드 카드 */}
         <div
           className={cn(
-            "flex flex-col items-center p-3 border rounded-lg cursor-pointer hover:border-primary transition-colors",
+            "hover:border-primary flex cursor-pointer flex-col items-center rounded-lg border p-3 transition-colors",
             isSelected && "border-primary bg-primary/5",
-            isRoot && "bg-primary/10"
+            isRoot && "bg-primary/10",
           )}
           onClick={() => onNodeSelect?.(node)}
         >
-          <div className={cn(
-            "w-10 h-10 rounded-full flex items-center justify-center mb-2",
-            isRoot ? "bg-primary text-primary-foreground" : "bg-muted"
-          )}>
+          <div
+            className={cn(
+              "mb-2 flex h-10 w-10 items-center justify-center rounded-full",
+              isRoot ? "bg-primary text-primary-foreground" : "bg-muted",
+            )}
+          >
             {isRoot ? (
               <Building className="h-5 w-5" />
             ) : hasChildren ? (
@@ -230,10 +227,8 @@ const OrgView = forwardRef<HTMLDivElement, {
             )}
           </div>
           <div className="text-center">
-            <div className="font-medium text-sm">{node.label}</div>
-            {node.data?.title && (
-              <div className="text-xs text-muted-foreground">{String(node.data.title)}</div>
-            )}
+            <div className="text-sm font-medium">{node.label}</div>
+            {node.data?.title && <div className="text-muted-foreground text-xs">{String(node.data.title)}</div>}
           </div>
         </div>
 
@@ -241,7 +236,7 @@ const OrgView = forwardRef<HTMLDivElement, {
         {hasChildren && (
           <>
             {/* 연결선 */}
-            <div className="w-px h-4 bg-border" />
+            <div className="bg-border h-4 w-px" />
             <div className="flex gap-4">
               {node.children!.map((child, index) => (
                 <React.Fragment key={child.id}>
@@ -259,13 +254,9 @@ const OrgView = forwardRef<HTMLDivElement, {
   return (
     <div ref={ref} className={cn("overflow-auto p-4", className)}>
       {data.length === 0 ? (
-        <div className="py-8 text-center text-muted-foreground text-sm">
-          조직 데이터가 없습니다
-        </div>
+        <div className="text-muted-foreground py-8 text-center text-sm">조직 데이터가 없습니다</div>
       ) : (
-        <div className="flex flex-col items-center gap-4">
-          {data.map((node) => renderOrgNode(node, true))}
-        </div>
+        <div className="flex flex-col items-center gap-4">{data.map((node) => renderOrgNode(node, true))}</div>
       )}
     </div>
   );
@@ -275,19 +266,20 @@ OrgView.displayName = "OrgView";
 /**
  * BOM 뷰 컴포넌트 (수량 포함 트리)
  */
-const BomView = forwardRef<HTMLDivElement, {
-  data: HierarchyNode[];
-  selectedNode?: HierarchyNode;
-  onNodeSelect?: (node: HierarchyNode) => void;
-  editable?: boolean;
-  className?: string;
-}>(({ data, selectedNode, onNodeSelect, editable, className }, ref) => {
+const BomView = forwardRef<
+  HTMLDivElement,
+  {
+    data: HierarchyNode[];
+    selectedNode?: HierarchyNode;
+    onNodeSelect?: (node: HierarchyNode) => void;
+    editable?: boolean;
+    className?: string;
+  }
+>(({ data, selectedNode, onNodeSelect, editable, className }, ref) => {
   return (
-    <div ref={ref} className={cn("border rounded-lg p-2", className)}>
+    <div ref={ref} className={cn("rounded-lg border p-2", className)}>
       {data.length === 0 ? (
-        <div className="py-8 text-center text-muted-foreground text-sm">
-          BOM 데이터가 없습니다
-        </div>
+        <div className="text-muted-foreground py-8 text-center text-sm">BOM 데이터가 없습니다</div>
       ) : (
         data.map((node) => (
           <TreeNode
@@ -309,13 +301,16 @@ BomView.displayName = "BomView";
 /**
  * 연쇄 드롭다운 컴포넌트
  */
-const CascadingView = forwardRef<HTMLDivElement, {
-  data: HierarchyNode[];
-  selectedNode?: HierarchyNode;
-  onNodeSelect?: (node: HierarchyNode) => void;
-  maxLevel?: number;
-  className?: string;
-}>(({ data, selectedNode, onNodeSelect, maxLevel = 3, className }, ref) => {
+const CascadingView = forwardRef<
+  HTMLDivElement,
+  {
+    data: HierarchyNode[];
+    selectedNode?: HierarchyNode;
+    onNodeSelect?: (node: HierarchyNode) => void;
+    maxLevel?: number;
+    className?: string;
+  }
+>(({ data, selectedNode, onNodeSelect, maxLevel = 3, className }, ref) => {
   const [selections, setSelections] = useState<string[]>([]);
 
   // 레벨별 옵션 가져오기
@@ -326,10 +321,10 @@ const CascadingView = forwardRef<HTMLDivElement, {
     for (let i = 0; i < level; i++) {
       const selectedId = selections[i];
       if (!selectedId) return [];
-      
+
       const selectedNode = currentNodes.find((n) => n.id === selectedId);
       if (!selectedNode?.children) return [];
-      
+
       currentNodes = selectedNode.children;
     }
     return currentNodes;
@@ -384,126 +379,94 @@ CascadingView.displayName = "CascadingView";
 /**
  * 메인 V2Hierarchy 컴포넌트
  */
-export const V2Hierarchy = forwardRef<HTMLDivElement, V2HierarchyProps>(
-  (props, ref) => {
-    const {
-      id,
-      label,
-      required,
-      style,
-      size,
-      config: configProp,
-      data = [],
-      selectedNode,
-      onNodeSelect,
-    } = props;
+export const V2Hierarchy = forwardRef<HTMLDivElement, V2HierarchyProps>((props, ref) => {
+  const { id, label, required, style, size, config: configProp, data = [], selectedNode, onNodeSelect } = props;
 
-    // config가 없으면 기본값 사용
-    const config = configProp || { type: "tree" as const, viewMode: "tree" as const, dataSource: "static" as const };
+  // config가 없으면 기본값 사용
+  const config = configProp || { type: "tree" as const, viewMode: "tree" as const, dataSource: "static" as const };
 
-    // 뷰모드별 렌더링
-    const renderHierarchy = () => {
-      const viewMode = config.viewMode || config.type || "tree";
-      switch (viewMode) {
-        case "tree":
-          return (
-            <TreeView
-              data={data}
-              selectedNode={selectedNode}
-              onNodeSelect={onNodeSelect}
-              editable={config.editable}
-              draggable={config.draggable}
-              maxLevel={config.maxLevel}
-            />
-          );
+  // 뷰모드별 렌더링
+  const renderHierarchy = () => {
+    const viewMode = config.viewMode || config.type || "tree";
+    switch (viewMode) {
+      case "tree":
+        return (
+          <TreeView
+            data={data}
+            selectedNode={selectedNode}
+            onNodeSelect={onNodeSelect}
+            editable={config.editable}
+            draggable={config.draggable}
+            maxLevel={config.maxLevel}
+          />
+        );
 
-        case "org":
-          return (
-            <OrgView
-              data={data}
-              selectedNode={selectedNode}
-              onNodeSelect={onNodeSelect}
-            />
-          );
+      case "org":
+        return <OrgView data={data} selectedNode={selectedNode} onNodeSelect={onNodeSelect} />;
 
-        case "bom":
-          return (
-            <BomView
-              data={data}
-              selectedNode={selectedNode}
-              onNodeSelect={onNodeSelect}
-              editable={config.editable}
-            />
-          );
+      case "bom":
+        return (
+          <BomView data={data} selectedNode={selectedNode} onNodeSelect={onNodeSelect} editable={config.editable} />
+        );
 
-        case "dropdown":
-        case "cascading":
-          return (
-            <CascadingView
-              data={data}
-              selectedNode={selectedNode}
-              onNodeSelect={onNodeSelect}
-              maxLevel={config.maxLevel}
-            />
-          );
+      case "dropdown":
+      case "cascading":
+        return (
+          <CascadingView
+            data={data}
+            selectedNode={selectedNode}
+            onNodeSelect={onNodeSelect}
+            maxLevel={config.maxLevel}
+          />
+        );
 
-        default:
-          return (
-            <TreeView
-              data={data}
-              selectedNode={selectedNode}
-              onNodeSelect={onNodeSelect}
-            />
-          );
-      }
-    };
+      default:
+        return <TreeView data={data} selectedNode={selectedNode} onNodeSelect={onNodeSelect} />;
+    }
+  };
 
-    const showLabel = label && style?.labelDisplay !== false;
-    const componentWidth = size?.width || style?.width;
-    const componentHeight = size?.height || style?.height;
+  const showLabel = label && style?.labelDisplay !== false;
+  const componentWidth = size?.width || style?.width;
+  const componentHeight = size?.height || style?.height;
 
-    // 라벨 높이 계산 (기본 20px, 사용자 설정에 따라 조정)
-    const labelFontSize = style?.labelFontSize ? parseInt(String(style.labelFontSize)) : 14;
-    const labelMarginBottom = style?.labelMarginBottom ? parseInt(String(style.labelMarginBottom)) : 4;
-    const estimatedLabelHeight = labelFontSize + labelMarginBottom + 2;
+  // 라벨 높이 계산 (기본 20px, 사용자 설정에 따라 조정)
+  const labelFontSize = style?.labelFontSize ? parseInt(String(style.labelFontSize)) : 14;
+  const labelMarginBottom = style?.labelMarginBottom ? parseInt(String(style.labelMarginBottom)) : 4;
+  const estimatedLabelHeight = labelFontSize + labelMarginBottom + 2;
 
-    return (
-      <div
-        ref={ref}
-        id={id}
-        className="relative"
-        style={{
-          width: componentWidth,
-          height: componentHeight,
-        }}
-      >
-        {/* 🔧 라벨을 absolute로 컴포넌트 위에 배치 */}
-        {showLabel && (
-          <Label
-            htmlFor={id}
-            style={{
-              position: "absolute",
-              top: `-${estimatedLabelHeight}px`,
-              left: 0,
-              fontSize: style?.labelFontSize || "14px",
-              color: style?.labelColor || "#64748b",
-              fontWeight: style?.labelFontWeight || "500",
-            }}
-            className="text-sm font-medium whitespace-nowrap"
-          >
-            {label}
-            {required && <span className="text-orange-500 ml-0.5">*</span>}
-          </Label>
-        )}
-        <div className="h-full w-full">
-          {renderHierarchy()}
-        </div>
-      </div>
-    );
-  }
-);
+  return (
+    <div
+      ref={ref}
+      id={id}
+      className="relative"
+      style={{
+        width: componentWidth,
+        height: componentHeight,
+      }}
+    >
+      {/* 🔧 라벨을 absolute로 컴포넌트 위에 배치 */}
+      {showLabel && (
+        <Label
+          htmlFor={id}
+          style={{
+            position: "absolute",
+            top: `-${estimatedLabelHeight}px`,
+            left: 0,
+            fontSize: style?.labelFontSize || "14px",
+            color: getAdaptiveLabelColor(style?.labelColor),
+            fontWeight: style?.labelFontWeight || "500",
+          }}
+          className="text-sm font-medium whitespace-nowrap"
+        >
+          {label}
+          {required && <span className="ml-0.5 text-amber-500">*</span>}
+        </Label>
+      )}
+      <div className="h-full w-full">{renderHierarchy()}</div>
+    </div>
+  );
+});
 
 V2Hierarchy.displayName = "V2Hierarchy";
 
 export default V2Hierarchy;
-
diff --git a/frontend/components/v2/V2Input.tsx b/frontend/components/v2/V2Input.tsx
index 6bd19c5d..e61ba143 100644
--- a/frontend/components/v2/V2Input.tsx
+++ b/frontend/components/v2/V2Input.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import { getAdaptiveLabelColor } from "@/lib/utils/darkModeColor";
+
 /**
  * V2Input
  *
@@ -25,11 +27,27 @@ import { previewNumberingCode } from "@/lib/api/numberingRule";
 // 형식별 입력 마스크 및 검증 패턴
 const FORMAT_PATTERNS: Record<V2InputFormat, { pattern: RegExp; placeholder: string; errorMessage: string }> = {
   none: { pattern: /.*/, placeholder: "", errorMessage: "" },
-  email: { pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/, placeholder: "example@email.com", errorMessage: "올바른 이메일 형식이 아닙니다" },
-  tel: { pattern: /^\d{2,3}-\d{3,4}-\d{4}$/, placeholder: "010-1234-5678", errorMessage: "올바른 전화번호 형식이 아닙니다" },
-  url: { pattern: /^https?:\/\/.+/, placeholder: "https://example.com", errorMessage: "올바른 URL 형식이 아닙니다 (https://로 시작)" },
+  email: {
+    pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
+    placeholder: "example@email.com",
+    errorMessage: "올바른 이메일 형식이 아닙니다",
+  },
+  tel: {
+    pattern: /^\d{2,3}-\d{3,4}-\d{4}$/,
+    placeholder: "010-1234-5678",
+    errorMessage: "올바른 전화번호 형식이 아닙니다",
+  },
+  url: {
+    pattern: /^https?:\/\/.+/,
+    placeholder: "https://example.com",
+    errorMessage: "올바른 URL 형식이 아닙니다 (https://로 시작)",
+  },
   currency: { pattern: /^[\d,]+$/, placeholder: "1,000,000", errorMessage: "숫자만 입력 가능합니다" },
-  biz_no: { pattern: /^\d{3}-\d{2}-\d{5}$/, placeholder: "123-45-67890", errorMessage: "올바른 사업자번호 형식이 아닙니다" },
+  biz_no: {
+    pattern: /^\d{3}-\d{2}-\d{5}$/,
+    placeholder: "123-45-67890",
+    errorMessage: "올바른 사업자번호 형식이 아닙니다",
+  },
 };
 
 // 형식 검증 함수 (외부에서도 사용 가능)
@@ -196,7 +214,7 @@ const TextInput = forwardRef<
   const hasError = hasBlurred && !!validationError;
 
   return (
-    <div className="flex h-full w-full flex-col">
+    <div className="relative h-full w-full">
       <Input
         ref={ref}
         type="text"
@@ -206,16 +224,10 @@ const TextInput = forwardRef<
         placeholder={inputPlaceholder}
         readOnly={readonly}
         disabled={disabled}
-        className={cn(
-          "h-full w-full",
-          hasError && "border-destructive focus-visible:ring-destructive",
-          className,
-        )}
+        className={cn("h-full w-full", hasError && "border-destructive focus-visible:ring-destructive", className)}
         style={inputStyle}
       />
-      {hasError && (
-        <p className="text-destructive mt-1 text-[11px]">{validationError}</p>
-      )}
+      {hasError && <p className="text-destructive absolute top-full left-0 mt-0.5 text-[11px]">{validationError}</p>}
     </div>
   );
 });
@@ -456,7 +468,7 @@ export const V2Input = forwardRef<HTMLDivElement, V2InputProps>((props, ref) =>
   // 채번 타입 자동생성 상태
   const [isGeneratingNumbering, setIsGeneratingNumbering] = useState(false);
   const hasGeneratedNumberingRef = useRef(false);
-  
+
   // formData를 ref로 관리하여 closure 문제 해결 (채번 코드 생성 시 최신 값 사용)
   const formDataRef = useRef(formData);
   formDataRef.current = formData;
@@ -466,8 +478,8 @@ export const V2Input = forwardRef<HTMLDivElement, V2InputProps>((props, ref) =>
   // 2. config에서 설정된 값
   // 3. 컴포넌트 overrides에서 설정된 값 (V2 레이아웃)
   // 4. screenInfo에서 화면 테이블명
-  const tableName = 
-    (props as any).tableName || 
+  const tableName =
+    (props as any).tableName ||
     (config as any).tableName ||
     (props as any).component?.tableName ||
     (props as any).component?.overrides?.tableName ||
@@ -597,7 +609,7 @@ export const V2Input = forwardRef<HTMLDivElement, V2InputProps>((props, ref) =>
       if (userEditedNumberingRef.current && !categoryChanged) {
         return;
       }
-      
+
       // 이미 생성되었고 카테고리 값이 변경되지 않았으면 스킵
       if (hasGeneratedNumberingRef.current && !categoryChanged) {
         return;
@@ -639,20 +651,26 @@ export const V2Input = forwardRef<HTMLDivElement, V2InputProps>((props, ref) =>
                 const columns = columnsResponse.data.columns || columnsResponse.data;
                 const targetColumn = columns.find((col: { columnName: string }) => col.columnName === columnName);
                 if (targetColumn?.detailSettings) {
-                  const parsed = typeof targetColumn.detailSettings === "string"
-                    ? JSON.parse(targetColumn.detailSettings)
-                    : targetColumn.detailSettings;
+                  const parsed =
+                    typeof targetColumn.detailSettings === "string"
+                      ? JSON.parse(targetColumn.detailSettings)
+                      : targetColumn.detailSettings;
                   numberingRuleIdRef.current = parsed.numberingRuleId || null;
                 }
               }
-            } catch { /* ignore */ }
+            } catch {
+              /* ignore */
+            }
           }
         }
 
         const numberingRuleId = numberingRuleIdRef.current;
 
         if (!numberingRuleId) {
-          console.warn("채번 규칙을 찾을 수 없습니다. 옵션설정 > 채번설정에서 규칙을 생성하세요.", { tableName, columnName });
+          console.warn("채번 규칙을 찾을 수 없습니다. 옵션설정 > 채번설정에서 규칙을 생성하세요.", {
+            tableName,
+            columnName,
+          });
           return;
         }
 
@@ -664,24 +682,24 @@ export const V2Input = forwardRef<HTMLDivElement, V2InputProps>((props, ref) =>
           const generatedCode = previewResponse.data.generatedCode;
           hasGeneratedNumberingRef.current = true;
           lastCategoryValuesRef.current = categoryValuesForNumbering;
-          
+
           // 수동 입력 부분이 있는 경우
           if (generatedCode.includes("____")) {
             hadManualPartRef.current = true;
             const oldTemplate = numberingTemplateRef.current;
             numberingTemplateRef.current = generatedCode;
-            
+
             // 카테고리 변경으로 템플릿이 바뀌었을 때 기존 사용자 입력값 유지
             if (oldTemplate && oldTemplate !== generatedCode) {
               // 템플릿이 변경되었지만 사용자 입력값은 유지
               const templateParts = generatedCode.split("____");
               const templatePrefix = templateParts[0] || "";
               const templateSuffix = templateParts.length > 1 ? templateParts.slice(1).join("") : "";
-              
+
               // 기존 manualInputValue를 사용하여 새 값 조합 (상태는 유지)
               // 참고: setManualInputValue는 호출하지 않음 (기존 값 유지)
               const finalValue = templatePrefix + (userEditedNumberingRef.current ? "" : "") + templateSuffix;
-              
+
               // 사용자가 입력한 적이 없으면 템플릿 그대로
               if (!userEditedNumberingRef.current) {
                 setAutoGeneratedValue(generatedCode);
@@ -701,7 +719,7 @@ export const V2Input = forwardRef<HTMLDivElement, V2InputProps>((props, ref) =>
             onChange?.(generatedCode);
             userEditedNumberingRef.current = false;
           }
-          
+
           // 채번 코드 생성 성공
         } else {
           console.warn("채번 코드 생성 실패:", previewResponse);
@@ -730,10 +748,10 @@ export const V2Input = forwardRef<HTMLDivElement, V2InputProps>((props, ref) =>
       const templateParts = template.split("____");
       const templatePrefix = templateParts[0] || "";
       const templateSuffix = templateParts.length > 1 ? templateParts.slice(1).join("") : "";
-      
+
       // 현재 조합된 값 생성
       const currentValue = templatePrefix + manualInputValue + templateSuffix;
-      
+
       // formData에 직접 주입
       if (event.detail?.formData && columnName) {
         event.detail.formData[columnName] = currentValue;
@@ -776,11 +794,12 @@ export const V2Input = forwardRef<HTMLDivElement, V2InputProps>((props, ref) =>
 
       case "number":
         // DB에서 문자열("325")로 반환되는 경우도 숫자로 변환하여 표시
-        const numValue = typeof displayValue === "number"
-          ? displayValue
-          : (displayValue !== undefined && displayValue !== null && displayValue !== "" && !isNaN(Number(displayValue)))
-            ? Number(displayValue)
-            : undefined;
+        const numValue =
+          typeof displayValue === "number"
+            ? displayValue
+            : displayValue !== undefined && displayValue !== null && displayValue !== "" && !isNaN(Number(displayValue))
+              ? Number(displayValue)
+              : undefined;
         return (
           <NumberInput
             value={numValue}
@@ -815,11 +834,12 @@ export const V2Input = forwardRef<HTMLDivElement, V2InputProps>((props, ref) =>
 
       case "slider":
         // DB에서 문자열로 반환되는 경우도 숫자로 변환
-        const sliderValue = typeof displayValue === "number"
-          ? displayValue
-          : (displayValue !== undefined && displayValue !== null && displayValue !== "" && !isNaN(Number(displayValue)))
-            ? Number(displayValue)
-            : (config.min ?? 0);
+        const sliderValue =
+          typeof displayValue === "number"
+            ? displayValue
+            : displayValue !== undefined && displayValue !== null && displayValue !== "" && !isNaN(Number(displayValue))
+              ? Number(displayValue)
+              : (config.min ?? 0);
         return (
           <SliderInput
             value={sliderValue}
@@ -866,9 +886,9 @@ export const V2Input = forwardRef<HTMLDivElement, V2InputProps>((props, ref) =>
         // 채번 타입: ____ 부분만 편집 가능하게 처리
         const template = numberingTemplateRef.current;
         const canEdit = hadManualPartRef.current && template;
-        
+
         // 채번 필드 렌더링
-        
+
         // 템플릿이 없으면 읽기 전용 (아직 생성 전이거나 수동 입력 부분 없음)
         if (!canEdit) {
           return (
@@ -882,12 +902,12 @@ export const V2Input = forwardRef<HTMLDivElement, V2InputProps>((props, ref) =>
             />
           );
         }
-        
+
         // 템플릿에서 prefix와 suffix 추출
         const templateParts = template.split("____");
         const templatePrefix = templateParts[0] || "";
         const templateSuffix = templateParts.length > 1 ? templateParts.slice(1).join("") : "";
-        
+
         return (
           <div className="flex h-full items-center rounded-md border">
             {/* 고정 접두어 */}
@@ -903,23 +923,25 @@ export const V2Input = forwardRef<HTMLDivElement, V2InputProps>((props, ref) =>
               onChange={(e) => {
                 const newUserInput = e.target.value;
                 setManualInputValue(newUserInput);
-                
+
                 // 전체 값 조합
                 const newValue = templatePrefix + newUserInput + templateSuffix;
                 userEditedNumberingRef.current = true;
                 setAutoGeneratedValue(newValue);
-                
+
                 // 모든 방법으로 formData 업데이트 시도
                 onChange?.(newValue);
                 if (onFormDataChange && columnName) {
                   onFormDataChange(columnName, newValue);
                 }
-                
+
                 // 커스텀 이벤트로도 전달 (최후의 보루)
                 if (typeof window !== "undefined" && columnName) {
-                  window.dispatchEvent(new CustomEvent("numberingValueChanged", {
-                    detail: { columnName, value: newValue }
-                  }));
+                  window.dispatchEvent(
+                    new CustomEvent("numberingValueChanged", {
+                      detail: { columnName, value: newValue },
+                    }),
+                  );
                 }
               }}
               placeholder="입력"
@@ -957,7 +979,7 @@ export const V2Input = forwardRef<HTMLDivElement, V2InputProps>((props, ref) =>
   };
 
   const actualLabel = label || style?.labelText;
-  const showLabel = actualLabel && style?.labelDisplay !== false && style?.labelDisplay !== "false";
+  const showLabel = actualLabel && style?.labelDisplay !== false;
   const componentWidth = size?.width || style?.width;
   const componentHeight = size?.height || style?.height;
 
@@ -987,15 +1009,17 @@ export const V2Input = forwardRef<HTMLDivElement, V2InputProps>((props, ref) =>
       htmlFor={id}
       style={{
         ...(labelPos === "top" ? { position: "absolute" as const, top: `-${estimatedLabelHeight}px`, left: 0 } : {}),
-        ...(labelPos === "bottom" ? { position: "absolute" as const, bottom: `-${estimatedLabelHeight}px`, left: 0 } : {}),
+        ...(labelPos === "bottom"
+          ? { position: "absolute" as const, bottom: `-${estimatedLabelHeight}px`, left: 0 }
+          : {}),
         fontSize: style?.labelFontSize || "14px",
-        color: style?.labelColor || "#64748b",
+        color: getAdaptiveLabelColor(style?.labelColor),
         fontWeight: style?.labelFontWeight || "500",
       }}
       className="text-sm font-medium whitespace-nowrap"
     >
       {actualLabel}
-      {required && <span className="ml-0.5 text-orange-500">*</span>}
+      {required && <span className="ml-0.5 text-amber-500">*</span>}
     </Label>
   ) : null;
 
@@ -1003,8 +1027,9 @@ export const V2Input = forwardRef<HTMLDivElement, V2InputProps>((props, ref) =>
     <div
       className={cn(
         isHorizLabel ? "min-w-0 flex-1" : "h-full w-full",
-        hasCustomBorder && "[&_input]:border-0! [&_textarea]:border-0! [&_.border]:border-0!",
-        (hasCustomBorder || hasCustomRadius) && "[&_input]:rounded-none! [&_textarea]:rounded-none! [&_.rounded-md]:rounded-none!",
+        hasCustomBorder && "[&_.border]:border-0! [&_input]:border-0! [&_textarea]:border-0!",
+        (hasCustomBorder || hasCustomRadius) &&
+          "[&_.rounded-md]:rounded-none! [&_input]:rounded-none! [&_textarea]:rounded-none!",
         hasCustomBackground && "[&_input]:bg-transparent! [&_textarea]:bg-transparent!",
       )}
       style={{ ...(hasCustomText ? customTextStyle : {}), ...(isHorizLabel ? { height: "100%" } : {}) }}
@@ -1018,17 +1043,40 @@ export const V2Input = forwardRef<HTMLDivElement, V2InputProps>((props, ref) =>
       <div
         ref={ref}
         id={id}
+        className={cn(
+          "flex flex-col gap-1",
+          labelPos === "left" ? "sm:flex-row sm:items-center" : "sm:flex-row-reverse sm:items-center",
+        )}
         style={{
           width: componentWidth,
           height: componentHeight,
-          display: "flex",
-          flexDirection: labelPos === "left" ? "row" : "row-reverse",
-          alignItems: "center",
           gap: labelGapValue,
         }}
       >
-        {labelElement}
-        {inputContent}
+        <Label
+          htmlFor={id}
+          style={{
+            fontSize: style?.labelFontSize || "14px",
+            color: getAdaptiveLabelColor(style?.labelColor),
+            fontWeight: style?.labelFontWeight || "500",
+          }}
+          className="w-full text-sm font-medium whitespace-nowrap sm:w-[120px] sm:shrink-0"
+        >
+          {actualLabel}
+          {required && <span className="ml-0.5 text-amber-500">*</span>}
+        </Label>
+        <div
+          className={cn(
+            "w-full min-w-0 flex-1",
+            hasCustomBorder && "[&_.border]:border-0! [&_input]:border-0! [&_textarea]:border-0!",
+            (hasCustomBorder || hasCustomRadius) &&
+              "[&_.rounded-md]:rounded-none! [&_input]:rounded-none! [&_textarea]:rounded-none!",
+            hasCustomBackground && "[&_input]:bg-transparent! [&_textarea]:bg-transparent!",
+          )}
+          style={{ ...(hasCustomText ? customTextStyle : {}) }}
+        >
+          {renderInput()}
+        </div>
       </div>
     );
   }
diff --git a/frontend/components/v2/V2Layout.tsx b/frontend/components/v2/V2Layout.tsx
index f58b9e93..01300bb9 100644
--- a/frontend/components/v2/V2Layout.tsx
+++ b/frontend/components/v2/V2Layout.tsx
@@ -31,20 +31,20 @@ const GridLayout = forwardRef<HTMLDivElement, {
   className?: string;
   use12Column?: boolean; // 12컬럼 시스템 사용 여부
 }>(({ columns = 12, gap = "16px", children, className, use12Column = true }, ref) => {
-  // 12컬럼 그리드 클래스 매핑
+  // 12컬럼 그리드 클래스 매핑 (모바일 단일 컬럼 → sm: 실제 컬럼 수)
   const gridColsClass: Record<number, string> = {
     1: "grid-cols-1",
-    2: "grid-cols-2",
-    3: "grid-cols-3",
-    4: "grid-cols-4",
-    5: "grid-cols-5",
-    6: "grid-cols-6",
-    7: "grid-cols-7",
-    8: "grid-cols-8",
-    9: "grid-cols-9",
-    10: "grid-cols-10",
-    11: "grid-cols-11",
-    12: "grid-cols-12",
+    2: "grid-cols-1 sm:grid-cols-2",
+    3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+    4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4",
+    5: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-5",
+    6: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-6",
+    7: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-7",
+    8: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-8",
+    9: "grid-cols-1 sm:grid-cols-3 lg:grid-cols-9",
+    10: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-10",
+    11: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-11",
+    12: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-12",
   };
 
   // 12컬럼 시스템 사용 시
@@ -54,7 +54,7 @@ const GridLayout = forwardRef<HTMLDivElement, {
         ref={ref}
         className={cn(
           "grid",
-          gridColsClass[columns] || "grid-cols-12",
+          gridColsClass[columns] || "grid-cols-1 sm:grid-cols-2 lg:grid-cols-12",
           className
         )}
         style={{ gap }}
@@ -64,11 +64,11 @@ const GridLayout = forwardRef<HTMLDivElement, {
     );
   }
 
-  // 기존 방식 (동적 컬럼 수)
+  // 기존 방식 (동적 컬럼 수) - 모바일에서 단일 컬럼으로 전환
   return (
     <div
       ref={ref}
-      className={cn("grid", className)}
+      className={cn("grid grid-cols-1", className)}
       style={{
         gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
         gap,
@@ -139,14 +139,14 @@ const SplitLayout = forwardRef<HTMLDivElement, {
       }}
       className={cn(
         "flex",
-        isHorizontal ? "flex-row" : "flex-col",
+        isHorizontal ? "flex-col sm:flex-row" : "flex-col",
         className
       )}
       style={{ gap }}
     >
-      {/* 첫 번째 패널 */}
+      {/* 첫 번째 패널 - 모바일에서 전체 너비 */}
       <div
-        className="overflow-auto"
+        className="overflow-auto w-full sm:w-auto"
         style={{
           [isHorizontal ? "width" : "height"]: `${ratio[0]}%`,
           flexShrink: 0,
@@ -155,10 +155,10 @@ const SplitLayout = forwardRef<HTMLDivElement, {
         {childArray[0]}
       </div>
 
-      {/* 리사이저 */}
+      {/* 리사이저 - 모바일에서 숨김 */}
       <div
         className={cn(
-          "flex items-center justify-center bg-border hover:bg-primary/20 transition-colors",
+          "hidden sm:flex items-center justify-center bg-border hover:bg-primary/20 transition-colors",
           isHorizontal ? "w-2 cursor-col-resize" : "h-2 cursor-row-resize",
           isDragging && "bg-primary/30"
         )}
@@ -171,9 +171,9 @@ const SplitLayout = forwardRef<HTMLDivElement, {
         )}
       </div>
 
-      {/* 두 번째 패널 */}
+      {/* 두 번째 패널 - 모바일에서 전체 너비 */}
       <div
-        className="overflow-auto flex-1"
+        className="overflow-auto flex-1 w-full sm:w-auto"
         style={{
           [isHorizontal ? "width" : "height"]: `${ratio[1]}%`,
         }}
diff --git a/frontend/components/v2/V2Media.tsx b/frontend/components/v2/V2Media.tsx
index 0a4faaae..f37cefc1 100644
--- a/frontend/components/v2/V2Media.tsx
+++ b/frontend/components/v2/V2Media.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import { getAdaptiveLabelColor } from "@/lib/utils/darkModeColor";
+
 /**
  * V2Media
  *
@@ -61,31 +63,31 @@ const getFileIcon = (extension: string) => {
   const ext = extension.toLowerCase().replace(".", "");
 
   if (["jpg", "jpeg", "png", "gif", "bmp", "webp", "svg"].includes(ext)) {
-    return <FileImage className="h-6 w-6 text-blue-500" />;
+    return <FileImage className="text-primary h-6 w-6" />;
   }
   if (["mp4", "avi", "mov", "wmv", "flv", "webm"].includes(ext)) {
     return <FileVideo className="h-6 w-6 text-purple-500" />;
   }
   if (["mp3", "wav", "flac", "aac", "ogg"].includes(ext)) {
-    return <FileAudio className="h-6 w-6 text-green-500" />;
+    return <FileAudio className="h-6 w-6 text-emerald-500" />;
   }
   if (["pdf"].includes(ext)) {
-    return <FileText className="h-6 w-6 text-red-500" />;
+    return <FileText className="text-destructive h-6 w-6" />;
   }
   if (["doc", "docx", "hwp", "hwpx", "pages"].includes(ext)) {
-    return <FileText className="h-6 w-6 text-blue-600" />;
+    return <FileText className="text-primary h-6 w-6" />;
   }
   if (["xls", "xlsx", "hcell", "numbers"].includes(ext)) {
-    return <FileText className="h-6 w-6 text-green-600" />;
+    return <FileText className="h-6 w-6 text-emerald-600" />;
   }
   if (["ppt", "pptx", "hanshow", "keynote"].includes(ext)) {
-    return <Presentation className="h-6 w-6 text-orange-500" />;
+    return <Presentation className="h-6 w-6 text-amber-500" />;
   }
   if (["zip", "rar", "7z", "tar", "gz"].includes(ext)) {
-    return <Archive className="h-6 w-6 text-gray-500" />;
+    return <Archive className="text-muted-foreground h-6 w-6" />;
   }
 
-  return <File className="h-6 w-6 text-gray-400" />;
+  return <File className="text-muted-foreground/70 h-6 w-6" />;
 };
 
 /**
@@ -834,14 +836,14 @@ export const V2Media = forwardRef<HTMLDivElement, V2MediaProps>((props, ref) =>
           htmlFor={id}
           style={{
             fontSize: style?.labelFontSize,
-            color: style?.labelColor,
+            color: getAdaptiveLabelColor(style?.labelColor),
             fontWeight: style?.labelFontWeight,
             marginBottom: style?.labelMarginBottom,
           }}
           className="shrink-0 text-sm font-medium"
         >
           {label}
-          {required && <span className="ml-0.5 text-orange-500">*</span>}
+          {required && <span className="ml-0.5 text-amber-500">*</span>}
         </Label>
       )}
 
diff --git a/frontend/components/v2/V2Repeater.tsx b/frontend/components/v2/V2Repeater.tsx
index 7bf7e6fa..3b36dd6b 100644
--- a/frontend/components/v2/V2Repeater.tsx
+++ b/frontend/components/v2/V2Repeater.tsx
@@ -1627,7 +1627,7 @@ export const V2Repeater: React.FC<V2RepeaterProps> = ({
   return (
     <div className={cn("flex h-full flex-col overflow-hidden", className)}>
       {/* 헤더 영역 */}
-      <div className="flex shrink-0 items-center justify-between pb-2">
+      <div className="flex shrink-0 flex-col gap-2 pb-2 sm:flex-row sm:items-center sm:justify-between">
         <div className="flex items-center gap-2">
           <span className="text-muted-foreground text-sm">
             {data.length > 0 && `${data.length}개 항목`}
@@ -1636,19 +1636,19 @@ export const V2Repeater: React.FC<V2RepeaterProps> = ({
         </div>
         <div className="flex gap-2">
           {selectedRows.size > 0 && (
-            <Button variant="destructive" onClick={handleBulkDelete} className="h-8 text-xs sm:h-10 sm:text-sm">
+            <Button variant="destructive" onClick={handleBulkDelete} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
               선택 삭제 ({selectedRows.size})
             </Button>
           )}
-          <Button onClick={handleAddRow} className="h-8 text-xs sm:h-10 sm:text-sm">
+          <Button onClick={handleAddRow} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
             <Plus className="mr-2 h-4 w-4" />
             {isModalMode ? config.modal?.buttonText || "검색" : "추가"}
           </Button>
         </div>
       </div>
 
-      {/* Repeater 테이블 - 남은 공간에서 스크롤 */}
-      <div className="min-h-0 flex-1">
+      {/* Repeater 테이블 - 남은 공간에서 스크롤, 모바일 가로 스크롤 */}
+      <div className="min-h-0 flex-1 overflow-x-auto">
         <RepeaterTable
           columns={repeaterColumns}
           data={data}
diff --git a/frontend/components/v2/V2Select.tsx b/frontend/components/v2/V2Select.tsx
index 538d33be..959abe05 100644
--- a/frontend/components/v2/V2Select.tsx
+++ b/frontend/components/v2/V2Select.tsx
@@ -1,8 +1,10 @@
 "use client";
 
+import { getAdaptiveLabelColor } from "@/lib/utils/darkModeColor";
+
 /**
  * V2Select
- * 
+ *
  * 통합 선택 컴포넌트
  * - dropdown: 드롭다운 선택
  * - radio: 라디오 버튼 그룹
@@ -12,7 +14,7 @@
  * - swap: 스왑 선택 (좌우 이동)
  */
 
-import React, { forwardRef, useCallback, useContext, useEffect, useMemo, useState } from "react";
+import React, { forwardRef, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { Label } from "@/components/ui/label";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { Checkbox } from "@/components/ui/checkbox";
@@ -31,219 +33,269 @@ import V2FormContext from "./V2FormContext";
 /**
  * 드롭다운 선택 컴포넌트
  */
-const DropdownSelect = forwardRef<HTMLButtonElement, {
-  options: SelectOption[];
-  value?: string | string[];
-  onChange?: (value: string | string[]) => void;
-  placeholder?: string;
-  searchable?: boolean;
-  multiple?: boolean;
-  maxSelect?: number;
-  allowClear?: boolean;
-  disabled?: boolean;
-  className?: string;
-  style?: React.CSSProperties;
-}>(({ 
-  options, 
-  value, 
-  onChange, 
-  placeholder = "선택", 
-  searchable, 
-  multiple, 
-  maxSelect,
-  allowClear = true,
-  disabled, 
-  className,
-  style,
-}, ref) => {
-  const [open, setOpen] = useState(false);
+const DropdownSelect = forwardRef<
+  HTMLButtonElement,
+  {
+    options: SelectOption[];
+    value?: string | string[];
+    onChange?: (value: string | string[]) => void;
+    placeholder?: string;
+    searchable?: boolean;
+    multiple?: boolean;
+    maxSelect?: number;
+    allowClear?: boolean;
+    disabled?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+  }
+>(
+  (
+    {
+      options,
+      value,
+      onChange,
+      placeholder = "선택",
+      searchable,
+      multiple,
+      maxSelect,
+      allowClear = true,
+      disabled,
+      className,
+      style,
+    },
+    ref,
+  ) => {
+    const [open, setOpen] = useState(false);
+    const textRef = useRef<HTMLSpanElement>(null);
+    const [isTruncated, setIsTruncated] = useState(false);
+    const [hoverTooltip, setHoverTooltip] = useState(false);
 
-  // 현재 선택된 값 존재 여부
-  const hasValue = useMemo(() => {
-    if (!value) return false;
-    if (Array.isArray(value)) return value.length > 0;
-    return value !== "";
-  }, [value]);
+    // 현재 선택된 값 존재 여부
+    const hasValue = useMemo(() => {
+      if (!value) return false;
+      if (Array.isArray(value)) return value.length > 0;
+      return value !== "";
+    }, [value]);
 
-  // 단일 선택 + 검색 불가능 → 기본 Select 사용
-  if (!searchable && !multiple) {
-    return (
-      <div className="relative w-full group">
-        <Select
-          value={typeof value === "string" ? value : value?.[0] ?? ""}
-          onValueChange={(v) => onChange?.(v)}
-          disabled={disabled}
-        >
-          {/* SelectTrigger에 style로 직접 height 전달 (Radix Select.Root는 DOM 없어서 h-full 체인 끊김) */}
-          <SelectTrigger ref={ref} className={cn("w-full", allowClear && hasValue ? "pr-8" : "", className)} style={style}>
-            <SelectValue placeholder={placeholder} />
-          </SelectTrigger>
-          <SelectContent>
-            {options
-              .filter((option) => option.value != null && option.value !== "")
-              .map((option) => (
-                <SelectItem key={option.value} value={option.value}>
-                  {option.label}
-                </SelectItem>
-              ))}
-          </SelectContent>
-        </Select>
-        {/* 초기화 버튼 (값이 있을 때만 표시) */}
-        {allowClear && hasValue && !disabled && (
-          <span
-            role="button"
-            tabIndex={-1}
-            className="absolute right-7 top-1/2 -translate-y-1/2 z-10 cursor-pointer"
-            onClick={(e) => {
-              e.stopPropagation();
-              e.preventDefault();
-              onChange?.("");
-            }}
-            onPointerDown={(e) => {
-              e.stopPropagation();
-              e.preventDefault();
-            }}
+    // 단일 선택 + 검색 불가능 → 기본 Select 사용
+    if (!searchable && !multiple) {
+      return (
+        <div className="group relative w-full">
+          <Select
+            value={typeof value === "string" ? value : (value?.[0] ?? "")}
+            onValueChange={(v) => onChange?.(v)}
+            disabled={disabled}
           >
-            <X className="h-3.5 w-3.5 opacity-40 hover:opacity-100 transition-opacity" />
-          </span>
+            {/* SelectTrigger에 style로 직접 height 전달 (Radix Select.Root는 DOM 없어서 h-full 체인 끊김) */}
+            <SelectTrigger
+              ref={ref}
+              className={cn("w-full", allowClear && hasValue ? "pr-8" : "", className)}
+              style={style}
+            >
+              <SelectValue placeholder={placeholder} />
+            </SelectTrigger>
+            <SelectContent>
+              {options
+                .filter((option) => option.value != null && option.value !== "")
+                .map((option) => (
+                  <SelectItem key={option.value} value={option.value}>
+                    {option.label}
+                  </SelectItem>
+                ))}
+            </SelectContent>
+          </Select>
+          {/* 초기화 버튼 (값이 있을 때만 표시) */}
+          {allowClear && hasValue && !disabled && (
+            <span
+              role="button"
+              tabIndex={-1}
+              className="absolute top-1/2 right-7 z-10 -translate-y-1/2 cursor-pointer"
+              onClick={(e) => {
+                e.stopPropagation();
+                e.preventDefault();
+                onChange?.("");
+              }}
+              onPointerDown={(e) => {
+                e.stopPropagation();
+                e.preventDefault();
+              }}
+            >
+              <X className="h-3.5 w-3.5 opacity-40 transition-opacity hover:opacity-100" />
+            </span>
+          )}
+        </div>
+      );
+    }
+
+    // 검색 가능 또는 다중 선택 → Combobox 사용
+    // null/undefined value를 가진 옵션 필터링 (cmdk가 value={null}일 때 크래시 발생)
+    const safeOptions = useMemo(() => options.filter((o) => o.value != null && o.value !== ""), [options]);
+
+    const selectedValues = useMemo(() => {
+      if (!value) return [];
+      return Array.isArray(value) ? value : [value];
+    }, [value]);
+
+    const selectedLabels = useMemo(() => {
+      return safeOptions
+        .filter((o) => selectedValues.includes(o.value))
+        .map((o) => o.label)
+        .filter(Boolean) as string[];
+    }, [selectedValues, safeOptions]);
+
+    useEffect(() => {
+      const el = textRef.current;
+      if (el) {
+        setIsTruncated(el.scrollWidth > el.clientWidth);
+      }
+    }, [selectedLabels]);
+
+    const handleSelect = useCallback(
+      (selectedValue: string) => {
+        if (multiple) {
+          const newValues = selectedValues.includes(selectedValue)
+            ? selectedValues.filter((v) => v !== selectedValue)
+            : maxSelect && selectedValues.length >= maxSelect
+              ? selectedValues
+              : [...selectedValues, selectedValue];
+          onChange?.(newValues);
+        } else {
+          onChange?.(selectedValue);
+          setOpen(false);
+        }
+      },
+      [multiple, selectedValues, maxSelect, onChange],
+    );
+
+    const handleClear = useCallback(
+      (e: React.MouseEvent) => {
+        e.stopPropagation();
+        onChange?.(multiple ? [] : "");
+      },
+      [multiple, onChange],
+    );
+
+    const displayText =
+      selectedLabels.length > 0 ? (multiple ? selectedLabels.join(", ") : selectedLabels[0]) : placeholder;
+    const isPlaceholder = selectedLabels.length === 0;
+
+    return (
+      <div
+        className="relative w-full"
+        onMouseEnter={() => {
+          if (isTruncated && multiple) setHoverTooltip(true);
+        }}
+        onMouseLeave={() => setHoverTooltip(false)}
+      >
+        <Popover
+          open={open}
+          onOpenChange={(isOpen) => {
+            setOpen(isOpen);
+            if (isOpen) setHoverTooltip(false);
+          }}
+        >
+          <PopoverTrigger asChild>
+            <Button
+              ref={ref}
+              variant="outline"
+              role="combobox"
+              aria-expanded={open}
+              disabled={disabled}
+              className={cn(
+                "w-full justify-between font-normal",
+                "bg-transparent hover:bg-transparent",
+                "border-input shadow-xs",
+                "h-6 px-2 py-0 text-sm",
+                className,
+              )}
+              style={style}
+            >
+              <span
+                ref={textRef}
+                className="flex-1 truncate text-left"
+                {...(isPlaceholder ? { "data-placeholder": placeholder } : {})}
+              >
+                {displayText}
+              </span>
+              <div className="ml-2 flex items-center gap-1">
+                {allowClear && selectedValues.length > 0 && (
+                  <span
+                    role="button"
+                    tabIndex={-1}
+                    onClick={handleClear}
+                    onPointerDown={(e) => {
+                      e.stopPropagation();
+                      e.preventDefault();
+                    }}
+                  >
+                    <X className="h-4 w-4 opacity-50 hover:opacity-100" />
+                  </span>
+                )}
+                <ChevronsUpDown className="h-4 w-4 shrink-0 opacity-50" />
+              </div>
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
+            <Command
+              filter={(itemValue, search) => {
+                if (!search) return 1;
+                const option = safeOptions.find((o) => o.value === itemValue);
+                const label = (option?.label || option?.value || "").toLowerCase();
+                if (label.includes(search.toLowerCase())) return 1;
+                return 0;
+              }}
+            >
+              {searchable && <CommandInput placeholder="검색..." className="h-9" />}
+              <CommandList>
+                <CommandEmpty>검색 결과가 없습니다.</CommandEmpty>
+                <CommandGroup>
+                  {safeOptions.map((option) => {
+                    const displayLabel = option.label || option.value || "(빈 값)";
+                    return (
+                      <CommandItem key={option.value} value={option.value} onSelect={() => handleSelect(option.value)}>
+                        <Check
+                          className={cn(
+                            "mr-2 h-4 w-4",
+                            selectedValues.includes(option.value) ? "opacity-100" : "opacity-0",
+                          )}
+                        />
+                        {displayLabel}
+                      </CommandItem>
+                    );
+                  })}
+                </CommandGroup>
+              </CommandList>
+            </Command>
+          </PopoverContent>
+        </Popover>
+        {hoverTooltip && !open && (
+          <div className="bg-popover animate-in fade-in-0 zoom-in-95 absolute bottom-full left-0 z-50 mb-1 rounded-md border px-3 py-1.5 shadow-md">
+            <div className="space-y-0.5 text-xs">
+              {selectedLabels.map((label, i) => (
+                <div key={i}>{label}</div>
+              ))}
+            </div>
+          </div>
         )}
       </div>
     );
-  }
-
-  // 검색 가능 또는 다중 선택 → Combobox 사용
-  // null/undefined value를 가진 옵션 필터링 (cmdk가 value={null}일 때 크래시 발생)
-  const safeOptions = useMemo(() => 
-    options.filter((o) => o.value != null && o.value !== ""),
-    [options]
-  );
-
-  const selectedValues = useMemo(() => {
-    if (!value) return [];
-    return Array.isArray(value) ? value : [value];
-  }, [value]);
-
-  const selectedLabels = useMemo(() => {
-    return selectedValues
-      .map((v) => safeOptions.find((o) => o.value === v)?.label)
-      .filter(Boolean) as string[];
-  }, [selectedValues, safeOptions]);
-
-  const handleSelect = useCallback((selectedValue: string) => {
-    if (multiple) {
-      const newValues = selectedValues.includes(selectedValue)
-        ? selectedValues.filter((v) => v !== selectedValue)
-        : maxSelect && selectedValues.length >= maxSelect
-          ? selectedValues
-          : [...selectedValues, selectedValue];
-      onChange?.(newValues);
-    } else {
-      onChange?.(selectedValue);
-      setOpen(false);
-    }
-  }, [multiple, selectedValues, maxSelect, onChange]);
-
-  const handleClear = useCallback((e: React.MouseEvent) => {
-    e.stopPropagation();
-    onChange?.(multiple ? [] : "");
-  }, [multiple, onChange]);
-
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        {/* Button에 style로 직접 height 전달 (Popover도 DOM 체인 끊김) */}
-        <Button
-          ref={ref}
-          variant="outline"
-          role="combobox"
-          aria-expanded={open}
-          disabled={disabled}
-          className={cn(
-            "w-full justify-between font-normal",
-            "bg-transparent hover:bg-transparent", // 표준 Select와 동일한 투명 배경
-            "border-input shadow-xs", // 표준 Select와 동일한 테두리
-            "h-6 px-2 py-0 text-sm", // 표준 Select xs와 동일한 높이
-            className,
-          )}
-          style={style}
-        >
-          <span className="truncate flex-1 text-left">
-            {selectedLabels.length > 0
-              ? multiple 
-                ? `${selectedLabels.length}개 선택됨`
-                : selectedLabels[0]
-              : placeholder}
-          </span>
-          <div className="flex items-center gap-1 ml-2">
-            {allowClear && selectedValues.length > 0 && (
-              <span
-                role="button"
-                tabIndex={-1}
-                onClick={handleClear}
-                onPointerDown={(e) => {
-                  // Radix Popover가 onPointerDown으로 팝오버를 여는 것을 방지
-                  e.stopPropagation();
-                  e.preventDefault();
-                }}
-              >
-                <X className="h-4 w-4 opacity-50 hover:opacity-100" />
-              </span>
-            )}
-            <ChevronsUpDown className="h-4 w-4 shrink-0 opacity-50" />
-          </div>
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
-        <Command
-          filter={(itemValue, search) => {
-            if (!search) return 1;
-            const option = safeOptions.find((o) => o.value === itemValue);
-            const label = (option?.label || option?.value || "").toLowerCase();
-            if (label.includes(search.toLowerCase())) return 1;
-            return 0;
-          }}
-        >
-          {searchable && <CommandInput placeholder="검색..." className="h-9" />}
-          <CommandList>
-            <CommandEmpty>검색 결과가 없습니다.</CommandEmpty>
-            <CommandGroup>
-              {safeOptions.map((option) => {
-                const displayLabel = option.label || option.value || "(빈 값)";
-                return (
-                  <CommandItem
-                    key={option.value}
-                    value={option.value}
-                    onSelect={() => handleSelect(option.value)}
-                  >
-                    <Check
-                      className={cn(
-                        "mr-2 h-4 w-4",
-                        selectedValues.includes(option.value) ? "opacity-100" : "opacity-0"
-                      )}
-                    />
-                    {displayLabel}
-                  </CommandItem>
-                );
-              })}
-            </CommandGroup>
-          </CommandList>
-        </Command>
-      </PopoverContent>
-    </Popover>
-  );
-});
+  },
+);
 DropdownSelect.displayName = "DropdownSelect";
 
 /**
  * 라디오 선택 컴포넌트
  */
-const RadioSelect = forwardRef<HTMLDivElement, {
-  options: SelectOption[];
-  value?: string;
-  onChange?: (value: string) => void;
-  disabled?: boolean;
-  className?: string;
-}>(({ options, value, onChange, disabled, className }, ref) => {
+const RadioSelect = forwardRef<
+  HTMLDivElement,
+  {
+    options: SelectOption[];
+    value?: string;
+    onChange?: (value: string) => void;
+    disabled?: boolean;
+    className?: string;
+  }
+>(({ options, value, onChange, disabled, className }, ref) => {
   return (
     <RadioGroup
       ref={ref}
@@ -255,7 +307,7 @@ const RadioSelect = forwardRef<HTMLDivElement, {
       {options.map((option) => (
         <div key={option.value} className="flex items-center space-x-2">
           <RadioGroupItem value={option.value} id={`radio-${option.value}`} />
-          <Label htmlFor={`radio-${option.value}`} className="text-sm cursor-pointer">
+          <Label htmlFor={`radio-${option.value}`} className="cursor-pointer text-sm">
             {option.label}
           </Label>
         </div>
@@ -268,22 +320,28 @@ RadioSelect.displayName = "RadioSelect";
 /**
  * 체크박스 선택 컴포넌트
  */
-const CheckSelect = forwardRef<HTMLDivElement, {
-  options: SelectOption[];
-  value?: string[];
-  onChange?: (value: string[]) => void;
-  maxSelect?: number;
-  disabled?: boolean;
-  className?: string;
-}>(({ options, value = [], onChange, maxSelect, disabled, className }, ref) => {
-  const handleChange = useCallback((optionValue: string, checked: boolean) => {
-    if (checked) {
-      if (maxSelect && value.length >= maxSelect) return;
-      onChange?.([...value, optionValue]);
-    } else {
-      onChange?.(value.filter((v) => v !== optionValue));
-    }
-  }, [value, maxSelect, onChange]);
+const CheckSelect = forwardRef<
+  HTMLDivElement,
+  {
+    options: SelectOption[];
+    value?: string[];
+    onChange?: (value: string[]) => void;
+    maxSelect?: number;
+    disabled?: boolean;
+    className?: string;
+  }
+>(({ options, value = [], onChange, maxSelect, disabled, className }, ref) => {
+  const handleChange = useCallback(
+    (optionValue: string, checked: boolean) => {
+      if (checked) {
+        if (maxSelect && value.length >= maxSelect) return;
+        onChange?.([...value, optionValue]);
+      } else {
+        onChange?.(value.filter((v) => v !== optionValue));
+      }
+    },
+    [value, maxSelect, onChange],
+  );
 
   return (
     <div ref={ref} className={cn("flex flex-wrap gap-4", className)}>
@@ -295,7 +353,7 @@ const CheckSelect = forwardRef<HTMLDivElement, {
             onCheckedChange={(checked) => handleChange(option.value, checked as boolean)}
             disabled={disabled || (maxSelect && value.length >= maxSelect && !value.includes(option.value))}
           />
-          <Label htmlFor={`check-${option.value}`} className="text-sm cursor-pointer">
+          <Label htmlFor={`check-${option.value}`} className="cursor-pointer text-sm">
             {option.label}
           </Label>
         </div>
@@ -308,23 +366,29 @@ CheckSelect.displayName = "CheckSelect";
 /**
  * 태그 선택 컴포넌트
  */
-const TagSelect = forwardRef<HTMLDivElement, {
-  options: SelectOption[];
-  value?: string[];
-  onChange?: (value: string[]) => void;
-  maxSelect?: number;
-  disabled?: boolean;
-  className?: string;
-}>(({ options, value = [], onChange, maxSelect, disabled, className }, ref) => {
-  const handleToggle = useCallback((optionValue: string) => {
-    const isSelected = value.includes(optionValue);
-    if (isSelected) {
-      onChange?.(value.filter((v) => v !== optionValue));
-    } else {
-      if (maxSelect && value.length >= maxSelect) return;
-      onChange?.([...value, optionValue]);
-    }
-  }, [value, maxSelect, onChange]);
+const TagSelect = forwardRef<
+  HTMLDivElement,
+  {
+    options: SelectOption[];
+    value?: string[];
+    onChange?: (value: string[]) => void;
+    maxSelect?: number;
+    disabled?: boolean;
+    className?: string;
+  }
+>(({ options, value = [], onChange, maxSelect, disabled, className }, ref) => {
+  const handleToggle = useCallback(
+    (optionValue: string) => {
+      const isSelected = value.includes(optionValue);
+      if (isSelected) {
+        onChange?.(value.filter((v) => v !== optionValue));
+      } else {
+        if (maxSelect && value.length >= maxSelect) return;
+        onChange?.([...value, optionValue]);
+      }
+    },
+    [value, maxSelect, onChange],
+  );
 
   return (
     <div ref={ref} className={cn("flex flex-wrap gap-2", className)}>
@@ -334,10 +398,7 @@ const TagSelect = forwardRef<HTMLDivElement, {
           <Badge
             key={option.value}
             variant={isSelected ? "default" : "outline"}
-            className={cn(
-              "cursor-pointer transition-colors",
-              disabled && "opacity-50 cursor-not-allowed"
-            )}
+            className={cn("cursor-pointer transition-colors", disabled && "cursor-not-allowed opacity-50")}
             onClick={() => !disabled && handleToggle(option.value)}
           >
             {option.label}
@@ -355,40 +416,46 @@ TagSelect.displayName = "TagSelect";
  * - 선택된 값들이 태그(Badge)로 표시됨
  * - 클릭하면 체크박스 목록이 드롭다운으로 열림
  */
-const TagboxSelect = forwardRef<HTMLDivElement, {
-  options: SelectOption[];
-  value?: string[];
-  onChange?: (value: string[]) => void;
-  placeholder?: string;
-  maxSelect?: number;
-  disabled?: boolean;
-  className?: string;
-  style?: React.CSSProperties;
-}>(({ options, value = [], onChange, placeholder = "선택하세요", maxSelect, disabled, className, style }, ref) => {
+const TagboxSelect = forwardRef<
+  HTMLDivElement,
+  {
+    options: SelectOption[];
+    value?: string[];
+    onChange?: (value: string[]) => void;
+    placeholder?: string;
+    maxSelect?: number;
+    disabled?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+  }
+>(({ options, value = [], onChange, placeholder = "선택하세요", maxSelect, disabled, className, style }, ref) => {
   const [open, setOpen] = useState(false);
 
   // 선택된 옵션들의 라벨 가져오기
-  const selectedOptions = useMemo(() => 
-    options.filter((o) => value.includes(o.value)),
-    [options, value]
-  );
+  const selectedOptions = useMemo(() => options.filter((o) => value.includes(o.value)), [options, value]);
 
   // 체크박스 토글 핸들러
-  const handleToggle = useCallback((optionValue: string) => {
-    const isSelected = value.includes(optionValue);
-    if (isSelected) {
-      onChange?.(value.filter((v) => v !== optionValue));
-    } else {
-      if (maxSelect && value.length >= maxSelect) return;
-      onChange?.([...value, optionValue]);
-    }
-  }, [value, maxSelect, onChange]);
+  const handleToggle = useCallback(
+    (optionValue: string) => {
+      const isSelected = value.includes(optionValue);
+      if (isSelected) {
+        onChange?.(value.filter((v) => v !== optionValue));
+      } else {
+        if (maxSelect && value.length >= maxSelect) return;
+        onChange?.([...value, optionValue]);
+      }
+    },
+    [value, maxSelect, onChange],
+  );
 
   // 태그 제거 핸들러
-  const handleRemove = useCallback((e: React.MouseEvent, optionValue: string) => {
-    e.stopPropagation();
-    onChange?.(value.filter((v) => v !== optionValue));
-  }, [value, onChange]);
+  const handleRemove = useCallback(
+    (e: React.MouseEvent, optionValue: string) => {
+      e.stopPropagation();
+      onChange?.(value.filter((v) => v !== optionValue));
+    },
+    [value, onChange],
+  );
 
   // 🔧 높이 처리: style.height가 있으면 minHeight로 사용 (기본 40px 보장)
   const triggerStyle: React.CSSProperties = {
@@ -403,23 +470,19 @@ const TagboxSelect = forwardRef<HTMLDivElement, {
         <PopoverTrigger asChild>
           <div
             className={cn(
-              "flex w-full max-w-full flex-wrap items-center gap-1.5 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background cursor-pointer overflow-hidden",
-              "hover:border-primary/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-              disabled && "opacity-50 cursor-not-allowed"
+              "border-input bg-background ring-offset-background flex w-full max-w-full cursor-pointer flex-wrap items-center gap-1.5 overflow-hidden rounded-md border px-3 py-2 text-sm",
+              "hover:border-primary/50 focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
+              disabled && "cursor-not-allowed opacity-50",
             )}
             style={triggerStyle}
           >
             {selectedOptions.length > 0 ? (
               <>
                 {selectedOptions.map((option) => (
-                  <Badge
-                    key={option.value}
-                    variant="secondary"
-                    className="flex items-center gap-1 px-2 py-0.5"
-                  >
+                  <Badge key={option.value} variant="secondary" className="flex items-center gap-1 px-2 py-0.5">
                     {option.label}
                     <X
-                      className="h-3 w-3 cursor-pointer hover:text-destructive"
+                      className="hover:text-destructive h-3 w-3 cursor-pointer"
                       onClick={(e) => !disabled && handleRemove(e, option.value)}
                     />
                   </Badge>
@@ -431,11 +494,7 @@ const TagboxSelect = forwardRef<HTMLDivElement, {
             <ChevronsUpDown className="ml-auto h-4 w-4 shrink-0 opacity-50" />
           </div>
         </PopoverTrigger>
-        <PopoverContent 
-          className="p-0" 
-          style={{ width: "var(--radix-popover-trigger-width)" }} 
-          align="start"
-        >
+        <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
           <div className="max-h-[300px] overflow-auto p-2">
             {options.map((option) => {
               const isSelected = value.includes(option.value);
@@ -443,25 +502,19 @@ const TagboxSelect = forwardRef<HTMLDivElement, {
                 <div
                   key={option.value}
                   className={cn(
-                    "flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm cursor-pointer",
+                    "flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm",
                     "hover:bg-accent hover:text-accent-foreground",
-                    isSelected && "bg-accent/50"
+                    isSelected && "bg-accent/50",
                   )}
                   onClick={() => !disabled && handleToggle(option.value)}
                 >
-                  <Checkbox
-                    checked={isSelected}
-                    disabled={disabled}
-                    className="pointer-events-none"
-                  />
+                  <Checkbox checked={isSelected} disabled={disabled} className="pointer-events-none" />
                   <span>{option.label}</span>
                 </div>
               );
             })}
             {options.length === 0 && (
-              <div className="py-2 text-center text-sm text-muted-foreground">
-                옵션이 없습니다
-              </div>
+              <div className="text-muted-foreground py-2 text-center text-sm">옵션이 없습니다</div>
             )}
           </div>
         </PopoverContent>
@@ -474,17 +527,24 @@ TagboxSelect.displayName = "TagboxSelect";
 /**
  * 토글 선택 컴포넌트 (Boolean용)
  */
-const ToggleSelect = forwardRef<HTMLDivElement, {
-  options: SelectOption[];
-  value?: string;
-  onChange?: (value: string) => void;
-  disabled?: boolean;
-  className?: string;
-}>(({ options, value, onChange, disabled, className }, ref) => {
+const ToggleSelect = forwardRef<
+  HTMLDivElement,
+  {
+    options: SelectOption[];
+    value?: string;
+    onChange?: (value: string) => void;
+    disabled?: boolean;
+    className?: string;
+  }
+>(({ options, value, onChange, disabled, className }, ref) => {
   // 토글은 2개 옵션만 지원
-  const [offOption, onOption] = options.length >= 2 
-    ? [options[0], options[1]] 
-    : [{ value: "false", label: "아니오" }, { value: "true", label: "예" }];
+  const [offOption, onOption] =
+    options.length >= 2
+      ? [options[0], options[1]]
+      : [
+          { value: "false", label: "아니오" },
+          { value: "true", label: "예" },
+        ];
 
   const isOn = value === onOption.value;
 
@@ -505,32 +565,35 @@ ToggleSelect.displayName = "ToggleSelect";
 /**
  * 스왑 선택 컴포넌트 (좌우 이동 방식)
  */
-const SwapSelect = forwardRef<HTMLDivElement, {
-  options: SelectOption[];
-  value?: string[];
-  onChange?: (value: string[]) => void;
-  maxSelect?: number;
-  disabled?: boolean;
-  className?: string;
-}>(({ options, value = [], onChange, disabled, className }, ref) => {
-  const available = useMemo(() => 
-    options.filter((o) => !value.includes(o.value)),
-    [options, value]
+const SwapSelect = forwardRef<
+  HTMLDivElement,
+  {
+    options: SelectOption[];
+    value?: string[];
+    onChange?: (value: string[]) => void;
+    maxSelect?: number;
+    disabled?: boolean;
+    className?: string;
+  }
+>(({ options, value = [], onChange, disabled, className }, ref) => {
+  const available = useMemo(() => options.filter((o) => !value.includes(o.value)), [options, value]);
+
+  const selected = useMemo(() => options.filter((o) => value.includes(o.value)), [options, value]);
+
+  const handleMoveRight = useCallback(
+    (optionValue: string) => {
+      onChange?.([...value, optionValue]);
+    },
+    [value, onChange],
   );
 
-  const selected = useMemo(() => 
-    options.filter((o) => value.includes(o.value)),
-    [options, value]
+  const handleMoveLeft = useCallback(
+    (optionValue: string) => {
+      onChange?.(value.filter((v) => v !== optionValue));
+    },
+    [value, onChange],
   );
 
-  const handleMoveRight = useCallback((optionValue: string) => {
-    onChange?.([...value, optionValue]);
-  }, [value, onChange]);
-
-  const handleMoveLeft = useCallback((optionValue: string) => {
-    onChange?.(value.filter((v) => v !== optionValue));
-  }, [value, onChange]);
-
   const handleMoveAllRight = useCallback(() => {
     onChange?.(options.map((o) => o.value));
   }, [options, onChange]);
@@ -540,43 +603,41 @@ const SwapSelect = forwardRef<HTMLDivElement, {
   }, [onChange]);
 
   return (
-    <div ref={ref} className={cn("flex gap-2 items-stretch", className)}>
+    <div ref={ref} className={cn("flex items-stretch gap-2", className)}>
       {/* 왼쪽: 선택 가능 */}
-      <div className="flex-1 border rounded-md flex flex-col min-h-0">
-        <div className="p-2 bg-muted text-xs font-medium border-b shrink-0">선택 가능</div>
-        <div className="p-2 space-y-1 flex-1 overflow-y-auto min-h-0">
+      <div className="flex min-h-0 flex-1 flex-col rounded-md border">
+        <div className="bg-muted shrink-0 border-b p-2 text-xs font-medium">선택 가능</div>
+        <div className="min-h-0 flex-1 space-y-1 overflow-y-auto p-2">
           {available.map((option) => (
             <div
               key={option.value}
               className={cn(
-                "p-2 text-sm rounded cursor-pointer hover:bg-accent",
-                disabled && "opacity-50 cursor-not-allowed"
+                "hover:bg-accent cursor-pointer rounded p-2 text-sm",
+                disabled && "cursor-not-allowed opacity-50",
               )}
               onClick={() => !disabled && handleMoveRight(option.value)}
             >
               {option.label}
             </div>
           ))}
-          {available.length === 0 && (
-            <div className="text-xs text-muted-foreground p-2">항목 없음</div>
-          )}
+          {available.length === 0 && <div className="text-muted-foreground p-2 text-xs">항목 없음</div>}
         </div>
       </div>
 
       {/* 중앙: 이동 버튼 */}
-      <div className="flex flex-col gap-1 justify-center">
-        <Button 
-          variant="outline" 
-          size="icon" 
+      <div className="flex flex-col justify-center gap-1">
+        <Button
+          variant="outline"
+          size="icon"
           className="h-8 w-8"
           onClick={handleMoveAllRight}
           disabled={disabled || available.length === 0}
         >
           <ArrowLeftRight className="h-4 w-4 rotate-180" />
         </Button>
-        <Button 
-          variant="outline" 
-          size="icon" 
+        <Button
+          variant="outline"
+          size="icon"
           className="h-8 w-8"
           onClick={handleMoveAllLeft}
           disabled={disabled || selected.length === 0}
@@ -586,15 +647,15 @@ const SwapSelect = forwardRef<HTMLDivElement, {
       </div>
 
       {/* 오른쪽: 선택됨 */}
-      <div className="flex-1 border rounded-md flex flex-col min-h-0">
-        <div className="p-2 bg-primary/10 text-xs font-medium border-b shrink-0">선택됨</div>
-        <div className="p-2 space-y-1 flex-1 overflow-y-auto min-h-0">
+      <div className="flex min-h-0 flex-1 flex-col rounded-md border">
+        <div className="bg-primary/10 shrink-0 border-b p-2 text-xs font-medium">선택됨</div>
+        <div className="min-h-0 flex-1 space-y-1 overflow-y-auto p-2">
           {selected.map((option) => (
             <div
               key={option.value}
               className={cn(
-                "p-2 text-sm rounded cursor-pointer hover:bg-accent flex justify-between items-center",
-                disabled && "opacity-50 cursor-not-allowed"
+                "hover:bg-accent flex cursor-pointer items-center justify-between rounded p-2 text-sm",
+                disabled && "cursor-not-allowed opacity-50",
               )}
               onClick={() => !disabled && handleMoveLeft(option.value)}
             >
@@ -602,9 +663,7 @@ const SwapSelect = forwardRef<HTMLDivElement, {
               <X className="h-3 w-3 opacity-50" />
             </div>
           ))}
-          {selected.length === 0 && (
-            <div className="text-xs text-muted-foreground p-2">선택 없음</div>
-          )}
+          {selected.length === 0 && <div className="text-muted-foreground p-2 text-xs">선택 없음</div>}
         </div>
       </div>
     </div>
@@ -615,352 +674,370 @@ SwapSelect.displayName = "SwapSelect";
 /**
  * 메인 V2Select 컴포넌트
  */
-export const V2Select = forwardRef<HTMLDivElement, V2SelectProps>(
-  (props, ref) => {
-    const {
-      id,
-      label,
-      required,
-      readonly,
-      disabled,
-      style,
-      size,
-      config: configProp,
-      value,
-      onChange,
-      onFormDataChange,
-      tableName,
-      columnName,
-      isDesignMode, // 🔧 디자인 모드 (클릭 방지)
-    } = props;
+export const V2Select = forwardRef<HTMLDivElement, V2SelectProps>((props, ref) => {
+  const {
+    id,
+    label,
+    required,
+    readonly,
+    disabled,
+    style,
+    size,
+    config: configProp,
+    value,
+    onChange,
+    onFormDataChange,
+    tableName,
+    columnName,
+    isDesignMode, // 🔧 디자인 모드 (클릭 방지)
+  } = props;
 
-    // config가 없으면 기본값 사용
-    const config = configProp || { mode: "dropdown" as const, source: "static" as const, options: [] };
+  // config가 없으면 기본값 사용
+  const config = configProp || { mode: "dropdown" as const, source: "static" as const, options: [] };
 
-    // 엔티티 자동 채움: 같은 폼의 다른 컴포넌트 중 참조 테이블 컬럼을 자동 감지
-    const allComponents = (props as any).allComponents as any[] | undefined;
+  // 엔티티 자동 채움: 같은 폼의 다른 컴포넌트 중 참조 테이블 컬럼을 자동 감지
+  const allComponents = (props as any).allComponents as any[] | undefined;
 
-    const [options, setOptions] = useState<SelectOption[]>(config.options || []);
-    const [loading, setLoading] = useState(false);
-    const [optionsLoaded, setOptionsLoaded] = useState(false);
+  const [options, setOptions] = useState<SelectOption[]>(config.options || []);
+  const [loading, setLoading] = useState(false);
+  const [optionsLoaded, setOptionsLoaded] = useState(false);
 
-    // 옵션 로딩에 필요한 값들만 추출 (객체 참조 대신 원시값 사용)
-    const rawSource = config.source;
-    const categoryTable = (config as any).categoryTable;
-    const categoryColumn = (config as any).categoryColumn;
-    
-    // category 소스 유지 (category_values 테이블에서 로드)
-    const source = rawSource;
-    const codeGroup = config.codeGroup;
-    
-    const entityTable = config.entityTable;
-    const entityValueColumn = config.entityValueColumn || config.entityValueField;
-    const entityLabelColumn = config.entityLabelColumn || config.entityLabelField;
-    const table = config.table;
-    const valueColumn = config.valueColumn;
-    const labelColumn = config.labelColumn;
-    const apiEndpoint = config.apiEndpoint;
-    const staticOptions = config.options;
-    const configFilters = config.filters;
-    
-    // 계층 코드 연쇄 선택 관련
-    const hierarchical = config.hierarchical;
-    const parentField = config.parentField;
-    
-    // FormContext에서 부모 필드 값 가져오기 (Context가 없으면 null)
-    const formContext = useContext(V2FormContext);
+  // 옵션 로딩에 필요한 값들만 추출 (객체 참조 대신 원시값 사용)
+  const rawSource = config.source;
+  const categoryTable = (config as any).categoryTable;
+  const categoryColumn = (config as any).categoryColumn;
 
-    /**
-     * 필터 조건을 API 전달용 JSON으로 변환
-     * field/user 타입은 런타임 값으로 치환
-     */
-    const resolvedFiltersJson = useMemo(() => {
-      if (!configFilters || configFilters.length === 0) return undefined;
+  // category 소스 유지 (category_values 테이블에서 로드)
+  const source = rawSource;
+  const codeGroup = config.codeGroup;
 
-      const resolved: Array<{ column: string; operator: string; value: unknown }> = [];
+  const entityTable = config.entityTable;
+  const entityValueColumn = config.entityValueColumn || config.entityValueField;
+  const entityLabelColumn = config.entityLabelColumn || config.entityLabelField;
+  const table = config.table;
+  const valueColumn = config.valueColumn;
+  const labelColumn = config.labelColumn;
+  const apiEndpoint = config.apiEndpoint;
+  const staticOptions = config.options;
+  const configFilters = config.filters;
 
-      for (const f of configFilters) {
-        const vt = f.valueType || "static";
+  // 계층 코드 연쇄 선택 관련
+  const hierarchical = config.hierarchical;
+  const parentField = config.parentField;
 
-        // isNull/isNotNull은 값 불필요
-        if (f.operator === "isNull" || f.operator === "isNotNull") {
-          resolved.push({ column: f.column, operator: f.operator, value: null });
-          continue;
+  // FormContext에서 부모 필드 값 가져오기 (Context가 없으면 null)
+  const formContext = useContext(V2FormContext);
+
+  /**
+   * 필터 조건을 API 전달용 JSON으로 변환
+   * field/user 타입은 런타임 값으로 치환
+   */
+  const resolvedFiltersJson = useMemo(() => {
+    if (!configFilters || configFilters.length === 0) return undefined;
+
+    const resolved: Array<{ column: string; operator: string; value: unknown }> = [];
+
+    for (const f of configFilters) {
+      const vt = f.valueType || "static";
+
+      // isNull/isNotNull은 값 불필요
+      if (f.operator === "isNull" || f.operator === "isNotNull") {
+        resolved.push({ column: f.column, operator: f.operator, value: null });
+        continue;
+      }
+
+      let resolvedValue: unknown = f.value;
+
+      if (vt === "field" && f.fieldRef) {
+        // 다른 폼 필드 참조
+        if (formContext) {
+          resolvedValue = formContext.getValue(f.fieldRef);
+        } else {
+          const fd = (props as any).formData;
+          resolvedValue = fd?.[f.fieldRef];
         }
-
-        let resolvedValue: unknown = f.value;
-
-        if (vt === "field" && f.fieldRef) {
-          // 다른 폼 필드 참조
-          if (formContext) {
-            resolvedValue = formContext.getValue(f.fieldRef);
-          } else {
-            const fd = (props as any).formData;
-            resolvedValue = fd?.[f.fieldRef];
-          }
-          // 참조 필드 값이 비어있으면 이 필터 건너뜀
-          if (resolvedValue === undefined || resolvedValue === null || resolvedValue === "") continue;
-        } else if (vt === "user" && f.userField) {
-          // 로그인 사용자 정보 참조 (props에서 가져옴)
-          const userMap: Record<string, string | undefined> = {
-            companyCode: (props as any).companyCode,
-            userId: (props as any).userId,
-            deptCode: (props as any).deptCode,
-            userName: (props as any).userName,
-          };
-          resolvedValue = userMap[f.userField];
-          if (!resolvedValue) continue;
-        }
-
-        resolved.push({ column: f.column, operator: f.operator, value: resolvedValue });
+        // 참조 필드 값이 비어있으면 이 필터 건너뜀
+        if (resolvedValue === undefined || resolvedValue === null || resolvedValue === "") continue;
+      } else if (vt === "user" && f.userField) {
+        // 로그인 사용자 정보 참조 (props에서 가져옴)
+        const userMap: Record<string, string | undefined> = {
+          companyCode: (props as any).companyCode,
+          userId: (props as any).userId,
+          deptCode: (props as any).deptCode,
+          userName: (props as any).userName,
+        };
+        resolvedValue = userMap[f.userField];
+        if (!resolvedValue) continue;
       }
 
-      return resolved.length > 0 ? JSON.stringify(resolved) : undefined;
-    }, [configFilters, formContext, props]);
-    
-    // 부모 필드의 값 계산
-    const parentValue = useMemo(() => {
-      if (!hierarchical || !parentField) return null;
-      
-      // FormContext가 있으면 거기서 값 가져오기
-      if (formContext) {
-        const val = formContext.getValue(parentField);
-        return val as string | null;
-      }
-      
-      return null;
-    }, [hierarchical, parentField, formContext]);
+      resolved.push({ column: f.column, operator: f.operator, value: resolvedValue });
+    }
 
-    // 데이터 소스에 따른 옵션 로딩 (원시값 의존성만 사용)
-    useEffect(() => {
-      // 계층 구조인 경우 부모 값이 변경되면 다시 로드
-      if (hierarchical && source === "code") {
-        setOptionsLoaded(false);
-      }
-    }, [parentValue, hierarchical, source]);
+    return resolved.length > 0 ? JSON.stringify(resolved) : undefined;
+  }, [configFilters, formContext, props]);
 
-    // 필터 조건이 변경되면 옵션 다시 로드
-    useEffect(() => {
-      if (resolvedFiltersJson !== undefined) {
-        setOptionsLoaded(false);
-      }
-    }, [resolvedFiltersJson]);
+  // 부모 필드의 값 계산
+  const parentValue = useMemo(() => {
+    if (!hierarchical || !parentField) return null;
 
-    useEffect(() => {
-      // 이미 로드된 경우 스킵 (static 제외, 계층 구조 제외)
-      if (optionsLoaded && source !== "static") {
+    // FormContext가 있으면 거기서 값 가져오기
+    if (formContext) {
+      const val = formContext.getValue(parentField);
+      return val as string | null;
+    }
+
+    return null;
+  }, [hierarchical, parentField, formContext]);
+
+  // 데이터 소스에 따른 옵션 로딩 (원시값 의존성만 사용)
+  useEffect(() => {
+    // 계층 구조인 경우 부모 값이 변경되면 다시 로드
+    if (hierarchical && source === "code") {
+      setOptionsLoaded(false);
+    }
+  }, [parentValue, hierarchical, source]);
+
+  // 필터 조건이 변경되면 옵션 다시 로드
+  useEffect(() => {
+    if (resolvedFiltersJson !== undefined) {
+      setOptionsLoaded(false);
+    }
+  }, [resolvedFiltersJson]);
+
+  useEffect(() => {
+    // 이미 로드된 경우 스킵 (static 제외, 계층 구조 제외)
+    if (optionsLoaded && source !== "static") {
+      return;
+    }
+
+    const loadOptions = async () => {
+      if (source === "static") {
+        setOptions(staticOptions || []);
+        setOptionsLoaded(true);
         return;
       }
 
-      const loadOptions = async () => {
-        if (source === "static") {
-          setOptions(staticOptions || []);
-          setOptionsLoaded(true);
-          return;
-        }
+      setLoading(true);
+      try {
+        let fetchedOptions: SelectOption[] = [];
 
-        setLoading(true);
-        try {
-          let fetchedOptions: SelectOption[] = [];
-
-          if (source === "code" && codeGroup) {
-            // 계층 구조 사용 시 자식 코드만 로드
-            if (hierarchical) {
-              const params = new URLSearchParams();
-              if (parentValue) {
-                params.append("parentCodeValue", parentValue);
-              }
-              const queryString = params.toString();
-              const url = `/common-codes/categories/${codeGroup}/children${queryString ? `?${queryString}` : ""}`;
-              const response = await apiClient.get(url);
-              const data = response.data;
-              if (data.success && data.data) {
-                fetchedOptions = data.data.map((item: { value: string; label: string; hasChildren: boolean }) => ({
-                  value: item.value,
-                  label: item.label,
-                }));
-              }
-            } else {
-              // 일반 공통코드에서 로드 (올바른 API 경로: /common-codes/categories/:categoryCode/options)
-              const response = await apiClient.get(`/common-codes/categories/${codeGroup}/options`);
-              const data = response.data;
-              if (data.success && data.data) {
-                fetchedOptions = data.data.map((item: { value: string; label: string }) => ({
-                  value: item.value,
-                  label: item.label,
-                }));
-              }
+        if (source === "code" && codeGroup) {
+          // 계층 구조 사용 시 자식 코드만 로드
+          if (hierarchical) {
+            const params = new URLSearchParams();
+            if (parentValue) {
+              params.append("parentCodeValue", parentValue);
             }
-          } else if (source === "db" && table) {
-            // DB 테이블에서 로드
-            const dbParams: Record<string, any> = {
-              value: valueColumn || "id",
-              label: labelColumn || "name",
-            };
-            if (resolvedFiltersJson) dbParams.filters = resolvedFiltersJson;
-            const response = await apiClient.get(`/entity/${table}/options`, {
-              params: dbParams,
-            });
+            const queryString = params.toString();
+            const url = `/common-codes/categories/${codeGroup}/children${queryString ? `?${queryString}` : ""}`;
+            const response = await apiClient.get(url);
             const data = response.data;
             if (data.success && data.data) {
-              fetchedOptions = data.data;
+              fetchedOptions = data.data.map((item: { value: string; label: string; hasChildren: boolean }) => ({
+                value: item.value,
+                label: item.label,
+              }));
             }
-          } else if (source === "entity" && entityTable) {
-            // 엔티티(참조 테이블)에서 로드
-            const valueCol = entityValueColumn || "id";
-            const labelCol = entityLabelColumn || "name";
-            const entityParams: Record<string, any> = { value: valueCol, label: labelCol };
-            if (resolvedFiltersJson) entityParams.filters = resolvedFiltersJson;
-            const response = await apiClient.get(`/entity/${entityTable}/options`, {
-              params: entityParams,
-            });
+          } else {
+            // 일반 공통코드에서 로드 (올바른 API 경로: /common-codes/categories/:categoryCode/options)
+            const response = await apiClient.get(`/common-codes/categories/${codeGroup}/options`);
             const data = response.data;
             if (data.success && data.data) {
-              fetchedOptions = data.data;
+              fetchedOptions = data.data.map((item: { value: string; label: string }) => ({
+                value: item.value,
+                label: item.label,
+              }));
             }
-          } else if (source === "api" && apiEndpoint) {
-            // 외부 API에서 로드
-            const response = await apiClient.get(apiEndpoint);
+          }
+        } else if (source === "db" && table) {
+          // DB 테이블에서 로드
+          const dbParams: Record<string, any> = {
+            value: valueColumn || "id",
+            label: labelColumn || "name",
+          };
+          if (resolvedFiltersJson) dbParams.filters = resolvedFiltersJson;
+          const response = await apiClient.get(`/entity/${table}/options`, {
+            params: dbParams,
+          });
+          const data = response.data;
+          if (data.success && data.data) {
+            fetchedOptions = data.data;
+          }
+        } else if (source === "entity" && entityTable) {
+          // 엔티티(참조 테이블)에서 로드
+          const valueCol = entityValueColumn || "id";
+          const labelCol = entityLabelColumn || "name";
+          const entityParams: Record<string, any> = { value: valueCol, label: labelCol };
+          if (resolvedFiltersJson) entityParams.filters = resolvedFiltersJson;
+          const response = await apiClient.get(`/entity/${entityTable}/options`, {
+            params: entityParams,
+          });
+          const data = response.data;
+          if (data.success && data.data) {
+            fetchedOptions = data.data;
+          }
+        } else if (source === "api" && apiEndpoint) {
+          // 외부 API에서 로드
+          const response = await apiClient.get(apiEndpoint);
+          const data = response.data;
+          if (Array.isArray(data)) {
+            fetchedOptions = data;
+          }
+        } else if (source === "category") {
+          // 카테고리에서 로드 (category_values 테이블)
+          // tableName, columnName은 props에서 가져옴
+          const catTable = categoryTable || tableName;
+          const catColumn = categoryColumn || columnName;
+
+          if (catTable && catColumn) {
+            const response = await apiClient.get(`/table-categories/${catTable}/${catColumn}/values`);
             const data = response.data;
-            if (Array.isArray(data)) {
-              fetchedOptions = data;
-            }
-          } else if (source === "category") {
-            // 카테고리에서 로드 (category_values 테이블)
-            // tableName, columnName은 props에서 가져옴
-            const catTable = categoryTable || tableName;
-            const catColumn = categoryColumn || columnName;
-            
-            if (catTable && catColumn) {
-              const response = await apiClient.get(`/table-categories/${catTable}/${catColumn}/values`);
-              const data = response.data;
-              if (data.success && data.data) {
-                // 트리 구조를 평탄화하여 옵션으로 변환
-                // 🔧 value로 valueCode를 사용 (커스텀 테이블 저장/조회 호환)
-                const flattenTree = (items: { valueId: number; valueCode: string; valueLabel: string; children?: any[] }[], depth: number = 0): SelectOption[] => {
-                  const result: SelectOption[] = [];
-                  for (const item of items) {
-                    const prefix = depth > 0 ? "  ".repeat(depth) + "└ " : "";
-                    result.push({
-                      value: item.valueCode, // 🔧 valueCode를 value로 사용
-                      label: prefix + item.valueLabel,
-                    });
-                    if (item.children && item.children.length > 0) {
-                      result.push(...flattenTree(item.children, depth + 1));
-                    }
+            if (data.success && data.data) {
+              // 트리 구조를 평탄화하여 옵션으로 변환
+              // 🔧 value로 valueCode를 사용 (커스텀 테이블 저장/조회 호환)
+              const flattenTree = (
+                items: { valueId: number; valueCode: string; valueLabel: string; children?: any[] }[],
+                depth: number = 0,
+              ): SelectOption[] => {
+                const result: SelectOption[] = [];
+                for (const item of items) {
+                  const prefix = depth > 0 ? "  ".repeat(depth) + "└ " : "";
+                  result.push({
+                    value: item.valueCode, // 🔧 valueCode를 value로 사용
+                    label: prefix + item.valueLabel,
+                  });
+                  if (item.children && item.children.length > 0) {
+                    result.push(...flattenTree(item.children, depth + 1));
                   }
-                  return result;
-                };
-                fetchedOptions = flattenTree(data.data);
-              }
-            }
-          } else if (source === "select" || source === "distinct") {
-            // 해당 테이블의 해당 컬럼에서 DISTINCT 값 조회
-            const isValidColumnName = columnName && !columnName.startsWith("comp_");
-            if (tableName && isValidColumnName) {
-              const distinctParams: Record<string, any> = {};
-              if (resolvedFiltersJson) distinctParams.filters = resolvedFiltersJson;
-              const response = await apiClient.get(`/entity/${tableName}/distinct/${columnName}`, {
-                params: distinctParams,
-              });
-              const data = response.data;
-              if (data.success && data.data) {
-                fetchedOptions = data.data.map((item: { value: string; label: string }) => ({
-                  value: String(item.value),
-                  label: String(item.label),
-                }));
-              }
-            } else if (!isValidColumnName) {
-              // columnName이 없거나 유효하지 않으면 빈 옵션
+                }
+                return result;
+              };
+              fetchedOptions = flattenTree(data.data);
             }
           }
-
-          // null/undefined value 필터링 (cmdk 크래시 방지)
-          const sanitized = fetchedOptions.filter(
-            (o) => o.value != null && String(o.value) !== ""
-          ).map((o) => ({ ...o, value: String(o.value), label: o.label || String(o.value) }));
-          setOptions(sanitized);
-          setOptionsLoaded(true);
-        } catch (error) {
-          console.error("옵션 로딩 실패:", error);
-          setOptions([]);
-        } finally {
-          setLoading(false);
-        }
-      };
-
-        loadOptions();
-    }, [source, entityTable, entityValueColumn, entityLabelColumn, codeGroup, table, valueColumn, labelColumn, apiEndpoint, staticOptions, optionsLoaded, hierarchical, parentValue, resolvedFiltersJson]);
-
-    // 레거시 평문값 → 카테고리 코드 자동 정규화 (한글 텍스트로 저장된 데이터 대응)
-    const resolvedValue = useMemo(() => {
-      if (!value || options.length === 0) return value;
-
-      const resolveOne = (v: string): string => {
-        if (options.some(o => o.value === v)) return v;
-        const trimmed = v.trim();
-        const match = options.find(o => {
-          const cleanLabel = o.label.replace(/^[\s└]+/, '').trim();
-          return cleanLabel === trimmed;
-        });
-        return match ? match.value : v;
-      };
-
-      if (Array.isArray(value)) {
-        const resolved = value.map(resolveOne);
-        return resolved.every((v, i) => v === value[i]) ? value : resolved;
-      }
-
-      // 콤마 구분 복합값 처리 (e.g., "구매품,판매품,CAT_xxx")
-      if (typeof value === "string" && value.includes(",")) {
-        const parts = value.split(",");
-        const resolved = parts.map(p => resolveOne(p.trim()));
-        const result = resolved.join(",");
-        return result === value ? value : result;
-      }
-
-      return resolveOne(value);
-    }, [value, options]);
-
-    // 정규화 결과가 원본과 다르면 onChange로 자동 업데이트 (저장 시 코드 변환)
-    useEffect(() => {
-      if (!onChange || options.length === 0 || !value || value === resolvedValue) return;
-      onChange(resolvedValue as string | string[]);
-    }, [resolvedValue]); // eslint-disable-line react-hooks/exhaustive-deps
-
-    // 같은 폼에서 참조 테이블(entityTable) 컬럼을 사용하는 다른 컴포넌트 자동 감지
-    const autoFillTargets = useMemo(() => {
-      if (source !== "entity" || !entityTable || !allComponents) return [];
-
-      const targets: Array<{ sourceField: string; targetColumnName: string }> = [];
-      for (const comp of allComponents) {
-        if (comp.id === id) continue;
-
-        // overrides 구조 지원 (DB에서 로드 시 overrides 안에 데이터가 있음)
-        const ov = (comp as any).overrides || {};
-        const compColumnName = comp.columnName || ov.columnName || comp.componentConfig?.columnName || "";
-
-        // 방법1: entityJoinTable 속성이 있는 경우
-        const joinTable = comp.entityJoinTable || ov.entityJoinTable || comp.componentConfig?.entityJoinTable;
-        const joinColumn = comp.entityJoinColumn || ov.entityJoinColumn || comp.componentConfig?.entityJoinColumn;
-        if (joinTable === entityTable && joinColumn) {
-          targets.push({ sourceField: joinColumn, targetColumnName: compColumnName });
-          continue;
-        }
-
-        // 방법2: columnName이 "테이블명.컬럼명" 형식인 경우 (예: item_info.unit)
-        if (compColumnName.includes(".")) {
-          const [prefix, actualColumn] = compColumnName.split(".");
-          if (prefix === entityTable && actualColumn) {
-            targets.push({ sourceField: actualColumn, targetColumnName: compColumnName });
+        } else if (source === "select" || source === "distinct") {
+          // 해당 테이블의 해당 컬럼에서 DISTINCT 값 조회
+          const isValidColumnName = columnName && !columnName.startsWith("comp_");
+          if (tableName && isValidColumnName) {
+            const distinctParams: Record<string, any> = {};
+            if (resolvedFiltersJson) distinctParams.filters = resolvedFiltersJson;
+            const response = await apiClient.get(`/entity/${tableName}/distinct/${columnName}`, {
+              params: distinctParams,
+            });
+            const data = response.data;
+            if (data.success && data.data) {
+              fetchedOptions = data.data.map((item: { value: string; label: string }) => ({
+                value: String(item.value),
+                label: String(item.label),
+              }));
+            }
+          } else if (!isValidColumnName) {
+            // columnName이 없거나 유효하지 않으면 빈 옵션
           }
         }
-      }
-      return targets;
-    }, [source, entityTable, allComponents, id]);
 
-    // 엔티티 autoFill 적용 래퍼
-    const handleChangeWithAutoFill = useCallback((newValue: string | string[]) => {
+        // null/undefined value 필터링 (cmdk 크래시 방지)
+        const sanitized = fetchedOptions
+          .filter((o) => o.value != null && String(o.value) !== "")
+          .map((o) => ({ ...o, value: String(o.value), label: o.label || String(o.value) }));
+        setOptions(sanitized);
+        setOptionsLoaded(true);
+      } catch (error) {
+        console.error("옵션 로딩 실패:", error);
+        setOptions([]);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadOptions();
+  }, [
+    source,
+    entityTable,
+    entityValueColumn,
+    entityLabelColumn,
+    codeGroup,
+    table,
+    valueColumn,
+    labelColumn,
+    apiEndpoint,
+    staticOptions,
+    optionsLoaded,
+    hierarchical,
+    parentValue,
+    resolvedFiltersJson,
+  ]);
+
+  // 레거시 평문값 → 카테고리 코드 자동 정규화 (한글 텍스트로 저장된 데이터 대응)
+  const resolvedValue = useMemo(() => {
+    if (!value || options.length === 0) return value;
+
+    const resolveOne = (v: string): string => {
+      if (options.some((o) => o.value === v)) return v;
+      const trimmed = v.trim();
+      const match = options.find((o) => {
+        const cleanLabel = o.label.replace(/^[\s└]+/, "").trim();
+        return cleanLabel === trimmed;
+      });
+      return match ? match.value : v;
+    };
+
+    if (Array.isArray(value)) {
+      const resolved = value.map(resolveOne);
+      return resolved.every((v, i) => v === value[i]) ? value : resolved;
+    }
+
+    // 콤마 구분 복합값 처리 (e.g., "구매품,판매품,CAT_xxx")
+    if (typeof value === "string" && value.includes(",")) {
+      const parts = value.split(",");
+      const resolved = parts.map((p) => resolveOne(p.trim()));
+      const result = resolved.join(",");
+      return result === value ? value : result;
+    }
+
+    return resolveOne(value);
+  }, [value, options]);
+
+  // 정규화 결과가 원본과 다르면 onChange로 자동 업데이트 (저장 시 코드 변환)
+  useEffect(() => {
+    if (!onChange || options.length === 0 || !value || value === resolvedValue) return;
+    onChange(resolvedValue as string | string[]);
+  }, [resolvedValue]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // 같은 폼에서 참조 테이블(entityTable) 컬럼을 사용하는 다른 컴포넌트 자동 감지
+  const autoFillTargets = useMemo(() => {
+    if (source !== "entity" || !entityTable || !allComponents) return [];
+
+    const targets: Array<{ sourceField: string; targetColumnName: string }> = [];
+    for (const comp of allComponents) {
+      if (comp.id === id) continue;
+
+      // overrides 구조 지원 (DB에서 로드 시 overrides 안에 데이터가 있음)
+      const ov = (comp as any).overrides || {};
+      const compColumnName = comp.columnName || ov.columnName || comp.componentConfig?.columnName || "";
+
+      // 방법1: entityJoinTable 속성이 있는 경우
+      const joinTable = comp.entityJoinTable || ov.entityJoinTable || comp.componentConfig?.entityJoinTable;
+      const joinColumn = comp.entityJoinColumn || ov.entityJoinColumn || comp.componentConfig?.entityJoinColumn;
+      if (joinTable === entityTable && joinColumn) {
+        targets.push({ sourceField: joinColumn, targetColumnName: compColumnName });
+        continue;
+      }
+
+      // 방법2: columnName이 "테이블명.컬럼명" 형식인 경우 (예: item_info.unit)
+      if (compColumnName.includes(".")) {
+        const [prefix, actualColumn] = compColumnName.split(".");
+        if (prefix === entityTable && actualColumn) {
+          targets.push({ sourceField: actualColumn, targetColumnName: compColumnName });
+        }
+      }
+    }
+    return targets;
+  }, [source, entityTable, allComponents, id]);
+
+  // 엔티티 autoFill 적용 래퍼
+  const handleChangeWithAutoFill = useCallback(
+    (newValue: string | string[]) => {
       onChange?.(newValue);
 
       if (autoFillTargets.length === 0 || !onFormDataChange || !entityTable) return;
@@ -970,275 +1047,304 @@ export const V2Select = forwardRef<HTMLDivElement, V2SelectProps>(
 
       const valueCol = entityValueColumn || "id";
 
-      apiClient.get(`/table-management/tables/${entityTable}/data-with-joins`, {
-        params: {
-          page: 1,
-          size: 1,
-          search: JSON.stringify({ [valueCol]: selectedKey }),
-          autoFilter: JSON.stringify({ enabled: true, filterColumn: "company_code", userField: "companyCode" }),
-        },
-      }).then((res) => {
-        const responseData = res.data?.data;
-        const rows = responseData?.data || responseData?.rows || [];
-        if (rows.length > 0) {
-          const fullData = rows[0];
-          for (const target of autoFillTargets) {
-            const sourceValue = fullData[target.sourceField];
-            if (sourceValue !== undefined) {
-              onFormDataChange(target.targetColumnName, sourceValue);
+      apiClient
+        .get(`/table-management/tables/${entityTable}/data-with-joins`, {
+          params: {
+            page: 1,
+            size: 1,
+            search: JSON.stringify({ [valueCol]: selectedKey }),
+            autoFilter: JSON.stringify({ enabled: true, filterColumn: "company_code", userField: "companyCode" }),
+          },
+        })
+        .then((res) => {
+          const responseData = res.data?.data;
+          const rows = responseData?.data || responseData?.rows || [];
+          if (rows.length > 0) {
+            const fullData = rows[0];
+            for (const target of autoFillTargets) {
+              const sourceValue = fullData[target.sourceField];
+              if (sourceValue !== undefined) {
+                onFormDataChange(target.targetColumnName, sourceValue);
+              }
             }
           }
-        }
-      }).catch((err) => console.error("autoFill 조회 실패:", err));
-    }, [onChange, autoFillTargets, onFormDataChange, entityTable, entityValueColumn]);
+        })
+        .catch((err) => console.error("autoFill 조회 실패:", err));
+    },
+    [onChange, autoFillTargets, onFormDataChange, entityTable, entityValueColumn],
+  );
 
-    // 모드별 컴포넌트 렌더링
-    const renderSelect = () => {
-      if (loading) {
-        return <div className="h-full flex items-center text-sm text-muted-foreground">로딩 중...</div>;
+  // 모드별 컴포넌트 렌더링
+  const renderSelect = () => {
+    if (loading) {
+      return <div className="text-muted-foreground flex h-full items-center text-sm">로딩 중...</div>;
+    }
+
+    const isDisabled = disabled || readonly;
+
+    // 명시적 높이가 있을 때만 style 전달, 없으면 undefined (기본 높이 h-6 사용)
+    const heightStyle: React.CSSProperties | undefined = componentHeight ? { height: componentHeight } : undefined;
+
+    // 🔧 디자인 모드용: 옵션이 없고 dropdown/combobox가 아닌 모드일 때 source 정보 표시
+    const nonDropdownModes = ["radio", "check", "checkbox", "tag", "tagbox", "toggle", "swap"];
+    if (options.length === 0 && nonDropdownModes.includes(config.mode || "dropdown")) {
+      // 데이터 소스 정보 기반 메시지 생성
+      let sourceInfo = "";
+      if (source === "static") {
+        sourceInfo = "정적 옵션 설정 필요";
+      } else if (source === "code") {
+        sourceInfo = codeGroup ? `공통코드: ${codeGroup}` : "공통코드 설정 필요";
+      } else if (source === "entity") {
+        sourceInfo = entityTable ? `엔티티: ${entityTable}` : "엔티티 설정 필요";
+      } else if (source === "category") {
+        const catInfo = categoryTable || tableName || columnName;
+        sourceInfo = catInfo ? `카테고리: ${catInfo}` : "카테고리 설정 필요";
+      } else if (source === "db") {
+        sourceInfo = table ? `테이블: ${table}` : "테이블 설정 필요";
+      } else if (!source || source === "distinct") {
+        // distinct 또는 미설정인 경우 - 컬럼명 기반으로 표시
+        sourceInfo = columnName ? `컬럼: ${columnName}` : "데이터 소스 설정 필요";
+      } else {
+        sourceInfo = `소스: ${source}`;
       }
 
-      const isDisabled = disabled || readonly;
-      
-      // 명시적 높이가 있을 때만 style 전달, 없으면 undefined (기본 높이 h-6 사용)
-      const heightStyle: React.CSSProperties | undefined = componentHeight 
-        ? { height: componentHeight }
-        : undefined;
+      // 모드 이름 한글화
+      const modeNames: Record<string, string> = {
+        radio: "라디오",
+        check: "체크박스",
+        checkbox: "체크박스",
+        tag: "태그",
+        tagbox: "태그박스",
+        toggle: "토글",
+        swap: "스왑",
+      };
+      const modeName = modeNames[config.mode || ""] || config.mode;
 
-      // 🔧 디자인 모드용: 옵션이 없고 dropdown/combobox가 아닌 모드일 때 source 정보 표시
-      const nonDropdownModes = ["radio", "check", "checkbox", "tag", "tagbox", "toggle", "swap"];
-      if (options.length === 0 && nonDropdownModes.includes(config.mode || "dropdown")) {
-        // 데이터 소스 정보 기반 메시지 생성
-        let sourceInfo = "";
-        if (source === "static") {
-          sourceInfo = "정적 옵션 설정 필요";
-        } else if (source === "code") {
-          sourceInfo = codeGroup ? `공통코드: ${codeGroup}` : "공통코드 설정 필요";
-        } else if (source === "entity") {
-          sourceInfo = entityTable ? `엔티티: ${entityTable}` : "엔티티 설정 필요";
-        } else if (source === "category") {
-          const catInfo = categoryTable || tableName || columnName;
-          sourceInfo = catInfo ? `카테고리: ${catInfo}` : "카테고리 설정 필요";
-        } else if (source === "db") {
-          sourceInfo = table ? `테이블: ${table}` : "테이블 설정 필요";
-        } else if (!source || source === "distinct") {
-          // distinct 또는 미설정인 경우 - 컬럼명 기반으로 표시
-          sourceInfo = columnName ? `컬럼: ${columnName}` : "데이터 소스 설정 필요";
-        } else {
-          sourceInfo = `소스: ${source}`;
-        }
-
-        // 모드 이름 한글화
-        const modeNames: Record<string, string> = {
-          radio: "라디오",
-          check: "체크박스", 
-          checkbox: "체크박스",
-          tag: "태그",
-          tagbox: "태그박스",
-          toggle: "토글",
-          swap: "스왑",
-        };
-        const modeName = modeNames[config.mode || ""] || config.mode;
-
-        return (
-          <div className="h-full flex items-center justify-center text-xs text-muted-foreground border border-dashed rounded p-2">
-            <span className="opacity-70">[{modeName}] {sourceInfo}</span>
-          </div>
-        );
-      }
-
-      switch (config.mode) {
-        case "dropdown":
-        case "combobox":
-          return (
-            <DropdownSelect
-              options={options}
-              value={resolvedValue}
-              onChange={handleChangeWithAutoFill}
-              placeholder="선택"
-              searchable={config.mode === "combobox" ? true : config.searchable}
-              multiple={config.multiple}
-              maxSelect={config.maxSelect}
-              allowClear={config.allowClear}
-              disabled={isDisabled}
-              style={heightStyle}
-            />
-          );
-
-        case "radio":
-          return (
-            <RadioSelect
-              options={options}
-              value={typeof resolvedValue === "string" ? resolvedValue : resolvedValue?.[0]}
-              onChange={(v) => handleChangeWithAutoFill(v)}
-              disabled={isDisabled}
-            />
-          );
-
-        case "check":
-        case "checkbox":
-          return (
-            <CheckSelect
-              options={options}
-              value={Array.isArray(resolvedValue) ? resolvedValue : resolvedValue ? [resolvedValue] : []}
-              onChange={handleChangeWithAutoFill}
-              maxSelect={config.maxSelect}
-              disabled={isDisabled}
-            />
-          );
-
-        case "tag":
-          return (
-            <TagSelect
-              options={options}
-              value={Array.isArray(resolvedValue) ? resolvedValue : resolvedValue ? [resolvedValue] : []}
-              onChange={handleChangeWithAutoFill}
-              maxSelect={config.maxSelect}
-              disabled={isDisabled}
-            />
-          );
-
-        case "tagbox":
-          return (
-            <TagboxSelect
-              options={options}
-              value={Array.isArray(resolvedValue) ? resolvedValue : resolvedValue ? [resolvedValue] : []}
-              onChange={handleChangeWithAutoFill}
-              placeholder={config.placeholder || "선택하세요"}
-              maxSelect={config.maxSelect}
-              disabled={isDisabled}
-              style={heightStyle}
-            />
-          );
-
-        case "toggle":
-          return (
-            <ToggleSelect
-              options={options}
-              value={typeof resolvedValue === "string" ? resolvedValue : resolvedValue?.[0]}
-              onChange={(v) => handleChangeWithAutoFill(v)}
-              disabled={isDisabled}
-            />
-          );
-
-        case "swap":
-          return (
-            <SwapSelect
-              options={options}
-              value={Array.isArray(resolvedValue) ? resolvedValue : resolvedValue ? [resolvedValue] : []}
-              onChange={handleChangeWithAutoFill}
-              maxSelect={config.maxSelect}
-              disabled={isDisabled}
-            />
-          );
-
-        default:
-          return (
-            <DropdownSelect
-              options={options}
-              value={resolvedValue}
-              onChange={handleChangeWithAutoFill}
-              disabled={isDisabled}
-              style={heightStyle}
-            />
-          );
-      }
-    };
-
-    const showLabel = label && style?.labelDisplay !== false && style?.labelDisplay !== "false";
-    const componentWidth = size?.width || style?.width;
-    const componentHeight = size?.height || style?.height;
-
-    // 라벨 위치 및 높이 계산
-    const labelPos = style?.labelPosition || "top";
-    const isHorizLabel = labelPos === "left" || labelPos === "right";
-    const labelFontSize = style?.labelFontSize ? parseInt(String(style.labelFontSize)) : 14;
-    const labelMarginBottom = style?.labelMarginBottom ? parseInt(String(style.labelMarginBottom)) : 4;
-    const estimatedLabelHeight = labelFontSize + labelMarginBottom + 2;
-    const labelGapValue = style?.labelGap || "8px";
-
-    // 커스텀 스타일 감지
-    const hasCustomBorder = !!(style?.borderWidth || style?.borderColor || style?.borderStyle || style?.border);
-    const hasCustomBackground = !!style?.backgroundColor;
-    const hasCustomRadius = !!style?.borderRadius;
-
-    const customTextStyle: React.CSSProperties = {};
-    if (style?.color) customTextStyle.color = style.color;
-    if (style?.fontSize) customTextStyle.fontSize = style.fontSize;
-    if (style?.fontWeight) customTextStyle.fontWeight = style.fontWeight;
-    if (style?.textAlign) customTextStyle.textAlign = style.textAlign as React.CSSProperties["textAlign"];
-    const hasCustomText = Object.keys(customTextStyle).length > 0;
-
-    const labelElement = showLabel ? (
-      <Label
-        htmlFor={id}
-        style={{
-          ...(labelPos === "top" ? { position: "absolute" as const, top: `-${estimatedLabelHeight}px`, left: 0 } : {}),
-          ...(labelPos === "bottom" ? { position: "absolute" as const, bottom: `-${estimatedLabelHeight}px`, left: 0 } : {}),
-          fontSize: style?.labelFontSize || "14px",
-          color: style?.labelColor || "#64748b",
-          fontWeight: style?.labelFontWeight || "500",
-        }}
-        className="text-sm font-medium whitespace-nowrap"
-      >
-        {label}
-        {required && <span className="text-orange-500 ml-0.5">*</span>}
-      </Label>
-    ) : null;
-
-    const selectContent = (
-      <div
-        className={cn(
-          isHorizLabel ? "min-w-0 flex-1" : "h-full w-full",
-          hasCustomBorder && "[&_button]:border-0! **:data-[slot=select-trigger]:border-0! [&_.border]:border-0!",
-          (hasCustomBorder || hasCustomRadius) && "[&_button]:rounded-none! **:data-[slot=select-trigger]:rounded-none! [&_.rounded-md]:rounded-none!",
-          hasCustomBackground && "[&_button]:bg-transparent! **:data-[slot=select-trigger]:bg-transparent!",
-        )}
-        style={{ ...(hasCustomText ? customTextStyle : {}), ...(isHorizLabel ? { height: "100%" } : {}) }}
-      >
-        {renderSelect()}
-      </div>
-    );
-
-    if (isHorizLabel && showLabel) {
       return (
-        <div
-          ref={ref}
-          id={id}
-          className={cn(isDesignMode && "pointer-events-none")}
-          style={{
-            width: componentWidth,
-            height: componentHeight,
-            display: "flex",
-            flexDirection: labelPos === "left" ? "row" : "row-reverse",
-            alignItems: "center",
-            gap: labelGapValue,
-          }}
-        >
-          {labelElement}
-          {selectContent}
+        <div className="text-muted-foreground flex h-full items-center justify-center rounded border border-dashed p-2 text-xs">
+          <span className="opacity-70">
+            [{modeName}] {sourceInfo}
+          </span>
         </div>
       );
     }
 
+    switch (config.mode) {
+      case "dropdown":
+      case "combobox":
+        return (
+          <DropdownSelect
+            options={options}
+            value={resolvedValue}
+            onChange={handleChangeWithAutoFill}
+            placeholder="선택"
+            searchable={config.mode === "combobox" ? true : config.searchable}
+            multiple={config.multiple}
+            maxSelect={config.maxSelect}
+            allowClear={config.allowClear}
+            disabled={isDisabled}
+            style={heightStyle}
+          />
+        );
+
+      case "radio":
+        return (
+          <RadioSelect
+            options={options}
+            value={typeof resolvedValue === "string" ? resolvedValue : resolvedValue?.[0]}
+            onChange={(v) => handleChangeWithAutoFill(v)}
+            disabled={isDisabled}
+          />
+        );
+
+      case "check":
+      case "checkbox":
+        return (
+          <CheckSelect
+            options={options}
+            value={Array.isArray(resolvedValue) ? resolvedValue : resolvedValue ? [resolvedValue] : []}
+            onChange={handleChangeWithAutoFill}
+            maxSelect={config.maxSelect}
+            disabled={isDisabled}
+          />
+        );
+
+      case "tag":
+        return (
+          <TagSelect
+            options={options}
+            value={Array.isArray(resolvedValue) ? resolvedValue : resolvedValue ? [resolvedValue] : []}
+            onChange={handleChangeWithAutoFill}
+            maxSelect={config.maxSelect}
+            disabled={isDisabled}
+          />
+        );
+
+      case "tagbox":
+        return (
+          <TagboxSelect
+            options={options}
+            value={Array.isArray(resolvedValue) ? resolvedValue : resolvedValue ? [resolvedValue] : []}
+            onChange={handleChangeWithAutoFill}
+            placeholder={config.placeholder || "선택하세요"}
+            maxSelect={config.maxSelect}
+            disabled={isDisabled}
+            style={heightStyle}
+          />
+        );
+
+      case "toggle":
+        return (
+          <ToggleSelect
+            options={options}
+            value={typeof resolvedValue === "string" ? resolvedValue : resolvedValue?.[0]}
+            onChange={(v) => handleChangeWithAutoFill(v)}
+            disabled={isDisabled}
+          />
+        );
+
+      case "swap":
+        return (
+          <SwapSelect
+            options={options}
+            value={Array.isArray(resolvedValue) ? resolvedValue : resolvedValue ? [resolvedValue] : []}
+            onChange={handleChangeWithAutoFill}
+            maxSelect={config.maxSelect}
+            disabled={isDisabled}
+          />
+        );
+
+      default:
+        return (
+          <DropdownSelect
+            options={options}
+            value={resolvedValue}
+            onChange={handleChangeWithAutoFill}
+            disabled={isDisabled}
+            style={heightStyle}
+          />
+        );
+    }
+  };
+
+  const showLabel = label && style?.labelDisplay !== false;
+  const componentWidth = size?.width || style?.width;
+  const componentHeight = size?.height || style?.height;
+
+  // 라벨 위치 및 높이 계산
+  const labelPos = style?.labelPosition || "top";
+  const isHorizLabel = labelPos === "left" || labelPos === "right";
+  const labelFontSize = style?.labelFontSize ? parseInt(String(style.labelFontSize)) : 14;
+  const labelMarginBottom = style?.labelMarginBottom ? parseInt(String(style.labelMarginBottom)) : 4;
+  const estimatedLabelHeight = labelFontSize + labelMarginBottom + 2;
+  const labelGapValue = style?.labelGap || "8px";
+
+  // 커스텀 스타일 감지
+  const hasCustomBorder = !!(style?.borderWidth || style?.borderColor || style?.borderStyle || style?.border);
+  const hasCustomBackground = !!style?.backgroundColor;
+  const hasCustomRadius = !!style?.borderRadius;
+
+  const customTextStyle: React.CSSProperties = {};
+  if (style?.color) customTextStyle.color = style.color;
+  if (style?.fontSize) customTextStyle.fontSize = style.fontSize;
+  if (style?.fontWeight) customTextStyle.fontWeight = style.fontWeight;
+  if (style?.textAlign) customTextStyle.textAlign = style.textAlign as React.CSSProperties["textAlign"];
+  const hasCustomText = Object.keys(customTextStyle).length > 0;
+
+  const labelElement = showLabel ? (
+    <Label
+      htmlFor={id}
+      style={{
+        ...(labelPos === "top" ? { position: "absolute" as const, top: `-${estimatedLabelHeight}px`, left: 0 } : {}),
+        ...(labelPos === "bottom"
+          ? { position: "absolute" as const, bottom: `-${estimatedLabelHeight}px`, left: 0 }
+          : {}),
+        fontSize: style?.labelFontSize || "14px",
+        color: getAdaptiveLabelColor(style?.labelColor),
+        fontWeight: style?.labelFontWeight || "500",
+      }}
+      className="text-sm font-medium whitespace-nowrap"
+    >
+      {label}
+      {required && <span className="ml-0.5 text-amber-500">*</span>}
+    </Label>
+  ) : null;
+
+  const selectContent = (
+    <div
+      className={cn(
+        isHorizLabel ? "min-w-0 flex-1" : "h-full w-full",
+        hasCustomBorder && "**:data-[slot=select-trigger]:border-0! [&_.border]:border-0! [&_button]:border-0!",
+        (hasCustomBorder || hasCustomRadius) &&
+          "**:data-[slot=select-trigger]:rounded-none! [&_.rounded-md]:rounded-none! [&_button]:rounded-none!",
+        hasCustomBackground && "**:data-[slot=select-trigger]:bg-transparent! [&_button]:bg-transparent!",
+      )}
+      style={{ ...(hasCustomText ? customTextStyle : {}), ...(isHorizLabel ? { height: "100%" } : {}) }}
+    >
+      {renderSelect()}
+    </div>
+  );
+
+  if (isHorizLabel && showLabel) {
     return (
       <div
         ref={ref}
         id={id}
-        className={cn("relative", isDesignMode && "pointer-events-none")}
+        className={cn(
+          "flex flex-col gap-1",
+          labelPos === "left" ? "sm:flex-row sm:items-center" : "sm:flex-row-reverse sm:items-center",
+          isDesignMode && "pointer-events-none",
+        )}
         style={{
           width: componentWidth,
           height: componentHeight,
+          gap: labelGapValue,
         }}
       >
-        {labelElement}
-        {selectContent}
+        <Label
+          htmlFor={id}
+          style={{
+            fontSize: style?.labelFontSize || "14px",
+            color: getAdaptiveLabelColor(style?.labelColor),
+            fontWeight: style?.labelFontWeight || "500",
+          }}
+          className="w-full text-sm font-medium whitespace-nowrap sm:w-[120px] sm:shrink-0"
+        >
+          {label}
+          {required && <span className="ml-0.5 text-amber-500">*</span>}
+        </Label>
+        <div
+          className={cn(
+            "w-full min-w-0 flex-1",
+            hasCustomBorder && "**:data-[slot=select-trigger]:border-0! [&_.border]:border-0! [&_button]:border-0!",
+            (hasCustomBorder || hasCustomRadius) &&
+              "**:data-[slot=select-trigger]:rounded-none! [&_.rounded-md]:rounded-none! [&_button]:rounded-none!",
+            hasCustomBackground && "**:data-[slot=select-trigger]:bg-transparent! [&_button]:bg-transparent!",
+          )}
+          style={{ ...(hasCustomText ? customTextStyle : {}) }}
+        >
+          {renderSelect()}
+        </div>
       </div>
     );
   }
-);
+
+  return (
+    <div
+      ref={ref}
+      id={id}
+      className={cn("relative", isDesignMode && "pointer-events-none")}
+      style={{
+        width: componentWidth,
+        height: componentHeight,
+      }}
+    >
+      {labelElement}
+      {selectContent}
+    </div>
+  );
+});
 
 V2Select.displayName = "V2Select";
 
 export default V2Select;
-
diff --git a/frontend/components/v2/config-panels/V2BomItemEditorConfigPanel.tsx b/frontend/components/v2/config-panels/V2BomItemEditorConfigPanel.tsx
index 51c9a4f9..eea9e3ce 100644
--- a/frontend/components/v2/config-panels/V2BomItemEditorConfigPanel.tsx
+++ b/frontend/components/v2/config-panels/V2BomItemEditorConfigPanel.tsx
@@ -503,22 +503,22 @@ export function V2BomItemEditorConfigPanel({
               className={cn(
                 "rounded-lg border p-3",
                 config.useCustomTable && config.mainTableName
-                  ? "border-orange-300 bg-orange-50"
-                  : "border-blue-300 bg-blue-50",
+                  ? "border-orange-300 bg-amber-50"
+                  : "border-primary/40 bg-primary/10",
               )}
             >
               <div className="flex items-center gap-2">
                 <Database
                   className={cn(
                     "h-4 w-4",
-                    config.useCustomTable && config.mainTableName ? "text-orange-600" : "text-blue-600",
+                    config.useCustomTable && config.mainTableName ? "text-amber-600" : "text-primary",
                   )}
                 />
                 <div className="flex-1">
                   <p
                     className={cn(
                       "text-sm font-medium",
-                      config.useCustomTable && config.mainTableName ? "text-orange-700" : "text-blue-700",
+                      config.useCustomTable && config.mainTableName ? "text-orange-700" : "text-primary",
                     )}
                   >
                     {config.useCustomTable && config.mainTableName
@@ -527,13 +527,13 @@ export function V2BomItemEditorConfigPanel({
                       : currentTableName || "미설정"}
                   </p>
                   {config.useCustomTable && config.mainTableName && config.foreignKeyColumn && (
-                    <p className="mt-0.5 text-[10px] text-orange-600">
+                    <p className="mt-0.5 text-[10px] text-amber-600">
                       FK: {config.foreignKeyColumn} &rarr; {currentTableName}.
                       {config.foreignKeySourceColumn || "id"}
                     </p>
                   )}
                   {!config.useCustomTable && currentTableName && (
-                    <p className="mt-0.5 text-[10px] text-blue-600">화면 메인 테이블</p>
+                    <p className="mt-0.5 text-[10px] text-primary">화면 메인 테이블</p>
                   )}
                 </div>
               </div>
@@ -583,7 +583,7 @@ export function V2BomItemEditorConfigPanel({
                                 : "opacity-0",
                             )}
                           />
-                          <Database className="mr-2 h-3 w-3 text-blue-500" />
+                          <Database className="mr-2 h-3 w-3 text-primary" />
                           <span>{currentTableName}</span>
                           <span className="text-muted-foreground ml-1 text-[10px]">(기본)</span>
                         </CommandItem>
@@ -608,7 +608,7 @@ export function V2BomItemEditorConfigPanel({
                                 config.mainTableName === rel.tableName ? "opacity-100" : "opacity-0",
                               )}
                             />
-                            <Link2 className="mr-2 h-3 w-3 text-orange-500" />
+                            <Link2 className="mr-2 h-3 w-3 text-amber-500" />
                             <span>{rel.tableLabel}</span>
                             <span className="text-muted-foreground ml-1 text-[10px]">
                               ({rel.foreignKeyColumn})
@@ -641,7 +641,7 @@ export function V2BomItemEditorConfigPanel({
                                 config.mainTableName === table.tableName ? "opacity-100" : "opacity-0",
                               )}
                             />
-                            <Database className="mr-2 h-3 w-3 text-gray-400" />
+                            <Database className="mr-2 h-3 w-3 text-muted-foreground/70" />
                             <span>{table.displayName}</span>
                           </CommandItem>
                         ))}
@@ -721,8 +721,8 @@ export function V2BomItemEditorConfigPanel({
                 </SelectContent>
               </Select>
             ) : (
-              <div className="rounded border border-gray-200 bg-gray-50 p-2">
-                <p className="text-[10px] text-gray-500">
+              <div className="rounded border border-border bg-muted p-2">
+                <p className="text-[10px] text-muted-foreground">
                   {loadingColumns ? "로딩 중..." : "저장 테이블을 먼저 선택하세요"}
                 </p>
               </div>
@@ -764,18 +764,18 @@ export function V2BomItemEditorConfigPanel({
                   {entityColumns.map((col) => (
                     <SelectItem key={col.columnName} value={col.columnName}>
                       <div className="flex items-center gap-2">
-                        <Link2 className="h-3 w-3 text-blue-500" />
+                        <Link2 className="h-3 w-3 text-primary" />
                         <span>{col.displayName}</span>
-                        <ArrowRight className="h-3 w-3 text-gray-400" />
-                        <span className="text-gray-500">{col.referenceTable}</span>
+                        <ArrowRight className="h-3 w-3 text-muted-foreground/70" />
+                        <span className="text-muted-foreground">{col.referenceTable}</span>
                       </div>
                     </SelectItem>
                   ))}
                 </SelectContent>
               </Select>
             ) : (
-              <div className="rounded border border-gray-200 bg-gray-50 p-2">
-                <p className="text-[10px] text-gray-500">
+              <div className="rounded border border-border bg-muted p-2">
+                <p className="text-[10px] text-muted-foreground">
                   {loadingColumns
                     ? "로딩 중..."
                     : !targetTableForColumns
@@ -786,9 +786,9 @@ export function V2BomItemEditorConfigPanel({
             )}
 
             {config.dataSource?.sourceTable && (
-              <div className="space-y-1 rounded border border-green-200 bg-green-50 p-2">
-                <p className="text-xs font-medium text-green-700">선택된 엔티티</p>
-                <div className="text-[10px] text-green-600">
+              <div className="space-y-1 rounded border border-emerald-200 bg-emerald-50 p-2">
+                <p className="text-xs font-medium text-emerald-700">선택된 엔티티</p>
+                <div className="text-[10px] text-emerald-600">
                   <p>검색 테이블: {config.dataSource.sourceTable}</p>
                   <p>저장 컬럼: {config.dataSource.foreignKey} (FK)</p>
                 </div>
@@ -851,9 +851,9 @@ export function V2BomItemEditorConfigPanel({
               <Separator />
               <div className="space-y-2">
                 <Label className="text-xs font-medium">메인 화면 테이블 (참고)</Label>
-                <div className="rounded border border-gray-200 bg-gray-50 p-2">
-                  <p className="text-xs font-medium text-gray-700">{currentTableName}</p>
-                  <p className="text-[10px] text-gray-500">
+                <div className="rounded border border-border bg-muted p-2">
+                  <p className="text-xs font-medium text-foreground">{currentTableName}</p>
+                  <p className="text-[10px] text-muted-foreground">
                     컬럼 {currentTableColumns.length}개 / 엔티티 {entityColumns.length}개
                   </p>
                 </div>
@@ -873,7 +873,7 @@ export function V2BomItemEditorConfigPanel({
             {/* 소스 테이블 컬럼 (표시용) */}
             {config.dataSource?.sourceTable && (
               <>
-                <div className="mb-1 mt-2 flex items-center gap-1 text-[10px] font-medium text-blue-600">
+                <div className="mb-1 mt-2 flex items-center gap-1 text-[10px] font-medium text-primary">
                   <Link2 className="h-3 w-3" />
                   소스 테이블 ({config.dataSource.sourceTable}) - 표시용
                 </div>
@@ -882,13 +882,13 @@ export function V2BomItemEditorConfigPanel({
                 ) : sourceTableColumns.length === 0 ? (
                   <p className="text-muted-foreground py-2 text-xs">컬럼 정보가 없습니다</p>
                 ) : (
-                  <div className="max-h-28 space-y-0.5 overflow-y-auto rounded-md border border-blue-200 bg-blue-50/30 p-2">
+                  <div className="max-h-28 space-y-0.5 overflow-y-auto rounded-md border border-primary/20 bg-primary/10/30 p-2">
                     {sourceTableColumns.map((column) => (
                       <div
                         key={`source-${column.columnName}`}
                         className={cn(
-                          "flex cursor-pointer items-center gap-2 rounded px-2 py-1 hover:bg-blue-100/50",
-                          isSourceColumnSelected(column.columnName) && "bg-blue-100",
+                          "flex cursor-pointer items-center gap-2 rounded px-2 py-1 hover:bg-primary/10/50",
+                          isSourceColumnSelected(column.columnName) && "bg-primary/10",
                         )}
                         onClick={() => toggleSourceDisplayColumn(column)}
                       >
@@ -897,9 +897,9 @@ export function V2BomItemEditorConfigPanel({
                           onCheckedChange={() => toggleSourceDisplayColumn(column)}
                           className="pointer-events-none h-3.5 w-3.5"
                         />
-                        <Link2 className="h-3 w-3 flex-shrink-0 text-blue-500" />
+                        <Link2 className="h-3 w-3 flex-shrink-0 text-primary" />
                         <span className="truncate text-xs">{column.displayName}</span>
-                        <span className="ml-auto text-[10px] text-blue-400">표시</span>
+                        <span className="ml-auto text-[10px] text-primary/80">표시</span>
                       </div>
                     ))}
                   </div>
@@ -908,7 +908,7 @@ export function V2BomItemEditorConfigPanel({
             )}
 
             {/* 저장 테이블 컬럼 (입력용) */}
-            <div className="mb-1 mt-3 flex items-center gap-1 text-[10px] font-medium text-gray-600">
+            <div className="mb-1 mt-3 flex items-center gap-1 text-[10px] font-medium text-muted-foreground">
               <Database className="h-3 w-3" />
               저장 테이블 ({targetTableForColumns || "미선택"}) - 입력용
             </div>
@@ -934,7 +934,7 @@ export function V2BomItemEditorConfigPanel({
                     />
                     <Database className="text-muted-foreground h-3 w-3 flex-shrink-0" />
                     <span className="truncate text-xs">{column.displayName}</span>
-                    <span className="ml-auto text-[10px] text-gray-400">{column.inputType}</span>
+                    <span className="ml-auto text-[10px] text-muted-foreground/70">{column.inputType}</span>
                   </div>
                 ))}
               </div>
@@ -957,8 +957,8 @@ export function V2BomItemEditorConfigPanel({
                         className={cn(
                           "flex items-center gap-2 rounded-md border p-2",
                           col.isSourceDisplay
-                            ? "border-blue-200 bg-blue-50/50"
-                            : "border-gray-200 bg-muted/30",
+                            ? "border-primary/20 bg-primary/10/50"
+                            : "border-border bg-muted/30",
                           col.hidden && "opacity-50",
                         )}
                         draggable
@@ -983,19 +983,19 @@ export function V2BomItemEditorConfigPanel({
                             onClick={() =>
                               setExpandedColumn(expandedColumn === col.key ? null : col.key)
                             }
-                            className="rounded p-0.5 hover:bg-gray-200"
+                            className="rounded p-0.5 hover:bg-muted/80"
                           >
                             {expandedColumn === col.key ? (
-                              <ChevronDown className="h-3 w-3 text-gray-500" />
+                              <ChevronDown className="h-3 w-3 text-muted-foreground" />
                             ) : (
-                              <ChevronRight className="h-3 w-3 text-gray-500" />
+                              <ChevronRight className="h-3 w-3 text-muted-foreground" />
                             )}
                           </button>
                         )}
 
                         {col.isSourceDisplay ? (
                           <Link2
-                            className="h-3 w-3 flex-shrink-0 text-blue-500"
+                            className="h-3 w-3 flex-shrink-0 text-primary"
                             title="소스 표시 (읽기 전용)"
                           />
                         ) : (
@@ -1014,8 +1014,8 @@ export function V2BomItemEditorConfigPanel({
                             type="button"
                             onClick={() => updateColumnProp(col.key, "hidden", !col.hidden)}
                             className={cn(
-                              "rounded p-1 hover:bg-gray-200",
-                              col.hidden ? "text-gray-400" : "text-gray-600",
+                              "rounded p-1 hover:bg-muted/80",
+                              col.hidden ? "text-muted-foreground/70" : "text-muted-foreground",
                             )}
                             title={col.hidden ? "히든 (저장만 됨)" : "표시됨"}
                           >
@@ -1059,9 +1059,9 @@ export function V2BomItemEditorConfigPanel({
 
                       {/* 확장 상세 */}
                       {!col.isSourceDisplay && expandedColumn === col.key && (
-                        <div className="ml-6 space-y-2 rounded-md border border-dashed border-gray-300 bg-gray-50 p-2">
+                        <div className="ml-6 space-y-2 rounded-md border border-dashed border-input bg-muted p-2">
                           <div className="space-y-1">
-                            <Label className="text-[10px] text-gray-600">컬럼 너비</Label>
+                            <Label className="text-[10px] text-muted-foreground">컬럼 너비</Label>
                             <Input
                               value={col.width || "auto"}
                               onChange={(e) => updateColumnProp(col.key, "width", e.target.value)}
diff --git a/frontend/components/v2/config-panels/V2BomTreeConfigPanel.tsx b/frontend/components/v2/config-panels/V2BomTreeConfigPanel.tsx
index 7c8c3ed1..e492a13b 100644
--- a/frontend/components/v2/config-panels/V2BomTreeConfigPanel.tsx
+++ b/frontend/components/v2/config-panels/V2BomTreeConfigPanel.tsx
@@ -435,21 +435,21 @@ export function V2BomTreeConfigPanel({
             <div
               className={cn(
                 "rounded-lg border p-3",
-                config.detailTable ? "border-orange-300 bg-orange-50" : "border-gray-300 bg-gray-50",
+                config.detailTable ? "border-orange-300 bg-amber-50" : "border-input bg-muted",
               )}
             >
               <div className="flex items-center gap-2">
                 <Database
-                  className={cn("h-4 w-4", config.detailTable ? "text-orange-600" : "text-gray-400")}
+                  className={cn("h-4 w-4", config.detailTable ? "text-amber-600" : "text-muted-foreground/70")}
                 />
                 <div className="flex-1">
-                  <p className={cn("text-sm font-medium", config.detailTable ? "text-orange-700" : "text-gray-500")}>
+                  <p className={cn("text-sm font-medium", config.detailTable ? "text-orange-700" : "text-muted-foreground")}>
                     {config.detailTable
                       ? allTables.find((t) => t.tableName === config.detailTable)?.displayName || config.detailTable
                       : "미설정"}
                   </p>
                   {config.detailTable && config.foreignKey && (
-                    <p className="mt-0.5 text-[10px] text-orange-600">
+                    <p className="mt-0.5 text-[10px] text-amber-600">
                       FK: {config.foreignKey} &rarr; {currentTableName || "메인 테이블"}.id
                     </p>
                   )}
@@ -500,7 +500,7 @@ export function V2BomTreeConfigPanel({
                                 config.detailTable === rel.tableName ? "opacity-100" : "opacity-0",
                               )}
                             />
-                            <Link2 className="mr-2 h-3 w-3 text-orange-500" />
+                            <Link2 className="mr-2 h-3 w-3 text-amber-500" />
                             <span>{rel.tableLabel}</span>
                             <span className="text-muted-foreground ml-1 text-[10px]">
                               ({rel.foreignKeyColumn})
@@ -529,7 +529,7 @@ export function V2BomTreeConfigPanel({
                                 config.detailTable === table.tableName ? "opacity-100" : "opacity-0",
                               )}
                             />
-                            <Database className="mr-2 h-3 w-3 text-gray-400" />
+                            <Database className="mr-2 h-3 w-3 text-muted-foreground/70" />
                             <span>{table.displayName}</span>
                           </CommandItem>
                         ))}
@@ -602,8 +602,8 @@ export function V2BomTreeConfigPanel({
                 </div>
               </div>
             ) : (
-              <div className="rounded border border-gray-200 bg-gray-50 p-2">
-                <p className="text-[10px] text-gray-500">
+              <div className="rounded border border-border bg-muted p-2">
+                <p className="text-[10px] text-muted-foreground">
                   {loadingColumns ? "로딩 중..." : "디테일 테이블을 먼저 선택하세요"}
                 </p>
               </div>
@@ -632,18 +632,18 @@ export function V2BomTreeConfigPanel({
                   {entityColumns.map((col) => (
                     <SelectItem key={col.columnName} value={col.columnName}>
                       <div className="flex items-center gap-2">
-                        <Link2 className="h-3 w-3 text-blue-500" />
+                        <Link2 className="h-3 w-3 text-primary" />
                         <span>{col.displayName}</span>
-                        <ArrowRight className="h-3 w-3 text-gray-400" />
-                        <span className="text-gray-500">{col.referenceTable}</span>
+                        <ArrowRight className="h-3 w-3 text-muted-foreground/70" />
+                        <span className="text-muted-foreground">{col.referenceTable}</span>
                       </div>
                     </SelectItem>
                   ))}
                 </SelectContent>
               </Select>
             ) : (
-              <div className="rounded border border-gray-200 bg-gray-50 p-2">
-                <p className="text-[10px] text-gray-500">
+              <div className="rounded border border-border bg-muted p-2">
+                <p className="text-[10px] text-muted-foreground">
                   {loadingColumns
                     ? "로딩 중..."
                     : !config.detailTable
@@ -654,9 +654,9 @@ export function V2BomTreeConfigPanel({
             )}
 
             {config.dataSource?.sourceTable && (
-              <div className="space-y-1 rounded border border-green-200 bg-green-50 p-2">
-                <p className="text-xs font-medium text-green-700">선택된 엔티티</p>
-                <div className="text-[10px] text-green-600">
+              <div className="space-y-1 rounded border border-emerald-200 bg-emerald-50 p-2">
+                <p className="text-xs font-medium text-emerald-700">선택된 엔티티</p>
+                <div className="text-[10px] text-emerald-600">
                   <p>참조 테이블: {config.dataSource.sourceTable}</p>
                   <p>FK 컬럼: {config.dataSource.foreignKey}</p>
                 </div>
@@ -723,7 +723,7 @@ export function V2BomTreeConfigPanel({
                                     config.historyTable === table.tableName ? "opacity-100" : "opacity-0",
                                   )}
                                 />
-                                <Database className="mr-2 h-3 w-3 text-gray-400" />
+                                <Database className="mr-2 h-3 w-3 text-muted-foreground/70" />
                                 <span>{table.displayName}</span>
                               </CommandItem>
                             ))}
@@ -784,7 +784,7 @@ export function V2BomTreeConfigPanel({
                                     config.versionTable === table.tableName ? "opacity-100" : "opacity-0",
                                   )}
                                 />
-                                <Database className="mr-2 h-3 w-3 text-gray-400" />
+                                <Database className="mr-2 h-3 w-3 text-muted-foreground/70" />
                                 <span>{table.displayName}</span>
                               </CommandItem>
                             ))}
@@ -853,9 +853,9 @@ export function V2BomTreeConfigPanel({
               <Separator />
               <div className="space-y-2">
                 <Label className="text-xs font-medium">메인 화면 테이블 (참고)</Label>
-                <div className="rounded border border-gray-200 bg-gray-50 p-2">
-                  <p className="text-xs font-medium text-gray-700">{currentTableName}</p>
-                  <p className="text-[10px] text-gray-500">
+                <div className="rounded border border-border bg-muted p-2">
+                  <p className="text-xs font-medium text-foreground">{currentTableName}</p>
+                  <p className="text-[10px] text-muted-foreground">
                     컬럼 {detailTableColumns.length}개 / 엔티티 {entityColumns.length}개
                   </p>
                 </div>
@@ -875,7 +875,7 @@ export function V2BomTreeConfigPanel({
             {/* 소스 테이블 컬럼 (표시용) */}
             {config.dataSource?.sourceTable && (
               <>
-                <div className="mb-1 mt-2 flex items-center gap-1 text-[10px] font-medium text-blue-600">
+                <div className="mb-1 mt-2 flex items-center gap-1 text-[10px] font-medium text-primary">
                   <Link2 className="h-3 w-3" />
                   소스 테이블 ({config.dataSource.sourceTable}) - 표시용
                 </div>
@@ -884,13 +884,13 @@ export function V2BomTreeConfigPanel({
                 ) : sourceTableColumns.length === 0 ? (
                   <p className="text-muted-foreground py-2 text-xs">컬럼 정보가 없습니다</p>
                 ) : (
-                  <div className="max-h-28 space-y-0.5 overflow-y-auto rounded-md border border-blue-200 bg-blue-50/30 p-2">
+                  <div className="max-h-28 space-y-0.5 overflow-y-auto rounded-md border border-primary/20 bg-primary/10/30 p-2">
                     {sourceTableColumns.map((column) => (
                       <div
                         key={`source-${column.columnName}`}
                         className={cn(
-                          "flex cursor-pointer items-center gap-2 rounded px-2 py-1 hover:bg-blue-100/50",
-                          isSourceColumnSelected(column.columnName) && "bg-blue-100",
+                          "flex cursor-pointer items-center gap-2 rounded px-2 py-1 hover:bg-primary/10/50",
+                          isSourceColumnSelected(column.columnName) && "bg-primary/10",
                         )}
                         onClick={() => toggleSourceDisplayColumn(column)}
                       >
@@ -899,9 +899,9 @@ export function V2BomTreeConfigPanel({
                           onCheckedChange={() => toggleSourceDisplayColumn(column)}
                           className="pointer-events-none h-3.5 w-3.5"
                         />
-                        <Link2 className="h-3 w-3 flex-shrink-0 text-blue-500" />
+                        <Link2 className="h-3 w-3 flex-shrink-0 text-primary" />
                         <span className="truncate text-xs">{column.displayName}</span>
-                        <span className="ml-auto text-[10px] text-blue-400">표시</span>
+                        <span className="ml-auto text-[10px] text-primary/80">표시</span>
                       </div>
                     ))}
                   </div>
@@ -910,7 +910,7 @@ export function V2BomTreeConfigPanel({
             )}
 
             {/* 디테일 테이블 컬럼 */}
-            <div className="mb-1 mt-3 flex items-center gap-1 text-[10px] font-medium text-gray-600">
+            <div className="mb-1 mt-3 flex items-center gap-1 text-[10px] font-medium text-muted-foreground">
               <Database className="h-3 w-3" />
               디테일 테이블 ({config.detailTable || "미선택"}) - 직접 컬럼
             </div>
@@ -936,7 +936,7 @@ export function V2BomTreeConfigPanel({
                     />
                     <Database className="text-muted-foreground h-3 w-3 flex-shrink-0" />
                     <span className="truncate text-xs">{column.displayName}</span>
-                    <span className="ml-auto text-[10px] text-gray-400">{column.inputType}</span>
+                    <span className="ml-auto text-[10px] text-muted-foreground/70">{column.inputType}</span>
                   </div>
                 ))}
               </div>
@@ -959,8 +959,8 @@ export function V2BomTreeConfigPanel({
                         className={cn(
                           "flex items-center gap-2 rounded-md border p-2",
                           col.isSourceDisplay
-                            ? "border-blue-200 bg-blue-50/50"
-                            : "border-gray-200 bg-muted/30",
+                            ? "border-primary/20 bg-primary/10/50"
+                            : "border-border bg-muted/30",
                           col.hidden && "opacity-50",
                         )}
                         draggable
@@ -985,18 +985,18 @@ export function V2BomTreeConfigPanel({
                             onClick={() =>
                               setExpandedColumn(expandedColumn === col.key ? null : col.key)
                             }
-                            className="rounded p-0.5 hover:bg-gray-200"
+                            className="rounded p-0.5 hover:bg-muted/80"
                           >
                             {expandedColumn === col.key ? (
-                              <ChevronDown className="h-3 w-3 text-gray-500" />
+                              <ChevronDown className="h-3 w-3 text-muted-foreground" />
                             ) : (
-                              <ChevronRight className="h-3 w-3 text-gray-500" />
+                              <ChevronRight className="h-3 w-3 text-muted-foreground" />
                             )}
                           </button>
                         )}
 
                         {col.isSourceDisplay ? (
-                          <Link2 className="h-3 w-3 flex-shrink-0 text-blue-500" title="소스 표시" />
+                          <Link2 className="h-3 w-3 flex-shrink-0 text-primary" title="소스 표시" />
                         ) : (
                           <Database className="text-muted-foreground h-3 w-3 flex-shrink-0" />
                         )}
@@ -1013,8 +1013,8 @@ export function V2BomTreeConfigPanel({
                             type="button"
                             onClick={() => updateColumnProp(col.key, "hidden", !col.hidden)}
                             className={cn(
-                              "rounded p-1 hover:bg-gray-200",
-                              col.hidden ? "text-gray-400" : "text-gray-600",
+                              "rounded p-1 hover:bg-muted/80",
+                              col.hidden ? "text-muted-foreground/70" : "text-muted-foreground",
                             )}
                             title={col.hidden ? "히든" : "표시됨"}
                           >
@@ -1045,9 +1045,9 @@ export function V2BomTreeConfigPanel({
 
                       {/* 확장 상세 */}
                       {!col.isSourceDisplay && expandedColumn === col.key && (
-                        <div className="ml-6 space-y-2 rounded-md border border-dashed border-gray-300 bg-gray-50 p-2">
+                        <div className="ml-6 space-y-2 rounded-md border border-dashed border-input bg-muted p-2">
                           <div className="space-y-1">
-                            <Label className="text-[10px] text-gray-600">컬럼 너비</Label>
+                            <Label className="text-[10px] text-muted-foreground">컬럼 너비</Label>
                             <Input
                               value={col.width || "auto"}
                               onChange={(e) => updateColumnProp(col.key, "width", e.target.value)}
diff --git a/frontend/components/v2/config-panels/V2InputConfigPanel.tsx b/frontend/components/v2/config-panels/V2InputConfigPanel.tsx
index 46992042..b6239bfe 100644
--- a/frontend/components/v2/config-panels/V2InputConfigPanel.tsx
+++ b/frontend/components/v2/config-panels/V2InputConfigPanel.tsx
@@ -126,9 +126,9 @@ export const V2InputConfigPanel: React.FC<V2InputConfigPanelProps> = ({ config,
       {config.inputType === "numbering" && (
         <div className="space-y-3">
           <Separator />
-          <div className="rounded-md border border-blue-200 bg-blue-50 p-3">
-            <p className="text-xs font-medium text-blue-800">채번 타입 안내</p>
-            <p className="mt-1 text-[10px] text-blue-700">
+          <div className="rounded-md border border-primary/20 bg-primary/10 p-3">
+            <p className="text-xs font-medium text-primary">채번 타입 안내</p>
+            <p className="mt-1 text-[10px] text-primary">
               채번 규칙은 <strong>테이블 관리</strong>에서 컬럼별로 설정됩니다.
               <br />
               화면에 배치된 컬럼의 채번 규칙이 자동으로 적용됩니다.
diff --git a/frontend/components/v2/config-panels/V2RepeaterConfigPanel.tsx b/frontend/components/v2/config-panels/V2RepeaterConfigPanel.tsx
index 92fb7341..e3f5f6cc 100644
--- a/frontend/components/v2/config-panels/V2RepeaterConfigPanel.tsx
+++ b/frontend/components/v2/config-panels/V2RepeaterConfigPanel.tsx
@@ -810,7 +810,7 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
                   <SelectItem key={opt.value} value={opt.value}>
                     <div className="flex flex-col">
                       <span>{opt.label}</span>
-                      <span className="text-[10px] text-gray-400">
+                      <span className="text-[10px] text-muted-foreground/70">
                         {opt.value === "inline" && "현재 테이블 컬럼 직접 입력"}
                         {opt.value === "modal" && "엔티티 선택 후 추가 정보 입력"}
                         {opt.value === "button" && "버튼으로 관련 화면 열기"}
@@ -832,22 +832,22 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
             <div className={cn(
               "rounded-lg border p-3",
               config.useCustomTable && config.mainTableName
-                ? "border-orange-300 bg-orange-50"
-                : "border-blue-300 bg-blue-50"
+                ? "border-orange-300 bg-amber-50"
+                : "border-primary/40 bg-primary/10"
             )}>
               <div className="flex items-center gap-2">
                 <Database className={cn(
                   "h-4 w-4",
                   config.useCustomTable && config.mainTableName
-                    ? "text-orange-600"
-                    : "text-blue-600"
+                    ? "text-amber-600"
+                    : "text-primary"
                 )} />
                 <div className="flex-1">
                   <p className={cn(
                     "text-sm font-medium",
                     config.useCustomTable && config.mainTableName
                       ? "text-orange-700"
-                      : "text-blue-700"
+                      : "text-primary"
                   )}>
                     {config.useCustomTable && config.mainTableName
                       ? (allTables.find(t => t.tableName === config.mainTableName)?.displayName || config.mainTableName)
@@ -855,12 +855,12 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
                     }
                   </p>
                   {config.useCustomTable && config.mainTableName && config.foreignKeyColumn && (
-                    <p className="text-[10px] text-orange-600 mt-0.5">
+                    <p className="text-[10px] text-amber-600 mt-0.5">
                       FK: {config.foreignKeyColumn} → {currentTableName}.{config.foreignKeySourceColumn || "id"}
                     </p>
                   )}
                   {!config.useCustomTable && currentTableName && (
-                    <p className="text-[10px] text-blue-600 mt-0.5">화면 메인 테이블</p>
+                    <p className="text-[10px] text-primary mt-0.5">화면 메인 테이블</p>
                   )}
                 </div>
               </div>
@@ -909,7 +909,7 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
                               !config.useCustomTable || !config.mainTableName ? "opacity-100" : "opacity-0"
                             )}
                           />
-                          <Database className="mr-2 h-3 w-3 text-blue-500" />
+                          <Database className="mr-2 h-3 w-3 text-primary" />
                           <span>{currentTableName}</span>
                           <span className="ml-1 text-[10px] text-muted-foreground">(기본)</span>
                         </CommandItem>
@@ -935,7 +935,7 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
                                 config.mainTableName === rel.tableName ? "opacity-100" : "opacity-0"
                               )}
                             />
-                            <Link2 className="mr-2 h-3 w-3 text-orange-500" />
+                            <Link2 className="mr-2 h-3 w-3 text-amber-500" />
                             <span>{rel.tableLabel}</span>
                             <span className="ml-1 text-[10px] text-muted-foreground">
                               ({rel.foreignKeyColumn})
@@ -965,7 +965,7 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
                                 config.mainTableName === table.tableName ? "opacity-100" : "opacity-0"
                               )}
                             />
-                            <Database className="mr-2 h-3 w-3 text-gray-400" />
+                            <Database className="mr-2 h-3 w-3 text-muted-foreground/70" />
                             <span>{table.displayName}</span>
                           </CommandItem>
                         ))
@@ -1009,8 +1009,8 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
             
             {/* 화면 메인 테이블이 없을 때 안내 */}
             {config.useCustomTable && config.mainTableName && !currentTableName && (
-              <div className="rounded border border-blue-200 bg-blue-50 p-2">
-                <p className="text-[10px] text-blue-700">
+              <div className="rounded border border-primary/20 bg-primary/10 p-2">
+                <p className="text-[10px] text-primary">
                   독립 저장 모드: 화면 테이블 없이 직접 저장합니다.
                 </p>
               </div>
@@ -1023,9 +1023,9 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
           {currentTableName && (
             <div className="space-y-2">
               <Label className="text-xs font-medium">메인 화면 테이블 (참고)</Label>
-              <div className="rounded border border-gray-200 bg-gray-50 p-2">
-                <p className="text-xs text-gray-700 font-medium">{currentTableName}</p>
-                <p className="text-[10px] text-gray-500">
+              <div className="rounded border border-border bg-muted p-2">
+                <p className="text-xs text-foreground font-medium">{currentTableName}</p>
+                <p className="text-[10px] text-muted-foreground">
                   컬럼 {currentTableColumns.length}개 / 엔티티 {entityColumns.length}개
                 </p>
               </div>
@@ -1055,18 +1055,18 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
                       {entityColumns.map((col) => (
                         <SelectItem key={col.columnName} value={col.columnName}>
                           <div className="flex items-center gap-2">
-                            <Link2 className="h-3 w-3 text-blue-500" />
+                            <Link2 className="h-3 w-3 text-primary" />
                             <span>{col.displayName}</span>
-                            <ArrowRight className="h-3 w-3 text-gray-400" />
-                            <span className="text-gray-500">{col.referenceTable}</span>
+                            <ArrowRight className="h-3 w-3 text-muted-foreground/70" />
+                            <span className="text-muted-foreground">{col.referenceTable}</span>
                           </div>
                         </SelectItem>
                       ))}
                     </SelectContent>
                   </Select>
                 ) : (
-                  <div className="rounded border border-gray-200 bg-gray-50 p-2">
-                    <p className="text-[10px] text-gray-500">
+                  <div className="rounded border border-border bg-muted p-2">
+                    <p className="text-[10px] text-muted-foreground">
                       {loadingColumns 
                         ? "로딩 중..." 
                         : !targetTableForColumns 
@@ -1078,9 +1078,9 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
                 
                 {/* 선택된 엔티티 정보 */}
                 {config.dataSource?.sourceTable && (
-                  <div className="rounded border border-green-200 bg-green-50 p-2 space-y-1">
-                    <p className="text-xs text-green-700 font-medium">선택된 엔티티</p>
-                    <div className="text-[10px] text-green-600">
+                  <div className="rounded border border-emerald-200 bg-emerald-50 p-2 space-y-1">
+                    <p className="text-xs text-emerald-700 font-medium">선택된 엔티티</p>
+                    <div className="text-[10px] text-emerald-600">
                       <p>검색 테이블: {config.dataSource.sourceTable}</p>
                       <p>저장 컬럼: {config.dataSource.foreignKey} (FK)</p>
                     </div>
@@ -1295,7 +1295,7 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
             {/* 모달 모드: 소스 테이블 컬럼 (표시용) */}
             {isModalMode && config.dataSource?.sourceTable && (
               <>
-                <div className="text-[10px] font-medium text-blue-600 mt-2 mb-1 flex items-center gap-1">
+                <div className="text-[10px] font-medium text-primary mt-2 mb-1 flex items-center gap-1">
                   <Link2 className="h-3 w-3" />
                   소스 테이블 ({config.dataSource.sourceTable}) - 표시용
                 </div>
@@ -1304,13 +1304,13 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
                 ) : sourceTableColumns.length === 0 ? (
                   <p className="text-muted-foreground py-2 text-xs">컬럼 정보가 없습니다</p>
                 ) : (
-                  <div className="max-h-28 space-y-0.5 overflow-y-auto rounded-md border border-blue-200 bg-blue-50/30 p-2">
+                  <div className="max-h-28 space-y-0.5 overflow-y-auto rounded-md border border-primary/20 bg-primary/10/30 p-2">
                     {sourceTableColumns.map((column) => (
                       <div
                         key={`source-${column.columnName}`}
                         className={cn(
-                          "hover:bg-blue-100/50 flex cursor-pointer items-center gap-2 rounded px-2 py-1",
-                          isSourceColumnSelected(column.columnName) && "bg-blue-100",
+                          "hover:bg-primary/10/50 flex cursor-pointer items-center gap-2 rounded px-2 py-1",
+                          isSourceColumnSelected(column.columnName) && "bg-primary/10",
                         )}
                         onClick={() => toggleSourceDisplayColumn(column)}
                       >
@@ -1319,9 +1319,9 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
                           onCheckedChange={() => toggleSourceDisplayColumn(column)}
                           className="pointer-events-none h-3.5 w-3.5"
                         />
-                        <Link2 className="text-blue-500 h-3 w-3 flex-shrink-0" />
+                        <Link2 className="text-primary h-3 w-3 flex-shrink-0" />
                         <span className="truncate text-xs">{column.displayName}</span>
-                        <span className="text-[10px] text-blue-400 ml-auto">표시</span>
+                        <span className="text-[10px] text-primary/80 ml-auto">표시</span>
                       </div>
                     ))}
                   </div>
@@ -1330,7 +1330,7 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
           )}
 
             {/* 저장 테이블 컬럼 (입력용) */}
-            <div className="text-[10px] font-medium text-gray-600 mt-3 mb-1 flex items-center gap-1">
+            <div className="text-[10px] font-medium text-muted-foreground mt-3 mb-1 flex items-center gap-1">
               <Database className="h-3 w-3" />
               저장 테이블 ({targetTableForColumns || "미선택"}) - 입력용
             </div>
@@ -1358,7 +1358,7 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
                     />
                     <Database className="text-muted-foreground h-3 w-3 flex-shrink-0" />
                     <span className="truncate text-xs">{column.displayName}</span>
-                    <span className="text-[10px] text-gray-400 ml-auto">{column.inputType}</span>
+                    <span className="text-[10px] text-muted-foreground/70 ml-auto">{column.inputType}</span>
                   </div>
                 ))}
               </div>
@@ -1381,7 +1381,7 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
                       <div
                         className={cn(
                           "flex items-center gap-2 rounded-md border p-2",
-                          col.isSourceDisplay ? "border-blue-200 bg-blue-50/50" : "border-gray-200 bg-muted/30",
+                          col.isSourceDisplay ? "border-primary/20 bg-primary/10/50" : "border-border bg-muted/30",
                           col.hidden && "opacity-50",
                         )}
                         draggable
@@ -1407,18 +1407,18 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
                           <button
                             type="button"
                             onClick={() => setExpandedColumn(expandedColumn === col.key ? null : col.key)}
-                            className="p-0.5 hover:bg-gray-200 rounded"
+                            className="p-0.5 hover:bg-muted/80 rounded"
                           >
                             {expandedColumn === col.key ? (
-                              <ChevronDown className="h-3 w-3 text-gray-500" />
+                              <ChevronDown className="h-3 w-3 text-muted-foreground" />
                             ) : (
-                              <ChevronRight className="h-3 w-3 text-gray-500" />
+                              <ChevronRight className="h-3 w-3 text-muted-foreground" />
                             )}
                           </button>
                         )}
                         
                         {col.isSourceDisplay ? (
-                          <Link2 className="text-blue-500 h-3 w-3 flex-shrink-0" title="소스 표시 (읽기 전용)" />
+                          <Link2 className="text-primary h-3 w-3 flex-shrink-0" title="소스 표시 (읽기 전용)" />
                         ) : (
                       <Database className="text-muted-foreground h-3 w-3 flex-shrink-0" />
                         )}
@@ -1436,8 +1436,8 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
                             type="button"
                             onClick={() => updateColumnProp(col.key, "hidden", !col.hidden)}
                             className={cn(
-                              "p-1 rounded hover:bg-gray-200",
-                              col.hidden ? "text-gray-400" : "text-gray-600",
+                              "p-1 rounded hover:bg-muted/80",
+                              col.hidden ? "text-muted-foreground/70" : "text-muted-foreground",
                             )}
                             title={col.hidden ? "히든 (저장만 됨)" : "표시됨"}
                       >
@@ -1459,7 +1459,7 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
                               "shrink-0 rounded px-1.5 py-0.5 text-[9px] font-medium transition-colors",
                               (col.editable ?? true)
                                 ? "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400"
-                                : "bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-400"
+                                : "bg-muted text-muted-foreground dark:bg-foreground/90 dark:text-muted-foreground/70"
                             )}
                             title={(col.editable ?? true) ? "편집 가능 (클릭하여 읽기 전용으로 변경)" : "읽기 전용 (클릭하여 편집 가능으로 변경)"}
                           >
@@ -1486,10 +1486,10 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
                       
                       {/* 확장된 상세 설정 (입력 컬럼만) */}
                       {!col.isSourceDisplay && expandedColumn === col.key && (
-                        <div className="ml-6 space-y-2 rounded-md border border-dashed border-gray-300 bg-gray-50 p-2">
+                        <div className="ml-6 space-y-2 rounded-md border border-dashed border-input bg-muted p-2">
                           {/* 자동 입력 설정 */}
                           <div className="space-y-1">
-                            <Label className="text-[10px] text-gray-600">자동 입력</Label>
+                            <Label className="text-[10px] text-muted-foreground">자동 입력</Label>
                             <Select
                               value={col.autoFill?.type || "none"}
                               onValueChange={(value) => {
@@ -1515,7 +1515,7 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
                                             <div className="space-y-2">
                                               {/* 대상 메뉴 선택 */}
                                               <div className="space-y-1">
-                                                <Label className="text-[10px] text-gray-600">
+                                                <Label className="text-[10px] text-muted-foreground">
                                                   대상 메뉴 선택 <span className="text-destructive">*</span>
                                                 </Label>
                                                 <Select
@@ -1558,11 +1558,11 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
                                               {/* 채번 규칙 선택 (메뉴 선택 후) */}
                                               {selectedMenuObjid ? (
                                                 <div className="space-y-1">
-                                                  <Label className="text-[10px] text-gray-600">
+                                                  <Label className="text-[10px] text-muted-foreground">
                                                     채번 규칙 선택 <span className="text-destructive">*</span>
                                                   </Label>
                                                   {loadingNumberingRules ? (
-                                                    <p className="text-[10px] text-gray-400">규칙 로딩 중...</p>
+                                                    <p className="text-[10px] text-muted-foreground/70">규칙 로딩 중...</p>
                                                   ) : numberingRules.length === 0 ? (
                                                     <div className="rounded-md border border-amber-200 bg-amber-50 p-2 text-[10px] text-amber-800">
                                                       선택된 메뉴에 사용 가능한 채번 규칙이 없습니다
@@ -1594,7 +1594,7 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
                                                     </Select>
                                                   )}
                                                   {col.autoFill?.numberingRuleId && (
-                                                    <p className="text-[10px] text-green-600">
+                                                    <p className="text-[10px] text-emerald-600">
                                                       저장 시 채번 API를 통해 자동 생성됩니다.
                                                     </p>
                                                   )}
@@ -1610,7 +1610,7 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
                           {/* 메인 폼에서 복사 설정 */}
                           {col.autoFill?.type === "fromMainForm" && (
                             <div className="space-y-1">
-                              <Label className="text-[10px] text-gray-600">복사할 필드명</Label>
+                              <Label className="text-[10px] text-muted-foreground">복사할 필드명</Label>
                               <Input
                                 value={col.autoFill?.sourceField || ""}
                                 onChange={(e) => updateColumnProp(col.key, "autoFill", {
@@ -1626,7 +1626,7 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
                           {/* 고정값 설정 */}
                           {col.autoFill?.type === "fixed" && (
                             <div className="space-y-1">
-                              <Label className="text-[10px] text-gray-600">고정값</Label>
+                              <Label className="text-[10px] text-muted-foreground">고정값</Label>
                               <Input
                                 value={String(col.autoFill?.fixedValue || "")}
                                 onChange={(e) => updateColumnProp(col.key, "autoFill", {
@@ -1643,7 +1643,7 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
                           {col.autoFill?.type === "parentSequence" && (
                             <div className="space-y-2">
                               <div className="space-y-1">
-                                <Label className="text-[10px] text-gray-600">부모 번호 필드명</Label>
+                                <Label className="text-[10px] text-muted-foreground">부모 번호 필드명</Label>
                                 <Input
                                   value={col.autoFill?.parentField || ""}
                                   onChange={(e) => updateColumnProp(col.key, "autoFill", {
@@ -1653,11 +1653,11 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
                                   placeholder="work_order_no"
                                   className="h-6 text-xs"
                                 />
-                                <p className="text-[10px] text-gray-400">메인 폼에서 가져올 부모 채번 필드</p>
+                                <p className="text-[10px] text-muted-foreground/70">메인 폼에서 가져올 부모 채번 필드</p>
                               </div>
                               <div className="flex gap-2">
                                 <div className="flex-1 space-y-1">
-                                  <Label className="text-[10px] text-gray-600">구분자</Label>
+                                  <Label className="text-[10px] text-muted-foreground">구분자</Label>
                                   <Input
                                     value={col.autoFill?.separator ?? "-"}
                                     onChange={(e) => updateColumnProp(col.key, "autoFill", {
@@ -1669,7 +1669,7 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
                                   />
                                 </div>
                                 <div className="flex-1 space-y-1">
-                                  <Label className="text-[10px] text-gray-600">순번 자릿수</Label>
+                                  <Label className="text-[10px] text-muted-foreground">순번 자릿수</Label>
                                   <Input
                                     type="number"
                                     min={1}
@@ -1683,7 +1683,7 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
                                   />
                                 </div>
                               </div>
-                              <p className="text-[10px] text-green-600">
+                              <p className="text-[10px] text-emerald-600">
                                 예시: WO-20260223-005{col.autoFill?.separator ?? "-"}{String(1).padStart(col.autoFill?.sequenceLength ?? 2, "0")}
                               </p>
                             </div>
@@ -1779,7 +1779,7 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
                             variant="outline"
                             size="sm"
                             onClick={() => insertColumnToFormula(rule.id, col.key)}
-                            className="h-4 border-dashed px-1 text-[9px] text-blue-600"
+                            className="h-4 border-dashed px-1 text-[9px] text-primary"
                             title="품목 정보 컬럼"
                           >
                             {col.title || col.key}
@@ -1840,12 +1840,12 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
 
                   return (
                     <div key={tableIndex} className="space-y-1">
-                      <div className="mb-1 flex items-center gap-2 text-[10px] font-medium text-blue-600">
+                      <div className="mb-1 flex items-center gap-2 text-[10px] font-medium text-primary">
                         <Link2 className="h-3 w-3" />
                         <span>{joinTable.tableName}</span>
                         <span className="text-muted-foreground">({sourceColumn})</span>
                       </div>
-                      <div className="max-h-40 space-y-0.5 overflow-y-auto rounded-md border border-blue-200 bg-blue-50/30 p-2">
+                      <div className="max-h-40 space-y-0.5 overflow-y-auto rounded-md border border-primary/20 bg-primary/10/30 p-2">
                         {joinTable.availableColumns.map((column, colIndex) => {
                           const isActive = isEntityJoinColumnActive(
                             joinTable.tableName,
@@ -1859,8 +1859,8 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
                             <div
                               key={colIndex}
                               className={cn(
-                                "flex cursor-pointer items-center gap-2 rounded px-2 py-1 hover:bg-blue-100/50",
-                                isActive && "bg-blue-100",
+                                "flex cursor-pointer items-center gap-2 rounded px-2 py-1 hover:bg-primary/10/50",
+                                isActive && "bg-primary/10",
                               )}
                               onClick={() =>
                                 toggleEntityJoinColumn(
@@ -1876,9 +1876,9 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
                                 checked={isActive}
                                 className="pointer-events-none h-3.5 w-3.5"
                               />
-                              <Link2 className="h-3 w-3 flex-shrink-0 text-blue-500" />
+                              <Link2 className="h-3 w-3 flex-shrink-0 text-primary" />
                               <span className="truncate text-xs">{column.columnLabel}</span>
-                              <span className="ml-auto text-[10px] text-blue-400">
+                              <span className="ml-auto text-[10px] text-primary/80">
                                 {column.inputType || column.dataType}
                               </span>
                             </div>
@@ -1898,7 +1898,7 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
                 <div className="space-y-1">
                   {config.entityJoins.map((join, idx) => (
                     <div key={idx} className="flex items-center gap-1 rounded border bg-muted/30 px-2 py-1 text-[10px]">
-                      <Database className="h-3 w-3 text-blue-500" />
+                      <Database className="h-3 w-3 text-primary" />
                       <span className="font-medium">{join.sourceColumn}</span>
                       <ArrowRight className="h-3 w-3 text-muted-foreground" />
                       <span>{join.referenceTable}</span>
diff --git a/frontend/components/vehicle/VehicleReport.tsx b/frontend/components/vehicle/VehicleReport.tsx
index 51773c98..e075dd15 100644
--- a/frontend/components/vehicle/VehicleReport.tsx
+++ b/frontend/components/vehicle/VehicleReport.tsx
@@ -287,7 +287,7 @@ export default function VehicleReport() {
                   <Car className="h-3 w-3" />
                   진행 중
                 </div>
-                <div className="mt-1 text-2xl font-bold text-green-600">
+                <div className="mt-1 text-2xl font-bold text-emerald-600">
                   {summary.activeTrips}
                 </div>
                 <div className="text-xs text-muted-foreground">현재 운행</div>
diff --git a/frontend/components/webtypes/RepeaterInput.tsx b/frontend/components/webtypes/RepeaterInput.tsx
index 0349c6c3..365e6e25 100644
--- a/frontend/components/webtypes/RepeaterInput.tsx
+++ b/frontend/components/webtypes/RepeaterInput.tsx
@@ -543,7 +543,7 @@ export const RepeaterInput: React.FC<RepeaterInputProps> = ({
       const calculatedValue = calculateValue(field.formula, item);
       const formattedValue = formatNumber(calculatedValue, field.numberFormat);
 
-      return <span className="inline-block min-w-[80px] text-sm font-medium text-blue-700">{formattedValue}</span>;
+      return <span className="inline-block min-w-[80px] text-sm font-medium text-primary">{formattedValue}</span>;
     }
 
     // 카테고리 타입은 항상 배지로 표시 (카테고리 관리에서 설정한 색상 적용)
@@ -707,11 +707,11 @@ export const RepeaterInput: React.FC<RepeaterInputProps> = ({
                 onChange={(e) => handleFieldChange(itemIndex, field.name, e.target.value)}
                 min={field.validation?.min}
                 max={maxValue !== null ? maxValue : field.validation?.max}
-                className={cn("pr-1", exceedsMax && "border-red-500", showWarning && !exceedsMax && "border-amber-500")}
+                className={cn("pr-1", exceedsMax && "border-destructive", showWarning && !exceedsMax && "border-amber-500")}
               />
               {value && <div className="text-muted-foreground mt-0.5 text-[10px]">{formattedDisplay}</div>}
               {exceedsMax && (
-                <div className="mt-0.5 text-[10px] text-red-500">최대 {maxValue}까지 입력 가능</div>
+                <div className="mt-0.5 text-[10px] text-destructive">최대 {maxValue}까지 입력 가능</div>
               )}
               {showWarning && !exceedsMax && (
                 <div className="mt-0.5 text-[10px] text-amber-600">재고의 {subDataLookup?.conditionalInput?.warningThreshold ?? 90}% 이상</div>
@@ -728,10 +728,10 @@ export const RepeaterInput: React.FC<RepeaterInputProps> = ({
               onChange={(e) => handleFieldChange(itemIndex, field.name, e.target.value)}
               min={field.validation?.min}
               max={maxValue !== null ? maxValue : field.validation?.max}
-              className={cn(exceedsMax && "border-red-500", showWarning && !exceedsMax && "border-amber-500")}
+              className={cn(exceedsMax && "border-destructive", showWarning && !exceedsMax && "border-amber-500")}
             />
             {exceedsMax && (
-              <div className="mt-0.5 text-[10px] text-red-500">최대 {maxValue}까지 입력 가능</div>
+              <div className="mt-0.5 text-[10px] text-destructive">최대 {maxValue}까지 입력 가능</div>
             )}
             {showWarning && !exceedsMax && (
               <div className="mt-0.5 text-[10px] text-amber-600">재고의 {subDataLookup?.conditionalInput?.warningThreshold ?? 90}% 이상</div>
@@ -988,7 +988,7 @@ export const RepeaterInput: React.FC<RepeaterInputProps> = ({
 
                   {/* 하위 데이터 조회 패널 (인라인) */}
                   {subDataLookup?.enabled && linkValue && (
-                    <TableRow className="bg-gray-50/50">
+                    <TableRow className="bg-muted/50">
                       <TableCell
                         colSpan={
                           visibleFields.length + (showIndex ? 1 : 0) + (allowReorder && !readonly && !disabled ? 1 : 0) + 1
diff --git a/frontend/components/webtypes/config/RepeaterConfigPanel.tsx b/frontend/components/webtypes/config/RepeaterConfigPanel.tsx
index 09b2d7e0..31b8fede 100644
--- a/frontend/components/webtypes/config/RepeaterConfigPanel.tsx
+++ b/frontend/components/webtypes/config/RepeaterConfigPanel.tsx
@@ -436,7 +436,7 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
             </Command>
           </PopoverContent>
         </Popover>
-        <p className="text-xs text-gray-500">반복 필드 데이터를 저장할 테이블을 선택하세요.</p>
+        <p className="text-xs text-muted-foreground">반복 필드 데이터를 저장할 테이블을 선택하세요.</p>
       </div>
 
       {/* 그룹화 컬럼 설정 */}
@@ -458,7 +458,7 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
             ))}
           </SelectContent>
         </Select>
-        <p className="text-xs text-gray-500">
+        <p className="text-xs text-muted-foreground">
           수정 모드에서 이 컬럼 값을 기준으로 관련된 모든 데이터를 조회합니다.
           <br />
           예: 입고번호를 선택하면 같은 입고번호를 가진 모든 품목이 표시됩니다.
@@ -484,7 +484,7 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
             ))}
           </SelectContent>
         </Select>
-        <p className="text-xs text-gray-500">
+        <p className="text-xs text-muted-foreground">
           분할 패널에서 좌측 테이블 선택 시 이 컬럼을 기준으로 데이터를 필터링합니다.
           <br />
           예: serial_no를 선택하면 좌측에서 선택한 장비의 serial_no에 해당하는 데이터만 표시됩니다.
@@ -565,7 +565,7 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
                             />
                             <div>
                               <div className="font-medium">{table.displayName || table.tableName}</div>
-                              <div className="text-gray-500">{table.tableName}</div>
+                              <div className="text-muted-foreground">{table.tableName}</div>
                             </div>
                           </CommandItem>
                         ))}
@@ -632,7 +632,7 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
                             />
                             <div>
                               <div className="font-medium">{col.columnLabel || col.columnName}</div>
-                              <div className="text-gray-500">{col.columnName}</div>
+                              <div className="text-muted-foreground">{col.columnName}</div>
                             </div>
                           </CommandItem>
                         ))}
@@ -663,7 +663,7 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
                           className="flex-1 cursor-pointer text-xs font-normal"
                         >
                           {col.columnLabel || col.columnName}
-                          <span className="ml-1 text-gray-400">({col.columnName})</span>
+                          <span className="ml-1 text-muted-foreground/70">({col.columnName})</span>
                         </Label>
                       </div>
                     );
@@ -700,7 +700,7 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
                               onClick={() => handleDisplayColumnMoveUp(colName)}
                               disabled={isFirst}
                             >
-                              <ArrowUp className={cn("h-3 w-3", isFirst ? "text-gray-300" : "text-purple-600")} />
+                              <ArrowUp className={cn("h-3 w-3", isFirst ? "text-muted-foreground/50" : "text-purple-600")} />
                             </Button>
                             <Button
                               type="button"
@@ -710,7 +710,7 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
                               onClick={() => handleDisplayColumnMoveDown(colName)}
                               disabled={isLast}
                             >
-                              <ArrowDown className={cn("h-3 w-3", isLast ? "text-gray-300" : "text-purple-600")} />
+                              <ArrowDown className={cn("h-3 w-3", isLast ? "text-muted-foreground/50" : "text-purple-600")} />
                             </Button>
                           </div>
                           
@@ -720,13 +720,13 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
                           {/* 컬럼명 */}
                           <div className="flex-1 text-xs">
                             <span className="font-medium">{col?.columnLabel || colName}</span>
-                            <span className="ml-1 text-gray-400">({colName})</span>
+                            <span className="ml-1 text-muted-foreground/70">({colName})</span>
                           </div>
                         </div>
                         
                         {/* 중단: 라벨 입력 */}
                         <div className="mt-1.5 flex items-center gap-2">
-                          <span className="text-[10px] text-gray-500 whitespace-nowrap">표시 라벨:</span>
+                          <span className="text-[10px] text-muted-foreground whitespace-nowrap">표시 라벨:</span>
                           <Input
                             value={currentLabel}
                             onChange={(e) => handleColumnLabelChange(colName, e.target.value)}
@@ -842,7 +842,7 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
                         선택 안함
                       </SelectItem>
                       {localFields.length === 0 ? (
-                        <SelectItem value="__empty__" disabled className="text-xs text-gray-400">
+                        <SelectItem value="__empty__" disabled className="text-xs text-muted-foreground/70">
                           필드 정의에서 먼저 필드를 추가하세요
                         </SelectItem>
                       ) : (
@@ -982,7 +982,7 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
       <div className="space-y-3">
         <div className="flex items-center justify-between">
           <Label className="text-sm font-semibold">필드 정의</Label>
-          <span className="text-xs text-gray-500">드래그하거나 화살표로 순서 변경</span>
+          <span className="text-xs text-muted-foreground">드래그하거나 화살표로 순서 변경</span>
         </div>
 
         {localFields.map((field, index) => (
@@ -990,7 +990,7 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
             key={`${field.name}-${index}`}
             className={cn(
               "border-2 transition-all",
-              draggedFieldIndex === index && "opacity-50 border-blue-400",
+              draggedFieldIndex === index && "opacity-50 border-primary/60",
               draggedFieldIndex !== null && draggedFieldIndex !== index && "border-dashed",
             )}
             draggable
@@ -1003,8 +1003,8 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
               <div className="flex items-center justify-between">
                 <div className="flex items-center gap-2">
                   {/* 드래그 핸들 */}
-                  <GripVertical className="h-4 w-4 cursor-move text-gray-400 hover:text-gray-600" />
-                  <span className="text-sm font-semibold text-gray-700">필드 {index + 1}</span>
+                  <GripVertical className="h-4 w-4 cursor-move text-muted-foreground/70 hover:text-muted-foreground" />
+                  <span className="text-sm font-semibold text-foreground">필드 {index + 1}</span>
                 </div>
                 <div className="flex items-center gap-1">
                   {/* 순서 변경 버튼 */}
@@ -1014,7 +1014,7 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
                     size="icon"
                     onClick={() => moveFieldUp(index)}
                     disabled={index === 0}
-                    className="h-6 w-6 text-gray-500 hover:bg-gray-100 disabled:opacity-30"
+                    className="h-6 w-6 text-muted-foreground hover:bg-muted disabled:opacity-30"
                     title="위로 이동"
                   >
                     <ArrowUp className="h-3 w-3" />
@@ -1025,7 +1025,7 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
                     size="icon"
                     onClick={() => moveFieldDown(index)}
                     disabled={index === localFields.length - 1}
-                    className="h-6 w-6 text-gray-500 hover:bg-gray-100 disabled:opacity-30"
+                    className="h-6 w-6 text-muted-foreground hover:bg-muted disabled:opacity-30"
                     title="아래로 이동"
                   >
                     <ArrowDown className="h-3 w-3" />
@@ -1036,7 +1036,7 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
                     variant="ghost"
                     size="icon"
                     onClick={() => removeField(index)}
-                    className="h-6 w-6 text-red-500 hover:bg-red-50"
+                    className="h-6 w-6 text-destructive hover:bg-destructive/10"
                     title="삭제"
                   >
                     <X className="h-3 w-3" />
@@ -1106,7 +1106,7 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
                               />
                               <div>
                                 <div className="font-medium">{column.columnLabel}</div>
-                                <div className="text-gray-500">{column.columnName}</div>
+                                <div className="text-muted-foreground">{column.columnName}</div>
                               </div>
                             </CommandItem>
                           ))}
@@ -1180,15 +1180,15 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
 
               {/* 계산식 타입일 때 계산식 설정 */}
               {field.type === "calculated" && (
-                <div className="space-y-3 rounded-lg border border-blue-200 bg-blue-50 p-3">
+                <div className="space-y-3 rounded-lg border border-primary/20 bg-primary/10 p-3">
                   <div className="flex items-center gap-2">
-                    <Calculator className="h-4 w-4 text-blue-600" />
-                    <Label className="text-xs font-semibold text-blue-800">계산식 설정</Label>
+                    <Calculator className="h-4 w-4 text-primary" />
+                    <Label className="text-xs font-semibold text-primary">계산식 설정</Label>
                   </div>
 
                   {/* 필드 1 선택 */}
                   <div className="space-y-1">
-                    <Label className="text-[10px] text-blue-700">필드 1</Label>
+                    <Label className="text-[10px] text-primary">필드 1</Label>
                     <Select
                       value={field.formula?.field1 || ""}
                       onValueChange={(value) =>
@@ -1214,7 +1214,7 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
 
                   {/* 연산자 선택 */}
                   <div className="space-y-1">
-                    <Label className="text-[10px] text-blue-700">연산자</Label>
+                    <Label className="text-[10px] text-primary">연산자</Label>
                     <Select
                       value={field.formula?.operator || "+"}
                       onValueChange={(value) =>
@@ -1258,7 +1258,7 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
                   {/* 두 번째 필드 또는 상수값 */}
                   {!["round", "floor", "ceil", "abs"].includes(field.formula?.operator || "") ? (
                     <div className="space-y-1">
-                      <Label className="text-[10px] text-blue-700">필드 2 / 상수</Label>
+                      <Label className="text-[10px] text-primary">필드 2 / 상수</Label>
                       <Select
                         value={
                           field.formula?.field2 ||
@@ -1295,7 +1295,7 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
                                 {f.label || f.name}
                               </SelectItem>
                             ))}
-                          <SelectItem value="__const__0" className="text-xs text-blue-600">
+                          <SelectItem value="__const__0" className="text-xs text-primary">
                             상수값 입력
                           </SelectItem>
                         </SelectContent>
@@ -1303,7 +1303,7 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
                     </div>
                   ) : (
                     <div className="space-y-1">
-                      <Label className="text-[10px] text-blue-700">소수점 자릿수</Label>
+                      <Label className="text-[10px] text-primary">소수점 자릿수</Label>
                       <Input
                         type="number"
                         min={0}
@@ -1325,7 +1325,7 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
                   {/* 상수값 입력 필드 */}
                   {field.formula?.constantValue !== undefined && (
                     <div className="space-y-1">
-                      <Label className="text-[10px] text-blue-700">상수값</Label>
+                      <Label className="text-[10px] text-primary">상수값</Label>
                       <Input
                         type="number"
                         value={field.formula.constantValue}
@@ -1344,8 +1344,8 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
                   )}
 
                   {/* 숫자 포맷 설정 */}
-                  <div className="space-y-2 border-t border-blue-200 pt-2">
-                    <Label className="text-[10px] text-blue-700">숫자 표시 형식</Label>
+                  <div className="space-y-2 border-t border-primary/20 pt-2">
+                    <Label className="text-[10px] text-primary">숫자 표시 형식</Label>
                     <div className="flex items-center gap-4">
                       <div className="flex items-center space-x-2">
                         <Checkbox
@@ -1403,8 +1403,8 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
 
                   {/* 계산식 미리보기 */}
                   <div className="rounded bg-white p-2 text-xs">
-                    <span className="text-gray-500">계산식: </span>
-                    <code className="font-mono text-blue-700">
+                    <span className="text-muted-foreground">계산식: </span>
+                    <code className="font-mono text-primary">
                       {field.formula?.field1 || "필드1"} {field.formula?.operator || "+"}{" "}
                       {field.formula?.field2 ||
                         (field.formula?.constantValue !== undefined ? field.formula.constantValue : "필드2")}
@@ -1415,8 +1415,8 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
 
               {/* 숫자 타입일 때 숫자 표시 형식 설정 */}
               {field.type === "number" && (
-                <div className="space-y-2 rounded-lg border border-gray-200 bg-gray-50 p-3">
-                  <Label className="text-xs font-semibold text-gray-700">숫자 표시 형식</Label>
+                <div className="space-y-2 rounded-lg border border-border bg-muted p-3">
+                  <Label className="text-xs font-semibold text-foreground">숫자 표시 형식</Label>
                   <div className="flex items-center gap-4">
                     <div className="flex items-center space-x-2">
                       <Checkbox
@@ -1749,9 +1749,9 @@ export const RepeaterConfigPanel: React.FC<RepeaterConfigPanelProps> = ({
       </div>
 
       {/* 사용 예시 */}
-      <div className="rounded-lg bg-blue-50 p-3 text-sm">
-        <p className="mb-1 font-medium text-blue-900">💡 사용 예시</p>
-        <ul className="space-y-1 text-xs text-blue-700">
+      <div className="rounded-lg bg-primary/10 p-3 text-sm">
+        <p className="mb-1 font-medium text-primary">💡 사용 예시</p>
+        <ul className="space-y-1 text-xs text-primary">
           <li>• 담당자 정보 (이름, 전화번호, 이메일)</li>
           <li>• 학력 정보 (학교명, 전공, 졸업년도)</li>
           <li>• 경력 사항 (회사명, 직책, 기간)</li>
diff --git a/frontend/contexts/TabIdContext.tsx b/frontend/contexts/TabIdContext.tsx
new file mode 100644
index 00000000..e22a7b06
--- /dev/null
+++ b/frontend/contexts/TabIdContext.tsx
@@ -0,0 +1,11 @@
+"use client";
+
+import { createContext, useContext } from "react";
+
+const TabIdContext = createContext<string | null>(null);
+
+export const TabIdProvider = TabIdContext.Provider;
+
+export function useTabId(): string | null {
+  return useContext(TabIdContext);
+}
diff --git a/frontend/hooks/admin/useWebTypes.ts b/frontend/hooks/admin/useWebTypes.ts
index 05bf4384..5ff1b734 100644
--- a/frontend/hooks/admin/useWebTypes.ts
+++ b/frontend/hooks/admin/useWebTypes.ts
@@ -88,8 +88,8 @@ export const useWebTypes = (params?: WebTypeQueryParams) => {
 
       return result.data || [];
     },
-    staleTime: 5 * 60 * 1000, // 5분간 캐시 유지
-    cacheTime: 10 * 60 * 1000, // 10분간 메모리 보관
+    staleTime: 5 * 60 * 1000,
+    gcTime: 10 * 60 * 1000,
   });
 
   // 웹타입 생성
diff --git a/frontend/lib/api/approval.ts b/frontend/lib/api/approval.ts
index fcde00de..6fe5c03e 100644
--- a/frontend/lib/api/approval.ts
+++ b/frontend/lib/api/approval.ts
@@ -3,42 +3,7 @@
  * 엔드포인트: /api/approval/*
  */
 
-// API URL 동적 설정
-const getApiBaseUrl = (): string => {
-  if (process.env.NEXT_PUBLIC_API_URL) {
-    return process.env.NEXT_PUBLIC_API_URL;
-  }
-
-  if (typeof window !== "undefined") {
-    const currentHost = window.location.hostname;
-
-    if (currentHost === "v1.vexplor.com") {
-      return "https://api.vexplor.com/api";
-    }
-
-    if (currentHost === "localhost" || currentHost === "127.0.0.1") {
-      return "http://localhost:8080/api";
-    }
-  }
-
-  return "/api";
-};
-
-const API_BASE = getApiBaseUrl();
-
-function getAuthToken(): string | null {
-  if (typeof window === "undefined") return null;
-  return localStorage.getItem("authToken") || sessionStorage.getItem("authToken");
-}
-
-function getAuthHeaders(): HeadersInit {
-  const token = getAuthToken();
-  const headers: HeadersInit = { "Content-Type": "application/json" };
-  if (token) {
-    (headers as Record<string, string>)["Authorization"] = `Bearer ${token}`;
-  }
-  return headers;
-}
+import { apiClient } from "@/lib/api/client";
 
 // ============================================================
 // 공통 타입 정의
@@ -90,6 +55,7 @@ export interface ApprovalLineTemplateStep {
   step_id: number;
   template_id: number;
   step_order: number;
+  step_type?: "approval" | "consensus" | "notification";
   approver_type: "user" | "position" | "dept";
   approver_user_id?: string;
   approver_position?: string;
@@ -98,6 +64,23 @@ export interface ApprovalLineTemplateStep {
   company_code: string;
 }
 
+export interface ApprovalProxySetting {
+  id: number;
+  original_user_id: string;
+  original_user_name?: string;
+  original_dept_name?: string;
+  proxy_user_id: string;
+  proxy_user_name?: string;
+  proxy_dept_name?: string;
+  start_date: string;
+  end_date: string;
+  reason?: string;
+  is_active: string;
+  company_code: string;
+  created_at: string;
+  updated_at: string;
+}
+
 export interface ApprovalRequest {
   request_id: number;
   title: string;
@@ -151,18 +134,22 @@ export interface CreateApprovalRequestInput {
   title: string;
   description?: string;
   definition_id?: number;
+  template_id?: number;
   target_table: string;
   target_record_id?: string;
   target_record_data?: Record<string, any>;
   screen_id?: number;
   button_component_id?: string;
   approval_mode?: "sequential" | "parallel";
+  approval_type?: "self" | "escalation" | "consensus" | "post";
   approvers: {
     approver_id: string;
     approver_name?: string;
     approver_position?: string;
     approver_dept?: string;
     approver_label?: string;
+    step_type?: "approval" | "consensus" | "notification";
+    step_order?: number;
   }[];
 }
 
@@ -175,15 +162,8 @@ export async function getApprovalDefinitions(params?: {
   search?: string;
 }): Promise<ApiResponse<ApprovalDefinition[]>> {
   try {
-    const qs = new URLSearchParams();
-    if (params?.is_active) qs.append("is_active", params.is_active);
-    if (params?.search) qs.append("search", params.search);
-
-    const response = await fetch(
-      `${API_BASE}/approval/definitions${qs.toString() ? `?${qs}` : ""}`,
-      { headers: getAuthHeaders(), credentials: "include" }
-    );
-    return await response.json();
+    const response = await apiClient.get("/approval/definitions", { params });
+    return response.data;
   } catch (error: any) {
     return { success: false, error: error.message };
   }
@@ -191,11 +171,8 @@ export async function getApprovalDefinitions(params?: {
 
 export async function getApprovalDefinition(id: number): Promise<ApiResponse<ApprovalDefinition>> {
   try {
-    const response = await fetch(`${API_BASE}/approval/definitions/${id}`, {
-      headers: getAuthHeaders(),
-      credentials: "include",
-    });
-    return await response.json();
+    const response = await apiClient.get(`/approval/definitions/${id}`);
+    return response.data;
   } catch (error: any) {
     return { success: false, error: error.message };
   }
@@ -212,13 +189,8 @@ export async function createApprovalDefinition(data: {
   is_active?: string;
 }): Promise<ApiResponse<ApprovalDefinition>> {
   try {
-    const response = await fetch(`${API_BASE}/approval/definitions`, {
-      method: "POST",
-      headers: getAuthHeaders(),
-      credentials: "include",
-      body: JSON.stringify(data),
-    });
-    return await response.json();
+    const response = await apiClient.post("/approval/definitions", data);
+    return response.data;
   } catch (error: any) {
     return { success: false, error: error.message };
   }
@@ -229,13 +201,8 @@ export async function updateApprovalDefinition(
   data: Partial<ApprovalDefinition>
 ): Promise<ApiResponse<ApprovalDefinition>> {
   try {
-    const response = await fetch(`${API_BASE}/approval/definitions/${id}`, {
-      method: "PUT",
-      headers: getAuthHeaders(),
-      credentials: "include",
-      body: JSON.stringify(data),
-    });
-    return await response.json();
+    const response = await apiClient.put(`/approval/definitions/${id}`, data);
+    return response.data;
   } catch (error: any) {
     return { success: false, error: error.message };
   }
@@ -243,12 +210,8 @@ export async function updateApprovalDefinition(
 
 export async function deleteApprovalDefinition(id: number): Promise<ApiResponse<void>> {
   try {
-    const response = await fetch(`${API_BASE}/approval/definitions/${id}`, {
-      method: "DELETE",
-      headers: getAuthHeaders(),
-      credentials: "include",
-    });
-    return await response.json();
+    const response = await apiClient.delete(`/approval/definitions/${id}`);
+    return response.data;
   } catch (error: any) {
     return { success: false, error: error.message };
   }
@@ -263,15 +226,8 @@ export async function getApprovalTemplates(params?: {
   is_active?: string;
 }): Promise<ApiResponse<ApprovalLineTemplate[]>> {
   try {
-    const qs = new URLSearchParams();
-    if (params?.definition_id) qs.append("definition_id", String(params.definition_id));
-    if (params?.is_active) qs.append("is_active", params.is_active);
-
-    const response = await fetch(
-      `${API_BASE}/approval/templates${qs.toString() ? `?${qs}` : ""}`,
-      { headers: getAuthHeaders(), credentials: "include" }
-    );
-    return await response.json();
+    const response = await apiClient.get("/approval/templates", { params });
+    return response.data;
   } catch (error: any) {
     return { success: false, error: error.message };
   }
@@ -279,11 +235,8 @@ export async function getApprovalTemplates(params?: {
 
 export async function getApprovalTemplate(id: number): Promise<ApiResponse<ApprovalLineTemplate>> {
   try {
-    const response = await fetch(`${API_BASE}/approval/templates/${id}`, {
-      headers: getAuthHeaders(),
-      credentials: "include",
-    });
-    return await response.json();
+    const response = await apiClient.get(`/approval/templates/${id}`);
+    return response.data;
   } catch (error: any) {
     return { success: false, error: error.message };
   }
@@ -297,13 +250,8 @@ export async function createApprovalTemplate(data: {
   steps?: Omit<ApprovalLineTemplateStep, "step_id" | "template_id" | "company_code">[];
 }): Promise<ApiResponse<ApprovalLineTemplate>> {
   try {
-    const response = await fetch(`${API_BASE}/approval/templates`, {
-      method: "POST",
-      headers: getAuthHeaders(),
-      credentials: "include",
-      body: JSON.stringify(data),
-    });
-    return await response.json();
+    const response = await apiClient.post("/approval/templates", data);
+    return response.data;
   } catch (error: any) {
     return { success: false, error: error.message };
   }
@@ -320,13 +268,8 @@ export async function updateApprovalTemplate(
   }
 ): Promise<ApiResponse<ApprovalLineTemplate>> {
   try {
-    const response = await fetch(`${API_BASE}/approval/templates/${id}`, {
-      method: "PUT",
-      headers: getAuthHeaders(),
-      credentials: "include",
-      body: JSON.stringify(data),
-    });
-    return await response.json();
+    const response = await apiClient.put(`/approval/templates/${id}`, data);
+    return response.data;
   } catch (error: any) {
     return { success: false, error: error.message };
   }
@@ -334,12 +277,8 @@ export async function updateApprovalTemplate(
 
 export async function deleteApprovalTemplate(id: number): Promise<ApiResponse<void>> {
   try {
-    const response = await fetch(`${API_BASE}/approval/templates/${id}`, {
-      method: "DELETE",
-      headers: getAuthHeaders(),
-      credentials: "include",
-    });
-    return await response.json();
+    const response = await apiClient.delete(`/approval/templates/${id}`);
+    return response.data;
   } catch (error: any) {
     return { success: false, error: error.message };
   }
@@ -359,20 +298,8 @@ export async function getApprovalRequests(params?: {
   limit?: number;
 }): Promise<ApiResponse<ApprovalRequest[]>> {
   try {
-    const qs = new URLSearchParams();
-    if (params?.status) qs.append("status", params.status);
-    if (params?.target_table) qs.append("target_table", params.target_table);
-    if (params?.target_record_id) qs.append("target_record_id", params.target_record_id);
-    if (params?.requester_id) qs.append("requester_id", params.requester_id);
-    if (params?.my_approvals !== undefined) qs.append("my_approvals", String(params.my_approvals));
-    if (params?.page) qs.append("page", String(params.page));
-    if (params?.limit) qs.append("limit", String(params.limit));
-
-    const response = await fetch(
-      `${API_BASE}/approval/requests${qs.toString() ? `?${qs}` : ""}`,
-      { headers: getAuthHeaders(), credentials: "include" }
-    );
-    return await response.json();
+    const response = await apiClient.get("/approval/requests", { params });
+    return response.data;
   } catch (error: any) {
     return { success: false, error: error.message };
   }
@@ -380,11 +307,8 @@ export async function getApprovalRequests(params?: {
 
 export async function getApprovalRequest(id: number): Promise<ApiResponse<ApprovalRequest>> {
   try {
-    const response = await fetch(`${API_BASE}/approval/requests/${id}`, {
-      headers: getAuthHeaders(),
-      credentials: "include",
-    });
-    return await response.json();
+    const response = await apiClient.get(`/approval/requests/${id}`);
+    return response.data;
   } catch (error: any) {
     return { success: false, error: error.message };
   }
@@ -394,13 +318,8 @@ export async function createApprovalRequest(
   data: CreateApprovalRequestInput
 ): Promise<ApiResponse<ApprovalRequest>> {
   try {
-    const response = await fetch(`${API_BASE}/approval/requests`, {
-      method: "POST",
-      headers: getAuthHeaders(),
-      credentials: "include",
-      body: JSON.stringify(data),
-    });
-    return await response.json();
+    const response = await apiClient.post("/approval/requests", data);
+    return response.data;
   } catch (error: any) {
     return { success: false, error: error.message };
   }
@@ -408,12 +327,8 @@ export async function createApprovalRequest(
 
 export async function cancelApprovalRequest(id: number): Promise<ApiResponse<void>> {
   try {
-    const response = await fetch(`${API_BASE}/approval/requests/${id}/cancel`, {
-      method: "POST",
-      headers: getAuthHeaders(),
-      credentials: "include",
-    });
-    return await response.json();
+    const response = await apiClient.post(`/approval/requests/${id}/cancel`);
+    return response.data;
   } catch (error: any) {
     return { success: false, error: error.message };
   }
@@ -425,11 +340,8 @@ export async function cancelApprovalRequest(id: number): Promise<ApiResponse<voi
 
 export async function getMyPendingApprovals(): Promise<ApiResponse<ApprovalLine[]>> {
   try {
-    const response = await fetch(`${API_BASE}/approval/my-pending`, {
-      headers: getAuthHeaders(),
-      credentials: "include",
-    });
-    return await response.json();
+    const response = await apiClient.get("/approval/my-pending");
+    return response.data;
   } catch (error: any) {
     return { success: false, error: error.message };
   }
@@ -440,13 +352,146 @@ export async function processApprovalLine(
   data: { action: "approved" | "rejected"; comment?: string }
 ): Promise<ApiResponse<void>> {
   try {
-    const response = await fetch(`${API_BASE}/approval/lines/${lineId}/process`, {
-      method: "POST",
-      headers: getAuthHeaders(),
-      credentials: "include",
-      body: JSON.stringify(data),
-    });
-    return await response.json();
+    const response = await apiClient.post(`/approval/lines/${lineId}/process`, data);
+    return response.data;
+  } catch (error: any) {
+    return { success: false, error: error.message };
+  }
+}
+
+// ============================================================
+// 대결 위임 설정 (Proxy Settings) API
+// ============================================================
+
+export async function getProxySettings(): Promise<ApiResponse<ApprovalProxySetting[]>> {
+  try {
+    const response = await apiClient.get("/approval/proxy-settings");
+    return response.data;
+  } catch (error: any) {
+    return { success: false, error: error.message };
+  }
+}
+
+export async function createProxySetting(data: {
+  original_user_id: string;
+  proxy_user_id: string;
+  start_date: string;
+  end_date: string;
+  reason?: string;
+}): Promise<ApiResponse<ApprovalProxySetting>> {
+  try {
+    const response = await apiClient.post("/approval/proxy-settings", data);
+    return response.data;
+  } catch (error: any) {
+    return { success: false, error: error.message };
+  }
+}
+
+export async function updateProxySetting(
+  id: number,
+  data: {
+    proxy_user_id?: string;
+    start_date?: string;
+    end_date?: string;
+    reason?: string;
+    is_active?: string;
+  }
+): Promise<ApiResponse<ApprovalProxySetting>> {
+  try {
+    const response = await apiClient.put(`/approval/proxy-settings/${id}`, data);
+    return response.data;
+  } catch (error: any) {
+    return { success: false, error: error.message };
+  }
+}
+
+export async function deleteProxySetting(id: number): Promise<ApiResponse<void>> {
+  try {
+    const response = await apiClient.delete(`/approval/proxy-settings/${id}`);
+    return response.data;
+  } catch (error: any) {
+    return { success: false, error: error.message };
+  }
+}
+
+export async function checkActiveProxy(
+  userId: string
+): Promise<ApiResponse<{ proxy_user_id: string; proxy_user_name?: string } | null>> {
+  try {
+    const response = await apiClient.get(
+      `/approval/proxy-settings/check/${encodeURIComponent(userId)}`
+    );
+    return response.data;
+  } catch (error: any) {
+    return { success: false, error: error.message };
+  }
+}
+
+// ============================================================
+// 후결 승인 API
+// ============================================================
+
+export async function postApproveRequest(requestId: number): Promise<ApiResponse<void>> {
+  try {
+    const response = await apiClient.post(`/approval/requests/${requestId}/post-approve`);
+    return response.data;
+  } catch (error: any) {
+    return { success: false, error: error.message };
+  }
+}
+
+// ============================================================
+// 결재선 템플릿 단계 (Template Steps) API
+// ============================================================
+
+export async function getTemplateSteps(
+  templateId: number
+): Promise<ApiResponse<ApprovalLineTemplateStep[]>> {
+  try {
+    const response = await apiClient.get(`/approval/templates/${templateId}/steps`);
+    return response.data;
+  } catch (error: any) {
+    return { success: false, error: error.message };
+  }
+}
+
+export async function createTemplateStep(
+  templateId: number,
+  data: Omit<ApprovalLineTemplateStep, "step_id" | "template_id" | "company_code">
+): Promise<ApiResponse<ApprovalLineTemplateStep>> {
+  try {
+    const response = await apiClient.post(`/approval/templates/${templateId}/steps`, data);
+    return response.data;
+  } catch (error: any) {
+    return { success: false, error: error.message };
+  }
+}
+
+export async function updateTemplateStep(
+  templateId: number,
+  stepId: number,
+  data: Partial<Omit<ApprovalLineTemplateStep, "step_id" | "template_id" | "company_code">>
+): Promise<ApiResponse<ApprovalLineTemplateStep>> {
+  try {
+    const response = await apiClient.put(
+      `/approval/templates/${templateId}/steps/${stepId}`,
+      data
+    );
+    return response.data;
+  } catch (error: any) {
+    return { success: false, error: error.message };
+  }
+}
+
+export async function deleteTemplateStep(
+  templateId: number,
+  stepId: number
+): Promise<ApiResponse<void>> {
+  try {
+    const response = await apiClient.delete(
+      `/approval/templates/${templateId}/steps/${stepId}`
+    );
+    return response.data;
   } catch (error: any) {
     return { success: false, error: error.message };
   }
diff --git a/frontend/lib/api/batch.ts b/frontend/lib/api/batch.ts
index 1d56da1a..696f13f3 100644
--- a/frontend/lib/api/batch.ts
+++ b/frontend/lib/api/batch.ts
@@ -56,9 +56,14 @@ export interface BatchJob {
   job_type: string;
   description?: string;
   cron_schedule: string;
+  schedule_cron?: string;
   is_active: string;
   last_execution?: Date;
+  last_executed_at?: string;
   next_execution?: Date;
+  execution_count?: number;
+  success_count?: number;
+  failure_count?: number;
   status?: string;
   created_date?: Date;
   created_by?: string;
@@ -390,6 +395,52 @@ export class BatchAPI {
     }
   }
 
+  /**
+   * 지원되는 배치 작업 타입 조회
+   */
+  static async getSupportedJobTypes(): Promise<string[]> {
+    try {
+      const response = await apiClient.get<ApiResponse<string[]>>('/batch-management/job-types');
+      if (!response.data.success) {
+        throw new Error(response.data.message || "작업 타입 조회에 실패했습니다.");
+      }
+      return response.data.data || [];
+    } catch (error) {
+      console.error("작업 타입 조회 오류:", error);
+      return [];
+    }
+  }
+
+  /**
+   * 배치 작업 삭제
+   */
+  static async deleteBatchJob(id: number): Promise<void> {
+    try {
+      const response = await apiClient.delete<ApiResponse<void>>(`/batch-management/jobs/${id}`);
+      if (!response.data.success) {
+        throw new Error(response.data.message || "배치 작업 삭제에 실패했습니다.");
+      }
+    } catch (error) {
+      console.error("배치 작업 삭제 오류:", error);
+      throw error;
+    }
+  }
+
+  /**
+   * 배치 작업 실행
+   */
+  static async executeBatchJob(id: number): Promise<void> {
+    try {
+      const response = await apiClient.post<ApiResponse<void>>(`/batch-management/jobs/${id}/execute`);
+      if (!response.data.success) {
+        throw new Error(response.data.message || "배치 작업 실행에 실패했습니다.");
+      }
+    } catch (error) {
+      console.error("배치 작업 실행 오류:", error);
+      throw error;
+    }
+  }
+
   /**
    * auth_tokens 테이블의 서비스명 목록 조회
    */
diff --git a/frontend/lib/api/systemNotice.ts b/frontend/lib/api/systemNotice.ts
new file mode 100644
index 00000000..47b1b56d
--- /dev/null
+++ b/frontend/lib/api/systemNotice.ts
@@ -0,0 +1,90 @@
+import { apiClient } from "@/lib/api/client";
+
+export interface SystemNotice {
+  id: number;
+  company_code: string;
+  title: string;
+  content: string;
+  is_active: boolean;
+  priority: number;
+  created_by: string;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface CreateSystemNoticePayload {
+  title: string;
+  content: string;
+  is_active: boolean;
+  priority: number;
+}
+
+export interface UpdateSystemNoticePayload {
+  title?: string;
+  content?: string;
+  is_active?: boolean;
+  priority?: number;
+}
+
+interface ApiResponse<T> {
+  success: boolean;
+  data?: T;
+  message?: string;
+}
+
+// 공지사항 목록 조회
+export async function getSystemNotices(): Promise<ApiResponse<SystemNotice[]>> {
+  try {
+    const response = await apiClient.get("/system-notices");
+    return response.data;
+  } catch (error: any) {
+    return {
+      success: false,
+      message: error.response?.data?.message || error.message || "공지사항 목록 조회 실패",
+    };
+  }
+}
+
+// 공지사항 등록
+export async function createSystemNotice(
+  payload: CreateSystemNoticePayload
+): Promise<ApiResponse<SystemNotice>> {
+  try {
+    const response = await apiClient.post("/system-notices", payload);
+    return response.data;
+  } catch (error: any) {
+    return {
+      success: false,
+      message: error.response?.data?.message || error.message || "공지사항 등록 실패",
+    };
+  }
+}
+
+// 공지사항 수정
+export async function updateSystemNotice(
+  id: number,
+  payload: UpdateSystemNoticePayload
+): Promise<ApiResponse<SystemNotice>> {
+  try {
+    const response = await apiClient.put(`/system-notices/${id}`, payload);
+    return response.data;
+  } catch (error: any) {
+    return {
+      success: false,
+      message: error.response?.data?.message || error.message || "공지사항 수정 실패",
+    };
+  }
+}
+
+// 공지사항 삭제
+export async function deleteSystemNotice(id: number): Promise<ApiResponse<void>> {
+  try {
+    const response = await apiClient.delete(`/system-notices/${id}`);
+    return response.data;
+  } catch (error: any) {
+    return {
+      success: false,
+      message: error.response?.data?.message || error.message || "공지사항 삭제 실패",
+    };
+  }
+}
diff --git a/frontend/lib/api/tableManagement.ts b/frontend/lib/api/tableManagement.ts
index 24ef25a0..50824d7b 100644
--- a/frontend/lib/api/tableManagement.ts
+++ b/frontend/lib/api/tableManagement.ts
@@ -372,3 +372,30 @@ export const getTableColumns = (tableName: string) => tableManagementApi.getColu
 export const updateColumnType = (tableName: string, columnName: string, settings: ColumnSettings) =>
   tableManagementApi.updateColumnSettings(tableName, columnName, settings);
 export const checkTableExists = (tableName: string) => tableManagementApi.checkTableExists(tableName);
+
+// 엑셀 업로드 전 데이터 검증 API
+export interface ExcelValidationResult {
+  isValid: boolean;
+  notNullErrors: { row: number; column: string; label: string }[];
+  uniqueInExcelErrors: { rows: number[]; column: string; label: string; value: string }[];
+  uniqueInDbErrors: { row: number; column: string; label: string; value: string }[];
+  summary: { notNull: number; uniqueInExcel: number; uniqueInDb: number };
+}
+
+export async function validateExcelData(
+  tableName: string,
+  data: Record<string, any>[]
+): Promise<ApiResponse<ExcelValidationResult>> {
+  try {
+    const response = await apiClient.post<ApiResponse<ExcelValidationResult>>(
+      "/table-management/validate-excel",
+      { tableName, data }
+    );
+    return response.data;
+  } catch (error: any) {
+    return {
+      success: false,
+      message: error.response?.data?.message || "데이터 검증 실패",
+    };
+  }
+}
diff --git a/frontend/lib/api/vehicleTrip.ts b/frontend/lib/api/vehicleTrip.ts
index 2e452dd6..436e4589 100644
--- a/frontend/lib/api/vehicleTrip.ts
+++ b/frontend/lib/api/vehicleTrip.ts
@@ -196,13 +196,13 @@ export function getStatusLabel(status: string): string {
 export function getStatusColor(status: string): string {
   switch (status) {
     case "active":
-      return "bg-green-100 text-green-800";
+      return "bg-emerald-100 text-emerald-800";
     case "completed":
-      return "bg-blue-100 text-blue-800";
+      return "bg-primary/10 text-primary";
     case "cancelled":
-      return "bg-gray-100 text-gray-800";
+      return "bg-muted text-foreground";
     default:
-      return "bg-gray-100 text-gray-800";
+      return "bg-muted text-foreground";
   }
 }
 
diff --git a/frontend/lib/button-icon-map.tsx b/frontend/lib/button-icon-map.tsx
new file mode 100644
index 00000000..d8c38b25
--- /dev/null
+++ b/frontend/lib/button-icon-map.tsx
@@ -0,0 +1,213 @@
+import React from "react";
+import DOMPurify from "isomorphic-dompurify";
+import {
+  Check, Save, CheckCircle, CircleCheck, FileCheck, ShieldCheck,
+  Trash2, Trash, XCircle, X, Eraser, CircleX,
+  Pencil, PenLine, Pen, SquarePen, FilePen, PenTool,
+  ArrowRight, ExternalLink, MoveRight, Navigation, CornerUpRight, Link,
+  Maximize2, PanelTop, AppWindow, LayoutGrid, Layers, FolderOpen,
+  SendHorizontal, ArrowRightLeft, Repeat, PackageCheck, Upload, Share2,
+  Download, FileDown, FileSpreadsheet, Sheet, Table, FileOutput,
+  FileUp, FileInput,
+  Zap, Plus, PlusCircle, SquarePlus, FilePlus, BadgePlus,
+  Settings, SlidersHorizontal, ToggleLeft, Workflow, GitBranch, Settings2,
+  ScanLine, QrCode, Camera, Scan, ScanBarcode, Focus,
+  Truck, Car, MapPin, Navigation2, Route, Bell,
+  Send, Radio, Megaphone, Podcast, BellRing,
+  Copy, ClipboardCopy, Files, CopyPlus, ClipboardList, Clipboard,
+  SquareMousePointer,
+  type LucideIcon,
+} from "lucide-react";
+
+// ---------------------------------------------------------------------------
+// 아이콘 이름 → 컴포넌트 매핑 (추천 아이콘만 명시적 import)
+// ---------------------------------------------------------------------------
+export const iconMap: Record<string, LucideIcon> = {
+  Check, Save, CheckCircle, CircleCheck, FileCheck, ShieldCheck,
+  Trash2, Trash, XCircle, X, Eraser, CircleX,
+  Pencil, PenLine, Pen, SquarePen, FilePen, PenTool,
+  ArrowRight, ExternalLink, MoveRight, Navigation, CornerUpRight, Link,
+  Maximize2, PanelTop, AppWindow, LayoutGrid, Layers, FolderOpen,
+  SendHorizontal, ArrowRightLeft, Repeat, PackageCheck, Upload, Share2,
+  Download, FileDown, FileSpreadsheet, Sheet, Table, FileOutput,
+  FileUp, FileInput,
+  Zap, Plus, PlusCircle, SquarePlus, FilePlus, BadgePlus,
+  Settings, SlidersHorizontal, ToggleLeft, Workflow, GitBranch, Settings2,
+  ScanLine, QrCode, Camera, Scan, ScanBarcode, Focus,
+  Truck, Car, MapPin, Navigation2, Route, Bell,
+  Send, Radio, Megaphone, Podcast, BellRing,
+  Copy, ClipboardCopy, Files, CopyPlus, ClipboardList, Clipboard,
+  SquareMousePointer,
+};
+
+// ---------------------------------------------------------------------------
+// 버튼 액션 → 추천 아이콘 이름 매핑
+// ---------------------------------------------------------------------------
+export const actionIconMap: Record<string, string[]> = {
+  save: ["Check", "Save", "CheckCircle", "CircleCheck", "FileCheck", "ShieldCheck"],
+  delete: ["Trash2", "Trash", "XCircle", "X", "Eraser", "CircleX"],
+  edit: ["Pencil", "PenLine", "Pen", "SquarePen", "FilePen", "PenTool"],
+  navigate: ["ArrowRight", "ExternalLink", "MoveRight", "Navigation", "CornerUpRight", "Link"],
+  modal: ["Maximize2", "PanelTop", "AppWindow", "LayoutGrid", "Layers", "FolderOpen"],
+  transferData: ["SendHorizontal", "ArrowRightLeft", "Repeat", "PackageCheck", "Upload", "Share2"],
+  excel_download: ["Download", "FileDown", "FileSpreadsheet", "Sheet", "Table", "FileOutput"],
+  excel_upload: ["Upload", "FileUp", "FileSpreadsheet", "Sheet", "FileInput", "FileOutput"],
+  quickInsert: ["Zap", "Plus", "PlusCircle", "SquarePlus", "FilePlus", "BadgePlus"],
+  control: ["Settings", "SlidersHorizontal", "ToggleLeft", "Workflow", "GitBranch", "Settings2"],
+  barcode_scan: ["ScanLine", "QrCode", "Camera", "Scan", "ScanBarcode", "Focus"],
+  operation_control: ["Truck", "Car", "MapPin", "Navigation2", "Route", "Bell"],
+  event: ["Send", "Bell", "Radio", "Megaphone", "Podcast", "BellRing"],
+  copy: ["Copy", "ClipboardCopy", "Files", "CopyPlus", "ClipboardList", "Clipboard"],
+};
+
+// 아이콘 추천이 불가능한 deprecated/숨김 액션
+export const noIconActions = new Set([
+  "openRelatedModal",
+  "openModalWithData",
+  "view_table_history",
+  "code_merge",
+  "empty_vehicle",
+]);
+
+export const NO_ICON_MESSAGE = "적절한 추천 아이콘이 없습니다. 텍스트 모드를 사용하거나 아래에서 아이콘을 직접 추가하세요.";
+
+// 범용 폴백 아이콘 (추천 아이콘이 없는 액션용)
+export const FALLBACK_ICON_NAME = "SquareMousePointer";
+
+/** 액션 타입에 대한 디폴트 아이콘(첫 번째 추천)을 반환. 없으면 범용 폴백. */
+export function getDefaultIconForAction(actionType?: string): { name: string; type: "lucide" } {
+  if (actionType && actionIconMap[actionType]?.length) {
+    return { name: actionIconMap[actionType][0], type: "lucide" };
+  }
+  return { name: FALLBACK_ICON_NAME, type: "lucide" };
+}
+
+// ---------------------------------------------------------------------------
+// 아이콘 크기 (버튼 높이 대비 비율)
+// ---------------------------------------------------------------------------
+export const iconSizePresets: Record<string, number> = {
+  "작게": 40,
+  "보통": 55,
+  "크게": 70,
+  "매우 크게": 85,
+};
+
+/** 프리셋 문자열 → 비율(%) 반환. 레거시 값은 55(보통)로 폴백 */
+export function getIconPercent(size: string | number): number {
+  if (typeof size === "number") return size;
+  return iconSizePresets[size] ?? 55;
+}
+
+/** 아이콘 크기를 CSS로 변환 (버튼 높이 대비 비율, 정사각형 유지) */
+export function getIconSizeStyle(size: string | number): React.CSSProperties {
+  const pct = getIconPercent(size);
+  return { height: `${pct}%`, width: "auto", aspectRatio: "1 / 1" };
+}
+
+// ---------------------------------------------------------------------------
+// 아이콘 조회 / 동적 등록
+// ---------------------------------------------------------------------------
+export function getLucideIcon(name: string): LucideIcon | undefined {
+  return iconMap[name];
+}
+
+export function addToIconMap(name: string, component: LucideIcon): void {
+  iconMap[name] = component;
+}
+
+// ---------------------------------------------------------------------------
+// SVG 정화
+// ---------------------------------------------------------------------------
+export function sanitizeSvg(svgString: string): string {
+  return DOMPurify.sanitize(svgString, { USE_PROFILES: { svg: true } });
+}
+
+// ---------------------------------------------------------------------------
+// 버튼 아이콘 렌더러 컴포넌트 (모든 뷰어/위젯에서 공용)
+// ---------------------------------------------------------------------------
+export function ButtonIconRenderer({
+  componentConfig,
+  fallbackLabel,
+}: {
+  componentConfig: any;
+  fallbackLabel: string;
+}) {
+  const cfg = componentConfig || {};
+  const displayMode = cfg.displayMode || "text";
+
+  if (displayMode === "text" || !cfg.icon?.name) {
+    return <>{cfg.text || fallbackLabel}</>;
+  }
+
+  return <>{getButtonDisplayContent(cfg)}</>;
+}
+
+// ---------------------------------------------------------------------------
+// 버튼 표시 콘텐츠 계산 (모든 렌더러 공용)
+// ---------------------------------------------------------------------------
+export function getButtonDisplayContent(componentConfig: any): React.ReactNode {
+  const displayMode = componentConfig?.displayMode || "text";
+  const text = componentConfig?.text || componentConfig?.label || "버튼";
+  const icon = componentConfig?.icon;
+
+  if (displayMode === "text" || !icon?.name) {
+    return text;
+  }
+
+  // 아이콘 노드 생성
+  const sizeStyle = getIconSizeStyle(icon.size || "보통");
+  const colorStyle: React.CSSProperties = icon.color ? { color: icon.color } : {};
+  let iconNode: React.ReactNode = null;
+
+  if (icon.type === "svg") {
+    const svgIcon = componentConfig?.customSvgIcons?.find(
+      (s: { name: string; svg: string }) => s.name === icon.name,
+    );
+    if (svgIcon) {
+      const clean = sanitizeSvg(svgIcon.svg);
+      iconNode = (
+        <span
+          className="inline-flex items-center justify-center [&>svg]:h-full [&>svg]:w-full"
+          style={{ ...sizeStyle, ...colorStyle }}
+          dangerouslySetInnerHTML={{ __html: clean }}
+        />
+      );
+    }
+  } else {
+    const IconComponent = getLucideIcon(icon.name);
+    if (IconComponent) {
+      iconNode = (
+        <span className="inline-flex items-center justify-center" style={sizeStyle}>
+          <IconComponent className="h-full w-full" style={colorStyle} />
+        </span>
+      );
+    }
+  }
+
+  if (!iconNode) {
+    return text;
+  }
+
+  if (displayMode === "icon") {
+    return iconNode;
+  }
+
+  // icon-text 모드
+  const gap = componentConfig?.iconGap ?? 6;
+  const textPos = componentConfig?.iconTextPosition || "right";
+  const isVertical = textPos === "top" || textPos === "bottom";
+  const textFirst = textPos === "left" || textPos === "top";
+
+  return (
+    <span
+      className="inline-flex items-center justify-center"
+      style={{
+        gap: `${gap}px`,
+        flexDirection: isVertical ? "column" : "row",
+      }}
+    >
+      {textFirst ? <span>{text}</span> : iconNode}
+      {textFirst ? iconNode : <span>{text}</span>}
+    </span>
+  );
+}
diff --git a/frontend/lib/formatting/index.ts b/frontend/lib/formatting/index.ts
new file mode 100644
index 00000000..53dff08d
--- /dev/null
+++ b/frontend/lib/formatting/index.ts
@@ -0,0 +1,137 @@
+/**
+ * 중앙 포맷팅 함수.
+ * 모든 컴포넌트는 날짜/숫자/통화를 표시할 때 이 함수들만 호출한다.
+ *
+ * 사용법:
+ *   import { formatDate, formatNumber, formatCurrency } from "@/lib/formatting";
+ *   formatDate("2025-01-01")           // "2025-01-01"
+ *   formatDate("2025-01-01T14:30:00Z", "datetime")  // "2025-01-01 14:30:00"
+ *   formatNumber(1234567)              // "1,234,567"
+ *   formatCurrency(50000)              // "₩50,000"
+ */
+
+export { getFormatRules, setFormatRules, DEFAULT_FORMAT_RULES } from "./rules";
+export type { FormatRules, DateFormatRules, NumberFormatRules, CurrencyFormatRules } from "./rules";
+
+import { getFormatRules } from "./rules";
+
+// --- 날짜 포맷 ---
+
+type DateFormatType = "display" | "datetime" | "input" | "time";
+
+/**
+ * 날짜 값을 지정된 형식으로 포맷한다.
+ * @param value - ISO 문자열, Date, 타임스탬프
+ * @param type - "display" | "datetime" | "input" | "time"
+ * @returns 포맷된 문자열 (파싱 실패 시 원본 반환)
+ */
+export function formatDate(value: unknown, type: DateFormatType = "display"): string {
+  if (value == null || value === "") return "";
+
+  const rules = getFormatRules();
+  const format = rules.date[type];
+
+  try {
+    const date = value instanceof Date ? value : new Date(String(value));
+    if (isNaN(date.getTime())) return String(value);
+
+    return applyDateFormat(date, format);
+  } catch {
+    return String(value);
+  }
+}
+
+/**
+ * YYYY-MM-DD HH:mm:ss 패턴을 Date 객체에 적용
+ */
+function applyDateFormat(date: Date, pattern: string): string {
+  const y = date.getFullYear();
+  const M = date.getMonth() + 1;
+  const d = date.getDate();
+  const H = date.getHours();
+  const m = date.getMinutes();
+  const s = date.getSeconds();
+
+  return pattern
+    .replace("YYYY", String(y))
+    .replace("MM", String(M).padStart(2, "0"))
+    .replace("DD", String(d).padStart(2, "0"))
+    .replace("HH", String(H).padStart(2, "0"))
+    .replace("mm", String(m).padStart(2, "0"))
+    .replace("ss", String(s).padStart(2, "0"));
+}
+
+// --- 숫자 포맷 ---
+
+/**
+ * 숫자를 로케일 기반으로 포맷한다 (천단위 구분자 등).
+ * @param value - 숫자 또는 숫자 문자열
+ * @param decimals - 소수점 자릿수 (미지정 시 기본값 사용)
+ * @returns 포맷된 문자열
+ */
+export function formatNumber(value: unknown, decimals?: number): string {
+  if (value == null || value === "") return "";
+
+  const rules = getFormatRules();
+  const num = typeof value === "number" ? value : parseFloat(String(value));
+  if (isNaN(num)) return String(value);
+
+  const dec = decimals ?? rules.number.decimals;
+
+  return new Intl.NumberFormat(rules.number.locale, {
+    minimumFractionDigits: dec,
+    maximumFractionDigits: dec,
+  }).format(num);
+}
+
+// --- 통화 포맷 ---
+
+/**
+ * 금액을 통화 형식으로 포맷한다.
+ * @param value - 숫자 또는 숫자 문자열
+ * @param currencyCode - 통화 코드 (미지정 시 기본값 사용)
+ * @returns 포맷된 문자열 (예: "₩50,000")
+ */
+export function formatCurrency(value: unknown, currencyCode?: string): string {
+  if (value == null || value === "") return "";
+
+  const rules = getFormatRules();
+  const num = typeof value === "number" ? value : parseFloat(String(value));
+  if (isNaN(num)) return String(value);
+
+  const code = currencyCode ?? rules.currency.code;
+
+  return new Intl.NumberFormat(rules.currency.locale, {
+    style: "currency",
+    currency: code,
+    maximumFractionDigits: code === "KRW" ? 0 : 2,
+  }).format(num);
+}
+
+// --- 범용 포맷 ---
+
+/**
+ * 데이터 타입에 따라 자동으로 적절한 포맷을 적용한다.
+ * @param value - 포맷할 값
+ * @param dataType - "date" | "datetime" | "number" | "currency" | "text"
+ */
+export function formatValue(value: unknown, dataType: string): string {
+  switch (dataType) {
+    case "date":
+      return formatDate(value, "display");
+    case "datetime":
+      return formatDate(value, "datetime");
+    case "time":
+      return formatDate(value, "time");
+    case "number":
+    case "integer":
+    case "float":
+    case "decimal":
+      return formatNumber(value);
+    case "currency":
+    case "money":
+      return formatCurrency(value);
+    default:
+      return value == null ? "" : String(value);
+  }
+}
diff --git a/frontend/lib/formatting/rules.ts b/frontend/lib/formatting/rules.ts
new file mode 100644
index 00000000..dc91a87d
--- /dev/null
+++ b/frontend/lib/formatting/rules.ts
@@ -0,0 +1,71 @@
+/**
+ * 중앙 포맷팅 규칙 정의.
+ * 모든 날짜/숫자/통화 포맷은 이 파일의 규칙을 따른다.
+ * 변경이 필요하면 이 파일만 수정하면 전체 적용된다.
+ */
+
+export interface DateFormatRules {
+  /** 날짜만 표시 (예: "2025-01-01") */
+  display: string;
+  /** 날짜+시간 표시 (예: "2025-01-01 14:30:00") */
+  datetime: string;
+  /** 입력 필드용 (예: "YYYY-MM-DD") */
+  input: string;
+  /** 시간만 표시 (예: "14:30") */
+  time: string;
+}
+
+export interface NumberFormatRules {
+  /** 숫자 로케일 (천단위 구분자 등) */
+  locale: string;
+  /** 기본 소수점 자릿수 */
+  decimals: number;
+}
+
+export interface CurrencyFormatRules {
+  /** 통화 코드 (예: "KRW", "USD") */
+  code: string;
+  /** 통화 로케일 */
+  locale: string;
+}
+
+export interface FormatRules {
+  date: DateFormatRules;
+  number: NumberFormatRules;
+  currency: CurrencyFormatRules;
+}
+
+/** 기본 포맷 규칙 (한국어 기준) */
+export const DEFAULT_FORMAT_RULES: FormatRules = {
+  date: {
+    display: "YYYY-MM-DD",
+    datetime: "YYYY-MM-DD HH:mm:ss",
+    input: "YYYY-MM-DD",
+    time: "HH:mm",
+  },
+  number: {
+    locale: "ko-KR",
+    decimals: 0,
+  },
+  currency: {
+    code: "KRW",
+    locale: "ko-KR",
+  },
+};
+
+/** 현재 적용 중인 포맷 규칙 (런타임에 변경 가능) */
+let currentRules: FormatRules = { ...DEFAULT_FORMAT_RULES };
+
+export function getFormatRules(): FormatRules {
+  return currentRules;
+}
+
+export function setFormatRules(rules: Partial<FormatRules>): void {
+  currentRules = {
+    ...currentRules,
+    ...rules,
+    date: { ...currentRules.date, ...rules.date },
+    number: { ...currentRules.number, ...rules.number },
+    currency: { ...currentRules.currency, ...rules.currency },
+  };
+}
diff --git a/frontend/lib/hooks/useDialogAutoValidation.ts b/frontend/lib/hooks/useDialogAutoValidation.ts
new file mode 100644
index 00000000..eefa9342
--- /dev/null
+++ b/frontend/lib/hooks/useDialogAutoValidation.ts
@@ -0,0 +1,228 @@
+"use client";
+
+import { useEffect } from "react";
+import { useTabStore } from "@/stores/tabStore";
+import { toast } from "sonner";
+
+const HIGHLIGHT_ATTR = "data-validation-highlight";
+const ERROR_ATTR = "data-validation-error";
+const MSG_WRAPPER_CLASS = "validation-error-msg-wrapper";
+
+type TargetEl = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | HTMLButtonElement;
+
+/**
+ * 모달 필수 입력 검증 훅 (클릭 인터셉트 방식)
+ *
+ * 저장/수정/확인 버튼 클릭 시 빈 필수 필드가 있으면:
+ *   1. 클릭 이벤트 차단
+ *   2. 첫 번째 빈 필드로 포커스 이동 + 하이라이트
+ *   3. 빈 필드에 빨간 테두리 유지 (값 입력 시 해제)
+ *   4. 토스트 알림 표시
+ *
+ * 설계: docs/ycshin-node/필수입력항목_자동검증_설계.md
+ */
+export function useDialogAutoValidation(contentEl: HTMLElement | null) {
+  const mode = useTabStore((s) => s.mode);
+
+  useEffect(() => {
+    if (mode !== "user") return;
+
+    const el = contentEl;
+    if (!el) return;
+
+    const errorFields = new Set<TargetEl>();
+    let activated = false; // 첫 저장 시도 이후 true
+
+    function findRequiredFields(): Map<TargetEl, string> {
+      const fields = new Map<TargetEl, string>();
+      if (!el) return fields;
+
+      el.querySelectorAll("label").forEach((label) => {
+        const hasRequiredMark = Array.from(label.querySelectorAll("span")).some(
+          (span) => span.textContent?.trim() === "*",
+        );
+        if (!hasRequiredMark) return;
+
+        const forId = label.getAttribute("for") || (label as HTMLLabelElement).htmlFor;
+        let target: TargetEl | null = null;
+
+        if (forId) {
+          try {
+            const found = el!.querySelector(`#${CSS.escape(forId)}`);
+            if (isFormElement(found)) {
+              target = found;
+            } else if (found) {
+              const inner = found.querySelector("input, textarea, select");
+              if (isFormElement(inner) && !isHiddenRadixSelect(inner)) {
+                target = inner;
+              }
+              // 숨겨진 Radix select이거나 폼 요소가 없으면 → 트리거 버튼 탐색
+              if (!target) {
+                const btn = found.querySelector('button[role="combobox"], button[data-slot="select-trigger"]');
+                if (btn instanceof HTMLButtonElement) target = btn;
+              }
+            }
+          } catch {
+            /* invalid id */
+          }
+        }
+
+        if (!target) {
+          const parent = label.closest('[class*="space-y"]') || label.parentElement;
+          if (parent) {
+            const inner = parent.querySelector("input, textarea, select");
+            if (isFormElement(inner) && !isHiddenRadixSelect(inner)) {
+              target = inner;
+            }
+            if (!target) {
+              const btn = parent.querySelector('button[role="combobox"], button[data-slot="select-trigger"]');
+              if (btn instanceof HTMLButtonElement) target = btn;
+            }
+          }
+        }
+
+        if (target) {
+          const labelText = label.textContent?.replace(/\*/g, "").trim() || "";
+          fields.set(target, labelText);
+        }
+      });
+
+      return fields;
+    }
+
+    function isFormElement(el: Element | null): el is HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement {
+      return el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement || el instanceof HTMLSelectElement;
+    }
+
+    function isHiddenRadixSelect(el: Element): boolean {
+      return el instanceof HTMLSelectElement && el.hasAttribute("aria-hidden");
+    }
+
+    function isEmpty(input: TargetEl): boolean {
+      if (input instanceof HTMLButtonElement) {
+        // Radix Select: data-placeholder 속성이 자식 span에 있으면 미선택 상태
+        return !!input.querySelector("[data-placeholder]");
+      }
+      return input.value.trim() === "";
+    }
+
+    function isSaveButton(target: HTMLElement): boolean {
+      const btn = target.closest("button");
+      if (!btn) return false;
+
+      const actionType = btn.getAttribute("data-action-type");
+      if (actionType === "save" || actionType === "submit") return true;
+
+      const variant = btn.getAttribute("data-variant");
+      if (variant === "default") return true;
+
+      return false;
+    }
+
+    function markError(input: TargetEl) {
+      input.setAttribute(ERROR_ATTR, "true");
+      errorFields.add(input);
+      showErrorMsg(input);
+    }
+
+    function clearError(input: TargetEl) {
+      input.removeAttribute(ERROR_ATTR);
+      errorFields.delete(input);
+      removeErrorMsg(input);
+    }
+
+    // 빈 필수 필드 아래에 경고 문구 삽입 (레이아웃 영향 없는 zero-height wrapper)
+    function showErrorMsg(input: TargetEl) {
+      if (input.parentElement?.querySelector(`.${MSG_WRAPPER_CLASS}`)) return;
+
+      const wrapper = document.createElement("div");
+      wrapper.className = MSG_WRAPPER_CLASS;
+
+      const msg = document.createElement("p");
+      msg.textContent = "필수 입력 항목입니다";
+      wrapper.appendChild(msg);
+
+      input.insertAdjacentElement("afterend", wrapper);
+    }
+
+    function removeErrorMsg(input: TargetEl) {
+      const wrapper = input.parentElement?.querySelector(`.${MSG_WRAPPER_CLASS}`);
+      if (wrapper) wrapper.remove();
+    }
+
+    function highlightField(input: TargetEl) {
+      input.setAttribute(HIGHLIGHT_ATTR, "true");
+      input.addEventListener("animationend", () => input.removeAttribute(HIGHLIGHT_ATTR), { once: true });
+
+      if (input instanceof HTMLButtonElement) {
+        input.click();
+      } else {
+        input.focus();
+      }
+    }
+
+    // 첫 저장 시도 이후: 빈 필드 → 에러 유지/재적용, 값 있으면 해제
+    function syncErrors() {
+      if (!activated) return;
+      const fields = findRequiredFields();
+      for (const [input] of fields) {
+        if (isEmpty(input)) {
+          markError(input);
+        } else {
+          clearError(input);
+        }
+      }
+    }
+
+    function handleClick(e: Event) {
+      const target = e.target as HTMLElement;
+      if (!isSaveButton(target)) return;
+
+      const fields = findRequiredFields();
+      if (fields.size === 0) return;
+
+      let firstEmpty: TargetEl | null = null;
+      let firstEmptyLabel = "";
+
+      for (const [input, label] of fields) {
+        if (isEmpty(input)) {
+          markError(input);
+          if (!firstEmpty) {
+            firstEmpty = input;
+            firstEmptyLabel = label;
+          }
+        } else {
+          clearError(input);
+        }
+      }
+
+      if (!firstEmpty) return;
+
+      activated = true;
+      e.stopPropagation();
+      e.preventDefault();
+
+      highlightField(firstEmpty);
+      toast.error(`${firstEmptyLabel} 항목을 입력해주세요`);
+    }
+
+    // V2Select는 input/change 이벤트가 없으므로 DOM 변경 감지로 에러 동기화
+    const observer = new MutationObserver(syncErrors);
+    observer.observe(el, { childList: true, subtree: true, attributes: true, attributeFilter: ["data-placeholder"] });
+
+    el.addEventListener("click", handleClick, true);
+    el.addEventListener("input", syncErrors);
+    el.addEventListener("change", syncErrors);
+
+    return () => {
+      el.removeEventListener("click", handleClick, true);
+      el.removeEventListener("input", syncErrors);
+      el.removeEventListener("change", syncErrors);
+      observer.disconnect();
+
+      el.querySelectorAll(`[${HIGHLIGHT_ATTR}]`).forEach((node) => node.removeAttribute(HIGHLIGHT_ATTR));
+      el.querySelectorAll(`[${ERROR_ATTR}]`).forEach((node) => node.removeAttribute(ERROR_ATTR));
+      el.querySelectorAll(`.${MSG_WRAPPER_CLASS}`).forEach((node) => node.remove());
+    };
+  }, [mode, contentEl]);
+}
diff --git a/frontend/lib/modalPortalRef.ts b/frontend/lib/modalPortalRef.ts
new file mode 100644
index 00000000..85c7d66d
--- /dev/null
+++ b/frontend/lib/modalPortalRef.ts
@@ -0,0 +1,31 @@
+"use client";
+
+import { useState, useEffect } from "react";
+
+/**
+ * 모달 포탈 컨테이너 전역 레퍼런스.
+ * TabContent가 마운트 시 registerModalPortal(el)로 등록하고,
+ * 모달 컴포넌트들은 useModalPortal()로 컨테이너를 구독합니다.
+ * React 컴포넌트 트리 위치에 무관하게 동작합니다.
+ */
+let _container: HTMLElement | null = null;
+const _subscribers = new Set<(el: HTMLElement | null) => void>();
+
+export function registerModalPortal(el: HTMLElement | null) {
+  _container = el;
+  _subscribers.forEach((fn) => fn(el));
+}
+
+export function useModalPortal(): HTMLElement | null {
+  const [el, setEl] = useState<HTMLElement | null>(_container);
+
+  useEffect(() => {
+    setEl(_container);
+    _subscribers.add(setEl);
+    return () => {
+      _subscribers.delete(setEl);
+    };
+  }, []);
+
+  return el;
+}
diff --git a/frontend/lib/registry/DynamicComponentRenderer.tsx b/frontend/lib/registry/DynamicComponentRenderer.tsx
index 50c4bee4..8ee1ba20 100644
--- a/frontend/lib/registry/DynamicComponentRenderer.tsx
+++ b/frontend/lib/registry/DynamicComponentRenderer.tsx
@@ -10,12 +10,20 @@ import { filterDOMProps } from "@/lib/utils/domPropsFilter";
 import { useV2FormOptional } from "@/components/v2/V2FormContext";
 import { apiClient } from "@/lib/api/client";
 
+import { getAdaptiveLabelColor } from "@/lib/utils/darkModeColor";
+
 // 컬럼 메타데이터 캐시 (테이블명 → 컬럼 설정 맵)
 const columnMetaCache: Record<string, Record<string, any>> = {};
 const columnMetaLoading: Record<string, Promise<void>> = {};
 
 async function loadColumnMeta(tableName: string): Promise<void> {
-  if (columnMetaCache[tableName] || columnMetaLoading[tableName]) return;
+  if (columnMetaCache[tableName]) return;
+
+  // 이미 로딩 중이면 해당 Promise를 대기 (race condition 방지)
+  if (columnMetaLoading[tableName]) {
+    await columnMetaLoading[tableName];
+    return;
+  }
 
   columnMetaLoading[tableName] = (async () => {
     try {
@@ -28,7 +36,8 @@ async function loadColumnMeta(tableName: string): Promise<void> {
         if (name) map[name] = col;
       }
       columnMetaCache[tableName] = map;
-    } catch {
+    } catch (e) {
+      console.error(`[columnMeta] ${tableName} 로드 실패:`, e);
       columnMetaCache[tableName] = {};
     } finally {
       delete columnMetaLoading[tableName];
@@ -38,6 +47,15 @@ async function loadColumnMeta(tableName: string): Promise<void> {
   await columnMetaLoading[tableName];
 }
 
+// 테이블 타입관리 NOT NULL 기반 필수 여부 판단
+export function isColumnRequiredByMeta(tableName?: string, columnName?: string): boolean {
+  if (!tableName || !columnName) return false;
+  const meta = columnMetaCache[tableName]?.[columnName];
+  if (!meta) return false;
+  const nullable = meta.is_nullable || meta.isNullable;
+  return nullable === "NO" || nullable === "N";
+}
+
 // table_type_columns 기반 componentConfig 병합 (기존 설정이 없을 때만 DB 메타데이터로 보완)
 function mergeColumnMeta(tableName: string | undefined, columnName: string | undefined, componentConfig: any): any {
   if (!tableName || !columnName) return componentConfig;
@@ -70,7 +88,8 @@ function mergeColumnMeta(tableName: string | undefined, columnName: string | und
   } else if (inputType === "category" && !existingSource) {
     merged.source = "category";
   } else if (inputType === "select" && !existingSource) {
-    const detail = typeof meta.detail_settings === "string" ? JSON.parse(meta.detail_settings || "{}") : (meta.detail_settings || {});
+    const detail =
+      typeof meta.detail_settings === "string" ? JSON.parse(meta.detail_settings || "{}") : meta.detail_settings || {};
     if (detail.options && !merged.options?.length) {
       merged.options = detail.options;
     }
@@ -249,7 +268,7 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
   const screenTableName = props.tableName || (component as any).tableName;
   const [, forceUpdate] = React.useState(0);
   React.useEffect(() => {
-    if (screenTableName && !columnMetaCache[screenTableName]) {
+    if (screenTableName) {
       loadColumnMeta(screenTableName).then(() => forceUpdate((v) => v + 1));
     }
   }, [screenTableName]);
@@ -262,16 +281,17 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
     const segments = url.split("/");
     return segments[segments.length - 1];
   };
-  
-  const rawComponentType = (component as any).componentType || component.type || extractTypeFromUrl((component as any).url);
-  
+
+  const rawComponentType =
+    (component as any).componentType || component.type || extractTypeFromUrl((component as any).url);
+
   // 레거시 타입을 v2 컴포넌트로 매핑 (v2 컴포넌트가 없으면 원본 유지)
   const mapToV2ComponentType = (type: string | undefined): string | undefined => {
     if (!type) return type;
-    
+
     // 이미 v2- 접두사가 있으면 그대로 반환
     if (type.startsWith("v2-")) return type;
-    
+
     // 레거시 타입을 v2로 매핑 시도
     const v2Type = `v2-${type}`;
     // v2 버전이 등록되어 있는지 확인
@@ -281,20 +301,21 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
     // v2 버전이 없으면 원본 유지
     return type;
   };
-  
+
   const componentType = mapToV2ComponentType(rawComponentType);
-  
+
   // 컴포넌트 타입 변환 완료
 
   // 🆕 조건부 렌더링 체크 (conditionalConfig)
   // componentConfig 또는 overrides에서 conditionalConfig를 가져와서 formData와 비교
-  const conditionalConfig = (component as any).componentConfig?.conditionalConfig || (component as any).overrides?.conditionalConfig;
-  
+  const conditionalConfig =
+    (component as any).componentConfig?.conditionalConfig || (component as any).overrides?.conditionalConfig;
+
   // 조건부 렌더링 처리
   if (conditionalConfig?.enabled && props.formData) {
     const { field, operator, value, action } = conditionalConfig;
     const fieldValue = props.formData[field];
-    
+
     // 조건 평가
     let conditionMet = false;
     switch (operator) {
@@ -331,7 +352,7 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
       default:
         conditionMet = fieldValue === value;
     }
-    
+
     // 액션에 따라 렌더링 결정
     if (action === "show" && !conditionMet) {
       return null;
@@ -350,7 +371,7 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
   const webType = (component as any).componentConfig?.webType;
   const tableName = (component as any).tableName;
   const columnName = (component as any).columnName;
-  
+
   // 카테고리 셀렉트: webType이 "category"이고 tableName과 columnName이 있는 경우만
   // ⚠️ 단, 다음 경우는 V2SelectRenderer로 직접 처리 (고급 모드 지원):
   //    1. componentType이 "select-basic" 또는 "v2-select"인 경우
@@ -359,25 +380,22 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
   const isMultipleSelect = (component as any).componentConfig?.multiple;
   const nonDropdownModes = ["radio", "check", "checkbox", "tag", "tagbox", "toggle", "swap", "combobox"];
   const isNonDropdownMode = componentMode && nonDropdownModes.includes(componentMode);
-  const shouldUseV2Select = componentType === "select-basic" || componentType === "v2-select" || isNonDropdownMode || isMultipleSelect;
-  
-  if (
-    (inputType === "category" || webType === "category") &&
-    tableName &&
-    columnName &&
-    shouldUseV2Select
-  ) {
+  const shouldUseV2Select =
+    componentType === "select-basic" || componentType === "v2-select" || isNonDropdownMode || isMultipleSelect;
+
+  if ((inputType === "category" || webType === "category") && tableName && columnName && shouldUseV2Select) {
     // V2SelectRenderer로 직접 렌더링 (카테고리 + 고급 모드)
     try {
       const { V2SelectRenderer } = require("@/lib/registry/components/v2-select/V2SelectRenderer");
       const fieldName = columnName || component.id;
-      
+
       // 수평 라벨 감지
       const catLabelDisplay = component.style?.labelDisplay ?? (component as any).labelDisplay;
       const catLabelPosition = component.style?.labelPosition;
-      const catLabelText = (catLabelDisplay === true || catLabelDisplay === "true")
-        ? (component.style?.labelText || (component as any).label || component.componentConfig?.label)
-        : undefined;
+      const catLabelText =
+        catLabelDisplay === true || catLabelDisplay === "true"
+          ? component.style?.labelText || (component as any).label || component.componentConfig?.label
+          : undefined;
       const catNeedsExternalHorizLabel = !!(
         catLabelText &&
         (catLabelPosition === "left" || catLabelPosition === "right")
@@ -397,13 +415,13 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
         inputType: "category",
         webType: "category",
       };
-      
+
       const catStyle = catNeedsExternalHorizLabel
-        ? { 
-            ...(component as any).style, 
-            labelDisplay: false, 
-            labelPosition: "top" as const, 
-            width: "100%", 
+        ? {
+            ...(component as any).style,
+            labelDisplay: false,
+            labelPosition: "top" as const,
+            width: "100%",
             height: "100%",
             borderWidth: undefined,
             borderColor: undefined,
@@ -426,16 +444,17 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
         style: catStyle,
         size: catSize,
       };
-      
+
       const rendererInstance = new V2SelectRenderer(rendererProps);
       const renderedCatSelect = rendererInstance.render();
 
       if (catNeedsExternalHorizLabel) {
         const labelGap = component.style?.labelGap || "8px";
         const labelFontSize = component.style?.labelFontSize || "14px";
-        const labelColor = component.style?.labelColor || "#64748b";
+        const labelColor = getAdaptiveLabelColor(component.style?.labelColor);
         const labelFontWeight = component.style?.labelFontWeight || "500";
-        const isRequired = component.required || (component as any).required;
+        const isRequired =
+          component.required || (component as any).required || isColumnRequiredByMeta(tableName, columnName);
         const isLeft = catLabelPosition === "left";
         return (
           <div style={{ position: "relative", width: "100%", height: "100%" }}>
@@ -444,9 +463,7 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
                 position: "absolute",
                 top: "50%",
                 transform: "translateY(-50%)",
-                ...(isLeft
-                  ? { right: "100%", marginRight: labelGap }
-                  : { left: "100%", marginLeft: labelGap }),
+                ...(isLeft ? { right: "100%", marginRight: labelGap } : { left: "100%", marginLeft: labelGap }),
                 fontSize: labelFontSize,
                 color: labelColor,
                 fontWeight: labelFontWeight,
@@ -455,11 +472,9 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
               className="text-sm font-medium"
             >
               {catLabelText}
-              {isRequired && <span className="text-orange-500 ml-0.5">*</span>}
+              {isRequired && <span className="ml-0.5 text-amber-500">*</span>}
             </label>
-            <div style={{ width: "100%", height: "100%" }}>
-              {renderedCatSelect}
-            </div>
+            <div style={{ width: "100%", height: "100%" }}>{renderedCatSelect}</div>
           </div>
         );
       }
@@ -596,13 +611,16 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
         const safeProps = filterDOMProps(restProps);
 
         // 컴포넌트의 columnName에 해당하는 formData 값 추출
-        const fieldName = (component as any).columnName || (component as any).componentConfig?.columnName || component.id;
+        const fieldName =
+          (component as any).columnName || (component as any).componentConfig?.columnName || component.id;
 
         // 다중 레코드를 다루는 컴포넌트는 배열 데이터로 초기화
         let currentValue;
-        if (componentType === "modal-repeater-table" || 
-            componentType === "repeat-screen-modal" ||
-            componentType === "selected-items-detail-input") {
+        if (
+          componentType === "modal-repeater-table" ||
+          componentType === "repeat-screen-modal" ||
+          componentType === "selected-items-detail-input"
+        ) {
           // EditModal/ScreenModal에서 전달된 groupedData가 있으면 우선 사용
           currentValue = props.groupedData || formData?.[fieldName] || [];
         } else if (componentType === "v2-repeater") {
@@ -660,11 +678,15 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
           return null;
         }
 
-        // size.width와 size.height를 style.width와 style.height로 변환
+        const isRuntimeMode = !props.isDesignMode;
         const finalStyle: React.CSSProperties = {
           ...component.style,
-          width: component.size?.width ? `${component.size.width}px` : component.style?.width,
-          height: component.size?.height ? `${component.size.height}px` : component.style?.height,
+          width: isRuntimeMode ? "100%" : component.size?.width ? `${component.size.width}px` : component.style?.width,
+          height: isRuntimeMode
+            ? "100%"
+            : component.size?.height
+              ? `${component.size.height}px`
+              : component.style?.height,
         };
 
         // 🆕 엔티티 검색 컴포넌트는 componentConfig.tableName을 사용해야 함 (화면 테이블이 아닌 검색 대상 테이블)
@@ -677,9 +699,10 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
 
         // 🆕 v2-input 등의 라벨 표시 로직 (labelDisplay가 true/"true"일 때만 라벨 표시)
         const labelDisplay = component.style?.labelDisplay ?? (component as any).labelDisplay;
-        const effectiveLabel = (labelDisplay === true || labelDisplay === "true")
-          ? (component.style?.labelText || (component as any).label || component.componentConfig?.label)
-          : undefined;
+        const effectiveLabel =
+          labelDisplay === true || labelDisplay === "true"
+            ? component.style?.labelText || (component as any).label || component.componentConfig?.label
+            : undefined;
 
         // 🔧 수평 라벨(left/right) 감지 → 외부 flex 컨테이너에서 라벨 처리
         const labelPosition = component.style?.labelPosition;
@@ -692,22 +715,24 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
 
         // 🔧 순서 중요! component.style 먼저, CSS 크기 속성은 size 기반으로 덮어씀
         const mergedStyle = {
-          ...component.style,  // 원본 style (labelDisplay, labelText 등) - 먼저!
+          ...component.style, // 원본 style (labelDisplay, labelText 등) - 먼저!
           // CSS 크기 속성은 size에서 계산한 값으로 명시적 덮어쓰기 (우선순위 최고)
           width: finalStyle.width,
           height: finalStyle.height,
           // 수평 라벨 → V2 컴포넌트에는 라벨 비활성화 (외부에서 처리)
-          ...(needsExternalHorizLabel ? {
-            labelDisplay: false,
-            labelPosition: "top" as const,
-            width: "100%",
-            height: "100%",
-            borderWidth: undefined,
-            borderColor: undefined,
-            borderStyle: undefined,
-            border: undefined,
-            borderRadius: undefined,
-          } : {}),
+          ...(needsExternalHorizLabel
+            ? {
+                labelDisplay: false,
+                labelPosition: "top" as const,
+                width: "100%",
+                height: "100%",
+                borderWidth: undefined,
+                borderColor: undefined,
+                borderStyle: undefined,
+                border: undefined,
+                borderRadius: undefined,
+              }
+            : {}),
         };
 
         // 컬럼 메타데이터 기반 componentConfig 병합 (DB 최신 설정 우선)
@@ -715,10 +740,14 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
         const baseColumnName = isEntityJoinColumn ? undefined : fieldName;
         const mergedComponentConfig = mergeColumnMeta(screenTableName, baseColumnName, component.componentConfig || {});
 
+        // NOT NULL 기반 필수 여부를 component.required에 반영
+        const notNullRequired = isColumnRequiredByMeta(screenTableName, baseColumnName);
+        const effectiveRequired = component.required || notNullRequired;
+
         // 엔티티 조인 컬럼은 런타임에서 readonly/disabled 강제 해제
         const effectiveComponent = isEntityJoinColumn
-          ? { ...component, componentConfig: mergedComponentConfig, readonly: false }
-          : { ...component, componentConfig: mergedComponentConfig };
+          ? { ...component, componentConfig: mergedComponentConfig, readonly: false, required: effectiveRequired }
+          : { ...component, componentConfig: mergedComponentConfig, required: effectiveRequired };
 
         const rendererProps = {
           component: effectiveComponent,
@@ -728,7 +757,7 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
           onDragEnd,
           size: needsExternalHorizLabel
             ? { ...(component.size || newComponent.defaultSize), width: undefined, height: undefined }
-            : (component.size || newComponent.defaultSize),
+            : component.size || newComponent.defaultSize,
           position: component.position,
           config: mergedComponentConfig,
           componentConfig: mergedComponentConfig,
@@ -738,21 +767,29 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
           style: mergedStyle,
           // 수평 라벨 → 외부에서 처리하므로 label 전달 안 함
           label: needsExternalHorizLabel ? undefined : effectiveLabel,
+          // NOT NULL 메타데이터 포함된 필수 여부 (V2Hierarchy 등 직접 props.required 참조하는 컴포넌트용)
+          required: effectiveRequired,
           // 🆕 V2 레이아웃에서 overrides에서 복원된 상위 레벨 속성들도 전달 (DB 메타데이터 우선)
-          inputType: (baseColumnName && columnMetaCache[screenTableName || ""]?.[baseColumnName]?.input_type) || (component as any).inputType || mergedComponentConfig?.inputType,
+          inputType:
+            (baseColumnName && columnMetaCache[screenTableName || ""]?.[baseColumnName]?.input_type) ||
+            (component as any).inputType ||
+            mergedComponentConfig?.inputType,
           columnName: (component as any).columnName || component.componentConfig?.columnName,
           value: currentValue, // formData에서 추출한 현재 값 전달
           // 새로운 기능들 전달
           // 🆕 webTypeConfig.numberingRuleId가 있으면 autoGeneration으로 변환
-          autoGeneration: component.autoGeneration || 
+          autoGeneration:
+            component.autoGeneration ||
             component.componentConfig?.autoGeneration ||
-            ((component as any).webTypeConfig?.numberingRuleId ? {
-              type: "numbering_rule" as const,
-              enabled: true,
-              options: {
-                numberingRuleId: (component as any).webTypeConfig.numberingRuleId,
-              },
-            } : undefined),
+            ((component as any).webTypeConfig?.numberingRuleId
+              ? {
+                  type: "numbering_rule" as const,
+                  enabled: true,
+                  options: {
+                    numberingRuleId: (component as any).webTypeConfig.numberingRuleId,
+                  },
+                }
+              : undefined),
           hidden: hiddenValue,
           // React 전용 props들은 직접 전달 (DOM에 전달되지 않음)
           isInteractive,
@@ -761,8 +798,8 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
           onChange: handleChange, // 개선된 onChange 핸들러 전달
           // 🆕 엔티티 검색 컴포넌트는 componentConfig.tableName 유지, 그 외는 화면 테이블명 사용
           // 🆕 component.tableName도 확인 (V2 레이아웃에서 overrides.tableName이 복원됨)
-          tableName: useConfigTableName 
-            ? component.componentConfig?.tableName || (component as any).tableName || tableName 
+          tableName: useConfigTableName
+            ? component.componentConfig?.tableName || (component as any).tableName || tableName
             : tableName,
           menuId, // 🆕 메뉴 ID
           menuObjid, // 🆕 메뉴 OBJID (메뉴 스코프)
@@ -780,7 +817,7 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
           mode: component.componentConfig?.mode || mode,
           isInModal,
           readonly: isEntityJoinColumn ? false : component.readonly,
-          disabled: isEntityJoinColumn ? false : (disabledFields?.includes(fieldName) || component.readonly),
+          disabled: isEntityJoinColumn ? false : disabledFields?.includes(fieldName) || component.readonly,
           originalData,
           allComponents,
           onUpdateLayout,
@@ -815,7 +852,8 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
           // 🆕 UniversalFormModal용 initialData 전달
           // 우선순위: props.initialData > originalData > formData
           // 조건부 컨테이너에서 전달된 initialData가 있으면 그것을 사용
-          _initialData: props.initialData || ((originalData && Object.keys(originalData).length > 0) ? originalData : formData),
+          _initialData:
+            props.initialData || (originalData && Object.keys(originalData).length > 0 ? originalData : formData),
           _originalData: originalData,
           // 🆕 initialData도 직접 전달 (조건부 컨테이너 → 내부 컴포넌트)
           initialData: props.initialData,
@@ -850,9 +888,9 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
         if (needsExternalHorizLabel) {
           const labelGap = component.style?.labelGap || "8px";
           const labelFontSize = component.style?.labelFontSize || "14px";
-          const labelColor = component.style?.labelColor || "#64748b";
+          const labelColor = getAdaptiveLabelColor(component.style?.labelColor);
           const labelFontWeight = component.style?.labelFontWeight || "500";
-          const isRequired = component.required || (component as any).required;
+          const isRequired = effectiveComponent.required || isColumnRequiredByMeta(screenTableName, baseColumnName);
           const isLeft = labelPosition === "left";
 
           return (
@@ -862,9 +900,7 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
                   position: "absolute",
                   top: "50%",
                   transform: "translateY(-50%)",
-                  ...(isLeft
-                    ? { right: "100%", marginRight: labelGap }
-                    : { left: "100%", marginLeft: labelGap }),
+                  ...(isLeft ? { right: "100%", marginRight: labelGap } : { left: "100%", marginLeft: labelGap }),
                   fontSize: labelFontSize,
                   color: labelColor,
                   fontWeight: labelFontWeight,
@@ -873,11 +909,9 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
                 className="text-sm font-medium"
               >
                 {effectiveLabel}
-                {isRequired && <span className="text-orange-500 ml-0.5">*</span>}
+                {isRequired && <span className="ml-0.5 text-amber-500">*</span>}
               </label>
-              <div style={{ width: "100%", height: "100%" }}>
-                {renderedElement}
-              </div>
+              <div style={{ width: "100%", height: "100%" }}>{renderedElement}</div>
             </div>
           );
         }
@@ -965,10 +999,10 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
 
     // 오류 발생 시 폴백 렌더링
     return (
-      <div className="flex h-full w-full items-center justify-center rounded border-2 border-red-300 bg-red-50 p-4">
+      <div className="border-destructive/30 bg-destructive/10 flex h-full w-full items-center justify-center rounded border-2 p-4">
         <div className="text-center">
-          <div className="mb-2 text-sm font-medium text-red-600">렌더링 오류</div>
-          <div className="text-xs text-red-400">
+          <div className="text-destructive mb-2 text-sm font-medium">렌더링 오류</div>
+          <div className="text-destructive/80 text-xs">
             {componentType}: {error instanceof Error ? error.message : "알 수 없는 오류"}
           </div>
         </div>
diff --git a/frontend/lib/registry/DynamicConfigPanel.tsx b/frontend/lib/registry/DynamicConfigPanel.tsx
index 47743f3d..52a5030a 100644
--- a/frontend/lib/registry/DynamicConfigPanel.tsx
+++ b/frontend/lib/registry/DynamicConfigPanel.tsx
@@ -31,11 +31,11 @@ export const DynamicConfigPanel: React.FC<
   // 웹타입이 DB에 없는 경우
   if (!webTypes) {
     return (
-      <div className="rounded-md border border-dashed border-gray-300 bg-gray-50 p-4">
-        <div className="flex items-center gap-2 text-gray-600">
+      <div className="rounded-md border border-dashed border-input bg-muted p-4">
+        <div className="flex items-center gap-2 text-muted-foreground">
           <span className="text-sm font-medium">⏳ 로딩 중...</span>
         </div>
-        <p className="mt-1 text-xs text-gray-500">웹타입 정보를 불러오는 중입니다.</p>
+        <p className="mt-1 text-xs text-muted-foreground">웹타입 정보를 불러오는 중입니다.</p>
       </div>
     );
   }
@@ -43,11 +43,11 @@ export const DynamicConfigPanel: React.FC<
   if (!dbWebType) {
     console.warn(`웹타입 "${webType}"이 데이터베이스에 등록되지 않았습니다.`);
     return (
-      <div className="rounded-md border border-dashed border-red-300 bg-red-50 p-4">
-        <div className="flex items-center gap-2 text-red-600">
+      <div className="rounded-md border border-dashed border-destructive/30 bg-destructive/10 p-4">
+        <div className="flex items-center gap-2 text-destructive">
           <span className="text-sm font-medium">⚠️ 웹타입 없음</span>
         </div>
-        <p className="mt-1 text-xs text-red-500">웹타입 "{webType}"이 데이터베이스에 등록되지 않았습니다.</p>
+        <p className="mt-1 text-xs text-destructive">웹타입 "{webType}"이 데이터베이스에 등록되지 않았습니다.</p>
       </div>
     );
   }
@@ -60,11 +60,11 @@ export const DynamicConfigPanel: React.FC<
   if (!configPanelName || configPanelName === "none") {
     console.log(`🔧 DynamicConfigPanel: 설정 패널이 없음 - 기본 설정 표시`);
     return (
-      <div className="rounded-md border border-dashed border-yellow-300 bg-yellow-50 p-4">
-        <div className="flex items-center gap-2 text-yellow-600">
+      <div className="rounded-md border border-dashed border-amber-300 bg-amber-50 p-4">
+        <div className="flex items-center gap-2 text-amber-600">
           <span className="text-sm font-medium">⚠️ 기본 설정</span>
         </div>
-        <p className="mt-1 text-xs text-yellow-500">웹타입 "{webType}"에 대한 추가 설정이 없습니다.</p>
+        <p className="mt-1 text-xs text-amber-500">웹타입 "{webType}"에 대한 추가 설정이 없습니다.</p>
       </div>
     );
   }
@@ -76,11 +76,11 @@ export const DynamicConfigPanel: React.FC<
   if (!ConfigPanelComponent) {
     console.warn(`설정 패널 "${configPanelName}"을 찾을 수 없습니다.`);
     return (
-      <div className="rounded-md border border-dashed border-red-300 bg-red-50 p-4">
-        <div className="flex items-center gap-2 text-red-600">
+      <div className="rounded-md border border-dashed border-destructive/30 bg-destructive/10 p-4">
+        <div className="flex items-center gap-2 text-destructive">
           <span className="text-sm font-medium">⚠️ 설정 패널 미구현</span>
         </div>
-        <p className="mt-1 text-xs text-red-500">설정 패널 "{configPanelName}"을 찾을 수 없습니다.</p>
+        <p className="mt-1 text-xs text-destructive">설정 패널 "{configPanelName}"을 찾을 수 없습니다.</p>
       </div>
     );
   }
@@ -100,13 +100,13 @@ export const DynamicConfigPanel: React.FC<
   } catch (error) {
     console.error(`웹타입 "${webType}" 설정 패널 렌더링 중 오류 발생:`, error);
     return (
-      <div className="rounded-md border border-dashed border-red-300 bg-red-50 p-4">
-        <div className="flex items-center gap-2 text-red-600">
+      <div className="rounded-md border border-dashed border-destructive/30 bg-destructive/10 p-4">
+        <div className="flex items-center gap-2 text-destructive">
           <span className="text-sm font-medium">💥 설정 패널 오류</span>
         </div>
-        <p className="mt-1 text-xs text-red-500">웹타입 "{webType}" 설정 패널 렌더링 중 오류가 발생했습니다.</p>
+        <p className="mt-1 text-xs text-destructive">웹타입 "{webType}" 설정 패널 렌더링 중 오류가 발생했습니다.</p>
         {process.env.NODE_ENV === "development" && (
-          <pre className="mt-2 overflow-auto text-xs text-red-400">
+          <pre className="mt-2 overflow-auto text-xs text-destructive/80">
             {error instanceof Error ? error.stack : String(error)}
           </pre>
         )}
diff --git a/frontend/lib/registry/DynamicLayoutRenderer.tsx b/frontend/lib/registry/DynamicLayoutRenderer.tsx
index ae4473e2..ce6165f2 100644
--- a/frontend/lib/registry/DynamicLayoutRenderer.tsx
+++ b/frontend/lib/registry/DynamicLayoutRenderer.tsx
@@ -54,13 +54,13 @@ export const DynamicLayoutRenderer: React.FC<DynamicLayoutRendererProps> = ({
     // 폴백 렌더링 - 기본 플레이스홀더
     return (
       <div
-        className={`flex h-full w-full items-center justify-center rounded border-2 border-dashed border-gray-300 bg-gray-50 p-4 ${className || ""}`}
+        className={`flex h-full w-full items-center justify-center rounded border-2 border-dashed border-input bg-muted p-4 ${className || ""}`}
         style={style}
         onClick={onClick}
       >
         <div className="text-center">
-          <div className="mb-2 text-sm font-medium text-gray-600">{layout.label || `레이아웃 ${layout.id}`}</div>
-          <div className="text-xs text-gray-400">미구현 레이아웃: {layout.layoutType}</div>
+          <div className="mb-2 text-sm font-medium text-muted-foreground">{layout.label || `레이아웃 ${layout.id}`}</div>
+          <div className="text-xs text-muted-foreground/70">미구현 레이아웃: {layout.layoutType}</div>
         </div>
       </div>
     );
@@ -97,13 +97,13 @@ export const DynamicLayoutRenderer: React.FC<DynamicLayoutRendererProps> = ({
     // 오류 발생 시 폴백 렌더링
     return (
       <div
-        className={`flex h-full w-full items-center justify-center rounded border-2 border-red-300 bg-red-50 p-4 ${className || ""}`}
+        className={`flex h-full w-full items-center justify-center rounded border-2 border-destructive/30 bg-destructive/10 p-4 ${className || ""}`}
         style={style}
         onClick={onClick}
       >
         <div className="text-center">
-          <div className="mb-2 text-sm font-medium text-red-600">레이아웃 렌더링 오류</div>
-          <div className="text-xs text-red-400">
+          <div className="mb-2 text-sm font-medium text-destructive">레이아웃 렌더링 오류</div>
+          <div className="text-xs text-destructive/80">
             {layout.layoutType}: {error instanceof Error ? error.message : "알 수 없는 오류"}
           </div>
         </div>
diff --git a/frontend/lib/registry/DynamicWebTypeRenderer.tsx b/frontend/lib/registry/DynamicWebTypeRenderer.tsx
index 9bfe59ff..8b6e66bf 100644
--- a/frontend/lib/registry/DynamicWebTypeRenderer.tsx
+++ b/frontend/lib/registry/DynamicWebTypeRenderer.tsx
@@ -133,11 +133,11 @@ export const DynamicWebTypeRenderer: React.FC<DynamicComponentProps> = ({
     if (!webTypeDefinition.isActive) {
       // console.warn(`웹타입 "${webType}"이 비활성화되어 있습니다.`);
       return (
-        <div className="rounded-md border border-dashed border-yellow-500/30 bg-yellow-50 p-3 dark:bg-yellow-950/20">
+        <div className="rounded-md border border-dashed border-yellow-500/30 bg-amber-50 p-3 dark:bg-yellow-950/20">
           <div className="flex items-center gap-2 text-yellow-700 dark:text-yellow-400">
             <span className="text-xs font-medium">⚠️ 비활성화된 웹타입</span>
           </div>
-          <p className="mt-1 text-xs text-yellow-600 dark:text-yellow-500">
+          <p className="mt-1 text-xs text-amber-600 dark:text-amber-500">
             웹타입 "{webType}"이 비활성화되어 있습니다.
           </p>
         </div>
diff --git a/frontend/lib/registry/components/AreaRenderer.tsx b/frontend/lib/registry/components/AreaRenderer.tsx
index c2f8842a..7da6a5cf 100644
--- a/frontend/lib/registry/components/AreaRenderer.tsx
+++ b/frontend/lib/registry/components/AreaRenderer.tsx
@@ -28,14 +28,14 @@ const renderArea = (component: ComponentData, children?: React.ReactNode) => {
   const renderPlaceholder = () => (
     <div className="flex h-full flex-col items-center justify-center text-center">
       {getAreaIcon(layoutType)}
-      <div className="mt-2 text-sm font-medium text-gray-600">{title || "영역"}</div>
-      {description && <div className="mt-1 text-xs text-gray-400">{description}</div>}
-      <div className="mt-1 text-xs text-gray-400">레이아웃: {layoutType}</div>
+      <div className="mt-2 text-sm font-medium text-muted-foreground">{title || "영역"}</div>
+      {description && <div className="mt-1 text-xs text-muted-foreground/70">{description}</div>}
+      <div className="mt-1 text-xs text-muted-foreground/70">레이아웃: {layoutType}</div>
     </div>
   );
 
   return (
-    <div className="relative h-full w-full rounded border border-dashed border-gray-300 bg-gray-50 p-2">
+    <div className="relative h-full w-full rounded border border-dashed border-input bg-muted p-2">
       <div className="relative h-full w-full">
         {children && React.Children.count(children) > 0 ? children : renderPlaceholder()}
       </div>
diff --git a/frontend/lib/registry/components/ChartRenderer.tsx b/frontend/lib/registry/components/ChartRenderer.tsx
index 1d86fe6c..99a87c6b 100644
--- a/frontend/lib/registry/components/ChartRenderer.tsx
+++ b/frontend/lib/registry/components/ChartRenderer.tsx
@@ -19,9 +19,9 @@ const ChartRenderer: ComponentRenderer = ({ component, ...props }) => {
   const getChartIcon = () => {
     switch (chartType) {
       case "line":
-        return <LineChart className="h-8 w-8 text-blue-500" />;
+        return <LineChart className="h-8 w-8 text-primary" />;
       case "pie":
-        return <PieChart className="h-8 w-8 text-green-500" />;
+        return <PieChart className="h-8 w-8 text-emerald-500" />;
       default:
         return <BarChart3 className="h-8 w-8 text-purple-500" />;
     }
@@ -46,9 +46,9 @@ const ChartRenderer: ComponentRenderer = ({ component, ...props }) => {
       <CardContent className="flex flex-1 items-center justify-center">
         <div className="text-center">
           {getChartIcon()}
-          <div className="mt-2 text-sm text-gray-600">{getChartTypeName()}</div>
-          <div className="mt-1 text-xs text-gray-400">미리보기 모드</div>
-          {data.length > 0 && <div className="mt-2 text-xs text-gray-500">데이터 {data.length}개 항목</div>}
+          <div className="mt-2 text-sm text-muted-foreground">{getChartTypeName()}</div>
+          <div className="mt-1 text-xs text-muted-foreground/70">미리보기 모드</div>
+          {data.length > 0 && <div className="mt-2 text-xs text-muted-foreground">데이터 {data.length}개 항목</div>}
         </div>
       </CardContent>
     </Card>
diff --git a/frontend/lib/registry/components/DashboardRenderer.tsx b/frontend/lib/registry/components/DashboardRenderer.tsx
index 5d31dcc4..ce77a144 100644
--- a/frontend/lib/registry/components/DashboardRenderer.tsx
+++ b/frontend/lib/registry/components/DashboardRenderer.tsx
@@ -39,8 +39,8 @@ const DashboardRenderer: ComponentRenderer = ({ component, children, isInteracti
               key={index}
               className={`flex min-h-0 items-center justify-center rounded p-2 ${
                 isInteractive
-                  ? "border border-gray-200 bg-white shadow-sm"
-                  : "border-2 border-dashed border-gray-300 bg-gray-50"
+                  ? "border border-border bg-white shadow-sm"
+                  : "border-2 border-dashed border-input bg-muted"
               }`}
               style={{
                 minWidth: 0,
@@ -49,11 +49,11 @@ const DashboardRenderer: ComponentRenderer = ({ component, children, isInteracti
               }}
             >
               <div className="text-center">
-                <LayoutGrid className={`mx-auto mb-2 h-6 w-6 ${isInteractive ? "text-blue-500" : "text-gray-400"}`} />
-                <div className={`text-xs ${isInteractive ? "font-medium text-gray-700" : "text-gray-400"}`}>
+                <LayoutGrid className={`mx-auto mb-2 h-6 w-6 ${isInteractive ? "text-primary" : "text-muted-foreground/70"}`} />
+                <div className={`text-xs ${isInteractive ? "font-medium text-foreground" : "text-muted-foreground/70"}`}>
                   그리드 {index + 1}
                 </div>
-                {isInteractive && <div className="mt-1 text-xs text-gray-500">실제 화면</div>}
+                {isInteractive && <div className="mt-1 text-xs text-muted-foreground">실제 화면</div>}
               </div>
             </div>
           ))}
diff --git a/frontend/lib/registry/components/FileRenderer.tsx b/frontend/lib/registry/components/FileRenderer.tsx
index cf8a0d18..66ccab76 100644
--- a/frontend/lib/registry/components/FileRenderer.tsx
+++ b/frontend/lib/registry/components/FileRenderer.tsx
@@ -9,11 +9,11 @@ import { File } from "lucide-react";
 const FileRenderer: ComponentRenderer = ({ component, ...props }) => {
   return (
     <div className="flex h-full flex-col">
-      <div className="pointer-events-none flex-1 rounded border-2 border-dashed border-gray-300 bg-gray-50 p-4">
+      <div className="pointer-events-none flex-1 rounded border-2 border-dashed border-input bg-muted p-4">
         <div className="flex h-full flex-col items-center justify-center text-center">
-          <File className="mb-2 h-8 w-8 text-gray-400" />
-          <p className="text-sm text-gray-600">파일 업로드 영역</p>
-          <p className="mt-1 text-xs text-gray-400">미리보기 모드</p>
+          <File className="mb-2 h-8 w-8 text-muted-foreground/70" />
+          <p className="text-sm text-muted-foreground">파일 업로드 영역</p>
+          <p className="mt-1 text-xs text-muted-foreground/70">미리보기 모드</p>
         </div>
       </div>
     </div>
diff --git a/frontend/lib/registry/components/FilterDropdownRenderer.tsx b/frontend/lib/registry/components/FilterDropdownRenderer.tsx
index 8be96162..f21abfab 100644
--- a/frontend/lib/registry/components/FilterDropdownRenderer.tsx
+++ b/frontend/lib/registry/components/FilterDropdownRenderer.tsx
@@ -23,7 +23,7 @@ const FilterDropdownRenderer: ComponentRenderer = ({ component, ...props }) => {
 
   return (
     <div className="flex h-full w-full items-center gap-2 p-2" style={style}>
-      {showIcon && <Filter className="h-4 w-4 text-gray-500" />}
+      {showIcon && <Filter className="h-4 w-4 text-muted-foreground" />}
       <div className="flex-1">
         <Select disabled>
           <SelectTrigger className="pointer-events-none">
diff --git a/frontend/lib/registry/components/LoadingRenderer.tsx b/frontend/lib/registry/components/LoadingRenderer.tsx
index 09f93105..1bc5ac95 100644
--- a/frontend/lib/registry/components/LoadingRenderer.tsx
+++ b/frontend/lib/registry/components/LoadingRenderer.tsx
@@ -28,8 +28,8 @@ const LoadingRenderer: ComponentRenderer = ({ component, ...props }) => {
 
   return (
     <div className="flex h-full w-full flex-col items-center justify-center gap-2" style={style}>
-      <Loader2 className={`animate-spin text-blue-600 ${getSizeClass()}`} />
-      {showText && <div className="text-sm text-gray-600">{text}</div>}
+      <Loader2 className={`animate-spin text-primary ${getSizeClass()}`} />
+      {showText && <div className="text-sm text-muted-foreground">{text}</div>}
     </div>
   );
 };
diff --git a/frontend/lib/registry/components/PanelRenderer.tsx b/frontend/lib/registry/components/PanelRenderer.tsx
index c6b4dac2..89dbec62 100644
--- a/frontend/lib/registry/components/PanelRenderer.tsx
+++ b/frontend/lib/registry/components/PanelRenderer.tsx
@@ -16,21 +16,21 @@ const PanelRenderer: ComponentRenderer = ({ component, children, ...props }) =>
 
   return (
     <Card 
-      className="h-full w-full border-2 border-gray-200 shadow-lg hover:shadow-xl transition-all duration-300 hover:border-orange-300" 
+      className="h-full w-full border-2 border-border shadow-lg hover:shadow-xl transition-all duration-300 hover:border-orange-300" 
       style={style}
     >
-      <CardHeader className="pb-2 bg-gradient-to-r from-slate-50 to-gray-50 border-b border-gray-200">
+      <CardHeader className="pb-2 bg-gradient-to-r from-slate-50 to-muted border-b border-border">
         <div className="flex items-center justify-between">
-          <CardTitle className="text-lg font-semibold text-gray-800">{title}</CardTitle>
+          <CardTitle className="text-lg font-semibold text-foreground">{title}</CardTitle>
           {collapsible && (
             <Button
               variant="ghost"
               size="sm"
               onClick={() => setIsExpanded(!isExpanded)}
-              className="pointer-events-none h-6 w-6 p-0 hover:bg-orange-100 rounded-full"
+              className="pointer-events-none h-6 w-6 p-0 hover:bg-amber-100 rounded-full"
               disabled
             >
-              {isExpanded ? <ChevronUp className="h-4 w-4 text-orange-600" /> : <ChevronDown className="h-4 w-4 text-orange-600" />}
+              {isExpanded ? <ChevronUp className="h-4 w-4 text-amber-600" /> : <ChevronDown className="h-4 w-4 text-amber-600" />}
             </Button>
           )}
         </div>
@@ -41,9 +41,9 @@ const PanelRenderer: ComponentRenderer = ({ component, children, ...props }) =>
             children
           ) : (
             <div className="flex h-full items-center justify-center text-center p-8">
-              <div className="bg-gray-50 rounded-lg p-6 border-2 border-dashed border-gray-300">
-                <div className="text-sm text-gray-600 font-medium">패널 내용 영역</div>
-                <div className="mt-2 text-xs text-gray-400">컴포넌트를 여기에 배치하세요</div>
+              <div className="bg-muted rounded-lg p-6 border-2 border-dashed border-input">
+                <div className="text-sm text-muted-foreground font-medium">패널 내용 영역</div>
+                <div className="mt-2 text-xs text-muted-foreground/70">컴포넌트를 여기에 배치하세요</div>
               </div>
             </div>
           )}
diff --git a/frontend/lib/registry/components/ProgressBarRenderer.tsx b/frontend/lib/registry/components/ProgressBarRenderer.tsx
index 8e24d74f..36cb409e 100644
--- a/frontend/lib/registry/components/ProgressBarRenderer.tsx
+++ b/frontend/lib/registry/components/ProgressBarRenderer.tsx
@@ -24,8 +24,8 @@ const ProgressBarRenderer: ComponentRenderer = ({ component, ...props }) => {
     <div className="flex h-full w-full flex-col justify-center p-4" style={style}>
       <div className="space-y-2">
         <div className="flex items-center justify-between">
-          <span className="text-sm font-medium text-gray-700">{label}</span>
-          <div className="flex items-center gap-2 text-sm text-gray-600">
+          <span className="text-sm font-medium text-foreground">{label}</span>
+          <div className="flex items-center gap-2 text-sm text-muted-foreground">
             {showValue && (
               <span>
                 {value}/{max}
diff --git a/frontend/lib/registry/components/SearchBoxRenderer.tsx b/frontend/lib/registry/components/SearchBoxRenderer.tsx
index 5ca081e0..00a264c5 100644
--- a/frontend/lib/registry/components/SearchBoxRenderer.tsx
+++ b/frontend/lib/registry/components/SearchBoxRenderer.tsx
@@ -15,7 +15,7 @@ const SearchBoxRenderer: ComponentRenderer = ({ component, ...props }) => {
   return (
     <div className="flex h-full w-full items-center gap-2 p-2" style={style}>
       <div className="relative flex-1">
-        <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400" />
+        <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-muted-foreground/70" />
         <Input placeholder={placeholder} className="pointer-events-none pl-10" disabled />
       </div>
       {showButton && (
diff --git a/frontend/lib/registry/components/StatsCardRenderer.tsx b/frontend/lib/registry/components/StatsCardRenderer.tsx
index e7fd3883..6a5e334f 100644
--- a/frontend/lib/registry/components/StatsCardRenderer.tsx
+++ b/frontend/lib/registry/components/StatsCardRenderer.tsx
@@ -21,29 +21,29 @@ const StatsCardRenderer: ComponentRenderer = ({ component, ...props }) => {
   const getTrendIcon = () => {
     switch (trend) {
       case "up":
-        return <TrendingUp className="h-4 w-4 text-green-600" />;
+        return <TrendingUp className="h-4 w-4 text-emerald-600" />;
       case "down":
-        return <TrendingDown className="h-4 w-4 text-red-600" />;
+        return <TrendingDown className="h-4 w-4 text-destructive" />;
       default:
-        return <Minus className="h-4 w-4 text-gray-600" />;
+        return <Minus className="h-4 w-4 text-muted-foreground" />;
     }
   };
 
   const getTrendColor = () => {
     switch (trend) {
       case "up":
-        return "text-green-600";
+        return "text-emerald-600";
       case "down":
-        return "text-red-600";
+        return "text-destructive";
       default:
-        return "text-gray-600";
+        return "text-muted-foreground";
     }
   };
 
   return (
     <Card className="h-full w-full" style={style}>
       <CardHeader className="pb-2">
-        <CardTitle className="text-sm font-medium text-gray-600">{title}</CardTitle>
+        <CardTitle className="text-sm font-medium text-muted-foreground">{title}</CardTitle>
       </CardHeader>
       <CardContent>
         <div className="flex items-center justify-between">
@@ -52,7 +52,7 @@ const StatsCardRenderer: ComponentRenderer = ({ component, ...props }) => {
             <div className={`flex items-center gap-1 text-sm ${getTrendColor()}`}>
               {getTrendIcon()}
               <span>{change}</span>
-              <span className="text-gray-500">{description}</span>
+              <span className="text-muted-foreground">{description}</span>
             </div>
           </div>
         </div>
diff --git a/frontend/lib/registry/components/TabsRenderer.tsx b/frontend/lib/registry/components/TabsRenderer.tsx
index 99efdaca..fd98bda6 100644
--- a/frontend/lib/registry/components/TabsRenderer.tsx
+++ b/frontend/lib/registry/components/TabsRenderer.tsx
@@ -34,10 +34,10 @@ const TabsRenderer: ComponentRenderer = ({ component, children, ...props }) => {
             {children && React.Children.count(children) > 0 ? (
               children
             ) : (
-              <div className="flex h-full items-center justify-center rounded border border-dashed border-gray-300 bg-gray-50">
+              <div className="flex h-full items-center justify-center rounded border border-dashed border-input bg-muted">
                 <div className="text-center">
-                  <div className="text-sm text-gray-600">{tab.content}</div>
-                  <div className="mt-1 text-xs text-gray-400">탭 내용 영역</div>
+                  <div className="text-sm text-muted-foreground">{tab.content}</div>
+                  <div className="mt-1 text-xs text-muted-foreground/70">탭 내용 영역</div>
                 </div>
               </div>
             )}
diff --git a/frontend/lib/registry/components/WidgetRenderer.tsx b/frontend/lib/registry/components/WidgetRenderer.tsx
index 7b7aa218..62ec7bf1 100644
--- a/frontend/lib/registry/components/WidgetRenderer.tsx
+++ b/frontend/lib/registry/components/WidgetRenderer.tsx
@@ -10,7 +10,7 @@ import { DynamicWebTypeRenderer } from "../DynamicWebTypeRenderer";
 const WidgetRenderer: ComponentRenderer = ({ component, ...props }) => {
   // 위젯 컴포넌트가 아닌 경우 빈 div 반환
   if (component.type !== "widget") {
-    return <div className="text-xs text-gray-500">위젯이 아닙니다</div>;
+    return <div className="text-xs text-muted-foreground">위젯이 아닙니다</div>;
   }
 
   const widget = component as WidgetComponent;
diff --git a/frontend/lib/registry/components/accordion-basic/AccordionBasicComponent.tsx b/frontend/lib/registry/components/accordion-basic/AccordionBasicComponent.tsx
index 78951f7e..b60be346 100644
--- a/frontend/lib/registry/components/accordion-basic/AccordionBasicComponent.tsx
+++ b/frontend/lib/registry/components/accordion-basic/AccordionBasicComponent.tsx
@@ -4,6 +4,7 @@ import React, { useState, useEffect } from "react";
 import { ComponentRendererProps } from "../../types";
 import { AccordionBasicConfig, AccordionItem, DataSourceConfig, ContentFieldConfig } from "./types";
 import { apiClient } from "@/lib/api/client";
+import { getAdaptiveLabelColor } from "@/lib/utils/darkModeColor";
 
 // 커스텀 아코디언 컴포넌트
 interface CustomAccordionProps {
@@ -692,7 +693,7 @@ export const AccordionBasicComponent: React.FC<AccordionBasicComponentProps> = (
             top: "-25px",
             left: "0px",
             fontSize: component.style?.labelFontSize || "14px",
-            color: component.style?.labelColor || "#64748b",
+            color: getAdaptiveLabelColor(component.style?.labelColor),
             fontWeight: "500",
           }}
         >
@@ -703,11 +704,11 @@ export const AccordionBasicComponent: React.FC<AccordionBasicComponentProps> = (
 
       {loading ? (
         <div className="flex h-full w-full items-center justify-center">
-          <div className="text-sm text-gray-500">데이터를 불러오는 중...</div>
+          <div className="text-sm text-muted-foreground">데이터를 불러오는 중...</div>
         </div>
       ) : error && !isDesignMode ? (
         <div className="flex h-full w-full items-center justify-center">
-          <div className="text-sm text-red-500">{error}</div>
+          <div className="text-sm text-destructive">{error}</div>
         </div>
       ) : (
         <div
diff --git a/frontend/lib/registry/components/accordion-basic/AccordionBasicConfigPanel.tsx b/frontend/lib/registry/components/accordion-basic/AccordionBasicConfigPanel.tsx
index 2fa0b1d9..bf44617c 100644
--- a/frontend/lib/registry/components/accordion-basic/AccordionBasicConfigPanel.tsx
+++ b/frontend/lib/registry/components/accordion-basic/AccordionBasicConfigPanel.tsx
@@ -233,7 +233,7 @@ export const AccordionBasicConfigPanel: React.FC<AccordionBasicConfigPanelProps>
                               contentFields: newContentFields,
                             });
                           }}
-                          className="h-8 w-8 p-0 text-red-500"
+                          className="h-8 w-8 p-0 text-destructive"
                         >
                           <Trash2 className="h-4 w-4" />
                         </Button>
@@ -288,7 +288,7 @@ export const AccordionBasicConfigPanel: React.FC<AccordionBasicConfigPanelProps>
                 ))}
 
                 {(!config.dataSource?.contentFields || config.dataSource.contentFields.length === 0) && (
-                  <div className="py-4 text-center text-sm text-gray-500">내용 필드를 추가해주세요</div>
+                  <div className="py-4 text-center text-sm text-muted-foreground">내용 필드를 추가해주세요</div>
                 )}
               </div>
 
@@ -321,7 +321,7 @@ export const AccordionBasicConfigPanel: React.FC<AccordionBasicConfigPanelProps>
                 </Select>
               </div>
 
-              <div className="text-muted-foreground rounded-lg bg-blue-50 p-3 text-sm">
+              <div className="text-muted-foreground rounded-lg bg-primary/10 p-3 text-sm">
                 💡 <strong>스크롤 처리:</strong> 모든 데이터가 표시되며, 컴포넌트 높이를 초과하는 경우 자동으로 스크롤이
                 생성됩니다.
               </div>
@@ -471,7 +471,7 @@ export const AccordionBasicConfigPanel: React.FC<AccordionBasicConfigPanelProps>
                       variant="ghost"
                       size="sm"
                       onClick={() => removeItem(item.id)}
-                      className="h-8 w-8 p-0 text-red-500 hover:text-red-700"
+                      className="h-8 w-8 p-0 text-destructive hover:text-destructive"
                     >
                       <Trash2 className="h-4 w-4" />
                     </Button>
@@ -520,7 +520,7 @@ export const AccordionBasicConfigPanel: React.FC<AccordionBasicConfigPanelProps>
             ))}
 
             {localItems.length === 0 && (
-              <div className="py-8 text-center text-gray-500">
+              <div className="py-8 text-center text-muted-foreground">
                 <p className="text-sm">아이템이 없습니다.</p>
                 <p className="text-xs">위의 추가 버튼을 클릭하여 아이템을 추가하세요.</p>
               </div>
diff --git a/frontend/lib/registry/components/aggregation-widget/AggregationWidgetComponent.tsx b/frontend/lib/registry/components/aggregation-widget/AggregationWidgetComponent.tsx
index ce0b0325..cdbb668a 100644
--- a/frontend/lib/registry/components/aggregation-widget/AggregationWidgetComponent.tsx
+++ b/frontend/lib/registry/components/aggregation-widget/AggregationWidgetComponent.tsx
@@ -3,6 +3,7 @@
 import React, { useState, useEffect, useMemo } from "react";
 import { ComponentRendererProps } from "@/types/component";
 import { AggregationWidgetConfig, AggregationItem, AggregationResult, AggregationType } from "./types";
+import { formatNumber } from "@/lib/formatting";
 import { Calculator, TrendingUp, Hash, ArrowUp, ArrowDown } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { useScreenMultiLang } from "@/contexts/ScreenMultiLangContext";
@@ -136,11 +137,11 @@ export function AggregationWidgetComponent({
       let formattedValue = value.toFixed(item.decimalPlaces ?? 0);
 
       if (item.format === "currency") {
-        formattedValue = new Intl.NumberFormat("ko-KR").format(value);
+        formattedValue = formatNumber(value);
       } else if (item.format === "percent") {
         formattedValue = `${(value * 100).toFixed(item.decimalPlaces ?? 1)}%`;
       } else if (item.format === "number") {
-        formattedValue = new Intl.NumberFormat("ko-KR").format(value);
+        formattedValue = formatNumber(value);
       }
 
       if (item.prefix) {
diff --git a/frontend/lib/registry/components/aggregation-widget/AggregationWidgetConfigPanel.tsx b/frontend/lib/registry/components/aggregation-widget/AggregationWidgetConfigPanel.tsx
index ebfff828..fbea4660 100644
--- a/frontend/lib/registry/components/aggregation-widget/AggregationWidgetConfigPanel.tsx
+++ b/frontend/lib/registry/components/aggregation-widget/AggregationWidgetConfigPanel.tsx
@@ -170,7 +170,7 @@ export function AggregationWidgetConfigPanel({
 
         {/* 현재 선택된 테이블 표시 (카드 형태) */}
         <div className="flex items-center gap-2 rounded-md border bg-slate-50 p-2">
-          <Database className="h-4 w-4 text-blue-500" />
+          <Database className="h-4 w-4 text-primary" />
           <div className="flex-1">
             <div className="text-xs font-medium">
               {config.customTableName || config.tableName || screenTableName || "테이블 미선택"}
@@ -224,7 +224,7 @@ export function AggregationWidgetConfigPanel({
                           !config.useCustomTable ? "opacity-100" : "opacity-0"
                         )}
                       />
-                      <Database className="mr-2 h-3 w-3 text-blue-500" />
+                      <Database className="mr-2 h-3 w-3 text-primary" />
                       {screenTableName}
                     </CommandItem>
                   </CommandGroup>
diff --git a/frontend/lib/registry/components/autocomplete-search-input/AutocompleteSearchInputConfigPanel.tsx b/frontend/lib/registry/components/autocomplete-search-input/AutocompleteSearchInputConfigPanel.tsx
index bb0b8175..12264c82 100644
--- a/frontend/lib/registry/components/autocomplete-search-input/AutocompleteSearchInputConfigPanel.tsx
+++ b/frontend/lib/registry/components/autocomplete-search-input/AutocompleteSearchInputConfigPanel.tsx
@@ -173,7 +173,7 @@ export function AutocompleteSearchInputConfigPanel({
                       <Check className={cn("mr-2 h-4 w-4", localConfig.tableName === table.tableName ? "opacity-100" : "opacity-0")} />
                       <div className="flex flex-col">
                         <span className="font-medium">{table.displayName || table.tableName}</span>
-                        {table.displayName && <span className="text-[10px] text-gray-500">{table.tableName}</span>}
+                        {table.displayName && <span className="text-[10px] text-muted-foreground">{table.tableName}</span>}
                       </div>
                     </CommandItem>
                   ))}
@@ -266,7 +266,7 @@ export function AutocompleteSearchInputConfigPanel({
                           <Check className={cn("mr-2 h-4 w-4", isSelected ? "opacity-100" : "opacity-0")} />
                           <div className="flex flex-col">
                             <span className="font-medium">{column.displayName || column.columnName}</span>
-                            {column.displayName && <span className="text-[10px] text-gray-500">{column.columnName}</span>}
+                            {column.displayName && <span className="text-[10px] text-muted-foreground">{column.columnName}</span>}
                           </div>
                         </CommandItem>
                       );
@@ -335,7 +335,7 @@ export function AutocompleteSearchInputConfigPanel({
                       <Check className={cn("mr-2 h-4 w-4", localConfig.targetTable === table.tableName ? "opacity-100" : "opacity-0")} />
                       <div className="flex flex-col">
                         <span className="font-medium">{table.displayName || table.tableName}</span>
-                        {table.displayName && <span className="text-[10px] text-gray-500">{table.tableName}</span>}
+                        {table.displayName && <span className="text-[10px] text-muted-foreground">{table.tableName}</span>}
                       </div>
                     </CommandItem>
                   ))}
@@ -446,13 +446,13 @@ export function AutocompleteSearchInputConfigPanel({
               </div>
 
               {mapping.sourceField && mapping.targetField && (
-                <div className="rounded bg-blue-50 p-2 dark:bg-blue-950">
-                  <p className="text-[10px] text-blue-700 dark:text-blue-300">
-                    <code className="rounded bg-blue-100 px-1 font-mono dark:bg-blue-900">
+                <div className="rounded bg-primary/10 p-2 dark:bg-primary/15">
+                  <p className="text-[10px] text-primary dark:text-primary/80">
+                    <code className="rounded bg-primary/10 px-1 font-mono dark:bg-primary/20">
                       {localConfig.tableName}.{mapping.sourceField}
                     </code>
                     {" → "}
-                    <code className="rounded bg-blue-100 px-1 font-mono dark:bg-blue-900">
+                    <code className="rounded bg-primary/10 px-1 font-mono dark:bg-primary/20">
                       {localConfig.targetTable}.{mapping.targetField}
                     </code>
                   </p>
@@ -476,11 +476,11 @@ export function AutocompleteSearchInputConfigPanel({
 
       {/* 설정 요약 */}
       {localConfig.tableName && localConfig.targetTable && (localConfig.fieldMappings || []).length > 0 && (
-        <div className="rounded-lg border bg-green-50 p-4 dark:bg-green-950">
-          <h3 className="mb-2 text-sm font-semibold text-green-800 dark:text-green-200">
+        <div className="rounded-lg border bg-emerald-50 p-4 dark:bg-emerald-950">
+          <h3 className="mb-2 text-sm font-semibold text-emerald-800 dark:text-emerald-200">
             설정 요약
           </h3>
-          <div className="space-y-1 text-xs text-green-700 dark:text-green-300">
+          <div className="space-y-1 text-xs text-emerald-700 dark:text-emerald-300">
             <p>
               <strong>외부 테이블:</strong> {localConfig.tableName}
             </p>
diff --git a/frontend/lib/registry/components/button-primary/ButtonPrimaryComponent.tsx b/frontend/lib/registry/components/button-primary/ButtonPrimaryComponent.tsx
index dd820cc3..9ee73d33 100644
--- a/frontend/lib/registry/components/button-primary/ButtonPrimaryComponent.tsx
+++ b/frontend/lib/registry/components/button-primary/ButtonPrimaryComponent.tsx
@@ -28,7 +28,6 @@ import { useScreenContextOptional } from "@/contexts/ScreenContext";
 import { useSplitPanelContext, SplitPanelPosition } from "@/contexts/SplitPanelContext";
 import { applyMappingRules } from "@/lib/utils/dataMapping";
 import { apiClient } from "@/lib/api/client";
-
 export interface ButtonPrimaryComponentProps extends ComponentRendererProps {
   config?: ButtonPrimaryConfig;
   // 추가 props
@@ -614,27 +613,16 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
       // 실패한 경우 오류 처리
       if (!success) {
         // UI 전환 액션 및 모달 액션은 에러도 조용히 처리 (모달 내부에서 자체 에러 표시)
-        const silentErrorActions = ["edit", "modal", "navigate", "excel_upload", "barcode_scan"];
+        const silentErrorActions = ["edit", "modal", "navigate", "excel_upload", "barcode_scan", "save", "delete", "quickInsert"];
         if (silentErrorActions.includes(actionConfig.type)) {
           return;
         }
-        // 기본 에러 메시지 결정
         const defaultErrorMessage =
-          actionConfig.type === "save"
-            ? "저장 중 오류가 발생했습니다."
-            : actionConfig.type === "delete"
-              ? "삭제 중 오류가 발생했습니다."
-              : actionConfig.type === "submit"
-                ? "제출 중 오류가 발생했습니다."
-                : "처리 중 오류가 발생했습니다.";
+          actionConfig.type === "submit"
+            ? "제출 중 오류가 발생했습니다."
+            : "처리 중 오류가 발생했습니다.";
 
-        // 커스텀 메시지 사용 조건:
-        // 1. 커스텀 메시지가 있고
-        // 2. (액션 타입이 save이거나 OR 메시지에 "저장"이 포함되지 않은 경우)
-        const useCustomMessage =
-          actionConfig.errorMessage && (actionConfig.type === "save" || !actionConfig.errorMessage.includes("저장"));
-
-        const errorMessage = useCustomMessage ? actionConfig.errorMessage : defaultErrorMessage;
+        const errorMessage = actionConfig.errorMessage || defaultErrorMessage;
 
         toast.error(errorMessage);
         return;
@@ -1259,7 +1247,6 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
     }
   }
 
-  // 🆕 최종 비활성화 상태 (설정 + 조건부 비활성화 + 행 선택 필수)
   const finalDisabled =
     componentConfig.disabled || isOperationButtonDisabled || isRowSelectionDisabled || statusLoading;
 
diff --git a/frontend/lib/registry/components/card-display/CardDisplayComponent.tsx b/frontend/lib/registry/components/card-display/CardDisplayComponent.tsx
index 1ff0088f..fe8244c4 100644
--- a/frontend/lib/registry/components/card-display/CardDisplayComponent.tsx
+++ b/frontend/lib/registry/components/card-display/CardDisplayComponent.tsx
@@ -792,7 +792,7 @@ export const CardDisplayComponent: React.FC<CardDisplayComponentProps> = ({
       >
         <div className="text-muted-foreground text-center">
           <div className="text-lg mb-2">좌측에서 항목을 선택해주세요</div>
-          <div className="text-sm text-gray-400">선택한 항목의 관련 데이터가 여기에 표시됩니다</div>
+          <div className="text-sm text-muted-foreground/70">선택한 항목의 관련 데이터가 여기에 표시됩니다</div>
         </div>
       </div>
     );
@@ -1084,7 +1084,7 @@ export const CardDisplayComponent: React.FC<CardDisplayComponentProps> = ({
                         <img 
                           src={imageUrl} 
                           alt={titleValue || "이미지"}
-                          className="h-16 w-16 rounded-lg object-cover border border-gray-200"
+                          className="h-16 w-16 rounded-lg object-cover border border-border"
                           onError={(e) => {
                             // 이미지 로드 실패 시 기본 아이콘으로 대체
                             e.currentTarget.src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Crect width='64' height='64' fill='%23e0e7ff' rx='8'/%3E%3Ctext x='32' y='40' text-anchor='middle' fill='%236366f1' font-size='24'%3E👤%3C/text%3E%3C/svg%3E";
@@ -1144,7 +1144,7 @@ export const CardDisplayComponent: React.FC<CardDisplayComponentProps> = ({
                       <div className="mt-2 flex justify-end space-x-2">
                         {(componentConfig.cardStyle?.showViewButton ?? true) && (
                           <button 
-                            className="text-xs text-blue-600 hover:text-blue-800 transition-colors"
+                            className="text-xs text-primary hover:text-primary transition-colors"
                             onClick={(e) => {
                               e.stopPropagation();
                               handleCardView(data);
@@ -1166,7 +1166,7 @@ export const CardDisplayComponent: React.FC<CardDisplayComponentProps> = ({
                         )}
                         {(componentConfig.cardStyle?.showDeleteButton ?? false) && (
                           <button 
-                            className="text-xs text-red-500 hover:text-red-700 transition-colors"
+                            className="text-xs text-destructive hover:text-destructive transition-colors"
                             onClick={(e) => {
                               e.stopPropagation();
                               handleCardDelete(data, index);
diff --git a/frontend/lib/registry/components/card-display/CardDisplayConfigPanel.tsx b/frontend/lib/registry/components/card-display/CardDisplayConfigPanel.tsx
index b13a5946..bbd71caa 100644
--- a/frontend/lib/registry/components/card-display/CardDisplayConfigPanel.tsx
+++ b/frontend/lib/registry/components/card-display/CardDisplayConfigPanel.tsx
@@ -367,7 +367,7 @@ export const CardDisplayConfigPanel: React.FC<CardDisplayConfigPanelProps> = ({
           {/* 조인 테이블별 컬럼 */}
           {Object.entries(joinColumnsByTable).map(([tableName, columns]) => (
             <SelectGroup key={tableName}>
-              <SelectLabel className="text-xs font-semibold text-blue-600">
+              <SelectLabel className="text-xs font-semibold text-primary">
                 {tableName} (조인)
               </SelectLabel>
               {columns.map((col) => (
@@ -433,7 +433,7 @@ export const CardDisplayConfigPanel: React.FC<CardDisplayConfigPanelProps> = ({
                             : "opacity-0"
                         )}
                       />
-                      <Database className="mr-2 h-3.5 w-3.5 text-blue-500" />
+                      <Database className="mr-2 h-3.5 w-3.5 text-primary" />
                       {allTables.find(t => t.tableName === screenTableName)?.displayName || screenTableName}
                     </CommandItem>
                   </CommandGroup>
diff --git a/frontend/lib/registry/components/category-manager/CategoryManagerConfigPanel.tsx b/frontend/lib/registry/components/category-manager/CategoryManagerConfigPanel.tsx
index 9d36fa84..ac935213 100644
--- a/frontend/lib/registry/components/category-manager/CategoryManagerConfigPanel.tsx
+++ b/frontend/lib/registry/components/category-manager/CategoryManagerConfigPanel.tsx
@@ -72,7 +72,7 @@ export function CategoryManagerConfigPanel({
                 "계층 구조 지원 (부모-자식)",
               ].map((feature, index) => (
                 <div key={index} className="flex items-start gap-2">
-                  <CheckCircle2 className="h-4 w-4 mt-0.5 text-green-600 shrink-0" />
+                  <CheckCircle2 className="h-4 w-4 mt-0.5 text-emerald-600 shrink-0" />
                   <span className="text-sm">{feature}</span>
                 </div>
               ))}
@@ -80,11 +80,11 @@ export function CategoryManagerConfigPanel({
           </div>
 
           {/* 사용 방법 */}
-          <div className="rounded-lg border bg-blue-50 p-4 space-y-2">
-            <h4 className="text-sm font-medium text-blue-900">
+          <div className="rounded-lg border bg-primary/10 p-4 space-y-2">
+            <h4 className="text-sm font-medium text-primary">
               사용 방법
             </h4>
-            <ol className="space-y-1 ml-4 list-decimal text-sm text-blue-800">
+            <ol className="space-y-1 ml-4 list-decimal text-sm text-primary">
               <li>
                 테이블 타입 관리에서 컬럼의 입력 타입을{" "}
                 <Badge variant="outline" className="text-xs">
diff --git a/frontend/lib/registry/components/category-select/CategorySelectComponent.tsx b/frontend/lib/registry/components/category-select/CategorySelectComponent.tsx
index ba5d752d..ea83e6ca 100644
--- a/frontend/lib/registry/components/category-select/CategorySelectComponent.tsx
+++ b/frontend/lib/registry/components/category-select/CategorySelectComponent.tsx
@@ -12,6 +12,7 @@ import { Label } from "@/components/ui/label";
 import { getCategoryValues } from "@/lib/api/tableCategoryValue";
 import { TableCategoryValue } from "@/types/tableCategoryValue";
 import { Loader2 } from "lucide-react";
+import { getAdaptiveLabelColor } from "@/lib/utils/darkModeColor";
 
 interface CategorySelectComponentProps {
   component?: any;
@@ -137,13 +138,13 @@ export const CategorySelectComponent: React.FC<
           top: `-${estimatedLabelHeight}px`,
           left: 0,
           fontSize: style?.labelFontSize || "14px",
-          color: style?.labelColor || "#64748b",
+          color: getAdaptiveLabelColor(style?.labelColor),
           fontWeight: style?.labelFontWeight || "500",
         }}
         className="text-sm font-medium whitespace-nowrap"
       >
         {label}
-        {required && <span className="text-orange-500 ml-0.5">*</span>}
+        {required && <span className="text-amber-500 ml-0.5">*</span>}
       </Label>
     );
   };
diff --git a/frontend/lib/registry/components/checkbox-basic/CheckboxBasicComponent.tsx b/frontend/lib/registry/components/checkbox-basic/CheckboxBasicComponent.tsx
index 2f2c5622..eef19595 100644
--- a/frontend/lib/registry/components/checkbox-basic/CheckboxBasicComponent.tsx
+++ b/frontend/lib/registry/components/checkbox-basic/CheckboxBasicComponent.tsx
@@ -102,8 +102,8 @@ export const CheckboxBasicComponent: React.FC<CheckboxBasicComponentProps> = ({
             <div
               className={cn(
                 "h-6 w-11 rounded-full transition-colors",
-                isChecked ? "bg-blue-600" : "bg-gray-300",
-                "peer-focus:ring-2 peer-focus:ring-blue-200",
+                isChecked ? "bg-primary" : "bg-muted/60",
+                "peer-focus:ring-2 peer-focus:ring-primary/20",
               )}
             >
               <div
@@ -114,7 +114,7 @@ export const CheckboxBasicComponent: React.FC<CheckboxBasicComponentProps> = ({
               />
             </div>
           </div>
-          <span className="text-sm text-gray-900">{componentConfig.checkboxLabel || component.text || "스위치"}</span>
+          <span className="text-sm text-foreground">{componentConfig.checkboxLabel || component.text || "스위치"}</span>
         </label>
       );
     }
@@ -168,7 +168,7 @@ export const CheckboxBasicComponent: React.FC<CheckboxBasicComponentProps> = ({
       {component.label && (component.style?.labelDisplay ?? true) && (
         <label className="absolute -top-6 left-0 text-sm font-medium text-slate-600">
           {component.label}
-          {component.required && <span className="text-red-500">*</span>}
+          {component.required && <span className="text-destructive">*</span>}
         </label>
       )}
 
diff --git a/frontend/lib/registry/components/common/inputStyles.ts b/frontend/lib/registry/components/common/inputStyles.ts
index f92bec5d..83576ff3 100644
--- a/frontend/lib/registry/components/common/inputStyles.ts
+++ b/frontend/lib/registry/components/common/inputStyles.ts
@@ -71,14 +71,14 @@ export const INPUT_CLASSES = {
 
   // Currency 통화 기호
   currencySymbol: `
-    text-sm font-semibold text-green-600 pl-2
+    text-sm font-semibold text-emerald-600 pl-2
   `,
 
   // Currency input
   currencyInput: `
     flex-1 h-9 px-3 py-2 text-sm font-semibold text-right
     border border-input rounded-md
-    bg-background text-green-600
+    bg-background text-emerald-600
     transition-colors
     focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring
     disabled:cursor-not-allowed disabled:opacity-50
@@ -86,14 +86,14 @@ export const INPUT_CLASSES = {
 
   // Percentage 퍼센트 기호
   percentageSymbol: `
-    text-sm font-semibold text-blue-600 pr-2
+    text-sm font-semibold text-primary pr-2
   `,
 
   // Percentage input
   percentageInput: `
     flex-1 h-9 px-3 py-2 text-sm font-semibold text-right
     border border-input rounded-md
-    bg-background text-blue-600
+    bg-background text-primary
     transition-colors
     focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring
     disabled:cursor-not-allowed disabled:opacity-50
diff --git a/frontend/lib/registry/components/conditional-container/ConditionalContainerConfigPanel.tsx b/frontend/lib/registry/components/conditional-container/ConditionalContainerConfigPanel.tsx
index ff850346..e07bfc25 100644
--- a/frontend/lib/registry/components/conditional-container/ConditionalContainerConfigPanel.tsx
+++ b/frontend/lib/registry/components/conditional-container/ConditionalContainerConfigPanel.tsx
@@ -280,10 +280,10 @@ export function ConditionalContainerConfigPanel({
         </div>
 
         {/* 🆕 메뉴별 카테고리에서 섹션 자동 생성 */}
-        <div className="space-y-3 p-3 border rounded-lg bg-blue-50/50 dark:bg-blue-950/20">
+        <div className="space-y-3 p-3 border rounded-lg bg-primary/10/50 dark:bg-primary/10">
           <div className="flex items-center gap-2">
-            <Database className="h-4 w-4 text-blue-600" />
-            <Label className="text-xs font-semibold text-blue-700 dark:text-blue-400">
+            <Database className="h-4 w-4 text-primary" />
+            <Label className="text-xs font-semibold text-primary dark:text-primary/80">
               메뉴 카테고리에서 자동 생성
             </Label>
           </div>
@@ -448,7 +448,7 @@ export function ConditionalContainerConfigPanel({
                   {categoryValues.map((option) => (
                     <span
                       key={option.value}
-                      className="px-2 py-0.5 text-[10px] bg-blue-100 text-blue-800 rounded dark:bg-blue-900 dark:text-blue-200"
+                      className="px-2 py-0.5 text-[10px] bg-primary/10 text-primary rounded dark:bg-primary/20 dark:text-primary/70"
                     >
                       {option.label}
                     </span>
diff --git a/frontend/lib/registry/components/date-input/DateInputComponent.tsx b/frontend/lib/registry/components/date-input/DateInputComponent.tsx
index 2fd1caff..93efccf0 100644
--- a/frontend/lib/registry/components/date-input/DateInputComponent.tsx
+++ b/frontend/lib/registry/components/date-input/DateInputComponent.tsx
@@ -402,7 +402,7 @@ export const DateInputComponent: React.FC<DateInputComponentProps> = ({
       {component.label && component.style?.labelDisplay !== false && (
         <label className="absolute -top-6 left-0 text-sm font-medium text-slate-600">
           {component.label}
-          {component.required && <span className="text-red-500">*</span>}
+          {component.required && <span className="text-destructive">*</span>}
         </label>
       )}
 
diff --git a/frontend/lib/registry/components/date-input/DateInputConfigPanel.tsx b/frontend/lib/registry/components/date-input/DateInputConfigPanel.tsx
index 55ab4253..c39da8ec 100644
--- a/frontend/lib/registry/components/date-input/DateInputConfigPanel.tsx
+++ b/frontend/lib/registry/components/date-input/DateInputConfigPanel.tsx
@@ -74,7 +74,7 @@ export const DateInputConfigPanel: React.FC<DateInputConfigPanelProps> = ({ conf
           checked={config.hidden || false}
           onCheckedChange={(checked) => handleChange("hidden", checked)}
         />
-        <p className="text-xs text-gray-500">편집기에서는 연하게 보이지만 실제 화면에서는 숨겨집니다</p>
+        <p className="text-xs text-muted-foreground">편집기에서는 연하게 보이지만 실제 화면에서는 숨겨집니다</p>
       </div>
 
       {/* 자동생성 기능 */}
@@ -124,7 +124,7 @@ export const DateInputConfigPanel: React.FC<DateInputConfigPanelProps> = ({ conf
                   <SelectItem value="department">부서 코드</SelectItem>
                 </SelectContent>
               </Select>
-              <p className="text-xs text-gray-500">
+              <p className="text-xs text-muted-foreground">
                 {AutoGenerationUtils.getTypeDescription(config.autoGeneration?.type || "current_time")}
               </p>
             </div>
@@ -247,7 +247,7 @@ export const DateInputConfigPanel: React.FC<DateInputConfigPanelProps> = ({ conf
               </>
             )}
 
-            <div className="rounded bg-gray-50 p-2 text-xs">
+            <div className="rounded bg-muted p-2 text-xs">
               <strong>미리보기:</strong> {AutoGenerationUtils.generatePreviewValue(config.autoGeneration)}
             </div>
           </>
diff --git a/frontend/lib/registry/components/divider-line/DividerLineComponent.tsx b/frontend/lib/registry/components/divider-line/DividerLineComponent.tsx
index ea4428ca..a94e0daf 100644
--- a/frontend/lib/registry/components/divider-line/DividerLineComponent.tsx
+++ b/frontend/lib/registry/components/divider-line/DividerLineComponent.tsx
@@ -3,6 +3,7 @@
 import React from "react";
 import { ComponentRendererProps } from "@/types/component";
 import { DividerLineConfig } from "./types";
+import { getAdaptiveLabelColor } from "@/lib/utils/darkModeColor";
 
 export interface DividerLineComponentProps extends ComponentRendererProps {
   config?: DividerLineConfig;
@@ -119,7 +120,7 @@ export const DividerLineComponent: React.FC<DividerLineComponentProps> = ({
             top: "-25px",
             left: "0px",
             fontSize: component.style?.labelFontSize || "14px",
-            color: component.style?.labelColor || "#64748b",
+            color: getAdaptiveLabelColor(component.style?.labelColor),
             fontWeight: "500",
           }}
         >
diff --git a/frontend/lib/registry/components/entity-search-input/EntitySearchInputComponent.tsx b/frontend/lib/registry/components/entity-search-input/EntitySearchInputComponent.tsx
index f1604337..a267e854 100644
--- a/frontend/lib/registry/components/entity-search-input/EntitySearchInputComponent.tsx
+++ b/frontend/lib/registry/components/entity-search-input/EntitySearchInputComponent.tsx
@@ -415,7 +415,7 @@ export function EntitySearchInputComponent({
             className={cn(
               "box-border flex min-h-[40px] w-full flex-wrap items-center gap-2 rounded-md border bg-white px-3 py-2",
               !disabled && "hover:border-primary/50",
-              disabled && "cursor-not-allowed bg-gray-100 opacity-60",
+              disabled && "cursor-not-allowed bg-muted opacity-60",
             )}
             onClick={() => !disabled && !isLoading && setSelectOpen(true)}
             style={{ cursor: disabled ? "not-allowed" : "pointer" }}
@@ -427,7 +427,7 @@ export function EntitySearchInputComponent({
                 return (
                   <span
                     key={val}
-                    className="flex items-center gap-1 rounded bg-blue-100 px-2 py-1 text-sm text-blue-800"
+                    className="flex items-center gap-1 rounded bg-primary/10 px-2 py-1 text-sm text-primary"
                   >
                     {label}
                     {!disabled && (
@@ -437,7 +437,7 @@ export function EntitySearchInputComponent({
                           e.stopPropagation();
                           handleRemoveValue(val);
                         }}
-                        className="ml-1 text-blue-600 hover:text-blue-800"
+                        className="ml-1 text-primary hover:text-primary"
                       >
                         ×
                       </button>
@@ -598,7 +598,7 @@ export function EntitySearchInputComponent({
             className={cn(
               "box-border flex min-h-[40px] flex-1 flex-wrap items-center gap-2 rounded-md border bg-white px-3 py-2",
               !disabled && "hover:border-primary/50",
-              disabled && "cursor-not-allowed bg-gray-100 opacity-60",
+              disabled && "cursor-not-allowed bg-muted opacity-60",
             )}
           >
             {selectedValues.length > 0 ? (
@@ -610,7 +610,7 @@ export function EntitySearchInputComponent({
                 return (
                   <span
                     key={val}
-                    className="flex items-center gap-1 rounded bg-blue-100 px-2 py-1 text-sm text-blue-800"
+                    className="flex items-center gap-1 rounded bg-primary/10 px-2 py-1 text-sm text-primary"
                   >
                     {label}
                     {!disabled && (
@@ -620,7 +620,7 @@ export function EntitySearchInputComponent({
                           e.stopPropagation();
                           handleRemoveValue(val);
                         }}
-                        className="ml-1 text-blue-600 hover:text-blue-800"
+                        className="ml-1 text-primary hover:text-primary"
                       >
                         ×
                       </button>
diff --git a/frontend/lib/registry/components/entity-search-input/EntitySearchInputConfigPanel.tsx b/frontend/lib/registry/components/entity-search-input/EntitySearchInputConfigPanel.tsx
index 22a52aab..6f58f10b 100644
--- a/frontend/lib/registry/components/entity-search-input/EntitySearchInputConfigPanel.tsx
+++ b/frontend/lib/registry/components/entity-search-input/EntitySearchInputConfigPanel.tsx
@@ -458,7 +458,7 @@ export function EntitySearchInputConfigPanel({
               <div className="bg-background space-y-1 rounded-md p-2 text-xs">
                 {localConfig.cascadingRole === "parent" ? (
                   <>
-                    <div className="font-medium text-blue-600">부모 역할 (상위 선택)</div>
+                    <div className="font-medium text-primary">부모 역할 (상위 선택)</div>
                     <div>
                       <span className="text-muted-foreground">데이터 소스:</span>{" "}
                       <span className="font-medium">{selectedRelation.parent_table}</span>
@@ -470,7 +470,7 @@ export function EntitySearchInputConfigPanel({
                   </>
                 ) : (
                   <>
-                    <div className="font-medium text-green-600">자식 역할 (하위 선택)</div>
+                    <div className="font-medium text-emerald-600">자식 역할 (하위 선택)</div>
                     <div>
                       <span className="text-muted-foreground">데이터 소스:</span>{" "}
                       <span className="font-medium">{selectedRelation.child_table}</span>
@@ -602,7 +602,7 @@ export function EntitySearchInputConfigPanel({
                       <div className="flex flex-col">
                         <span className="font-medium">{table.displayName || table.tableName}</span>
                         {table.displayName && table.displayName !== table.tableName && (
-                          <span className="text-[10px] text-gray-500">{table.tableName}</span>
+                          <span className="text-[10px] text-muted-foreground">{table.tableName}</span>
                         )}
                       </div>
                     </CommandItem>
@@ -656,7 +656,7 @@ export function EntitySearchInputConfigPanel({
                       <div className="flex flex-col">
                         <span className="font-medium">{column.displayName || column.columnName}</span>
                         {column.displayName && column.displayName !== column.columnName && (
-                          <span className="text-[10px] text-gray-500">{column.columnName}</span>
+                          <span className="text-[10px] text-muted-foreground">{column.columnName}</span>
                         )}
                       </div>
                     </CommandItem>
@@ -710,7 +710,7 @@ export function EntitySearchInputConfigPanel({
                       <div className="flex flex-col">
                         <span className="font-medium">{column.displayName || column.columnName}</span>
                         {column.displayName && column.displayName !== column.columnName && (
-                          <span className="text-[10px] text-gray-500">{column.columnName}</span>
+                          <span className="text-[10px] text-muted-foreground">{column.columnName}</span>
                         )}
                       </div>
                     </CommandItem>
diff --git a/frontend/lib/registry/components/entity-search-input/EntitySearchModal.tsx b/frontend/lib/registry/components/entity-search-input/EntitySearchModal.tsx
index 422dfbfa..3b4bfc52 100644
--- a/frontend/lib/registry/components/entity-search-input/EntitySearchModal.tsx
+++ b/frontend/lib/registry/components/entity-search-input/EntitySearchModal.tsx
@@ -187,7 +187,7 @@ export function EntitySearchModal({
                         key={uniqueKey}
                         className={cn(
                           "border-t cursor-pointer transition-colors",
-                          isSelected ? "bg-blue-50 hover:bg-blue-100" : "hover:bg-accent"
+                          isSelected ? "bg-primary/10 hover:bg-primary/10" : "hover:bg-accent"
                         )}
                         onClick={() => handleSelect(item)}
                       >
diff --git a/frontend/lib/registry/components/file-upload/FileManagerModal.tsx b/frontend/lib/registry/components/file-upload/FileManagerModal.tsx
index 469aa1f0..1c3cb713 100644
--- a/frontend/lib/registry/components/file-upload/FileManagerModal.tsx
+++ b/frontend/lib/registry/components/file-upload/FileManagerModal.tsx
@@ -61,21 +61,21 @@ export const FileManagerModal: React.FC<FileManagerModalProps> = ({
     const ext = fileExt.toLowerCase();
     
     if (['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg'].includes(ext)) {
-      return <ImageIcon className="w-5 h-5 text-blue-500" />;
+      return <ImageIcon className="w-5 h-5 text-primary" />;
     } else if (['pdf', 'doc', 'docx', 'txt', 'rtf'].includes(ext)) {
-      return <FileText className="w-5 h-5 text-red-500" />;
+      return <FileText className="w-5 h-5 text-destructive" />;
     } else if (['xls', 'xlsx', 'csv'].includes(ext)) {
-      return <FileText className="w-5 h-5 text-green-500" />;
+      return <FileText className="w-5 h-5 text-emerald-500" />;
     } else if (['ppt', 'pptx'].includes(ext)) {
-      return <Presentation className="w-5 h-5 text-orange-500" />;
+      return <Presentation className="w-5 h-5 text-amber-500" />;
     } else if (['mp4', 'avi', 'mov', 'webm'].includes(ext)) {
       return <Video className="w-5 h-5 text-purple-500" />;
     } else if (['mp3', 'wav', 'ogg'].includes(ext)) {
       return <Music className="w-5 h-5 text-pink-500" />;
     } else if (['zip', 'rar', '7z'].includes(ext)) {
-      return <Archive className="w-5 h-5 text-yellow-500" />;
+      return <Archive className="w-5 h-5 text-amber-500" />;
     } else {
-      return <File className="w-5 h-5 text-gray-500" />;
+      return <File className="w-5 h-5 text-muted-foreground" />;
     }
   };
 
@@ -193,7 +193,7 @@ export const FileManagerModal: React.FC<FileManagerModalProps> = ({
             <Button
               variant="ghost"
               size="sm"
-              className="h-8 w-8 p-0 hover:bg-gray-100"
+              className="h-8 w-8 p-0 hover:bg-muted"
               onClick={onClose}
               title="닫기"
             >
@@ -207,8 +207,8 @@ export const FileManagerModal: React.FC<FileManagerModalProps> = ({
               <div
                 className={`
                   border-2 border-dashed rounded-lg p-4 text-center cursor-pointer transition-colors
-                  ${dragOver ? 'border-blue-400 bg-blue-50' : 'border-gray-300'}
-                  ${config.disabled ? 'opacity-50 cursor-not-allowed' : 'hover:border-gray-400'}
+                  ${dragOver ? 'border-primary/60 bg-primary/10' : 'border-input'}
+                  ${config.disabled ? 'opacity-50 cursor-not-allowed' : 'hover:border-input'}
                   ${uploading ? 'opacity-75' : ''}
                 `}
                 onClick={() => {
@@ -232,13 +232,13 @@ export const FileManagerModal: React.FC<FileManagerModalProps> = ({
                 
                 {uploading ? (
                   <div className="flex items-center justify-center gap-2">
-                    <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-blue-600"></div>
-                    <span className="text-sm text-blue-600 font-medium">업로드 중...</span>
+                    <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-primary"></div>
+                    <span className="text-sm text-primary font-medium">업로드 중...</span>
                   </div>
                 ) : (
                   <div className="flex items-center justify-center gap-3">
-                    <Upload className="h-6 w-6 text-gray-400" />
-                    <p className="text-sm font-medium text-gray-700">
+                    <Upload className="h-6 w-6 text-muted-foreground/70" />
+                    <p className="text-sm font-medium text-foreground">
                       파일을 드래그하거나 클릭하여 업로드하세요
                     </p>
                   </div>
@@ -249,7 +249,7 @@ export const FileManagerModal: React.FC<FileManagerModalProps> = ({
             {/* 좌우 분할 레이아웃 */}
             <div className="flex-1 flex gap-4 min-h-0">
               {/* 좌측: 이미지 미리보기 */}
-              <div className="w-1/2 border border-gray-200 rounded-lg bg-gray-50 flex items-center justify-center overflow-hidden">
+              <div className="w-1/2 border border-border rounded-lg bg-muted flex items-center justify-center overflow-hidden">
                 {selectedFile && previewImageUrl ? (
                   <img 
                     src={previewImageUrl} 
@@ -257,12 +257,12 @@ export const FileManagerModal: React.FC<FileManagerModalProps> = ({
                     className="max-w-full max-h-full object-contain"
                   />
                 ) : selectedFile ? (
-                  <div className="flex flex-col items-center text-gray-400">
+                  <div className="flex flex-col items-center text-muted-foreground/70">
                     {getFileIcon(selectedFile.fileExt)}
                     <p className="mt-2 text-sm">미리보기 불가능</p>
                   </div>
                 ) : (
-                  <div className="flex flex-col items-center text-gray-400">
+                  <div className="flex flex-col items-center text-muted-foreground/70">
                     <ImageIcon className="w-16 h-16 mb-2" />
                     <p className="text-sm">파일을 선택하면 미리보기가 표시됩니다</p>
                   </div>
@@ -270,10 +270,10 @@ export const FileManagerModal: React.FC<FileManagerModalProps> = ({
               </div>
 
               {/* 우측: 파일 목록 */}
-              <div className="w-1/2 border border-gray-200 rounded-lg overflow-hidden flex flex-col">
-                <div className="p-3 border-b border-gray-200 bg-gray-50">
+              <div className="w-1/2 border border-border rounded-lg overflow-hidden flex flex-col">
+                <div className="p-3 border-b border-border bg-muted">
                   <div className="flex items-center justify-between">
-                    <h3 className="text-sm font-medium text-gray-700">
+                    <h3 className="text-sm font-medium text-foreground">
                       업로드된 파일
                     </h3>
                     {uploadedFiles.length > 0 && (
@@ -292,7 +292,7 @@ export const FileManagerModal: React.FC<FileManagerModalProps> = ({
                           key={file.objid}
                           className={`
                             flex items-center space-x-3 p-2 rounded-lg transition-colors cursor-pointer
-                            ${selectedFile?.objid === file.objid ? 'bg-blue-50 border border-blue-200' : 'bg-gray-50 hover:bg-gray-100'}
+                            ${selectedFile?.objid === file.objid ? 'bg-primary/10 border border-primary/20' : 'bg-muted hover:bg-muted'}
                           `}
                           onClick={() => handleFileClick(file)}
                         >
@@ -301,7 +301,7 @@ export const FileManagerModal: React.FC<FileManagerModalProps> = ({
                         </div>
                         <div className="flex-1 min-w-0">
                           <div className="flex items-center gap-2">
-                            <span className="text-sm font-medium text-gray-900 truncate">
+                            <span className="text-sm font-medium text-foreground truncate">
                               {file.realFileName}
                             </span>
                             {file.isRepresentative && (
@@ -310,7 +310,7 @@ export const FileManagerModal: React.FC<FileManagerModalProps> = ({
                               </Badge>
                             )}
                           </div>
-                          <p className="text-xs text-gray-500">
+                          <p className="text-xs text-muted-foreground">
                             {formatFileSize(file.fileSize)} • {file.fileExt.toUpperCase()}
                           </p>
                         </div>
@@ -357,7 +357,7 @@ export const FileManagerModal: React.FC<FileManagerModalProps> = ({
                             <Button
                               variant="ghost"
                               size="sm"
-                              className="h-7 w-7 p-0 text-red-500 hover:text-red-700"
+                              className="h-7 w-7 p-0 text-destructive hover:text-destructive"
                               onClick={(e) => {
                                 e.stopPropagation();
                                 onFileDelete(file);
@@ -372,10 +372,10 @@ export const FileManagerModal: React.FC<FileManagerModalProps> = ({
                     ))}
                   </div>
                 ) : (
-                  <div className="flex flex-col items-center justify-center py-8 text-gray-500">
-                    <File className="w-12 h-12 mb-3 text-gray-300" />
-                    <p className="text-sm font-medium text-gray-600">업로드된 파일이 없습니다</p>
-                    <p className="text-xs text-gray-500 mt-1">
+                  <div className="flex flex-col items-center justify-center py-8 text-muted-foreground">
+                    <File className="w-12 h-12 mb-3 text-muted-foreground/50" />
+                    <p className="text-sm font-medium text-muted-foreground">업로드된 파일이 없습니다</p>
+                    <p className="text-xs text-muted-foreground mt-1">
                       {isDesignMode ? '디자인 모드에서는 파일을 업로드할 수 없습니다' : '위의 영역에 파일을 업로드하세요'}
                     </p>
                   </div>
diff --git a/frontend/lib/registry/components/file-upload/FileUploadComponent.tsx b/frontend/lib/registry/components/file-upload/FileUploadComponent.tsx
index b2c385a3..11432e4a 100644
--- a/frontend/lib/registry/components/file-upload/FileUploadComponent.tsx
+++ b/frontend/lib/registry/components/file-upload/FileUploadComponent.tsx
@@ -35,31 +35,31 @@ const getFileIcon = (extension: string) => {
   const ext = extension.toLowerCase().replace(".", "");
 
   if (["jpg", "jpeg", "png", "gif", "bmp", "webp", "svg"].includes(ext)) {
-    return <FileImage className="h-6 w-6 text-blue-500" />;
+    return <FileImage className="h-6 w-6 text-primary" />;
   }
   if (["mp4", "avi", "mov", "wmv", "flv", "webm"].includes(ext)) {
     return <FileVideo className="h-6 w-6 text-purple-500" />;
   }
   if (["mp3", "wav", "flac", "aac", "ogg"].includes(ext)) {
-    return <FileAudio className="h-6 w-6 text-green-500" />;
+    return <FileAudio className="h-6 w-6 text-emerald-500" />;
   }
   if (["pdf"].includes(ext)) {
-    return <FileText className="h-6 w-6 text-red-500" />;
+    return <FileText className="h-6 w-6 text-destructive" />;
   }
   if (["doc", "docx", "hwp", "hwpx", "pages"].includes(ext)) {
-    return <FileText className="h-6 w-6 text-blue-600" />;
+    return <FileText className="h-6 w-6 text-primary" />;
   }
   if (["xls", "xlsx", "hcell", "numbers"].includes(ext)) {
-    return <FileText className="h-6 w-6 text-green-600" />;
+    return <FileText className="h-6 w-6 text-emerald-600" />;
   }
   if (["ppt", "pptx", "hanshow", "keynote"].includes(ext)) {
-    return <Presentation className="h-6 w-6 text-orange-500" />;
+    return <Presentation className="h-6 w-6 text-amber-500" />;
   }
   if (["zip", "rar", "7z", "tar", "gz"].includes(ext)) {
-    return <Archive className="h-6 w-6 text-gray-500" />;
+    return <Archive className="h-6 w-6 text-muted-foreground" />;
   }
 
-  return <File className="h-6 w-6 text-gray-400" />;
+  return <File className="h-6 w-6 text-muted-foreground/70" />;
 };
 
 export interface FileUploadComponentProps {
diff --git a/frontend/lib/registry/components/file-upload/FileViewerModal.tsx b/frontend/lib/registry/components/file-upload/FileViewerModal.tsx
index 36e37044..0695b730 100644
--- a/frontend/lib/registry/components/file-upload/FileViewerModal.tsx
+++ b/frontend/lib/registry/components/file-upload/FileViewerModal.tsx
@@ -318,7 +318,7 @@ export const FileViewerModal: React.FC<FileViewerModalProps> = ({ file, isOpen,
     if (isLoading) {
       return (
         <div className="flex h-96 items-center justify-center">
-          <div className="h-12 w-12 animate-spin rounded-full border-b-2 border-blue-600"></div>
+          <div className="h-12 w-12 animate-spin rounded-full border-b-2 border-primary"></div>
         </div>
       );
     }
@@ -326,7 +326,7 @@ export const FileViewerModal: React.FC<FileViewerModalProps> = ({ file, isOpen,
     if (previewError) {
       return (
         <div className="flex h-96 flex-col items-center justify-center">
-          <AlertTriangle className="mb-4 h-16 w-16 text-yellow-500" />
+          <AlertTriangle className="mb-4 h-16 w-16 text-amber-500" />
           <p className="mb-2 text-lg font-medium">미리보기 불가</p>
           <p className="text-center text-sm">{previewError}</p>
           <Button variant="outline" onClick={() => onDownload?.(file)} className="mt-4">
@@ -375,7 +375,7 @@ export const FileViewerModal: React.FC<FileViewerModalProps> = ({ file, isOpen,
     // PDF 파일 - 브라우저 기본 뷰어 사용
     if (fileExt === "pdf") {
       return (
-        <div className="h-[600px] overflow-auto rounded-lg border bg-gray-50">
+        <div className="h-[600px] overflow-auto rounded-lg border bg-muted">
           <object
             data={previewUrl || ""}
             type="application/pdf"
@@ -384,9 +384,9 @@ export const FileViewerModal: React.FC<FileViewerModalProps> = ({ file, isOpen,
           >
             <iframe src={previewUrl || ""} className="h-full w-full rounded-lg" title="PDF Viewer Fallback">
               <div className="flex h-full flex-col items-center justify-center p-8">
-                <FileText className="mb-4 h-16 w-16 text-gray-400" />
+                <FileText className="mb-4 h-16 w-16 text-muted-foreground/70" />
                 <p className="mb-2 text-lg font-medium">PDF를 표시할 수 없습니다</p>
-                <p className="mb-4 text-center text-sm text-gray-600">
+                <p className="mb-4 text-center text-sm text-muted-foreground">
                   브라우저가 PDF 표시를 지원하지 않습니다. 다운로드하여 확인해주세요.
                 </p>
                 <Button variant="outline" onClick={() => onDownload?.(file)}>
@@ -421,10 +421,10 @@ export const FileViewerModal: React.FC<FileViewerModalProps> = ({ file, isOpen,
     ) {
       // Office 문서 안내 메시지 표시
       return (
-        <div className="relative flex h-96 flex-col items-center justify-center overflow-auto rounded-lg border bg-gradient-to-br from-blue-50 to-indigo-50 p-8">
-          <FileText className="mb-6 h-20 w-20 text-blue-500" />
-          <h3 className="mb-2 text-xl font-semibold text-gray-800">Office 문서</h3>
-          <p className="mb-6 max-w-md text-center text-sm text-gray-600">
+        <div className="relative flex h-96 flex-col items-center justify-center overflow-auto rounded-lg border bg-gradient-to-br from-primary/5 to-indigo-50 p-8">
+          <FileText className="mb-6 h-20 w-20 text-primary" />
+          <h3 className="mb-2 text-xl font-semibold text-foreground">Office 문서</h3>
+          <p className="mb-6 max-w-md text-center text-sm text-muted-foreground">
             {fileExt === "docx" || fileExt === "doc"
               ? "Word 문서"
               : fileExt === "xlsx" || fileExt === "xls"
@@ -461,8 +461,8 @@ export const FileViewerModal: React.FC<FileViewerModalProps> = ({ file, isOpen,
     if (["mp3", "wav", "ogg"].includes(fileExt)) {
       return (
         <div className="flex h-96 flex-col items-center justify-center">
-          <div className="mb-6 flex h-32 w-32 items-center justify-center rounded-full bg-gray-100">
-            <svg className="h-16 w-16 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
+          <div className="mb-6 flex h-32 w-32 items-center justify-center rounded-full bg-muted">
+            <svg className="h-16 w-16 text-muted-foreground/70" fill="currentColor" viewBox="0 0 20 20">
               <path
                 fillRule="evenodd"
                 d="M9.383 3.076A1 1 0 0110 4v12a1 1 0 01-1.707.707L4.586 13H2a1 1 0 01-1-1V8a1 1 0 011-1h2.586l3.707-3.707a1 1 0 011.09-.217zM15.657 6.343a1 1 0 011.414 0A9.972 9.972 0 0119 12a9.972 9.972 0 01-1.929 5.657 1 1 0 11-1.414-1.414A7.971 7.971 0 0017 12c0-1.594-.471-3.078-1.343-4.343a1 1 0 010-1.414zm-2.829 2.828a1 1 0 011.415 0A5.983 5.983 0 0115 12a5.984 5.984 0 01-.757 2.829 1 1 0 01-1.415-1.414A3.987 3.987 0 0013 12a3.988 3.988 0 00-.172-1.171 1 1 0 010-1.414z"
@@ -480,7 +480,7 @@ export const FileViewerModal: React.FC<FileViewerModalProps> = ({ file, isOpen,
     // 기타 파일 타입
     return (
       <div className="flex h-96 flex-col items-center justify-center">
-        <FileText className="mb-4 h-16 w-16 text-gray-400" />
+        <FileText className="mb-4 h-16 w-16 text-muted-foreground/70" />
         <p className="mb-2 text-lg font-medium">미리보기 불가</p>
         <p className="mb-4 text-center text-sm">{file.fileExt.toUpperCase()} 파일은 미리보기를 지원하지 않습니다.</p>
         <Button variant="outline" onClick={() => onDownload?.(file)}>
@@ -511,7 +511,7 @@ export const FileViewerModal: React.FC<FileViewerModalProps> = ({ file, isOpen,
         <div className="flex-1 overflow-hidden">{renderPreview()}</div>
 
         {/* 파일 정보 및 액션 버튼 */}
-        <div className="mt-2 flex items-center space-x-4 text-sm text-gray-500">
+        <div className="mt-2 flex items-center space-x-4 text-sm text-muted-foreground">
           <span>크기: {formatFileSize(file.fileSize || file.size || 0)}</span>
           {(file.uploadedAt || file.regdate) && (
             <span>업로드: {new Date(file.uploadedAt || file.regdate || "").toLocaleString()}</span>
@@ -527,7 +527,7 @@ export const FileViewerModal: React.FC<FileViewerModalProps> = ({ file, isOpen,
             <Button
               variant="outline"
               size="sm"
-              className="text-red-600 hover:bg-red-50 hover:text-red-700"
+              className="text-destructive hover:bg-destructive/10 hover:text-destructive"
               onClick={() => onDelete(file)}
             >
               <Trash2 className="mr-2 h-4 w-4" />
diff --git a/frontend/lib/registry/components/image-display/ImageDisplayComponent.tsx b/frontend/lib/registry/components/image-display/ImageDisplayComponent.tsx
index 2f35c799..1f565456 100644
--- a/frontend/lib/registry/components/image-display/ImageDisplayComponent.tsx
+++ b/frontend/lib/registry/components/image-display/ImageDisplayComponent.tsx
@@ -3,6 +3,7 @@
 import React from "react";
 import { ComponentRendererProps } from "@/types/component";
 import { ImageDisplayConfig } from "./types";
+import { getAdaptiveLabelColor } from "@/lib/utils/darkModeColor";
 
 export interface ImageDisplayComponentProps extends ComponentRendererProps {
   config?: ImageDisplayConfig;
@@ -87,7 +88,7 @@ export const ImageDisplayComponent: React.FC<ImageDisplayComponentProps> = ({
             top: "-25px",
             left: "0px",
             fontSize: component.style?.labelFontSize || "14px",
-            color: component.style?.labelColor || "#64748b",
+            color: getAdaptiveLabelColor(component.style?.labelColor),
             fontWeight: "500",
           }}
         >
diff --git a/frontend/lib/registry/components/index.ts b/frontend/lib/registry/components/index.ts
index 174235ed..46e92af1 100644
--- a/frontend/lib/registry/components/index.ts
+++ b/frontend/lib/registry/components/index.ts
@@ -112,13 +112,13 @@ import "./v2-input/V2InputRenderer"; // V2 통합 입력 컴포넌트
 import "./v2-select/V2SelectRenderer"; // V2 통합 선택 컴포넌트
 import "./v2-date/V2DateRenderer"; // V2 통합 날짜 컴포넌트
 import "./v2-file-upload/V2FileUploadRenderer"; // V2 파일 업로드 컴포넌트
-import "./v2-process-work-standard/ProcessWorkStandardRenderer"; // 공정 작업기준
-import "./v2-item-routing/ItemRoutingRenderer"; // 품목별 라우팅
 import "./v2-split-line/SplitLineRenderer"; // V2 캔버스 분할선
 import "./v2-bom-tree/BomTreeRenderer"; // BOM 트리 뷰
 import "./v2-bom-item-editor/BomItemEditorRenderer"; // BOM 하위품목 편집기
 import "./v2-approval-step/ApprovalStepRenderer"; // 결재 단계 시각화
 import "./v2-status-count/StatusCountRenderer"; // 상태별 카운트 카드
+import "./v2-process-work-standard/ProcessWorkStandardRenderer"; // 공정 작업기준
+import "./v2-item-routing/ItemRoutingRenderer"; // 품목별 라우팅
 
 /**
  * 컴포넌트 초기화 함수
diff --git a/frontend/lib/registry/components/location-swap-selector/LocationSwapSelectorConfigPanel.tsx b/frontend/lib/registry/components/location-swap-selector/LocationSwapSelectorConfigPanel.tsx
index cd84806f..89aea32f 100644
--- a/frontend/lib/registry/components/location-swap-selector/LocationSwapSelectorConfigPanel.tsx
+++ b/frontend/lib/registry/components/location-swap-selector/LocationSwapSelectorConfigPanel.tsx
@@ -523,8 +523,8 @@ export function LocationSwapSelectorConfigPanel({
       </div>
 
       {/* 안내 */}
-      <div className="rounded-md bg-blue-50 p-3 dark:bg-blue-950">
-        <p className="text-xs text-blue-900 dark:text-blue-100">
+      <div className="rounded-md bg-primary/10 p-3 dark:bg-primary/15">
+        <p className="text-xs text-primary dark:text-primary/60">
           <strong>사용 방법:</strong>
           <br />
           1. 데이터 소스에서 장소 목록을 가져올 위치를 선택합니다
diff --git a/frontend/lib/registry/components/mail-recipient-selector/MailRecipientSelectorComponent.tsx b/frontend/lib/registry/components/mail-recipient-selector/MailRecipientSelectorComponent.tsx
index 57102413..505d6f4d 100644
--- a/frontend/lib/registry/components/mail-recipient-selector/MailRecipientSelectorComponent.tsx
+++ b/frontend/lib/registry/components/mail-recipient-selector/MailRecipientSelectorComponent.tsx
@@ -337,12 +337,12 @@ export const MailRecipientSelectorComponent: React.FC<
                       <div className="flex flex-1 items-center justify-between">
                         <div className="flex flex-col">
                           <span className="font-medium">{user.userName}</span>
-                          <span className="text-xs text-gray-500">
+                          <span className="text-xs text-muted-foreground">
                             {userEmail}
                             {user.deptName && ` | ${user.deptName}`}
                           </span>
                         </div>
-                        {selected && <Check className="h-4 w-4 text-green-500" />}
+                        {selected && <Check className="h-4 w-4 text-emerald-500" />}
                       </div>
                     </CommandItem>
                   );
@@ -394,13 +394,13 @@ export const MailRecipientSelectorComponent: React.FC<
   if (isDesignMode || isPreviewMode) {
     return (
       <div className={cn("space-y-3 rounded-md border p-3 bg-white", className)} style={style}>
-        <div className="text-sm font-medium text-gray-500">메일 수신자 선택</div>
+        <div className="text-sm font-medium text-muted-foreground">메일 수신자 선택</div>
         <div className="space-y-2">
-          <div className="flex items-center gap-2 text-sm text-gray-400">
+          <div className="flex items-center gap-2 text-sm text-muted-foreground/70">
             <Users className="h-4 w-4" />
             <span>내부 인원 선택</span>
           </div>
-          <div className="flex items-center gap-2 text-sm text-gray-400">
+          <div className="flex items-center gap-2 text-sm text-muted-foreground/70">
             <Mail className="h-4 w-4" />
             <span>외부 이메일 입력</span>
           </div>
@@ -415,12 +415,12 @@ export const MailRecipientSelectorComponent: React.FC<
       <div className="space-y-2">
         <Label className="text-sm font-medium">
           {toLabel}
-          {required && <span className="ml-1 text-red-500">*</span>}
+          {required && <span className="ml-1 text-destructive">*</span>}
         </Label>
         
         {/* 선택된 수신자 태그 */}
         {toRecipients.length > 0 && (
-          <div className="rounded-md border bg-gray-50 p-2">
+          <div className="rounded-md border bg-muted p-2">
             {renderRecipientTags(toRecipients, "to")}
           </div>
         )}
@@ -439,7 +439,7 @@ export const MailRecipientSelectorComponent: React.FC<
           
           {/* 선택된 참조 수신자 태그 */}
           {ccRecipients.length > 0 && (
-            <div className="rounded-md border bg-gray-50 p-2">
+            <div className="rounded-md border bg-muted p-2">
               {renderRecipientTags(ccRecipients, "cc")}
             </div>
           )}
diff --git a/frontend/lib/registry/components/mail-recipient-selector/MailRecipientSelectorConfigPanel.tsx b/frontend/lib/registry/components/mail-recipient-selector/MailRecipientSelectorConfigPanel.tsx
index 1d42fb60..50b9586a 100644
--- a/frontend/lib/registry/components/mail-recipient-selector/MailRecipientSelectorConfigPanel.tsx
+++ b/frontend/lib/registry/components/mail-recipient-selector/MailRecipientSelectorConfigPanel.tsx
@@ -74,7 +74,7 @@ export const MailRecipientSelectorConfigPanel: React.FC<
               placeholder="mailTo"
               className="h-8 text-sm"
             />
-            <p className="text-[10px] text-gray-500">
+            <p className="text-[10px] text-muted-foreground">
               formData에 저장될 수신자 필드명 (제어에서 {`{{mailTo}}`}로 사용)
             </p>
           </div>
@@ -87,7 +87,7 @@ export const MailRecipientSelectorConfigPanel: React.FC<
               placeholder="mailCc"
               className="h-8 text-sm"
             />
-            <p className="text-[10px] text-gray-500">
+            <p className="text-[10px] text-muted-foreground">
               formData에 저장될 참조 필드명 (제어에서 {`{{mailCc}}`}로 사용)
             </p>
           </div>
@@ -103,7 +103,7 @@ export const MailRecipientSelectorConfigPanel: React.FC<
           <div className="flex items-center justify-between">
             <div>
               <Label className="text-xs">참조(CC) 필드 표시</Label>
-              <p className="text-[10px] text-gray-500">참조 수신자 입력 필드 표시</p>
+              <p className="text-[10px] text-muted-foreground">참조 수신자 입력 필드 표시</p>
             </div>
             <Switch
               checked={localConfig.showCc !== false}
@@ -114,7 +114,7 @@ export const MailRecipientSelectorConfigPanel: React.FC<
           <div className="flex items-center justify-between">
             <div>
               <Label className="text-xs">내부 인원 선택</Label>
-              <p className="text-[10px] text-gray-500">회사 내부 사용자 선택 기능</p>
+              <p className="text-[10px] text-muted-foreground">회사 내부 사용자 선택 기능</p>
             </div>
             <Switch
               checked={localConfig.showInternalSelector !== false}
@@ -127,7 +127,7 @@ export const MailRecipientSelectorConfigPanel: React.FC<
           <div className="flex items-center justify-between">
             <div>
               <Label className="text-xs">외부 이메일 입력</Label>
-              <p className="text-[10px] text-gray-500">외부 이메일 직접 입력 기능</p>
+              <p className="text-[10px] text-muted-foreground">외부 이메일 직접 입력 기능</p>
             </div>
             <Switch
               checked={localConfig.showExternalInput !== false}
@@ -140,7 +140,7 @@ export const MailRecipientSelectorConfigPanel: React.FC<
           <div className="flex items-center justify-between">
             <div>
               <Label className="text-xs">필수 입력</Label>
-              <p className="text-[10px] text-gray-500">수신자 필수 입력 여부</p>
+              <p className="text-[10px] text-muted-foreground">수신자 필수 입력 여부</p>
             </div>
             <Switch
               checked={localConfig.required !== false}
@@ -219,19 +219,19 @@ export const MailRecipientSelectorConfigPanel: React.FC<
       </Card>
 
       {/* 사용 안내 */}
-      <Card className="bg-blue-50">
+      <Card className="bg-primary/10">
         <CardContent className="p-3">
-          <div className="text-xs text-blue-700">
+          <div className="text-xs text-primary">
             <p className="font-medium mb-1">사용 방법</p>
             <ol className="list-decimal list-inside space-y-1">
               <li>이 컴포넌트를 모달 화면에 배치합니다.</li>
               <li>
                 제어관리의 메일 발송 노드에서 수신자를{" "}
-                <code className="bg-blue-100 px-1 rounded">{`{{mailTo}}`}</code>로 설정합니다.
+                <code className="bg-primary/10 px-1 rounded">{`{{mailTo}}`}</code>로 설정합니다.
               </li>
               <li>
                 참조는{" "}
-                <code className="bg-blue-100 px-1 rounded">{`{{mailCc}}`}</code>로 설정합니다.
+                <code className="bg-primary/10 px-1 rounded">{`{{mailCc}}`}</code>로 설정합니다.
               </li>
               <li>부모 화면에서 선택한 데이터는 별도 변수로 접근 가능합니다.</li>
             </ol>
diff --git a/frontend/lib/registry/components/map/MapComponent.tsx b/frontend/lib/registry/components/map/MapComponent.tsx
index 652f17d6..82eef05e 100644
--- a/frontend/lib/registry/components/map/MapComponent.tsx
+++ b/frontend/lib/registry/components/map/MapComponent.tsx
@@ -188,10 +188,10 @@ export default function MapComponent({ component }: MapComponentProps) {
 
   if (error) {
     return (
-      <div className="flex h-full w-full items-center justify-center bg-gray-50">
+      <div className="flex h-full w-full items-center justify-center bg-muted">
         <div className="text-center">
-          <AlertCircle className="mx-auto h-12 w-12 text-red-500" />
-          <p className="mt-2 text-sm text-red-600">{error}</p>
+          <AlertCircle className="mx-auto h-12 w-12 text-destructive" />
+          <p className="mt-2 text-sm text-destructive">{error}</p>
           <Button onClick={loadMapData} className="mt-4" size="sm">
             다시 시도
           </Button>
@@ -261,11 +261,11 @@ export default function MapComponent({ component }: MapComponentProps) {
 
       {/* 상단 정보 바 */}
       <div className="absolute top-2 right-2 z-[1000] flex items-center gap-2 rounded-lg bg-white/90 backdrop-blur-sm px-3 py-2 shadow-lg">
-        <span className="text-xs font-medium text-gray-700">
+        <span className="text-xs font-medium text-foreground">
           마커: {markers.length}개
         </span>
         {lastUpdate && (
-          <span className="text-xs text-gray-500">
+          <span className="text-xs text-muted-foreground">
             {lastUpdate.toLocaleTimeString()}
           </span>
         )}
diff --git a/frontend/lib/registry/components/map/MapConfigPanel.tsx b/frontend/lib/registry/components/map/MapConfigPanel.tsx
index 3f591efc..3df729c8 100644
--- a/frontend/lib/registry/components/map/MapConfigPanel.tsx
+++ b/frontend/lib/registry/components/map/MapConfigPanel.tsx
@@ -368,7 +368,7 @@ export default function MapConfigPanel({ config, onChange }: MapConfigPanelProps
             rows={2}
             className="font-mono text-sm"
           />
-          <p className="text-xs text-gray-500">SQL WHERE 절 (WHERE 키워드 제외)</p>
+          <p className="text-xs text-muted-foreground">SQL WHERE 절 (WHERE 키워드 제외)</p>
         </div>
       </div>
 
@@ -432,7 +432,7 @@ export default function MapConfigPanel({ config, onChange }: MapConfigPanelProps
               updateConfig("refreshInterval", parseInt(e.target.value) * 1000 || 0)
             }
           />
-          <p className="text-xs text-gray-500">0이면 자동 새로고침 없음</p>
+          <p className="text-xs text-muted-foreground">0이면 자동 새로고침 없음</p>
         </div>
       </div>
     </div>
diff --git a/frontend/lib/registry/components/map/MapPreviewComponent.tsx b/frontend/lib/registry/components/map/MapPreviewComponent.tsx
index 7adb31f6..a10a4658 100644
--- a/frontend/lib/registry/components/map/MapPreviewComponent.tsx
+++ b/frontend/lib/registry/components/map/MapPreviewComponent.tsx
@@ -17,12 +17,12 @@ export default function MapPreviewComponent({ component }: MapPreviewComponentPr
   const tableName = component.config?.dataSource?.tableName;
 
   return (
-    <div className="flex h-full w-full items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-50 border-2 border-dashed border-blue-300">
+    <div className="flex h-full w-full items-center justify-center bg-gradient-to-br from-primary/5 to-indigo-50 border-2 border-dashed border-primary/40">
       <div className="text-center">
-        <Map className="mx-auto h-12 w-12 text-blue-600" />
-        <p className="mt-2 text-sm font-medium text-blue-900">지도 컴포넌트</p>
+        <Map className="mx-auto h-12 w-12 text-primary" />
+        <p className="mt-2 text-sm font-medium text-primary">지도 컴포넌트</p>
         {tableName && (
-          <p className="mt-1 text-xs text-blue-600">테이블: {tableName}</p>
+          <p className="mt-1 text-xs text-primary">테이블: {tableName}</p>
         )}
       </div>
     </div>
diff --git a/frontend/lib/registry/components/modal-repeater-table/ModalRepeaterTableComponent.tsx b/frontend/lib/registry/components/modal-repeater-table/ModalRepeaterTableComponent.tsx
index 153cebdf..95fac92a 100644
--- a/frontend/lib/registry/components/modal-repeater-table/ModalRepeaterTableComponent.tsx
+++ b/frontend/lib/registry/components/modal-repeater-table/ModalRepeaterTableComponent.tsx
@@ -10,6 +10,7 @@ import { useCalculation } from "./useCalculation";
 import { cn } from "@/lib/utils";
 import { apiClient } from "@/lib/api/client";
 import { ComponentRendererProps } from "@/types/component";
+import { isColumnRequiredByMeta } from "@/lib/registry/DynamicComponentRenderer";
 
 // ✅ ComponentRendererProps 상속으로 필수 props 자동 확보
 export interface ModalRepeaterTableComponentProps extends ComponentRendererProps {
@@ -380,6 +381,15 @@ export function ModalRepeaterTableComponent({
     return [];
   }, [componentConfig?.columns, propColumns, sourceColumns]);
 
+  // NOT NULL 메타데이터 기반 required 보강
+  const enhancedColumns = React.useMemo((): RepeaterColumnConfig[] => {
+    if (!targetTable) return columns;
+    return columns.map((col) => ({
+      ...col,
+      required: col.required || isColumnRequiredByMeta(targetTable, col.field),
+    }));
+  }, [columns, targetTable]);
+
   // 초기 props 검증
   useEffect(() => {
     if (rawSourceColumns.length !== sourceColumns.length) {
@@ -876,7 +886,7 @@ export function ModalRepeaterTableComponent({
 
       {/* Repeater 테이블 */}
       <RepeaterTable
-        columns={columns}
+        columns={enhancedColumns}
         data={localValue}
         onDataChange={handleChange}
         onRowChange={handleRowChange}
diff --git a/frontend/lib/registry/components/modal-repeater-table/ModalRepeaterTableConfigPanel.tsx b/frontend/lib/registry/components/modal-repeater-table/ModalRepeaterTableConfigPanel.tsx
index f22eb497..71b43635 100644
--- a/frontend/lib/registry/components/modal-repeater-table/ModalRepeaterTableConfigPanel.tsx
+++ b/frontend/lib/registry/components/modal-repeater-table/ModalRepeaterTableConfigPanel.tsx
@@ -545,7 +545,7 @@ export function ModalRepeaterTableConfigPanel({
                         <Check className={cn("mr-2 h-4 w-4", localConfig.sourceTable === table.tableName ? "opacity-100" : "opacity-0")} />
                         <div className="flex flex-col">
                           <span className="font-medium">{table.displayName || table.tableName}</span>
-                          {table.displayName && <span className="text-[10px] text-gray-500">{table.tableName}</span>}
+                          {table.displayName && <span className="text-[10px] text-muted-foreground">{table.tableName}</span>}
                         </div>
                       </CommandItem>
                     ))}
@@ -603,7 +603,7 @@ export function ModalRepeaterTableConfigPanel({
                         <Check className={cn("mr-2 h-4 w-4", localConfig.targetTable === table.tableName ? "opacity-100" : "opacity-0")} />
                         <div className="flex flex-col">
                           <span className="font-medium">{table.displayName || table.tableName}</span>
-                          {table.displayName && <span className="text-[10px] text-gray-500">{table.tableName}</span>}
+                          {table.displayName && <span className="text-[10px] text-muted-foreground">{table.tableName}</span>}
                         </div>
                       </CommandItem>
                     ))}
@@ -792,7 +792,7 @@ export function ModalRepeaterTableConfigPanel({
                         <Check className={cn("mr-2 h-4 w-4", localConfig.uniqueField === column.columnName ? "opacity-100" : "opacity-0")} />
                         <div className="flex flex-col">
                           <span className="font-medium">{column.displayName || column.columnName}</span>
-                          {column.displayName && <span className="text-[10px] text-gray-500">{column.columnName}</span>}
+                          {column.displayName && <span className="text-[10px] text-muted-foreground">{column.columnName}</span>}
                         </div>
                       </CommandItem>
                     ))}
@@ -1102,7 +1102,7 @@ export function ModalRepeaterTableConfigPanel({
                       
                       {col.mapping?.type === "source" && (
                         <div className="space-y-3">
-                          <div className="p-3 bg-blue-50 dark:bg-blue-950 rounded-md border border-blue-200 dark:border-blue-800">
+                          <div className="p-3 bg-primary/10 dark:bg-primary/15 rounded-md border border-primary/20 dark:border-primary/30">
                             <p className="text-xs font-medium mb-2">소스 테이블에서 복사</p>
                             <p className="text-[10px] text-muted-foreground">
                               모달 검색에서 선택한 항목(소스 테이블)의 컬럼 값을 가져옴
@@ -1466,7 +1466,7 @@ export function ModalRepeaterTableConfigPanel({
                                   {/* 조인 조건 미리보기 */}
                                   {condition.sourceField && condition.targetField && (
                                     <div className="mt-2 p-2 bg-muted/50 rounded text-[10px] font-mono">
-                                      <span className="text-blue-600 dark:text-blue-400">
+                                      <span className="text-primary dark:text-primary/80">
                                         {condition.sourceTable === "source" 
                                           ? localConfig.sourceTable 
                                           : localConfig.targetTable || "저장테이블"}
@@ -1495,7 +1495,7 @@ export function ModalRepeaterTableConfigPanel({
 
                             {/* 조인 조건 예시 */}
                             {col.mapping?.referenceTable && (
-                              <div className="p-3 bg-blue-50 dark:bg-blue-950 rounded-md border border-blue-200 dark:border-blue-800">
+                              <div className="p-3 bg-primary/10 dark:bg-primary/15 rounded-md border border-primary/20 dark:border-primary/30">
                                 <p className="text-xs font-medium mb-2">조인 조건 예시</p>
                                 <div className="space-y-1 text-[10px] text-muted-foreground">
                                   <p>예) 거래처별 품목 단가 조회:</p>
@@ -1509,7 +1509,7 @@ export function ModalRepeaterTableConfigPanel({
                       )}
 
                       {col.mapping?.type === "manual" && (
-                        <div className="p-3 bg-green-50 dark:bg-green-950 rounded-md border border-green-200 dark:border-green-800">
+                        <div className="p-3 bg-emerald-50 dark:bg-emerald-950 rounded-md border border-emerald-200 dark:border-emerald-800">
                           <p className="text-xs font-medium mb-2">화면에서 입력 (수동)</p>
                           <p className="text-[10px] text-muted-foreground">
                             사용자가 반복 테이블에서 직접 입력
@@ -1827,7 +1827,7 @@ export function ModalRepeaterTableConfigPanel({
 
                     {/* 테이블 직접 조회 설정 */}
                     {option.sourceType === "table" && (
-                      <div className="space-y-3 p-3 bg-blue-50 dark:bg-blue-950 rounded-md border border-blue-200 dark:border-blue-800">
+                      <div className="space-y-3 p-3 bg-primary/10 dark:bg-primary/15 rounded-md border border-primary/20 dark:border-primary/30">
                         <p className="text-xs font-medium">테이블 조회 설정</p>
                         
                         {/* 참조 테이블 */}
@@ -1941,7 +1941,7 @@ export function ModalRepeaterTableConfigPanel({
 
                     {/* 테이블 복합 조인 설정 (2개 이상 테이블) */}
                     {option.sourceType === "multiTable" && (
-                      <div className="space-y-3 p-3 bg-green-50 dark:bg-green-950 rounded-md border border-green-200 dark:border-green-800">
+                      <div className="space-y-3 p-3 bg-emerald-50 dark:bg-emerald-950 rounded-md border border-emerald-200 dark:border-emerald-800">
                         <div>
                           <p className="text-xs font-medium">복합 조인 설정</p>
                           <p className="text-[10px] text-muted-foreground mt-1">
@@ -1985,7 +1985,7 @@ export function ModalRepeaterTableConfigPanel({
                             <div key={stepIndex} className="p-3 border rounded-md bg-background space-y-3">
                               <div className="flex items-center justify-between">
                                 <div className="flex items-center gap-2">
-                                  <div className="w-5 h-5 rounded-full bg-green-500 text-white flex items-center justify-center text-[10px] font-bold">
+                                  <div className="w-5 h-5 rounded-full bg-emerald-500 text-white flex items-center justify-center text-[10px] font-bold">
                                     {stepIndex + 1}
                                   </div>
                                   <span className="text-xs font-medium">조인 단계 {stepIndex + 1}</span>
@@ -2129,12 +2129,12 @@ export function ModalRepeaterTableConfigPanel({
                               {/* 조인 미리보기 */}
                               {step.tableName && step.joinCondition.fromField && step.joinCondition.toField && (
                                 <div className="p-2 bg-muted/50 rounded text-[10px] font-mono">
-                                  <span className="text-blue-600 dark:text-blue-400">
+                                  <span className="text-primary dark:text-primary/80">
                                     {stepIndex === 0 ? "현재행" : option.multiTableConfig?.joinChain[stepIndex - 1]?.tableName}
                                   </span>
                                   <span className="text-muted-foreground">.{step.joinCondition.fromField}</span>
-                                  <span className="mx-2 text-green-600 dark:text-green-400">=</span>
-                                  <span className="text-green-600 dark:text-green-400">{step.tableName}</span>
+                                  <span className="mx-2 text-emerald-600 dark:text-emerald-400">=</span>
+                                  <span className="text-emerald-600 dark:text-emerald-400">{step.tableName}</span>
                                   <span className="text-muted-foreground">.{step.joinCondition.toField}</span>
                                   {step.outputField && (
                                     <span className="ml-2 text-purple-600 dark:text-purple-400">
@@ -2187,12 +2187,12 @@ export function ModalRepeaterTableConfigPanel({
                                 <div key={idx} className="flex items-center gap-1">
                                   {idx === 0 && (
                                     <>
-                                      <span className="text-blue-600">현재행</span>
+                                      <span className="text-primary">현재행</span>
                                       <span>.{step.joinCondition.fromField}</span>
                                       <span className="text-muted-foreground mx-1">→</span>
                                     </>
                                   )}
-                                  <span className="text-green-600">{step.tableName}</span>
+                                  <span className="text-emerald-600">{step.tableName}</span>
                                   <span>.{step.joinCondition.toField}</span>
                                   {step.outputField && idx < option.multiTableConfig!.joinChain.length - 1 && (
                                     <>
@@ -2204,7 +2204,7 @@ export function ModalRepeaterTableConfigPanel({
                               ))}
                               {option.multiTableConfig.valueColumn && (
                                 <div className="pt-1 border-t mt-1">
-                                  <span className="text-orange-600">최종 값: </span>
+                                  <span className="text-amber-600">최종 값: </span>
                                   <span>{option.multiTableConfig.joinChain[option.multiTableConfig.joinChain.length - 1]?.tableName}.{option.multiTableConfig.valueColumn}</span>
                                 </div>
                               )}
diff --git a/frontend/lib/registry/components/modal-repeater-table/RepeaterTable.tsx b/frontend/lib/registry/components/modal-repeater-table/RepeaterTable.tsx
index 3fbfdf71..782c3ea9 100644
--- a/frontend/lib/registry/components/modal-repeater-table/RepeaterTable.tsx
+++ b/frontend/lib/registry/components/modal-repeater-table/RepeaterTable.tsx
@@ -133,7 +133,9 @@ export function RepeaterTable({
             continue;
           }
 
-          const response = await apiClient.get(`/table-categories/${tableName}/${columnName}/values?includeInactive=true`);
+          const response = await apiClient.get(
+            `/table-categories/${tableName}/${columnName}/values?includeInactive=true`,
+          );
 
           if (response.data?.success && response.data.data) {
             const options = response.data.data.map((item: any) => ({
@@ -164,10 +166,11 @@ export function RepeaterTable({
 
   // 편집 가능한 컬럼 인덱스 목록 (방향키 네비게이션용)
   const editableColIndices = useMemo(
-    () => visibleColumns.reduce<number[]>((acc, col, idx) => {
-      if (col.editable && !col.calculated) acc.push(idx);
-      return acc;
-    }, []),
+    () =>
+      visibleColumns.reduce<number[]>((acc, col, idx) => {
+        if (col.editable && !col.calculated) acc.push(idx);
+        return acc;
+      }, []),
     [visibleColumns],
   );
 
@@ -640,7 +643,7 @@ export function RepeaterTable({
                 handleCellEdit(rowIndex, column.field, val === "" ? 0 : parseFloat(val) || 0);
               }
             }}
-            className="h-8 w-full min-w-0 rounded-none border-gray-200 text-right text-xs focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
+            className="border-border focus:border-primary focus:ring-ring h-8 w-full min-w-0 rounded-none text-right text-xs focus:ring-1"
           />
         );
 
@@ -669,14 +672,14 @@ export function RepeaterTable({
             value={formatDateValue(value)}
             onChange={(e) => handleCellEdit(rowIndex, column.field, e.target.value)}
             onClick={(e) => (e.target as HTMLInputElement).showPicker?.()}
-            className="h-8 w-full min-w-0 cursor-pointer rounded-none border border-gray-200 bg-white px-2 text-xs focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-inner-spin-button]:hidden"
+            className="border-border focus:border-primary focus:ring-ring h-8 w-full min-w-0 cursor-pointer rounded-none border bg-white px-2 text-xs focus:ring-1 focus:outline-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-inner-spin-button]:hidden"
           />
         );
 
       case "select":
         return (
           <Select value={value || ""} onValueChange={(newValue) => handleCellEdit(rowIndex, column.field, newValue)}>
-            <SelectTrigger className="h-8 w-full min-w-0 rounded-none border-gray-200 text-xs focus:border-blue-500 focus:ring-1 focus:ring-blue-500">
+            <SelectTrigger className="border-border focus:border-primary focus:ring-ring h-8 w-full min-w-0 rounded-none text-xs focus:ring-1">
               <SelectValue />
             </SelectTrigger>
             <SelectContent>
@@ -696,7 +699,7 @@ export function RepeaterTable({
         const options = column.categoryRef ? categoryOptionsMap[column.categoryRef] || [] : [];
         return (
           <Select value={value || ""} onValueChange={(newValue) => handleCellEdit(rowIndex, column.field, newValue)}>
-            <SelectTrigger className="h-8 w-full min-w-0 rounded-none border-gray-200 text-xs focus:border-blue-500 focus:ring-1 focus:ring-blue-500">
+            <SelectTrigger className="border-border focus:border-primary focus:ring-ring h-8 w-full min-w-0 rounded-none text-xs focus:ring-1">
               <SelectValue placeholder="선택..." />
             </SelectTrigger>
             <SelectContent>
@@ -716,7 +719,7 @@ export function RepeaterTable({
             type="text"
             value={value || ""}
             onChange={(e) => handleCellEdit(rowIndex, column.field, e.target.value)}
-            className="h-8 w-full min-w-0 rounded-none border-gray-200 text-xs focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
+            className="border-border focus:border-primary focus:ring-ring h-8 w-full min-w-0 rounded-none text-xs focus:ring-1"
           />
         );
     }
@@ -727,7 +730,11 @@ export function RepeaterTable({
 
   return (
     <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
-      <div ref={containerRef} className="flex h-full flex-col border border-gray-200 bg-white" onKeyDown={handleArrowNavigation}>
+      <div
+        ref={containerRef}
+        className="border-border flex h-full flex-col border bg-white"
+        onKeyDown={handleArrowNavigation}
+      >
         <div className="min-h-0 flex-1 overflow-x-auto overflow-y-auto">
           <table
             className="border-collapse text-xs"
@@ -735,26 +742,26 @@ export function RepeaterTable({
               width: `max(100%, ${Object.values(columnWidths).reduce((sum, w) => sum + w, 0) + 74}px)`,
             }}
           >
-            <thead className="sticky top-0 z-20 bg-gray-50">
+            <thead className="bg-muted sticky top-0 z-20">
               <tr>
                 {/* 드래그 핸들 헤더 - 좌측 고정 */}
                 <th
                   key="header-drag"
-                  className="sticky left-0 z-30 w-8 border-r border-b border-gray-200 bg-gray-50 px-1 py-2 text-center font-medium text-gray-700"
+                  className="border-border bg-muted text-foreground sticky left-0 z-30 w-8 border-r border-b px-1 py-2 text-center font-medium"
                 >
                   <span className="sr-only">순서</span>
                 </th>
                 {/* 체크박스 헤더 - 좌측 고정 */}
                 <th
                   key="header-checkbox"
-                  className="sticky left-8 z-30 w-10 border-r border-b border-gray-200 bg-gray-50 px-3 py-2 text-center font-medium text-gray-700"
+                  className="border-border bg-muted text-foreground sticky left-8 z-30 w-10 border-r border-b px-3 py-2 text-center font-medium"
                 >
                   <Checkbox
                     checked={isAllSelected}
                     // @ts-expect-error - indeterminate는 HTML 속성
                     data-indeterminate={isIndeterminate}
                     onCheckedChange={handleSelectAll}
-                    className={cn("border-gray-400", isIndeterminate && "data-[state=checked]:bg-primary")}
+                    className={cn("border-input", isIndeterminate && "data-[state=checked]:bg-primary")}
                   />
                 </th>
                 {visibleColumns.map((col, colIndex) => {
@@ -768,7 +775,7 @@ export function RepeaterTable({
                   return (
                     <th
                       key={`header-col-${col.field || colIndex}`}
-                      className="group relative cursor-pointer border-r border-b border-gray-200 px-3 py-2 text-left font-medium whitespace-nowrap text-gray-700 select-none"
+                      className="group border-border text-foreground relative cursor-pointer border-r border-b px-3 py-2 text-left font-medium whitespace-nowrap select-none"
                       style={{ width: `${columnWidths[col.field]}px` }}
                       onDoubleClick={() => handleDoubleClick(col.field)}
                       title="더블클릭하여 글자 너비에 맞춤"
@@ -784,8 +791,8 @@ export function RepeaterTable({
                                 <button
                                   type="button"
                                   className={cn(
-                                    "inline-flex items-center gap-1 transition-colors hover:text-blue-600",
-                                    "-mx-1 rounded px-1 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500",
+                                    "hover:text-primary inline-flex items-center gap-1 transition-colors",
+                                    "focus-visible:ring-ring -mx-1 rounded px-1 focus:outline-none focus-visible:ring-2",
                                   )}
                                 >
                                   {/* 컬럼명 - 선택된 옵션라벨 형식으로 표시 */}
@@ -836,13 +843,13 @@ export function RepeaterTable({
                           ) : (
                             <>
                               {col.label}
-                              {col.required && <span className="ml-1 text-red-500">*</span>}
+                              {col.required && <span className="text-destructive ml-1">*</span>}
                             </>
                           )}
                         </div>
                         {/* 리사이즈 핸들 */}
                         <div
-                          className="pointer-events-auto absolute top-0 right-0 bottom-0 w-1 cursor-col-resize opacity-0 transition-opacity group-hover:opacity-100 hover:bg-blue-500"
+                          className="hover:bg-primary pointer-events-auto absolute top-0 right-0 bottom-0 w-1 cursor-col-resize opacity-0 transition-opacity group-hover:opacity-100"
                           onMouseDown={(e) => handleMouseDown(e, col.field)}
                           title="드래그하여 너비 조정"
                         />
@@ -859,7 +866,7 @@ export function RepeaterTable({
                     <td
                       key="empty-cell"
                       colSpan={visibleColumns.length + 2}
-                      className="border-b border-gray-200 px-4 py-8 text-center text-gray-500"
+                      className="border-border text-muted-foreground border-b px-4 py-8 text-center"
                     >
                       추가된 항목이 없습니다
                     </td>
@@ -870,8 +877,8 @@ export function RepeaterTable({
                       key={`row-${rowIndex}`}
                       id={`row-${rowIndex}`}
                       className={cn(
-                        "transition-colors hover:bg-blue-50/50",
-                        selectedRows.has(rowIndex) && "bg-blue-50",
+                        "hover:bg-primary/10/50 transition-colors",
+                        selectedRows.has(rowIndex) && "bg-primary/10",
                       )}
                     >
                       {({ attributes, listeners, isDragging }) => (
@@ -880,41 +887,41 @@ export function RepeaterTable({
                           <td
                             key={`drag-${rowIndex}`}
                             className={cn(
-                              "sticky left-0 z-10 border-r border-b border-gray-200 px-1 py-1 text-center",
-                              selectedRows.has(rowIndex) ? "bg-blue-50" : "bg-white",
+                              "border-border sticky left-0 z-10 border-r border-b px-1 py-1 text-center",
+                              selectedRows.has(rowIndex) ? "bg-primary/10" : "bg-white",
                             )}
                           >
                             <button
                               type="button"
                               className={cn(
-                                "cursor-grab rounded p-1 transition-colors hover:bg-gray-100",
+                                "hover:bg-muted cursor-grab rounded p-1 transition-colors",
                                 isDragging && "cursor-grabbing",
                               )}
                               {...attributes}
                               {...listeners}
                             >
-                              <GripVertical className="h-4 w-4 text-gray-400" />
+                              <GripVertical className="text-muted-foreground/70 h-4 w-4" />
                             </button>
                           </td>
                           {/* 체크박스 - 좌측 고정 */}
                           <td
                             key={`check-${rowIndex}`}
                             className={cn(
-                              "sticky left-8 z-10 border-r border-b border-gray-200 px-3 py-1 text-center",
-                              selectedRows.has(rowIndex) ? "bg-blue-50" : "bg-white",
+                              "border-border sticky left-8 z-10 border-r border-b px-3 py-1 text-center",
+                              selectedRows.has(rowIndex) ? "bg-primary/10" : "bg-white",
                             )}
                           >
                             <Checkbox
                               checked={selectedRows.has(rowIndex)}
                               onCheckedChange={(checked) => handleRowSelect(rowIndex, !!checked)}
-                              className="border-gray-400"
+                              className="border-input"
                             />
                           </td>
                           {/* 데이터 컬럼들 */}
                           {visibleColumns.map((col, colIndex) => (
                             <td
                               key={`${rowIndex}-${col.field || colIndex}`}
-                              className="overflow-hidden border-r border-b border-gray-200 px-1 py-1"
+                              className="border-border overflow-hidden border-r border-b px-1 py-1"
                               style={{
                                 width: `${columnWidths[col.field]}px`,
                                 maxWidth: `${columnWidths[col.field]}px`,
diff --git a/frontend/lib/registry/components/number-input/NumberInputComponent.tsx b/frontend/lib/registry/components/number-input/NumberInputComponent.tsx
index 84c62617..98af6c0a 100644
--- a/frontend/lib/registry/components/number-input/NumberInputComponent.tsx
+++ b/frontend/lib/registry/components/number-input/NumberInputComponent.tsx
@@ -120,13 +120,13 @@ export const NumberInputComponent: React.FC<NumberInputComponentProps> = ({
         {component.label && component.style?.labelDisplay !== false && (
           <label className="absolute -top-6 left-0 text-sm font-medium text-slate-600">
             {component.label}
-            {component.required && <span className="text-red-500">*</span>}
+            {component.required && <span className="text-destructive">*</span>}
           </label>
         )}
 
         <div className="box-border flex h-full w-full items-center gap-1">
           {/* 통화 기호 */}
-          <span className="pl-2 text-base font-semibold text-green-600">₩</span>
+          <span className="pl-2 text-base font-semibold text-emerald-600">₩</span>
 
           {/* 숫자 입력 */}
           <input
@@ -143,7 +143,7 @@ export const NumberInputComponent: React.FC<NumberInputComponentProps> = ({
                 onFormDataChange(component.columnName, numericValue);
               }
             }}
-            className={`h-full flex-1 rounded-md border px-3 py-2 text-right text-base font-semibold transition-all duration-200 outline-none ${isSelected ? "border-blue-500 ring-2 ring-blue-100" : "border-gray-300"} ${componentConfig.disabled ? "bg-gray-100 text-gray-400" : "bg-white text-green-600"} focus:border-orange-500 focus:ring-2 focus:ring-orange-100 disabled:cursor-not-allowed`}
+            className={`h-full flex-1 rounded-md border px-3 py-2 text-right text-base font-semibold transition-all duration-200 outline-none ${isSelected ? "border-primary ring-2 ring-blue-100" : "border-input"} ${componentConfig.disabled ? "bg-muted text-muted-foreground/70" : "bg-white text-emerald-600"} focus:border-orange-500 focus:ring-2 focus:ring-orange-100 disabled:cursor-not-allowed`}
             style={inputFontSize ? { fontSize: inputFontSize } : undefined}
           />
         </div>
@@ -159,7 +159,7 @@ export const NumberInputComponent: React.FC<NumberInputComponentProps> = ({
         {component.label && component.style?.labelDisplay !== false && (
           <label className="absolute -top-6 left-0 text-sm font-medium text-slate-600">
             {component.label}
-            {component.required && <span className="text-red-500">*</span>}
+            {component.required && <span className="text-destructive">*</span>}
           </label>
         )}
 
@@ -182,12 +182,12 @@ export const NumberInputComponent: React.FC<NumberInputComponentProps> = ({
                 onFormDataChange(component.columnName, numericValue);
               }
             }}
-            className={`h-full flex-1 rounded-md border px-3 py-2 text-right text-base font-semibold transition-all duration-200 outline-none ${isSelected ? "border-blue-500 ring-2 ring-blue-100" : "border-gray-300"} ${componentConfig.disabled ? "bg-gray-100 text-gray-400" : "bg-white text-blue-600"} focus:border-orange-500 focus:ring-2 focus:ring-orange-100 disabled:cursor-not-allowed`}
+            className={`h-full flex-1 rounded-md border px-3 py-2 text-right text-base font-semibold transition-all duration-200 outline-none ${isSelected ? "border-primary ring-2 ring-blue-100" : "border-input"} ${componentConfig.disabled ? "bg-muted text-muted-foreground/70" : "bg-white text-primary"} focus:border-orange-500 focus:ring-2 focus:ring-orange-100 disabled:cursor-not-allowed`}
             style={inputFontSize ? { fontSize: inputFontSize } : undefined}
           />
 
           {/* 퍼센트 기호 */}
-          <span className="pr-2 text-base font-semibold text-blue-600">%</span>
+          <span className="pr-2 text-base font-semibold text-primary">%</span>
         </div>
       </div>
     );
@@ -199,7 +199,7 @@ export const NumberInputComponent: React.FC<NumberInputComponentProps> = ({
       {component.label && component.style?.labelDisplay !== false && (
         <label className="absolute -top-6 left-0 text-sm font-medium text-slate-600">
           {component.label}
-          {component.required && <span className="text-red-500">*</span>}
+          {component.required && <span className="text-destructive">*</span>}
         </label>
       )}
 
@@ -222,7 +222,7 @@ export const NumberInputComponent: React.FC<NumberInputComponentProps> = ({
         min={componentConfig.min}
         max={componentConfig.max}
         step={step}
-        className={`box-border h-full w-full rounded-md border px-3 py-2 text-sm shadow-sm transition-all duration-200 outline-none ${isSelected ? "border-blue-500 ring-2 ring-blue-100" : "border-gray-300"} ${componentConfig.disabled ? "bg-gray-100 text-gray-400" : "bg-white text-gray-900"} placeholder:text-gray-400 focus:border-orange-500 focus:ring-2 focus:ring-orange-100 disabled:cursor-not-allowed`}
+        className={`box-border h-full w-full rounded-md border px-3 py-2 text-sm shadow-sm transition-all duration-200 outline-none ${isSelected ? "border-primary ring-2 ring-blue-100" : "border-input"} ${componentConfig.disabled ? "bg-muted text-muted-foreground/70" : "bg-white text-foreground"} placeholder:text-muted-foreground/70 focus:border-orange-500 focus:ring-2 focus:ring-orange-100 disabled:cursor-not-allowed`}
         style={inputFontSize ? { fontSize: inputFontSize } : undefined}
         onClick={handleClick}
         onDragStart={onDragStart}
diff --git a/frontend/lib/registry/components/pivot-grid/PivotGridComponent.tsx b/frontend/lib/registry/components/pivot-grid/PivotGridComponent.tsx
index 13cb1a68..13ad9887 100644
--- a/frontend/lib/registry/components/pivot-grid/PivotGridComponent.tsx
+++ b/frontend/lib/registry/components/pivot-grid/PivotGridComponent.tsx
@@ -1712,8 +1712,8 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
 
       {/* 필터 바 - 필터 영역에 필드가 있을 때만 표시 */}
       {filterFields.length > 0 && (
-        <div className="flex items-center gap-2 px-3 py-1.5 border-b border-border bg-orange-50/50 dark:bg-orange-950/10">
-          <Filter className="h-3.5 w-3.5 text-orange-600 dark:text-orange-400" />
+        <div className="flex items-center gap-2 px-3 py-1.5 border-b border-border bg-amber-50/50 dark:bg-orange-950/10">
+          <Filter className="h-3.5 w-3.5 text-amber-600 dark:text-orange-400" />
           <span className="text-xs font-medium text-orange-700 dark:text-orange-300">필터:</span>
           <div className="flex items-center gap-2 flex-wrap">
             {filterFields.map((filterField) => {
@@ -1739,7 +1739,7 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
                         "flex items-center gap-1.5 px-2 py-1 rounded text-xs",
                         "border transition-colors max-w-xs",
                         isFiltered
-                          ? "bg-orange-100 border-orange-300 text-orange-800 dark:bg-orange-900/30 dark:border-orange-700 dark:text-orange-200"
+                          ? "bg-amber-100 border-orange-300 text-orange-800 dark:bg-orange-900/30 dark:border-orange-700 dark:text-orange-200"
                           : "bg-background border-border hover:bg-accent"
                       )}
                       title={isFiltered ? `${filterField.caption}: ${selectedValues.join(", ")}` : filterField.caption}
diff --git a/frontend/lib/registry/components/pivot-grid/PivotGridConfigPanel.tsx b/frontend/lib/registry/components/pivot-grid/PivotGridConfigPanel.tsx
index 448c92a5..e05a154e 100644
--- a/frontend/lib/registry/components/pivot-grid/PivotGridConfigPanel.tsx
+++ b/frontend/lib/registry/components/pivot-grid/PivotGridConfigPanel.tsx
@@ -90,10 +90,10 @@ interface ColumnChipProps {
 const ColumnChip: React.FC<ColumnChipProps> = ({ column, isUsed, onClick }) => {
   const dataType = mapDbTypeToFieldType(column.data_type);
   const typeColor = {
-    number: "bg-blue-100 text-blue-700 border-blue-200",
-    string: "bg-green-100 text-green-700 border-green-200",
+    number: "bg-primary/10 text-primary border-primary/20",
+    string: "bg-emerald-100 text-emerald-700 border-emerald-200",
     date: "bg-purple-100 text-purple-700 border-purple-200",
-    boolean: "bg-orange-100 text-orange-700 border-orange-200",
+    boolean: "bg-amber-100 text-orange-700 border-orange-200",
   }[dataType];
 
   return (
@@ -400,12 +400,12 @@ export const PivotGridConfigPanel: React.FC<PivotGridConfigPanelProps> = ({
   return (
     <div className="space-y-4">
       {/* 사용 가이드 */}
-      <div className="bg-blue-50 border border-blue-200 rounded-lg p-3">
+      <div className="bg-primary/10 border border-primary/20 rounded-lg p-3">
         <div className="flex items-start gap-2">
-          <Info className="h-4 w-4 text-blue-600 mt-0.5" />
-          <div className="text-xs text-blue-800">
+          <Info className="h-4 w-4 text-primary mt-0.5" />
+          <div className="text-xs text-primary">
             <p className="font-medium mb-1">피벗 테이블 설정 방법</p>
-            <ol className="list-decimal list-inside space-y-0.5 text-blue-700">
+            <ol className="list-decimal list-inside space-y-0.5 text-primary">
               <li>데이터를 가져올 <strong>테이블</strong>을 선택하세요</li>
               <li><strong>행 그룹</strong>에 그룹화할 컬럼을 추가하세요 (예: 지역, 부서)</li>
               <li><strong>열 그룹</strong>에 가로로 펼칠 컬럼을 추가하세요 (예: 월, 분기)</li>
@@ -502,13 +502,13 @@ export const PivotGridConfigPanel: React.FC<PivotGridConfigPanelProps> = ({
               area="column"
               label="열 그룹"
               description="가로로 펼칠 항목 (예: 월, 분기, 연도)"
-              icon={<Columns className="h-4 w-4 text-blue-600" />}
+              icon={<Columns className="h-4 w-4 text-primary" />}
               fields={getFieldsByArea("column")}
               columns={columns}
               onAddField={(col) => handleAddField("column", col)}
               onRemoveField={(idx) => handleRemoveField("column", idx)}
               onUpdateField={(idx, updates) => handleUpdateField("column", idx, updates)}
-              color="border-blue-200 bg-blue-50/50"
+              color="border-primary/20 bg-primary/10/50"
             />
 
             <AreaDropZone
diff --git a/frontend/lib/registry/components/pivot-grid/components/FieldPanel.tsx b/frontend/lib/registry/components/pivot-grid/components/FieldPanel.tsx
index 060eb74d..b2bbef5e 100644
--- a/frontend/lib/registry/components/pivot-grid/components/FieldPanel.tsx
+++ b/frontend/lib/registry/components/pivot-grid/components/FieldPanel.tsx
@@ -91,17 +91,17 @@ const AREA_CONFIG: Record<
   filter: {
     title: "필터",
     icon: <Filter className="h-3.5 w-3.5" />,
-    color: "bg-orange-50 border-orange-200 dark:bg-orange-950/20 dark:border-orange-800",
+    color: "bg-amber-50 border-orange-200 dark:bg-orange-950/20 dark:border-orange-800",
   },
   column: {
     title: "열",
     icon: <Columns className="h-3.5 w-3.5" />,
-    color: "bg-blue-50 border-blue-200 dark:bg-blue-950/20 dark:border-blue-800",
+    color: "bg-primary/10 border-primary/20 dark:bg-primary/10 dark:border-primary/30",
   },
   row: {
     title: "행",
     icon: <Rows className="h-3.5 w-3.5" />,
-    color: "bg-green-50 border-green-200 dark:bg-green-950/20 dark:border-green-800",
+    color: "bg-emerald-50 border-emerald-200 dark:bg-emerald-950/20 dark:border-emerald-800",
   },
   data: {
     title: "데이터",
@@ -183,7 +183,7 @@ const SortableFieldChip: React.FC<FieldChipProps> = ({
             </span>
             {/* 그룹화 적용 표시 */}
             {hasGrouping && (
-              <span className="bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300 text-[10px] px-1 rounded">
+              <span className="bg-primary/10 text-primary dark:bg-primary/20 dark:text-primary/80 text-[10px] px-1 rounded">
                 {groupLabels[field.groupInterval!]}
               </span>
             )}
@@ -311,7 +311,7 @@ const SortableFieldChip: React.FC<FieldChipProps> = ({
             <>
               <DropdownMenuItem
                 onClick={() => onSettingsChange?.({ ...field, filterValues: [] })}
-                className="text-orange-600"
+                className="text-amber-600"
               >
                 <Filter className="h-3 w-3 mr-2" />
                 필터 초기화 ({filterCount}개 선택됨)
@@ -763,7 +763,7 @@ export const FieldPanel: React.FC<FieldPanelProps> = ({
                 <RotateCcw className="h-3 w-3 mr-1" />
                 초기화
                 {filteredFieldCount > 0 && (
-                  <span className="ml-1 bg-orange-500 text-white text-[10px] px-1 rounded">
+                  <span className="ml-1 bg-amber-500 text-white text-[10px] px-1 rounded">
                     {filteredFieldCount}
                   </span>
                 )}
@@ -772,7 +772,7 @@ export const FieldPanel: React.FC<FieldPanelProps> = ({
             </DropdownMenuTrigger>
             <DropdownMenuContent align="start" className="w-48">
               <DropdownMenuItem onClick={handleResetFilters}>
-                <FilterX className="h-3.5 w-3.5 mr-2 text-orange-500" />
+                <FilterX className="h-3.5 w-3.5 mr-2 text-amber-500" />
                 필터만 초기화
                 {filteredFieldCount > 0 && (
                   <span className="ml-auto text-xs text-muted-foreground">
@@ -781,7 +781,7 @@ export const FieldPanel: React.FC<FieldPanelProps> = ({
                 )}
               </DropdownMenuItem>
               <DropdownMenuItem onClick={handleResetLayout}>
-                <LayoutGrid className="h-3.5 w-3.5 mr-2 text-blue-500" />
+                <LayoutGrid className="h-3.5 w-3.5 mr-2 text-primary" />
                 필드 배치 초기화
               </DropdownMenuItem>
               <DropdownMenuSeparator />
diff --git a/frontend/lib/registry/components/pivot-grid/utils/aggregation.ts b/frontend/lib/registry/components/pivot-grid/utils/aggregation.ts
index 39aa1c5f..063efe89 100644
--- a/frontend/lib/registry/components/pivot-grid/utils/aggregation.ts
+++ b/frontend/lib/registry/components/pivot-grid/utils/aggregation.ts
@@ -3,6 +3,8 @@
  * 다양한 집계 연산을 수행합니다.
  */
 
+import { getFormatRules } from "@/lib/formatting";
+
 import { AggregationType, PivotFieldFormat } from "../types";
 
 // ==================== 집계 함수 ====================
@@ -102,16 +104,18 @@ export function formatNumber(
 
   let formatted: string;
 
+  const locale = getFormatRules().number.locale;
+
   switch (type) {
     case "currency":
-      formatted = value.toLocaleString("ko-KR", {
+      formatted = value.toLocaleString(locale, {
         minimumFractionDigits: precision,
         maximumFractionDigits: precision,
       });
       break;
 
     case "percent":
-      formatted = (value * 100).toLocaleString("ko-KR", {
+      formatted = (value * 100).toLocaleString(locale, {
         minimumFractionDigits: precision,
         maximumFractionDigits: precision,
       });
@@ -120,7 +124,7 @@ export function formatNumber(
     case "number":
     default:
       if (thousandSeparator) {
-        formatted = value.toLocaleString("ko-KR", {
+        formatted = value.toLocaleString(locale, {
           minimumFractionDigits: precision,
           maximumFractionDigits: precision,
         });
@@ -138,7 +142,7 @@ export function formatNumber(
  */
 export function formatDate(
   value: Date | string | null | undefined,
-  format: string = "YYYY-MM-DD"
+  format: string = getFormatRules().date.display
 ): string {
   if (!value) return "-";
 
diff --git a/frontend/lib/registry/components/pivot-grid/utils/pivotEngine.ts b/frontend/lib/registry/components/pivot-grid/utils/pivotEngine.ts
index 35893dea..0358a3cb 100644
--- a/frontend/lib/registry/components/pivot-grid/utils/pivotEngine.ts
+++ b/frontend/lib/registry/components/pivot-grid/utils/pivotEngine.ts
@@ -48,7 +48,7 @@ function getFieldValue(
         const weekNum = getWeekNumber(date);
         return `${date.getFullYear()}-W${String(weekNum).padStart(2, "0")}`;
       case "day":
-        return formatDate(date, "YYYY-MM-DD");
+        return formatDate(date);
       default:
         return String(rawValue);
     }
diff --git a/frontend/lib/registry/components/rack-structure/RackStructureComponent.tsx b/frontend/lib/registry/components/rack-structure/RackStructureComponent.tsx
index ea946531..4c3d3112 100644
--- a/frontend/lib/registry/components/rack-structure/RackStructureComponent.tsx
+++ b/frontend/lib/registry/components/rack-structure/RackStructureComponent.tsx
@@ -20,6 +20,7 @@ import {
   GeneratedLocation,
   RackStructureContext,
 } from "./types";
+import { applyLocationPattern, DEFAULT_CODE_PATTERN, DEFAULT_NAME_PATTERN } from "./patternUtils";
 
 // 기존 위치 데이터 타입
 interface ExistingLocation {
@@ -95,12 +96,12 @@ const ConditionCard: React.FC<ConditionCardProps> = ({
   };
 
   return (
-    <div className="relative rounded-lg border border-gray-200 bg-white shadow-sm">
+    <div className="relative rounded-lg border border-border bg-white shadow-sm">
       {/* 헤더 */}
-      <div className="flex items-center justify-between rounded-t-lg bg-blue-600 px-4 py-2 text-white">
+      <div className="flex items-center justify-between rounded-t-lg bg-primary px-4 py-2 text-white">
         <span className="font-medium">조건 {index + 1}</span>
         {!readonly && (
-          <button onClick={() => onRemove(condition.id)} className="rounded p-1 transition-colors hover:bg-blue-700">
+          <button onClick={() => onRemove(condition.id)} className="rounded p-1 transition-colors hover:bg-primary/90">
             <X className="h-4 w-4" />
           </button>
         )}
@@ -111,8 +112,8 @@ const ConditionCard: React.FC<ConditionCardProps> = ({
         {/* 열 범위 */}
         <div className="flex items-center gap-2">
           <div className="flex-1">
-            <label className="mb-1 block text-xs font-medium text-gray-700">
-              열 범위 <span className="text-red-500">*</span>
+            <label className="mb-1 block text-xs font-medium text-foreground">
+              열 범위 <span className="text-destructive">*</span>
             </label>
             <div className="flex items-center gap-2">
               <Input
@@ -125,7 +126,7 @@ const ConditionCard: React.FC<ConditionCardProps> = ({
                 disabled={readonly}
                 className="h-9 text-center"
               />
-              <span className="text-gray-500">~</span>
+              <span className="text-muted-foreground">~</span>
               <Input
                 type="number"
                 min={1}
@@ -139,8 +140,8 @@ const ConditionCard: React.FC<ConditionCardProps> = ({
             </div>
           </div>
           <div className="w-20">
-            <label className="mb-1 block text-xs font-medium text-gray-700">
-              단 수 <span className="text-red-500">*</span>
+            <label className="mb-1 block text-xs font-medium text-foreground">
+              단 수 <span className="text-destructive">*</span>
             </label>
             <Input
               type="number"
@@ -156,14 +157,14 @@ const ConditionCard: React.FC<ConditionCardProps> = ({
         </div>
 
         {/* 계산 결과 */}
-        <div className="rounded-md bg-blue-50 px-3 py-2 text-center text-sm text-blue-700">
+        <div className="rounded-md bg-primary/10 px-3 py-2 text-center text-sm text-primary">
           {locationCount > 0 ? (
             <>
               {localValues.startRow}열 ~ {localValues.endRow}열 x {localValues.levels}단 ={" "}
               <strong>{locationCount}개</strong>
             </>
           ) : (
-            <span className="text-gray-500">값을 입력하세요</span>
+            <span className="text-muted-foreground">값을 입력하세요</span>
           )}
         </div>
       </div>
@@ -512,23 +513,27 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
     return { totalLocations, totalRows, maxLevel };
   }, [conditions]);
 
-  // 위치 코드 생성
+  // 위치 코드 생성 (패턴 기반)
   const generateLocationCode = useCallback(
     (row: number, level: number): { code: string; name: string } => {
-      const warehouseCode = context?.warehouseCode || "WH001";
-      const floor = context?.floor || "1";
-      const zone = context?.zone || "A";
+      const vars = {
+        warehouse: context?.warehouseCode || "WH001",
+        warehouseName: context?.warehouseName || "",
+        floor: context?.floor || "1",
+        zone: context?.zone || "A",
+        row,
+        level,
+      };
 
-      // 코드 생성 (예: WH001-1층D구역-01-1)
-      const code = `${warehouseCode}-${floor}${zone}-${row.toString().padStart(2, "0")}-${level}`;
+      const codePattern = config.codePattern || DEFAULT_CODE_PATTERN;
+      const namePattern = config.namePattern || DEFAULT_NAME_PATTERN;
 
-      // 이름 생성 - zone에 이미 "구역"이 포함되어 있으면 그대로 사용
-      const zoneName = zone.includes("구역") ? zone : `${zone}구역`;
-      const name = `${zoneName}-${row.toString().padStart(2, "0")}열-${level}단`;
-
-      return { code, name };
+      return {
+        code: applyLocationPattern(codePattern, vars),
+        name: applyLocationPattern(namePattern, vars),
+      };
     },
-    [context],
+    [context, config.codePattern, config.namePattern],
   );
 
   // 미리보기 생성
@@ -664,7 +669,7 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
       <Card>
         <CardHeader className="flex flex-row items-center justify-between pb-2">
           <CardTitle className="flex items-center gap-2 text-base">
-            <div className="h-4 w-1 rounded bg-gradient-to-b from-green-500 to-blue-500" />렉 라인 구조 설정
+            <div className="h-4 w-1 rounded bg-gradient-to-b from-green-500 to-primary/50" />렉 라인 구조 설정
           </CardTitle>
           {!readonly && (
             <div className="flex items-center gap-2">
@@ -757,9 +762,9 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
 
           {/* 기존 데이터 존재 알림 */}
           {!isCheckingDuplicates && existingLocations.length > 0 && !hasDuplicateWithExisting && (
-            <Alert className="mb-4 border-blue-200 bg-blue-50">
-              <AlertCircle className="h-4 w-4 text-blue-600" />
-              <AlertDescription className="text-blue-800">
+            <Alert className="mb-4 border-primary/20 bg-primary/10">
+              <AlertCircle className="h-4 w-4 text-primary" />
+              <AlertDescription className="text-primary">
                 해당 창고/층/구역에 <strong>{existingLocations.length}개</strong>의 위치가 이미 등록되어 있습니다.
               </AlertDescription>
             </Alert>
@@ -767,47 +772,47 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
 
           {/* 현재 매핑된 값 표시 */}
           {(context.warehouseCode || context.warehouseName || context.floor || context.zone) && (
-            <div className="mb-4 flex flex-wrap gap-2 rounded-lg bg-gray-50 p-3">
+            <div className="mb-4 flex flex-wrap gap-2 rounded-lg bg-muted p-3">
               {(context.warehouseCode || context.warehouseName) && (
-                <span className="rounded bg-blue-100 px-2 py-1 text-xs text-blue-800">
+                <span className="rounded bg-primary/10 px-2 py-1 text-xs text-primary">
                   창고: {context.warehouseName || context.warehouseCode}
                   {context.warehouseName && context.warehouseCode && ` (${context.warehouseCode})`}
                 </span>
               )}
               {context.floor && (
-                <span className="rounded bg-green-100 px-2 py-1 text-xs text-green-800">층: {context.floor}</span>
+                <span className="rounded bg-emerald-100 px-2 py-1 text-xs text-emerald-800">층: {context.floor}</span>
               )}
               {context.zone && (
                 <span className="rounded bg-purple-100 px-2 py-1 text-xs text-purple-800">구역: {context.zone}</span>
               )}
               {context.locationType && (
-                <span className="rounded bg-orange-100 px-2 py-1 text-xs text-orange-800">
+                <span className="rounded bg-amber-100 px-2 py-1 text-xs text-orange-800">
                   유형: {context.locationType}
                 </span>
               )}
               {context.status && (
-                <span className="rounded bg-gray-200 px-2 py-1 text-xs text-gray-800">상태: {context.status}</span>
+                <span className="rounded bg-muted/80 px-2 py-1 text-xs text-foreground">상태: {context.status}</span>
               )}
             </div>
           )}
 
           {/* 안내 메시지 */}
-          <div className="mb-4 rounded-lg bg-blue-50 p-4">
-            <ol className="space-y-1 text-sm text-blue-800">
+          <div className="mb-4 rounded-lg bg-primary/10 p-4">
+            <ol className="space-y-1 text-sm text-primary">
               <li className="flex items-start gap-2">
-                <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded bg-blue-600 text-xs font-bold text-white">
+                <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded bg-primary text-xs font-bold text-white">
                   1
                 </span>
                 조건 추가 버튼을 클릭하여 렉 라인 조건을 생성하세요
               </li>
               <li className="flex items-start gap-2">
-                <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded bg-blue-600 text-xs font-bold text-white">
+                <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded bg-primary text-xs font-bold text-white">
                   2
                 </span>
                 각 조건마다 열 범위와 단 수를 입력하세요
               </li>
               <li className="flex items-start gap-2">
-                <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded bg-blue-600 text-xs font-bold text-white">
+                <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded bg-primary text-xs font-bold text-white">
                   3
                 </span>
                 예시: 조건1(1~3열, 3단), 조건2(4~6열, 5단)
@@ -817,9 +822,9 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
 
           {/* 조건 목록 또는 빈 상태 */}
           {conditions.length === 0 ? (
-            <div className="flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-200 py-12">
-              <div className="mb-4 text-6xl text-gray-300">📦</div>
-              <p className="mb-4 text-gray-500">조건을 추가하여 렉 구조를 설정하세요</p>
+            <div className="flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-border py-12">
+              <div className="mb-4 text-6xl text-muted-foreground/50">📦</div>
+              <p className="mb-4 text-muted-foreground">조건을 추가하여 렉 구조를 설정하세요</p>
               {!readonly && (
                 <Button onClick={addCondition} className="gap-1">
                   <Plus className="h-4 w-4" />첫 번째 조건 추가
@@ -870,15 +875,15 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
             {config.showStatistics && (
               <div className="mb-4 grid grid-cols-3 gap-4">
                 <div className="rounded-lg border bg-white p-4 text-center">
-                  <div className="text-sm text-gray-500">총 위치</div>
+                  <div className="text-sm text-muted-foreground">총 위치</div>
                   <div className="text-2xl font-bold">{statistics.totalLocations}개</div>
                 </div>
                 <div className="rounded-lg border bg-white p-4 text-center">
-                  <div className="text-sm text-gray-500">열 수</div>
+                  <div className="text-sm text-muted-foreground">열 수</div>
                   <div className="text-2xl font-bold">{statistics.totalRows}개</div>
                 </div>
                 <div className="rounded-lg border bg-white p-4 text-center">
-                  <div className="text-sm text-gray-500">최대 단</div>
+                  <div className="text-sm text-muted-foreground">최대 단</div>
                   <div className="text-2xl font-bold">{statistics.maxLevel}단</div>
                 </div>
               </div>
@@ -889,7 +894,7 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
               <div className="rounded-lg border">
                 <ScrollArea className="h-[400px]">
                   <Table>
-                    <TableHeader className="sticky top-0 bg-gray-50">
+                    <TableHeader className="sticky top-0 bg-muted">
                       <TableRow>
                         <TableHead className="w-12 text-center">No</TableHead>
                         <TableHead>위치코드</TableHead>
@@ -921,8 +926,8 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
                 </ScrollArea>
               </div>
             ) : (
-              <div className="flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-200 py-8 text-gray-500">
-                <Eye className="mb-2 h-8 w-8 text-gray-300" />
+              <div className="flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-border py-8 text-muted-foreground">
+                <Eye className="mb-2 h-8 w-8 text-muted-foreground/50" />
                 <p>미리보기 생성 버튼을 클릭하여 결과를 확인하세요</p>
               </div>
             )}
@@ -969,16 +974,16 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
               {/* 템플릿 목록 */}
               {templates.length > 0 ? (
                 <div className="space-y-2">
-                  <div className="text-sm font-medium text-gray-700">저장된 템플릿</div>
+                  <div className="text-sm font-medium text-foreground">저장된 템플릿</div>
                   <ScrollArea className="h-[200px]">
                     {templates.map((template) => (
                       <div
                         key={template.id}
-                        className="flex items-center justify-between rounded-lg border p-3 hover:bg-gray-50"
+                        className="flex items-center justify-between rounded-lg border p-3 hover:bg-muted"
                       >
                         <div>
                           <div className="font-medium">{template.name}</div>
-                          <div className="text-xs text-gray-500">{template.conditions.length}개 조건</div>
+                          <div className="text-xs text-muted-foreground">{template.conditions.length}개 조건</div>
                         </div>
                         <div className="flex gap-2">
                           <Button variant="outline" size="sm" onClick={() => loadTemplate(template)}>
@@ -993,7 +998,7 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
                   </ScrollArea>
                 </div>
               ) : (
-                <div className="py-8 text-center text-gray-500">저장된 템플릿이 없습니다</div>
+                <div className="py-8 text-center text-muted-foreground">저장된 템플릿이 없습니다</div>
               )}
             </div>
           )}
diff --git a/frontend/lib/registry/components/rack-structure/RackStructureConfigPanel.tsx b/frontend/lib/registry/components/rack-structure/RackStructureConfigPanel.tsx
index 8f0c8177..ddaebfa2 100644
--- a/frontend/lib/registry/components/rack-structure/RackStructureConfigPanel.tsx
+++ b/frontend/lib/registry/components/rack-structure/RackStructureConfigPanel.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useMemo } from "react";
 import { Label } from "@/components/ui/label";
 import { Input } from "@/components/ui/input";
 import { Switch } from "@/components/ui/switch";
@@ -12,6 +12,47 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { RackStructureComponentConfig, FieldMapping } from "./types";
+import { applyLocationPattern, DEFAULT_CODE_PATTERN, DEFAULT_NAME_PATTERN, PATTERN_VARIABLES } from "./patternUtils";
+
+// 패턴 미리보기 서브 컴포넌트
+const PatternPreview: React.FC<{
+  codePattern?: string;
+  namePattern?: string;
+}> = ({ codePattern, namePattern }) => {
+  const sampleVars = {
+    warehouse: "WH002",
+    warehouseName: "2창고",
+    floor: "2층",
+    zone: "A구역",
+    row: 1,
+    level: 3,
+  };
+
+  const previewCode = useMemo(
+    () => applyLocationPattern(codePattern || DEFAULT_CODE_PATTERN, sampleVars),
+    [codePattern],
+  );
+  const previewName = useMemo(
+    () => applyLocationPattern(namePattern || DEFAULT_NAME_PATTERN, sampleVars),
+    [namePattern],
+  );
+
+  return (
+    <div className="rounded-md border border-primary/20 bg-primary/5 p-2.5">
+      <div className="mb-1.5 text-[10px] font-medium text-primary">미리보기 (2창고 / 2층 / A구역 / 1열 / 3단)</div>
+      <div className="space-y-1">
+        <div className="flex items-center gap-2 text-xs">
+          <span className="w-14 shrink-0 text-muted-foreground">위치코드:</span>
+          <code className="rounded bg-background px-1.5 py-0.5 font-mono text-foreground">{previewCode}</code>
+        </div>
+        <div className="flex items-center gap-2 text-xs">
+          <span className="w-14 shrink-0 text-muted-foreground">위치명:</span>
+          <code className="rounded bg-background px-1.5 py-0.5 font-mono text-foreground">{previewName}</code>
+        </div>
+      </div>
+    </div>
+  );
+};
 
 interface RackStructureConfigPanelProps {
   config: RackStructureComponentConfig;
@@ -73,8 +114,8 @@ export const RackStructureConfigPanel: React.FC<RackStructureConfigPanelProps> =
     <div className="space-y-4">
       {/* 필드 매핑 섹션 */}
       <div className="space-y-3">
-        <div className="text-sm font-medium text-gray-700">필드 매핑</div>
-        <p className="text-xs text-gray-500">
+        <div className="text-sm font-medium text-foreground">필드 매핑</div>
+        <p className="text-xs text-muted-foreground">
           상위 폼에 배치된 필드 중 어떤 필드를 사용할지 선택하세요
         </p>
 
@@ -205,9 +246,64 @@ export const RackStructureConfigPanel: React.FC<RackStructureConfigPanelProps> =
         </div>
       </div>
 
+      {/* 위치코드 패턴 설정 */}
+      <div className="space-y-3 border-t pt-3">
+        <div className="text-sm font-medium text-foreground">위치코드/위치명 패턴</div>
+        <p className="text-xs text-muted-foreground">
+          변수를 조합하여 위치코드와 위치명 생성 규칙을 설정하세요
+        </p>
+
+        {/* 위치코드 패턴 */}
+        <div>
+          <Label className="text-xs">위치코드 패턴</Label>
+          <Input
+            value={config.codePattern || ""}
+            onChange={(e) => handleChange("codePattern", e.target.value || undefined)}
+            placeholder="{warehouse}-{floor}{zone}-{row:02}-{level}"
+            className="h-8 font-mono text-xs"
+          />
+          <p className="mt-1 text-[10px] text-muted-foreground">
+            비워두면 기본값: {"{warehouse}-{floor}{zone}-{row:02}-{level}"}
+          </p>
+        </div>
+
+        {/* 위치명 패턴 */}
+        <div>
+          <Label className="text-xs">위치명 패턴</Label>
+          <Input
+            value={config.namePattern || ""}
+            onChange={(e) => handleChange("namePattern", e.target.value || undefined)}
+            placeholder="{zone}-{row:02}열-{level}단"
+            className="h-8 font-mono text-xs"
+          />
+          <p className="mt-1 text-[10px] text-muted-foreground">
+            비워두면 기본값: {"{zone}-{row:02}열-{level}단"}
+          </p>
+        </div>
+
+        {/* 실시간 미리보기 */}
+        <PatternPreview
+          codePattern={config.codePattern}
+          namePattern={config.namePattern}
+        />
+
+        {/* 사용 가능한 변수 목록 */}
+        <div className="rounded-md border bg-muted/50 p-2">
+          <div className="mb-1 text-[10px] font-medium text-foreground">사용 가능한 변수</div>
+          <div className="grid grid-cols-2 gap-x-3 gap-y-0.5">
+            {PATTERN_VARIABLES.map((v) => (
+              <div key={v.token} className="flex items-center gap-1 text-[10px]">
+                <code className="rounded bg-primary/10 px-1 font-mono text-primary">{v.token}</code>
+                <span className="text-muted-foreground">{v.description}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
       {/* 제한 설정 */}
       <div className="space-y-3 border-t pt-3">
-        <div className="text-sm font-medium text-gray-700">제한 설정</div>
+        <div className="text-sm font-medium text-foreground">제한 설정</div>
 
         <div>
           <Label className="text-xs">최대 조건 수</Label>
@@ -248,7 +344,7 @@ export const RackStructureConfigPanel: React.FC<RackStructureConfigPanelProps> =
 
       {/* UI 설정 */}
       <div className="space-y-3 border-t pt-3">
-        <div className="text-sm font-medium text-gray-700">UI 설정</div>
+        <div className="text-sm font-medium text-foreground">UI 설정</div>
 
         <div className="flex items-center justify-between">
           <Label className="text-xs">템플릿 기능</Label>
diff --git a/frontend/lib/registry/components/rack-structure/patternUtils.ts b/frontend/lib/registry/components/rack-structure/patternUtils.ts
new file mode 100644
index 00000000..b5139c0b
--- /dev/null
+++ b/frontend/lib/registry/components/rack-structure/patternUtils.ts
@@ -0,0 +1,7 @@
+// rack-structure는 v2-rack-structure의 patternUtils를 재사용
+export {
+  applyLocationPattern,
+  DEFAULT_CODE_PATTERN,
+  DEFAULT_NAME_PATTERN,
+  PATTERN_VARIABLES,
+} from "../v2-rack-structure/patternUtils";
diff --git a/frontend/lib/registry/components/radio-basic/RadioBasicComponent.tsx b/frontend/lib/registry/components/radio-basic/RadioBasicComponent.tsx
index 8d196db7..9987a8f4 100644
--- a/frontend/lib/registry/components/radio-basic/RadioBasicComponent.tsx
+++ b/frontend/lib/registry/components/radio-basic/RadioBasicComponent.tsx
@@ -96,9 +96,9 @@ export const RadioBasicComponent: React.FC<RadioBasicComponentProps> = ({
                 checked={selectedValue === option.value}
                 onChange={() => handleRadioChange(option.value)}
                 disabled={componentConfig.disabled || isDesignMode}
-                className="h-4 w-4 border-gray-300 text-blue-600 focus:ring-0 focus:outline-none"
+                className="h-4 w-4 border-input text-primary focus:ring-0 focus:outline-none"
               />
-              <span className="text-sm text-gray-900">{option.label}</span>
+              <span className="text-sm text-foreground">{option.label}</span>
             </label>
           ))}
         </div>
@@ -118,9 +118,9 @@ export const RadioBasicComponent: React.FC<RadioBasicComponentProps> = ({
                 checked={selectedValue === option.value}
                 onChange={() => handleRadioChange(option.value)}
                 disabled={componentConfig.disabled || isDesignMode}
-                className="h-4 w-4 border-gray-300 text-blue-600 focus:ring-0 focus:outline-none"
+                className="h-4 w-4 border-input text-primary focus:ring-0 focus:outline-none"
               />
-              <span className="text-sm text-gray-900">{option.label}</span>
+              <span className="text-sm text-foreground">{option.label}</span>
             </label>
           ))}
         </div>
@@ -155,7 +155,7 @@ export const RadioBasicComponent: React.FC<RadioBasicComponentProps> = ({
       {component.label && component.style?.labelDisplay !== false && (
         <label className="absolute -top-6 left-0 text-sm font-medium text-slate-600">
           {component.label}
-          {component.required && <span className="text-red-500">*</span>}
+          {component.required && <span className="text-destructive">*</span>}
         </label>
       )}
 
diff --git a/frontend/lib/registry/components/related-data-buttons/RelatedDataButtonsComponent.tsx b/frontend/lib/registry/components/related-data-buttons/RelatedDataButtonsComponent.tsx
index 66c13255..f5c76061 100644
--- a/frontend/lib/registry/components/related-data-buttons/RelatedDataButtonsComponent.tsx
+++ b/frontend/lib/registry/components/related-data-buttons/RelatedDataButtonsComponent.tsx
@@ -371,7 +371,7 @@ export const RelatedDataButtonsComponent: React.FC<RelatedDataButtonsComponentPr
                 variant="default"
                 size="sm"
                 onClick={handleAddClick}
-                className="bg-blue-600 hover:bg-blue-700"
+                className="bg-primary hover:bg-primary/90"
               >
                 <Plus className="mr-1 h-4 w-4" />
                 {addButtonConfig.label || "버전 추가"}
diff --git a/frontend/lib/registry/components/related-data-buttons/RelatedDataButtonsConfigPanel.tsx b/frontend/lib/registry/components/related-data-buttons/RelatedDataButtonsConfigPanel.tsx
index 173682fc..437ea625 100644
--- a/frontend/lib/registry/components/related-data-buttons/RelatedDataButtonsConfigPanel.tsx
+++ b/frontend/lib/registry/components/related-data-buttons/RelatedDataButtonsConfigPanel.tsx
@@ -337,7 +337,7 @@ export const RelatedDataButtonsConfigPanel: React.FC<RelatedDataButtonsConfigPan
                     >
                       <Check className={cn("mr-2 h-4 w-4", config.sourceMapping?.sourceTable === table.tableName ? "opacity-100" : "opacity-0")} />
                       {table.displayName || table.tableName}
-                      {table.displayName && <span className="ml-2 text-xs text-gray-500">({table.tableName})</span>}
+                      {table.displayName && <span className="ml-2 text-xs text-muted-foreground">({table.tableName})</span>}
                     </CommandItem>
                   ))}
                 </CommandGroup>
@@ -377,7 +377,7 @@ export const RelatedDataButtonsConfigPanel: React.FC<RelatedDataButtonsConfigPan
         </div>
 
         {config.headerDisplay?.show !== false && (
-          <div className="space-y-2 pl-2 border-l-2 border-gray-200">
+          <div className="space-y-2 pl-2 border-l-2 border-border">
             <div className="space-y-1">
               <Label className="text-xs">제목 컬럼</Label>
               <Select
@@ -449,7 +449,7 @@ export const RelatedDataButtonsConfigPanel: React.FC<RelatedDataButtonsConfigPan
                     >
                       <Check className={cn("mr-2 h-4 w-4", config.buttonDataSource?.tableName === table.tableName ? "opacity-100" : "opacity-0")} />
                       {table.displayName || table.tableName}
-                      {table.displayName && <span className="ml-2 text-xs text-gray-500">({table.tableName})</span>}
+                      {table.displayName && <span className="ml-2 text-xs text-muted-foreground">({table.tableName})</span>}
                     </CommandItem>
                   ))}
                 </CommandGroup>
@@ -659,7 +659,7 @@ export const RelatedDataButtonsConfigPanel: React.FC<RelatedDataButtonsConfigPan
         </div>
 
         {config.addButton?.show && (
-          <div className="space-y-2 pl-2 border-l-2 border-gray-200">
+          <div className="space-y-2 pl-2 border-l-2 border-border">
             <div className="space-y-1">
               <Label className="text-xs">버튼 라벨</Label>
               <Input
@@ -708,7 +708,7 @@ export const RelatedDataButtonsConfigPanel: React.FC<RelatedDataButtonsConfigPan
         </div>
 
         {config.modalLink?.enabled && (
-          <div className="space-y-2 pl-2 border-l-2 border-gray-200">
+          <div className="space-y-2 pl-2 border-l-2 border-border">
             <div className="space-y-1">
               <Label className="text-xs">트리거 방식</Label>
               <Select
diff --git a/frontend/lib/registry/components/repeat-container/RepeatContainerComponent.tsx b/frontend/lib/registry/components/repeat-container/RepeatContainerComponent.tsx
index b51b2448..5f533cfd 100644
--- a/frontend/lib/registry/components/repeat-container/RepeatContainerComponent.tsx
+++ b/frontend/lib/registry/components/repeat-container/RepeatContainerComponent.tsx
@@ -471,8 +471,8 @@ export function RepeatContainerComponent({
         className={cn(
           "rounded-md border border-dashed p-3 transition-colors",
           isDragOver
-            ? "border-green-500 bg-green-50/70"
-            : "border-blue-300 bg-blue-50/50"
+            ? "border-emerald-500 bg-emerald-50/70"
+            : "border-primary/40 bg-primary/10/50"
         )}
         onDragOver={handleDragOver}
         onDragLeave={handleDragLeave}
@@ -484,13 +484,13 @@ export function RepeatContainerComponent({
         }}
       >
         <div className="mb-3 flex items-center justify-between">
-          <div className="flex items-center gap-2 text-sm text-blue-700">
+          <div className="flex items-center gap-2 text-sm text-primary">
             <Repeat className="h-4 w-4" />
             <span className="font-medium">리피터 컨테이너</span>
-            <span className="text-blue-500">({previewData.length}개 미리보기)</span>
+            <span className="text-primary">({previewData.length}개 미리보기)</span>
           </div>
           {isDragOver ? (
-            <div className="flex items-center gap-1 rounded bg-green-100 px-2 py-1 text-xs text-green-700">
+            <div className="flex items-center gap-1 rounded bg-emerald-100 px-2 py-1 text-xs text-emerald-700">
               <Plus className="h-3 w-3" />
               여기에 놓으세요
             </div>
@@ -521,7 +521,7 @@ export function RepeatContainerComponent({
                   clickable && "cursor-pointer hover:shadow-md",
                   showSelectedState &&
                     selectedIndices.includes(index) &&
-                    "ring-2 ring-blue-500"
+                    "ring-2 ring-ring"
                 )}
               >
                 {showItemTitle && (titleColumn || itemTitleTemplate) && (
@@ -556,22 +556,22 @@ export function RepeatContainerComponent({
                     {slotChildren!.map((child: SlotComponentConfig, childIdx: number) => (
                       <div
                         key={child.id}
-                        className="flex items-center gap-2 rounded border border-dashed border-green-300 bg-green-50/50 px-2 py-1.5"
+                        className="flex items-center gap-2 rounded border border-dashed border-green-300 bg-emerald-50/50 px-2 py-1.5"
                       >
-                        <div className="flex h-5 w-5 items-center justify-center rounded bg-green-100 text-xs font-medium text-green-700">
+                        <div className="flex h-5 w-5 items-center justify-center rounded bg-emerald-100 text-xs font-medium text-emerald-700">
                           {childIdx + 1}
                         </div>
                         <div className="min-w-0 flex-1">
-                          <div className="truncate text-xs font-medium text-green-700">
+                          <div className="truncate text-xs font-medium text-emerald-700">
                             {child.label || child.componentType}
                           </div>
                           {child.fieldName && (
-                            <div className="truncate text-[10px] text-green-500">
+                            <div className="truncate text-[10px] text-emerald-500">
                               {child.fieldName}
                             </div>
                           )}
                         </div>
-                        <div className="text-[10px] text-green-400">
+                        <div className="text-[10px] text-emerald-400">
                           {child.componentType}
                         </div>
                       </div>
@@ -612,7 +612,7 @@ export function RepeatContainerComponent({
   if (isLoading) {
     return (
       <div className="flex items-center justify-center rounded-md border bg-slate-50 py-8">
-        <div className="h-6 w-6 animate-spin rounded-full border-2 border-blue-500 border-t-transparent" />
+        <div className="h-6 w-6 animate-spin rounded-full border-2 border-primary border-t-transparent" />
         <span className="ml-2 text-sm text-muted-foreground">로딩 중...</span>
       </div>
     );
@@ -640,7 +640,7 @@ export function RepeatContainerComponent({
                 clickable && "cursor-pointer hover:shadow-md",
                 showSelectedState &&
                   selectedIndices.includes(index) &&
-                  "ring-2 ring-blue-500"
+                  "ring-2 ring-ring"
               )}
               onClick={() => handleItemClick(index, row)}
             >
diff --git a/frontend/lib/registry/components/repeat-container/RepeatContainerConfigPanel.tsx b/frontend/lib/registry/components/repeat-container/RepeatContainerConfigPanel.tsx
index 2eddd234..c46bb275 100644
--- a/frontend/lib/registry/components/repeat-container/RepeatContainerConfigPanel.tsx
+++ b/frontend/lib/registry/components/repeat-container/RepeatContainerConfigPanel.tsx
@@ -127,7 +127,7 @@ export function RepeatContainerConfigPanel({
 
         {/* 현재 선택된 테이블 표시 (카드 형태) */}
         <div className="flex items-center gap-2 rounded-md border bg-slate-50 p-2">
-          <Database className="h-4 w-4 text-blue-500" />
+          <Database className="h-4 w-4 text-primary" />
           <div className="flex-1">
             <div className="text-xs font-medium">
               {config.customTableName || config.tableName || screenTableName || "테이블 미선택"}
@@ -180,7 +180,7 @@ export function RepeatContainerConfigPanel({
                           !config.useCustomTable ? "opacity-100" : "opacity-0"
                         )}
                       />
-                      <Database className="mr-2 h-3 w-3 text-blue-500" />
+                      <Database className="mr-2 h-3 w-3 text-primary" />
                       {screenTableName}
                     </CommandItem>
                   </CommandGroup>
@@ -499,7 +499,7 @@ export function RepeatContainerConfigPanel({
                 </PopoverContent>
               </Popover>
               {config.titleColumn && (
-                <p className="text-[10px] text-green-600">
+                <p className="text-[10px] text-emerald-600">
                   각 아이템의 "{config.titleColumn}" 값이 제목으로 표시됩니다
                 </p>
               )}
@@ -567,7 +567,7 @@ export function RepeatContainerConfigPanel({
                 </PopoverContent>
               </Popover>
               {config.descriptionColumn && (
-                <p className="text-[10px] text-green-600">
+                <p className="text-[10px] text-emerald-600">
                   각 아이템의 "{config.descriptionColumn}" 값이 설명으로 표시됩니다
                 </p>
               )}
@@ -889,25 +889,25 @@ function SlotChildrenSection({
             return (
               <div
                 key={child.id}
-                className="rounded-md border border-green-200 bg-green-50 overflow-hidden"
+                className="rounded-md border border-emerald-200 bg-emerald-50 overflow-hidden"
               >
                 {/* 기본 정보 헤더 - 타입 선택 드롭다운 제거됨 */}
                 <div className="flex items-center gap-2 p-2">
-                  <div className="flex h-5 w-5 items-center justify-center rounded bg-green-200 text-xs font-medium text-green-700">
+                  <div className="flex h-5 w-5 items-center justify-center rounded bg-emerald-200 text-xs font-medium text-emerald-700">
                     {index + 1}
                   </div>
                   <div className="flex-1">
-                    <div className="text-xs font-medium text-green-700">
+                    <div className="text-xs font-medium text-emerald-700">
                       {child.label || child.fieldName}
                     </div>
-                    <div className="text-[10px] text-green-500">
+                    <div className="text-[10px] text-emerald-500">
                       필드: {child.fieldName}
                     </div>
                   </div>
                   <Button
                     variant="ghost"
                     size="sm"
-                    className="h-5 w-5 p-0 text-blue-500 hover:text-blue-700"
+                    className="h-5 w-5 p-0 text-primary hover:text-primary"
                     onClick={() => toggleExpanded(child.id)}
                     title="상세 설정"
                   >
@@ -920,7 +920,7 @@ function SlotChildrenSection({
                   <Button
                     variant="ghost"
                     size="sm"
-                    className="h-5 w-5 p-0 text-red-400 hover:text-red-600"
+                    className="h-5 w-5 p-0 text-destructive/80 hover:text-destructive"
                     onClick={() => removeComponent(child.id)}
                   >
                     <X className="h-3 w-3" />
@@ -929,7 +929,7 @@ function SlotChildrenSection({
 
                 {/* 상세 설정 패널 */}
                 {isExpanded && (
-                  <div className="border-t border-green-200 bg-white p-3 space-y-3">
+                  <div className="border-t border-emerald-200 bg-white p-3 space-y-3">
                     {hasComponentConfigPanel(child.componentType) ? (
                       <SlotComponentDetailPanel
                         child={child}
@@ -948,14 +948,14 @@ function SlotChildrenSection({
                     ) : (
                       <>
                         {child.fieldName && (
-                          <div className="p-2 bg-green-50 rounded-md border border-green-200">
+                          <div className="p-2 bg-emerald-50 rounded-md border border-emerald-200">
                             <div className="flex items-center gap-1.5">
-                              <Database className="h-3 w-3 text-green-600" />
-                              <span className="text-[10px] text-green-700 font-medium">
+                              <Database className="h-3 w-3 text-emerald-600" />
+                              <span className="text-[10px] text-emerald-700 font-medium">
                                 바인딩: {child.fieldName}
                               </span>
                             </div>
-                            <p className="text-[9px] text-green-600 mt-0.5">
+                            <p className="text-[9px] text-emerald-600 mt-0.5">
                               각 아이템의 "{child.fieldName}" 값이 자동으로 표시됩니다
                             </p>
                           </div>
@@ -1092,7 +1092,7 @@ function SlotChildrenSection({
                         <Plus
                           className={cn(
                             "mr-2 h-3 w-3",
-                            isAdded ? "text-green-500" : "text-blue-500"
+                            isAdded ? "text-emerald-500" : "text-primary"
                           )}
                         />
                         <div className="flex-1">
@@ -1102,7 +1102,7 @@ function SlotChildrenSection({
                           </div>
                         </div>
                         {isAdded && (
-                          <Check className="h-3 w-3 text-green-500" />
+                          <Check className="h-3 w-3 text-emerald-500" />
                         )}
                       </CommandItem>
                     );
@@ -1134,14 +1134,14 @@ function SlotComponentDetailPanel({
   return (
     <div className="space-y-3">
       {child.fieldName && (
-        <div className="p-2 bg-green-50 rounded-md border border-green-200">
+        <div className="p-2 bg-emerald-50 rounded-md border border-emerald-200">
           <div className="flex items-center gap-1.5">
-            <Database className="h-3 w-3 text-green-600" />
-            <span className="text-[10px] text-green-700 font-medium">
+            <Database className="h-3 w-3 text-emerald-600" />
+            <span className="text-[10px] text-emerald-700 font-medium">
               바인딩: {child.fieldName}
             </span>
           </div>
-          <p className="text-[9px] text-green-600 mt-0.5">
+          <p className="text-[9px] text-emerald-600 mt-0.5">
             각 아이템의 "{child.fieldName}" 값이 자동으로 표시됩니다
           </p>
         </div>
diff --git a/frontend/lib/registry/components/repeat-screen-modal/RepeatScreenModalComponent.tsx b/frontend/lib/registry/components/repeat-screen-modal/RepeatScreenModalComponent.tsx
index 6765e6c7..fe316206 100644
--- a/frontend/lib/registry/components/repeat-screen-modal/RepeatScreenModalComponent.tsx
+++ b/frontend/lib/registry/components/repeat-screen-modal/RepeatScreenModalComponent.tsx
@@ -10,6 +10,7 @@ import { Label } from "@/components/ui/label";
 import { Badge } from "@/components/ui/badge";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { Loader2, Save, X, Layers, Table as TableIcon, Plus, Trash2, RotateCcw, Pencil } from "lucide-react";
+import { isColumnRequiredByMeta } from "@/lib/registry/DynamicComponentRenderer";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -2136,17 +2137,17 @@ export function RepeatScreenModalComponent({
                   </Badge>
                 )}
                 {rowTypeCounts.aggregation > 0 && (
-                  <Badge className="bg-orange-100 text-orange-700 dark:bg-orange-900 dark:text-orange-300">
+                  <Badge className="bg-amber-100 text-orange-700 dark:bg-orange-900 dark:text-orange-300">
                     집계 {rowTypeCounts.aggregation}개
                   </Badge>
                 )}
                 {rowTypeCounts.table > 0 && (
-                  <Badge className="bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300">
+                  <Badge className="bg-primary/10 text-primary dark:bg-primary/20 dark:text-primary/80">
                     테이블 {rowTypeCounts.table}개
                   </Badge>
                 )}
                 {rowTypeCounts.fields > 0 && (
-                  <Badge className="bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300">
+                  <Badge className="bg-emerald-100 text-emerald-700 dark:bg-emerald-900 dark:text-emerald-300">
                     필드 {rowTypeCounts.fields}개
                   </Badge>
                 )}
@@ -2176,7 +2177,7 @@ export function RepeatScreenModalComponent({
 
           {/* 데이터 소스 정보 */}
           {dataSource?.sourceTable && (
-            <div className="rounded-md bg-green-100 px-3 py-2 text-xs dark:bg-green-900">
+            <div className="rounded-md bg-emerald-100 px-3 py-2 text-xs dark:bg-emerald-900">
               소스 테이블: <strong>{dataSource.sourceTable}</strong>
               {dataSource.filterField && <span className="ml-2">(필터: {dataSource.filterField})</span>}
             </div>
@@ -2328,7 +2329,7 @@ export function RepeatScreenModalComponent({
                                     key={row._rowId}
                                     className={cn(
                                       row._isDirty && "bg-primary/5",
-                                      row._isNew && "bg-green-50 dark:bg-green-950",
+                                      row._isNew && "bg-emerald-50 dark:bg-emerald-950",
                                       row._isDeleted && "bg-destructive/10 opacity-60",
                                     )}
                                   >
@@ -2373,7 +2374,7 @@ export function RepeatScreenModalComponent({
                                                 onClick={() =>
                                                   handleEditExternalRow(card._cardId, row._rowId, contentRow.id)
                                                 }
-                                                className="h-7 w-7 p-0 text-blue-600 hover:bg-blue-50 hover:text-blue-700"
+                                                className="h-7 w-7 p-0 text-primary hover:bg-primary/10 hover:text-primary"
                                                 title="수정"
                                               >
                                                 <Pencil className="h-4 w-4" />
@@ -2725,7 +2726,7 @@ function renderContentRow(
 
       if (aggFields.length === 0) {
         return (
-          <div className="rounded-lg bg-orange-50 p-4 text-sm text-orange-600 dark:bg-orange-950 dark:text-orange-400">
+          <div className="rounded-lg bg-amber-50 p-4 text-sm text-amber-600 dark:bg-orange-950 dark:text-orange-400">
             집계 필드가 설정되지 않았습니다. (레이아웃 탭에서 집계 필드를 추가하세요)
           </div>
         );
@@ -2768,7 +2769,7 @@ function renderContentRow(
 
       if (tableColumns.length === 0) {
         return (
-          <div className="rounded-lg bg-blue-50 p-4 text-sm text-blue-600 dark:bg-blue-950 dark:text-blue-400">
+          <div className="rounded-lg bg-primary/10 p-4 text-sm text-primary dark:bg-primary/15 dark:text-primary/80">
             테이블 컬럼이 설정되지 않았습니다. (레이아웃 탭에서 테이블 컬럼을 추가하세요)
           </div>
         );
@@ -2858,7 +2859,7 @@ function renderSimpleContentRow(
 
       if (aggFields.length === 0) {
         return (
-          <div className="rounded-lg bg-orange-50 p-4 text-sm text-orange-600 dark:bg-orange-950 dark:text-orange-400">
+          <div className="rounded-lg bg-amber-50 p-4 text-sm text-amber-600 dark:bg-orange-950 dark:text-orange-400">
             집계 필드가 설정되지 않았습니다.
           </div>
         );
@@ -2903,7 +2904,7 @@ function renderSimpleContentRow(
 
       if (tableColumns.length === 0) {
         return (
-          <div className="rounded-lg bg-blue-50 p-4 text-sm text-blue-600 dark:bg-blue-950 dark:text-blue-400">
+          <div className="rounded-lg bg-primary/10 p-4 text-sm text-primary dark:bg-primary/15 dark:text-primary/80">
             테이블 컬럼이 설정되지 않았습니다.
           </div>
         );
@@ -3004,10 +3005,10 @@ function renderSimpleTableCell(col: TableColumnConfig, card: CardData, onChange:
 // 배경색 클래스 변환
 function getBackgroundClass(color: string): string {
   const colorMap: Record<string, string> = {
-    blue: "bg-blue-50 dark:bg-blue-950",
-    green: "bg-green-50 dark:bg-green-950",
+    blue: "bg-primary/10 dark:bg-primary/15",
+    green: "bg-emerald-50 dark:bg-emerald-950",
     purple: "bg-purple-50 dark:bg-purple-950",
-    orange: "bg-orange-50 dark:bg-orange-950",
+    orange: "bg-amber-50 dark:bg-orange-950",
   };
   return colorMap[color] || "";
 }
@@ -3113,15 +3114,15 @@ function renderTableCell(
 }
 
 // 컬럼 렌더링 함수 (Simple 모드)
-function renderColumn(col: CardColumnConfig, card: CardData, onChange: (value: any) => void) {
+function renderColumn(col: CardColumnConfig, card: CardData, onChange: (value: any) => void, tableName?: string) {
   const value = card[col.field];
   const isReadOnly = !col.editable;
+  const effectiveRequired = col.required || isColumnRequiredByMeta(tableName, col.field);
 
   return (
     <div className="space-y-1.5">
       <Label className="text-xs font-medium">
-        {col.label}
-        {col.required && <span className="text-destructive ml-1">*</span>}
+        {col.label}{effectiveRequired && <span className="text-orange-500">*</span>}
       </Label>
 
       {isReadOnly && (
diff --git a/frontend/lib/registry/components/repeat-screen-modal/RepeatScreenModalConfigPanel.tsx b/frontend/lib/registry/components/repeat-screen-modal/RepeatScreenModalConfigPanel.tsx
index 2a77f96a..1e6772d6 100644
--- a/frontend/lib/registry/components/repeat-screen-modal/RepeatScreenModalConfigPanel.tsx
+++ b/frontend/lib/registry/components/repeat-screen-modal/RepeatScreenModalConfigPanel.tsx
@@ -532,13 +532,13 @@ function FormulaBuilder({
   const getTokenBadgeClass = (token: FormulaToken): string => {
     switch (token.type) {
       case "aggregation":
-        return "bg-blue-100 text-blue-700 border-blue-200";
+        return "bg-primary/10 text-primary border-primary/20";
       case "column":
         return token.isExternal 
-          ? "bg-orange-100 text-orange-700 border-orange-200" 
-          : "bg-green-100 text-green-700 border-green-200";
+          ? "bg-amber-100 text-orange-700 border-orange-200" 
+          : "bg-emerald-100 text-emerald-700 border-emerald-200";
       case "operator":
-        return "bg-gray-100 text-gray-700 border-gray-200";
+        return "bg-muted text-foreground border-border";
       case "number":
         return "bg-purple-100 text-purple-700 border-purple-200";
       default:
@@ -600,8 +600,8 @@ function FormulaBuilder({
 
       {/* 집계 참조 추가 */}
       {referenceableAggregations.length > 0 && (
-        <div className="space-y-2 p-2 bg-blue-50 dark:bg-blue-950 rounded border border-blue-200 dark:border-blue-800 overflow-hidden min-w-0">
-          <Label className="text-[9px] text-blue-700 dark:text-blue-300">이전 집계 참조</Label>
+        <div className="space-y-2 p-2 bg-primary/10 dark:bg-primary/15 rounded border border-primary/20 dark:border-primary/30 overflow-hidden min-w-0">
+          <Label className="text-[9px] text-primary dark:text-primary/80">이전 집계 참조</Label>
           <div className="space-y-1">
             <span className="text-[8px] text-muted-foreground">참조할 집계 선택</span>
             <div className="flex gap-1">
@@ -633,8 +633,8 @@ function FormulaBuilder({
       )}
 
       {/* 테이블 컬럼 집계 추가 */}
-      <div className="space-y-2 p-2 bg-green-50 dark:bg-green-950 rounded border border-green-200 dark:border-green-800 overflow-hidden min-w-0">
-        <Label className="text-[9px] text-green-700 dark:text-green-300">테이블 컬럼 집계</Label>
+      <div className="space-y-2 p-2 bg-emerald-50 dark:bg-emerald-950 rounded border border-emerald-200 dark:border-emerald-800 overflow-hidden min-w-0">
+        <Label className="text-[9px] text-emerald-700 dark:text-emerald-300">테이블 컬럼 집계</Label>
         
         {/* 테이블 선택 */}
         <div className="space-y-1">
@@ -704,7 +704,7 @@ function FormulaBuilder({
         </div>
         
         {newTokenTable !== sourceTable && newTokenTable && (
-          <p className="text-[8px] text-orange-600">외부 테이블: _EXT 함수 사용</p>
+          <p className="text-[8px] text-amber-600">외부 테이블: _EXT 함수 사용</p>
         )}
       </div>
 
@@ -924,7 +924,7 @@ function AggregationConfigItemModal({
   return (
     <div className={cn(
       "border rounded-lg p-4 space-y-4",
-      isFormula ? "bg-purple-50 dark:bg-purple-950 border-purple-200" : "bg-blue-50 dark:bg-blue-950 border-blue-200"
+      isFormula ? "bg-purple-50 dark:bg-purple-950 border-purple-200" : "bg-primary/10 dark:bg-primary/15 border-primary/20"
     )}>
       {/* 헤더 */}
       <div className="flex items-center justify-between">
@@ -952,7 +952,7 @@ function AggregationConfigItemModal({
           </div>
           <Badge className={cn(
             "text-xs px-2 py-0.5",
-            isFormula ? "bg-purple-100 text-purple-700" : "bg-blue-100 text-blue-700"
+            isFormula ? "bg-purple-100 text-purple-700" : "bg-primary/10 text-primary"
           )}>
             {isFormula ? "가상" : "집계"} {index + 1}
           </Badge>
@@ -1092,8 +1092,8 @@ function AggregationConfigItemModal({
 
           {/* 이전 집계 참조 */}
           {referenceableAggregations.length > 0 && (
-            <div className="space-y-1.5 p-3 bg-blue-100 dark:bg-blue-900 rounded-lg">
-              <Label className="text-xs text-blue-700 dark:text-blue-300">이전 집계 참조</Label>
+            <div className="space-y-1.5 p-3 bg-primary/10 dark:bg-primary/20 rounded-lg">
+              <Label className="text-xs text-primary dark:text-primary/80">이전 집계 참조</Label>
               <div className="flex flex-wrap gap-1">
                 {referenceableAggregations.map((refAgg) => (
                   <Button
@@ -1105,7 +1105,7 @@ function AggregationConfigItemModal({
                       setLocalFormula(newFormula);
                       onUpdate({ formula: newFormula });
                     }}
-                    className="h-7 text-xs bg-blue-50 hover:bg-blue-100 border-blue-300"
+                    className="h-7 text-xs bg-primary/10 hover:bg-primary/10 border-primary/40"
                   >
                     {refAgg.label || refAgg.resultField}
                   </Button>
@@ -1115,8 +1115,8 @@ function AggregationConfigItemModal({
           )}
 
           {/* 테이블 컬럼 집계 */}
-          <div className="space-y-2 p-3 bg-green-100 dark:bg-green-900 rounded-lg">
-            <Label className="text-xs text-green-700 dark:text-green-300">테이블 컬럼 집계</Label>
+          <div className="space-y-2 p-3 bg-emerald-100 dark:bg-emerald-900 rounded-lg">
+            <Label className="text-xs text-emerald-700 dark:text-emerald-300">테이블 컬럼 집계</Label>
             <FormulaColumnAggregator
               sourceTable={sourceTable}
               allTables={allTables}
@@ -1313,7 +1313,7 @@ function ExternalTableRefSelector({
 
   if (tableRowsWithExternalSource.length === 0) {
     return (
-      <div className="p-3 bg-gray-100 dark:bg-gray-800 rounded-lg">
+      <div className="p-3 bg-muted dark:bg-foreground/90 rounded-lg">
         <p className="text-xs text-muted-foreground">
           레이아웃에 외부 데이터 소스가 설정된 테이블 행이 없습니다.
         </p>
@@ -1371,7 +1371,7 @@ function ExternalTableRefSelector({
                 "flex items-center gap-2 p-2 rounded border cursor-pointer transition-colors",
                 isSelected
                   ? "bg-amber-100 border-amber-300"
-                  : "bg-white border-gray-200 hover:bg-gray-50"
+                  : "bg-white border-border hover:bg-muted"
               )}
               onClick={() => handleToggleTable(row.id)}
             >
@@ -1379,7 +1379,7 @@ function ExternalTableRefSelector({
                 type="checkbox"
                 checked={isSelected}
                 onChange={() => {}} // onClick에서 처리
-                className="h-4 w-4 rounded border-gray-300 text-amber-600 focus:ring-amber-500"
+                className="h-4 w-4 rounded border-input text-amber-600 focus:ring-amber-500"
               />
               <div className="flex-1 min-w-0">
                 <p className="text-xs font-medium truncate">{tableTitle}</p>
@@ -1473,7 +1473,7 @@ function SyncSaveConfigSection({
   };
 
   return (
-    <div className="space-y-2 p-2 bg-orange-50 dark:bg-orange-950 rounded-lg border border-orange-200">
+    <div className="space-y-2 p-2 bg-amber-50 dark:bg-orange-950 rounded-lg border border-orange-200">
       <div className="flex items-center justify-between">
         <Label className="text-[10px] font-semibold text-orange-700 dark:text-orange-300">
           연동 저장 설정 (모달 저장 시 다른 테이블에 동기화)
@@ -1482,7 +1482,7 @@ function SyncSaveConfigSection({
           size="sm"
           variant="outline"
           onClick={addSyncSave}
-          className="h-5 text-[9px] px-1 bg-orange-100 hover:bg-orange-200 border-orange-300"
+          className="h-5 text-[9px] px-1 bg-amber-100 hover:bg-orange-200 border-orange-300"
         >
           <Plus className="h-2 w-2 mr-0.5" />
           추가
@@ -1531,7 +1531,7 @@ function SyncSaveConfigItem({
   return (
     <div className={cn(
       "p-2 rounded border space-y-2",
-      sync.enabled ? "bg-orange-100 border-orange-300" : "bg-gray-100 border-gray-300 opacity-60"
+      sync.enabled ? "bg-amber-100 border-orange-300" : "bg-muted border-input opacity-60"
     )}>
       {/* 헤더 */}
       <div className="flex items-center justify-between">
@@ -1998,11 +1998,11 @@ function LayoutSettingsModal({
   // 행 타입별 색상
   const getRowTypeColor = (type: CardContentRowConfig["type"]) => {
     switch (type) {
-      case "header": return "bg-blue-100 border-blue-300";
-      case "aggregation": return "bg-orange-100 border-orange-300";
-      case "table": return "bg-green-100 border-green-300";
+      case "header": return "bg-primary/10 border-primary/40";
+      case "aggregation": return "bg-amber-100 border-orange-300";
+      case "table": return "bg-emerald-100 border-green-300";
       case "fields": return "bg-purple-100 border-purple-300";
-      default: return "bg-gray-100 border-gray-300";
+      default: return "bg-muted border-input";
     }
   };
 
@@ -2031,15 +2031,15 @@ function LayoutSettingsModal({
             <div className="space-y-3 py-3 pr-3">
               {/* 행 추가 버튼 */}
               <div className="flex gap-2 sticky top-0 bg-background z-10 pb-2 border-b">
-                <Button size="sm" variant="outline" onClick={() => addRow("header")} className="h-8 text-xs flex-1 bg-blue-50 hover:bg-blue-100 border-blue-200">
+                <Button size="sm" variant="outline" onClick={() => addRow("header")} className="h-8 text-xs flex-1 bg-primary/10 hover:bg-primary/10 border-primary/20">
                   <Plus className="h-3 w-3 mr-1" />
                   헤더
                 </Button>
-                <Button size="sm" variant="outline" onClick={() => addRow("aggregation")} className="h-8 text-xs flex-1 bg-orange-50 hover:bg-orange-100 border-orange-200">
+                <Button size="sm" variant="outline" onClick={() => addRow("aggregation")} className="h-8 text-xs flex-1 bg-amber-50 hover:bg-amber-100 border-orange-200">
                   <Plus className="h-3 w-3 mr-1" />
                   집계
                 </Button>
-                <Button size="sm" variant="outline" onClick={() => addRow("table")} className="h-8 text-xs flex-1 bg-green-50 hover:bg-green-100 border-green-200">
+                <Button size="sm" variant="outline" onClick={() => addRow("table")} className="h-8 text-xs flex-1 bg-emerald-50 hover:bg-emerald-100 border-emerald-200">
                   <Plus className="h-3 w-3 mr-1" />
                   테이블
                 </Button>
@@ -2273,7 +2273,7 @@ function LayoutRowConfigModal({
                   </Button>
                 </div>
                 {(row.columns || []).map((col, colIndex) => (
-                  <div key={col.id} className="border rounded p-3 space-y-2 bg-gray-50">
+                  <div key={col.id} className="border rounded p-3 space-y-2 bg-muted">
                     <div className="flex items-center justify-between">
                       <span className="text-xs font-medium">컬럼 {colIndex + 1}</span>
                       <Button size="sm" variant="ghost" onClick={() => onRemoveColumn(colIndex)} className="h-6 w-6 p-0">
@@ -2387,7 +2387,7 @@ function LayoutRowConfigModal({
                   </p>
                 )}
                 {(row.aggregationFields || []).map((field, fieldIndex) => (
-                  <div key={fieldIndex} className="border rounded p-3 space-y-2 bg-gray-50">
+                  <div key={fieldIndex} className="border rounded p-3 space-y-2 bg-muted">
                     <div className="flex items-center justify-between">
                       <div className="flex items-center gap-1">
                         <Button
@@ -2519,7 +2519,7 @@ function LayoutRowConfigModal({
               </div>
 
               {/* 외부 데이터 소스 설정 */}
-              <div className="border rounded p-3 bg-blue-50 space-y-3">
+              <div className="border rounded p-3 bg-primary/10 space-y-3">
                 <div className="flex items-center justify-between">
                   <Label className="text-xs font-semibold">외부 데이터 소스</Label>
                   <Switch
@@ -2543,7 +2543,7 @@ function LayoutRowConfigModal({
                     </div>
 
                     {/* 조인 조건 설정 */}
-                    <div className="space-y-2 pt-2 border-t border-blue-200">
+                    <div className="space-y-2 pt-2 border-t border-primary/20">
                       <div className="space-y-1">
                         <Label className="text-[10px] font-semibold">조인 조건</Label>
                         <p className="text-[9px] text-muted-foreground">
@@ -2610,8 +2610,8 @@ function LayoutRowConfigModal({
                             </div>
                           </div>
 
-                          <div className="mt-1 p-1.5 bg-blue-50 rounded border border-blue-100">
-                            <p className="text-[8px] text-blue-700 font-mono">
+                          <div className="mt-1 p-1.5 bg-primary/10 rounded border border-primary/10">
+                            <p className="text-[8px] text-primary font-mono">
                               {row.tableDataSource?.sourceTable}.{condition.sourceKey} = {dataSourceTable}.{condition.referenceKey}
                             </p>
                             <p className="text-[8px] text-muted-foreground mt-0.5">
@@ -2641,7 +2641,7 @@ function LayoutRowConfigModal({
                     </div>
 
                     {/* 필터 설정 */}
-                    <div className="space-y-2 pt-2 border-t border-blue-200">
+                    <div className="space-y-2 pt-2 border-t border-primary/20">
                       <div className="flex items-center justify-between">
                         <div className="space-y-1">
                           <Label className="text-[10px] font-semibold">데이터 필터</Label>
@@ -2763,7 +2763,7 @@ function LayoutRowConfigModal({
               </div>
 
               {/* CRUD 설정 */}
-              <div className="space-y-2 p-3 bg-green-100/50 dark:bg-green-900/20 rounded border border-green-200 dark:border-green-800">
+              <div className="space-y-2 p-3 bg-emerald-100/50 dark:bg-emerald-900/20 rounded border border-emerald-200 dark:border-emerald-800">
                 <Label className="text-xs font-semibold">CRUD 설정</Label>
                 <div className="flex flex-wrap gap-4">
                   <div className="flex items-center gap-2">
@@ -2804,7 +2804,7 @@ function LayoutRowConfigModal({
                   </div>
                 </div>
                 {row.tableCrud?.allowDelete && (
-                  <div className="flex items-center gap-2 pl-2 pt-1 border-t border-green-200">
+                  <div className="flex items-center gap-2 pl-2 pt-1 border-t border-emerald-200">
                     <Switch
                       checked={row.tableCrud?.deleteConfirm?.enabled !== false}
                       onCheckedChange={(checked) =>
@@ -2844,7 +2844,7 @@ function LayoutRowConfigModal({
                   </Button>
                 </div>
                 {(row.tableColumns || []).map((col, colIndex) => (
-                  <div key={col.id} className="border rounded p-3 space-y-2 bg-gray-50">
+                  <div key={col.id} className="border rounded p-3 space-y-2 bg-muted">
                     <div className="flex items-center justify-between">
                       <div className="flex items-center gap-1">
                         <Button
@@ -3181,7 +3181,7 @@ function AggregationSaveConfigSection({
       </div>
 
       {saveConfig.enabled && (
-        <div className="space-y-2 p-2 bg-blue-50/50 dark:bg-blue-900/20 rounded border border-blue-200 dark:border-blue-800">
+        <div className="space-y-2 p-2 bg-primary/10/50 dark:bg-primary/20/20 rounded border border-primary/20 dark:border-primary/30">
           {/* 자동 저장 옵션 */}
           <div className="flex items-center justify-between">
             <div className="space-y-0.5">
@@ -3277,7 +3277,7 @@ function AggregationSaveConfigSection({
                   </Badge>
                 )}
               </div>
-              <div className="font-mono text-blue-600 dark:text-blue-400 break-all">
+              <div className="font-mono text-primary dark:text-primary/80 break-all">
                 {saveConfig.targetTable}.{saveConfig.targetColumn}
               </div>
               {saveConfig.joinKey?.sourceField && saveConfig.joinKey?.targetField && (
@@ -4015,7 +4015,7 @@ export function RepeatScreenModalConfigPanel({ config, onChange }: RepeatScreenM
                               agg.hidden ? "opacity-50" : "",
                               agg.sourceType === "formula" 
                                 ? "bg-purple-50 border border-purple-200" 
-                                : "bg-blue-50 border border-blue-200"
+                                : "bg-primary/10 border border-primary/20"
                             )}
                           >
                             <span className="truncate flex-1">
@@ -4061,11 +4061,11 @@ export function RepeatScreenModalConfigPanel({ config, onChange }: RepeatScreenM
                   {(localConfig.contentRows || []).map((row, index) => {
                     const getRowTypeColor = (type: CardContentRowConfig["type"]) => {
                       switch (type) {
-                        case "header": return "bg-blue-50 border-blue-200";
-                        case "aggregation": return "bg-orange-50 border-orange-200";
-                        case "table": return "bg-green-50 border-green-200";
+                        case "header": return "bg-primary/10 border-primary/20";
+                        case "aggregation": return "bg-amber-50 border-orange-200";
+                        case "table": return "bg-emerald-50 border-emerald-200";
                         case "fields": return "bg-purple-50 border-purple-200";
-                        default: return "bg-gray-50 border-gray-200";
+                        default: return "bg-muted border-border";
                       }
                     };
                     const getRowTypeLabel = (type: CardContentRowConfig["type"]) => {
@@ -4211,9 +4211,9 @@ function ContentRowConfigSection({
   // 행 타입별 색상
   const typeColors = {
     header: "bg-purple-50 dark:bg-purple-950 border-purple-200 dark:border-purple-800",
-    aggregation: "bg-orange-50 dark:bg-orange-950 border-orange-200 dark:border-orange-800",
-    table: "bg-blue-50 dark:bg-blue-950 border-blue-200 dark:border-blue-800",
-    fields: "bg-green-50 dark:bg-green-950 border-green-200 dark:border-green-800",
+    aggregation: "bg-amber-50 dark:bg-orange-950 border-orange-200 dark:border-orange-800",
+    table: "bg-primary/10 dark:bg-primary/15 border-primary/20 dark:border-primary/30",
+    fields: "bg-emerald-50 dark:bg-emerald-950 border-emerald-200 dark:border-emerald-800",
   };
 
   const typeLabels = {
@@ -4225,9 +4225,9 @@ function ContentRowConfigSection({
 
   const typeBadgeColors = {
     header: "bg-purple-100 text-purple-700",
-    aggregation: "bg-orange-100 text-orange-700",
-    table: "bg-blue-100 text-blue-700",
-    fields: "bg-green-100 text-green-700",
+    aggregation: "bg-amber-100 text-orange-700",
+    table: "bg-primary/10 text-primary",
+    fields: "bg-emerald-100 text-emerald-700",
   };
 
   return (
@@ -4407,7 +4407,7 @@ function ContentRowConfigSection({
             </div>
 
             {aggregations.length === 0 && (
-              <p className="text-[9px] text-orange-600 bg-orange-100 dark:bg-orange-900 p-2 rounded">
+              <p className="text-[9px] text-amber-600 bg-amber-100 dark:bg-orange-900 p-2 rounded">
                 먼저 그룹 탭에서 집계 설정을 추가하세요
               </p>
             )}
@@ -4551,7 +4551,7 @@ function ContentRowConfigSection({
           </div>
 
           {/* 외부 테이블 데이터 소스 설정 */}
-          <div className="space-y-2 p-2 bg-blue-100/50 dark:bg-blue-900/20 rounded border border-blue-200 dark:border-blue-800">
+          <div className="space-y-2 p-2 bg-primary/10/50 dark:bg-primary/20/20 rounded border border-primary/20 dark:border-primary/30">
             <div className="flex items-center gap-2">
               <Switch
                 checked={row.tableDataSource?.enabled || false}
@@ -4990,7 +4990,7 @@ function ContentRowConfigSection({
           </div>
 
           {/* CRUD 설정 */}
-          <div className="space-y-2 p-2 bg-green-100/50 dark:bg-green-900/20 rounded border border-green-200 dark:border-green-800">
+          <div className="space-y-2 p-2 bg-emerald-100/50 dark:bg-emerald-900/20 rounded border border-emerald-200 dark:border-emerald-800">
             <Label className="text-[9px] font-semibold">CRUD 설정</Label>
             <div className="flex flex-wrap gap-3">
               <div className="flex items-center gap-1">
@@ -5062,7 +5062,7 @@ function ContentRowConfigSection({
           )}
 
           {/* 테이블 컬럼 목록 */}
-          <div className="space-y-2 pl-2 border-l-2 border-blue-300">
+          <div className="space-y-2 pl-2 border-l-2 border-primary/40">
             <div className="flex items-center justify-between">
               <Label className="text-[9px] font-semibold">테이블 컬럼 ({(row.tableColumns || []).length}개)</Label>
               <Button size="sm" variant="outline" onClick={onAddTableColumn} className="h-5 text-[9px] px-1">
@@ -5367,8 +5367,8 @@ function ColumnConfigSection({
 
       {/* 데이터 소스 설정 */}
       {col.type !== "aggregation" && (
-        <div className="space-y-1.5 p-1.5 bg-blue-50 dark:bg-blue-950 rounded border border-blue-200 dark:border-blue-800">
-          <Label className="text-[9px] font-semibold text-blue-600">소스</Label>
+        <div className="space-y-1.5 p-1.5 bg-primary/10 dark:bg-primary/15 rounded border border-primary/20 dark:border-primary/30">
+          <Label className="text-[9px] font-semibold text-primary">소스</Label>
           <Select
             value={col.sourceConfig?.type || "manual"}
             onValueChange={(value) =>
@@ -5451,8 +5451,8 @@ function ColumnConfigSection({
       )}
 
       {/* 데이터 타겟 설정 */}
-      <div className="space-y-1.5 p-1.5 bg-green-50 dark:bg-green-950 rounded border border-green-200 dark:border-green-800">
-        <Label className="text-[9px] font-semibold text-green-600">저장</Label>
+      <div className="space-y-1.5 p-1.5 bg-emerald-50 dark:bg-emerald-950 rounded border border-emerald-200 dark:border-emerald-800">
+        <Label className="text-[9px] font-semibold text-emerald-600">저장</Label>
 
         <Select
           value={col.targetConfig?.targetTable || ""}
@@ -5696,8 +5696,8 @@ function TableColumnConfigSection({
 
       {/* 편집 가능할 때 저장 설정 */}
       {col.editable && (
-        <div className="space-y-1.5 p-1.5 bg-green-50 dark:bg-green-950 rounded border border-green-200 dark:border-green-800">
-          <Label className="text-[9px] font-semibold text-green-600">저장</Label>
+        <div className="space-y-1.5 p-1.5 bg-emerald-50 dark:bg-emerald-950 rounded border border-emerald-200 dark:border-emerald-800">
+          <Label className="text-[9px] font-semibold text-emerald-600">저장</Label>
 
           <Select
             value={col.targetConfig?.targetTable || ""}
diff --git a/frontend/lib/registry/components/repeater-field-group/SubDataLookupPanel.tsx b/frontend/lib/registry/components/repeater-field-group/SubDataLookupPanel.tsx
index 51be5a64..2c39ab3d 100644
--- a/frontend/lib/registry/components/repeater-field-group/SubDataLookupPanel.tsx
+++ b/frontend/lib/registry/components/repeater-field-group/SubDataLookupPanel.tsx
@@ -139,8 +139,8 @@ export const SubDataLookupPanel: React.FC<SubDataLookupPanelProps> = ({
           {/* 선택 요약 표시 */}
           {selectedItem && summaryText && (
             <div className="flex items-center gap-1 text-xs">
-              <Check className="h-3 w-3 text-green-600" />
-              <span className="text-green-700">{summaryText}</span>
+              <Check className="h-3 w-3 text-emerald-600" />
+              <span className="text-emerald-700">{summaryText}</span>
             </div>
           )}
         </div>
@@ -148,12 +148,12 @@ export const SubDataLookupPanel: React.FC<SubDataLookupPanelProps> = ({
         {/* 확장된 패널 */}
         {isExpanded && (
           <div
-            className="mt-2 rounded-md border bg-gray-50"
+            className="mt-2 rounded-md border bg-muted"
             style={{ maxHeight: config.ui?.maxHeight || "150px", overflowY: "auto" }}
           >
             {/* 에러 상태 */}
             {error && (
-              <div className="flex items-center gap-2 p-3 text-xs text-red-600">
+              <div className="flex items-center gap-2 p-3 text-xs text-destructive">
                 <AlertCircle className="h-4 w-4" />
                 <span>{error}</span>
                 <Button type="button" variant="ghost" size="sm" onClick={refetch} className="ml-auto h-6 text-xs">
@@ -164,7 +164,7 @@ export const SubDataLookupPanel: React.FC<SubDataLookupPanelProps> = ({
 
             {/* 로딩 상태 */}
             {isLoading && (
-              <div className="flex items-center justify-center gap-2 p-4 text-xs text-gray-500">
+              <div className="flex items-center justify-center gap-2 p-4 text-xs text-muted-foreground">
                 <Loader2 className="h-4 w-4 animate-spin" />
                 <span>조회 중...</span>
               </div>
@@ -172,7 +172,7 @@ export const SubDataLookupPanel: React.FC<SubDataLookupPanelProps> = ({
 
             {/* 데이터 없음 */}
             {!isLoading && !error && data.length === 0 && (
-              <div className="p-4 text-center text-xs text-gray-500">
+              <div className="p-4 text-center text-xs text-muted-foreground">
                 {config.ui?.emptyMessage || "재고 데이터가 없습니다"}
               </div>
             )}
@@ -180,7 +180,7 @@ export const SubDataLookupPanel: React.FC<SubDataLookupPanelProps> = ({
             {/* 데이터 테이블 */}
             {!isLoading && !error && data.length > 0 && (
               <table className="w-full text-xs">
-                <thead className="sticky top-0 bg-gray-100">
+                <thead className="sticky top-0 bg-muted">
                   <tr>
                     <th className="w-8 p-2 text-center">선택</th>
                     {displayColumns.map((col) => (
@@ -199,7 +199,7 @@ export const SubDataLookupPanel: React.FC<SubDataLookupPanelProps> = ({
                         onClick={() => handleSelect(item)}
                         className={cn(
                           "cursor-pointer border-t transition-colors",
-                          isSelected ? "bg-blue-50" : "hover:bg-gray-100",
+                          isSelected ? "bg-primary/10" : "hover:bg-muted",
                           disabled && "cursor-not-allowed opacity-50",
                         )}
                       >
@@ -207,7 +207,7 @@ export const SubDataLookupPanel: React.FC<SubDataLookupPanelProps> = ({
                           <div
                             className={cn(
                               "mx-auto flex h-4 w-4 items-center justify-center rounded-full border",
-                              isSelected ? "border-blue-600 bg-blue-600" : "border-gray-300",
+                              isSelected ? "border-primary bg-primary" : "border-input",
                             )}
                           >
                             {isSelected && <Check className="h-3 w-3 text-white" />}
@@ -267,8 +267,8 @@ export const SubDataLookupPanel: React.FC<SubDataLookupPanelProps> = ({
           {/* 선택 요약 표시 */}
           {selectedItem && summaryText && (
             <div className="flex items-center gap-1 text-xs">
-              <Check className="h-3 w-3 text-green-600" />
-              <span className="text-green-700">{summaryText}</span>
+              <Check className="h-3 w-3 text-emerald-600" />
+              <span className="text-emerald-700">{summaryText}</span>
             </div>
           )}
         </div>
@@ -296,7 +296,7 @@ export const SubDataLookupPanel: React.FC<SubDataLookupPanelProps> = ({
             >
               {/* 에러 상태 */}
               {error && (
-                <div className="flex items-center gap-2 p-3 text-xs text-red-600">
+                <div className="flex items-center gap-2 p-3 text-xs text-destructive">
                   <AlertCircle className="h-4 w-4" />
                   <span>{error}</span>
                   <Button type="button" variant="ghost" size="sm" onClick={refetch} className="ml-auto h-6 text-xs">
@@ -307,7 +307,7 @@ export const SubDataLookupPanel: React.FC<SubDataLookupPanelProps> = ({
 
               {/* 로딩 상태 */}
               {isLoading && (
-                <div className="flex items-center justify-center gap-2 p-8 text-sm text-gray-500">
+                <div className="flex items-center justify-center gap-2 p-8 text-sm text-muted-foreground">
                   <Loader2 className="h-5 w-5 animate-spin" />
                   <span>재고 조회 중...</span>
                 </div>
@@ -315,7 +315,7 @@ export const SubDataLookupPanel: React.FC<SubDataLookupPanelProps> = ({
 
               {/* 데이터 없음 */}
               {!isLoading && !error && data.length === 0 && (
-                <div className="p-8 text-center text-sm text-gray-500">
+                <div className="p-8 text-center text-sm text-muted-foreground">
                   {config.ui?.emptyMessage || "해당 품목의 재고가 없습니다"}
                 </div>
               )}
@@ -323,7 +323,7 @@ export const SubDataLookupPanel: React.FC<SubDataLookupPanelProps> = ({
               {/* 데이터 테이블 */}
               {!isLoading && !error && data.length > 0 && (
                 <table className="w-full text-sm">
-                  <thead className="sticky top-0 bg-gray-100">
+                  <thead className="sticky top-0 bg-muted">
                     <tr>
                       <th className="w-12 p-3 text-center">선택</th>
                       {displayColumns.map((col) => (
@@ -342,7 +342,7 @@ export const SubDataLookupPanel: React.FC<SubDataLookupPanelProps> = ({
                           onClick={() => handleSelect(item)}
                           className={cn(
                             "cursor-pointer border-t transition-colors",
-                            isSelected ? "bg-blue-50" : "hover:bg-gray-50",
+                            isSelected ? "bg-primary/10" : "hover:bg-muted",
                             disabled && "cursor-not-allowed opacity-50",
                           )}
                         >
@@ -350,7 +350,7 @@ export const SubDataLookupPanel: React.FC<SubDataLookupPanelProps> = ({
                             <div
                               className={cn(
                                 "mx-auto flex h-5 w-5 items-center justify-center rounded-full border-2",
-                                isSelected ? "border-blue-600 bg-blue-600" : "border-gray-300",
+                                isSelected ? "border-primary bg-primary" : "border-input",
                               )}
                             >
                               {isSelected && <Check className="h-3 w-3 text-white" />}
@@ -422,8 +422,8 @@ export const SubDataLookupPanel: React.FC<SubDataLookupPanelProps> = ({
         </Button>
         {selectedItem && summaryText && (
           <div className="flex items-center gap-1 text-xs">
-            <Check className="h-3 w-3 text-green-600" />
-            <span className="text-green-700">{summaryText}</span>
+            <Check className="h-3 w-3 text-emerald-600" />
+            <span className="text-emerald-700">{summaryText}</span>
           </div>
         )}
       </div>
diff --git a/frontend/lib/registry/components/screen-split-panel/ScreenSplitPanelConfigPanel.tsx b/frontend/lib/registry/components/screen-split-panel/ScreenSplitPanelConfigPanel.tsx
index 0c167ab5..819b7376 100644
--- a/frontend/lib/registry/components/screen-split-panel/ScreenSplitPanelConfigPanel.tsx
+++ b/frontend/lib/registry/components/screen-split-panel/ScreenSplitPanelConfigPanel.tsx
@@ -473,7 +473,7 @@ export function ScreenSplitPanelConfigPanel({ config = {}, onChange }: ScreenSpl
                                   />
                                   <div className="flex flex-col">
                                     <span className="font-medium">{screen.screenName}</span>
-                                    <span className="text-[10px] text-gray-500">{screen.screenCode}</span>
+                                    <span className="text-[10px] text-muted-foreground">{screen.screenCode}</span>
                                   </div>
                                 </CommandItem>
                               ))}
@@ -534,7 +534,7 @@ export function ScreenSplitPanelConfigPanel({ config = {}, onChange }: ScreenSpl
                                   />
                                   <div className="flex flex-col">
                                     <span className="font-medium">{screen.screenName}</span>
-                                    <span className="text-[10px] text-gray-500">{screen.screenCode}</span>
+                                    <span className="text-[10px] text-muted-foreground">{screen.screenCode}</span>
                                   </div>
                                 </CommandItem>
                               ))}
@@ -591,33 +591,33 @@ export function ScreenSplitPanelConfigPanel({ config = {}, onChange }: ScreenSpl
               ) : (
                 <>
                   {/* 연결 필터 설명 */}
-                  <div className="rounded-lg border border-blue-200 bg-blue-50 p-3 dark:border-blue-900 dark:bg-blue-950">
-                    <p className="text-xs text-blue-800 dark:text-blue-200">
+                  <div className="rounded-lg border border-primary/20 bg-primary/10 p-3 dark:border-primary/20 dark:bg-primary/15">
+                    <p className="text-xs text-primary dark:text-primary/70">
                       예: 좌측에서 설비를 선택하면 → 우측 점검항목이 해당 설비의 항목만 표시됩니다.
                       <br />
-                      좌측 <code className="bg-blue-100 dark:bg-blue-900 px-1 rounded">equipment_code</code> → 
-                      우측 <code className="bg-blue-100 dark:bg-blue-900 px-1 rounded">equipment_code</code>
+                      좌측 <code className="bg-primary/10 dark:bg-primary/20 px-1 rounded">equipment_code</code> → 
+                      우측 <code className="bg-primary/10 dark:bg-primary/20 px-1 rounded">equipment_code</code>
                     </p>
                   </div>
 
                   {/* 필터 목록 */}
                   <div className="space-y-3">
                     {(localConfig.linkedFilters || []).map((filter: LinkedFilter, index: number) => (
-                      <div key={index} className="rounded-lg border bg-gray-50 p-3 dark:bg-gray-900">
+                      <div key={index} className="rounded-lg border bg-muted p-3 dark:bg-foreground">
                         <div className="mb-2 flex items-center justify-between">
-                          <span className="text-xs font-medium text-gray-700">필터 #{index + 1}</span>
+                          <span className="text-xs font-medium text-foreground">필터 #{index + 1}</span>
                           <Button
                             variant="ghost"
                             size="sm"
                             onClick={() => removeLinkedFilter(index)}
-                            className="h-6 w-6 p-0 text-red-500 hover:bg-red-50 hover:text-red-600"
+                            className="h-6 w-6 p-0 text-destructive hover:bg-destructive/10 hover:text-destructive"
                           >
                             <Trash2 className="h-3 w-3" />
                           </Button>
                         </div>
                         <div className="space-y-2">
                           <div>
-                            <Label className="text-xs text-gray-600">소스 컬럼 (좌측 화면)</Label>
+                            <Label className="text-xs text-muted-foreground">소스 컬럼 (좌측 화면)</Label>
                             <Select
                               value={filter.sourceColumn}
                               onValueChange={(value) => updateLinkedFilter(index, "sourceColumn", value)}
@@ -635,10 +635,10 @@ export function ScreenSplitPanelConfigPanel({ config = {}, onChange }: ScreenSpl
                             </Select>
                           </div>
                           <div className="flex justify-center">
-                            <ArrowRight className="h-4 w-4 rotate-90 text-gray-400" />
+                            <ArrowRight className="h-4 w-4 rotate-90 text-muted-foreground/70" />
                           </div>
                           <div>
-                            <Label className="text-xs text-gray-600">타겟 컬럼 (우측 화면 필터)</Label>
+                            <Label className="text-xs text-muted-foreground">타겟 컬럼 (우측 화면 필터)</Label>
                             <Select
                               value={filter.targetColumn}
                               onValueChange={(value) => updateLinkedFilter(index, "targetColumn", value)}
@@ -649,7 +649,7 @@ export function ScreenSplitPanelConfigPanel({ config = {}, onChange }: ScreenSpl
                               <SelectContent>
                                 {rightScreenTables.map((table) => (
                                   <React.Fragment key={table.tableName}>
-                                    <div className="px-2 py-1.5 text-xs font-semibold text-gray-500 bg-gray-100 dark:bg-gray-800">
+                                    <div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground bg-muted dark:bg-foreground/90">
                                       {table.screenName} ({table.tableName})
                                     </div>
                                     {table.columns.map((col) => (
@@ -726,13 +726,13 @@ export function ScreenSplitPanelConfigPanel({ config = {}, onChange }: ScreenSpl
               ) : (
                 <>
                   {/* 우측 화면 테이블 목록 표시 */}
-                  <div className="rounded-lg border border-green-200 bg-green-50 p-3 dark:border-green-900 dark:bg-green-950">
-                    <p className="text-xs font-medium text-green-800 dark:text-green-200 mb-1">
+                  <div className="rounded-lg border border-emerald-200 bg-emerald-50 p-3 dark:border-emerald-900 dark:bg-emerald-950">
+                    <p className="text-xs font-medium text-emerald-800 dark:text-emerald-200 mb-1">
                       우측 화면에서 감지된 테이블 ({rightScreenTables.length}개):
                     </p>
-                    <ul className="text-xs text-green-700 dark:text-green-300 space-y-0.5">
+                    <ul className="text-xs text-emerald-700 dark:text-emerald-300 space-y-0.5">
                       {rightScreenTables.map((table) => (
-                        <li key={table.tableName}>• {table.screenName}: <code className="bg-green-100 dark:bg-green-900 px-1 rounded">{table.tableName}</code></li>
+                        <li key={table.tableName}>• {table.screenName}: <code className="bg-emerald-100 dark:bg-emerald-900 px-1 rounded">{table.tableName}</code></li>
                       ))}
                     </ul>
                   </div>
@@ -740,21 +740,21 @@ export function ScreenSplitPanelConfigPanel({ config = {}, onChange }: ScreenSpl
                   {/* 매핑 목록 */}
                   <div className="space-y-3">
                     {(localConfig.parentDataMapping || []).map((mapping: ParentDataMapping, index: number) => (
-                      <div key={index} className="rounded-lg border bg-gray-50 p-3 dark:bg-gray-900">
+                      <div key={index} className="rounded-lg border bg-muted p-3 dark:bg-foreground">
                         <div className="mb-2 flex items-center justify-between">
-                          <span className="text-xs font-medium text-gray-700">매핑 #{index + 1}</span>
+                          <span className="text-xs font-medium text-foreground">매핑 #{index + 1}</span>
                           <Button
                             variant="ghost"
                             size="sm"
                             onClick={() => removeParentDataMapping(index)}
-                            className="h-6 w-6 p-0 text-red-500 hover:bg-red-50 hover:text-red-600"
+                            className="h-6 w-6 p-0 text-destructive hover:bg-destructive/10 hover:text-destructive"
                           >
                             <Trash2 className="h-3 w-3" />
                           </Button>
                         </div>
                         <div className="space-y-2">
                           <div>
-                            <Label className="text-xs text-gray-600">소스 컬럼 (좌측 화면)</Label>
+                            <Label className="text-xs text-muted-foreground">소스 컬럼 (좌측 화면)</Label>
                             <Select
                               value={mapping.sourceColumn}
                               onValueChange={(value) => updateParentDataMapping(index, "sourceColumn", value)}
@@ -772,10 +772,10 @@ export function ScreenSplitPanelConfigPanel({ config = {}, onChange }: ScreenSpl
                             </Select>
                           </div>
                           <div className="flex justify-center">
-                            <ArrowRight className="h-4 w-4 rotate-90 text-gray-400" />
+                            <ArrowRight className="h-4 w-4 rotate-90 text-muted-foreground/70" />
                           </div>
                           <div>
-                            <Label className="text-xs text-gray-600">타겟 컬럼 (우측 화면)</Label>
+                            <Label className="text-xs text-muted-foreground">타겟 컬럼 (우측 화면)</Label>
                             <Select
                               value={mapping.targetColumn}
                               onValueChange={(value) => updateParentDataMapping(index, "targetColumn", value)}
@@ -786,7 +786,7 @@ export function ScreenSplitPanelConfigPanel({ config = {}, onChange }: ScreenSpl
                               <SelectContent>
                                 {rightScreenTables.map((table) => (
                                   <React.Fragment key={table.tableName}>
-                                    <div className="px-2 py-1.5 text-xs font-semibold text-gray-500 bg-gray-100 dark:bg-gray-800">
+                                    <div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground bg-muted dark:bg-foreground/90">
                                       {table.screenName} ({table.tableName})
                                     </div>
                                     {table.columns.map((col) => (
@@ -820,8 +820,8 @@ export function ScreenSplitPanelConfigPanel({ config = {}, onChange }: ScreenSpl
                   </Button>
 
                   {/* 자동 매핑 안내 */}
-                  <div className="rounded-lg border border-green-200 bg-green-50 p-3 dark:border-green-900 dark:bg-green-950">
-                    <p className="text-xs text-green-800 dark:text-green-200">
+                  <div className="rounded-lg border border-emerald-200 bg-emerald-50 p-3 dark:border-emerald-900 dark:bg-emerald-950">
+                    <p className="text-xs text-emerald-800 dark:text-emerald-200">
                       <strong>자동 매핑:</strong> 좌측에서 선택한 데이터의 모든 컬럼이 우측 화면에 자동 전달됩니다.
                       <br />
                       동일한 컬럼명(예: equipment_code)이 있으면 별도 설정 없이 자동으로 매핑됩니다.
@@ -829,13 +829,13 @@ export function ScreenSplitPanelConfigPanel({ config = {}, onChange }: ScreenSpl
                   </div>
 
                   {/* 수동 매핑 안내 */}
-                  <div className="rounded-lg border border-blue-200 bg-blue-50 p-3 dark:border-blue-900 dark:bg-blue-950">
-                    <p className="text-xs text-blue-800 dark:text-blue-200">
+                  <div className="rounded-lg border border-primary/20 bg-primary/10 p-3 dark:border-primary/20 dark:bg-primary/15">
+                    <p className="text-xs text-primary dark:text-primary/70">
                       <strong>수동 매핑 (선택사항):</strong>
                       <br />
                       컬럼명이 다른 경우에만 위에서 매핑을 추가하세요.
                       <br />
-                      예: 좌측 <code className="bg-blue-100 px-1 rounded">user_id</code> → 우측 <code className="bg-blue-100 px-1 rounded">created_by</code>
+                      예: 좌측 <code className="bg-primary/10 px-1 rounded">user_id</code> → 우측 <code className="bg-primary/10 px-1 rounded">created_by</code>
                     </p>
                   </div>
                 </>
diff --git a/frontend/lib/registry/components/select-basic/SelectBasicComponent.tsx b/frontend/lib/registry/components/select-basic/SelectBasicComponent.tsx
index 9cf9706f..4fe6b1f5 100644
--- a/frontend/lib/registry/components/select-basic/SelectBasicComponent.tsx
+++ b/frontend/lib/registry/components/select-basic/SelectBasicComponent.tsx
@@ -553,28 +553,28 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
             onFocus={() => setIsOpen(true)}
             placeholder="코드 또는 코드명 입력..."
             className={cn(
-              "h-10 w-full rounded-lg border border-gray-300 bg-white px-3 py-2 transition-all outline-none",
+              "h-10 w-full rounded-lg border border-input bg-white px-3 py-2 transition-all outline-none",
               !isFieldDisabled && "hover:border-orange-400 focus:border-orange-500 focus:ring-2 focus:ring-orange-200",
               isSelected && "ring-2 ring-orange-500",
-              isFieldDisabled && "cursor-not-allowed !bg-gray-100 opacity-60",
+              isFieldDisabled && "cursor-not-allowed !bg-muted opacity-60",
             )}
             readOnly={isFieldDisabled}
             disabled={isFieldDisabled}
           />
           {isOpen && !isFieldDisabled && filteredOptions.length > 0 && (
-            <div className="absolute z-[99999] mt-1 max-h-60 w-full overflow-auto rounded-md border border-gray-300 bg-white shadow-lg">
+            <div className="absolute z-[99999] mt-1 max-h-60 w-full overflow-auto rounded-md border border-input bg-white shadow-lg">
               {filteredOptions.map((option, index) => (
                 <div
                   key={`${option.value}-${index}`}
-                  className="cursor-pointer bg-white px-3 py-2 hover:bg-gray-100"
+                  className="cursor-pointer bg-white px-3 py-2 hover:bg-muted"
                   onClick={() => {
                     setSearchQuery("");
                     handleOptionSelect(option.value, option.label);
                   }}
                 >
                   <div className="flex items-center justify-between">
-                    <span className="text-sm font-medium text-gray-900">{option.label}</span>
-                    <span className="text-xs text-gray-500">{option.value}</span>
+                    <span className="text-sm font-medium text-foreground">{option.label}</span>
+                    <span className="text-xs text-muted-foreground">{option.value}</span>
                   </div>
                 </div>
               ))}
@@ -590,16 +590,16 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
         <div className="w-full">
           <div
             className={cn(
-              "flex h-10 w-full items-center justify-between rounded-lg border border-gray-300 bg-white px-3 py-2",
+              "flex h-10 w-full items-center justify-between rounded-lg border border-input bg-white px-3 py-2",
               !isFieldDisabled && "cursor-pointer hover:border-orange-400",
               isSelected && "ring-2 ring-orange-500",
               isOpen && "border-orange-500",
-              isFieldDisabled && "cursor-not-allowed !bg-gray-100 opacity-60",
+              isFieldDisabled && "cursor-not-allowed !bg-muted opacity-60",
             )}
             onClick={handleToggle}
             style={{ pointerEvents: isFieldDisabled ? "none" : "auto" }}
           >
-            <span className={selectedLabel ? "text-gray-900" : "text-gray-500"}>{selectedLabel || placeholder}</span>
+            <span className={selectedLabel ? "text-foreground" : "text-muted-foreground"}>{selectedLabel || placeholder}</span>
             <svg
               className={`h-4 w-4 transition-transform ${isOpen ? "rotate-180" : ""}`}
               fill="none"
@@ -610,21 +610,21 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
             </svg>
           </div>
           {isOpen && !isFieldDisabled && (
-            <div className="absolute z-[99999] mt-1 max-h-60 w-full overflow-auto rounded-md border border-gray-300 bg-white shadow-lg">
+            <div className="absolute z-[99999] mt-1 max-h-60 w-full overflow-auto rounded-md border border-input bg-white shadow-lg">
               {isLoadingCodes ? (
-                <div className="bg-white px-3 py-2 text-gray-900">로딩 중...</div>
+                <div className="bg-white px-3 py-2 text-foreground">로딩 중...</div>
               ) : allOptions.length > 0 ? (
                 allOptions.map((option, index) => (
                   <div
                     key={`${option.value}-${index}`}
-                    className="cursor-pointer bg-white px-3 py-2 text-gray-900 hover:bg-gray-100"
+                    className="cursor-pointer bg-white px-3 py-2 text-foreground hover:bg-muted"
                     onClick={() => handleOptionSelect(option.value, option.label)}
                   >
                     {option.label}
                   </div>
                 ))
               ) : (
-                <div className="bg-white px-3 py-2 text-gray-900">옵션이 없습니다</div>
+                <div className="bg-white px-3 py-2 text-foreground">옵션이 없습니다</div>
               )}
             </div>
           )}
@@ -638,16 +638,16 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
         <div className="w-full">
           <div
             className={cn(
-              "box-border flex h-full w-full flex-wrap gap-2 rounded-lg border border-gray-300 bg-white px-3 py-2",
+              "box-border flex h-full w-full flex-wrap gap-2 rounded-lg border border-input bg-white px-3 py-2",
               !isFieldDisabled && "hover:border-orange-400",
               isSelected && "ring-2 ring-orange-500",
-              isFieldDisabled && "cursor-not-allowed !bg-gray-100 opacity-60",
+              isFieldDisabled && "cursor-not-allowed !bg-muted opacity-60",
             )}
           >
             {selectedValues.map((val, idx) => {
               const opt = allOptions.find((o) => o.value === val);
               return (
-                <span key={idx} className="flex items-center gap-1 rounded bg-blue-100 px-2 py-1 text-sm text-blue-800">
+                <span key={idx} className="flex items-center gap-1 rounded bg-primary/10 px-2 py-1 text-sm text-primary">
                   {opt?.label || val}
                   <button
                     type="button"
@@ -658,7 +658,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
                         onFormDataChange(component.columnName, newVals.join(","));
                       }
                     }}
-                    className="ml-1 text-blue-600 hover:text-blue-800"
+                    className="ml-1 text-primary hover:text-primary"
                   >
                     ×
                   </button>
@@ -699,20 +699,20 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
             onFocus={() => !isFieldDisabled && setIsOpen(true)}
             placeholder={placeholder}
             className={cn(
-              "h-10 w-full rounded-lg border border-gray-300 bg-white px-3 py-2 transition-all outline-none",
+              "h-10 w-full rounded-lg border border-input bg-white px-3 py-2 transition-all outline-none",
               !isFieldDisabled && "hover:border-orange-400 focus:border-orange-500 focus:ring-2 focus:ring-orange-200",
               isSelected && "ring-2 ring-orange-500",
-              isFieldDisabled && "cursor-not-allowed !bg-gray-100 opacity-60",
+              isFieldDisabled && "cursor-not-allowed !bg-muted opacity-60",
             )}
             readOnly={isFieldDisabled}
             disabled={isFieldDisabled}
           />
           {isOpen && !isFieldDisabled && filteredOptions.length > 0 && (
-            <div className="absolute z-[99999] mt-1 max-h-60 w-full overflow-auto rounded-md border border-gray-300 bg-white shadow-lg">
+            <div className="absolute z-[99999] mt-1 max-h-60 w-full overflow-auto rounded-md border border-input bg-white shadow-lg">
               {filteredOptions.map((option, index) => (
                 <div
                   key={`${option.value}-${index}`}
-                  className="cursor-pointer bg-white px-3 py-2 text-gray-900 hover:bg-gray-100"
+                  className="cursor-pointer bg-white px-3 py-2 text-foreground hover:bg-muted"
                   onClick={() => {
                     setSearchQuery(option.label);
                     setSelectedValue(option.value);
@@ -738,16 +738,16 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
         <div className="w-full">
           <div
             className={cn(
-              "flex h-10 w-full items-center justify-between rounded-lg border border-gray-300 bg-white px-3 py-2",
+              "flex h-10 w-full items-center justify-between rounded-lg border border-input bg-white px-3 py-2",
               !isFieldDisabled && "cursor-pointer hover:border-orange-400",
               isSelected && "ring-2 ring-orange-500",
               isOpen && "border-orange-500",
-              isFieldDisabled && "cursor-not-allowed !bg-gray-100 opacity-60",
+              isFieldDisabled && "cursor-not-allowed !bg-muted opacity-60",
             )}
             onClick={handleToggle}
             style={{ pointerEvents: isFieldDisabled ? "none" : "auto" }}
           >
-            <span className={selectedLabel ? "text-gray-900" : "text-gray-500"}>{selectedLabel || placeholder}</span>
+            <span className={selectedLabel ? "text-foreground" : "text-muted-foreground"}>{selectedLabel || placeholder}</span>
             <svg
               className={`h-4 w-4 transition-transform ${isOpen ? "rotate-180" : ""}`}
               fill="none"
@@ -758,13 +758,13 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
             </svg>
           </div>
           {isOpen && !isFieldDisabled && (
-            <div className="absolute z-[99999] mt-1 w-full rounded-md border border-gray-300 bg-white shadow-lg">
+            <div className="absolute z-[99999] mt-1 w-full rounded-md border border-input bg-white shadow-lg">
               <input
                 type="text"
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
                 placeholder="검색..."
-                className="w-full border-b border-gray-300 px-3 py-2 outline-none"
+                className="w-full border-b border-input px-3 py-2 outline-none"
               />
               <div className="max-h-60 overflow-auto">
                 {allOptions
@@ -776,7 +776,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
                   .map((option, index) => (
                     <div
                       key={`${option.value}-${index}`}
-                      className="cursor-pointer bg-white px-3 py-2 text-gray-900 hover:bg-gray-100"
+                      className="cursor-pointer bg-white px-3 py-2 text-foreground hover:bg-muted"
                       onClick={() => handleOptionSelect(option.value, option.label)}
                     >
                       {option.label || option.value}
@@ -796,10 +796,10 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
         <div className="w-full" style={{ height: "100%" }}>
           <div
             className={cn(
-              "box-border flex w-full flex-wrap items-center gap-2 rounded-lg border border-gray-300 bg-white px-3 py-2",
+              "box-border flex w-full flex-wrap items-center gap-2 rounded-lg border border-input bg-white px-3 py-2",
               !isFieldDisabled && "hover:border-orange-400",
               isSelected && "ring-2 ring-orange-500",
-              isFieldDisabled && "cursor-not-allowed !bg-gray-100 opacity-60",
+              isFieldDisabled && "cursor-not-allowed !bg-muted opacity-60",
             )}
             onClick={() => !isFieldDisabled && setIsOpen(true)}
             style={{
@@ -810,7 +810,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
             {selectedValues.map((val, idx) => {
               const opt = allOptions.find((o) => o.value === val);
               return (
-                <span key={idx} className="flex items-center gap-1 rounded bg-blue-100 px-2 py-1 text-sm text-blue-800">
+                <span key={idx} className="flex items-center gap-1 rounded bg-primary/10 px-2 py-1 text-sm text-primary">
                   {opt?.label || val}
                   <button
                     type="button"
@@ -823,19 +823,19 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
                         onFormDataChange(component.columnName, newValue);
                       }
                     }}
-                    className="ml-1 text-blue-600 hover:text-blue-800"
+                    className="ml-1 text-primary hover:text-primary"
                   >
                     ×
                   </button>
                 </span>
               );
             })}
-            {selectedValues.length === 0 && <span className="text-gray-500">{placeholder}</span>}
+            {selectedValues.length === 0 && <span className="text-muted-foreground">{placeholder}</span>}
           </div>
           {isOpen && !isFieldDisabled && (
-            <div className="absolute z-[99999] mt-1 max-h-60 w-full overflow-auto rounded-md border border-gray-300 bg-white shadow-lg">
+            <div className="absolute z-[99999] mt-1 max-h-60 w-full overflow-auto rounded-md border border-input bg-white shadow-lg">
               {isLoadingCodes || isLoadingCategories ? (
-                <div className="bg-white px-3 py-2 text-gray-900">로딩 중...</div>
+                <div className="bg-white px-3 py-2 text-foreground">로딩 중...</div>
               ) : allOptions.length > 0 ? (
                 (() => {
                   // 부모별 그룹핑 (카테고리 연쇄관계인 경우)
@@ -856,7 +856,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
                     return Object.entries(groupedOptions).map(([parentKey, group]) => (
                       <div key={parentKey}>
                         {/* 그룹 헤더 */}
-                        <div className="sticky top-0 border-b bg-gray-100 px-3 py-1.5 text-xs font-semibold text-gray-600">
+                        <div className="sticky top-0 border-b bg-muted px-3 py-1.5 text-xs font-semibold text-muted-foreground">
                           {group.parentLabel}
                         </div>
                         {/* 그룹 옵션들 */}
@@ -866,8 +866,8 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
                             <div
                               key={`${option.value}-${index}`}
                               className={cn(
-                                "cursor-pointer px-3 py-2 text-gray-900 hover:bg-gray-100",
-                                isOptionSelected && "bg-blue-50 font-medium",
+                                "cursor-pointer px-3 py-2 text-foreground hover:bg-muted",
+                                isOptionSelected && "bg-primary/10 font-medium",
                               )}
                               onClick={() => {
                                 const newVals = isOptionSelected
@@ -914,8 +914,8 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
                       <div
                         key={`${option.value}-${index}`}
                         className={cn(
-                          "cursor-pointer px-3 py-2 text-gray-900 hover:bg-gray-100",
-                          isOptionSelected && "bg-blue-50 font-medium",
+                          "cursor-pointer px-3 py-2 text-foreground hover:bg-muted",
+                          isOptionSelected && "bg-primary/10 font-medium",
                         )}
                         onClick={() => {
                           const newVals = isOptionSelected
@@ -953,7 +953,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
                   });
                 })()
               ) : (
-                <div className="bg-white px-3 py-2 text-gray-900">옵션이 없습니다</div>
+                <div className="bg-white px-3 py-2 text-foreground">옵션이 없습니다</div>
               )}
             </div>
           )}
@@ -966,16 +966,16 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
       <div className="w-full">
         <div
           className={cn(
-            "flex h-10 w-full items-center justify-between rounded-lg border border-gray-300 bg-white px-3 py-2",
+            "flex h-10 w-full items-center justify-between rounded-lg border border-input bg-white px-3 py-2",
             !isFieldDisabled && "cursor-pointer hover:border-orange-400",
             isSelected && "ring-2 ring-orange-500",
             isOpen && "border-orange-500",
-            isFieldDisabled && "cursor-not-allowed !bg-gray-100 opacity-60",
+            isFieldDisabled && "cursor-not-allowed !bg-muted opacity-60",
           )}
           onClick={handleToggle}
           style={{ pointerEvents: isFieldDisabled ? "none" : "auto" }}
         >
-          <span className={selectedLabel ? "text-gray-900" : "text-gray-500"}>{selectedLabel || placeholder}</span>
+          <span className={selectedLabel ? "text-foreground" : "text-muted-foreground"}>{selectedLabel || placeholder}</span>
           <svg
             className={`h-4 w-4 transition-transform ${isOpen ? "rotate-180" : ""}`}
             fill="none"
@@ -986,21 +986,21 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
           </svg>
         </div>
         {isOpen && !isFieldDisabled && (
-          <div className="absolute z-[99999] mt-1 max-h-60 w-full overflow-auto rounded-md border border-gray-300 bg-white shadow-lg">
+          <div className="absolute z-[99999] mt-1 max-h-60 w-full overflow-auto rounded-md border border-input bg-white shadow-lg">
             {isLoadingCodes ? (
-              <div className="bg-white px-3 py-2 text-gray-900">로딩 중...</div>
+              <div className="bg-white px-3 py-2 text-foreground">로딩 중...</div>
             ) : allOptions.length > 0 ? (
               allOptions.map((option, index) => (
                 <div
                   key={`${option.value}-${index}`}
-                  className="cursor-pointer bg-white px-3 py-2 text-gray-900 hover:bg-gray-100"
+                  className="cursor-pointer bg-white px-3 py-2 text-foreground hover:bg-muted"
                   onClick={() => handleOptionSelect(option.value, option.label)}
                 >
                   {option.label || option.value}
                 </div>
               ))
             ) : (
-              <div className="bg-white px-3 py-2 text-gray-900">옵션이 없습니다</div>
+              <div className="bg-white px-3 py-2 text-foreground">옵션이 없습니다</div>
             )}
           </div>
         )}
@@ -1022,7 +1022,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
       {component.label && (component.style?.labelDisplay ?? true) && (
         <label className="absolute -top-6 left-0 text-sm font-medium text-slate-600">
           {component.label}
-          {component.required && <span className="text-red-500">*</span>}
+          {component.required && <span className="text-destructive">*</span>}
         </label>
       )}
 
diff --git a/frontend/lib/registry/components/select-basic/SelectBasicConfigPanel.tsx b/frontend/lib/registry/components/select-basic/SelectBasicConfigPanel.tsx
index fba788f3..fdb9576b 100644
--- a/frontend/lib/registry/components/select-basic/SelectBasicConfigPanel.tsx
+++ b/frontend/lib/registry/components/select-basic/SelectBasicConfigPanel.tsx
@@ -385,7 +385,7 @@ export const SelectBasicConfigPanel: React.FC<SelectBasicConfigPanelProps> = ({
               <div className="bg-background space-y-1 rounded-md p-2 text-xs">
                 {config.cascadingRole === "parent" ? (
                   <>
-                    <div className="font-medium text-blue-600">부모 역할 (상위 선택)</div>
+                    <div className="font-medium text-primary">부모 역할 (상위 선택)</div>
                     <div>
                       <span className="text-muted-foreground">데이터 소스:</span>{" "}
                       <span className="font-medium">{selectedRelation.parent_table}</span>
@@ -397,7 +397,7 @@ export const SelectBasicConfigPanel: React.FC<SelectBasicConfigPanelProps> = ({
                   </>
                 ) : (
                   <>
-                    <div className="font-medium text-green-600">자식 역할 (하위 선택)</div>
+                    <div className="font-medium text-emerald-600">자식 역할 (하위 선택)</div>
                     <div>
                       <span className="text-muted-foreground">데이터 소스:</span>{" "}
                       <span className="font-medium">{selectedRelation.child_table}</span>
@@ -581,7 +581,7 @@ export const SelectBasicConfigPanel: React.FC<SelectBasicConfigPanelProps> = ({
           </svg>
           <Label className="text-sm font-medium">계층구조 코드 설정</Label>
         </div>
-        <div className="rounded border border-blue-200 bg-blue-50 p-2 text-xs text-blue-800">
+        <div className="rounded border border-primary/20 bg-primary/10 p-2 text-xs text-primary">
           공통코드에 계층구조(depth 2 이상)가 있으면 자동으로 대분류 → 중분류 → 소분류 셀렉트박스로 표시됩니다.
         </div>
 
@@ -591,7 +591,7 @@ export const SelectBasicConfigPanel: React.FC<SelectBasicConfigPanelProps> = ({
 
           {/* 코드 카테고리 선택 안내 */}
           {!config.codeCategory && (
-            <div className="rounded border border-yellow-200 bg-yellow-50 p-2 text-xs text-yellow-800">
+            <div className="rounded border border-amber-200 bg-amber-50 p-2 text-xs text-yellow-800">
               먼저 상단에서 코드 카테고리를 선택해주세요.
             </div>
           )}
diff --git a/frontend/lib/registry/components/selected-items-detail-input/SelectedItemsDetailInputComponent.tsx b/frontend/lib/registry/components/selected-items-detail-input/SelectedItemsDetailInputComponent.tsx
index ff94b8dc..6f4aa411 100644
--- a/frontend/lib/registry/components/selected-items-detail-input/SelectedItemsDetailInputComponent.tsx
+++ b/frontend/lib/registry/components/selected-items-detail-input/SelectedItemsDetailInputComponent.tsx
@@ -43,6 +43,7 @@ const LUCIDE_ICON_MAP: Record<string, LucideIcon> = {
 };
 import { commonCodeApi } from "@/lib/api/commonCode";
 import { cn } from "@/lib/utils";
+import { isColumnRequiredByMeta } from "@/lib/registry/DynamicComponentRenderer";
 
 export interface SelectedItemsDetailInputComponentProps extends ComponentRendererProps {
   config?: SelectedItemsDetailInputConfig;
@@ -1764,7 +1765,7 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
                     <span>
                       {idx}. {sampleDisplayCols.length > 0 ? `샘플 ${sampleDisplayCols[0]?.label || "품목"} ${idx}` : `샘플 항목 ${idx}`}
                     </span>
-                    <Button type="button" variant="ghost" size="sm" className="h-6 w-6 p-0 text-red-400" disabled>
+                    <Button type="button" variant="ghost" size="sm" className="h-6 w-6 p-0 text-destructive/80" disabled>
                       <X className="h-3 w-3" />
                     </Button>
                   </CardTitle>
@@ -1821,14 +1822,14 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
                                   <span className="truncate">
                                     1. {groupFields.slice(0, 2).map(f => `${f.label}: 샘플`).join(" / ")}
                                   </span>
-                                  <X className="h-2.5 w-2.5 shrink-0 text-gray-400" />
+                                  <X className="h-2.5 w-2.5 shrink-0 text-muted-foreground/70" />
                                 </div>
                                 {idx === 1 && (
                                   <div className="bg-muted/30 flex items-center justify-between rounded border p-1.5 text-[10px]">
                                     <span className="truncate">
                                       2. {groupFields.slice(0, 2).map(f => `${f.label}: 샘플`).join(" / ")}
                                     </span>
-                                    <X className="h-2.5 w-2.5 shrink-0 text-gray-400" />
+                                    <X className="h-2.5 w-2.5 shrink-0 text-muted-foreground/70" />
                                   </div>
                                 )}
                               </>
@@ -1916,8 +1917,7 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
                         field.type === "textarea" && "col-span-2"
                       )}>
                         <label className="text-[11px] font-medium leading-none">
-                          {field.label}
-                          {field.required && <span className="text-destructive ml-0.5">*</span>}
+                          {field.label}{(field.required || isColumnRequiredByMeta(componentConfig.targetTable, field.name)) && <span className="text-orange-500">*</span>}
                         </label>
                         {renderField(field, item.id, group.id, singleEntry.id, singleEntry)}
                       </div>
@@ -1977,8 +1977,7 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
                                         field.type === "textarea" && "col-span-2"
                                       )}>
                                         <label className="text-[11px] font-medium leading-none">
-                                          {field.label}
-                                          {field.required && <span className="text-destructive ml-0.5">*</span>}
+                                          {field.label}{(field.required || isColumnRequiredByMeta(componentConfig.targetTable, field.name)) && <span className="text-orange-500">*</span>}
                                         </label>
                                         {renderField(field, item.id, group.id, entry.id, entry)}
                                       </div>
@@ -2044,7 +2043,7 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
                     variant="ghost"
                     size="sm"
                     onClick={() => handleRemoveItem(item.id)}
-                    className="h-7 w-7 p-0 text-red-500"
+                    className="h-7 w-7 p-0 text-destructive"
                   >
                     <X className="h-4 w-4" />
                   </Button>
@@ -2216,7 +2215,7 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
                           const newDetailId = `detail-${Date.now()}`;
                           setEditingDetailId(newDetailId);
                         }}
-                        className="h-7 text-xs text-orange-600"
+                        className="h-7 text-xs text-amber-600"
                       >
                         추가 입력
                       </Button>
@@ -2226,7 +2225,7 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
                           variant="ghost"
                           size="icon"
                           onClick={() => handleRemoveItem(item.id)}
-                          className="h-7 w-7 text-red-500"
+                          className="h-7 w-7 text-destructive"
                         >
                           <X className="h-3 w-3" />
                         </Button>
@@ -2293,7 +2292,7 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
                               variant="ghost"
                               size="sm"
                               onClick={() => handleRemoveDetail(item.id, detail.id)}
-                              className="h-6 w-6 p-0 text-red-500"
+                              className="h-6 w-6 p-0 text-destructive"
                             >
                               X
                             </Button>
@@ -2353,8 +2352,7 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
               {/* 추가 입력 필드 컬럼 */}
               {componentConfig.additionalFields?.map((field) => (
                 <TableHead key={field.name} className="h-12 px-4 py-3 text-xs font-semibold sm:text-sm">
-                  {field.label}
-                  {field.required && <span className="text-destructive ml-1">*</span>}
+                  {field.label}{(field.required || isColumnRequiredByMeta(componentConfig.targetTable, field.name)) && <span className="text-orange-500">*</span>}
                 </TableHead>
               ))}
 
@@ -2566,7 +2564,7 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
                         setIsEditing(true);
                         setEditingItemId(item.id);
                       }}
-                      className="h-7 text-xs text-orange-600"
+                      className="h-7 text-xs text-amber-600"
                     >
                       수정
                     </Button>
@@ -2632,7 +2630,7 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
                               variant="ghost"
                               size="sm"
                               onClick={() => handleRemoveDetail(item.id, detail.id)}
-                              className="h-6 w-6 p-0 text-red-500"
+                              className="h-6 w-6 p-0 text-destructive"
                             >
                               X
                             </Button>
diff --git a/frontend/lib/registry/components/selected-items-detail-input/SelectedItemsDetailInputConfigPanel.tsx b/frontend/lib/registry/components/selected-items-detail-input/SelectedItemsDetailInputConfigPanel.tsx
index 1f70e7e0..ee7c07d3 100644
--- a/frontend/lib/registry/components/selected-items-detail-input/SelectedItemsDetailInputConfigPanel.tsx
+++ b/frontend/lib/registry/components/selected-items-detail-input/SelectedItemsDetailInputConfigPanel.tsx
@@ -859,7 +859,7 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
         <p className="text-[10px] text-primary font-medium sm:text-xs">
           ✨ URL 파라미터에서 자동으로 가져옵니다 (Button이 전달)
         </p>
-        <p className="text-[10px] text-gray-500 sm:text-xs">
+        <p className="text-[10px] text-muted-foreground sm:text-xs">
           테스트용으로 직접 입력하려면 테이블명을 입력하세요
         </p>
       </div>
@@ -913,7 +913,7 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
             </Command>
           </PopoverContent>
         </Popover>
-        <p className="text-[10px] text-gray-500 sm:text-xs">
+        <p className="text-[10px] text-muted-foreground sm:text-xs">
           이전 화면에서 전달받은 데이터의 원본 테이블 (예: item_info)
         </p>
       </div>
@@ -972,13 +972,13 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
             </Command>
           </PopoverContent>
         </Popover>
-        <p className="text-[10px] text-gray-500 sm:text-xs">최종 데이터를 저장할 테이블</p>
+        <p className="text-[10px] text-muted-foreground sm:text-xs">최종 데이터를 저장할 테이블</p>
       </div>
 
       {/* FK 자동 감지 결과 표시 */}
       {autoDetectedFks.length > 0 && (
-        <div className="rounded-md border border-blue-200 bg-blue-50 p-3 dark:border-blue-800 dark:bg-blue-950">
-          <p className="mb-2 text-xs font-medium text-blue-700 dark:text-blue-300">
+        <div className="rounded-md border border-primary/20 bg-primary/10 p-3 dark:border-primary/30 dark:bg-primary/15">
+          <p className="mb-2 text-xs font-medium text-primary dark:text-primary/80">
             FK 자동 감지됨 ({autoDetectedFks.length}건)
           </p>
           <div className="space-y-1">
@@ -987,10 +987,10 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
                 <span className={cn(
                   "rounded px-1.5 py-0.5 font-mono text-[9px]",
                   fk.mappingType === "source" 
-                    ? "bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300" 
+                    ? "bg-emerald-100 text-emerald-700 dark:bg-emerald-900 dark:text-emerald-300" 
                     : fk.mappingType === "parent"
-                    ? "bg-orange-100 text-orange-700 dark:bg-orange-900 dark:text-orange-300"
-                    : "bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400"
+                    ? "bg-amber-100 text-orange-700 dark:bg-orange-900 dark:text-orange-300"
+                    : "bg-muted text-muted-foreground dark:bg-foreground/90 dark:text-muted-foreground/70"
                 )}>
                   {fk.mappingType === "source" ? "원본" : fk.mappingType === "parent" ? "부모" : "미분류"}
                 </span>
@@ -1000,7 +1000,7 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
               </div>
             ))}
           </div>
-          <p className="mt-2 text-[9px] text-blue-600 dark:text-blue-400">
+          <p className="mt-2 text-[9px] text-primary dark:text-primary/80">
             엔티티 설정 기반 자동 매핑. sourceKeyField와 parentDataMapping이 자동으로 설정됩니다.
           </p>
         </div>
@@ -1018,7 +1018,7 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
                 variant="ghost"
                 size="icon"
                 onClick={() => removeDisplayColumn(col.name)}
-                className="h-6 w-6 text-red-500 hover:bg-red-50 sm:h-7 sm:w-7"
+                className="h-6 w-6 text-destructive hover:bg-destructive/10 sm:h-7 sm:w-7"
               >
                 <X className="h-3 w-3 sm:h-4 sm:w-4" />
               </Button>
@@ -1051,7 +1051,7 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
                     >
                       <div>
                         <div className="font-medium">{column.columnLabel || column.columnName}</div>
-                        {column.dataType && <div className="text-[10px] text-gray-500">{column.dataType}</div>}
+                        {column.dataType && <div className="text-[10px] text-muted-foreground">{column.dataType}</div>}
                       </div>
                     </CommandItem>
                   ))}
@@ -1060,7 +1060,7 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
             </PopoverContent>
           </Popover>
         </div>
-        <p className="text-[10px] text-gray-500 sm:text-xs">
+        <p className="text-[10px] text-muted-foreground sm:text-xs">
           전달받은 원본 데이터 중 화면에 표시할 컬럼 (예: 품목코드, 품목명)
         </p>
       </div>
@@ -1074,13 +1074,13 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
           <Card key={index} className="border-2">
             <CardContent className="space-y-2 pt-3 sm:space-y-3 sm:pt-4">
               <div className="flex items-center justify-between">
-                <span className="text-xs font-semibold text-gray-700 sm:text-sm">필드 {index + 1}</span>
+                <span className="text-xs font-semibold text-foreground sm:text-sm">필드 {index + 1}</span>
                 <Button
                   type="button"
                   variant="ghost"
                   size="icon"
                   onClick={() => removeField(index)}
-                  className="h-5 w-5 text-red-500 hover:bg-red-50 sm:h-6 sm:w-6"
+                  className="h-5 w-5 text-destructive hover:bg-destructive/10 sm:h-6 sm:w-6"
                 >
                   <X className="h-2 w-2 sm:h-3 sm:w-3" />
                 </Button>
@@ -1131,7 +1131,7 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
                               />
                               <div>
                                 <div className="font-medium">{column.columnLabel}</div>
-                                <div className="text-[9px] text-gray-500">{column.columnName}</div>
+                                <div className="text-[9px] text-muted-foreground">{column.columnName}</div>
                               </div>
                             </CommandItem>
                           ))}
@@ -1241,7 +1241,7 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
                     </Command>
                   </PopoverContent>
                 </Popover>
-                <p className="text-[9px] text-gray-500 sm:text-[10px]">
+                <p className="text-[9px] text-muted-foreground sm:text-[10px]">
                   다른 테이블에서 가져올 경우 테이블 선택
                 </p>
                 
@@ -1308,7 +1308,7 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
                               />
                               <div>
                                 <div className="font-medium">{column.columnLabel || column.columnName}</div>
-                                {column.dataType && <div className="text-[8px] text-gray-500">{column.dataType}</div>}
+                                {column.dataType && <div className="text-[8px] text-muted-foreground">{column.dataType}</div>}
                               </div>
                             </CommandItem>
                           ));
@@ -1346,7 +1346,7 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
                       ))}
                     </SelectContent>
                   </Select>
-                  <p className="text-[9px] text-gray-500 sm:text-[10px]">
+                  <p className="text-[9px] text-muted-foreground sm:text-[10px]">
                     같은 그룹 ID를 가진 필드들은 같은 카드에 표시됩니다
                   </p>
                 </div>
@@ -1382,7 +1382,7 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
       {/* 🆕 필드 그룹 관리 */}
       <div className="space-y-2">
         <Label className="text-xs font-semibold sm:text-sm">필드 그룹 설정</Label>
-        <p className="text-[10px] text-gray-500 sm:text-xs">
+        <p className="text-[10px] text-muted-foreground sm:text-xs">
           추가 입력 필드를 여러 카드로 나눠서 표시 (예: 거래처 정보, 단가 정보)
         </p>
 
@@ -1417,7 +1417,7 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
                     variant="ghost"
                     size="icon"
                     onClick={() => removeFieldGroup(group.id)}
-                    className="h-6 w-6 text-red-500 hover:text-red-700 sm:h-7 sm:w-7"
+                    className="h-6 w-6 text-destructive hover:text-destructive sm:h-7 sm:w-7"
                   >
                     <X className="h-3 w-3 sm:h-4 sm:w-4" />
                   </Button>
@@ -2507,10 +2507,10 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
               (fk) => fk.mappingType === "parent" && fk.columnName === mapping.targetField
             );
             return (
-            <Card key={index} className={cn("p-3", isAutoDetected && "border-orange-200 bg-orange-50/30 dark:border-orange-800 dark:bg-orange-950/30")}>
+            <Card key={index} className={cn("p-3", isAutoDetected && "border-orange-200 bg-amber-50/30 dark:border-orange-800 dark:bg-orange-950/30")}>
               <div className="space-y-2">
                 {isAutoDetected && (
-                  <span className="inline-block rounded bg-orange-100 px-1.5 py-0.5 text-[9px] font-medium text-orange-700 dark:bg-orange-900 dark:text-orange-300">
+                  <span className="inline-block rounded bg-amber-100 px-1.5 py-0.5 text-[9px] font-medium text-orange-700 dark:bg-orange-900 dark:text-orange-300">
                     FK 자동 감지
                   </span>
                 )}
@@ -2762,9 +2762,9 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
       </div>
 
       {/* 사용 예시 */}
-      <div className="rounded-lg bg-blue-50 p-2 text-xs sm:p-3 sm:text-sm">
-        <p className="mb-1 font-medium text-blue-900">💡 사용 예시</p>
-        <ul className="space-y-1 text-[10px] text-blue-700 sm:text-xs">
+      <div className="rounded-lg bg-primary/10 p-2 text-xs sm:p-3 sm:text-sm">
+        <p className="mb-1 font-medium text-primary">💡 사용 예시</p>
+        <ul className="space-y-1 text-[10px] text-primary sm:text-xs">
           <li>• 품목 선택 모달 → 다음 버튼 → 거래처별 가격 입력</li>
           <li>• 사용자 선택 모달 → 다음 버튼 → 권한 및 부서 할당</li>
           <li>• 제품 선택 모달 → 다음 버튼 → 수량 및 납기일 입력</li>
diff --git a/frontend/lib/registry/components/simple-repeater-table/SimpleRepeaterTableComponent.tsx b/frontend/lib/registry/components/simple-repeater-table/SimpleRepeaterTableComponent.tsx
index e7917dd9..1fa75819 100644
--- a/frontend/lib/registry/components/simple-repeater-table/SimpleRepeaterTableComponent.tsx
+++ b/frontend/lib/registry/components/simple-repeater-table/SimpleRepeaterTableComponent.tsx
@@ -10,6 +10,7 @@ import { cn } from "@/lib/utils";
 import { ComponentRendererProps } from "@/types/component";
 import { useCalculation } from "./useCalculation";
 import { apiClient } from "@/lib/api/client";
+import { isColumnRequiredByMeta } from "@/lib/registry/DynamicComponentRenderer";
 
 export interface SimpleRepeaterTableComponentProps extends ComponentRendererProps {
   config?: SimpleRepeaterTableProps;
@@ -674,8 +675,7 @@ export function SimpleRepeaterTableComponent({
                   className="text-muted-foreground px-4 py-2 text-left font-medium"
                   style={{ width: col.width }}
                 >
-                  {col.label}
-                  {col.required && <span className="text-destructive ml-1">*</span>}
+                  {col.label}{(col.required || isColumnRequiredByMeta(componentTargetTable, col.field)) && <span className="text-orange-500">*</span>}
                 </th>
               ))}
               {!readOnly && allowDelete && (
diff --git a/frontend/lib/registry/components/simple-repeater-table/SimpleRepeaterTableConfigPanel.tsx b/frontend/lib/registry/components/simple-repeater-table/SimpleRepeaterTableConfigPanel.tsx
index 4ef47e39..f51fe313 100644
--- a/frontend/lib/registry/components/simple-repeater-table/SimpleRepeaterTableConfigPanel.tsx
+++ b/frontend/lib/registry/components/simple-repeater-table/SimpleRepeaterTableConfigPanel.tsx
@@ -722,7 +722,7 @@ export function SimpleRepeaterTableConfigPanel({
               )}
             </div>
 
-            <div className="p-3 bg-blue-50 dark:bg-blue-950 rounded-md border border-blue-200 dark:border-blue-800">
+            <div className="p-3 bg-primary/10 dark:bg-primary/15 rounded-md border border-primary/20 dark:border-primary/30">
               <p className="text-xs font-medium mb-1">사용 예시</p>
               <div className="space-y-1 text-[10px] text-muted-foreground">
                 <p>• 수주관리 리스트에서 클릭한 수주번호(order_no)를 기준으로 데이터 로드</p>
@@ -912,8 +912,8 @@ export function SimpleRepeaterTableConfigPanel({
                 {/* 🆕 데이터 소스 설정 (어디서 조회할지) */}
                 <div className="space-y-3 border-t pt-4">
                   <div className="flex items-center gap-2">
-                    <div className="h-1 w-1 rounded-full bg-blue-500"></div>
-                    <Label className="text-xs font-semibold text-blue-600">데이터 소스 설정 (어디서 조회?)</Label>
+                    <div className="h-1 w-1 rounded-full bg-primary"></div>
+                    <Label className="text-xs font-semibold text-primary">데이터 소스 설정 (어디서 조회?)</Label>
                   </div>
 
                   <div className="space-y-2">
@@ -944,7 +944,7 @@ export function SimpleRepeaterTableConfigPanel({
                   </div>
 
                   {col.sourceConfig?.type === "direct" && (
-                    <div className="space-y-3 p-3 bg-blue-50 dark:bg-blue-950 rounded-md">
+                    <div className="space-y-3 p-3 bg-primary/10 dark:bg-primary/15 rounded-md">
                       <p className="text-xs font-medium">직접 조회 설정</p>
 
                       <div className="space-y-2">
@@ -1091,11 +1091,11 @@ export function SimpleRepeaterTableConfigPanel({
                 {localConfig.parentChildConfig?.enabled ? (
                   // 부모-자식 모드: 간단한 안내만 표시
                   <div className="border-t pt-4">
-                    <div className="p-3 bg-green-50 dark:bg-green-950 rounded-md border border-green-200 dark:border-green-800">
+                    <div className="p-3 bg-emerald-50 dark:bg-emerald-950 rounded-md border border-emerald-200 dark:border-emerald-800">
                       <p className="text-xs text-muted-foreground">
-                        <strong className="text-green-700 dark:text-green-400">부모-자식 모드</strong>
+                        <strong className="text-emerald-700 dark:text-emerald-400">부모-자식 모드</strong>
                         <br />
-                        → <code className="bg-green-100 dark:bg-green-900 px-1 rounded">{localConfig.parentChildConfig.childTable || "자식 테이블"}.{col.field || "필드명"}</code> 에 저장
+                        → <code className="bg-emerald-100 dark:bg-emerald-900 px-1 rounded">{localConfig.parentChildConfig.childTable || "자식 테이블"}.{col.field || "필드명"}</code> 에 저장
                       </p>
                     </div>
                   </div>
@@ -1103,7 +1103,7 @@ export function SimpleRepeaterTableConfigPanel({
                   // 일반 모드: 타겟 설정 (선택사항)
                   <div className="space-y-3 border-t pt-4">
                     <div className="flex items-center gap-2">
-                      <div className="h-1 w-1 rounded-full bg-gray-400"></div>
+                      <div className="h-1 w-1 rounded-full bg-muted-foreground"></div>
                       <Label className="text-xs font-semibold text-muted-foreground">저장 설정 (선택사항)</Label>
                     </div>
 
@@ -1654,7 +1654,7 @@ export function SimpleRepeaterTableConfigPanel({
               )}
             </div>
 
-            <div className="p-3 bg-blue-50 dark:bg-blue-950 rounded-md border border-blue-200 dark:border-blue-800">
+            <div className="p-3 bg-primary/10 dark:bg-primary/15 rounded-md border border-primary/20 dark:border-primary/30">
               <p className="text-xs font-medium mb-1">사용 예시</p>
               <div className="space-y-1 text-[10px] text-muted-foreground">
                 <p>• 공급가액 합계: supply_amount 필드의 SUM</p>
diff --git a/frontend/lib/registry/components/slider-basic/SliderBasicComponent.tsx b/frontend/lib/registry/components/slider-basic/SliderBasicComponent.tsx
index 22c364fb..ec77206d 100644
--- a/frontend/lib/registry/components/slider-basic/SliderBasicComponent.tsx
+++ b/frontend/lib/registry/components/slider-basic/SliderBasicComponent.tsx
@@ -3,6 +3,7 @@
 import React from "react";
 import { ComponentRendererProps } from "@/types/component";
 import { SliderBasicConfig } from "./types";
+import { getAdaptiveLabelColor } from "@/lib/utils/darkModeColor";
 
 export interface SliderBasicComponentProps extends ComponentRendererProps {
   config?: SliderBasicConfig;
@@ -86,7 +87,7 @@ export const SliderBasicComponent: React.FC<SliderBasicComponentProps> = ({
             top: "-25px",
             left: "0px",
             fontSize: component.style?.labelFontSize || "14px",
-            color: component.style?.labelColor || "#64748b",
+            color: getAdaptiveLabelColor(component.style?.labelColor),
             fontWeight: "500",
             // isInteractive 모드에서는 사용자 스타일 우선 적용
             ...(isInteractive && component.style ? component.style : {}),
@@ -151,7 +152,7 @@ export const SliderBasicComponent: React.FC<SliderBasicComponentProps> = ({
             width: "30%",
             textAlign: "center",
             fontSize: "14px",
-            color: "#212121",
+            color: "hsl(var(--foreground))",
             fontWeight: "500",
             // isInteractive 모드에서는 사용자 스타일 우선 적용
             ...(isInteractive && component.style ? component.style : {}),
diff --git a/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx b/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx
index a12e4bce..b5e8852f 100644
--- a/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx
+++ b/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx
@@ -492,24 +492,22 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
     return `${height}px`; // 숫자면 px 추가
   };
 
-  const componentStyle: React.CSSProperties = isPreview
+  const componentStyle: React.CSSProperties = isDesignMode
     ? {
-        // 반응형 모드: position relative, 그리드 컨테이너가 제공하는 크기 사용
-        position: "relative",
-        width: "100%", // 🆕 부모 컨테이너 너비에 맞춤
-        height: getHeightValue(),
-        border: "1px solid #e5e7eb",
-      }
-    : {
-        // 디자이너 모드: position absolute
         position: "absolute",
         left: `${component.style?.positionX || 0}px`,
         top: `${component.style?.positionY || 0}px`,
-        width: "100%", // 🆕 부모 컨테이너 너비에 맞춤 (그리드 기반)
+        width: "100%",
         height: getHeightValue(),
         zIndex: component.style?.positionZ || 1,
-        cursor: isDesignMode ? "pointer" : "default",
+        cursor: "pointer",
         border: isSelected ? "2px solid #3b82f6" : "1px solid #e5e7eb",
+      }
+    : {
+        position: "relative",
+        width: "100%",
+        height: "100%",
+        border: "1px solid #e5e7eb",
       };
 
   // 계층 구조 빌드 함수 (트리 구조 유지)
@@ -1341,56 +1339,79 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
   const getLeftColumnUniqueValues = useCallback(
     async (columnName: string) => {
       const leftTableName = componentConfig.leftPanel?.tableName;
-      if (!leftTableName || leftData.length === 0) return [];
+      if (!leftTableName) return [];
 
-      // 현재 로드된 데이터에서 고유값 추출
-      const uniqueValues = new Set<string>();
+      // 1단계: 카테고리 API 시도 (DB에서 라벨 조회)
+      try {
+        const { apiClient } = await import("@/lib/api/client");
+        const response = await apiClient.get(`/table-categories/${leftTableName}/${columnName}/values`);
+        if (response.data.success && response.data.data && response.data.data.length > 0) {
+          return response.data.data.map((item: any) => ({
+            value: item.valueCode,
+            label: item.valueLabel,
+          }));
+        }
+      } catch {
+        // 카테고리 API 실패 시 다음 단계로
+      }
+
+      // 2단계: DISTINCT API (백엔드 라벨 변환 포함)
+      try {
+        const { apiClient } = await import("@/lib/api/client");
+        const response = await apiClient.get(`/entity/${leftTableName}/distinct/${columnName}`);
+        if (response.data.success && response.data.data && response.data.data.length > 0) {
+          return response.data.data.map((item: any) => ({
+            value: String(item.value),
+            label: String(item.label),
+          }));
+        }
+      } catch {
+        // DISTINCT API 실패 시 다음 단계로
+      }
+
+      // 3단계: 로컬 데이터에서 고유값 추출 (최종 fallback)
+      if (leftData.length === 0) return [];
+
+      const uniqueValuesMap = new Map<string, string>();
 
       leftData.forEach((item) => {
-        // 🆕 조인 컬럼 처리 (item_info.standard → item_code_standard 또는 item_id_standard)
         let value: any;
 
         if (columnName.includes(".")) {
-          // 조인 컬럼: getEntityJoinValue와 동일한 로직 적용
           const [refTable, fieldName] = columnName.split(".");
           const inferredSourceColumn = refTable.replace("_info", "_code").replace("_mng", "_id");
 
-          // 정확한 키로 먼저 시도
           const exactKey = `${inferredSourceColumn}_${fieldName}`;
           value = item[exactKey];
 
-          // 🆕 item_id 패턴 시도
           if (value === undefined) {
             const idPatternKey = `${refTable.replace("_info", "_id").replace("_mng", "_id")}_${fieldName}`;
             value = item[idPatternKey];
           }
 
-          // 기본 별칭 패턴 시도 (item_code_name 또는 item_id_name)
           if (value === undefined && (fieldName === "item_name" || fieldName === "name")) {
             const aliasKey = `${inferredSourceColumn}_name`;
             value = item[aliasKey];
-            // item_id_name 패턴도 시도
             if (value === undefined) {
               const idAliasKey = `${refTable.replace("_info", "_id").replace("_mng", "_id")}_name`;
               value = item[idAliasKey];
             }
           }
         } else {
-          // 일반 컬럼
           value = item[columnName];
         }
 
         if (value !== null && value !== undefined && value !== "") {
-          // _name 필드 우선 사용 (category/entity type)
-          const displayValue = item[`${columnName}_name`] || value;
-          uniqueValues.add(String(displayValue));
+          const strValue = String(value);
+          const nameField = item[`${columnName}_name`];
+          const label = nameField || strValue;
+          uniqueValuesMap.set(strValue, label);
         }
       });
 
-      return Array.from(uniqueValues).map((value) => ({
-        value: value,
-        label: value,
-      }));
+      return Array.from(uniqueValuesMap.entries())
+        .map(([value, label]) => ({ value, label }))
+        .sort((a, b) => a.label.localeCompare(b.label));
     },
     [componentConfig.leftPanel?.tableName, leftData],
   );
@@ -2468,13 +2489,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
     <div
       ref={containerRef}
       style={{
-        ...(isPreview
-          ? {
-              position: "relative",
-              height: `${component.style?.height || 600}px`,
-              border: "1px solid #e5e7eb",
-            }
-          : componentStyle),
+        ...componentStyle,
         display: "flex",
         flexDirection: "row",
       }}
@@ -2488,7 +2503,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
     >
       {/* 좌측 패널 */}
       <div
-        style={{ width: `${leftWidth}%`, minWidth: isPreview ? "0" : `${minLeftWidth}px`, height: "100%" }}
+        style={{ width: `${leftWidth}%`, minWidth: isDesignMode ? `${minLeftWidth}px` : "0", height: "100%" }}
         className="border-border flex flex-shrink-0 flex-col border-r"
       >
         <Card className="flex flex-col border-0 shadow-none" style={{ height: "100%" }}>
@@ -2535,21 +2550,21 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                 {isDesignMode ? (
                   // 디자인 모드: 샘플 테이블
                   <div className="overflow-auto">
-                    <table className="min-w-full divide-y divide-gray-200">
-                      <thead className="bg-gray-50">
+                    <table className="min-w-full divide-y divide-border">
+                      <thead className="bg-muted">
                         <tr>
-                          <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">컬럼 1</th>
-                          <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">컬럼 2</th>
-                          <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">컬럼 3</th>
+                          <th className="px-3 py-2 text-left text-xs font-medium text-muted-foreground uppercase">컬럼 1</th>
+                          <th className="px-3 py-2 text-left text-xs font-medium text-muted-foreground uppercase">컬럼 2</th>
+                          <th className="px-3 py-2 text-left text-xs font-medium text-muted-foreground uppercase">컬럼 3</th>
                         </tr>
                       </thead>
-                      <tbody className="divide-y divide-gray-200 bg-white">
-                        <tr className="cursor-pointer hover:bg-gray-50">
+                      <tbody className="divide-y divide-border bg-white">
+                        <tr className="cursor-pointer hover:bg-muted">
                           <td className="px-3 py-2 text-sm whitespace-nowrap">데이터 1-1</td>
                           <td className="px-3 py-2 text-sm whitespace-nowrap">데이터 1-2</td>
                           <td className="px-3 py-2 text-sm whitespace-nowrap">데이터 1-3</td>
                         </tr>
-                        <tr className="cursor-pointer hover:bg-gray-50">
+                        <tr className="cursor-pointer hover:bg-muted">
                           <td className="px-3 py-2 text-sm whitespace-nowrap">데이터 2-1</td>
                           <td className="px-3 py-2 text-sm whitespace-nowrap">데이터 2-2</td>
                           <td className="px-3 py-2 text-sm whitespace-nowrap">데이터 2-3</td>
@@ -2615,16 +2630,16 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                         <div className="overflow-auto">
                           {groupedLeftData.map((group, groupIdx) => (
                             <div key={groupIdx} className="mb-4">
-                              <div className="bg-gray-100 px-3 py-2 text-sm font-semibold">
+                              <div className="bg-muted px-3 py-2 text-sm font-semibold">
                                 {group.groupKey} ({group.count}개)
                               </div>
-                              <table className="min-w-full divide-y divide-gray-200">
-                                <thead className="bg-gray-50">
+                              <table className="min-w-full divide-y divide-border">
+                                <thead className="bg-muted">
                                   <tr>
                                     {columnsToShow.map((col, idx) => (
                                       <th
                                         key={idx}
-                                        className="px-3 py-2 text-left text-xs font-medium tracking-wider text-gray-500 uppercase"
+                                        className="px-3 py-2 text-left text-xs font-medium tracking-wider text-muted-foreground uppercase"
                                         style={{
                                           width: col.width ? `${col.width}px` : "auto",
                                           textAlign: col.align || "left",
@@ -2635,7 +2650,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                     ))}
                                   </tr>
                                 </thead>
-                                <tbody className="divide-y divide-gray-200 bg-white">
+                                <tbody className="divide-y divide-border bg-white">
                                   {group.items.map((item, idx) => {
                                     const sourceColumn = componentConfig.leftPanel?.itemAddConfig?.sourceColumn || "id";
                                     const itemId = item[sourceColumn] || item.id || item.ID;
@@ -2654,7 +2669,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                         {columnsToShow.map((col, colIdx) => (
                                           <td
                                             key={colIdx}
-                                            className="px-3 py-2 text-sm whitespace-nowrap text-gray-900"
+                                            className="px-3 py-2 text-sm whitespace-nowrap text-foreground"
                                             style={{ textAlign: col.align || "left" }}
                                           >
                                             {formatCellValue(
@@ -2679,13 +2694,13 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                     // 🔧 일반 테이블 렌더링 (그룹화 없음)
                     return (
                       <div className="overflow-auto">
-                        <table className="min-w-full divide-y divide-gray-200">
-                          <thead className="sticky top-0 z-10 bg-gray-50">
+                        <table className="min-w-full divide-y divide-border">
+                          <thead className="sticky top-0 z-10 bg-muted">
                             <tr>
                               {columnsToShow.map((col, idx) => (
                                 <th
                                   key={idx}
-                                  className="px-3 py-2 text-left text-xs font-medium tracking-wider text-gray-500 uppercase"
+                                  className="px-3 py-2 text-left text-xs font-medium tracking-wider text-muted-foreground uppercase"
                                   style={{
                                     width: col.width ? `${col.width}px` : "auto",
                                     minWidth: "80px",
@@ -2697,7 +2712,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                               ))}
                             </tr>
                           </thead>
-                          <tbody className="divide-y divide-gray-200 bg-white">
+                          <tbody className="divide-y divide-border bg-white">
                             {filteredData.map((item, idx) => {
                               const sourceColumn = componentConfig.leftPanel?.itemAddConfig?.sourceColumn || "id";
                               const itemId = item[sourceColumn] || item.id || item.ID;
@@ -2716,7 +2731,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                   {columnsToShow.map((col, colIdx) => (
                                     <td
                                       key={colIdx}
-                                      className="px-3 py-2 text-sm whitespace-nowrap text-gray-900"
+                                      className="px-3 py-2 text-sm whitespace-nowrap text-foreground"
                                       style={{ textAlign: col.align || "left" }}
                                     >
                                       {formatCellValue(
@@ -2875,9 +2890,9 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                               {hasChildren ? (
                                 <div className="flex-shrink-0">
                                   {isExpanded ? (
-                                    <ChevronDown className="h-4 w-4 text-gray-500" />
+                                    <ChevronDown className="h-4 w-4 text-muted-foreground" />
                                   ) : (
-                                    <ChevronRight className="h-4 w-4 text-gray-500" />
+                                    <ChevronRight className="h-4 w-4 text-muted-foreground" />
                                   )}
                                 </div>
                               ) : (
@@ -2901,10 +2916,10 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                       e.stopPropagation();
                                       handleEditClick("left", item);
                                     }}
-                                    className="rounded p-1 transition-colors hover:bg-gray-200"
+                                    className="rounded p-1 transition-colors hover:bg-muted/80"
                                     title="수정"
                                   >
-                                    <Pencil className="h-4 w-4 text-gray-600" />
+                                    <Pencil className="h-4 w-4 text-muted-foreground" />
                                   </button>
 
                                   {/* 삭제 버튼 */}
@@ -2913,10 +2928,10 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                       e.stopPropagation();
                                       handleDeleteClick("left", item);
                                     }}
-                                    className="rounded p-1 transition-colors hover:bg-red-100"
+                                    className="rounded p-1 transition-colors hover:bg-destructive/10"
                                     title="삭제"
                                   >
-                                    <Trash2 className="h-4 w-4 text-red-600" />
+                                    <Trash2 className="h-4 w-4 text-destructive" />
                                   </button>
 
                                   {/* 항목별 추가 버튼 */}
@@ -2926,10 +2941,10 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                         e.stopPropagation();
                                         handleItemAddClick(item);
                                       }}
-                                      className="rounded p-1 transition-colors hover:bg-gray-200"
+                                      className="rounded p-1 transition-colors hover:bg-muted/80"
                                       title="하위 항목 추가"
                                     >
-                                      <Plus className="h-4 w-4 text-gray-600" />
+                                      <Plus className="h-4 w-4 text-muted-foreground" />
                                     </button>
                                   )}
                                 </div>
@@ -2981,7 +2996,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
 
       {/* 우측 패널 */}
       <div
-        style={{ width: `${100 - leftWidth}%`, minWidth: isPreview ? "0" : `${minRightWidth}px`, height: "100%" }}
+        style={{ width: `${100 - leftWidth}%`, minWidth: isDesignMode ? `${minRightWidth}px` : "0", height: "100%" }}
         className="flex flex-shrink-0 flex-col"
       >
         <Card className="flex flex-col border-0 shadow-none" style={{ height: "100%" }}>
@@ -3162,7 +3177,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                       <Button
                                         variant="ghost"
                                         size="sm"
-                                        className="h-7 w-7 p-0 text-red-500 hover:text-red-600"
+                                        className="h-7 w-7 p-0 text-destructive hover:text-destructive"
                                         onClick={() => handleDeleteClick("right", item)}
                                       >
                                         <Trash2 className="h-3.5 w-3.5" />
@@ -3239,7 +3254,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                   <Button
                                     variant="ghost"
                                     size="sm"
-                                    className="h-7 w-7 p-0 text-red-500 hover:text-red-600"
+                                    className="h-7 w-7 p-0 text-destructive hover:text-destructive"
                                     onClick={(e) => {
                                       e.stopPropagation();
                                       handleDeleteClick("right", item);
@@ -3250,9 +3265,9 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                 )}
                                 {detailColumns.length > 0 &&
                                   (isExpanded ? (
-                                    <ChevronUp className="h-4 w-4 text-gray-400" />
+                                    <ChevronUp className="h-4 w-4 text-muted-foreground/70" />
                                   ) : (
-                                    <ChevronDown className="h-4 w-4 text-gray-400" />
+                                    <ChevronDown className="h-4 w-4 text-muted-foreground/70" />
                                   ))}
                               </div>
                             </div>
@@ -3365,13 +3380,13 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                           )}
                         </div>
                         <div className="overflow-auto">
-                          <table className="min-w-full divide-y divide-gray-200">
-                            <thead className="sticky top-0 z-10 bg-gray-50">
+                          <table className="min-w-full divide-y divide-border">
+                            <thead className="sticky top-0 z-10 bg-muted">
                               <tr>
                                 {columnsToShow.map((col, idx) => (
                                   <th
                                     key={idx}
-                                    className="px-3 py-2 text-left text-xs font-medium tracking-wider text-gray-500 uppercase"
+                                    className="px-3 py-2 text-left text-xs font-medium tracking-wider text-muted-foreground uppercase"
                                     style={{
                                       width: col.width ? `${col.width}px` : "auto",
                                       textAlign: col.align || "left",
@@ -3384,13 +3399,13 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                 {!isDesignMode &&
                                   ((componentConfig.rightPanel?.editButton?.enabled ?? true) ||
                                     (componentConfig.rightPanel?.deleteButton?.enabled ?? true)) && (
-                                    <th className="px-3 py-2 text-right text-xs font-medium text-gray-500 uppercase">
+                                    <th className="px-3 py-2 text-right text-xs font-medium text-muted-foreground uppercase">
                                       작업
                                     </th>
                                   )}
                               </tr>
                             </thead>
-                            <tbody className="divide-y divide-gray-200 bg-white">
+                            <tbody className="divide-y divide-border bg-white">
                               {filteredData.map((item, idx) => {
                                 const itemId = item.id || item.ID;
 
@@ -3399,7 +3414,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                     {columnsToShow.map((col, colIdx) => (
                                       <td
                                         key={colIdx}
-                                        className="px-3 py-2 text-sm whitespace-nowrap text-gray-900"
+                                        className="px-3 py-2 text-sm whitespace-nowrap text-foreground"
                                         style={{ textAlign: col.align || "left" }}
                                       >
                                         {formatCellValue(
@@ -3438,10 +3453,10 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                                   e.stopPropagation();
                                                   handleDeleteClick("right", item);
                                                 }}
-                                                className="rounded p-1 transition-colors hover:bg-red-100"
+                                                className="rounded p-1 transition-colors hover:bg-destructive/10"
                                                 title={componentConfig.rightPanel?.deleteButton?.buttonLabel || "삭제"}
                                               >
-                                                <Trash2 className="h-4 w-4 text-red-600" />
+                                                <Trash2 className="h-4 w-4 text-destructive" />
                                               </button>
                                             )}
                                           </div>
@@ -3571,16 +3586,16 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                         e.stopPropagation();
                                         handleDeleteClick("right", item);
                                       }}
-                                      className="rounded p-1 transition-colors hover:bg-red-100"
+                                      className="rounded p-1 transition-colors hover:bg-destructive/10"
                                       title={componentConfig.rightPanel?.deleteButton?.buttonLabel || "삭제"}
                                     >
-                                      <Trash2 className="h-4 w-4 text-red-600" />
+                                      <Trash2 className="h-4 w-4 text-destructive" />
                                     </button>
                                   )}
                                   {/* 확장/접기 버튼 */}
                                   <button
                                     onClick={() => toggleRightItemExpansion(itemId)}
-                                    className="rounded p-1 transition-colors hover:bg-gray-200"
+                                    className="rounded p-1 transition-colors hover:bg-muted/80"
                                   >
                                     {isExpanded ? (
                                       <ChevronUp className="text-muted-foreground h-5 w-5" />
@@ -3785,7 +3800,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                   <div key={index}>
                     <Label htmlFor={col.name} className="text-xs sm:text-sm">
                       {col.label} {col.required && <span className="text-destructive">*</span>}
-                      {isPreFilled && <span className="ml-2 text-[10px] text-blue-600">(자동 설정됨)</span>}
+                      {isPreFilled && <span className="ml-2 text-[10px] text-primary">(자동 설정됨)</span>}
                     </Label>
                     <Input
                       id={col.name}
diff --git a/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutConfigPanel.tsx b/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutConfigPanel.tsx
index d678332e..51441e88 100644
--- a/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutConfigPanel.tsx
+++ b/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutConfigPanel.tsx
@@ -250,16 +250,16 @@ const AdditionalTabConfigPanel: React.FC<AdditionalTabConfigPanelProps> = ({
     <AccordionItem
       key={tab.tabId}
       value={tab.tabId}
-      className="rounded-lg border bg-gray-50"
+      className="rounded-lg border bg-muted"
     >
       <AccordionTrigger className="px-3 py-2 hover:no-underline">
         <div className="flex flex-1 items-center gap-2">
-          <GripVertical className="h-4 w-4 text-gray-400" />
+          <GripVertical className="h-4 w-4 text-muted-foreground/70" />
           <span className="text-sm font-medium">
             {tab.label || `탭 ${tabIndex + 1}`}
           </span>
           {tab.tableName && (
-            <span className="text-xs text-gray-500">({tab.tableName})</span>
+            <span className="text-xs text-muted-foreground">({tab.tableName})</span>
           )}
         </div>
       </AccordionTrigger>
@@ -267,7 +267,7 @@ const AdditionalTabConfigPanel: React.FC<AdditionalTabConfigPanelProps> = ({
         <div className="space-y-4">
           {/* ===== 1. 기본 정보 ===== */}
           <div className="space-y-3 rounded-lg border bg-white p-3">
-            <Label className="text-xs font-semibold text-blue-600">기본 정보</Label>
+            <Label className="text-xs font-semibold text-primary">기본 정보</Label>
             <div className="grid grid-cols-2 gap-3">
               <div className="space-y-1">
                 <Label className="text-xs">탭 라벨</Label>
@@ -302,7 +302,7 @@ const AdditionalTabConfigPanel: React.FC<AdditionalTabConfigPanelProps> = ({
 
           {/* ===== 2. 테이블 선택 ===== */}
           <div className="space-y-3 rounded-lg border bg-white p-3">
-            <Label className="text-xs font-semibold text-blue-600">테이블 설정</Label>
+            <Label className="text-xs font-semibold text-primary">테이블 설정</Label>
             <div className="space-y-1">
               <Label className="text-xs">테이블 선택</Label>
               <Popover>
@@ -345,7 +345,7 @@ const AdditionalTabConfigPanel: React.FC<AdditionalTabConfigPanelProps> = ({
 
           {/* ===== 3. 표시 모드 ===== */}
           <div className="space-y-3 rounded-lg border bg-white p-3">
-            <Label className="text-xs font-semibold text-blue-600">표시 설정</Label>
+            <Label className="text-xs font-semibold text-primary">표시 설정</Label>
             <div className="space-y-1">
               <Label className="text-xs">표시 모드</Label>
               <Select
@@ -390,8 +390,8 @@ const AdditionalTabConfigPanel: React.FC<AdditionalTabConfigPanelProps> = ({
 
           {/* ===== 4. 컬럼 매핑 (연결 키) ===== */}
           <div className="space-y-3 rounded-lg border bg-white p-3">
-            <Label className="text-xs font-semibold text-blue-600">컬럼 매핑 (연결 키)</Label>
-            <p className="text-[10px] text-gray-500">
+            <Label className="text-xs font-semibold text-primary">컬럼 매핑 (연결 키)</Label>
+            <p className="text-[10px] text-muted-foreground">
               좌측 패널 선택 시 관련 데이터만 표시합니다
             </p>
             <div className="mt-2 grid grid-cols-2 gap-2">
@@ -472,7 +472,7 @@ const AdditionalTabConfigPanel: React.FC<AdditionalTabConfigPanelProps> = ({
 
           {/* ===== 5. 기능 버튼 ===== */}
           <div className="space-y-3 rounded-lg border bg-white p-3">
-            <Label className="text-xs font-semibold text-blue-600">기능 버튼</Label>
+            <Label className="text-xs font-semibold text-primary">기능 버튼</Label>
             <div className="grid grid-cols-4 gap-2">
               <div className="flex items-center gap-1">
                 <Checkbox
@@ -510,9 +510,9 @@ const AdditionalTabConfigPanel: React.FC<AdditionalTabConfigPanelProps> = ({
           </div>
 
           {/* ===== 6. 표시 컬럼 설정 ===== */}
-          <div className="space-y-3 rounded-lg border border-green-200 bg-green-50 p-3">
+          <div className="space-y-3 rounded-lg border border-emerald-200 bg-emerald-50 p-3">
             <div className="flex items-center justify-between">
-              <Label className="text-xs font-semibold text-green-700">표시할 컬럼 선택</Label>
+              <Label className="text-xs font-semibold text-emerald-700">표시할 컬럼 선택</Label>
               <Button
                 size="sm"
                 variant="outline"
@@ -528,14 +528,14 @@ const AdditionalTabConfigPanel: React.FC<AdditionalTabConfigPanelProps> = ({
                 컬럼 추가
               </Button>
             </div>
-            <p className="text-[10px] text-gray-600">
+            <p className="text-[10px] text-muted-foreground">
               표시할 컬럼을 선택하세요. 선택하지 않으면 모든 컬럼이 표시됩니다.
             </p>
 
             {/* 테이블 미선택 상태 */}
             {!tab.tableName && (
-              <div className="rounded-md border border-dashed border-gray-300 bg-white p-3 text-center">
-                <p className="text-xs text-gray-500">먼저 테이블을 선택하세요</p>
+              <div className="rounded-md border border-dashed border-input bg-white p-3 text-center">
+                <p className="text-xs text-muted-foreground">먼저 테이블을 선택하세요</p>
               </div>
             )}
 
@@ -544,16 +544,16 @@ const AdditionalTabConfigPanel: React.FC<AdditionalTabConfigPanelProps> = ({
               <div className="space-y-2">
                 {/* 로딩 상태 */}
                 {loadingTabColumns && (
-                  <div className="rounded-md border border-dashed border-gray-300 bg-white p-3 text-center">
-                    <p className="text-xs text-gray-500">컬럼을 불러오는 중...</p>
+                  <div className="rounded-md border border-dashed border-input bg-white p-3 text-center">
+                    <p className="text-xs text-muted-foreground">컬럼을 불러오는 중...</p>
                   </div>
                 )}
 
                 {/* 설정된 컬럼이 없을 때 */}
                 {!loadingTabColumns && (tab.columns || []).length === 0 && (
-                  <div className="rounded-md border border-dashed border-gray-300 bg-white p-3 text-center">
-                    <p className="text-xs text-gray-500">설정된 컬럼이 없습니다</p>
-                    <p className="mt-1 text-[10px] text-gray-400">컬럼을 추가하지 않으면 모든 컬럼이 표시됩니다</p>
+                  <div className="rounded-md border border-dashed border-input bg-white p-3 text-center">
+                    <p className="text-xs text-muted-foreground">설정된 컬럼이 없습니다</p>
+                    <p className="mt-1 text-[10px] text-muted-foreground/70">컬럼을 추가하지 않으면 모든 컬럼이 표시됩니다</p>
                   </div>
                 )}
 
@@ -593,7 +593,7 @@ const AdditionalTabConfigPanel: React.FC<AdditionalTabConfigPanelProps> = ({
                           >
                             <ArrowDown className="h-3 w-3" />
                           </Button>
-                          <span className="text-[10px] text-gray-400">#{colIndex + 1}</span>
+                          <span className="text-[10px] text-muted-foreground/70">#{colIndex + 1}</span>
                         </div>
                         <Button
                           size="sm"
@@ -602,7 +602,7 @@ const AdditionalTabConfigPanel: React.FC<AdditionalTabConfigPanelProps> = ({
                             const newColumns = (tab.columns || []).filter((_, i) => i !== colIndex);
                             updateTab({ columns: newColumns });
                           }}
-                          className="h-6 w-6 p-0 text-red-500 hover:bg-red-50 hover:text-red-600"
+                          className="h-6 w-6 p-0 text-destructive hover:bg-destructive/10 hover:text-destructive"
                         >
                           <X className="h-3 w-3" />
                         </Button>
@@ -610,7 +610,7 @@ const AdditionalTabConfigPanel: React.FC<AdditionalTabConfigPanelProps> = ({
 
                       {/* 컬럼 선택 */}
                       <div className="space-y-1">
-                        <Label className="text-[10px] text-gray-500">컬럼</Label>
+                        <Label className="text-[10px] text-muted-foreground">컬럼</Label>
                         <Select
                           value={col.name}
                           onValueChange={(value) => {
@@ -631,7 +631,7 @@ const AdditionalTabConfigPanel: React.FC<AdditionalTabConfigPanelProps> = ({
                             {tabColumns.map((column) => (
                               <SelectItem key={column.columnName} value={column.columnName}>
                                 {column.columnLabel || column.columnName}
-                                <span className="ml-1 text-[10px] text-gray-400">({column.columnName})</span>
+                                <span className="ml-1 text-[10px] text-muted-foreground/70">({column.columnName})</span>
                               </SelectItem>
                             ))}
                           </SelectContent>
@@ -641,7 +641,7 @@ const AdditionalTabConfigPanel: React.FC<AdditionalTabConfigPanelProps> = ({
                       {/* 라벨 + 너비 */}
                       <div className="grid grid-cols-2 gap-2">
                         <div className="space-y-1">
-                          <Label className="text-[10px] text-gray-500">라벨</Label>
+                          <Label className="text-[10px] text-muted-foreground">라벨</Label>
                           <Input
                             value={col.label}
                             onChange={(e) => {
@@ -654,7 +654,7 @@ const AdditionalTabConfigPanel: React.FC<AdditionalTabConfigPanelProps> = ({
                           />
                         </div>
                         <div className="space-y-1">
-                          <Label className="text-[10px] text-gray-500">너비 (px)</Label>
+                          <Label className="text-[10px] text-muted-foreground">너비 (px)</Label>
                           <Input
                             type="number"
                             value={col.width || 100}
@@ -698,8 +698,8 @@ const AdditionalTabConfigPanel: React.FC<AdditionalTabConfigPanelProps> = ({
 
               <div className="space-y-2">
                 {(tab.addModalColumns || []).length === 0 ? (
-                  <div className="rounded-md border border-dashed border-gray-300 bg-white p-3 text-center">
-                    <p className="text-xs text-gray-500">추가 모달에 표시할 컬럼을 설정하세요</p>
+                  <div className="rounded-md border border-dashed border-input bg-white p-3 text-center">
+                    <p className="text-xs text-muted-foreground">추가 모달에 표시할 컬럼을 설정하세요</p>
                   </div>
                 ) : (
                   (tab.addModalColumns || []).map((col, colIndex) => (
@@ -756,7 +756,7 @@ const AdditionalTabConfigPanel: React.FC<AdditionalTabConfigPanelProps> = ({
                           const newColumns = (tab.addModalColumns || []).filter((_, i) => i !== colIndex);
                           updateTab({ addModalColumns: newColumns });
                         }}
-                        className="h-8 w-8 p-0 text-red-500"
+                        className="h-8 w-8 p-0 text-destructive"
                       >
                         <X className="h-3 w-3" />
                       </Button>
@@ -769,7 +769,7 @@ const AdditionalTabConfigPanel: React.FC<AdditionalTabConfigPanelProps> = ({
 
           {/* ===== 8. 데이터 필터링 ===== */}
           <div className="space-y-3 rounded-lg border bg-white p-3">
-            <Label className="text-xs font-semibold text-blue-600">데이터 필터링</Label>
+            <Label className="text-xs font-semibold text-primary">데이터 필터링</Label>
             <DataFilterConfigPanel
               tableName={tab.tableName}
               columns={tabColumns}
@@ -782,7 +782,7 @@ const AdditionalTabConfigPanel: React.FC<AdditionalTabConfigPanelProps> = ({
           {/* ===== 9. 중복 데이터 제거 ===== */}
           <div className="space-y-3 rounded-lg border bg-white p-3">
             <div className="flex items-center justify-between">
-              <Label className="text-xs font-semibold text-blue-600">중복 데이터 제거</Label>
+              <Label className="text-xs font-semibold text-primary">중복 데이터 제거</Label>
               <Switch
                 checked={tab.deduplication?.enabled ?? false}
                 onCheckedChange={(checked) => {
@@ -874,8 +874,8 @@ const AdditionalTabConfigPanel: React.FC<AdditionalTabConfigPanelProps> = ({
 
           {/* ===== 10. 수정 버튼 설정 ===== */}
           {tab.showEdit && (
-            <div className="space-y-3 rounded-lg border border-blue-200 bg-blue-50 p-3">
-              <Label className="text-xs font-semibold text-blue-700">수정 버튼 설정</Label>
+            <div className="space-y-3 rounded-lg border border-primary/20 bg-primary/10 p-3">
+              <Label className="text-xs font-semibold text-primary">수정 버튼 설정</Label>
               <div className="space-y-2">
                 <div className="space-y-1">
                   <Label className="text-[10px]">수정 모드</Label>
@@ -950,7 +950,7 @@ const AdditionalTabConfigPanel: React.FC<AdditionalTabConfigPanelProps> = ({
                 {/* 그룹핑 기준 컬럼 */}
                 <div className="space-y-1">
                   <Label className="text-[10px]">그룹핑 기준 컬럼</Label>
-                  <p className="text-[9px] text-gray-500">수정 시 같은 값을 가진 레코드를 함께 불러옵니다</p>
+                  <p className="text-[9px] text-muted-foreground">수정 시 같은 값을 가진 레코드를 함께 불러옵니다</p>
                   <div className="max-h-[120px] space-y-1 overflow-y-auto rounded-md border bg-white p-2">
                     {tabColumns.map((col) => (
                       <div key={col.columnName} className="flex items-center gap-2">
@@ -980,8 +980,8 @@ const AdditionalTabConfigPanel: React.FC<AdditionalTabConfigPanelProps> = ({
 
           {/* ===== 11. 삭제 버튼 설정 ===== */}
           {tab.showDelete && (
-            <div className="space-y-3 rounded-lg border border-red-200 bg-red-50 p-3">
-              <Label className="text-xs font-semibold text-red-700">삭제 버튼 설정</Label>
+            <div className="space-y-3 rounded-lg border border-destructive/20 bg-destructive/10 p-3">
+              <Label className="text-xs font-semibold text-destructive">삭제 버튼 설정</Label>
               <div className="space-y-2">
                 <div className="grid grid-cols-2 gap-2">
                   <div className="space-y-1">
@@ -1041,7 +1041,7 @@ const AdditionalTabConfigPanel: React.FC<AdditionalTabConfigPanelProps> = ({
             <Button
               variant="ghost"
               size="sm"
-              className="text-red-500 hover:bg-red-50 hover:text-red-600"
+              className="text-destructive hover:bg-destructive/10 hover:text-destructive"
               onClick={() => {
                 const newTabs = config.rightPanel?.additionalTabs?.filter((_, i) => i !== tabIndex) || [];
                 updateRightPanel({ additionalTabs: newTabs });
@@ -1356,7 +1356,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
     return (
       <div className="rounded-lg border p-4">
         <p className="text-sm font-medium">테이블 데이터를 불러올 수 없습니다.</p>
-        <p className="mt-1 text-xs text-gray-600">
+        <p className="mt-1 text-xs text-muted-foreground">
           화면에 테이블이 연결되지 않았거나 테이블 목록이 로드되지 않았습니다.
         </p>
       </div>
@@ -1399,13 +1399,13 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
             <SelectItem value="detail">
               <div className="flex flex-col">
                 <span className="font-medium">상세 (DETAIL)</span>
-                <span className="text-xs text-gray-500">좌측 목록 → 우측 상세 정보 (동일 테이블)</span>
+                <span className="text-xs text-muted-foreground">좌측 목록 → 우측 상세 정보 (동일 테이블)</span>
               </div>
             </SelectItem>
             <SelectItem value="join">
               <div className="flex flex-col">
                 <span className="font-medium">조건 필터 (FILTERED)</span>
-                <span className="text-xs text-gray-500">좌측 선택 항목 기준으로 우측 테이블 필터링</span>
+                <span className="text-xs text-muted-foreground">좌측 선택 항목 기준으로 우측 테이블 필터링</span>
               </div>
             </SelectItem>
           </SelectContent>
@@ -1465,7 +1465,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
                             config.leftPanel?.tableName === screenTableName ? "opacity-100" : "opacity-0"
                           )}
                         />
-                        <Database className="mr-2 h-3.5 w-3.5 text-blue-500" />
+                        <Database className="mr-2 h-3.5 w-3.5 text-primary" />
                         {allTables.find((t) => (t.tableName || t.table_name) === screenTableName)?.tableLabel ||
                           allTables.find((t) => (t.tableName || t.table_name) === screenTableName)?.displayName ||
                           screenTableName}
@@ -1556,13 +1556,13 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
               <SelectItem value="list">
                 <div className="flex flex-col">
                   <span className="font-medium">목록 (LIST)</span>
-                  <span className="text-xs text-gray-500">클릭 가능한 항목 목록 (기본)</span>
+                  <span className="text-xs text-muted-foreground">클릭 가능한 항목 목록 (기본)</span>
                 </div>
               </SelectItem>
               <SelectItem value="table">
                 <div className="flex flex-col">
                   <span className="font-medium">테이블 (TABLE)</span>
-                  <span className="text-xs text-gray-500">컬럼 헤더가 있는 테이블 형식</span>
+                  <span className="text-xs text-muted-foreground">컬럼 헤더가 있는 테이블 형식</span>
                 </div>
               </SelectItem>
             </SelectContent>
@@ -1793,11 +1793,11 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
           // 상세 모드: 좌측과 동일한 테이블 (자동 설정)
           <div className="space-y-2">
             <Label>테이블 (좌측과 동일)</Label>
-            <div className="rounded-lg border border-gray-200 bg-gray-50 p-3">
-              <p className="text-sm font-medium text-gray-900">
+            <div className="rounded-lg border border-border bg-muted p-3">
+              <p className="text-sm font-medium text-foreground">
                 {config.leftPanel?.tableName || screenTableName || "테이블이 지정되지 않음"}
               </p>
-              <p className="mt-1 text-xs text-gray-500">상세 모드에서는 좌측과 동일한 테이블을 사용합니다</p>
+              <p className="mt-1 text-xs text-muted-foreground">상세 모드에서는 좌측과 동일한 테이블을 사용합니다</p>
             </div>
           </div>
         ) : (
@@ -1837,7 +1837,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
                           )}
                         />
                         {table.displayName || table.tableName}
-                        {table.displayName && <span className="ml-2 text-xs text-gray-500">({table.tableName})</span>}
+                        {table.displayName && <span className="ml-2 text-xs text-muted-foreground">({table.tableName})</span>}
                       </CommandItem>
                     ))}
                   </CommandGroup>
@@ -1860,13 +1860,13 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
               <SelectItem value="list">
                 <div className="flex flex-col">
                   <span className="font-medium">목록 (LIST)</span>
-                  <span className="text-xs text-gray-500">클릭 가능한 항목 목록 (기본)</span>
+                  <span className="text-xs text-muted-foreground">클릭 가능한 항목 목록 (기본)</span>
                 </div>
               </SelectItem>
               <SelectItem value="table">
                 <div className="flex flex-col">
                   <span className="font-medium">테이블 (TABLE)</span>
-                  <span className="text-xs text-gray-500">컬럼 헤더가 있는 테이블 형식</span>
+                  <span className="text-xs text-muted-foreground">컬럼 헤더가 있는 테이블 형식</span>
                 </div>
               </SelectItem>
             </SelectContent>
@@ -1875,7 +1875,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
 
         {/* 요약 표시 설정 (LIST 모드에서만) */}
         {(config.rightPanel?.displayMode || "list") === "list" && (
-          <div className="space-y-3 rounded-lg border border-gray-200 bg-gray-50 p-3">
+          <div className="space-y-3 rounded-lg border border-border bg-muted p-3">
             <Label className="text-sm font-semibold">요약 표시 설정</Label>
 
             <div className="space-y-2">
@@ -1891,13 +1891,13 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
                 }}
                 className="bg-white"
               />
-              <p className="text-xs text-gray-500">접기 전에 표시할 컬럼 개수 (기본: 3개)</p>
+              <p className="text-xs text-muted-foreground">접기 전에 표시할 컬럼 개수 (기본: 3개)</p>
             </div>
 
             <div className="flex items-center justify-between space-x-2">
               <div className="flex-1">
                 <Label className="text-xs">라벨 표시</Label>
-                <p className="text-xs text-gray-500">컬럼명 표시 여부</p>
+                <p className="text-xs text-muted-foreground">컬럼명 표시 여부</p>
               </div>
               <Checkbox
                 checked={config.rightPanel?.summaryShowLabel ?? true}
@@ -2418,7 +2418,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
       </div>
 
       {/* 🆕 우측 패널 삭제 버튼 설정 */}
-      <div className="space-y-3 rounded-lg border border-red-200 bg-red-50 p-3">
+      <div className="space-y-3 rounded-lg border border-destructive/20 bg-destructive/10 p-3">
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-2">
             <h3 className="text-sm font-semibold">삭제 버튼 설정</h3>
@@ -2568,7 +2568,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
           </Accordion>
         ) : (
           <div className="rounded-lg border border-dashed p-4 text-center">
-            <p className="text-xs text-gray-500">
+            <p className="text-xs text-muted-foreground">
               추가된 탭이 없습니다. [탭 추가] 버튼을 클릭하여 새 탭을 추가하세요.
             </p>
           </div>
diff --git a/frontend/lib/registry/components/split-panel-layout2/SplitPanelLayout2ConfigPanel.tsx b/frontend/lib/registry/components/split-panel-layout2/SplitPanelLayout2ConfigPanel.tsx
index cd93a3b5..7a529cc9 100644
--- a/frontend/lib/registry/components/split-panel-layout2/SplitPanelLayout2ConfigPanel.tsx
+++ b/frontend/lib/registry/components/split-panel-layout2/SplitPanelLayout2ConfigPanel.tsx
@@ -1545,7 +1545,7 @@ export const SplitPanelLayout2ConfigPanel: React.FC<SplitPanelLayout2ConfigPanel
           <p className="text-foreground mb-1 font-medium">좌측 패널 선택 시 우측 패널 데이터 필터링</p>
           <p>좌측에서 항목을 선택하면 좌측 조인 컬럼의 값으로 우측 테이블을 필터링합니다.</p>
           <p className="mt-1 text-[10px]">예: 부서(dept_code) 선택 시 해당 부서의 사원만 표시</p>
-          <p className="mt-1 text-[10px] text-blue-600">복합키: 여러 컬럼으로 조인 (예: item_code + lot_number)</p>
+          <p className="mt-1 text-[10px] text-primary">복합키: 여러 컬럼으로 조인 (예: item_code + lot_number)</p>
         </div>
 
         <div className="space-y-3">
diff --git a/frontend/lib/registry/components/table-list/CardModeRenderer.tsx b/frontend/lib/registry/components/table-list/CardModeRenderer.tsx
index 2676bed6..65bad9d4 100644
--- a/frontend/lib/registry/components/table-list/CardModeRenderer.tsx
+++ b/frontend/lib/registry/components/table-list/CardModeRenderer.tsx
@@ -69,7 +69,7 @@ export const CardModeRenderer: React.FC<CardModeRendererProps> = ({
     if (!config.showActions) return null;
 
     return (
-      <div className="mt-3 flex items-center justify-end space-x-1 border-t border-gray-100 pt-3">
+      <div className="mt-3 flex items-center justify-end space-x-1 border-t border-border pt-3">
         <Button
           variant="ghost"
           size="sm"
@@ -143,7 +143,7 @@ export const CardModeRenderer: React.FC<CardModeRendererProps> = ({
             key={`card-${index}-${idValue}`}
             style={cardStyle}
             className={`transition-all duration-200 hover:shadow-md ${
-              isSelected ? "bg-blue-50/30 ring-2 ring-blue-500" : ""
+              isSelected ? "bg-primary/10/30 ring-2 ring-ring" : ""
             }`}
             onClick={(e) => onRowClick?.(row, index, e)}
           >
@@ -151,7 +151,7 @@ export const CardModeRenderer: React.FC<CardModeRendererProps> = ({
               <div className="flex items-start justify-between">
                 <div className="min-w-0 flex-1">
                   <CardTitle className="truncate text-sm font-medium">{titleValue || "제목 없음"}</CardTitle>
-                  {subtitleValue && <div className="mt-1 truncate text-xs text-gray-500">{subtitleValue}</div>}
+                  {subtitleValue && <div className="mt-1 truncate text-xs text-muted-foreground">{subtitleValue}</div>}
                 </div>
 
                 {/* ID 뱃지 */}
@@ -170,7 +170,7 @@ export const CardModeRenderer: React.FC<CardModeRendererProps> = ({
                   <img
                     src={imageValue}
                     alt={titleValue}
-                    className="h-24 w-full rounded-md bg-gray-100 object-cover"
+                    className="h-24 w-full rounded-md bg-muted object-cover"
                     onError={(e) => {
                       const target = e.target as HTMLImageElement;
                       target.style.display = "none";
@@ -180,7 +180,7 @@ export const CardModeRenderer: React.FC<CardModeRendererProps> = ({
               )}
 
               {/* 설명 표시 */}
-              {descriptionValue && <div className="mb-3 line-clamp-2 text-xs text-gray-600">{descriptionValue}</div>}
+              {descriptionValue && <div className="mb-3 line-clamp-2 text-xs text-muted-foreground">{descriptionValue}</div>}
 
               {/* 추가 필드들 표시 (선택적) */}
               <div className="space-y-1">
@@ -202,7 +202,7 @@ export const CardModeRenderer: React.FC<CardModeRendererProps> = ({
 
                     return (
                       <div key={col.columnName} className="flex items-center justify-between text-xs">
-                        <span className="truncate text-gray-500">{col.displayName}:</span>
+                        <span className="truncate text-muted-foreground">{col.displayName}:</span>
                         <span className="ml-2 truncate font-medium">{value}</span>
                       </div>
                     );
diff --git a/frontend/lib/registry/components/table-list/TableListComponent.tsx b/frontend/lib/registry/components/table-list/TableListComponent.tsx
index a01e88ed..babec53c 100644
--- a/frontend/lib/registry/components/table-list/TableListComponent.tsx
+++ b/frontend/lib/registry/components/table-list/TableListComponent.tsx
@@ -9,6 +9,7 @@ import { codeCache } from "@/lib/caching/codeCache";
 import { useEntityJoinOptimization } from "@/lib/hooks/useEntityJoinOptimization";
 import { getFullImageUrl } from "@/lib/api/client";
 import { Button } from "@/components/ui/button";
+import { getAdaptiveLabelColor } from "@/lib/utils/darkModeColor";
 
 // 🆕 RelatedDataButtons 전역 레지스트리 타입 선언
 declare global {
@@ -268,7 +269,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
 
   // 디버그 로그 제거 (성능 최적화)
 
-  const buttonColor = component.style?.labelColor || "#212121";
+  const buttonColor = getAdaptiveLabelColor(component.style?.labelColor);
   const buttonTextColor = component.config?.buttonTextColor || "#ffffff";
 
   const gridColumns = component.gridColumns || 1;
@@ -919,66 +920,63 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
 
     // 컬럼의 고유 값 조회 함수
     const getColumnUniqueValues = async (columnName: string) => {
-      const meta = columnMeta[columnName];
-      const inputType = meta?.inputType || "text";
+      const { apiClient } = await import("@/lib/api/client");
 
-      // 카테고리 타입인 경우 전체 정의된 값 조회 (백엔드 API)
-      if (inputType === "category") {
-        try {
-          // API 클라이언트 사용 (쿠키 인증 자동 처리)
-          const { apiClient } = await import("@/lib/api/client");
-          const response = await apiClient.get(`/table-categories/${tableConfig.selectedTable}/${columnName}/values`);
-
-          if (response.data.success && response.data.data) {
-            const categoryOptions = response.data.data.map((item: any) => ({
-              value: item.valueCode, // 카멜케이스
-              label: item.valueLabel, // 카멜케이스
-            }));
-
-            return categoryOptions;
-          }
-        } catch {
-          // 에러 시 현재 데이터 기반으로 fallback
-        }
-      }
-
-      // 백엔드 DISTINCT API로 전체 고유값 조회 (페이징과 무관하게 모든 값 반환)
+      // 1단계: 카테고리 API 시도 (columnMeta 무관하게 항상 시도)
       try {
-        const { apiClient } = await import("@/lib/api/client");
-        const response = await apiClient.get(`/entity/${tableConfig.selectedTable}/distinct/${columnName}`);
-
+        const response = await apiClient.get(`/table-categories/${tableConfig.selectedTable}/${columnName}/values`);
         if (response.data.success && response.data.data && response.data.data.length > 0) {
           return response.data.data.map((item: any) => ({
-            value: String(item.value),
-            label: String(item.label),
+            value: item.valueCode,
+            label: item.valueLabel,
           }));
         }
       } catch {
-        // DISTINCT API 실패 시 현재 데이터 기반으로 fallback
+        // 카테고리 API 실패 시 다음 단계로
       }
 
-      // fallback: 현재 로드된 데이터에서 고유 값 추출
-      const isLabelType = ["category", "entity", "code"].includes(inputType);
-      const labelField = isLabelType ? `${columnName}_name` : columnName;
+      // 2단계: DISTINCT API (백엔드에서 category_values/code_info 라벨 변환 포함)
+      try {
+        const response = await apiClient.get(`/entity/${tableConfig.selectedTable}/distinct/${columnName}`);
+        if (response.data.success && response.data.data && response.data.data.length > 0) {
+          let options = response.data.data.map((item: any) => ({
+            value: String(item.value),
+            label: String(item.label),
+          }));
 
+          // 프론트엔드 카테고리 매핑으로 추가 라벨 변환
+          const mapping = categoryMappings[columnName];
+          if (mapping && Object.keys(mapping).length > 0) {
+            options = options.map((opt) => ({
+              value: opt.value,
+              label: mapping[opt.value]?.label || opt.label,
+            }));
+          }
+
+          return options;
+        }
+      } catch {
+        // DISTINCT API 실패 시 다음 단계로
+      }
+
+      // 3단계: 현재 로드된 데이터에서 고유 값 추출 (최종 fallback)
       const uniqueValuesMap = new Map<string, string>();
+      const mapping = categoryMappings[columnName];
 
       data.forEach((row) => {
         const value = row[columnName];
         if (value !== null && value !== undefined && value !== "") {
-          const label = isLabelType && row[labelField] ? row[labelField] : String(value);
-          uniqueValuesMap.set(String(value), label);
+          const strValue = String(value);
+          const nameField = row[`${columnName}_name`];
+          const mappedLabel = mapping?.[strValue]?.label;
+          const label = mappedLabel || nameField || strValue;
+          uniqueValuesMap.set(strValue, label);
         }
       });
 
-      const result = Array.from(uniqueValuesMap.entries())
-        .map(([value, label]) => ({
-          value: value,
-          label: label,
-        }))
+      return Array.from(uniqueValuesMap.entries())
+        .map(([value, label]) => ({ value, label }))
         .sort((a, b) => a.label.localeCompare(b.label));
-
-      return result;
     };
 
     const registration = {
@@ -1031,6 +1029,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
     tableConfig.columns,
     columnLabels,
     columnMeta, // columnMeta가 변경되면 재등록 (inputType 정보 필요)
+    categoryMappings, // 카테고리 매핑 변경 시 재등록 (필터 라벨 변환용)
     columnWidths,
     tableLabel,
     data, // 데이터 자체가 변경되면 재등록 (고유 값 조회용)
@@ -4246,8 +4245,8 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
 
         return (
           <div className="flex max-w-full items-center gap-1.5 text-sm">
-            <Paperclip className="h-4 w-4 flex-shrink-0 text-gray-500" />
-            <span className="truncate text-blue-600" title={fileNames}>
+            <Paperclip className="h-4 w-4 flex-shrink-0 text-muted-foreground" />
+            <span className="truncate text-primary" title={fileNames}>
               {fileNames}
             </span>
             {files.length > 1 && <span className="text-muted-foreground flex-shrink-0 text-xs">({files.length})</span>}
@@ -5146,7 +5145,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
               <div className="flex flex-col gap-1">
                 <div className="text-muted-foreground px-2 py-1 text-xs font-medium">Excel</div>
                 <Button variant="ghost" size="sm" className="justify-start text-xs" onClick={() => exportToExcel(true)}>
-                  <FileSpreadsheet className="mr-2 h-3 w-3 text-green-600" />
+                  <FileSpreadsheet className="mr-2 h-3 w-3 text-emerald-600" />
                   전체 Excel 내보내기
                 </Button>
                 <Button
@@ -5156,13 +5155,13 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                   onClick={() => exportToExcel(false)}
                   disabled={selectedRows.size === 0}
                 >
-                  <FileSpreadsheet className="mr-2 h-3 w-3 text-green-600" />
+                  <FileSpreadsheet className="mr-2 h-3 w-3 text-emerald-600" />
                   선택 항목만 ({selectedRows.size}개)
                 </Button>
                 <div className="border-border my-1 border-t" />
                 <div className="text-muted-foreground px-2 py-1 text-xs font-medium">PDF/인쇄</div>
                 <Button variant="ghost" size="sm" className="justify-start text-xs" onClick={() => exportToPdf(true)}>
-                  <FileText className="mr-2 h-3 w-3 text-red-600" />
+                  <FileText className="mr-2 h-3 w-3 text-destructive" />
                   전체 PDF 내보내기
                 </Button>
                 <Button
@@ -5172,7 +5171,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                   onClick={() => exportToPdf(false)}
                   disabled={selectedRows.size === 0}
                 >
-                  <FileText className="mr-2 h-3 w-3 text-red-600" />
+                  <FileText className="mr-2 h-3 w-3 text-destructive" />
                   선택 항목만 ({selectedRows.size}개)
                 </Button>
               </div>
@@ -5355,7 +5354,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                   className="h-7 text-xs"
                   title="Excel 내보내기"
                 >
-                  <FileSpreadsheet className="mr-1 h-3 w-3 text-green-600" />
+                  <FileSpreadsheet className="mr-1 h-3 w-3 text-emerald-600" />
                   Excel
                 </Button>
               )}
@@ -5367,7 +5366,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                   className="h-7 text-xs"
                   title="PDF 내보내기"
                 >
-                  <FileText className="mr-1 h-3 w-3 text-red-600" />
+                  <FileText className="mr-1 h-3 w-3 text-destructive" />
                   PDF
                 </Button>
               )}
@@ -5879,7 +5878,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                         {/* 리사이즈 핸들 (체크박스 제외) */}
                         {columnIndex < visibleColumns.length - 1 && column.columnName !== "__checkbox__" && (
                           <div
-                            className="absolute top-0 right-0 z-20 h-full w-2 cursor-col-resize hover:bg-blue-500"
+                            className="absolute top-0 right-0 z-20 h-full w-2 cursor-col-resize hover:bg-primary"
                             style={{ marginRight: "-4px", paddingLeft: "4px", paddingRight: "4px" }}
                             onClick={(e) => e.stopPropagation()} // 정렬 클릭 방지
                             onMouseDown={(e) => {
@@ -6228,11 +6227,11 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                                   // 🆕 배치 편집: 수정된 셀 스타일 (노란 배경)
                                   isModified && !cellValidationError && "bg-amber-100 dark:bg-amber-900/40",
                                   // 🆕 유효성 에러: 빨간 테두리 및 배경
-                                  cellValidationError && "bg-red-50 ring-2 ring-red-500 ring-inset dark:bg-red-950/40",
+                                  cellValidationError && "bg-destructive/10 ring-2 ring-destructive ring-inset dark:bg-destructive/15",
                                   // 🆕 검색 하이라이트 스타일 (노란 배경)
                                   isSearchHighlighted && !isCellFocused && "bg-yellow-200 dark:bg-yellow-700/50",
                                   // 🆕 편집 불가 컬럼 스타일 (연한 회색 배경)
-                                  column.editable === false && "bg-gray-50 dark:bg-gray-900/30",
+                                  column.editable === false && "bg-muted dark:bg-foreground/30",
                                 )}
                                 // 🆕 유효성 에러 툴팁
                                 title={cellValidationError || undefined}
@@ -6610,7 +6609,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
 
             {/* 행 삭제 */}
             <button
-              className="hover:bg-destructive hover:text-destructive-foreground flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm text-red-600"
+              className="hover:bg-destructive hover:text-destructive-foreground flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm text-destructive"
               onClick={async () => {
                 if (confirm("이 행을 삭제하시겠습니까?")) {
                   try {
@@ -6677,7 +6676,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                       variant="ghost"
                       size="sm"
                       onClick={() => removeFilterGroup(group.id)}
-                      className="h-6 w-6 p-0 text-red-500 hover:text-red-700"
+                      className="h-6 w-6 p-0 text-destructive hover:text-destructive"
                     >
                       <X className="h-4 w-4" />
                     </Button>
@@ -6737,7 +6736,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                           variant="ghost"
                           size="sm"
                           onClick={() => removeFilterCondition(group.id, condition.id)}
-                          className="h-6 w-6 p-0 text-red-500 hover:text-red-700"
+                          className="h-6 w-6 p-0 text-destructive hover:text-destructive"
                           disabled={group.conditions.length === 1}
                         >
                           <X className="h-3 w-3" />
diff --git a/frontend/lib/registry/components/table-list/TableListConfigPanel.tsx b/frontend/lib/registry/components/table-list/TableListConfigPanel.tsx
index 8526b0c9..2ea7f0af 100644
--- a/frontend/lib/registry/components/table-list/TableListConfigPanel.tsx
+++ b/frontend/lib/registry/components/table-list/TableListConfigPanel.tsx
@@ -49,14 +49,14 @@ function SortableColumnRow({
       className={cn(
         "bg-card flex items-center gap-1.5 rounded-md border px-2 py-1.5",
         isDragging && "z-50 opacity-50 shadow-md",
-        isEntityJoin && "border-blue-200 bg-blue-50/30",
+        isEntityJoin && "border-primary/20 bg-primary/10/30",
       )}
     >
       <div {...attributes} {...listeners} className="text-muted-foreground hover:text-foreground cursor-grab touch-none">
         <GripVertical className="h-3 w-3" />
       </div>
       {isEntityJoin ? (
-        <Link2 className="h-3 w-3 shrink-0 text-blue-500" />
+        <Link2 className="h-3 w-3 shrink-0 text-primary" />
       ) : (
         <span className="text-muted-foreground w-5 shrink-0 text-center text-[10px] font-medium">#{index + 1}</span>
       )}
@@ -977,7 +977,7 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
                   placeholder="8"
                   className="h-8"
                 />
-                <div className="text-xs text-gray-500">이 수를 넘는 컬럼이 있으면 가로 스크롤이 생성됩니다</div>
+                <div className="text-xs text-muted-foreground">이 수를 넘는 컬럼이 있으면 가로 스크롤이 생성됩니다</div>
               </div>
             </div>
           )}
@@ -1016,7 +1016,7 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
                         <Label className="text-xs">표시할 컬럼 선택</Label>
                         {entityDisplayConfigs[column.columnName].sourceColumns.length === 0 &&
                         entityDisplayConfigs[column.columnName].joinColumns.length === 0 ? (
-                          <div className="py-2 text-center text-xs text-gray-400">
+                          <div className="py-2 text-center text-xs text-muted-foreground/70">
                             표시 가능한 컬럼이 없습니다.
                             {!column.entityDisplayConfig?.joinTable && (
                               <p className="mt-1 text-[10px]">
@@ -1101,7 +1101,7 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
                       {/* 참조 테이블 미설정 안내 */}
                       {!column.entityDisplayConfig?.joinTable &&
                         entityDisplayConfigs[column.columnName].sourceColumns.length > 0 && (
-                          <div className="rounded bg-blue-50 p-2 text-[10px] text-blue-600">
+                          <div className="rounded bg-primary/10 p-2 text-[10px] text-primary">
                             현재 기본 테이블 컬럼만 표시됩니다. 테이블 타입 관리에서 참조 테이블을 설정하면 조인된
                             테이블의 컬럼도 선택할 수 있습니다.
                           </div>
@@ -1111,14 +1111,14 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
                       {entityDisplayConfigs[column.columnName].selectedColumns.length > 0 && (
                         <div className="space-y-1">
                           <Label className="text-xs">미리보기</Label>
-                          <div className="flex flex-wrap gap-1 rounded bg-gray-50 p-2 text-xs">
+                          <div className="flex flex-wrap gap-1 rounded bg-muted p-2 text-xs">
                             {entityDisplayConfigs[column.columnName].selectedColumns.map((colName, idx) => (
                               <React.Fragment key={colName}>
                                 <Badge variant="secondary" className="text-xs">
                                   {colName}
                                 </Badge>
                                 {idx < entityDisplayConfigs[column.columnName].selectedColumns.length - 1 && (
-                                  <span className="text-gray-400">
+                                  <span className="text-muted-foreground/70">
                                     {entityDisplayConfigs[column.columnName].separator}
                                   </span>
                                 )}
@@ -1129,7 +1129,7 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
                       )}
                     </div>
                   ) : (
-                    <div className="py-4 text-center text-xs text-gray-400">컬럼 정보 로딩 중...</div>
+                    <div className="py-4 text-center text-xs text-muted-foreground/70">컬럼 정보 로딩 중...</div>
                   )}
                 </div>
               ))}
@@ -1138,17 +1138,17 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
 
         {!screenTableName ? (
           <div className="space-y-3">
-            <div className="text-center text-gray-500">
+            <div className="text-center text-muted-foreground">
               <p>테이블이 연결되지 않았습니다.</p>
               <p className="text-sm">화면에 테이블을 연결한 후 컬럼을 설정할 수 있습니다.</p>
             </div>
           </div>
         ) : availableColumns.length === 0 ? (
           <div className="space-y-3">
-            <div className="text-center text-gray-500">
+            <div className="text-center text-muted-foreground">
               <p>컬럼을 추가하려면 먼저 컴포넌트에 테이블을 명시적으로 선택하거나</p>
               <p className="text-sm">기본 설정 탭에서 테이블을 설정해주세요.</p>
-              <p className="mt-2 text-xs text-blue-600">현재 화면 테이블: {screenTableName}</p>
+              <p className="mt-2 text-xs text-primary">현재 화면 테이블: {screenTableName}</p>
             </div>
           </div>
         ) : (
@@ -1193,7 +1193,7 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
                         />
                         <Database className="text-muted-foreground h-3 w-3 flex-shrink-0" />
                         <span className="truncate text-xs">{column.label || column.columnName}</span>
-                        <span className="text-[10px] text-gray-400 ml-auto">{column.input_type || column.dataType}</span>
+                        <span className="text-[10px] text-muted-foreground/70 ml-auto">{column.input_type || column.dataType}</span>
                       </div>
                     );
                   })}
@@ -1214,14 +1214,14 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
                 <div className="space-y-3">
                   {entityJoinColumns.joinTables.map((joinTable, tableIndex) => (
                     <div key={tableIndex} className="space-y-1">
-                      <div className="flex items-center gap-2 text-[10px] font-medium text-blue-600 mb-1">
+                      <div className="flex items-center gap-2 text-[10px] font-medium text-primary mb-1">
                         <Link2 className="h-3 w-3" />
                         <span>{joinTable.tableName}</span>
                         <Badge variant="outline" className="text-[10px]">
                           {joinTable.currentDisplayColumn}
                         </Badge>
                       </div>
-                      <div className="max-h-28 space-y-0.5 overflow-y-auto rounded-md border border-blue-200 bg-blue-50/30 p-2">
+                      <div className="max-h-28 space-y-0.5 overflow-y-auto rounded-md border border-primary/20 bg-primary/10/30 p-2">
                       {joinTable.availableColumns.map((column, colIndex) => {
                         const matchingJoinColumn = entityJoinColumns.availableColumns.find(
                           (jc) => jc.tableName === joinTable.tableName && jc.columnName === column.columnName,
@@ -1237,8 +1237,8 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
                   <div
                               key={colIndex}
                               className={cn(
-                                "hover:bg-blue-100/50 flex cursor-pointer items-center gap-2 rounded px-2 py-1",
-                                isAlreadyAdded && "bg-blue-100",
+                                "hover:bg-primary/10/50 flex cursor-pointer items-center gap-2 rounded px-2 py-1",
+                                isAlreadyAdded && "bg-primary/10",
                               )}
                         onClick={() => {
                                 if (isAlreadyAdded) {
@@ -1261,9 +1261,9 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
                         }}
                                 className="pointer-events-none h-3.5 w-3.5"
                               />
-                              <Link2 className="text-blue-500 h-3 w-3 flex-shrink-0" />
+                              <Link2 className="text-primary h-3 w-3 flex-shrink-0" />
                               <span className="truncate text-xs">{column.columnLabel}</span>
-                              <span className="text-[10px] text-blue-400 ml-auto">{column.inputType || column.dataType}</span>
+                              <span className="text-[10px] text-primary/80 ml-auto">{column.inputType || column.dataType}</span>
                   </div>
                 );
               })}
diff --git a/frontend/lib/registry/components/table-search-widget/TableSearchWidget.tsx b/frontend/lib/registry/components/table-search-widget/TableSearchWidget.tsx
index 2422c89e..17705ff6 100644
--- a/frontend/lib/registry/components/table-search-widget/TableSearchWidget.tsx
+++ b/frontend/lib/registry/components/table-search-widget/TableSearchWidget.tsx
@@ -393,12 +393,14 @@ export function TableSearchWidget({ component, screenId, onHeightChange }: Table
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentTable?.tableName, filterMode, screenId, currentTableTabId, JSON.stringify(presetFilters)]);
 
-  // select 옵션 초기 로드 (한 번만 실행, 이후 유지)
+  // select 옵션 로드 (getColumnUniqueValues 변경 시 재로드 - columnMeta 갱신 반영)
   useEffect(() => {
     if (!currentTable?.getColumnUniqueValues || activeFilters.length === 0) {
       return;
     }
 
+    let cancelled = false;
+
     const loadSelectOptions = async () => {
       const selectFilters = activeFilters.filter((f) => f.filterType === "select");
 
@@ -406,26 +408,28 @@ export function TableSearchWidget({ component, screenId, onHeightChange }: Table
         return;
       }
 
-      const newOptions: Record<string, Array<{ label: string; value: string }>> = { ...selectOptions };
+      const newOptions: Record<string, Array<{ label: string; value: string }>> = {};
 
       for (const filter of selectFilters) {
-        // 이미 로드된 옵션이 있으면 스킵 (초기값 유지)
-        if (newOptions[filter.columnName] && newOptions[filter.columnName].length > 0) {
-          continue;
-        }
-
         try {
           const options = await currentTable.getColumnUniqueValues(filter.columnName);
-          newOptions[filter.columnName] = options;
+          if (options && options.length > 0) {
+            newOptions[filter.columnName] = options;
+          }
         } catch (error) {
           console.error("❌ [TableSearchWidget] select 옵션 로드 실패:", filter.columnName, error);
         }
       }
-      setSelectOptions(newOptions);
+
+      if (!cancelled && Object.keys(newOptions).length > 0) {
+        setSelectOptions((prev) => ({ ...prev, ...newOptions }));
+      }
     };
 
     loadSelectOptions();
-  }, [activeFilters, currentTable?.tableName, currentTable?.getColumnUniqueValues]); // dataCount 제거, tableName으로 변경
+
+    return () => { cancelled = true; };
+  }, [activeFilters, currentTable?.tableName, currentTable?.getColumnUniqueValues]);
 
   // 높이 변화 감지 및 알림 (실제 화면에서만)
   useEffect(() => {
diff --git a/frontend/lib/registry/components/tabs/tabs-component.tsx b/frontend/lib/registry/components/tabs/tabs-component.tsx
index b90c2a76..f45ee145 100644
--- a/frontend/lib/registry/components/tabs/tabs-component.tsx
+++ b/frontend/lib/registry/components/tabs/tabs-component.tsx
@@ -88,17 +88,17 @@ ComponentRegistry.registerComponent({
     
     return (
       <div
-        className="flex h-full w-full items-center justify-center rounded border-2 border-dashed border-gray-300 bg-gray-50"
+        className="flex h-full w-full items-center justify-center rounded border-2 border-dashed border-input bg-muted"
         onClick={onClick}
         onDragStart={onDragStart}
         onDragEnd={onDragEnd}
       >
         <div className="text-center">
           <div className="flex items-center justify-center">
-            <Folder className="h-8 w-8 text-gray-400" />
+            <Folder className="h-8 w-8 text-muted-foreground/70" />
           </div>
           <p className="text-muted-foreground mt-2 text-sm font-medium">탭 컴포넌트</p>
-          <p className="text-xs text-gray-400">
+          <p className="text-xs text-muted-foreground/70">
             {tabs.length > 0
               ? `${tabs.length}개의 탭 (실제 화면에서 표시됩니다)`
               : "탭이 없습니다. 설정 패널에서 탭을 추가하세요"}
diff --git a/frontend/lib/registry/components/tax-invoice-list/TaxInvoiceListComponent.tsx b/frontend/lib/registry/components/tax-invoice-list/TaxInvoiceListComponent.tsx
index 43bad4f2..aa587caa 100644
--- a/frontend/lib/registry/components/tax-invoice-list/TaxInvoiceListComponent.tsx
+++ b/frontend/lib/registry/components/tax-invoice-list/TaxInvoiceListComponent.tsx
@@ -22,7 +22,7 @@ export function TaxInvoiceListComponent({
   // 편집 모드에서는 플레이스홀더 표시
   if (isEditMode) {
     return (
-      <div className="flex h-full min-h-[300px] items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50">
+      <div className="flex h-full min-h-[300px] items-center justify-center rounded-lg border-2 border-dashed border-input bg-muted">
         <div className="text-center">
           <div className="text-muted-foreground mb-2 text-4xl">📄</div>
           <p className="text-muted-foreground text-sm font-medium">세금계산서 목록</p>
diff --git a/frontend/lib/registry/components/test-input/TestInputComponent.tsx b/frontend/lib/registry/components/test-input/TestInputComponent.tsx
index 7042c813..17c033fc 100644
--- a/frontend/lib/registry/components/test-input/TestInputComponent.tsx
+++ b/frontend/lib/registry/components/test-input/TestInputComponent.tsx
@@ -3,6 +3,7 @@
 import React from "react";
 import { ComponentRendererProps } from "@/types/component";
 import { TestInputConfig } from "./types";
+import { getAdaptiveLabelColor } from "@/lib/utils/darkModeColor";
 
 export interface TestInputComponentProps extends ComponentRendererProps {
   config?: TestInputConfig;
@@ -81,7 +82,7 @@ export const TestInputComponent: React.FC<TestInputComponentProps> = ({
             top: "-25px",
             left: "0px",
             fontSize: component.style?.labelFontSize || "14px",
-            color: component.style?.labelColor || "#64748b",
+            color: getAdaptiveLabelColor(component.style?.labelColor),
             fontWeight: "500",
           }}
         >
diff --git a/frontend/lib/registry/components/text-display/TextDisplayComponent.tsx b/frontend/lib/registry/components/text-display/TextDisplayComponent.tsx
index 07ce3f34..38a42a75 100644
--- a/frontend/lib/registry/components/text-display/TextDisplayComponent.tsx
+++ b/frontend/lib/registry/components/text-display/TextDisplayComponent.tsx
@@ -3,6 +3,7 @@
 import React from "react";
 import { ComponentRendererProps } from "../../types";
 import { TextDisplayConfig } from "./types";
+import { getAdaptiveLabelColor } from "@/lib/utils/darkModeColor";
 import { filterDOMProps } from "@/lib/utils/domPropsFilter";
 
 export interface TextDisplayComponentProps extends ComponentRendererProps {
@@ -60,7 +61,7 @@ export const TextDisplayComponent: React.FC<TextDisplayComponentProps> = ({
   const textStyle: React.CSSProperties = {
     fontSize: componentConfig.fontSize || "14px",
     fontWeight: componentConfig.fontWeight || "normal",
-    color: componentConfig.color || "#212121",
+    color: getAdaptiveLabelColor(componentConfig.color),
     textAlign: componentConfig.textAlign || "left",
     backgroundColor: componentConfig.backgroundColor || "transparent",
     padding: componentConfig.padding || "0",
@@ -92,7 +93,7 @@ export const TextDisplayComponent: React.FC<TextDisplayComponentProps> = ({
             top: "-25px",
             left: "0px",
             fontSize: component.style?.labelFontSize || "14px",
-            color: component.style?.labelColor || "#64748b",
+            color: getAdaptiveLabelColor(component.style?.labelColor),
             fontWeight: "500",
           }}
         >
diff --git a/frontend/lib/registry/components/text-input/TextInputComponent.tsx b/frontend/lib/registry/components/text-input/TextInputComponent.tsx
index c51b0c0f..41eeb6b4 100644
--- a/frontend/lib/registry/components/text-input/TextInputComponent.tsx
+++ b/frontend/lib/registry/components/text-input/TextInputComponent.tsx
@@ -732,7 +732,7 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
       {component.label && component.style?.labelDisplay !== false && (
         <label className="absolute -top-6 left-0 text-sm font-medium text-slate-600">
           {component.label}
-          {component.required && <span className="text-red-500">*</span>}
+          {component.required && <span className="text-destructive">*</span>}
         </label>
       )}
 
@@ -743,8 +743,8 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
             className={cn(
               "rounded-full px-2 py-0.5 text-[10px] font-medium",
               isManualMode
-                ? "bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400"
-                : "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400",
+                ? "bg-amber-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400"
+                : "bg-primary/10 text-primary dark:bg-primary/20 dark:text-primary/80",
             )}
           >
             {isManualMode ? "수동" : "자동"}
diff --git a/frontend/lib/registry/components/text-input/TextInputConfigPanel.tsx b/frontend/lib/registry/components/text-input/TextInputConfigPanel.tsx
index 5dd67812..820fcd17 100644
--- a/frontend/lib/registry/components/text-input/TextInputConfigPanel.tsx
+++ b/frontend/lib/registry/components/text-input/TextInputConfigPanel.tsx
@@ -189,7 +189,7 @@ export const TextInputConfigPanel: React.FC<TextInputConfigPanelProps> = ({ conf
 
             {/* 선택된 타입 설명 */}
             {config.autoGeneration?.type && config.autoGeneration.type !== "none" && (
-              <div className="text-xs text-gray-500">
+              <div className="text-xs text-muted-foreground">
                 {AutoGenerationUtils.getTypeDescription(config.autoGeneration.type)}
               </div>
             )}
@@ -379,7 +379,7 @@ export const TextInputConfigPanel: React.FC<TextInputConfigPanelProps> = ({ conf
               {/* 미리보기 */}
               <div className="space-y-1">
                 <Label className="text-xs">미리보기</Label>
-                <div className="rounded border bg-gray-100 p-2 text-xs">
+                <div className="rounded border bg-muted p-2 text-xs">
                   {AutoGenerationUtils.generatePreviewValue(config.autoGeneration)}
                 </div>
               </div>
diff --git a/frontend/lib/registry/components/textarea-basic/TextareaBasicComponent.tsx b/frontend/lib/registry/components/textarea-basic/TextareaBasicComponent.tsx
index 998e6f52..c1089410 100644
--- a/frontend/lib/registry/components/textarea-basic/TextareaBasicComponent.tsx
+++ b/frontend/lib/registry/components/textarea-basic/TextareaBasicComponent.tsx
@@ -3,6 +3,7 @@
 import React from "react";
 import { ComponentRendererProps } from "@/types/component";
 import { TextareaBasicConfig } from "./types";
+import { getAdaptiveLabelColor } from "@/lib/utils/darkModeColor";
 
 export interface TextareaBasicComponentProps extends ComponentRendererProps {
   config?: TextareaBasicConfig;
@@ -68,7 +69,7 @@ export const TextareaBasicComponent: React.FC<TextareaBasicComponentProps> = ({
             top: "-25px",
             left: "0px",
             fontSize: component.style?.labelFontSize || "14px",
-            color: component.style?.labelColor || "#64748b",
+            color: getAdaptiveLabelColor(component.style?.labelColor),
             fontWeight: "500",
             // isInteractive 모드에서는 사용자 스타일 우선 적용
             ...(isInteractive && component.style ? component.style : {}),
diff --git a/frontend/lib/registry/components/toggle-switch/ToggleSwitchComponent.tsx b/frontend/lib/registry/components/toggle-switch/ToggleSwitchComponent.tsx
index 4d9fcbe2..506e0f85 100644
--- a/frontend/lib/registry/components/toggle-switch/ToggleSwitchComponent.tsx
+++ b/frontend/lib/registry/components/toggle-switch/ToggleSwitchComponent.tsx
@@ -3,6 +3,7 @@
 import React from "react";
 import { ComponentRendererProps } from "@/types/component";
 import { ToggleSwitchConfig } from "./types";
+import { getAdaptiveLabelColor } from "@/lib/utils/darkModeColor";
 
 export interface ToggleSwitchComponentProps extends ComponentRendererProps {
   config?: ToggleSwitchConfig;
@@ -86,7 +87,7 @@ export const ToggleSwitchComponent: React.FC<ToggleSwitchComponentProps> = ({
             top: "-25px",
             left: "0px",
             fontSize: component.style?.labelFontSize || "14px",
-            color: component.style?.labelColor || "#64748b",
+            color: getAdaptiveLabelColor(component.style?.labelColor),
             fontWeight: "500",
             // isInteractive 모드에서는 사용자 스타일 우선 적용
             ...(isInteractive && component.style ? component.style : {}),
@@ -189,7 +190,7 @@ export const ToggleSwitchComponent: React.FC<ToggleSwitchComponentProps> = ({
         </div>
         <span
           style={{
-            color: "#212121",
+            color: "hsl(var(--foreground))",
             // isInteractive 모드에서는 사용자 스타일 우선 적용
             ...(isInteractive && component.style ? component.style : {}),
           }}
diff --git a/frontend/lib/registry/components/universal-form-modal/UniversalFormModalComponent.tsx b/frontend/lib/registry/components/universal-form-modal/UniversalFormModalComponent.tsx
index d0961021..84a090d0 100644
--- a/frontend/lib/registry/components/universal-form-modal/UniversalFormModalComponent.tsx
+++ b/frontend/lib/registry/components/universal-form-modal/UniversalFormModalComponent.tsx
@@ -42,6 +42,7 @@ import {
 } from "./types";
 import { defaultConfig, generateUniqueId } from "./config";
 import { TableSectionRenderer } from "./TableSectionRenderer";
+import { isColumnRequiredByMeta } from "@/lib/registry/DynamicComponentRenderer";
 
 /**
  * 🔗 연쇄 드롭다운 Select 필드 컴포넌트
@@ -1438,15 +1439,17 @@ export function UniversalFormModalComponent({
     [linkedFieldDataCache],
   );
 
-  // 필수 필드 검증
+  // 필수 필드 검증 (수동 required + NOT NULL 메타데이터 통합)
+  const mainTableName = config.saveConfig?.customApiSave?.multiTable?.mainTable?.tableName || config.saveConfig?.tableName;
   const validateRequiredFields = useCallback((): { valid: boolean; missingFields: string[] } => {
     const missingFields: string[] = [];
 
     for (const section of config.sections) {
-      if (section.repeatable || section.type === "table") continue; // 반복 섹션 및 테이블 섹션은 별도 검증
+      if (section.repeatable || section.type === "table") continue;
 
       for (const field of section.fields || []) {
-        if (field.required && !field.hidden && !field.numberingRule?.hidden) {
+        const isRequired = field.required || isColumnRequiredByMeta(mainTableName, field.columnName);
+        if (isRequired && !field.hidden && !field.numberingRule?.hidden) {
           const value = formData[field.columnName];
           if (value === undefined || value === null || value === "") {
             missingFields.push(field.label || field.columnName);
@@ -1456,7 +1459,7 @@ export function UniversalFormModalComponent({
     }
 
     return { valid: missingFields.length === 0, missingFields };
-  }, [config.sections, formData]);
+  }, [config.sections, formData, mainTableName]);
 
   // 다중 테이블 저장 (범용)
   const saveWithMultiTable = useCallback(async () => {
@@ -2007,8 +2010,7 @@ export function UniversalFormModalComponent({
     return (
       <div key={fieldKey} className="space-y-1" style={{ gridColumn: `span ${actualGridSpan}` }}>
         <Label htmlFor={fieldKey} className="text-sm font-medium">
-          {field.label}
-          {field.required && <span className="text-destructive ml-1">*</span>}
+          {field.label}{(field.required || isColumnRequiredByMeta(mainTableName, field.columnName)) && <span className="text-orange-500">*</span>}
           {field.numberingRule?.enabled && <span className="text-muted-foreground ml-1 text-xs">(자동생성)</span>}
         </Label>
         {fieldElement}
diff --git a/frontend/lib/registry/components/universal-form-modal/UniversalFormModalConfigPanel.tsx b/frontend/lib/registry/components/universal-form-modal/UniversalFormModalConfigPanel.tsx
index 575b9482..fb20b817 100644
--- a/frontend/lib/registry/components/universal-form-modal/UniversalFormModalConfigPanel.tsx
+++ b/frontend/lib/registry/components/universal-form-modal/UniversalFormModalConfigPanel.tsx
@@ -495,20 +495,20 @@ export function UniversalFormModalConfigPanel({
       case "email":
       case "password":
       case "tel":
-        return "text-blue-600 bg-blue-50 border-blue-200";
+        return "text-primary bg-primary/10 border-primary/20";
       case "number":
         return "text-cyan-600 bg-cyan-50 border-cyan-200";
       case "date":
       case "datetime":
         return "text-purple-600 bg-purple-50 border-purple-200";
       case "select":
-        return "text-green-600 bg-green-50 border-green-200";
+        return "text-emerald-600 bg-emerald-50 border-emerald-200";
       case "checkbox":
         return "text-pink-600 bg-pink-50 border-pink-200";
       case "textarea":
-        return "text-orange-600 bg-orange-50 border-orange-200";
+        return "text-amber-600 bg-amber-50 border-orange-200";
       default:
-        return "text-gray-600 bg-gray-50 border-gray-200";
+        return "text-muted-foreground bg-muted border-border";
     }
   };
 
diff --git a/frontend/lib/registry/components/universal-form-modal/modals/FieldDetailSettingsModal.tsx b/frontend/lib/registry/components/universal-form-modal/modals/FieldDetailSettingsModal.tsx
index 954d0192..9fa2e0a0 100644
--- a/frontend/lib/registry/components/universal-form-modal/modals/FieldDetailSettingsModal.tsx
+++ b/frontend/lib/registry/components/universal-form-modal/modals/FieldDetailSettingsModal.tsx
@@ -421,9 +421,9 @@ export function FieldDetailSettingsModal({
                 {/* Select 옵션 설정 */}
                 {localField.fieldType === "select" && (
                   <AccordionItem value="select-options" className="border rounded-lg">
-                    <AccordionTrigger className="px-3 py-2 text-xs font-medium hover:no-underline bg-green-50/50">
+                    <AccordionTrigger className="px-3 py-2 text-xs font-medium hover:no-underline bg-emerald-50/50">
                       <div className="flex items-center gap-2">
-                        <SettingsIcon className="h-3.5 w-3.5 text-green-600" />
+                        <SettingsIcon className="h-3.5 w-3.5 text-emerald-600" />
                         <span>Select 옵션 설정</span>
                         {localField.selectOptions?.type && (
                           <span className="text-[9px] text-muted-foreground">
@@ -1187,9 +1187,9 @@ export function FieldDetailSettingsModal({
 
                 {/* 연결 필드 설정 */}
                 <AccordionItem value="linked-fields" className="border rounded-lg">
-                  <AccordionTrigger className="px-3 py-2 text-xs font-medium hover:no-underline bg-orange-50/50">
+                  <AccordionTrigger className="px-3 py-2 text-xs font-medium hover:no-underline bg-amber-50/50">
                     <div className="flex items-center gap-2">
-                      <SettingsIcon className="h-3.5 w-3.5 text-orange-600" />
+                      <SettingsIcon className="h-3.5 w-3.5 text-amber-600" />
                       <span>연결 필드 설정 (다중 컬럼 저장)</span>
                       {localField.linkedFieldGroup?.enabled && (
                         <span className="text-[9px] text-muted-foreground">
@@ -1731,9 +1731,9 @@ export function FieldDetailSettingsModal({
 
                 {/* 채번규칙 설정 */}
                 <AccordionItem value="numbering-rule" className="border rounded-lg">
-                  <AccordionTrigger className="px-3 py-2 text-xs font-medium hover:no-underline bg-blue-50/50">
+                  <AccordionTrigger className="px-3 py-2 text-xs font-medium hover:no-underline bg-primary/10/50">
                     <div className="flex items-center gap-2">
-                      <SettingsIcon className="h-3.5 w-3.5 text-blue-600" />
+                      <SettingsIcon className="h-3.5 w-3.5 text-primary" />
                       <span>채번규칙 설정</span>
                       {localField.numberingRule?.enabled && (
                         <span className="text-[9px] text-muted-foreground">(활성화됨)</span>
diff --git a/frontend/lib/registry/components/universal-form-modal/modals/SaveSettingsModal.tsx b/frontend/lib/registry/components/universal-form-modal/modals/SaveSettingsModal.tsx
index 01c87fcb..db0af555 100644
--- a/frontend/lib/registry/components/universal-form-modal/modals/SaveSettingsModal.tsx
+++ b/frontend/lib/registry/components/universal-form-modal/modals/SaveSettingsModal.tsx
@@ -406,7 +406,7 @@ export function SaveSettingsModal({
               {saveMode === "single" && (
                 <div className="space-y-3 border rounded-lg p-3 bg-card">
                   <div className="flex items-center gap-2">
-                    <Database className="h-4 w-4 text-blue-600" />
+                    <Database className="h-4 w-4 text-primary" />
                     <h3 className="text-xs font-semibold">단일 테이블 설정</h3>
                   </div>
 
@@ -500,7 +500,7 @@ export function SaveSettingsModal({
                   {/* 메인 테이블 설정 */}
                   <div className="border rounded-lg p-3 bg-card space-y-3">
                     <div className="flex items-center gap-2">
-                      <Database className="h-4 w-4 text-blue-600" />
+                      <Database className="h-4 w-4 text-primary" />
                       <h3 className="text-xs font-semibold">메인 테이블 설정</h3>
                     </div>
 
@@ -686,7 +686,7 @@ export function SaveSettingsModal({
                   <div className="border rounded-lg p-3 bg-card space-y-3">
                     <div className="flex items-center justify-between">
                       <div className="flex items-center gap-2">
-                        <Layers className="h-4 w-4 text-orange-600" />
+                        <Layers className="h-4 w-4 text-amber-600" />
                         <h3 className="text-xs font-semibold">서브 테이블 설정</h3>
                         <span className="text-[9px] text-muted-foreground">
                           ({(localSaveConfig.customApiSave?.multiTable?.subTables || []).length}개)
@@ -717,7 +717,7 @@ export function SaveSettingsModal({
                           const subTableColumns = subTable.tableName ? tableColumns[subTable.tableName] || [] : [];
                           return (
                             <Accordion key={subIndex} type="single" collapsible>
-                              <AccordionItem value={`sub-${subIndex}`} className="border rounded-lg bg-orange-50/30">
+                              <AccordionItem value={`sub-${subIndex}`} className="border rounded-lg bg-amber-50/30">
                                 <div className="flex items-center justify-between px-3 py-2">
                                   <AccordionTrigger className="flex-1 text-xs hover:no-underline p-0">
                                     <div className="flex items-center gap-2">
@@ -1396,7 +1396,7 @@ export function SaveSettingsModal({
                                       </div>
                                     ) : (
                                       // 활성화 상태: 설정 필드 표시
-                                      <div className="border rounded-lg p-3 bg-blue-50/50 space-y-3">
+                                      <div className="border rounded-lg p-3 bg-primary/10/50 space-y-3">
                                         <div className="flex items-center justify-between">
                                           <div>
                                             <p className="text-[10px] font-medium">수정 시 데이터 로드</p>
@@ -1456,14 +1456,14 @@ export function SaveSettingsModal({
               {/* 섹션별 저장 방식 */}
               <div className="space-y-3 border rounded-lg p-3 bg-card">
                 <div className="flex items-center gap-2">
-                  <Layers className="h-4 w-4 text-green-600" />
+                  <Layers className="h-4 w-4 text-emerald-600" />
                   <h3 className="text-xs font-semibold">섹션별 저장 방식</h3>
                 </div>
                 
                 {/* 설명 */}
                 <div className="bg-muted/50 rounded-lg p-2.5 space-y-1.5">
                   <div className="flex items-start gap-2">
-                    <Info className="h-3.5 w-3.5 text-blue-500 mt-0.5 shrink-0" />
+                    <Info className="h-3.5 w-3.5 text-primary mt-0.5 shrink-0" />
                     <div className="space-y-1">
                       <p className="text-[10px] text-muted-foreground">
                         <span className="font-medium text-foreground">공통 저장:</span> 이 섹션의 필드 값이 모든 품목 행에 <span className="font-medium">동일하게</span> 저장됩니다
@@ -1497,7 +1497,7 @@ export function SaveSettingsModal({
                           value={section.id}
                           className={cn(
                             "border rounded-lg",
-                            currentMode === "common" ? "bg-blue-50/30" : "bg-orange-50/30"
+                            currentMode === "common" ? "bg-primary/10/30" : "bg-amber-50/30"
                           )}
                         >
                           <AccordionTrigger className="px-3 py-2 text-xs hover:no-underline">
@@ -1508,7 +1508,7 @@ export function SaveSettingsModal({
                                   variant="outline" 
                                   className={cn(
                                     "text-[8px] h-4",
-                                    sectionType === "table" ? "border-orange-300 text-orange-600" : "border-blue-300 text-blue-600"
+                                    sectionType === "table" ? "border-orange-300 text-amber-600" : "border-primary/40 text-primary"
                                   )}
                                 >
                                   {sectionType === "table" ? "테이블" : "필드"}
@@ -1566,7 +1566,7 @@ export function SaveSettingsModal({
                                             "flex items-center justify-between px-2 py-1.5 rounded border text-left transition-colors",
                                             isOverridden
                                               ? "border-amber-300 bg-amber-50"
-                                              : "border-gray-200 bg-white hover:bg-gray-50"
+                                              : "border-border bg-white hover:bg-muted"
                                           )}
                                         >
                                           <span className="text-[9px] truncate flex-1">
diff --git a/frontend/lib/registry/components/universal-form-modal/modals/SectionLayoutModal.tsx b/frontend/lib/registry/components/universal-form-modal/modals/SectionLayoutModal.tsx
index 0031e5d0..aa5a9509 100644
--- a/frontend/lib/registry/components/universal-form-modal/modals/SectionLayoutModal.tsx
+++ b/frontend/lib/registry/components/universal-form-modal/modals/SectionLayoutModal.tsx
@@ -134,20 +134,20 @@ export function SectionLayoutModal({
       case "email":
       case "password":
       case "tel":
-        return "bg-blue-50 border-blue-200 text-blue-700";
+        return "bg-primary/10 border-primary/20 text-primary";
       case "number":
         return "bg-cyan-50 border-cyan-200 text-cyan-700";
       case "date":
       case "datetime":
         return "bg-purple-50 border-purple-200 text-purple-700";
       case "select":
-        return "bg-green-50 border-green-200 text-green-700";
+        return "bg-emerald-50 border-emerald-200 text-emerald-700";
       case "checkbox":
         return "bg-pink-50 border-pink-200 text-pink-700";
       case "textarea":
-        return "bg-orange-50 border-orange-200 text-orange-700";
+        return "bg-amber-50 border-orange-200 text-orange-700";
       default:
-        return "bg-gray-50 border-gray-200 text-gray-700";
+        return "bg-muted border-border text-foreground";
     }
   };
 
diff --git a/frontend/lib/registry/components/universal-form-modal/modals/TableColumnSettingsModal.tsx b/frontend/lib/registry/components/universal-form-modal/modals/TableColumnSettingsModal.tsx
index 7099e43e..bf1ebd31 100644
--- a/frontend/lib/registry/components/universal-form-modal/modals/TableColumnSettingsModal.tsx
+++ b/frontend/lib/registry/components/universal-form-modal/modals/TableColumnSettingsModal.tsx
@@ -602,7 +602,7 @@ export function TableColumnSettingsModal({
                         </SelectContent>
                       </Select>
                       {isCategoryColumn && (
-                        <p className="text-[10px] text-blue-600 mt-0.5">테이블 타입 관리에서 카테고리로 설정됨</p>
+                        <p className="text-[10px] text-primary mt-0.5">테이블 타입 관리에서 카테고리로 설정됨</p>
                       )}
                     </div>
                     <div>
diff --git a/frontend/lib/registry/components/universal-form-modal/modals/TableSectionSettingsModal.tsx b/frontend/lib/registry/components/universal-form-modal/modals/TableSectionSettingsModal.tsx
index 3fc81fa3..703191d0 100644
--- a/frontend/lib/registry/components/universal-form-modal/modals/TableSectionSettingsModal.tsx
+++ b/frontend/lib/registry/components/universal-form-modal/modals/TableSectionSettingsModal.tsx
@@ -1146,7 +1146,7 @@ function ColumnSettingItem({
             </SelectContent>
           </Select>
           {isCategoryColumn && (
-            <p className="text-[10px] text-blue-600 mt-0.5">테이블 타입 관리에서 카테고리로 설정됨</p>
+            <p className="text-[10px] text-primary mt-0.5">테이블 타입 관리에서 카테고리로 설정됨</p>
           )}
         </div>
 
@@ -1202,7 +1202,7 @@ function ColumnSettingItem({
             onCheckedChange={(checked) => onUpdate({ receiveFromParent: checked })}
             className="scale-75"
           />
-          <span className="text-blue-600">부모값</span>
+          <span className="text-primary">부모값</span>
         </label>
         <label className="flex items-center gap-2 text-xs cursor-pointer">
           <Switch
@@ -1237,7 +1237,7 @@ function ColumnSettingItem({
       {/* 부모에서 값 받기 설정 (부모값 ON일 때만 표시) */}
       {col.receiveFromParent && (
         <div className="border-t pt-3 mt-3 space-y-2">
-          <Label className="text-xs font-medium text-blue-600">부모 필드 선택</Label>
+          <Label className="text-xs font-medium text-primary">부모 필드 선택</Label>
           <p className="text-[10px] text-muted-foreground">
             부모 화면에서 전달받을 필드를 선택하세요. 모든 행에 동일한 값이 적용됩니다.
           </p>
@@ -1335,7 +1335,7 @@ function ColumnSettingItem({
       {col.lookup?.enabled && (
         <div className="border-t pt-3 mt-3 space-y-3">
           <div className="flex justify-between items-center">
-            <Label className="text-xs font-medium text-blue-600">조회 옵션</Label>
+            <Label className="text-xs font-medium text-primary">조회 옵션</Label>
             <Button size="sm" variant="outline" onClick={addLookupOption} className="h-6 text-xs px-2">
               <Plus className="h-3 w-3 mr-1" />
               옵션 추가
@@ -1349,7 +1349,7 @@ function ColumnSettingItem({
           ) : (
             <div className="space-y-3">
               {(col.lookup?.options || []).map((option, optIndex) => (
-                <div key={option.id} className="border rounded-lg p-3 space-y-3 bg-blue-50/30">
+                <div key={option.id} className="border rounded-lg p-3 space-y-3 bg-primary/10/30">
                   {/* 옵션 헤더 */}
                   <div className="flex items-center justify-between">
                     <div className="flex items-center gap-2">
@@ -1573,7 +1573,7 @@ function ColumnSettingItem({
                                     {cond.sourceType === "currentRow" ? (
                                       // 현재 행: 테이블에 설정된 컬럼 필드 표시
                                       <>
-                                        <div className="px-2 py-1 text-[10px] font-medium text-green-600 bg-green-50 border-b">
+                                        <div className="px-2 py-1 text-[10px] font-medium text-emerald-600 bg-emerald-50 border-b">
                                           설정된 컬럼
                                         </div>
                                         {tableConfig?.columns?.map((c) => (
@@ -1585,7 +1585,7 @@ function ColumnSettingItem({
                                     ) : cond.sourceType === "sourceTable" ? (
                                       // 소스 테이블: 원본 테이블의 컬럼 표시
                                       <>
-                                        <div className="px-2 py-1 text-[10px] font-medium text-orange-600 bg-orange-50 border-b">
+                                        <div className="px-2 py-1 text-[10px] font-medium text-amber-600 bg-amber-50 border-b">
                                           {sourceTableName} 컬럼
                                         </div>
                                         {sourceTableColumns.map((c) => (
@@ -1639,7 +1639,7 @@ function ColumnSettingItem({
                                     </SelectTrigger>
                                     <SelectContent>
                                       {option.tableName && (
-                                        <div className="px-2 py-1 text-[10px] font-medium text-blue-600 bg-blue-50 border-b">
+                                        <div className="px-2 py-1 text-[10px] font-medium text-primary bg-primary/10 border-b">
                                           {option.tableName} 컬럼
                                         </div>
                                       )}
@@ -1670,7 +1670,7 @@ function ColumnSettingItem({
                           {/* 외부 테이블 조회 설정 */}
                           {cond.sourceType === "externalTable" && cond.externalLookup && (
                             <div className="pl-2 border-l-2 border-orange-200 space-y-2">
-                              <p className="text-[10px] text-orange-600 font-medium">외부 테이블에서 조건 값 조회</p>
+                              <p className="text-[10px] text-amber-600 font-medium">외부 테이블에서 조건 값 조회</p>
                               
                               {/* 1행: 조회 테이블 선택 */}
                               <div className="grid grid-cols-3 gap-1.5">
@@ -1759,7 +1759,7 @@ function ColumnSettingItem({
                               </div>
 
                               {/* 2행: 비교 값 출처 */}
-                              <div className="p-1.5 bg-orange-50/50 rounded">
+                              <div className="p-1.5 bg-amber-50/50 rounded">
                                 <p className="text-[9px] text-muted-foreground mb-1">비교 값 출처 (찾을 때 사용할 값)</p>
                                 <div className="flex items-center gap-1.5">
                                   <Select
@@ -1808,7 +1808,7 @@ function ColumnSettingItem({
                                     <SelectContent>
                                       {cond.externalLookup.matchSourceType === "currentRow" ? (
                                         <>
-                                          <div className="px-2 py-1 text-[9px] font-medium text-green-600 bg-green-50 border-b">
+                                          <div className="px-2 py-1 text-[9px] font-medium text-emerald-600 bg-emerald-50 border-b">
                                             설정된 컬럼
                                           </div>
                                           {tableConfig?.columns?.map((c) => (
@@ -1817,7 +1817,7 @@ function ColumnSettingItem({
                                         </>
                                       ) : cond.externalLookup.matchSourceType === "sourceTable" ? (
                                         <>
-                                          <div className="px-2 py-1 text-[9px] font-medium text-orange-600 bg-orange-50 border-b">
+                                          <div className="px-2 py-1 text-[9px] font-medium text-amber-600 bg-amber-50 border-b">
                                             {sourceTableName} 컬럼
                                           </div>
                                           {sourceTableColumns.map((c) => (
@@ -1856,7 +1856,7 @@ function ColumnSettingItem({
                                   </SelectTrigger>
                                   <SelectContent>
                                     {option.tableName && (
-                                      <div className="px-2 py-1 text-[9px] font-medium text-blue-600 bg-blue-50 border-b">
+                                      <div className="px-2 py-1 text-[9px] font-medium text-primary bg-primary/10 border-b">
                                         {option.tableName} 컬럼
                                       </div>
                                     )}
@@ -1869,7 +1869,7 @@ function ColumnSettingItem({
 
                               {/* 설명 텍스트 */}
                               {cond.externalLookup.tableName && cond.externalLookup.matchColumn && cond.externalLookup.resultColumn && cond.targetColumn && (
-                                <p className="text-[9px] text-orange-600 bg-orange-100/50 rounded px-1.5 py-0.5">
+                                <p className="text-[9px] text-amber-600 bg-amber-100/50 rounded px-1.5 py-0.5">
                                   {cond.externalLookup.tableName}에서 {cond.externalLookup.matchColumn} = 입력값(비교 값 출처)인 행의{" "}
                                   {cond.externalLookup.resultColumn} 값을 가져와 {option.tableName}.{cond.targetColumn}와 비교
                                 </p>
@@ -1879,7 +1879,7 @@ function ColumnSettingItem({
 
                           {/* 값 변환 설정 (다른 섹션일 때만 표시) */}
                           {cond.sourceType === "sectionField" && (
-                            <div className="pl-2 border-l-2 border-blue-200">
+                            <div className="pl-2 border-l-2 border-primary/20">
                               <label className="flex items-center gap-1.5 text-[10px] cursor-pointer">
                                 <Switch
                                   checked={cond.transform?.enabled ?? false}
@@ -1894,12 +1894,12 @@ function ColumnSettingItem({
                                   }}
                                   className="scale-[0.5]"
                                 />
-                                <span className="text-blue-600 font-medium">값 변환 필요</span>
+                                <span className="text-primary font-medium">값 변환 필요</span>
                                 <span className="text-muted-foreground">(이름 → 코드 등)</span>
                               </label>
 
                               {cond.transform?.enabled && (
-                                <div className="mt-1.5 p-2 bg-blue-50/50 rounded space-y-1.5">
+                                <div className="mt-1.5 p-2 bg-primary/10/50 rounded space-y-1.5">
                                   <div className="grid grid-cols-3 gap-1.5">
                                     <div>
                                       <Label className="text-[9px] text-muted-foreground">변환 테이블</Label>
@@ -1976,7 +1976,7 @@ function ColumnSettingItem({
                                     </div>
                                   </div>
                                   {cond.transform.tableName && cond.transform.matchColumn && cond.transform.resultColumn && (
-                                    <p className="text-[9px] text-blue-600 bg-blue-100/50 rounded px-1.5 py-0.5">
+                                    <p className="text-[9px] text-primary bg-primary/10/50 rounded px-1.5 py-0.5">
                                       {cond.transform.tableName}에서 {cond.transform.matchColumn} = 입력값 인 행의 {cond.transform.resultColumn} 값으로 변환
                                     </p>
                                   )}
@@ -2007,7 +2007,7 @@ function ColumnSettingItem({
         <div className="border-t pt-3 mt-3 space-y-3">
           <div className="flex items-center justify-between">
             <div>
-              <Label className="text-xs font-medium text-green-600">동적 드롭다운 옵션</Label>
+              <Label className="text-xs font-medium text-emerald-600">동적 드롭다운 옵션</Label>
               <p className="text-[10px] text-muted-foreground">
                 소스 테이블에서 옵션을 동적으로 로드합니다. 조건부 테이블 필터가 자동 적용됩니다.
               </p>
@@ -2030,7 +2030,7 @@ function ColumnSettingItem({
           </div>
 
           {col.dynamicSelectOptions?.enabled && (
-            <div className="space-y-3 pl-2 border-l-2 border-green-500/30">
+            <div className="space-y-3 pl-2 border-l-2 border-emerald-500/30">
               {/* 소스 컬럼 선택 */}
               <div className="grid grid-cols-2 gap-3">
                 <div>
@@ -2188,7 +2188,7 @@ function ColumnSettingItem({
                     ) : (
                       <div className="space-y-2">
                         {(col.dynamicSelectOptions.rowSelectionMode?.autoFillColumns || []).map((mapping, mappingIndex) => (
-                          <div key={mappingIndex} className="flex items-center gap-2 p-2 border rounded bg-green-50/30">
+                          <div key={mappingIndex} className="flex items-center gap-2 p-2 border rounded bg-emerald-50/30">
                             {/* 소스 컬럼 */}
                             <div className="flex-1">
                               <Label className="text-[9px] text-muted-foreground">소스 컬럼</Label>
@@ -2307,7 +2307,7 @@ function ColumnSettingItem({
 
                     {/* 매핑 설명 */}
                     {(col.dynamicSelectOptions.rowSelectionMode?.autoFillColumns || []).length > 0 && (
-                      <div className="text-[9px] text-green-600 bg-green-100/50 rounded p-1.5">
+                      <div className="text-[9px] text-emerald-600 bg-emerald-100/50 rounded p-1.5">
                         {col.label || col.field} 선택 시:{" "}
                         {(col.dynamicSelectOptions.rowSelectionMode?.autoFillColumns || [])
                           .filter((m) => m.sourceColumn && m.targetField)
@@ -2324,7 +2324,7 @@ function ColumnSettingItem({
 
               {/* 설정 요약 */}
               {col.dynamicSelectOptions.sourceField && (
-                <div className="text-[9px] text-green-600 bg-green-100/50 rounded p-1.5">
+                <div className="text-[9px] text-emerald-600 bg-emerald-100/50 rounded p-1.5">
                   {sourceTableName}.{col.dynamicSelectOptions.sourceField}
                   {tableConfig.conditionalTable?.sourceFilter?.filterColumn && (
                     <> (조건: {tableConfig.conditionalTable.sourceFilter.filterColumn} = 선택된 검사유형)</>
@@ -3223,8 +3223,8 @@ export function TableSectionSettingsModal({
                   
                   {/* 테이블은 선택했지만 컬럼이 아직 로드되지 않은 경우 */}
                   {saveTableColumns.length === 0 && (tableConfig.saveConfig?.targetTable || tableConfig.source.tableName) && (
-                    <div className="bg-blue-50 border border-blue-200 rounded-lg p-3">
-                      <p className="text-xs text-blue-800">
+                    <div className="bg-primary/10 border border-primary/20 rounded-lg p-3">
+                      <p className="text-xs text-primary">
                         테이블 "{tableConfig.saveConfig?.targetTable || tableConfig.source.tableName}" 의 컬럼을 불러오는 중입니다...
                       </p>
                     </div>
@@ -4129,9 +4129,9 @@ export function TableSectionSettingsModal({
                           )}
 
                           {/* 사용 가이드 */}
-                          <div className="mt-4 p-3 bg-blue-50/50 border border-blue-200/50 rounded-lg space-y-2">
-                            <p className="text-xs font-medium text-blue-700">사용 가이드</p>
-                            <div className="text-[10px] text-blue-600 space-y-1.5">
+                          <div className="mt-4 p-3 bg-primary/10/50 border border-primary/20/50 rounded-lg space-y-2">
+                            <p className="text-xs font-medium text-primary">사용 가이드</p>
+                            <div className="text-[10px] text-primary space-y-1.5">
                               <p className="font-medium">1. 소스 테이블 필터링 활성화 후:</p>
                               <ul className="list-disc pl-4 space-y-0.5">
                                 <li><span className="font-medium">항목 검색</span>: 검색 모달에서 필터링된 데이터만 표시</li>
diff --git a/frontend/lib/registry/components/v2-aggregation-widget/AggregationWidgetComponent.tsx b/frontend/lib/registry/components/v2-aggregation-widget/AggregationWidgetComponent.tsx
index 0dbc5033..f2539a0e 100644
--- a/frontend/lib/registry/components/v2-aggregation-widget/AggregationWidgetComponent.tsx
+++ b/frontend/lib/registry/components/v2-aggregation-widget/AggregationWidgetComponent.tsx
@@ -6,6 +6,7 @@ import { AggregationWidgetConfig, AggregationItem, AggregationResult, Aggregatio
 import { Calculator, TrendingUp, Hash, ArrowUp, ArrowDown, Loader2 } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { useScreenMultiLang } from "@/contexts/ScreenMultiLangContext";
+import { formatNumber } from "@/lib/formatting";
 import { apiClient } from "@/lib/api/client";
 import { v2EventBus, V2_EVENTS, V2ErrorBoundary } from "@/lib/v2-core";
 
@@ -566,11 +567,11 @@ export function AggregationWidgetComponent({
       let formattedValue = value.toFixed(item.decimalPlaces ?? 0);
 
       if (item.format === "currency") {
-        formattedValue = new Intl.NumberFormat("ko-KR").format(value);
+        formattedValue = formatNumber(value);
       } else if (item.format === "percent") {
         formattedValue = `${(value * 100).toFixed(item.decimalPlaces ?? 1)}%`;
       } else if (item.format === "number") {
-        formattedValue = new Intl.NumberFormat("ko-KR").format(value);
+        formattedValue = formatNumber(value);
       }
 
       if (item.prefix) {
@@ -720,7 +721,7 @@ export function AggregationWidgetComponent({
             <span>{dataSourceComponentId}</span>
           )}
           {(filters || []).length > 0 && (
-            <span className="text-blue-500">필터 {filters?.length}개</span>
+            <span className="text-primary">필터 {filters?.length}개</span>
           )}
         </div>
         <div
diff --git a/frontend/lib/registry/components/v2-aggregation-widget/AggregationWidgetConfigPanel.tsx b/frontend/lib/registry/components/v2-aggregation-widget/AggregationWidgetConfigPanel.tsx
index bd29c7fc..1f53ce7a 100644
--- a/frontend/lib/registry/components/v2-aggregation-widget/AggregationWidgetConfigPanel.tsx
+++ b/frontend/lib/registry/components/v2-aggregation-widget/AggregationWidgetConfigPanel.tsx
@@ -529,7 +529,7 @@ export function AggregationWidgetConfigPanel({
             
             {/* 현재 선택된 테이블 표시 */}
             <div className="flex items-center gap-2 rounded-md border bg-slate-50 p-2">
-              <Database className="h-4 w-4 text-blue-500" />
+              <Database className="h-4 w-4 text-primary" />
               <div className="flex-1">
                 <div className="text-xs font-medium">
                   {config.customTableName || config.tableName || screenTableName || "테이블 미선택"}
@@ -584,7 +584,7 @@ export function AggregationWidgetConfigPanel({
                               !config.useCustomTable ? "opacity-100" : "opacity-0"
                             )}
                           />
-                          <Database className="mr-2 h-3 w-3 text-blue-500" />
+                          <Database className="mr-2 h-3 w-3 text-primary" />
                           {screenTableName}
                         </CommandItem>
                       </CommandGroup>
@@ -663,7 +663,7 @@ export function AggregationWidgetConfigPanel({
         {/* 선택 데이터 설명 (selection 타입일 때) */}
         {dataSourceType === "selection" && (
           <div className="space-y-2 mt-3">
-            <div className="rounded-md border bg-blue-50 p-3 text-xs text-blue-700">
+            <div className="rounded-md border bg-primary/10 p-3 text-xs text-primary">
               <p className="font-medium mb-1">선택된 행 집계</p>
               <p className="text-[10px]">
                 화면에서 사용자가 선택(체크)한 행들만 집계합니다.
@@ -674,7 +674,7 @@ export function AggregationWidgetConfigPanel({
             {/* 테이블 선택 (어느 테이블의 선택 데이터인지) */}
             <Label className="text-xs">대상 테이블</Label>
             <div className="flex items-center gap-2 rounded-md border bg-slate-50 p-2">
-              <Database className="h-4 w-4 text-blue-500" />
+              <Database className="h-4 w-4 text-primary" />
               <div className="flex-1">
                 <div className="text-xs font-medium">
                   {config.customTableName || config.tableName || screenTableName || "테이블 미선택"}
diff --git a/frontend/lib/registry/components/v2-approval-step/ApprovalStepComponent.tsx b/frontend/lib/registry/components/v2-approval-step/ApprovalStepComponent.tsx
index 39b4da42..42af8aa4 100644
--- a/frontend/lib/registry/components/v2-approval-step/ApprovalStepComponent.tsx
+++ b/frontend/lib/registry/components/v2-approval-step/ApprovalStepComponent.tsx
@@ -1,14 +1,17 @@
 "use client";
 
-import React, { useEffect, useState, useCallback } from "react";
+import React, { useEffect, useState, useCallback, useMemo } from "react";
 import { ComponentRendererProps } from "@/types/component";
-import { ApprovalStepConfig } from "./types";
+import {
+  ApprovalStepConfig,
+  ExtendedApprovalLine,
+  ExtendedApprovalRequest,
+  StepGroup,
+} from "./types";
 import { filterDOMProps } from "@/lib/utils/domPropsFilter";
 import {
   getApprovalRequests,
   getApprovalRequest,
-  type ApprovalRequest,
-  type ApprovalLine,
 } from "@/lib/api/approval";
 import {
   Check,
@@ -20,14 +23,18 @@ import {
   ChevronDown,
   ChevronUp,
   ArrowRight,
+  CheckCircle,
+  Users,
+  Bell,
 } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
 import { cn } from "@/lib/utils";
 
 export interface ApprovalStepComponentProps extends ComponentRendererProps {}
 
 interface ApprovalStepData {
-  request: ApprovalRequest;
-  lines: ApprovalLine[];
+  request: ExtendedApprovalRequest;
+  lines: ExtendedApprovalLine[];
   approvalMode: "sequential" | "parallel";
 }
 
@@ -80,13 +87,82 @@ const STATUS_CONFIG = {
 } as const;
 
 const REQUEST_STATUS_CONFIG = {
-  requested: { label: "요청됨", color: "text-blue-600", bg: "bg-blue-50" },
+  requested: { label: "요청됨", color: "text-primary", bg: "bg-primary/10" },
   in_progress: { label: "진행 중", color: "text-amber-600", bg: "bg-amber-50" },
   approved: { label: "승인 완료", color: "text-emerald-600", bg: "bg-emerald-50" },
   rejected: { label: "반려", color: "text-rose-600", bg: "bg-rose-50" },
   cancelled: { label: "취소", color: "text-muted-foreground", bg: "bg-muted" },
 } as const;
 
+/** step_type에 대응하는 아이콘 */
+const STEP_TYPE_ICON = {
+  approval: CheckCircle,
+  consensus: Users,
+  notification: Bell,
+} as const;
+
+/**
+ * 결재 라인을 step_order 기준으로 그룹핑
+ * 합의결재 시 같은 step_order에 여러 line이 존재할 수 있음
+ */
+function groupLinesByStepOrder(lines: ExtendedApprovalLine[]): StepGroup[] {
+  const groupMap = new Map<number, ExtendedApprovalLine[]>();
+
+  for (const line of lines) {
+    const order = line.step_order;
+    if (!groupMap.has(order)) {
+      groupMap.set(order, []);
+    }
+    groupMap.get(order)!.push(line);
+  }
+
+  const groups: StepGroup[] = [];
+  const sortedOrders = Array.from(groupMap.keys()).sort((a, b) => a - b);
+
+  for (const order of sortedOrders) {
+    const groupLines = groupMap.get(order)!;
+    const stepType = groupLines[0]?.step_type || "approval";
+    groups.push({
+      stepOrder: order,
+      lines: groupLines,
+      stepType,
+    });
+  }
+
+  return groups;
+}
+
+/** 결재 라인에 표시할 뱃지 목록 반환 */
+function getLineBadges(
+  line: ExtendedApprovalLine,
+  request: ExtendedApprovalRequest,
+): Array<{ label: string; className: string }> {
+  const badges: Array<{ label: string; className: string }> = [];
+
+  if (line.proxy_for) {
+    badges.push({
+      label: "대결",
+      className: "border-orange-300 text-amber-600",
+    });
+  }
+
+  if (request.approval_type === "post") {
+    badges.push({
+      label: "후결",
+      className: "border-amber-300 text-amber-600",
+    });
+  }
+
+  if (request.approval_type === "self") {
+    badges.push({
+      label: "전결",
+      className: "border-primary/40 text-primary",
+    });
+  }
+
+  return badges;
+}
+
 /**
  * 결재 단계 시각화 컴포넌트
  * 결재 요청의 각 단계별 상태를 스테퍼 형태로 표시
@@ -139,8 +215,8 @@ export const ApprovalStepComponent: React.FC<ApprovalStepComponentProps> = ({
         const detailRes = await getApprovalRequest(latestRequest.request_id);
 
         if (detailRes.success && detailRes.data) {
-          const request = detailRes.data;
-          const lines = request.lines || [];
+          const request = detailRes.data as ExtendedApprovalRequest;
+          const lines = (request.lines || []) as ExtendedApprovalLine[];
           const approvalMode =
             (request.target_record_data?.approval_mode as "sequential" | "parallel") || "sequential";
 
@@ -160,7 +236,7 @@ export const ApprovalStepComponent: React.FC<ApprovalStepComponentProps> = ({
     fetchApprovalData();
   }, [fetchApprovalData]);
 
-  // 디자인 모드용 샘플 데이터
+  // 디자인 모드용 샘플 데이터 (합의/대결/통보 포함)
   useEffect(() => {
     if (isDesignMode) {
       setStepData({
@@ -171,13 +247,15 @@ export const ApprovalStepComponent: React.FC<ApprovalStepComponentProps> = ({
           target_record_id: "1",
           status: "in_progress",
           current_step: 2,
-          total_steps: 3,
+          total_steps: 4,
           requester_id: "admin",
           requester_name: "홍길동",
           requester_dept: "개발팀",
           company_code: "SAMPLE",
           created_at: new Date().toISOString(),
           updated_at: new Date().toISOString(),
+          approval_type: "escalation",
+          urgency: "urgent",
         },
         lines: [
           {
@@ -186,18 +264,37 @@ export const ApprovalStepComponent: React.FC<ApprovalStepComponentProps> = ({
             status: "approved", comment: "확인했습니다.",
             processed_at: new Date(Date.now() - 86400000).toISOString(),
             company_code: "SAMPLE", created_at: new Date().toISOString(),
+            step_type: "approval",
           },
           {
             line_id: 2, request_id: 0, step_order: 2,
             approver_id: "user2", approver_name: "이과장", approver_position: "과장", approver_dept: "기획팀",
-            status: "pending",
+            status: "approved",
+            processed_at: new Date(Date.now() - 43200000).toISOString(),
             company_code: "SAMPLE", created_at: new Date().toISOString(),
+            step_type: "consensus",
           },
           {
-            line_id: 3, request_id: 0, step_order: 3,
-            approver_id: "user3", approver_name: "박대리", approver_position: "대리", approver_dept: "개발팀",
+            line_id: 3, request_id: 0, step_order: 2,
+            approver_id: "user3", approver_name: "최대리", approver_position: "대리", approver_dept: "기획팀",
+            status: "pending",
+            company_code: "SAMPLE", created_at: new Date().toISOString(),
+            step_type: "consensus",
+          },
+          {
+            line_id: 4, request_id: 0, step_order: 3,
+            approver_id: "user4", approver_name: "박대리", approver_position: "대리", approver_dept: "개발팀",
             status: "waiting",
             company_code: "SAMPLE", created_at: new Date().toISOString(),
+            step_type: "approval",
+            proxy_for: "정팀장",
+          },
+          {
+            line_id: 5, request_id: 0, step_order: 4,
+            approver_id: "user5", approver_name: "한사원", approver_position: "사원", approver_dept: "총무팀",
+            status: "waiting",
+            company_code: "SAMPLE", created_at: new Date().toISOString(),
+            step_type: "notification",
           },
         ],
         approvalMode: "sequential",
@@ -286,6 +383,7 @@ export const ApprovalStepComponent: React.FC<ApprovalStepComponentProps> = ({
 
   const { request, lines, approvalMode } = stepData;
   const reqStatus = REQUEST_STATUS_CONFIG[request.status] || REQUEST_STATUS_CONFIG.requested;
+  const urgency = request.urgency;
 
   return (
     <div style={componentStyle} onClick={handleClick} {...domProps}>
@@ -293,7 +391,10 @@ export const ApprovalStepComponent: React.FC<ApprovalStepComponentProps> = ({
         {/* 헤더 - 요약 */}
         <button
           type="button"
-          className="flex w-full items-center justify-between px-3 py-2 text-left transition-colors hover:bg-muted/50"
+          className={cn(
+            "flex w-full items-center justify-between px-3 py-2 text-left transition-colors hover:bg-muted/50",
+            urgency === "critical" && "bg-destructive/10",
+          )}
           onClick={(e) => {
             e.stopPropagation();
             if (!isDesignMode) setExpanded((prev) => !prev);
@@ -302,11 +403,28 @@ export const ApprovalStepComponent: React.FC<ApprovalStepComponentProps> = ({
           <div className="flex items-center gap-2">
             <FileCheck className="h-4 w-4 text-muted-foreground" />
             <span className="text-xs font-medium">{request.title}</span>
+            {urgency === "urgent" && (
+              <span className="inline-block h-2 w-2 rounded-full bg-amber-500" />
+            )}
+            {urgency === "critical" && (
+              <span className="inline-block h-2 w-2 rounded-full bg-destructive" />
+            )}
             <span className={cn("rounded-full px-2 py-0.5 text-[10px] font-medium", reqStatus.bg, reqStatus.color)}>
               {reqStatus.label}
             </span>
+            {/* 결재 유형 뱃지 */}
+            {request.approval_type === "post" && (
+              <Badge variant="outline" className="h-4 border-amber-300 px-1.5 text-[9px] text-amber-600">
+                후결
+              </Badge>
+            )}
+            {request.approval_type === "self" && (
+              <Badge variant="outline" className="h-4 border-primary/40 px-1.5 text-[9px] text-primary">
+                전결
+              </Badge>
+            )}
             {approvalMode === "parallel" && (
-              <span className="rounded-full bg-blue-50 px-2 py-0.5 text-[10px] font-medium text-blue-600">
+              <span className="rounded-full bg-primary/10 px-2 py-0.5 text-[10px] font-medium text-primary">
                 동시결재
               </span>
             )}
@@ -324,6 +442,7 @@ export const ApprovalStepComponent: React.FC<ApprovalStepComponentProps> = ({
           {displayMode === "horizontal" ? (
             <HorizontalStepper
               lines={lines}
+              request={request}
               approvalMode={approvalMode}
               compact={compact}
               showDept={showDept}
@@ -331,6 +450,7 @@ export const ApprovalStepComponent: React.FC<ApprovalStepComponentProps> = ({
           ) : (
             <VerticalStepper
               lines={lines}
+              request={request}
               approvalMode={approvalMode}
               compact={compact}
               showDept={showDept}
@@ -349,16 +469,35 @@ export const ApprovalStepComponent: React.FC<ApprovalStepComponentProps> = ({
                 <span>상신자: {request.requester_name || request.requester_id}</span>
                 {request.requester_dept && <span>부서: {request.requester_dept}</span>}
                 <span>상신일: {formatDate(request.created_at)}</span>
+                {request.approval_type && request.approval_type !== "escalation" && (
+                  <span>
+                    유형: {request.approval_type === "self" ? "전결" : request.approval_type === "post" ? "후결" : request.approval_type === "consensus" ? "합의" : request.approval_type}
+                  </span>
+                )}
               </div>
               {displayMode === "horizontal" && lines.length > 0 && (
                 <div className="mt-1.5 space-y-1">
                   {lines.map((line) => {
                     const sc = STATUS_CONFIG[line.status] || STATUS_CONFIG.waiting;
+                    const lineBadges = getLineBadges(line, request);
+                    const StepIcon = STEP_TYPE_ICON[line.step_type || "approval"];
                     return (
                       <div key={line.line_id} className="flex items-start gap-2 text-[11px]">
                         <span className={cn("mt-0.5 inline-block h-2 w-2 shrink-0 rounded-full", sc.dotColor)} />
+                        <StepIcon className="mt-0.5 h-3 w-3 shrink-0 text-muted-foreground" />
                         <span className="font-medium">{line.approver_name || line.approver_id}</span>
+                        {lineBadges.map((b) => (
+                          <Badge key={b.label} variant="outline" className={cn("h-3.5 px-1 text-[8px]", b.className)}>
+                            {b.label}
+                          </Badge>
+                        ))}
                         <span className={cn("font-medium", sc.textColor)}>{sc.label}</span>
+                        {line.step_type === "notification" && (
+                          <span className="text-muted-foreground">(자동 통보)</span>
+                        )}
+                        {line.proxy_for && (
+                          <span className="text-amber-600">({line.proxy_for} 대결)</span>
+                        )}
                         {showTimestamp && line.processed_at && (
                           <span className="text-muted-foreground">{formatDate(line.processed_at)}</span>
                         )}
@@ -378,9 +517,10 @@ export const ApprovalStepComponent: React.FC<ApprovalStepComponentProps> = ({
   );
 };
 
-/* ========== 가로형 스테퍼 ========== */
+/* ========== 공통 Props ========== */
 interface StepperProps {
-  lines: ApprovalLine[];
+  lines: ExtendedApprovalLine[];
+  request: ExtendedApprovalRequest;
   approvalMode: "sequential" | "parallel";
   compact: boolean;
   showDept: boolean;
@@ -389,43 +529,124 @@ interface StepperProps {
   formatDate?: (d?: string | null) => string;
 }
 
-const HorizontalStepper: React.FC<StepperProps> = ({ lines, approvalMode, compact, showDept }) => {
+/* ========== 결재자 카드 (가로형/세로형 공용) ========== */
+interface ApproverCardProps {
+  line: ExtendedApprovalLine;
+  request: ExtendedApprovalRequest;
+  compact: boolean;
+  showDept: boolean;
+  variant: "horizontal" | "vertical";
+}
+
+const ApproverCard: React.FC<ApproverCardProps> = ({ line, request, compact, showDept, variant }) => {
+  const sc = STATUS_CONFIG[line.status] || STATUS_CONFIG.waiting;
+  const StatusIcon = sc.icon;
+  const lineBadges = getLineBadges(line, request);
+  const isNotification = line.step_type === "notification";
+
+  if (variant === "horizontal") {
+    return (
+      <div className={cn(
+        "flex shrink-0 flex-col items-center gap-0.5",
+        isNotification && "rounded px-1 py-0.5 bg-muted/50",
+      )}>
+        <div
+          className={cn(
+            "flex items-center justify-center rounded-full border-2 transition-all",
+            sc.bgColor,
+            sc.borderColor,
+            compact ? "h-6 w-6" : "h-8 w-8"
+          )}
+        >
+          <StatusIcon className={cn(sc.iconColor, compact ? "h-3 w-3" : "h-4 w-4")} />
+        </div>
+        <div className="flex items-center gap-0.5">
+          <span className={cn("max-w-[60px] truncate text-center font-medium", compact ? "text-[9px]" : "text-[11px]")}>
+            {line.approver_name || line.approver_id}
+          </span>
+          {lineBadges.map((b) => (
+            <Badge key={b.label} variant="outline" className={cn("h-3 px-0.5 text-[7px] leading-none", b.className)}>
+              {b.label}
+            </Badge>
+          ))}
+        </div>
+        {showDept && !compact && (line.approver_position || line.approver_dept) && (
+          <span className="max-w-[70px] truncate text-center text-[9px] text-muted-foreground">
+            {line.approver_position || line.approver_dept}
+          </span>
+        )}
+        {isNotification && !compact && (
+          <span className="text-[8px] text-muted-foreground">(자동 통보)</span>
+        )}
+      </div>
+    );
+  }
+
+  return null;
+};
+
+/* ========== 가로형 스테퍼 ========== */
+const HorizontalStepper: React.FC<StepperProps> = ({ lines, request, approvalMode, compact, showDept }) => {
+  const stepGroups = useMemo(() => groupLinesByStepOrder(lines), [lines]);
+
   if (lines.length === 0) {
     return <div className="py-1 text-center text-[11px] text-muted-foreground">결재선 없음</div>;
   }
 
   return (
     <div className="flex items-center gap-0 overflow-x-auto">
-      {lines.map((line, idx) => {
-        const sc = STATUS_CONFIG[line.status] || STATUS_CONFIG.waiting;
-        const StatusIcon = sc.icon;
-        const isLast = idx === lines.length - 1;
+      {stepGroups.map((group, groupIdx) => {
+        const StepTypeIcon = STEP_TYPE_ICON[group.stepType];
+        const isLast = groupIdx === stepGroups.length - 1;
+        const isConsensus = group.lines.length > 1;
 
         return (
-          <React.Fragment key={line.line_id}>
-            <div className="flex shrink-0 flex-col items-center gap-0.5">
-              {/* 아이콘 원 */}
-              <div
-                className={cn(
-                  "flex items-center justify-center rounded-full border-2 transition-all",
-                  sc.bgColor,
-                  sc.borderColor,
-                  compact ? "h-6 w-6" : "h-8 w-8"
+          <React.Fragment key={group.stepOrder}>
+            {isConsensus ? (
+              <div className="flex shrink-0 flex-col items-center gap-0.5">
+                {/* 합의결재: step_type 아이콘 표시 */}
+                {!compact && (
+                  <div className="flex items-center gap-0.5 text-[8px] text-muted-foreground">
+                    <StepTypeIcon className="h-3 w-3" />
+                    <span>합의</span>
+                  </div>
                 )}
-              >
-                <StatusIcon className={cn(sc.iconColor, compact ? "h-3 w-3" : "h-4 w-4")} />
+                {/* 같은 step_order의 결재자들을 가로로 나열 */}
+                <div className="flex items-start gap-2 rounded-md border border-dashed border-muted-foreground/30 px-1.5 py-1">
+                  {group.lines.map((line, lineIdx) => (
+                    <React.Fragment key={line.line_id}>
+                      <ApproverCard
+                        line={line}
+                        request={request}
+                        compact={compact}
+                        showDept={showDept}
+                        variant="horizontal"
+                      />
+                      {lineIdx < group.lines.length - 1 && (
+                        <div className="flex items-center self-center text-[9px] text-muted-foreground/50">+</div>
+                      )}
+                    </React.Fragment>
+                  ))}
+                </div>
               </div>
-              {/* 결재자 이름 */}
-              <span className={cn("max-w-[60px] truncate text-center font-medium", compact ? "text-[9px]" : "text-[11px]")}>
-                {line.approver_name || line.approver_id}
-              </span>
-              {/* 직급/부서 */}
-              {showDept && !compact && (line.approver_position || line.approver_dept) && (
-                <span className="max-w-[70px] truncate text-center text-[9px] text-muted-foreground">
-                  {line.approver_position || line.approver_dept}
-                </span>
-              )}
-            </div>
+            ) : (
+              <div className="flex shrink-0 flex-col items-center gap-0.5">
+                {/* 단일 결재자: step_type 아이콘 (통보/합의만 표시) */}
+                {!compact && group.stepType !== "approval" && (
+                  <div className="flex items-center gap-0.5 text-[8px] text-muted-foreground">
+                    <StepTypeIcon className="h-3 w-3" />
+                    <span>{group.stepType === "notification" ? "통보" : "합의"}</span>
+                  </div>
+                )}
+                <ApproverCard
+                  line={group.lines[0]}
+                  request={request}
+                  compact={compact}
+                  showDept={showDept}
+                  variant="horizontal"
+                />
+              </div>
+            )}
 
             {/* 연결선 */}
             {!isLast && (
@@ -447,6 +668,7 @@ const HorizontalStepper: React.FC<StepperProps> = ({ lines, approvalMode, compac
 /* ========== 세로형 스테퍼 ========== */
 const VerticalStepper: React.FC<StepperProps> = ({
   lines,
+  request,
   approvalMode,
   compact,
   showDept,
@@ -454,30 +676,29 @@ const VerticalStepper: React.FC<StepperProps> = ({
   showTimestamp,
   formatDate,
 }) => {
+  const stepGroups = useMemo(() => groupLinesByStepOrder(lines), [lines]);
+
   if (lines.length === 0) {
     return <div className="py-1 text-center text-[11px] text-muted-foreground">결재선 없음</div>;
   }
 
   return (
     <div className="space-y-0">
-      {lines.map((line, idx) => {
-        const sc = STATUS_CONFIG[line.status] || STATUS_CONFIG.waiting;
-        const StatusIcon = sc.icon;
-        const isLast = idx === lines.length - 1;
+      {stepGroups.map((group, groupIdx) => {
+        const StepTypeIcon = STEP_TYPE_ICON[group.stepType];
+        const isLast = groupIdx === stepGroups.length - 1;
+        const isConsensus = group.lines.length > 1;
+        const isNotificationGroup = group.stepType === "notification";
 
         return (
-          <div key={line.line_id} className="flex gap-3">
+          <div key={group.stepOrder} className="flex gap-3">
             {/* 타임라인 바 */}
             <div className="flex flex-col items-center">
-              <div
-                className={cn(
-                  "flex shrink-0 items-center justify-center rounded-full border-2",
-                  sc.bgColor,
-                  sc.borderColor,
-                  compact ? "h-5 w-5" : "h-7 w-7"
-                )}
-              >
-                <StatusIcon className={cn(sc.iconColor, compact ? "h-2.5 w-2.5" : "h-3.5 w-3.5")} />
+              <div className="flex shrink-0 items-center justify-center">
+                <StepTypeIcon className={cn(
+                  "text-muted-foreground",
+                  compact ? "h-3.5 w-3.5" : "h-4 w-4",
+                )} />
               </div>
               {!isLast && (
                 <div
@@ -493,29 +714,112 @@ const VerticalStepper: React.FC<StepperProps> = ({
             </div>
 
             {/* 결재자 정보 */}
-            <div className={cn("pb-2", compact ? "pb-1" : "pb-3")}>
-              <div className="flex items-center gap-2">
-                <span className={cn("font-medium", compact ? "text-[10px]" : "text-xs")}>
-                  {line.approver_name || line.approver_id}
-                </span>
-                {showDept && (line.approver_position || line.approver_dept) && (
-                  <span className="text-[10px] text-muted-foreground">
-                    {[line.approver_position, line.approver_dept].filter(Boolean).join(" / ")}
-                  </span>
-                )}
-                <span className={cn("rounded px-1.5 py-0.5 text-[9px] font-medium", sc.bgColor, sc.textColor)}>
-                  {sc.label}
-                </span>
-              </div>
-              {showTimestamp && line.processed_at && formatDate && (
-                <div className="mt-0.5 text-[10px] text-muted-foreground">
-                  {formatDate(line.processed_at)}
-                </div>
-              )}
-              {showComment && line.comment && (
-                <div className="mt-0.5 text-[10px] text-muted-foreground">
-                  &quot;{line.comment}&quot;
+            <div className={cn(
+              "flex-1",
+              compact ? "pb-1" : "pb-3",
+              isNotificationGroup && "rounded bg-muted/50 px-2 py-1",
+            )}>
+              {isConsensus ? (
+                <div>
+                  <div className="mb-1 flex items-center gap-1 text-[9px] text-muted-foreground">
+                    <Users className="h-3 w-3" />
+                    <span>합의결재 ({group.lines.length}명)</span>
+                  </div>
+                  <div className="flex flex-wrap items-start gap-2">
+                    {group.lines.map((line) => {
+                      const sc = STATUS_CONFIG[line.status] || STATUS_CONFIG.waiting;
+                      const StatusIcon = sc.icon;
+                      const lineBadges = getLineBadges(line, request);
+                      return (
+                        <div key={line.line_id} className="flex items-center gap-1.5 rounded-md border border-border bg-card px-2 py-1">
+                          <div className={cn(
+                            "flex shrink-0 items-center justify-center rounded-full border",
+                            sc.bgColor, sc.borderColor,
+                            "h-5 w-5",
+                          )}>
+                            <StatusIcon className={cn(sc.iconColor, "h-2.5 w-2.5")} />
+                          </div>
+                          <div>
+                            <div className="flex items-center gap-1">
+                              <span className={cn("font-medium", compact ? "text-[10px]" : "text-xs")}>
+                                {line.approver_name || line.approver_id}
+                              </span>
+                              {lineBadges.map((b) => (
+                                <Badge key={b.label} variant="outline" className={cn("h-3.5 px-1 text-[8px]", b.className)}>
+                                  {b.label}
+                                </Badge>
+                              ))}
+                              <span className={cn("text-[9px] font-medium", sc.textColor)}>{sc.label}</span>
+                            </div>
+                            {showDept && (line.approver_position || line.approver_dept) && (
+                              <span className="text-[9px] text-muted-foreground">
+                                {[line.approver_position, line.approver_dept].filter(Boolean).join(" / ")}
+                              </span>
+                            )}
+                            {showTimestamp && line.processed_at && formatDate && (
+                              <div className="text-[9px] text-muted-foreground">{formatDate(line.processed_at)}</div>
+                            )}
+                            {showComment && line.comment && (
+                              <div className="text-[9px] text-muted-foreground">&quot;{line.comment}&quot;</div>
+                            )}
+                          </div>
+                        </div>
+                      );
+                    })}
+                  </div>
                 </div>
+              ) : (
+                (() => {
+                  const line = group.lines[0];
+                  const sc = STATUS_CONFIG[line.status] || STATUS_CONFIG.waiting;
+                  const StatusIcon = sc.icon;
+                  const lineBadges = getLineBadges(line, request);
+                  return (
+                    <>
+                      <div className="flex items-center gap-2">
+                        <div className={cn(
+                          "flex shrink-0 items-center justify-center rounded-full border-2",
+                          sc.bgColor, sc.borderColor,
+                          compact ? "h-5 w-5" : "h-6 w-6",
+                        )}>
+                          <StatusIcon className={cn(sc.iconColor, compact ? "h-2.5 w-2.5" : "h-3 w-3")} />
+                        </div>
+                        <span className={cn("font-medium", compact ? "text-[10px]" : "text-xs")}>
+                          {line.approver_name || line.approver_id}
+                        </span>
+                        {lineBadges.map((b) => (
+                          <Badge key={b.label} variant="outline" className={cn("h-3.5 px-1 text-[8px]", b.className)}>
+                            {b.label}
+                          </Badge>
+                        ))}
+                        {showDept && (line.approver_position || line.approver_dept) && (
+                          <span className="text-[10px] text-muted-foreground">
+                            {[line.approver_position, line.approver_dept].filter(Boolean).join(" / ")}
+                          </span>
+                        )}
+                        <span className={cn("rounded px-1.5 py-0.5 text-[9px] font-medium", sc.bgColor, sc.textColor)}>
+                          {sc.label}
+                        </span>
+                        {isNotificationGroup && (
+                          <span className="text-[9px] text-muted-foreground">(자동 통보)</span>
+                        )}
+                        {line.proxy_for && (
+                          <span className="text-[9px] text-amber-600">({line.proxy_for} 대결)</span>
+                        )}
+                      </div>
+                      {showTimestamp && line.processed_at && formatDate && (
+                        <div className="mt-0.5 pl-8 text-[10px] text-muted-foreground">
+                          {formatDate(line.processed_at)}
+                        </div>
+                      )}
+                      {showComment && line.comment && (
+                        <div className="mt-0.5 pl-8 text-[10px] text-muted-foreground">
+                          &quot;{line.comment}&quot;
+                        </div>
+                      )}
+                    </>
+                  );
+                })()
               )}
             </div>
           </div>
diff --git a/frontend/lib/registry/components/v2-approval-step/ApprovalStepConfigPanel.tsx b/frontend/lib/registry/components/v2-approval-step/ApprovalStepConfigPanel.tsx
index d22d6b9d..994cad30 100644
--- a/frontend/lib/registry/components/v2-approval-step/ApprovalStepConfigPanel.tsx
+++ b/frontend/lib/registry/components/v2-approval-step/ApprovalStepConfigPanel.tsx
@@ -182,7 +182,7 @@ export const ApprovalStepConfigPanel: React.FC<ApprovalStepConfigPanelProps> = (
                           <div className="flex flex-col">
                             <span>{table.displayName}</span>
                             {table.displayName !== table.tableName && (
-                              <span className="text-[10px] text-gray-400">{table.tableName}</span>
+                              <span className="text-[10px] text-muted-foreground/70">{table.tableName}</span>
                             )}
                           </div>
                         </CommandItem>
@@ -271,7 +271,7 @@ export const ApprovalStepConfigPanel: React.FC<ApprovalStepConfigPanelProps> = (
                             <div className="flex flex-col">
                               <span>{col.label}</span>
                               {col.label !== col.columnName && (
-                                <span className="text-[10px] text-gray-400">{col.columnName}</span>
+                                <span className="text-[10px] text-muted-foreground/70">{col.columnName}</span>
                               )}
                             </div>
                           </CommandItem>
diff --git a/frontend/lib/registry/components/v2-approval-step/types.ts b/frontend/lib/registry/components/v2-approval-step/types.ts
index 0b3fce43..996c9abd 100644
--- a/frontend/lib/registry/components/v2-approval-step/types.ts
+++ b/frontend/lib/registry/components/v2-approval-step/types.ts
@@ -1,6 +1,7 @@
 "use client";
 
 import { ComponentConfig } from "@/types/component";
+import type { ApprovalLine, ApprovalRequest } from "@/lib/api/approval";
 
 /**
  * ApprovalStep 컴포넌트 설정 타입
@@ -15,3 +16,34 @@ export interface ApprovalStepConfig extends ComponentConfig {
   showDept?: boolean;
   compact?: boolean;
 }
+
+/**
+ * 결재 라인 확장 타입 (v2 마이그레이션 필드 포함)
+ * DB에 step_type, proxy_for, proxy_reason, is_required 컬럼 추가됨
+ */
+export interface ExtendedApprovalLine extends ApprovalLine {
+  step_type?: "approval" | "consensus" | "notification";
+  proxy_for?: string | null;
+  proxy_reason?: string | null;
+  is_required?: boolean;
+}
+
+/**
+ * 결재 요청 확장 타입 (v2 마이그레이션 필드 포함)
+ * DB에 approval_type, is_post_approved, urgency 컬럼 추가됨
+ */
+export interface ExtendedApprovalRequest extends ApprovalRequest {
+  approval_type?: "self" | "escalation" | "consensus" | "post";
+  is_post_approved?: boolean;
+  urgency?: "normal" | "urgent" | "critical";
+}
+
+/**
+ * step_order 기준으로 그룹핑된 결재 단계
+ * 합의결재 시 같은 step_order에 여러 결재자가 존재
+ */
+export interface StepGroup {
+  stepOrder: number;
+  lines: ExtendedApprovalLine[];
+  stepType: "approval" | "consensus" | "notification";
+}
diff --git a/frontend/lib/registry/components/v2-bom-item-editor/BomItemEditorComponent.tsx b/frontend/lib/registry/components/v2-bom-item-editor/BomItemEditorComponent.tsx
index 097c42c4..2324f5f3 100644
--- a/frontend/lib/registry/components/v2-bom-item-editor/BomItemEditorComponent.tsx
+++ b/frontend/lib/registry/components/v2-bom-item-editor/BomItemEditorComponent.tsx
@@ -1227,17 +1227,17 @@ export function BomItemEditorComponent({
         {/* 설정 요약 뱃지 */}
         <div className="flex flex-wrap gap-1">
           {cfg.mainTableName && (
-            <span className="rounded bg-orange-100 px-1.5 py-0.5 text-[10px] text-orange-700">
+            <span className="rounded bg-amber-100 px-1.5 py-0.5 text-[10px] text-orange-700">
               저장: {cfg.mainTableName}
             </span>
           )}
           {cfg.dataSource?.sourceTable && (
-            <span className="rounded bg-blue-100 px-1.5 py-0.5 text-[10px] text-blue-700">
+            <span className="rounded bg-primary/10 px-1.5 py-0.5 text-[10px] text-primary">
               소스: {cfg.dataSource.sourceTable}
             </span>
           )}
           {cfg.parentKeyColumn && (
-            <span className="rounded bg-green-100 px-1.5 py-0.5 text-[10px] text-green-700">
+            <span className="rounded bg-emerald-100 px-1.5 py-0.5 text-[10px] text-emerald-700">
               트리: {cfg.parentKeyColumn}
             </span>
           )}
@@ -1263,7 +1263,7 @@ export function BomItemEditorComponent({
                       key={col.key}
                       className={cn(
                         "px-2 py-1.5 text-left font-medium",
-                        col.isSourceDisplay && "text-blue-600",
+                        col.isSourceDisplay && "text-primary",
                       )}
                       style={{ width: col.width && col.width !== "auto" ? col.width : undefined }}
                     >
@@ -1297,7 +1297,7 @@ export function BomItemEditorComponent({
                     {visibleColumns.map((col: any) => (
                       <td key={col.key} className="px-1.5 py-0.5">
                         {col.isSourceDisplay ? (
-                          <span className="truncate text-blue-600">
+                          <span className="truncate text-primary">
                             {getDummyValue(col, rowIdx) || col.title}
                           </span>
                         ) : col.editable !== false ? (
diff --git a/frontend/lib/registry/components/v2-bom-tree/BomExcelUploadModal.tsx b/frontend/lib/registry/components/v2-bom-tree/BomExcelUploadModal.tsx
index 98a9e823..cd89fff4 100644
--- a/frontend/lib/registry/components/v2-bom-tree/BomExcelUploadModal.tsx
+++ b/frontend/lib/registry/components/v2-bom-tree/BomExcelUploadModal.tsx
@@ -468,18 +468,18 @@ export function BomExcelUploadModal({
                       key={row.rowIndex}
                       className={cn(
                         "border-t hover:bg-muted/30",
-                        row.isHeader && "bg-blue-50/50",
+                        row.isHeader && "bg-primary/10/50",
                         !row.valid && "bg-destructive/5",
                       )}
                     >
                       <td className="px-2 py-1 text-muted-foreground">{row.rowIndex}</td>
                       <td className="px-2 py-1">
                         {row.isHeader ? (
-                          <span className="text-[10px] text-blue-600 font-medium bg-blue-50 px-1.5 py-0.5 rounded">
+                          <span className="text-[10px] text-primary font-medium bg-primary/10 px-1.5 py-0.5 rounded">
                             {isVersionMode ? "건너뜀" : "마스터"}
                           </span>
                         ) : row.valid ? (
-                          <CheckCircle2 className="h-3.5 w-3.5 text-green-500" />
+                          <CheckCircle2 className="h-3.5 w-3.5 text-emerald-500" />
                         ) : (
                           <span className="flex items-center gap-1" title={row.error}>
                             <AlertCircle className="h-3.5 w-3.5 text-destructive" />
@@ -490,7 +490,7 @@ export function BomExcelUploadModal({
                         <span
                           className={cn(
                             "inline-block rounded px-1.5 py-0.5 text-[10px] font-mono",
-                            row.isHeader ? "bg-blue-100 text-blue-700 font-medium" : "bg-muted",
+                            row.isHeader ? "bg-primary/10 text-primary font-medium" : "bg-muted",
                           )}
                           style={{ marginLeft: `${row.level * 8}px` }}
                         >
@@ -534,8 +534,8 @@ export function BomExcelUploadModal({
         {step === "result" && uploadResult && (
           <div className="space-y-4 py-4">
             <div className="flex flex-col items-center text-center">
-              <div className="w-14 h-14 rounded-full bg-green-100 flex items-center justify-center mb-3">
-                <CheckCircle2 className="h-7 w-7 text-green-600" />
+              <div className="w-14 h-14 rounded-full bg-emerald-100 flex items-center justify-center mb-3">
+                <CheckCircle2 className="h-7 w-7 text-emerald-600" />
               </div>
               <h3 className="text-lg font-semibold">
                 {isVersionMode ? "새 버전 생성 완료" : "BOM 생성 완료"}
@@ -548,12 +548,12 @@ export function BomExcelUploadModal({
             <div className={cn("grid gap-3 max-w-xs mx-auto", isVersionMode ? "grid-cols-1" : "grid-cols-2")}>
               {!isVersionMode && (
                 <div className="rounded-lg bg-muted/50 p-3 text-center">
-                  <div className="text-2xl font-bold text-blue-600">1</div>
+                  <div className="text-2xl font-bold text-primary">1</div>
                   <div className="text-xs text-muted-foreground">BOM 마스터</div>
                 </div>
               )}
               <div className="rounded-lg bg-muted/50 p-3 text-center">
-                <div className="text-2xl font-bold text-green-600">{uploadResult.insertedCount}</div>
+                <div className="text-2xl font-bold text-emerald-600">{uploadResult.insertedCount}</div>
                 <div className="text-xs text-muted-foreground">하위품목</div>
               </div>
             </div>
diff --git a/frontend/lib/registry/components/v2-bom-tree/BomHistoryModal.tsx b/frontend/lib/registry/components/v2-bom-tree/BomHistoryModal.tsx
index 26119aaa..4f2f6092 100644
--- a/frontend/lib/registry/components/v2-bom-tree/BomHistoryModal.tsx
+++ b/frontend/lib/registry/components/v2-bom-tree/BomHistoryModal.tsx
@@ -32,10 +32,10 @@ interface BomHistoryModalProps {
 }
 
 const CHANGE_TYPE_STYLE: Record<string, string> = {
-  "등록": "bg-blue-50 text-blue-600 ring-blue-200",
+  "등록": "bg-primary/10 text-primary ring-primary/20",
   "수정": "bg-amber-50 text-amber-600 ring-amber-200",
   "추가": "bg-emerald-50 text-emerald-600 ring-emerald-200",
-  "삭제": "bg-red-50 text-red-600 ring-red-200",
+  "삭제": "bg-destructive/10 text-destructive ring-red-200",
 };
 
 export function BomHistoryModal({ open, onOpenChange, bomId, tableName = "bom_history" }: BomHistoryModalProps) {
@@ -95,36 +95,36 @@ export function BomHistoryModal({ open, onOpenChange, bomId, tableName = "bom_hi
             </div>
           ) : history.length === 0 ? (
             <div className="flex h-32 items-center justify-center">
-              <p className="text-sm text-gray-400">이력이 없습니다</p>
+              <p className="text-sm text-muted-foreground/70">이력이 없습니다</p>
             </div>
           ) : (
             <table className="w-full text-xs">
-              <thead className="sticky top-0 bg-gray-50">
+              <thead className="sticky top-0 bg-muted">
                 <tr className="border-b">
-                  <th className="px-3 py-2.5 text-center text-[11px] font-semibold text-gray-500" style={{ width: "50px" }}>차수</th>
-                  <th className="px-3 py-2.5 text-center text-[11px] font-semibold text-gray-500" style={{ width: "50px" }}>버전</th>
-                  <th className="px-3 py-2.5 text-center text-[11px] font-semibold text-gray-500" style={{ width: "70px" }}>변경구분</th>
-                  <th className="px-3 py-2.5 text-left text-[11px] font-semibold text-gray-500">변경내용</th>
-                  <th className="px-3 py-2.5 text-center text-[11px] font-semibold text-gray-500" style={{ width: "70px" }}>변경자</th>
-                  <th className="px-3 py-2.5 text-center text-[11px] font-semibold text-gray-500" style={{ width: "130px" }}>변경일시</th>
+                  <th className="px-3 py-2.5 text-center text-[11px] font-semibold text-muted-foreground" style={{ width: "50px" }}>차수</th>
+                  <th className="px-3 py-2.5 text-center text-[11px] font-semibold text-muted-foreground" style={{ width: "50px" }}>버전</th>
+                  <th className="px-3 py-2.5 text-center text-[11px] font-semibold text-muted-foreground" style={{ width: "70px" }}>변경구분</th>
+                  <th className="px-3 py-2.5 text-left text-[11px] font-semibold text-muted-foreground">변경내용</th>
+                  <th className="px-3 py-2.5 text-center text-[11px] font-semibold text-muted-foreground" style={{ width: "70px" }}>변경자</th>
+                  <th className="px-3 py-2.5 text-center text-[11px] font-semibold text-muted-foreground" style={{ width: "130px" }}>변경일시</th>
                 </tr>
               </thead>
               <tbody>
                 {history.map((item, idx) => (
-                  <tr key={item.id} className={cn("border-b border-gray-100", idx % 2 === 0 ? "bg-white" : "bg-gray-50/30")}>
+                  <tr key={item.id} className={cn("border-b border-border", idx % 2 === 0 ? "bg-white" : "bg-muted/30")}>
                     <td className="px-3 py-2.5 text-center tabular-nums">{item.revision || "-"}</td>
                     <td className="px-3 py-2.5 text-center tabular-nums">{item.version || "-"}</td>
                     <td className="px-3 py-2.5 text-center">
                       <span className={cn(
                         "inline-flex items-center rounded-md px-1.5 py-0.5 text-[10px] font-medium ring-1 ring-inset",
-                        CHANGE_TYPE_STYLE[item.change_type] || "bg-gray-50 text-gray-500 ring-gray-200",
+                        CHANGE_TYPE_STYLE[item.change_type] || "bg-muted text-muted-foreground ring-gray-200",
                       )}>
                         {item.change_type}
                       </span>
                     </td>
-                    <td className="px-3 py-2.5 text-gray-700">{item.change_description || "-"}</td>
-                    <td className="px-3 py-2.5 text-center text-gray-600">{item.changed_by || "-"}</td>
-                    <td className="px-3 py-2.5 text-center text-gray-400">{formatDate(item.changed_date)}</td>
+                    <td className="px-3 py-2.5 text-foreground">{item.change_description || "-"}</td>
+                    <td className="px-3 py-2.5 text-center text-muted-foreground">{item.changed_by || "-"}</td>
+                    <td className="px-3 py-2.5 text-center text-muted-foreground/70">{formatDate(item.changed_date)}</td>
                   </tr>
                 ))}
               </tbody>
diff --git a/frontend/lib/registry/components/v2-bom-tree/BomTreeComponent.tsx b/frontend/lib/registry/components/v2-bom-tree/BomTreeComponent.tsx
index 8d70f5c1..cf097527 100644
--- a/frontend/lib/registry/components/v2-bom-tree/BomTreeComponent.tsx
+++ b/frontend/lib/registry/components/v2-bom-tree/BomTreeComponent.tsx
@@ -448,12 +448,12 @@ export function BomTreeComponent({
 
   const getItemTypeBadge = (type: string) => {
     const map: Record<string, string> = {
-      product: "bg-blue-50 text-blue-600 ring-blue-200",
+      product: "bg-primary/10 text-primary ring-primary/20",
       semi: "bg-amber-50 text-amber-600 ring-amber-200",
       material: "bg-emerald-50 text-emerald-600 ring-emerald-200",
       part: "bg-purple-50 text-purple-600 ring-purple-200",
     };
-    return map[type] || "bg-gray-50 text-gray-500 ring-gray-200";
+    return map[type] || "bg-muted text-muted-foreground ring-gray-200";
   };
 
   const getItemIcon = (type: string) => {
@@ -463,12 +463,12 @@ export function BomTreeComponent({
 
   const getItemIconColor = (type: string) => {
     const map: Record<string, string> = {
-      product: "text-blue-500",
+      product: "text-primary",
       semi: "text-amber-500",
       material: "text-emerald-500",
       part: "text-purple-500",
     };
-    return map[type] || "text-gray-400";
+    return map[type] || "text-muted-foreground/70";
   };
 
   // ─── 셀 렌더링 ───
@@ -491,18 +491,18 @@ export function BomTreeComponent({
     if (col.key === "level") {
       const displayLevel = node._isVirtualRoot ? 0 : depth;
       return (
-        <span className="inline-flex h-5 w-5 items-center justify-center rounded bg-gray-100 text-[10px] font-medium text-gray-600">
+        <span className="inline-flex h-5 w-5 items-center justify-center rounded bg-muted text-[10px] font-medium text-muted-foreground">
           {displayLevel}
         </span>
       );
     }
 
     if (col.key === "child_item_code") {
-      return <span className="font-mono text-xs text-gray-700">{value || "-"}</span>;
+      return <span className="font-mono text-xs text-foreground">{value || "-"}</span>;
     }
 
     if (col.key === "child_item_name") {
-      return <span className="font-medium text-gray-900">{value || "-"}</span>;
+      return <span className="font-medium text-foreground">{value || "-"}</span>;
     }
 
     if (col.key === "status") {
@@ -512,7 +512,7 @@ export function BomTreeComponent({
 
     if (col.key === "quantity" || col.key === "base_qty") {
       return (
-        <span className="font-medium tabular-nums text-gray-800">
+        <span className="font-medium tabular-nums text-foreground">
           {value != null && value !== "" && value !== "0" ? value : "-"}
         </span>
       );
@@ -525,23 +525,23 @@ export function BomTreeComponent({
 
     if (col.key === "loss_rate") {
       const num = Number(value);
-      if (!num) return <span className="text-gray-300">-</span>;
+      if (!num) return <span className="text-muted-foreground/50">-</span>;
       return <span className="tabular-nums text-amber-600">{value}%</span>;
     }
 
     if (col.key === "revision") {
       return (
-        <span className="tabular-nums text-gray-600">
+        <span className="tabular-nums text-muted-foreground">
           {value != null && value !== "" && value !== "0" ? value : "-"}
         </span>
       );
     }
 
     if (col.key === "unit") {
-      return <span className="text-gray-500">{value || "-"}</span>;
+      return <span className="text-muted-foreground">{value || "-"}</span>;
     }
 
-    return <span className="text-gray-600">{value ?? "-"}</span>;
+    return <span className="text-muted-foreground">{value ?? "-"}</span>;
   };
 
   // ─── 디자인 모드 ───
@@ -553,7 +553,7 @@ export function BomTreeComponent({
       if (col.key === "level") return rowIdx === 0 ? "0" : "1";
       if (col.key.includes("type") || col.key.includes("division")) {
         const badge = rowIdx === 0
-          ? { bg: "bg-blue-50 text-blue-500 ring-blue-200", label: "제품" }
+          ? { bg: "bg-primary/10 text-primary ring-primary/20", label: "제품" }
           : { bg: "bg-amber-50 text-amber-500 ring-amber-200", label: "반제품" };
         return (
           <span className={cn("rounded-md px-1.5 py-0.5 text-[10px] font-medium ring-1 ring-inset", badge.bg)}>
@@ -581,27 +581,27 @@ export function BomTreeComponent({
         {/* 헤더 (실제 화면과 동일 구조) */}
         <div className="border-b px-5 py-3">
           <div className="flex items-center gap-2.5">
-            <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-blue-50">
-              <Package className="h-4 w-4 text-blue-500" />
+            <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary/10">
+              <Package className="h-4 w-4 text-primary" />
             </div>
             <div className="min-w-0 flex-1">
               <div className="flex items-center gap-2">
-                <h3 className="text-sm font-semibold text-gray-400">BOM 상세정보</h3>
-                <span className="inline-flex items-center rounded-md bg-blue-50 px-1.5 py-0.5 text-[10px] font-medium text-blue-500 ring-1 ring-inset ring-blue-200">
+                <h3 className="text-sm font-semibold text-muted-foreground/70">BOM 상세정보</h3>
+                <span className="inline-flex items-center rounded-md bg-primary/10 px-1.5 py-0.5 text-[10px] font-medium text-primary ring-1 ring-inset ring-primary/20">
                   제품
                 </span>
               </div>
-              <div className="mt-0.5 flex gap-3 text-[10px] text-gray-300">
-                <span>품목코드 <b className="text-gray-400">SAMPLE-001</b></span>
-                <span>기준수량 <b className="text-gray-400">1</b></span>
+              <div className="mt-0.5 flex gap-3 text-[10px] text-muted-foreground/50">
+                <span>품목코드 <b className="text-muted-foreground/70">SAMPLE-001</b></span>
+                <span>기준수량 <b className="text-muted-foreground/70">1</b></span>
               </div>
             </div>
           </div>
         </div>
 
         {/* 툴바 (실제 화면과 동일 구조) */}
-        <div className="flex items-center border-b bg-gray-50/50 px-5 py-1.5">
-          <span className="text-xs font-medium text-gray-500">BOM 구성</span>
+        <div className="flex items-center border-b bg-muted/50 px-5 py-1.5">
+          <span className="text-xs font-medium text-muted-foreground">BOM 구성</span>
           <span className="ml-2 rounded-full bg-primary/10 px-2 py-0.5 text-[10px] font-semibold text-primary">2</span>
           <div className="ml-auto flex items-center gap-1">
             {showHistory && (
@@ -616,17 +616,17 @@ export function BomTreeComponent({
                 버전
               </Button>
             )}
-            <div className="mx-1 h-4 w-px bg-gray-200" />
+            <div className="mx-1 h-4 w-px bg-muted/80" />
             <div className="flex overflow-hidden rounded-md border">
               <span className="h-6 bg-primary px-2 text-[10px] font-medium leading-6 text-primary-foreground">트리</span>
-              <span className="h-6 border-l bg-white px-2 text-[10px] font-medium leading-6 text-gray-500">레벨</span>
+              <span className="h-6 border-l bg-white px-2 text-[10px] font-medium leading-6 text-muted-foreground">레벨</span>
             </div>
             {features.showExpandAll !== false && (
               <div className="flex gap-1">
-                <Button variant="ghost" size="sm" disabled className="h-6 gap-1 px-2 text-[10px] text-gray-400">
+                <Button variant="ghost" size="sm" disabled className="h-6 gap-1 px-2 text-[10px] text-muted-foreground/70">
                   <Expand className="h-3 w-3" /> 정전개
                 </Button>
-                <Button variant="ghost" size="sm" disabled className="h-6 gap-1 px-2 text-[10px] text-gray-400">
+                <Button variant="ghost" size="sm" disabled className="h-6 gap-1 px-2 text-[10px] text-muted-foreground/70">
                   <Shrink className="h-3 w-3" /> 역전개
                 </Button>
               </div>
@@ -637,15 +637,15 @@ export function BomTreeComponent({
         {/* 테이블 */}
         {configuredColumns.length === 0 ? (
           <div className="flex flex-1 flex-col items-center justify-center gap-2 p-6">
-            <AlertCircle className="h-8 w-8 text-gray-200" />
-            <p className="text-sm font-medium text-gray-400">컬럼 미설정</p>
-            <p className="text-[11px] text-gray-300">설정 패널 &gt; 컬럼 탭에서 표시할 컬럼을 선택하세요</p>
+            <AlertCircle className="h-8 w-8 text-muted-foreground/30" />
+            <p className="text-sm font-medium text-muted-foreground/70">컬럼 미설정</p>
+            <p className="text-[11px] text-muted-foreground/50">설정 패널 &gt; 컬럼 탭에서 표시할 컬럼을 선택하세요</p>
           </div>
         ) : (
           <div className="flex-1 overflow-auto">
             <table className="w-full border-collapse text-xs">
               <thead className="sticky top-0 z-10">
-                <tr className="border-b bg-gray-50">
+                <tr className="border-b bg-muted">
                   <th className="px-2 py-2.5 text-center" style={{ width: "52px" }}></th>
                   {configuredColumns.map((col: TreeColumnDef) => {
                     const centered = ["quantity", "loss_rate", "base_qty", "revision", "seq_no", "unit", "level"].includes(col.key)
@@ -654,7 +654,7 @@ export function BomTreeComponent({
                       <th
                         key={col.key}
                         className={cn(
-                          "px-3 py-2.5 text-[11px] font-semibold text-gray-500",
+                          "px-3 py-2.5 text-[11px] font-semibold text-muted-foreground",
                           centered ? "text-center" : "text-left",
                         )}
                       >
@@ -666,30 +666,30 @@ export function BomTreeComponent({
               </thead>
               <tbody>
                 {/* 0레벨 루트 */}
-                <tr className="border-b hover:bg-gray-50/50">
+                <tr className="border-b hover:bg-muted/50">
                   <td className="px-2 py-2 text-center">
-                    <ChevronDown className="inline h-3.5 w-3.5 text-gray-400" />
+                    <ChevronDown className="inline h-3.5 w-3.5 text-muted-foreground/70" />
                   </td>
                   {configuredColumns.map((col: TreeColumnDef) => {
                     const centered = ["quantity", "loss_rate", "base_qty", "revision", "seq_no", "unit", "level"].includes(col.key)
                       || col.key.includes("qty") || col.key.includes("quantity");
                     return (
-                      <td key={col.key} className={cn("px-3 py-2 text-gray-600", centered && "text-center")}>
+                      <td key={col.key} className={cn("px-3 py-2 text-muted-foreground", centered && "text-center")}>
                         {previewSampleValue(col, 0)}
                       </td>
                     );
                   })}
                 </tr>
                 {/* 1레벨 자식 */}
-                <tr className="border-b hover:bg-gray-50/50">
+                <tr className="border-b hover:bg-muted/50">
                   <td className="px-2 py-2 text-center" style={{ paddingLeft: `${INDENT_PX + 8}px` }}>
-                    <Layers className="inline h-3.5 w-3.5 text-gray-300" />
+                    <Layers className="inline h-3.5 w-3.5 text-muted-foreground/50" />
                   </td>
                   {configuredColumns.map((col: TreeColumnDef) => {
                     const centered = ["quantity", "loss_rate", "base_qty", "revision", "seq_no", "unit", "level"].includes(col.key)
                       || col.key.includes("qty") || col.key.includes("quantity");
                     return (
-                      <td key={col.key} className={cn("px-3 py-2 text-gray-400", centered && "text-center")}>
+                      <td key={col.key} className={cn("px-3 py-2 text-muted-foreground/70", centered && "text-center")}>
                         {previewSampleValue(col, 1)}
                       </td>
                     );
@@ -707,11 +707,11 @@ export function BomTreeComponent({
 
   if (!selectedBomId) {
     return (
-      <div className="flex h-full items-center justify-center bg-gray-50/30">
+      <div className="flex h-full items-center justify-center bg-muted/30">
         <div className="text-center">
-          <Package className="mx-auto mb-3 h-10 w-10 text-gray-200" />
-          <p className="text-sm font-medium text-gray-400">BOM을 선택해주세요</p>
-          <p className="mt-1 text-xs text-gray-300">좌측 목록에서 BOM을 선택하면 구성이 표시됩니다</p>
+          <Package className="mx-auto mb-3 h-10 w-10 text-muted-foreground/30" />
+          <p className="text-sm font-medium text-muted-foreground/70">BOM을 선택해주세요</p>
+          <p className="mt-1 text-xs text-muted-foreground/50">좌측 목록에서 BOM을 선택하면 구성이 표시됩니다</p>
         </div>
       </div>
     );
@@ -783,7 +783,7 @@ export function BomTreeComponent({
             </div>
             <div className="min-w-0 flex-1">
               <div className="flex items-center gap-2">
-                <h3 className="truncate text-sm font-semibold text-gray-900">
+                <h3 className="truncate text-sm font-semibold text-foreground">
                   {headerInfo.item_name || "-"}
                 </h3>
                 <span className={cn(
@@ -796,15 +796,15 @@ export function BomTreeComponent({
                   "rounded-md px-1.5 py-0.5 text-[10px] font-medium ring-1 ring-inset",
                   headerInfo.status === "active"
                     ? "bg-emerald-50 text-emerald-600 ring-emerald-200"
-                    : "bg-gray-50 text-gray-400 ring-gray-200",
+                    : "bg-muted text-muted-foreground/70 ring-gray-200",
                 )}>
                   {headerInfo.status === "active" ? "사용" : "미사용"}
                 </span>
               </div>
-              <div className="mt-0.5 flex gap-3 text-[11px] text-gray-400">
-                <span>품목코드 <b className="text-gray-600">{headerInfo.item_code || "-"}</b></span>
-                <span>기준수량 <b className="text-gray-600">{headerInfo.base_qty || "1"}</b></span>
-                <span>버전 <b className="text-gray-600">v{headerInfo.version || "1"} (차수 {headerInfo.revision || "1"})</b></span>
+              <div className="mt-0.5 flex gap-3 text-[11px] text-muted-foreground/70">
+                <span>품목코드 <b className="text-muted-foreground">{headerInfo.item_code || "-"}</b></span>
+                <span>기준수량 <b className="text-muted-foreground">{headerInfo.base_qty || "1"}</b></span>
+                <span>버전 <b className="text-muted-foreground">v{headerInfo.version || "1"} (차수 {headerInfo.revision || "1"})</b></span>
               </div>
             </div>
           </div>
@@ -812,8 +812,8 @@ export function BomTreeComponent({
       )}
 
       {/* 툴바 */}
-      <div className="flex items-center border-b bg-gray-50/50 px-5 py-1.5">
-        <span className="text-xs font-medium text-gray-500">BOM 구성</span>
+      <div className="flex items-center border-b bg-muted/50 px-5 py-1.5">
+        <span className="text-xs font-medium text-muted-foreground">BOM 구성</span>
         <span className="ml-2 rounded-full bg-primary/10 px-2 py-0.5 text-[10px] font-semibold text-primary">
           {allFlattenedRows.length}
         </span>
@@ -849,7 +849,7 @@ export function BomTreeComponent({
             <FileSpreadsheet className="h-3 w-3" />
             엑셀
           </Button>
-          <div className="mx-1 h-4 w-px bg-gray-200" />
+          <div className="mx-1 h-4 w-px bg-muted/80" />
           <div className="flex overflow-hidden rounded-md border">
             <button
               onClick={() => setViewMode("tree")}
@@ -857,7 +857,7 @@ export function BomTreeComponent({
                 "h-6 px-2 text-[10px] font-medium transition-colors",
                 viewMode === "tree"
                   ? "bg-primary text-primary-foreground"
-                  : "bg-white text-gray-500 hover:bg-gray-50",
+                  : "bg-white text-muted-foreground hover:bg-muted",
               )}
             >
               트리
@@ -868,7 +868,7 @@ export function BomTreeComponent({
                 "h-6 border-l px-2 text-[10px] font-medium transition-colors",
                 viewMode === "level"
                   ? "bg-primary text-primary-foreground"
-                  : "bg-white text-gray-500 hover:bg-gray-50",
+                  : "bg-white text-muted-foreground hover:bg-muted",
               )}
             >
               레벨
@@ -876,11 +876,11 @@ export function BomTreeComponent({
           </div>
           {features.showExpandAll !== false && (
             <div className={cn("flex gap-1", viewMode !== "tree" && "pointer-events-none invisible")}>
-              <Button variant="ghost" size="sm" onClick={expandAll} className="h-6 gap-1 px-2 text-[10px] text-gray-400 hover:text-gray-600">
+              <Button variant="ghost" size="sm" onClick={expandAll} className="h-6 gap-1 px-2 text-[10px] text-muted-foreground/70 hover:text-muted-foreground">
                 <Expand className="h-3 w-3" />
                 정전개
               </Button>
-              <Button variant="ghost" size="sm" onClick={collapseAll} className="h-6 gap-1 px-2 text-[10px] text-gray-400 hover:text-gray-600">
+              <Button variant="ghost" size="sm" onClick={collapseAll} className="h-6 gap-1 px-2 text-[10px] text-muted-foreground/70 hover:text-muted-foreground">
                 <Shrink className="h-3 w-3" />
                 역전개
               </Button>
@@ -897,14 +897,14 @@ export function BomTreeComponent({
           </div>
         ) : displayColumns.length === 0 ? (
           <div className="flex h-40 flex-col items-center justify-center gap-2">
-            <AlertCircle className="h-6 w-6 text-gray-200" />
-            <p className="text-xs text-gray-400">표시할 컬럼이 설정되지 않았습니다</p>
-            <p className="text-[10px] text-gray-300">디자인 모드에서 컬럼을 추가하세요</p>
+            <AlertCircle className="h-6 w-6 text-muted-foreground/30" />
+            <p className="text-xs text-muted-foreground/70">표시할 컬럼이 설정되지 않았습니다</p>
+            <p className="text-[10px] text-muted-foreground/50">디자인 모드에서 컬럼을 추가하세요</p>
           </div>
         ) : treeData.length === 0 ? (
           <div className="flex h-40 flex-col items-center justify-center gap-2">
-            <Box className="h-8 w-8 text-gray-200" />
-            <p className="text-xs text-gray-400">등록된 하위 품목이 없습니다</p>
+            <Box className="h-8 w-8 text-muted-foreground/30" />
+            <p className="text-xs text-muted-foreground/70">등록된 하위 품목이 없습니다</p>
           </div>
         ) : viewMode === "level" ? (
           /* ═══ 레벨 뷰 ═══ */
@@ -922,11 +922,11 @@ export function BomTreeComponent({
               ))}
             </colgroup>
             <thead className="sticky top-0 z-10">
-              <tr className="border-b bg-gray-50">
+              <tr className="border-b bg-muted">
                 {levelColumnsForView.map((lvl) => (
                   <th
                     key={`lv-${lvl}`}
-                    className="whitespace-nowrap px-0.5 py-2.5 text-center text-[10px] font-semibold text-gray-500"
+                    className="whitespace-nowrap px-0.5 py-2.5 text-center text-[10px] font-semibold text-muted-foreground"
                   >
                     {lvl}
                   </th>
@@ -938,7 +938,7 @@ export function BomTreeComponent({
                     <th
                       key={col.key}
                       className={cn(
-                        "relative select-none whitespace-nowrap px-3 py-2.5 text-[11px] font-semibold text-gray-500",
+                        "relative select-none whitespace-nowrap px-3 py-2.5 text-[11px] font-semibold text-muted-foreground",
                         centered ? "text-center" : "text-left",
                       )}
                       style={w ? { width: `${w}px` } : undefined}
@@ -959,16 +959,16 @@ export function BomTreeComponent({
                 const displayDepth = isRoot ? 0 : depth;
 
                 const lvlDepthBg = isRoot
-                  ? "border-gray-200 bg-blue-50/50 font-medium hover:bg-blue-50/70"
+                  ? "border-border bg-primary/10/50 font-medium hover:bg-primary/10/70"
                   : selectedNodeId === node.id
-                    ? "border-gray-100 bg-primary/5"
+                    ? "border-border bg-primary/5"
                     : depth === 1
-                      ? "border-gray-100 bg-white hover:bg-gray-50/60"
+                      ? "border-border bg-white hover:bg-muted/60"
                       : depth === 2
-                        ? "border-gray-100 bg-gray-50/40 hover:bg-gray-100/50"
+                        ? "border-border bg-muted/40 hover:bg-muted/50"
                         : depth >= 3
-                          ? "border-gray-100 bg-gray-100/40 hover:bg-gray-100/60"
-                          : "border-gray-100 bg-white hover:bg-gray-50/60";
+                          ? "border-border bg-muted/40 hover:bg-muted/60"
+                          : "border-border bg-white hover:bg-muted/60";
 
                 return (
                   <tr
@@ -986,7 +986,7 @@ export function BomTreeComponent({
                         className="py-2 text-center"
                       >
                         {displayDepth === lvl ? (
-                          <Check className="mx-auto h-3.5 w-3.5 text-gray-700" />
+                          <Check className="mx-auto h-3.5 w-3.5 text-foreground" />
                         ) : null}
                       </td>
                     ))}
@@ -1019,7 +1019,7 @@ export function BomTreeComponent({
               ))}
             </colgroup>
             <thead className="sticky top-0 z-10">
-              <tr className="border-b bg-gray-50">
+              <tr className="border-b bg-muted">
                 <th className="px-2 py-2.5"></th>
                 {displayColumns.map((col) => {
                   const centered = ["quantity", "loss_rate", "level", "base_qty", "revision", "seq_no"].includes(col.key);
@@ -1028,7 +1028,7 @@ export function BomTreeComponent({
                     <th
                       key={col.key}
                       className={cn(
-                        "relative select-none px-3 py-2.5 text-[11px] font-semibold text-gray-500",
+                        "relative select-none px-3 py-2.5 text-[11px] font-semibold text-muted-foreground",
                         centered ? "text-center" : "text-left",
                       )}
                       style={{ width: w ? `${w}px` : (col.width || "auto") }}
@@ -1053,22 +1053,22 @@ export function BomTreeComponent({
                 const ItemIcon = getItemIcon(itemType);
 
                 const depthBg = isRoot
-                  ? "border-gray-200 bg-blue-50/50 font-medium hover:bg-blue-50/70"
+                  ? "border-border bg-primary/10/50 font-medium hover:bg-primary/10/70"
                   : isSelected
-                    ? "border-gray-100 bg-primary/5"
+                    ? "border-border bg-primary/5"
                     : depth === 1
-                      ? "border-gray-100 bg-white hover:bg-gray-50/60"
+                      ? "border-border bg-white hover:bg-muted/60"
                       : depth === 2
-                        ? "border-gray-100 bg-gray-50/40 hover:bg-gray-100/50"
+                        ? "border-border bg-muted/40 hover:bg-muted/50"
                         : depth >= 3
-                          ? "border-gray-100 bg-gray-100/40 hover:bg-gray-100/60"
-                          : "border-gray-100 bg-white hover:bg-gray-50/60";
+                          ? "border-border bg-muted/40 hover:bg-muted/60"
+                          : "border-border bg-white hover:bg-muted/60";
 
                 const depthBarColor = isRoot
-                  ? "bg-blue-400"
+                  ? "bg-primary/70"
                   : depth === 1 ? "bg-emerald-400"
                   : depth === 2 ? "bg-amber-400"
-                  : depth >= 3 ? "bg-purple-400" : "bg-gray-300";
+                  : depth >= 3 ? "bg-purple-400" : "bg-muted/60";
 
                 return (
                   <tr
@@ -1089,12 +1089,12 @@ export function BomTreeComponent({
                         <span className="flex h-4 w-4 flex-shrink-0 items-center justify-center">
                           {hasChildren ? (
                             isExpanded ? (
-                              <ChevronDown className={cn("h-3.5 w-3.5 transition-transform", isRoot ? "text-blue-500" : "text-gray-400")} />
+                              <ChevronDown className={cn("h-3.5 w-3.5 transition-transform", isRoot ? "text-primary" : "text-muted-foreground/70")} />
                             ) : (
-                              <ChevronRight className={cn("h-3.5 w-3.5 transition-transform", isRoot ? "text-blue-500" : "text-gray-400")} />
+                              <ChevronRight className={cn("h-3.5 w-3.5 transition-transform", isRoot ? "text-primary" : "text-muted-foreground/70")} />
                             )
                           ) : (
-                            <span className="h-1 w-1 rounded-full bg-gray-300" />
+                            <span className="h-1 w-1 rounded-full bg-muted/60" />
                           )}
                         </span>
                         <span className={cn(
diff --git a/frontend/lib/registry/components/v2-bom-tree/BomVersionModal.tsx b/frontend/lib/registry/components/v2-bom-tree/BomVersionModal.tsx
index 48c27cc9..e437935a 100644
--- a/frontend/lib/registry/components/v2-bom-tree/BomVersionModal.tsx
+++ b/frontend/lib/registry/components/v2-bom-tree/BomVersionModal.tsx
@@ -33,9 +33,9 @@ interface BomVersionModalProps {
 }
 
 const STATUS_STYLE: Record<string, { label: string; className: string }> = {
-  developing: { label: "개발중", className: "bg-red-50 text-red-600 ring-red-200" },
+  developing: { label: "개발중", className: "bg-destructive/10 text-destructive ring-red-200" },
   active: { label: "사용", className: "bg-emerald-50 text-emerald-600 ring-emerald-200" },
-  inactive: { label: "사용중지", className: "bg-gray-100 text-gray-500 ring-gray-200" },
+  inactive: { label: "사용중지", className: "bg-muted text-muted-foreground ring-gray-200" },
 };
 
 export function BomVersionModal({ open, onOpenChange, bomId, tableName = "bom_version", detailTable = "bom_detail", onVersionLoaded }: BomVersionModalProps) {
@@ -168,7 +168,7 @@ export function BomVersionModal({ open, onOpenChange, bomId, tableName = "bom_ve
             </div>
           ) : versions.length === 0 ? (
             <div className="flex h-32 items-center justify-center">
-              <p className="text-sm text-gray-400">생성된 버전이 없습니다</p>
+              <p className="text-sm text-muted-foreground/70">생성된 버전이 없습니다</p>
             </div>
           ) : (
             versions.map((ver) => {
@@ -179,12 +179,12 @@ export function BomVersionModal({ open, onOpenChange, bomId, tableName = "bom_ve
                   key={ver.id}
                   className={cn(
                     "flex items-center gap-3 rounded-lg border p-3 transition-colors",
-                    ver.status === "active" ? "border-emerald-200 bg-emerald-50/30" : "border-gray-200",
+                    ver.status === "active" ? "border-emerald-200 bg-emerald-50/30" : "border-border",
                   )}
                 >
                   <div className="min-w-0 flex-1">
                     <div className="flex items-center gap-2">
-                      <span className="text-sm font-semibold text-gray-900">
+                      <span className="text-sm font-semibold text-foreground">
                         Version {ver.version_name}
                       </span>
                       <span className={cn(
@@ -194,7 +194,7 @@ export function BomVersionModal({ open, onOpenChange, bomId, tableName = "bom_ve
                         {st.label}
                       </span>
                     </div>
-                    <div className="mt-0.5 flex gap-3 text-[11px] text-gray-400">
+                    <div className="mt-0.5 flex gap-3 text-[11px] text-muted-foreground/70">
                       <span>차수: {ver.revision}</span>
                       <span>등록일: {formatDate(ver.created_date)}</span>
                       {ver.created_by && <span>등록자: {ver.created_by}</span>}
diff --git a/frontend/lib/registry/components/v2-button-primary/ButtonPrimaryComponent.tsx b/frontend/lib/registry/components/v2-button-primary/ButtonPrimaryComponent.tsx
index 3344d38c..fa0cfaae 100644
--- a/frontend/lib/registry/components/v2-button-primary/ButtonPrimaryComponent.tsx
+++ b/frontend/lib/registry/components/v2-button-primary/ButtonPrimaryComponent.tsx
@@ -22,6 +22,7 @@ import {
 import { toast } from "sonner";
 import { showErrorToast } from "@/lib/utils/toastUtils";
 import { filterDOMProps } from "@/lib/utils/domPropsFilter";
+import { ButtonIconRenderer } from "@/lib/button-icon-map";
 import { useCurrentFlowStep } from "@/stores/flowStepStore";
 import { useScreenPreview } from "@/contexts/ScreenPreviewContext";
 import { useScreenContextOptional } from "@/contexts/ScreenContext";
@@ -29,7 +30,6 @@ import { useSplitPanelContext, SplitPanelPosition } from "@/contexts/SplitPanelC
 import { applyMappingRules } from "@/lib/utils/dataMapping";
 import { apiClient } from "@/lib/api/client";
 import { V2ErrorBoundary, v2EventBus, V2_EVENTS } from "@/lib/v2-core";
-
 export interface ButtonPrimaryComponentProps extends ComponentRendererProps {
   config?: ButtonPrimaryConfig;
   // 추가 props
@@ -556,13 +556,23 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
   }
 
   // 스타일 계산
-  // 🔧 사용자가 설정한 크기가 있으면 그대로 사용
-  const componentStyle: React.CSSProperties = {
+  // 외부 wrapper는 부모 컨테이너(RealtimePreviewDynamic)에 맞춰 100% 채움
+  // border는 내부 버튼에서만 적용 (wrapper에 적용되면 이중 테두리 발생)
+  const {
+    border: _border, borderWidth: _bw, borderStyle: _bs, borderColor: _bc, borderRadius: _br,
+    ...restComponentStyle
+  } = {
     ...component.style,
     ...style,
+  } as React.CSSProperties & Record<string, any>;
+
+  const componentStyle: React.CSSProperties = {
+    ...restComponentStyle,
+    width: "100%",
+    height: "100%",
   };
 
-  // 디자인 모드 스타일 (border 속성 분리하여 충돌 방지)
+  // 디자인 모드 스타일
   if (isDesignMode) {
     componentStyle.borderWidth = "1px";
     componentStyle.borderStyle = "dashed";
@@ -612,7 +622,7 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
       // 실패한 경우 오류 처리
       if (!success) {
         // UI 전환 액션 및 모달 액션은 에러도 조용히 처리 (모달 내부에서 자체 에러 표시)
-        const silentErrorActions = ["edit", "modal", "navigate", "excel_upload", "barcode_scan"];
+        const silentErrorActions = ["edit", "modal", "navigate", "excel_upload", "barcode_scan", "save", "delete", "quickInsert"];
         if (silentErrorActions.includes(actionConfig.type)) {
           return;
         }
@@ -1217,15 +1227,6 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
         effectiveFormData = { ...splitPanelParentData };
       }
 
-      console.log("🔴 [ButtonPrimary] 저장 시 formData 디버그:", {
-        propsFormDataKeys: Object.keys(propsFormData),
-        screenContextFormDataKeys: Object.keys(screenContextFormData),
-        effectiveFormDataKeys: Object.keys(effectiveFormData),
-        process_code: effectiveFormData.process_code,
-        equipment_code: effectiveFormData.equipment_code,
-        fullData: JSON.stringify(effectiveFormData),
-      });
-
       const context: ButtonActionContext = {
         formData: effectiveFormData,
         originalData: originalData, // 🔧 빈 객체 대신 undefined 유지 (UPDATE 판단에 사용)
@@ -1382,31 +1383,29 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
     }
   }
 
-  // 🆕 최종 비활성화 상태 (설정 + 조건부 비활성화 + 행 선택 필수)
   const finalDisabled =
     componentConfig.disabled || isOperationButtonDisabled || isRowSelectionDisabled || statusLoading;
 
   // 공통 버튼 스타일
-  // 🔧 component.style에서 background/backgroundColor 충돌 방지 (width/height는 허용)
+  // 크기는 부모 컨테이너(RealtimePreviewDynamic)에서 관리하므로 width/height 제외
   const userStyle = component.style
     ? Object.fromEntries(
-        Object.entries(component.style).filter(([key]) => !["background", "backgroundColor"].includes(key)),
+        Object.entries(component.style).filter(([key]) => !["background", "backgroundColor", "width", "height"].includes(key)),
       )
     : {};
 
-  // 🔧 사용자가 설정한 크기 우선 사용, 없으면 100%
-  const buttonWidth = component.size?.width ? `${component.size.width}px` : style?.width || "100%";
-  const buttonHeight = component.size?.height ? `${component.size.height}px` : style?.height || "100%";
+  // 버튼은 부모 컨테이너를 꽉 채움 (크기는 RealtimePreviewDynamic에서 관리)
+  const buttonWidth = "100%";
+  const buttonHeight = "100%";
 
   const buttonElementStyle: React.CSSProperties = {
     width: buttonWidth,
     height: buttonHeight,
     minHeight: "32px", // 🔧 최소 높이를 32px로 줄임
-    // 🔧 커스텀 테두리 스타일 (StyleEditor에서 설정한 값 우선)
-    border: style?.border || (style?.borderWidth ? undefined : "none"),
-    borderWidth: style?.borderWidth || undefined,
-    borderStyle: (style?.borderStyle as React.CSSProperties["borderStyle"]) || undefined,
-    borderColor: style?.borderColor || undefined,
+    // 커스텀 테두리 스타일 (StyleEditor 설정 우선, shorthand 사용 안 함)
+    borderWidth: style?.borderWidth || "0",
+    borderStyle: (style?.borderStyle as React.CSSProperties["borderStyle"]) || (style?.borderWidth ? "solid" : "none"),
+    borderColor: style?.borderColor || "transparent",
     borderRadius: style?.borderRadius || "0.5rem",
     backgroundColor: finalDisabled ? "#e5e7eb" : buttonColor,
     color: finalDisabled ? "#9ca3af" : (style?.color || buttonTextColor), // 🔧 StyleEditor 텍스트 색상도 지원
@@ -1444,7 +1443,7 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
     cancel: "취소",
   };
 
-  const buttonContent =
+  const buttonTextContent =
     processedConfig.text ||
     component.webTypeConfig?.text ||
     component.componentConfig?.text ||
@@ -1458,16 +1457,17 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
     <>
       <div style={componentStyle} className={className} {...safeDomProps}>
         {isDesignMode ? (
-          // 디자인 모드: div로 렌더링하여 선택 가능하게 함
           <div
             className="transition-colors duration-150 hover:opacity-90"
             style={buttonElementStyle}
             onClick={handleClick}
           >
-            {buttonContent}
+            <ButtonIconRenderer
+              componentConfig={componentConfig}
+              fallbackLabel={buttonTextContent as string}
+            />
           </div>
         ) : (
-          // 일반 모드: button으로 렌더링
           <button
             type={componentConfig.actionType || "button"}
             disabled={finalDisabled}
@@ -1476,8 +1476,12 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
             onClick={handleClick}
             onDragStart={onDragStart}
             onDragEnd={onDragEnd}
+            {...(actionType ? { "data-action-type": actionType } : {})}
           >
-            {buttonContent}
+            <ButtonIconRenderer
+              componentConfig={componentConfig}
+              fallbackLabel={buttonTextContent as string}
+            />
           </button>
         )}
       </div>
diff --git a/frontend/lib/registry/components/v2-card-display/CardDisplayComponent.tsx b/frontend/lib/registry/components/v2-card-display/CardDisplayComponent.tsx
index 12eff3ab..3f83186c 100644
--- a/frontend/lib/registry/components/v2-card-display/CardDisplayComponent.tsx
+++ b/frontend/lib/registry/components/v2-card-display/CardDisplayComponent.tsx
@@ -792,7 +792,7 @@ export const CardDisplayComponent: React.FC<CardDisplayComponentProps> = ({
       >
         <div className="text-muted-foreground text-center">
           <div className="text-lg mb-2">좌측에서 항목을 선택해주세요</div>
-          <div className="text-sm text-gray-400">선택한 항목의 관련 데이터가 여기에 표시됩니다</div>
+          <div className="text-sm text-muted-foreground/70">선택한 항목의 관련 데이터가 여기에 표시됩니다</div>
         </div>
       </div>
     );
@@ -1084,7 +1084,7 @@ export const CardDisplayComponent: React.FC<CardDisplayComponentProps> = ({
                         <img 
                           src={imageUrl} 
                           alt={titleValue || "이미지"}
-                          className="h-16 w-16 rounded-lg object-cover border border-gray-200"
+                          className="h-16 w-16 rounded-lg object-cover border border-border"
                           onError={(e) => {
                             // 이미지 로드 실패 시 기본 아이콘으로 대체
                             e.currentTarget.src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Crect width='64' height='64' fill='%23e0e7ff' rx='8'/%3E%3Ctext x='32' y='40' text-anchor='middle' fill='%236366f1' font-size='24'%3E👤%3C/text%3E%3C/svg%3E";
@@ -1144,7 +1144,7 @@ export const CardDisplayComponent: React.FC<CardDisplayComponentProps> = ({
                       <div className="mt-2 flex justify-end space-x-2">
                         {(componentConfig.cardStyle?.showViewButton ?? true) && (
                           <button 
-                            className="text-xs text-blue-600 hover:text-blue-800 transition-colors"
+                            className="text-xs text-primary hover:text-primary transition-colors"
                             onClick={(e) => {
                               e.stopPropagation();
                               handleCardView(data);
@@ -1166,7 +1166,7 @@ export const CardDisplayComponent: React.FC<CardDisplayComponentProps> = ({
                         )}
                         {(componentConfig.cardStyle?.showDeleteButton ?? false) && (
                           <button 
-                            className="text-xs text-red-500 hover:text-red-700 transition-colors"
+                            className="text-xs text-destructive hover:text-destructive transition-colors"
                             onClick={(e) => {
                               e.stopPropagation();
                               handleCardDelete(data, index);
diff --git a/frontend/lib/registry/components/v2-card-display/CardDisplayConfigPanel.tsx b/frontend/lib/registry/components/v2-card-display/CardDisplayConfigPanel.tsx
index b13a5946..bbd71caa 100644
--- a/frontend/lib/registry/components/v2-card-display/CardDisplayConfigPanel.tsx
+++ b/frontend/lib/registry/components/v2-card-display/CardDisplayConfigPanel.tsx
@@ -367,7 +367,7 @@ export const CardDisplayConfigPanel: React.FC<CardDisplayConfigPanelProps> = ({
           {/* 조인 테이블별 컬럼 */}
           {Object.entries(joinColumnsByTable).map(([tableName, columns]) => (
             <SelectGroup key={tableName}>
-              <SelectLabel className="text-xs font-semibold text-blue-600">
+              <SelectLabel className="text-xs font-semibold text-primary">
                 {tableName} (조인)
               </SelectLabel>
               {columns.map((col) => (
@@ -433,7 +433,7 @@ export const CardDisplayConfigPanel: React.FC<CardDisplayConfigPanelProps> = ({
                             : "opacity-0"
                         )}
                       />
-                      <Database className="mr-2 h-3.5 w-3.5 text-blue-500" />
+                      <Database className="mr-2 h-3.5 w-3.5 text-primary" />
                       {allTables.find(t => t.tableName === screenTableName)?.displayName || screenTableName}
                     </CommandItem>
                   </CommandGroup>
diff --git a/frontend/lib/registry/components/v2-category-manager/V2CategoryManagerComponent.tsx b/frontend/lib/registry/components/v2-category-manager/V2CategoryManagerComponent.tsx
index 615ea61d..2e654c7a 100644
--- a/frontend/lib/registry/components/v2-category-manager/V2CategoryManagerComponent.tsx
+++ b/frontend/lib/registry/components/v2-category-manager/V2CategoryManagerComponent.tsx
@@ -6,13 +6,14 @@
  * - 3단계 계층 구조 지원 (대분류/중분류/소분류)
  */
 
-import React, { useState, useRef, useCallback, useEffect } from "react";
+import React, { useState, useCallback, useEffect } from "react";
 import { CategoryColumnList } from "@/components/table-category/CategoryColumnList";
 import { CategoryValueManager } from "@/components/table-category/CategoryValueManager";
 import { CategoryValueManagerTree } from "@/components/table-category/CategoryValueManagerTree";
-import { GripVertical, LayoutList, TreeDeciduous } from "lucide-react";
+import { LayoutList, TreeDeciduous } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
+import { ResponsiveSplitPanel } from "@/components/common/ResponsiveSplitPanel";
 import { V2CategoryManagerConfig, defaultV2CategoryManagerConfig, ViewMode } from "./types";
 
 interface V2CategoryManagerComponentProps {
@@ -69,141 +70,100 @@ export function V2CategoryManagerComponent({
   // 뷰 모드 상태
   const [viewMode, setViewMode] = useState<ViewMode>(config.viewMode);
 
-  // 좌측 패널 너비 상태
-  const [leftWidth, setLeftWidth] = useState(config.leftPanelWidth);
-  const containerRef = useRef<HTMLDivElement>(null);
-  const isDraggingRef = useRef(false);
-
-  // 리사이저 핸들러
-  const handleMouseDown = useCallback(() => {
-    isDraggingRef.current = true;
-    document.body.style.cursor = "col-resize";
-    document.body.style.userSelect = "none";
-  }, []);
-
-  const handleMouseMove = useCallback((e: MouseEvent) => {
-    if (!isDraggingRef.current || !containerRef.current) return;
-
-    const containerRect = containerRef.current.getBoundingClientRect();
-    const newLeftWidth = ((e.clientX - containerRect.left) / containerRect.width) * 100;
-
-    if (newLeftWidth >= 10 && newLeftWidth <= 40) {
-      setLeftWidth(newLeftWidth);
-    }
-  }, []);
-
-  const handleMouseUp = useCallback(() => {
-    isDraggingRef.current = false;
-    document.body.style.cursor = "";
-    document.body.style.userSelect = "";
-  }, []);
-
-  useEffect(() => {
-    document.addEventListener("mousemove", handleMouseMove);
-    document.addEventListener("mouseup", handleMouseUp);
-
-    return () => {
-      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseup", handleMouseUp);
-    };
-  }, [handleMouseMove, handleMouseUp]);
-
   // 컬럼 선택 핸들러
   const handleColumnSelect = useCallback((uniqueKey: string, columnLabel: string, tableName: string) => {
     const columnName = uniqueKey.split(".")[1];
     setSelectedColumn({ uniqueKey, columnName, columnLabel, tableName });
   }, []);
 
-  return (
-    <div ref={containerRef} className="flex h-full min-h-[10px] gap-0 overflow-hidden" style={{ height: config.height }}>
-      {/* 좌측: 카테고리 컬럼 리스트 - 스크롤 가능 */}
-      {config.showColumnList && (
-        <>
-          <div 
-            style={{ width: `${leftWidth}%` }} 
-            className="flex h-full flex-col overflow-hidden pr-3"
-          >
-            <div className="flex-1 overflow-y-auto">
-              <CategoryColumnList
-                tableName={effectiveTableName}
-                selectedColumn={selectedColumn?.uniqueKey || null}
-                onColumnSelect={handleColumnSelect}
-                menuObjid={effectiveMenuObjid}
-              />
-            </div>
+  // 우측 패널 콘텐츠
+  const rightContent = (
+    <>
+      {/* 뷰 모드 토글 */}
+      {config.showViewModeToggle && (
+        <div className="mb-2 flex items-center justify-end gap-1">
+          <span className="text-muted-foreground mr-2 text-xs">보기 방식:</span>
+          <div className="flex rounded-md border p-0.5">
+            <Button
+              variant="ghost"
+              size="sm"
+              className={cn("h-7 gap-1.5 px-2.5 text-xs", viewMode === "tree" && "bg-accent")}
+              onClick={() => setViewMode("tree")}
+            >
+              <TreeDeciduous className="h-3.5 w-3.5" />
+              트리
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              className={cn("h-7 gap-1.5 px-2.5 text-xs", viewMode === "list" && "bg-accent")}
+              onClick={() => setViewMode("list")}
+            >
+              <LayoutList className="h-3.5 w-3.5" />
+              목록
+            </Button>
           </div>
-
-          {/* 리사이저 */}
-          <div
-            onMouseDown={handleMouseDown}
-            className="group hover:bg-accent/50 relative flex h-full w-3 shrink-0 cursor-col-resize items-center justify-center border-r transition-colors"
-          >
-            <GripVertical className="text-muted-foreground group-hover:text-foreground h-4 w-4 transition-colors" />
-          </div>
-        </>
+        </div>
       )}
 
-      {/* 우측: 카테고리 값 관리 - 고정 */}
-      <div style={{ width: config.showColumnList ? `${100 - leftWidth - 1}%` : "100%" }} className="flex h-full flex-col overflow-hidden pl-3">
-        {/* 뷰 모드 토글 */}
-        {config.showViewModeToggle && (
-          <div className="mb-2 flex items-center justify-end gap-1">
-            <span className="text-muted-foreground mr-2 text-xs">보기 방식:</span>
-            <div className="flex rounded-md border p-0.5">
-              <Button
-                variant="ghost"
-                size="sm"
-                className={cn("h-7 gap-1.5 px-2.5 text-xs", viewMode === "tree" && "bg-accent")}
-                onClick={() => setViewMode("tree")}
-              >
-                <TreeDeciduous className="h-3.5 w-3.5" />
-                트리
-              </Button>
-              <Button
-                variant="ghost"
-                size="sm"
-                className={cn("h-7 gap-1.5 px-2.5 text-xs", viewMode === "list" && "bg-accent")}
-                onClick={() => setViewMode("list")}
-              >
-                <LayoutList className="h-3.5 w-3.5" />
-                목록
-              </Button>
+      {/* 카테고리 값 관리 */}
+      <div className="min-h-0 flex-1 overflow-y-auto">
+        {selectedColumn ? (
+          viewMode === "tree" ? (
+            <CategoryValueManagerTree
+              key={`tree-${selectedColumn.uniqueKey}`}
+              tableName={selectedColumn.tableName}
+              columnName={selectedColumn.columnName}
+              columnLabel={selectedColumn.columnLabel}
+            />
+          ) : (
+            <CategoryValueManager
+              key={`list-${selectedColumn.uniqueKey}`}
+              tableName={selectedColumn.tableName}
+              columnName={selectedColumn.columnName}
+              columnLabel={selectedColumn.columnLabel}
+              menuObjid={effectiveMenuObjid}
+            />
+          )
+        ) : (
+          <div className="bg-card flex h-64 flex-col items-center justify-center rounded-lg border shadow-sm">
+            <div className="flex flex-col items-center gap-2 text-center">
+              <TreeDeciduous className="text-muted-foreground/30 h-10 w-10" />
+              <p className="text-muted-foreground text-sm">
+                {config.showColumnList ? "좌측에서 관리할 카테고리 컬럼을 선택하세요" : "카테고리 컬럼이 설정되지 않았습니다"}
+              </p>
             </div>
           </div>
         )}
-
-        {/* 카테고리 값 관리 컴포넌트 - 스크롤 가능 */}
-        <div className="min-h-0 flex-1 overflow-y-auto">
-          {selectedColumn ? (
-            viewMode === "tree" ? (
-              <CategoryValueManagerTree
-                key={`tree-${selectedColumn.uniqueKey}`}
-                tableName={selectedColumn.tableName}
-                columnName={selectedColumn.columnName}
-                columnLabel={selectedColumn.columnLabel}
-              />
-            ) : (
-              <CategoryValueManager
-                key={`list-${selectedColumn.uniqueKey}`}
-                tableName={selectedColumn.tableName}
-                columnName={selectedColumn.columnName}
-                columnLabel={selectedColumn.columnLabel}
-                menuObjid={effectiveMenuObjid}
-              />
-            )
-          ) : (
-            <div className="bg-card flex h-64 flex-col items-center justify-center rounded-lg border shadow-sm">
-              <div className="flex flex-col items-center gap-2 text-center">
-                <TreeDeciduous className="text-muted-foreground/30 h-10 w-10" />
-                <p className="text-muted-foreground text-sm">
-                  {config.showColumnList ? "좌측에서 관리할 카테고리 컬럼을 선택하세요" : "카테고리 컬럼이 설정되지 않았습니다"}
-                </p>
-              </div>
-            </div>
-          )}
-        </div>
       </div>
-    </div>
+    </>
+  );
+
+  if (!config.showColumnList) {
+    return (
+      <div className="flex h-full flex-col overflow-hidden" style={{ height: config.height }}>
+        {rightContent}
+      </div>
+    );
+  }
+
+  return (
+    <ResponsiveSplitPanel
+      left={
+        <CategoryColumnList
+          tableName={effectiveTableName}
+          selectedColumn={selectedColumn?.uniqueKey || null}
+          onColumnSelect={handleColumnSelect}
+          menuObjid={effectiveMenuObjid}
+        />
+      }
+      right={rightContent}
+      leftTitle="카테고리 컬럼"
+      leftWidth={config.leftPanelWidth}
+      minLeftWidth={10}
+      maxLeftWidth={40}
+      height={config.height}
+    />
   );
 }
 
diff --git a/frontend/lib/registry/components/v2-date/V2DateRenderer.tsx b/frontend/lib/registry/components/v2-date/V2DateRenderer.tsx
index 1550bbe3..cee019c0 100644
--- a/frontend/lib/registry/components/v2-date/V2DateRenderer.tsx
+++ b/frontend/lib/registry/components/v2-date/V2DateRenderer.tsx
@@ -4,6 +4,8 @@ import React from "react";
 import { AutoRegisteringComponentRenderer } from "../../AutoRegisteringComponentRenderer";
 import { V2DateDefinition } from "./index";
 import { V2Date } from "@/components/v2/V2Date";
+import { isColumnRequiredByMeta } from "../../DynamicComponentRenderer";
+import { getFormatRules } from "@/lib/formatting";
 
 /**
  * V2Date 렌더러
@@ -18,6 +20,7 @@ export class V2DateRenderer extends AutoRegisteringComponentRenderer {
     // 컴포넌트 설정 추출
     const config = component.componentConfig || component.config || {};
     const columnName = component.columnName;
+    const tableName = component.tableName || this.props.tableName;
 
     // formData에서 현재 값 가져오기
     const currentValue = formData?.[columnName] ?? component.value ?? "";
@@ -32,20 +35,16 @@ export class V2DateRenderer extends AutoRegisteringComponentRenderer {
     // 라벨: style.labelText 우선, 없으면 component.label 사용
     // style.labelDisplay가 false면 라벨 숨김
     const style = component.style || {};
-    const effectiveLabel = style.labelDisplay === false ? undefined : (style.labelText || component.label);
+    const effectiveLabel = style.labelDisplay === false ? undefined : style.labelText || component.label;
 
     return (
       <V2Date
         id={component.id}
-        label={effectiveLabel}
-        required={component.required}
-        readonly={config.readonly || component.readonly}
-        disabled={config.disabled || component.disabled}
         value={currentValue}
         onChange={handleChange}
         config={{
           dateType: config.dateType || config.webType || "date",
-          format: config.format || "YYYY-MM-DD",
+          format: config.format || getFormatRules().date.display,
           placeholder: config.placeholder || style.placeholder || "날짜 선택",
           showTime: config.showTime || false,
           use24Hours: config.use24Hours ?? true,
@@ -55,6 +54,10 @@ export class V2DateRenderer extends AutoRegisteringComponentRenderer {
         style={component.style}
         size={component.size}
         {...restProps}
+        label={effectiveLabel}
+        required={component.required || isColumnRequiredByMeta(tableName, columnName)}
+        readonly={config.readonly || component.readonly}
+        disabled={config.disabled || component.disabled}
       />
     );
   }
diff --git a/frontend/lib/registry/components/v2-divider-line/DividerLineComponent.tsx b/frontend/lib/registry/components/v2-divider-line/DividerLineComponent.tsx
index ea4428ca..a94e0daf 100644
--- a/frontend/lib/registry/components/v2-divider-line/DividerLineComponent.tsx
+++ b/frontend/lib/registry/components/v2-divider-line/DividerLineComponent.tsx
@@ -3,6 +3,7 @@
 import React from "react";
 import { ComponentRendererProps } from "@/types/component";
 import { DividerLineConfig } from "./types";
+import { getAdaptiveLabelColor } from "@/lib/utils/darkModeColor";
 
 export interface DividerLineComponentProps extends ComponentRendererProps {
   config?: DividerLineConfig;
@@ -119,7 +120,7 @@ export const DividerLineComponent: React.FC<DividerLineComponentProps> = ({
             top: "-25px",
             left: "0px",
             fontSize: component.style?.labelFontSize || "14px",
-            color: component.style?.labelColor || "#64748b",
+            color: getAdaptiveLabelColor(component.style?.labelColor),
             fontWeight: "500",
           }}
         >
diff --git a/frontend/lib/registry/components/v2-file-upload/FileManagerModal.tsx b/frontend/lib/registry/components/v2-file-upload/FileManagerModal.tsx
index 58554c9d..dc3e95e4 100644
--- a/frontend/lib/registry/components/v2-file-upload/FileManagerModal.tsx
+++ b/frontend/lib/registry/components/v2-file-upload/FileManagerModal.tsx
@@ -69,21 +69,21 @@ export const FileManagerModal: React.FC<FileManagerModalProps> = ({
     const ext = fileExt.toLowerCase();
 
     if (["jpg", "jpeg", "png", "gif", "webp", "svg"].includes(ext)) {
-      return <ImageIcon className="h-5 w-5 text-blue-500" />;
+      return <ImageIcon className="h-5 w-5 text-primary" />;
     } else if (["pdf", "doc", "docx", "txt", "rtf"].includes(ext)) {
-      return <FileText className="h-5 w-5 text-red-500" />;
+      return <FileText className="h-5 w-5 text-destructive" />;
     } else if (["xls", "xlsx", "csv"].includes(ext)) {
-      return <FileText className="h-5 w-5 text-green-500" />;
+      return <FileText className="h-5 w-5 text-emerald-500" />;
     } else if (["ppt", "pptx"].includes(ext)) {
-      return <Presentation className="h-5 w-5 text-orange-500" />;
+      return <Presentation className="h-5 w-5 text-amber-500" />;
     } else if (["mp4", "avi", "mov", "webm"].includes(ext)) {
       return <Video className="h-5 w-5 text-purple-500" />;
     } else if (["mp3", "wav", "ogg"].includes(ext)) {
       return <Music className="h-5 w-5 text-pink-500" />;
     } else if (["zip", "rar", "7z"].includes(ext)) {
-      return <Archive className="h-5 w-5 text-yellow-500" />;
+      return <Archive className="h-5 w-5 text-amber-500" />;
     } else {
-      return <File className="h-5 w-5 text-gray-500" />;
+      return <File className="h-5 w-5 text-muted-foreground" />;
     }
   };
 
@@ -241,7 +241,7 @@ export const FileManagerModal: React.FC<FileManagerModalProps> = ({
         <DialogContent className="max-h-[90vh] w-[1400px] max-w-[95vw] overflow-hidden [&>button]:hidden">
           <DialogHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
             <DialogTitle className="text-lg font-semibold">파일 관리 ({uploadedFiles.length}개)</DialogTitle>
-            <Button variant="ghost" size="sm" className="h-8 w-8 p-0 hover:bg-gray-100" onClick={onClose} title="닫기">
+            <Button variant="ghost" size="sm" className="h-8 w-8 p-0 hover:bg-muted" onClick={onClose} title="닫기">
               <X className="h-4 w-4" />
             </Button>
           </DialogHeader>
@@ -250,7 +250,7 @@ export const FileManagerModal: React.FC<FileManagerModalProps> = ({
             {/* 파일 업로드 영역 - readonly/disabled이면 숨김 */}
             {!isDesignMode && !config.readonly && !config.disabled && (
               <div
-                className={`cursor-pointer rounded-lg border-2 border-dashed p-4 text-center transition-colors ${dragOver ? "border-blue-400 bg-blue-50" : "border-gray-300"} hover:border-gray-400 ${uploading ? "opacity-75" : ""} `}
+                className={`cursor-pointer rounded-lg border-2 border-dashed p-4 text-center transition-colors ${dragOver ? "border-primary/60 bg-primary/10" : "border-input"} hover:border-input ${uploading ? "opacity-75" : ""} `}
                 onClick={() => {
                   fileInputRef.current?.click();
                 }}
@@ -269,13 +269,13 @@ export const FileManagerModal: React.FC<FileManagerModalProps> = ({
 
                 {uploading ? (
                   <div className="flex items-center justify-center gap-2">
-                    <div className="h-5 w-5 animate-spin rounded-full border-b-2 border-blue-600"></div>
-                    <span className="text-sm font-medium text-blue-600">업로드 중...</span>
+                    <div className="h-5 w-5 animate-spin rounded-full border-b-2 border-primary"></div>
+                    <span className="text-sm font-medium text-primary">업로드 중...</span>
                   </div>
                 ) : (
                   <div className="flex items-center justify-center gap-3">
-                    <Upload className="h-6 w-6 text-gray-400" />
-                    <p className="text-sm font-medium text-gray-700">파일을 드래그하거나 클릭하여 업로드하세요</p>
+                    <Upload className="h-6 w-6 text-muted-foreground/70" />
+                    <p className="text-sm font-medium text-foreground">파일을 드래그하거나 클릭하여 업로드하세요</p>
                   </div>
                 )}
               </div>
@@ -284,7 +284,7 @@ export const FileManagerModal: React.FC<FileManagerModalProps> = ({
             {/* 좌우 분할 레이아웃 - 좌측 넓게, 우측 고정 너비 */}
             <div className="flex min-h-0 flex-1 gap-4">
               {/* 좌측: 이미지 미리보기 (확대/축소 가능) - showPreview가 false면 숨김 */}
-              {(config.showPreview !== false) && <div className="relative flex flex-1 flex-col overflow-hidden rounded-lg border border-gray-200 bg-gray-900">
+              {(config.showPreview !== false) && <div className="relative flex flex-1 flex-col overflow-hidden rounded-lg border border-border bg-foreground">
                 {/* 확대/축소 컨트롤 */}
                 {selectedFile && previewImageUrl && (
                   <div className="absolute top-3 left-3 z-10 flex items-center gap-1 rounded-lg bg-black/60 p-1">
@@ -348,12 +348,12 @@ export const FileManagerModal: React.FC<FileManagerModalProps> = ({
                       draggable={false}
                     />
                   ) : selectedFile ? (
-                    <div className="flex flex-col items-center text-gray-400">
+                    <div className="flex flex-col items-center text-muted-foreground/70">
                       {getFileIcon(selectedFile.fileExt)}
                       <p className="mt-2 text-sm">미리보기 불가능</p>
                     </div>
                   ) : (
-                    <div className="flex flex-col items-center text-gray-400">
+                    <div className="flex flex-col items-center text-muted-foreground/70">
                       <ImageIcon className="mb-2 h-16 w-16" />
                       <p className="text-sm">파일을 선택하면 미리보기가 표시됩니다</p>
                     </div>
@@ -369,10 +369,10 @@ export const FileManagerModal: React.FC<FileManagerModalProps> = ({
               </div>}
 
               {/* 우측: 파일 목록 - showFileList가 false면 숨김, showPreview가 false면 전체 너비 */}
-              {(config.showFileList !== false) && <div className={`flex shrink-0 flex-col overflow-hidden rounded-lg border border-gray-200 ${config.showPreview !== false ? "w-[400px]" : "flex-1"}`}>
-                <div className="border-b border-gray-200 bg-gray-50 p-3">
+              {(config.showFileList !== false) && <div className={`flex shrink-0 flex-col overflow-hidden rounded-lg border border-border ${config.showPreview !== false ? "w-[400px]" : "flex-1"}`}>
+                <div className="border-b border-border bg-muted p-3">
                   <div className="flex items-center justify-between">
-                    <h3 className="text-sm font-medium text-gray-700">업로드된 파일</h3>
+                    <h3 className="text-sm font-medium text-foreground">업로드된 파일</h3>
                     {uploadedFiles.length > 0 && (
                       <Badge variant="secondary" className="text-xs">
                         총 {formatFileSize(uploadedFiles.reduce((sum, file) => sum + file.fileSize, 0))}
@@ -387,20 +387,20 @@ export const FileManagerModal: React.FC<FileManagerModalProps> = ({
                       {uploadedFiles.map((file) => (
                         <div
                           key={file.objid}
-                          className={`flex cursor-pointer items-center space-x-3 rounded-lg p-2 transition-colors ${selectedFile?.objid === file.objid ? "border border-blue-200 bg-blue-50" : "bg-gray-50 hover:bg-gray-100"} `}
+                          className={`flex cursor-pointer items-center space-x-3 rounded-lg p-2 transition-colors ${selectedFile?.objid === file.objid ? "border border-primary/20 bg-primary/10" : "bg-muted hover:bg-muted"} `}
                           onClick={() => handleFileClick(file)}
                         >
                           <div className="flex-shrink-0">{getFileIcon(file.fileExt)}</div>
                           <div className="min-w-0 flex-1">
                             <div className="flex items-center gap-2">
-                              <span className="truncate text-sm font-medium text-gray-900">{file.realFileName}</span>
+                              <span className="truncate text-sm font-medium text-foreground">{file.realFileName}</span>
                               {file.isRepresentative && (
                                 <Badge variant="default" className="h-5 px-1.5 text-xs">
                                   대표
                                 </Badge>
                               )}
                             </div>
-                            <p className="text-xs text-gray-500">
+                            <p className="text-xs text-muted-foreground">
                               {config.showFileSize !== false && <>{formatFileSize(file.fileSize)} • </>}{file.fileExt.toUpperCase()}
                             </p>
                           </div>
@@ -449,7 +449,7 @@ export const FileManagerModal: React.FC<FileManagerModalProps> = ({
                               <Button
                                 variant="ghost"
                                 size="sm"
-                                className="h-7 w-7 p-0 text-red-500 hover:text-red-700"
+                                className="h-7 w-7 p-0 text-destructive hover:text-destructive"
                                 onClick={(e) => {
                                   e.stopPropagation();
                                   onFileDelete(file);
@@ -464,10 +464,10 @@ export const FileManagerModal: React.FC<FileManagerModalProps> = ({
                       ))}
                     </div>
                   ) : (
-                    <div className="flex flex-col items-center justify-center py-8 text-gray-500">
-                      <File className="mb-3 h-12 w-12 text-gray-300" />
-                      <p className="text-sm font-medium text-gray-600">업로드된 파일이 없습니다</p>
-                      <p className="mt-1 text-xs text-gray-500">
+                    <div className="flex flex-col items-center justify-center py-8 text-muted-foreground">
+                      <File className="mb-3 h-12 w-12 text-muted-foreground/50" />
+                      <p className="text-sm font-medium text-muted-foreground">업로드된 파일이 없습니다</p>
+                      <p className="mt-1 text-xs text-muted-foreground">
                         {isDesignMode
                           ? "디자인 모드에서는 파일을 업로드할 수 없습니다"
                           : "위의 영역에 파일을 업로드하세요"}
diff --git a/frontend/lib/registry/components/v2-file-upload/FileUploadComponent.tsx b/frontend/lib/registry/components/v2-file-upload/FileUploadComponent.tsx
index de55bf2a..0ba94b5d 100644
--- a/frontend/lib/registry/components/v2-file-upload/FileUploadComponent.tsx
+++ b/frontend/lib/registry/components/v2-file-upload/FileUploadComponent.tsx
@@ -34,31 +34,31 @@ const getFileIcon = (extension: string) => {
   const ext = extension.toLowerCase().replace(".", "");
 
   if (["jpg", "jpeg", "png", "gif", "bmp", "webp", "svg"].includes(ext)) {
-    return <FileImage className="h-6 w-6 text-blue-500" />;
+    return <FileImage className="h-6 w-6 text-primary" />;
   }
   if (["mp4", "avi", "mov", "wmv", "flv", "webm"].includes(ext)) {
     return <FileVideo className="h-6 w-6 text-purple-500" />;
   }
   if (["mp3", "wav", "flac", "aac", "ogg"].includes(ext)) {
-    return <FileAudio className="h-6 w-6 text-green-500" />;
+    return <FileAudio className="h-6 w-6 text-emerald-500" />;
   }
   if (["pdf"].includes(ext)) {
-    return <FileText className="h-6 w-6 text-red-500" />;
+    return <FileText className="h-6 w-6 text-destructive" />;
   }
   if (["doc", "docx", "hwp", "hwpx", "pages"].includes(ext)) {
-    return <FileText className="h-6 w-6 text-blue-600" />;
+    return <FileText className="h-6 w-6 text-primary" />;
   }
   if (["xls", "xlsx", "hcell", "numbers"].includes(ext)) {
-    return <FileText className="h-6 w-6 text-green-600" />;
+    return <FileText className="h-6 w-6 text-emerald-600" />;
   }
   if (["ppt", "pptx", "hanshow", "keynote"].includes(ext)) {
-    return <Presentation className="h-6 w-6 text-orange-500" />;
+    return <Presentation className="h-6 w-6 text-amber-500" />;
   }
   if (["zip", "rar", "7z", "tar", "gz"].includes(ext)) {
-    return <Archive className="h-6 w-6 text-gray-500" />;
+    return <Archive className="h-6 w-6 text-muted-foreground" />;
   }
 
-  return <File className="h-6 w-6 text-gray-400" />;
+  return <File className="h-6 w-6 text-muted-foreground/70" />;
 };
 
 export interface FileUploadComponentProps {
diff --git a/frontend/lib/registry/components/v2-file-upload/FileViewerModal.tsx b/frontend/lib/registry/components/v2-file-upload/FileViewerModal.tsx
index 36e37044..0695b730 100644
--- a/frontend/lib/registry/components/v2-file-upload/FileViewerModal.tsx
+++ b/frontend/lib/registry/components/v2-file-upload/FileViewerModal.tsx
@@ -318,7 +318,7 @@ export const FileViewerModal: React.FC<FileViewerModalProps> = ({ file, isOpen,
     if (isLoading) {
       return (
         <div className="flex h-96 items-center justify-center">
-          <div className="h-12 w-12 animate-spin rounded-full border-b-2 border-blue-600"></div>
+          <div className="h-12 w-12 animate-spin rounded-full border-b-2 border-primary"></div>
         </div>
       );
     }
@@ -326,7 +326,7 @@ export const FileViewerModal: React.FC<FileViewerModalProps> = ({ file, isOpen,
     if (previewError) {
       return (
         <div className="flex h-96 flex-col items-center justify-center">
-          <AlertTriangle className="mb-4 h-16 w-16 text-yellow-500" />
+          <AlertTriangle className="mb-4 h-16 w-16 text-amber-500" />
           <p className="mb-2 text-lg font-medium">미리보기 불가</p>
           <p className="text-center text-sm">{previewError}</p>
           <Button variant="outline" onClick={() => onDownload?.(file)} className="mt-4">
@@ -375,7 +375,7 @@ export const FileViewerModal: React.FC<FileViewerModalProps> = ({ file, isOpen,
     // PDF 파일 - 브라우저 기본 뷰어 사용
     if (fileExt === "pdf") {
       return (
-        <div className="h-[600px] overflow-auto rounded-lg border bg-gray-50">
+        <div className="h-[600px] overflow-auto rounded-lg border bg-muted">
           <object
             data={previewUrl || ""}
             type="application/pdf"
@@ -384,9 +384,9 @@ export const FileViewerModal: React.FC<FileViewerModalProps> = ({ file, isOpen,
           >
             <iframe src={previewUrl || ""} className="h-full w-full rounded-lg" title="PDF Viewer Fallback">
               <div className="flex h-full flex-col items-center justify-center p-8">
-                <FileText className="mb-4 h-16 w-16 text-gray-400" />
+                <FileText className="mb-4 h-16 w-16 text-muted-foreground/70" />
                 <p className="mb-2 text-lg font-medium">PDF를 표시할 수 없습니다</p>
-                <p className="mb-4 text-center text-sm text-gray-600">
+                <p className="mb-4 text-center text-sm text-muted-foreground">
                   브라우저가 PDF 표시를 지원하지 않습니다. 다운로드하여 확인해주세요.
                 </p>
                 <Button variant="outline" onClick={() => onDownload?.(file)}>
@@ -421,10 +421,10 @@ export const FileViewerModal: React.FC<FileViewerModalProps> = ({ file, isOpen,
     ) {
       // Office 문서 안내 메시지 표시
       return (
-        <div className="relative flex h-96 flex-col items-center justify-center overflow-auto rounded-lg border bg-gradient-to-br from-blue-50 to-indigo-50 p-8">
-          <FileText className="mb-6 h-20 w-20 text-blue-500" />
-          <h3 className="mb-2 text-xl font-semibold text-gray-800">Office 문서</h3>
-          <p className="mb-6 max-w-md text-center text-sm text-gray-600">
+        <div className="relative flex h-96 flex-col items-center justify-center overflow-auto rounded-lg border bg-gradient-to-br from-primary/5 to-indigo-50 p-8">
+          <FileText className="mb-6 h-20 w-20 text-primary" />
+          <h3 className="mb-2 text-xl font-semibold text-foreground">Office 문서</h3>
+          <p className="mb-6 max-w-md text-center text-sm text-muted-foreground">
             {fileExt === "docx" || fileExt === "doc"
               ? "Word 문서"
               : fileExt === "xlsx" || fileExt === "xls"
@@ -461,8 +461,8 @@ export const FileViewerModal: React.FC<FileViewerModalProps> = ({ file, isOpen,
     if (["mp3", "wav", "ogg"].includes(fileExt)) {
       return (
         <div className="flex h-96 flex-col items-center justify-center">
-          <div className="mb-6 flex h-32 w-32 items-center justify-center rounded-full bg-gray-100">
-            <svg className="h-16 w-16 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
+          <div className="mb-6 flex h-32 w-32 items-center justify-center rounded-full bg-muted">
+            <svg className="h-16 w-16 text-muted-foreground/70" fill="currentColor" viewBox="0 0 20 20">
               <path
                 fillRule="evenodd"
                 d="M9.383 3.076A1 1 0 0110 4v12a1 1 0 01-1.707.707L4.586 13H2a1 1 0 01-1-1V8a1 1 0 011-1h2.586l3.707-3.707a1 1 0 011.09-.217zM15.657 6.343a1 1 0 011.414 0A9.972 9.972 0 0119 12a9.972 9.972 0 01-1.929 5.657 1 1 0 11-1.414-1.414A7.971 7.971 0 0017 12c0-1.594-.471-3.078-1.343-4.343a1 1 0 010-1.414zm-2.829 2.828a1 1 0 011.415 0A5.983 5.983 0 0115 12a5.984 5.984 0 01-.757 2.829 1 1 0 01-1.415-1.414A3.987 3.987 0 0013 12a3.988 3.988 0 00-.172-1.171 1 1 0 010-1.414z"
@@ -480,7 +480,7 @@ export const FileViewerModal: React.FC<FileViewerModalProps> = ({ file, isOpen,
     // 기타 파일 타입
     return (
       <div className="flex h-96 flex-col items-center justify-center">
-        <FileText className="mb-4 h-16 w-16 text-gray-400" />
+        <FileText className="mb-4 h-16 w-16 text-muted-foreground/70" />
         <p className="mb-2 text-lg font-medium">미리보기 불가</p>
         <p className="mb-4 text-center text-sm">{file.fileExt.toUpperCase()} 파일은 미리보기를 지원하지 않습니다.</p>
         <Button variant="outline" onClick={() => onDownload?.(file)}>
@@ -511,7 +511,7 @@ export const FileViewerModal: React.FC<FileViewerModalProps> = ({ file, isOpen,
         <div className="flex-1 overflow-hidden">{renderPreview()}</div>
 
         {/* 파일 정보 및 액션 버튼 */}
-        <div className="mt-2 flex items-center space-x-4 text-sm text-gray-500">
+        <div className="mt-2 flex items-center space-x-4 text-sm text-muted-foreground">
           <span>크기: {formatFileSize(file.fileSize || file.size || 0)}</span>
           {(file.uploadedAt || file.regdate) && (
             <span>업로드: {new Date(file.uploadedAt || file.regdate || "").toLocaleString()}</span>
@@ -527,7 +527,7 @@ export const FileViewerModal: React.FC<FileViewerModalProps> = ({ file, isOpen,
             <Button
               variant="outline"
               size="sm"
-              className="text-red-600 hover:bg-red-50 hover:text-red-700"
+              className="text-destructive hover:bg-destructive/10 hover:text-destructive"
               onClick={() => onDelete(file)}
             >
               <Trash2 className="mr-2 h-4 w-4" />
diff --git a/frontend/lib/registry/components/v2-input/V2InputRenderer.tsx b/frontend/lib/registry/components/v2-input/V2InputRenderer.tsx
index eba973e4..90c4f801 100644
--- a/frontend/lib/registry/components/v2-input/V2InputRenderer.tsx
+++ b/frontend/lib/registry/components/v2-input/V2InputRenderer.tsx
@@ -4,6 +4,7 @@ import React from "react";
 import { AutoRegisteringComponentRenderer } from "../../AutoRegisteringComponentRenderer";
 import { V2InputDefinition } from "./index";
 import { V2Input } from "@/components/v2/V2Input";
+import { isColumnRequiredByMeta } from "../../DynamicComponentRenderer";
 
 /**
  * V2Input 렌더러
@@ -52,10 +53,6 @@ export class V2InputRenderer extends AutoRegisteringComponentRenderer {
     return (
       <V2Input
         id={component.id}
-        label={effectiveLabel}
-        required={component.required}
-        readonly={config.readonly || component.readonly}
-        disabled={config.disabled || component.disabled}
         value={currentValue}
         onChange={handleChange}
         onFormDataChange={onFormDataChange}
@@ -78,6 +75,10 @@ export class V2InputRenderer extends AutoRegisteringComponentRenderer {
         autoGeneration={config.autoGeneration || component.autoGeneration}
         originalData={(this.props as any).originalData}
         {...restProps}
+        label={effectiveLabel}
+        required={component.required || isColumnRequiredByMeta(tableName, columnName)}
+        readonly={config.readonly || component.readonly}
+        disabled={config.disabled || component.disabled}
       />
     );
   }
diff --git a/frontend/lib/registry/components/v2-location-swap-selector/LocationSwapSelectorConfigPanel.tsx b/frontend/lib/registry/components/v2-location-swap-selector/LocationSwapSelectorConfigPanel.tsx
index cd84806f..89aea32f 100644
--- a/frontend/lib/registry/components/v2-location-swap-selector/LocationSwapSelectorConfigPanel.tsx
+++ b/frontend/lib/registry/components/v2-location-swap-selector/LocationSwapSelectorConfigPanel.tsx
@@ -523,8 +523,8 @@ export function LocationSwapSelectorConfigPanel({
       </div>
 
       {/* 안내 */}
-      <div className="rounded-md bg-blue-50 p-3 dark:bg-blue-950">
-        <p className="text-xs text-blue-900 dark:text-blue-100">
+      <div className="rounded-md bg-primary/10 p-3 dark:bg-primary/15">
+        <p className="text-xs text-primary dark:text-primary/60">
           <strong>사용 방법:</strong>
           <br />
           1. 데이터 소스에서 장소 목록을 가져올 위치를 선택합니다
diff --git a/frontend/lib/registry/components/v2-pivot-grid/PivotGridComponent.tsx b/frontend/lib/registry/components/v2-pivot-grid/PivotGridComponent.tsx
index b55907a4..da81f575 100644
--- a/frontend/lib/registry/components/v2-pivot-grid/PivotGridComponent.tsx
+++ b/frontend/lib/registry/components/v2-pivot-grid/PivotGridComponent.tsx
@@ -1549,8 +1549,8 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
 
       {/* 필터 바 - 필터 영역에 필드가 있을 때만 표시 */}
       {filterFields.length > 0 && (
-        <div className="flex items-center gap-2 px-3 py-1.5 border-b border-border bg-orange-50/50 dark:bg-orange-950/10">
-          <Filter className="h-3.5 w-3.5 text-orange-600 dark:text-orange-400" />
+        <div className="flex items-center gap-2 px-3 py-1.5 border-b border-border bg-amber-50/50 dark:bg-orange-950/10">
+          <Filter className="h-3.5 w-3.5 text-amber-600 dark:text-orange-400" />
           <span className="text-xs font-medium text-orange-700 dark:text-orange-300">필터:</span>
           <div className="flex items-center gap-2 flex-wrap">
             {filterFields.map((filterField) => {
@@ -1576,13 +1576,13 @@ export const PivotGridComponent: React.FC<PivotGridProps> = ({
                         "flex items-center gap-1.5 px-2 py-1 rounded text-xs",
                         "border transition-colors",
                         isFiltered
-                          ? "bg-orange-100 border-orange-300 text-orange-800 dark:bg-orange-900/30 dark:border-orange-700 dark:text-orange-200"
+                          ? "bg-amber-100 border-orange-300 text-orange-800 dark:bg-orange-900/30 dark:border-orange-700 dark:text-orange-200"
                           : "bg-background border-border hover:bg-accent"
                       )}
                     >
                       <span>{filterField.caption}</span>
                       {isFiltered && (
-                        <span className="bg-orange-500 text-white px-1 rounded text-[10px]">
+                        <span className="bg-amber-500 text-white px-1 rounded text-[10px]">
                           {selectedValues.length}
                         </span>
                       )}
diff --git a/frontend/lib/registry/components/v2-pivot-grid/PivotGridConfigPanel.tsx b/frontend/lib/registry/components/v2-pivot-grid/PivotGridConfigPanel.tsx
index 37f0862b..fd04b11c 100644
--- a/frontend/lib/registry/components/v2-pivot-grid/PivotGridConfigPanel.tsx
+++ b/frontend/lib/registry/components/v2-pivot-grid/PivotGridConfigPanel.tsx
@@ -89,10 +89,10 @@ interface ColumnChipProps {
 const ColumnChip: React.FC<ColumnChipProps> = ({ column, isUsed, onClick }) => {
   const dataType = mapDbTypeToFieldType(column.data_type);
   const typeColor = {
-    number: "bg-blue-100 text-blue-700 border-blue-200",
-    string: "bg-green-100 text-green-700 border-green-200",
+    number: "bg-primary/10 text-primary border-primary/20",
+    string: "bg-emerald-100 text-emerald-700 border-emerald-200",
     date: "bg-purple-100 text-purple-700 border-purple-200",
-    boolean: "bg-orange-100 text-orange-700 border-orange-200",
+    boolean: "bg-amber-100 text-orange-700 border-orange-200",
   }[dataType];
 
   return (
@@ -376,12 +376,12 @@ export const PivotGridConfigPanel: React.FC<PivotGridConfigPanelProps> = ({
   return (
     <div className="space-y-4">
       {/* 사용 가이드 */}
-      <div className="bg-blue-50 border border-blue-200 rounded-lg p-3">
+      <div className="bg-primary/10 border border-primary/20 rounded-lg p-3">
         <div className="flex items-start gap-2">
-          <Info className="h-4 w-4 text-blue-600 mt-0.5" />
-          <div className="text-xs text-blue-800">
+          <Info className="h-4 w-4 text-primary mt-0.5" />
+          <div className="text-xs text-primary">
             <p className="font-medium mb-1">피벗 테이블 설정 방법</p>
-            <ol className="list-decimal list-inside space-y-0.5 text-blue-700">
+            <ol className="list-decimal list-inside space-y-0.5 text-primary">
               <li>데이터를 가져올 <strong>테이블</strong>을 선택하세요</li>
               <li><strong>행 그룹</strong>에 그룹화할 컬럼을 추가하세요 (예: 지역, 부서)</li>
               <li><strong>열 그룹</strong>에 가로로 펼칠 컬럼을 추가하세요 (예: 월, 분기)</li>
@@ -478,13 +478,13 @@ export const PivotGridConfigPanel: React.FC<PivotGridConfigPanelProps> = ({
               area="column"
               label="열 그룹"
               description="가로로 펼칠 항목 (예: 월, 분기, 연도)"
-              icon={<Columns className="h-4 w-4 text-blue-600" />}
+              icon={<Columns className="h-4 w-4 text-primary" />}
               fields={getFieldsByArea("column")}
               columns={columns}
               onAddField={(col) => handleAddField("column", col)}
               onRemoveField={(idx) => handleRemoveField("column", idx)}
               onUpdateField={(idx, updates) => handleUpdateField("column", idx, updates)}
-              color="border-blue-200 bg-blue-50/50"
+              color="border-primary/20 bg-primary/10/50"
             />
 
             <AreaDropZone
diff --git a/frontend/lib/registry/components/v2-pivot-grid/components/FieldPanel.tsx b/frontend/lib/registry/components/v2-pivot-grid/components/FieldPanel.tsx
index fed43afb..7cc4e085 100644
--- a/frontend/lib/registry/components/v2-pivot-grid/components/FieldPanel.tsx
+++ b/frontend/lib/registry/components/v2-pivot-grid/components/FieldPanel.tsx
@@ -82,17 +82,17 @@ const AREA_CONFIG: Record<
   filter: {
     title: "필터",
     icon: <Filter className="h-3.5 w-3.5" />,
-    color: "bg-orange-50 border-orange-200 dark:bg-orange-950/20 dark:border-orange-800",
+    color: "bg-amber-50 border-orange-200 dark:bg-orange-950/20 dark:border-orange-800",
   },
   column: {
     title: "열",
     icon: <Columns className="h-3.5 w-3.5" />,
-    color: "bg-blue-50 border-blue-200 dark:bg-blue-950/20 dark:border-blue-800",
+    color: "bg-primary/10 border-primary/20 dark:bg-primary/10 dark:border-primary/30",
   },
   row: {
     title: "행",
     icon: <Rows className="h-3.5 w-3.5" />,
-    color: "bg-green-50 border-green-200 dark:bg-green-950/20 dark:border-green-800",
+    color: "bg-emerald-50 border-emerald-200 dark:bg-emerald-950/20 dark:border-emerald-800",
   },
   data: {
     title: "데이터",
diff --git a/frontend/lib/registry/components/v2-pivot-grid/utils/aggregation.ts b/frontend/lib/registry/components/v2-pivot-grid/utils/aggregation.ts
index 39aa1c5f..063efe89 100644
--- a/frontend/lib/registry/components/v2-pivot-grid/utils/aggregation.ts
+++ b/frontend/lib/registry/components/v2-pivot-grid/utils/aggregation.ts
@@ -3,6 +3,8 @@
  * 다양한 집계 연산을 수행합니다.
  */
 
+import { getFormatRules } from "@/lib/formatting";
+
 import { AggregationType, PivotFieldFormat } from "../types";
 
 // ==================== 집계 함수 ====================
@@ -102,16 +104,18 @@ export function formatNumber(
 
   let formatted: string;
 
+  const locale = getFormatRules().number.locale;
+
   switch (type) {
     case "currency":
-      formatted = value.toLocaleString("ko-KR", {
+      formatted = value.toLocaleString(locale, {
         minimumFractionDigits: precision,
         maximumFractionDigits: precision,
       });
       break;
 
     case "percent":
-      formatted = (value * 100).toLocaleString("ko-KR", {
+      formatted = (value * 100).toLocaleString(locale, {
         minimumFractionDigits: precision,
         maximumFractionDigits: precision,
       });
@@ -120,7 +124,7 @@ export function formatNumber(
     case "number":
     default:
       if (thousandSeparator) {
-        formatted = value.toLocaleString("ko-KR", {
+        formatted = value.toLocaleString(locale, {
           minimumFractionDigits: precision,
           maximumFractionDigits: precision,
         });
@@ -138,7 +142,7 @@ export function formatNumber(
  */
 export function formatDate(
   value: Date | string | null | undefined,
-  format: string = "YYYY-MM-DD"
+  format: string = getFormatRules().date.display
 ): string {
   if (!value) return "-";
 
diff --git a/frontend/lib/registry/components/v2-pivot-grid/utils/pivotEngine.ts b/frontend/lib/registry/components/v2-pivot-grid/utils/pivotEngine.ts
index 4d3fecfd..5241ae75 100644
--- a/frontend/lib/registry/components/v2-pivot-grid/utils/pivotEngine.ts
+++ b/frontend/lib/registry/components/v2-pivot-grid/utils/pivotEngine.ts
@@ -47,7 +47,7 @@ function getFieldValue(
         const weekNum = getWeekNumber(date);
         return `${date.getFullYear()}-W${String(weekNum).padStart(2, "0")}`;
       case "day":
-        return formatDate(date, "YYYY-MM-DD");
+        return formatDate(date);
       default:
         return String(rawValue);
     }
diff --git a/frontend/lib/registry/components/v2-rack-structure/RackStructureComponent.tsx b/frontend/lib/registry/components/v2-rack-structure/RackStructureComponent.tsx
index d670c25c..cd107958 100644
--- a/frontend/lib/registry/components/v2-rack-structure/RackStructureComponent.tsx
+++ b/frontend/lib/registry/components/v2-rack-structure/RackStructureComponent.tsx
@@ -20,6 +20,7 @@ import {
   GeneratedLocation,
   RackStructureContext,
 } from "./types";
+import { applyLocationPattern, DEFAULT_CODE_PATTERN, DEFAULT_NAME_PATTERN } from "./patternUtils";
 
 // 기존 위치 데이터 타입
 interface ExistingLocation {
@@ -95,12 +96,12 @@ const ConditionCard: React.FC<ConditionCardProps> = ({
   };
 
   return (
-    <div className="relative rounded-lg border border-gray-200 bg-white shadow-sm">
+    <div className="relative rounded-lg border border-border bg-white shadow-sm">
       {/* 헤더 */}
-      <div className="flex items-center justify-between rounded-t-lg bg-blue-600 px-4 py-2 text-white">
+      <div className="flex items-center justify-between rounded-t-lg bg-primary px-4 py-2 text-white">
         <span className="font-medium">조건 {index + 1}</span>
         {!readonly && (
-          <button onClick={() => onRemove(condition.id)} className="rounded p-1 transition-colors hover:bg-blue-700">
+          <button onClick={() => onRemove(condition.id)} className="rounded p-1 transition-colors hover:bg-primary/90">
             <X className="h-4 w-4" />
           </button>
         )}
@@ -111,8 +112,8 @@ const ConditionCard: React.FC<ConditionCardProps> = ({
         {/* 열 범위 */}
         <div className="flex items-center gap-2">
           <div className="flex-1">
-            <label className="mb-1 block text-xs font-medium text-gray-700">
-              열 범위 <span className="text-red-500">*</span>
+            <label className="mb-1 block text-xs font-medium text-foreground">
+              열 범위 <span className="text-destructive">*</span>
             </label>
             <div className="flex items-center gap-2">
               <Input
@@ -125,7 +126,7 @@ const ConditionCard: React.FC<ConditionCardProps> = ({
                 disabled={readonly}
                 className="h-9 text-center"
               />
-              <span className="text-gray-500">~</span>
+              <span className="text-muted-foreground">~</span>
               <Input
                 type="number"
                 min={1}
@@ -139,8 +140,8 @@ const ConditionCard: React.FC<ConditionCardProps> = ({
             </div>
           </div>
           <div className="w-20">
-            <label className="mb-1 block text-xs font-medium text-gray-700">
-              단 수 <span className="text-red-500">*</span>
+            <label className="mb-1 block text-xs font-medium text-foreground">
+              단 수 <span className="text-destructive">*</span>
             </label>
             <Input
               type="number"
@@ -156,14 +157,14 @@ const ConditionCard: React.FC<ConditionCardProps> = ({
         </div>
 
         {/* 계산 결과 */}
-        <div className="rounded-md bg-blue-50 px-3 py-2 text-center text-sm text-blue-700">
+        <div className="rounded-md bg-primary/10 px-3 py-2 text-center text-sm text-primary">
           {locationCount > 0 ? (
             <>
               {localValues.startRow}열 ~ {localValues.endRow}열 x {localValues.levels}단 ={" "}
               <strong>{locationCount}개</strong>
             </>
           ) : (
-            <span className="text-gray-500">값을 입력하세요</span>
+            <span className="text-muted-foreground">값을 입력하세요</span>
           )}
         </div>
       </div>
@@ -493,23 +494,27 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
     return { totalLocations, totalRows, maxLevel };
   }, [conditions]);
 
-  // 위치 코드 생성
+  // 위치 코드 생성 (패턴 기반)
   const generateLocationCode = useCallback(
     (row: number, level: number): { code: string; name: string } => {
-      const warehouseCode = context?.warehouseCode || "WH001";
-      const floor = context?.floor || "1";
-      const zone = context?.zone || "A";
+      const vars = {
+        warehouse: context?.warehouseCode || "WH001",
+        warehouseName: context?.warehouseName || "",
+        floor: context?.floor || "1",
+        zone: context?.zone || "A",
+        row,
+        level,
+      };
 
-      // 코드 생성 (예: WH001-1층D구역-01-1)
-      const code = `${warehouseCode}-${floor}${zone}-${row.toString().padStart(2, "0")}-${level}`;
+      const codePattern = config.codePattern || DEFAULT_CODE_PATTERN;
+      const namePattern = config.namePattern || DEFAULT_NAME_PATTERN;
 
-      // 이름 생성 - zone에 이미 "구역"이 포함되어 있으면 그대로 사용
-      const zoneName = zone.includes("구역") ? zone : `${zone}구역`;
-      const name = `${zoneName}-${row.toString().padStart(2, "0")}열-${level}단`;
-
-      return { code, name };
+      return {
+        code: applyLocationPattern(codePattern, vars),
+        name: applyLocationPattern(namePattern, vars),
+      };
     },
-    [context],
+    [context, config.codePattern, config.namePattern],
   );
 
   // 미리보기 생성
@@ -626,7 +631,7 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
       <Card>
         <CardHeader className="flex flex-row items-center justify-between pb-2">
           <CardTitle className="flex items-center gap-2 text-base">
-            <div className="h-4 w-1 rounded bg-gradient-to-b from-green-500 to-blue-500" />렉 라인 구조 설정
+            <div className="h-4 w-1 rounded bg-gradient-to-b from-green-500 to-primary/50" />렉 라인 구조 설정
           </CardTitle>
           {!readonly && (
             <div className="flex items-center gap-2">
@@ -719,9 +724,9 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
 
           {/* 기존 데이터 존재 알림 */}
           {!isCheckingDuplicates && existingLocations.length > 0 && !hasDuplicateWithExisting && (
-            <Alert className="mb-4 border-blue-200 bg-blue-50">
-              <AlertCircle className="h-4 w-4 text-blue-600" />
-              <AlertDescription className="text-blue-800">
+            <Alert className="mb-4 border-primary/20 bg-primary/10">
+              <AlertCircle className="h-4 w-4 text-primary" />
+              <AlertDescription className="text-primary">
                 해당 창고/층/구역에 <strong>{existingLocations.length}개</strong>의 위치가 이미 등록되어 있습니다.
               </AlertDescription>
             </Alert>
@@ -729,47 +734,47 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
 
           {/* 현재 매핑된 값 표시 */}
           {(context.warehouseCode || context.warehouseName || context.floor || context.zone) && (
-            <div className="mb-4 flex flex-wrap gap-2 rounded-lg bg-gray-50 p-3">
+            <div className="mb-4 flex flex-wrap gap-2 rounded-lg bg-muted p-3">
               {(context.warehouseCode || context.warehouseName) && (
-                <span className="rounded bg-blue-100 px-2 py-1 text-xs text-blue-800">
+                <span className="rounded bg-primary/10 px-2 py-1 text-xs text-primary">
                   창고: {context.warehouseName || context.warehouseCode}
                   {context.warehouseName && context.warehouseCode && ` (${context.warehouseCode})`}
                 </span>
               )}
               {context.floor && (
-                <span className="rounded bg-green-100 px-2 py-1 text-xs text-green-800">층: {context.floor}</span>
+                <span className="rounded bg-emerald-100 px-2 py-1 text-xs text-emerald-800">층: {context.floor}</span>
               )}
               {context.zone && (
                 <span className="rounded bg-purple-100 px-2 py-1 text-xs text-purple-800">구역: {context.zone}</span>
               )}
               {context.locationType && (
-                <span className="rounded bg-orange-100 px-2 py-1 text-xs text-orange-800">
+                <span className="rounded bg-amber-100 px-2 py-1 text-xs text-orange-800">
                   유형: {context.locationType}
                 </span>
               )}
               {context.status && (
-                <span className="rounded bg-gray-200 px-2 py-1 text-xs text-gray-800">상태: {context.status}</span>
+                <span className="rounded bg-muted/80 px-2 py-1 text-xs text-foreground">상태: {context.status}</span>
               )}
             </div>
           )}
 
           {/* 안내 메시지 */}
-          <div className="mb-4 rounded-lg bg-blue-50 p-4">
-            <ol className="space-y-1 text-sm text-blue-800">
+          <div className="mb-4 rounded-lg bg-primary/10 p-4">
+            <ol className="space-y-1 text-sm text-primary">
               <li className="flex items-start gap-2">
-                <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded bg-blue-600 text-xs font-bold text-white">
+                <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded bg-primary text-xs font-bold text-white">
                   1
                 </span>
                 조건 추가 버튼을 클릭하여 렉 라인 조건을 생성하세요
               </li>
               <li className="flex items-start gap-2">
-                <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded bg-blue-600 text-xs font-bold text-white">
+                <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded bg-primary text-xs font-bold text-white">
                   2
                 </span>
                 각 조건마다 열 범위와 단 수를 입력하세요
               </li>
               <li className="flex items-start gap-2">
-                <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded bg-blue-600 text-xs font-bold text-white">
+                <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded bg-primary text-xs font-bold text-white">
                   3
                 </span>
                 예시: 조건1(1~3열, 3단), 조건2(4~6열, 5단)
@@ -779,9 +784,9 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
 
           {/* 조건 목록 또는 빈 상태 */}
           {conditions.length === 0 ? (
-            <div className="flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-200 py-12">
-              <div className="mb-4 text-6xl text-gray-300">📦</div>
-              <p className="mb-4 text-gray-500">조건을 추가하여 렉 구조를 설정하세요</p>
+            <div className="flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-border py-12">
+              <div className="mb-4 text-6xl text-muted-foreground/50">📦</div>
+              <p className="mb-4 text-muted-foreground">조건을 추가하여 렉 구조를 설정하세요</p>
               {!readonly && (
                 <Button onClick={addCondition} className="gap-1">
                   <Plus className="h-4 w-4" />첫 번째 조건 추가
@@ -832,15 +837,15 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
             {config.showStatistics && (
               <div className="mb-4 grid grid-cols-3 gap-4">
                 <div className="rounded-lg border bg-white p-4 text-center">
-                  <div className="text-sm text-gray-500">총 위치</div>
+                  <div className="text-sm text-muted-foreground">총 위치</div>
                   <div className="text-2xl font-bold">{statistics.totalLocations}개</div>
                 </div>
                 <div className="rounded-lg border bg-white p-4 text-center">
-                  <div className="text-sm text-gray-500">열 수</div>
+                  <div className="text-sm text-muted-foreground">열 수</div>
                   <div className="text-2xl font-bold">{statistics.totalRows}개</div>
                 </div>
                 <div className="rounded-lg border bg-white p-4 text-center">
-                  <div className="text-sm text-gray-500">최대 단</div>
+                  <div className="text-sm text-muted-foreground">최대 단</div>
                   <div className="text-2xl font-bold">{statistics.maxLevel}단</div>
                 </div>
               </div>
@@ -851,7 +856,7 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
               <div className="rounded-lg border">
                 <ScrollArea className="h-[400px]">
                   <Table>
-                    <TableHeader className="sticky top-0 bg-gray-50">
+                    <TableHeader className="sticky top-0 bg-muted">
                       <TableRow>
                         <TableHead className="w-12 text-center">No</TableHead>
                         <TableHead>위치코드</TableHead>
@@ -883,8 +888,8 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
                 </ScrollArea>
               </div>
             ) : (
-              <div className="flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-200 py-8 text-gray-500">
-                <Eye className="mb-2 h-8 w-8 text-gray-300" />
+              <div className="flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-border py-8 text-muted-foreground">
+                <Eye className="mb-2 h-8 w-8 text-muted-foreground/50" />
                 <p>미리보기 생성 버튼을 클릭하여 결과를 확인하세요</p>
               </div>
             )}
@@ -931,16 +936,16 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
               {/* 템플릿 목록 */}
               {templates.length > 0 ? (
                 <div className="space-y-2">
-                  <div className="text-sm font-medium text-gray-700">저장된 템플릿</div>
+                  <div className="text-sm font-medium text-foreground">저장된 템플릿</div>
                   <ScrollArea className="h-[200px]">
                     {templates.map((template) => (
                       <div
                         key={template.id}
-                        className="flex items-center justify-between rounded-lg border p-3 hover:bg-gray-50"
+                        className="flex items-center justify-between rounded-lg border p-3 hover:bg-muted"
                       >
                         <div>
                           <div className="font-medium">{template.name}</div>
-                          <div className="text-xs text-gray-500">{template.conditions.length}개 조건</div>
+                          <div className="text-xs text-muted-foreground">{template.conditions.length}개 조건</div>
                         </div>
                         <div className="flex gap-2">
                           <Button variant="outline" size="sm" onClick={() => loadTemplate(template)}>
@@ -955,7 +960,7 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
                   </ScrollArea>
                 </div>
               ) : (
-                <div className="py-8 text-center text-gray-500">저장된 템플릿이 없습니다</div>
+                <div className="py-8 text-center text-muted-foreground">저장된 템플릿이 없습니다</div>
               )}
             </div>
           )}
diff --git a/frontend/lib/registry/components/v2-rack-structure/RackStructureConfigPanel.tsx b/frontend/lib/registry/components/v2-rack-structure/RackStructureConfigPanel.tsx
index 8f0c8177..ddaebfa2 100644
--- a/frontend/lib/registry/components/v2-rack-structure/RackStructureConfigPanel.tsx
+++ b/frontend/lib/registry/components/v2-rack-structure/RackStructureConfigPanel.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useMemo } from "react";
 import { Label } from "@/components/ui/label";
 import { Input } from "@/components/ui/input";
 import { Switch } from "@/components/ui/switch";
@@ -12,6 +12,47 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { RackStructureComponentConfig, FieldMapping } from "./types";
+import { applyLocationPattern, DEFAULT_CODE_PATTERN, DEFAULT_NAME_PATTERN, PATTERN_VARIABLES } from "./patternUtils";
+
+// 패턴 미리보기 서브 컴포넌트
+const PatternPreview: React.FC<{
+  codePattern?: string;
+  namePattern?: string;
+}> = ({ codePattern, namePattern }) => {
+  const sampleVars = {
+    warehouse: "WH002",
+    warehouseName: "2창고",
+    floor: "2층",
+    zone: "A구역",
+    row: 1,
+    level: 3,
+  };
+
+  const previewCode = useMemo(
+    () => applyLocationPattern(codePattern || DEFAULT_CODE_PATTERN, sampleVars),
+    [codePattern],
+  );
+  const previewName = useMemo(
+    () => applyLocationPattern(namePattern || DEFAULT_NAME_PATTERN, sampleVars),
+    [namePattern],
+  );
+
+  return (
+    <div className="rounded-md border border-primary/20 bg-primary/5 p-2.5">
+      <div className="mb-1.5 text-[10px] font-medium text-primary">미리보기 (2창고 / 2층 / A구역 / 1열 / 3단)</div>
+      <div className="space-y-1">
+        <div className="flex items-center gap-2 text-xs">
+          <span className="w-14 shrink-0 text-muted-foreground">위치코드:</span>
+          <code className="rounded bg-background px-1.5 py-0.5 font-mono text-foreground">{previewCode}</code>
+        </div>
+        <div className="flex items-center gap-2 text-xs">
+          <span className="w-14 shrink-0 text-muted-foreground">위치명:</span>
+          <code className="rounded bg-background px-1.5 py-0.5 font-mono text-foreground">{previewName}</code>
+        </div>
+      </div>
+    </div>
+  );
+};
 
 interface RackStructureConfigPanelProps {
   config: RackStructureComponentConfig;
@@ -73,8 +114,8 @@ export const RackStructureConfigPanel: React.FC<RackStructureConfigPanelProps> =
     <div className="space-y-4">
       {/* 필드 매핑 섹션 */}
       <div className="space-y-3">
-        <div className="text-sm font-medium text-gray-700">필드 매핑</div>
-        <p className="text-xs text-gray-500">
+        <div className="text-sm font-medium text-foreground">필드 매핑</div>
+        <p className="text-xs text-muted-foreground">
           상위 폼에 배치된 필드 중 어떤 필드를 사용할지 선택하세요
         </p>
 
@@ -205,9 +246,64 @@ export const RackStructureConfigPanel: React.FC<RackStructureConfigPanelProps> =
         </div>
       </div>
 
+      {/* 위치코드 패턴 설정 */}
+      <div className="space-y-3 border-t pt-3">
+        <div className="text-sm font-medium text-foreground">위치코드/위치명 패턴</div>
+        <p className="text-xs text-muted-foreground">
+          변수를 조합하여 위치코드와 위치명 생성 규칙을 설정하세요
+        </p>
+
+        {/* 위치코드 패턴 */}
+        <div>
+          <Label className="text-xs">위치코드 패턴</Label>
+          <Input
+            value={config.codePattern || ""}
+            onChange={(e) => handleChange("codePattern", e.target.value || undefined)}
+            placeholder="{warehouse}-{floor}{zone}-{row:02}-{level}"
+            className="h-8 font-mono text-xs"
+          />
+          <p className="mt-1 text-[10px] text-muted-foreground">
+            비워두면 기본값: {"{warehouse}-{floor}{zone}-{row:02}-{level}"}
+          </p>
+        </div>
+
+        {/* 위치명 패턴 */}
+        <div>
+          <Label className="text-xs">위치명 패턴</Label>
+          <Input
+            value={config.namePattern || ""}
+            onChange={(e) => handleChange("namePattern", e.target.value || undefined)}
+            placeholder="{zone}-{row:02}열-{level}단"
+            className="h-8 font-mono text-xs"
+          />
+          <p className="mt-1 text-[10px] text-muted-foreground">
+            비워두면 기본값: {"{zone}-{row:02}열-{level}단"}
+          </p>
+        </div>
+
+        {/* 실시간 미리보기 */}
+        <PatternPreview
+          codePattern={config.codePattern}
+          namePattern={config.namePattern}
+        />
+
+        {/* 사용 가능한 변수 목록 */}
+        <div className="rounded-md border bg-muted/50 p-2">
+          <div className="mb-1 text-[10px] font-medium text-foreground">사용 가능한 변수</div>
+          <div className="grid grid-cols-2 gap-x-3 gap-y-0.5">
+            {PATTERN_VARIABLES.map((v) => (
+              <div key={v.token} className="flex items-center gap-1 text-[10px]">
+                <code className="rounded bg-primary/10 px-1 font-mono text-primary">{v.token}</code>
+                <span className="text-muted-foreground">{v.description}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
       {/* 제한 설정 */}
       <div className="space-y-3 border-t pt-3">
-        <div className="text-sm font-medium text-gray-700">제한 설정</div>
+        <div className="text-sm font-medium text-foreground">제한 설정</div>
 
         <div>
           <Label className="text-xs">최대 조건 수</Label>
@@ -248,7 +344,7 @@ export const RackStructureConfigPanel: React.FC<RackStructureConfigPanelProps> =
 
       {/* UI 설정 */}
       <div className="space-y-3 border-t pt-3">
-        <div className="text-sm font-medium text-gray-700">UI 설정</div>
+        <div className="text-sm font-medium text-foreground">UI 설정</div>
 
         <div className="flex items-center justify-between">
           <Label className="text-xs">템플릿 기능</Label>
diff --git a/frontend/lib/registry/components/v2-rack-structure/patternUtils.ts b/frontend/lib/registry/components/v2-rack-structure/patternUtils.ts
new file mode 100644
index 00000000..d226db82
--- /dev/null
+++ b/frontend/lib/registry/components/v2-rack-structure/patternUtils.ts
@@ -0,0 +1,81 @@
+/**
+ * 위치코드/위치명 패턴 변환 유틸리티
+ *
+ * 사용 가능한 변수:
+ *   {warehouse}     - 창고 코드 (예: WH002)
+ *   {warehouseName} - 창고명 (예: 2창고)
+ *   {floor}         - 층 (예: 2층)
+ *   {zone}          - 구역 (예: A구역)
+ *   {row}           - 열 번호 (예: 1)
+ *   {row:02}        - 열 번호 2자리 (예: 01)
+ *   {row:03}        - 열 번호 3자리 (예: 001)
+ *   {level}         - 단 번호 (예: 1)
+ *   {level:02}      - 단 번호 2자리 (예: 01)
+ *   {level:03}      - 단 번호 3자리 (예: 001)
+ */
+
+interface PatternVariables {
+  warehouse?: string;
+  warehouseName?: string;
+  floor?: string;
+  zone?: string;
+  row: number;
+  level: number;
+}
+
+// 기본 패턴 (하드코딩 대체)
+export const DEFAULT_CODE_PATTERN = "{warehouse}-{floor}{zone}-{row:02}-{level}";
+export const DEFAULT_NAME_PATTERN = "{zone}-{row:02}열-{level}단";
+
+/**
+ * 패턴 문자열에서 변수를 치환하여 결과 문자열 반환
+ */
+export function applyLocationPattern(pattern: string, vars: PatternVariables): string {
+  let result = pattern;
+
+  // zone에 "구역" 포함 여부에 따른 처리 없이 있는 그대로 치환
+  const simpleVars: Record<string, string | undefined> = {
+    warehouse: vars.warehouse,
+    warehouseName: vars.warehouseName,
+    floor: vars.floor,
+    zone: vars.zone,
+  };
+
+  // 단순 문자열 변수 치환
+  for (const [key, value] of Object.entries(simpleVars)) {
+    result = result.replace(new RegExp(`\\{${key}\\}`, "g"), value || "");
+  }
+
+  // 숫자 변수 (row, level) - zero-pad 지원
+  const numericVars: Record<string, number> = {
+    row: vars.row,
+    level: vars.level,
+  };
+
+  for (const [key, value] of Object.entries(numericVars)) {
+    // {row:02}, {level:03} 같은 zero-pad 패턴
+    const padRegex = new RegExp(`\\{${key}:(\\d+)\\}`, "g");
+    result = result.replace(padRegex, (_, padWidth) => {
+      return value.toString().padStart(parseInt(padWidth), "0");
+    });
+
+    // {row}, {level} 같은 단순 패턴
+    result = result.replace(new RegExp(`\\{${key}\\}`, "g"), value.toString());
+  }
+
+  return result;
+}
+
+// 패턴에서 사용 가능한 변수 목록
+export const PATTERN_VARIABLES = [
+  { token: "{warehouse}", description: "창고 코드", example: "WH002" },
+  { token: "{warehouseName}", description: "창고명", example: "2창고" },
+  { token: "{floor}", description: "층", example: "2층" },
+  { token: "{zone}", description: "구역", example: "A구역" },
+  { token: "{row}", description: "열 번호", example: "1" },
+  { token: "{row:02}", description: "열 번호 (2자리)", example: "01" },
+  { token: "{row:03}", description: "열 번호 (3자리)", example: "001" },
+  { token: "{level}", description: "단 번호", example: "1" },
+  { token: "{level:02}", description: "단 번호 (2자리)", example: "01" },
+  { token: "{level:03}", description: "단 번호 (3자리)", example: "001" },
+];
diff --git a/frontend/lib/registry/components/v2-repeat-container/RepeatContainerComponent.tsx b/frontend/lib/registry/components/v2-repeat-container/RepeatContainerComponent.tsx
index f4f035cb..a3d67cbe 100644
--- a/frontend/lib/registry/components/v2-repeat-container/RepeatContainerComponent.tsx
+++ b/frontend/lib/registry/components/v2-repeat-container/RepeatContainerComponent.tsx
@@ -600,8 +600,8 @@ export function RepeatContainerComponent({
         className={cn(
           "rounded-md border border-dashed p-3 transition-colors",
           isDragOver
-            ? "border-green-500 bg-green-50/70"
-            : "border-blue-300 bg-blue-50/50"
+            ? "border-emerald-500 bg-emerald-50/70"
+            : "border-primary/40 bg-primary/10/50"
         )}
         onDragOver={handleDragOver}
         onDragLeave={handleDragLeave}
@@ -613,13 +613,13 @@ export function RepeatContainerComponent({
         }}
       >
         <div className="mb-3 flex items-center justify-between">
-          <div className="flex items-center gap-2 text-sm text-blue-700">
+          <div className="flex items-center gap-2 text-sm text-primary">
             <Repeat className="h-4 w-4" />
             <span className="font-medium">리피터 컨테이너</span>
-            <span className="text-blue-500">({previewData.length}개 미리보기)</span>
+            <span className="text-primary">({previewData.length}개 미리보기)</span>
           </div>
           {isDragOver ? (
-            <div className="flex items-center gap-1 rounded bg-green-100 px-2 py-1 text-xs text-green-700">
+            <div className="flex items-center gap-1 rounded bg-emerald-100 px-2 py-1 text-xs text-emerald-700">
               <Plus className="h-3 w-3" />
               여기에 놓으세요
             </div>
@@ -650,7 +650,7 @@ export function RepeatContainerComponent({
                   clickable && "cursor-pointer hover:shadow-md",
                   showSelectedState &&
                     selectedIndices.includes(index) &&
-                    "ring-2 ring-blue-500"
+                    "ring-2 ring-ring"
                 )}
               >
                 {showItemTitle && (titleColumn || itemTitleTemplate) && (
@@ -685,22 +685,22 @@ export function RepeatContainerComponent({
                     {slotChildren!.map((child: SlotComponentConfig, childIdx: number) => (
                       <div
                         key={child.id}
-                        className="flex items-center gap-2 rounded border border-dashed border-green-300 bg-green-50/50 px-2 py-1.5"
+                        className="flex items-center gap-2 rounded border border-dashed border-green-300 bg-emerald-50/50 px-2 py-1.5"
                       >
-                        <div className="flex h-5 w-5 items-center justify-center rounded bg-green-100 text-xs font-medium text-green-700">
+                        <div className="flex h-5 w-5 items-center justify-center rounded bg-emerald-100 text-xs font-medium text-emerald-700">
                           {childIdx + 1}
                         </div>
                         <div className="min-w-0 flex-1">
-                          <div className="truncate text-xs font-medium text-green-700">
+                          <div className="truncate text-xs font-medium text-emerald-700">
                             {child.label || child.componentType}
                           </div>
                           {child.fieldName && (
-                            <div className="truncate text-[10px] text-green-500">
+                            <div className="truncate text-[10px] text-emerald-500">
                               {child.fieldName}
                             </div>
                           )}
                         </div>
-                        <div className="text-[10px] text-green-400">
+                        <div className="text-[10px] text-emerald-400">
                           {child.componentType}
                         </div>
                       </div>
@@ -741,7 +741,7 @@ export function RepeatContainerComponent({
   if (isLoading) {
     return (
       <div className="flex items-center justify-center rounded-md border bg-slate-50 py-8">
-        <div className="h-6 w-6 animate-spin rounded-full border-2 border-blue-500 border-t-transparent" />
+        <div className="h-6 w-6 animate-spin rounded-full border-2 border-primary border-t-transparent" />
         <span className="ml-2 text-sm text-muted-foreground">로딩 중...</span>
       </div>
     );
@@ -769,7 +769,7 @@ export function RepeatContainerComponent({
                 clickable && "cursor-pointer hover:shadow-md",
                 showSelectedState &&
                   selectedIndices.includes(index) &&
-                  "ring-2 ring-blue-500"
+                  "ring-2 ring-ring"
               )}
               onClick={() => handleItemClick(index, row)}
             >
diff --git a/frontend/lib/registry/components/v2-repeat-container/RepeatContainerConfigPanel.tsx b/frontend/lib/registry/components/v2-repeat-container/RepeatContainerConfigPanel.tsx
index 2eddd234..c46bb275 100644
--- a/frontend/lib/registry/components/v2-repeat-container/RepeatContainerConfigPanel.tsx
+++ b/frontend/lib/registry/components/v2-repeat-container/RepeatContainerConfigPanel.tsx
@@ -127,7 +127,7 @@ export function RepeatContainerConfigPanel({
 
         {/* 현재 선택된 테이블 표시 (카드 형태) */}
         <div className="flex items-center gap-2 rounded-md border bg-slate-50 p-2">
-          <Database className="h-4 w-4 text-blue-500" />
+          <Database className="h-4 w-4 text-primary" />
           <div className="flex-1">
             <div className="text-xs font-medium">
               {config.customTableName || config.tableName || screenTableName || "테이블 미선택"}
@@ -180,7 +180,7 @@ export function RepeatContainerConfigPanel({
                           !config.useCustomTable ? "opacity-100" : "opacity-0"
                         )}
                       />
-                      <Database className="mr-2 h-3 w-3 text-blue-500" />
+                      <Database className="mr-2 h-3 w-3 text-primary" />
                       {screenTableName}
                     </CommandItem>
                   </CommandGroup>
@@ -499,7 +499,7 @@ export function RepeatContainerConfigPanel({
                 </PopoverContent>
               </Popover>
               {config.titleColumn && (
-                <p className="text-[10px] text-green-600">
+                <p className="text-[10px] text-emerald-600">
                   각 아이템의 "{config.titleColumn}" 값이 제목으로 표시됩니다
                 </p>
               )}
@@ -567,7 +567,7 @@ export function RepeatContainerConfigPanel({
                 </PopoverContent>
               </Popover>
               {config.descriptionColumn && (
-                <p className="text-[10px] text-green-600">
+                <p className="text-[10px] text-emerald-600">
                   각 아이템의 "{config.descriptionColumn}" 값이 설명으로 표시됩니다
                 </p>
               )}
@@ -889,25 +889,25 @@ function SlotChildrenSection({
             return (
               <div
                 key={child.id}
-                className="rounded-md border border-green-200 bg-green-50 overflow-hidden"
+                className="rounded-md border border-emerald-200 bg-emerald-50 overflow-hidden"
               >
                 {/* 기본 정보 헤더 - 타입 선택 드롭다운 제거됨 */}
                 <div className="flex items-center gap-2 p-2">
-                  <div className="flex h-5 w-5 items-center justify-center rounded bg-green-200 text-xs font-medium text-green-700">
+                  <div className="flex h-5 w-5 items-center justify-center rounded bg-emerald-200 text-xs font-medium text-emerald-700">
                     {index + 1}
                   </div>
                   <div className="flex-1">
-                    <div className="text-xs font-medium text-green-700">
+                    <div className="text-xs font-medium text-emerald-700">
                       {child.label || child.fieldName}
                     </div>
-                    <div className="text-[10px] text-green-500">
+                    <div className="text-[10px] text-emerald-500">
                       필드: {child.fieldName}
                     </div>
                   </div>
                   <Button
                     variant="ghost"
                     size="sm"
-                    className="h-5 w-5 p-0 text-blue-500 hover:text-blue-700"
+                    className="h-5 w-5 p-0 text-primary hover:text-primary"
                     onClick={() => toggleExpanded(child.id)}
                     title="상세 설정"
                   >
@@ -920,7 +920,7 @@ function SlotChildrenSection({
                   <Button
                     variant="ghost"
                     size="sm"
-                    className="h-5 w-5 p-0 text-red-400 hover:text-red-600"
+                    className="h-5 w-5 p-0 text-destructive/80 hover:text-destructive"
                     onClick={() => removeComponent(child.id)}
                   >
                     <X className="h-3 w-3" />
@@ -929,7 +929,7 @@ function SlotChildrenSection({
 
                 {/* 상세 설정 패널 */}
                 {isExpanded && (
-                  <div className="border-t border-green-200 bg-white p-3 space-y-3">
+                  <div className="border-t border-emerald-200 bg-white p-3 space-y-3">
                     {hasComponentConfigPanel(child.componentType) ? (
                       <SlotComponentDetailPanel
                         child={child}
@@ -948,14 +948,14 @@ function SlotChildrenSection({
                     ) : (
                       <>
                         {child.fieldName && (
-                          <div className="p-2 bg-green-50 rounded-md border border-green-200">
+                          <div className="p-2 bg-emerald-50 rounded-md border border-emerald-200">
                             <div className="flex items-center gap-1.5">
-                              <Database className="h-3 w-3 text-green-600" />
-                              <span className="text-[10px] text-green-700 font-medium">
+                              <Database className="h-3 w-3 text-emerald-600" />
+                              <span className="text-[10px] text-emerald-700 font-medium">
                                 바인딩: {child.fieldName}
                               </span>
                             </div>
-                            <p className="text-[9px] text-green-600 mt-0.5">
+                            <p className="text-[9px] text-emerald-600 mt-0.5">
                               각 아이템의 "{child.fieldName}" 값이 자동으로 표시됩니다
                             </p>
                           </div>
@@ -1092,7 +1092,7 @@ function SlotChildrenSection({
                         <Plus
                           className={cn(
                             "mr-2 h-3 w-3",
-                            isAdded ? "text-green-500" : "text-blue-500"
+                            isAdded ? "text-emerald-500" : "text-primary"
                           )}
                         />
                         <div className="flex-1">
@@ -1102,7 +1102,7 @@ function SlotChildrenSection({
                           </div>
                         </div>
                         {isAdded && (
-                          <Check className="h-3 w-3 text-green-500" />
+                          <Check className="h-3 w-3 text-emerald-500" />
                         )}
                       </CommandItem>
                     );
@@ -1134,14 +1134,14 @@ function SlotComponentDetailPanel({
   return (
     <div className="space-y-3">
       {child.fieldName && (
-        <div className="p-2 bg-green-50 rounded-md border border-green-200">
+        <div className="p-2 bg-emerald-50 rounded-md border border-emerald-200">
           <div className="flex items-center gap-1.5">
-            <Database className="h-3 w-3 text-green-600" />
-            <span className="text-[10px] text-green-700 font-medium">
+            <Database className="h-3 w-3 text-emerald-600" />
+            <span className="text-[10px] text-emerald-700 font-medium">
               바인딩: {child.fieldName}
             </span>
           </div>
-          <p className="text-[9px] text-green-600 mt-0.5">
+          <p className="text-[9px] text-emerald-600 mt-0.5">
             각 아이템의 "{child.fieldName}" 값이 자동으로 표시됩니다
           </p>
         </div>
diff --git a/frontend/lib/registry/components/v2-select/V2SelectRenderer.tsx b/frontend/lib/registry/components/v2-select/V2SelectRenderer.tsx
index b389cff7..36e35eac 100644
--- a/frontend/lib/registry/components/v2-select/V2SelectRenderer.tsx
+++ b/frontend/lib/registry/components/v2-select/V2SelectRenderer.tsx
@@ -4,6 +4,7 @@ import React from "react";
 import { AutoRegisteringComponentRenderer } from "../../AutoRegisteringComponentRenderer";
 import { V2SelectDefinition } from "./index";
 import { V2Select } from "@/components/v2/V2Select";
+import { isColumnRequiredByMeta } from "../../DynamicComponentRenderer";
 
 /**
  * V2Select 렌더러
@@ -112,10 +113,6 @@ export class V2SelectRenderer extends AutoRegisteringComponentRenderer {
     return (
       <V2Select
         id={component.id}
-        label={component.label}
-        required={component.required}
-        readonly={config.readonly || component.readonly}
-        disabled={config.disabled || component.disabled}
         value={currentValue}
         onChange={handleChange}
         onFormDataChange={isInteractive ? onFormDataChange : undefined}
@@ -141,6 +138,10 @@ export class V2SelectRenderer extends AutoRegisteringComponentRenderer {
         {...restPropsClean}
         style={effectiveStyle}
         size={effectiveSize}
+        label={component.label}
+        required={component.required || isColumnRequiredByMeta(tableName, columnName)}
+        readonly={config.readonly || component.readonly}
+        disabled={config.disabled || component.disabled}
       />
     );
   }
diff --git a/frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutComponent.tsx b/frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutComponent.tsx
index 3439c220..94ab366a 100644
--- a/frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutComponent.tsx
+++ b/frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutComponent.tsx
@@ -44,6 +44,7 @@ import { useSplitPanel } from "./SplitPanelContext";
 import { DynamicComponentRenderer } from "@/lib/registry/DynamicComponentRenderer";
 import { PanelInlineComponent } from "./types";
 import { cn } from "@/lib/utils";
+import { ResponsiveGridRenderer } from "@/components/screen/ResponsiveGridRenderer";
 import { BomExcelUploadModal } from "../v2-bom-tree/BomExcelUploadModal";
 
 export interface SplitPanelLayoutComponentProps extends ComponentRendererProps {
@@ -726,24 +727,21 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
     return `${height}px`; // 숫자면 px 추가
   };
 
-  const componentStyle: React.CSSProperties = isPreview
+  const componentStyle: React.CSSProperties = isDesignMode
     ? {
-        // 반응형 모드: position relative, 그리드 컨테이너가 제공하는 크기 사용
-        position: "relative",
-        width: "100%", // 🆕 부모 컨테이너 너비에 맞춤
-        height: getHeightValue(),
-        border: "1px solid #e5e7eb",
-      }
-    : {
-        // 디자이너 모드: position absolute
         position: "absolute",
         left: `${component.style?.positionX || 0}px`,
         top: `${component.style?.positionY || 0}px`,
-        width: "100%", // 🆕 부모 컨테이너 너비에 맞춤 (그리드 기반)
+        width: "100%",
         height: getHeightValue(),
         zIndex: component.style?.positionZ || 1,
-        cursor: isDesignMode ? "pointer" : "default",
+        cursor: "pointer",
         border: isSelected ? "2px solid #3b82f6" : "1px solid #e5e7eb",
+      }
+    : {
+        position: "relative",
+        width: "100%",
+        height: getHeightValue(),
       };
 
   // 계층 구조 빌드 함수 (트리 구조 유지)
@@ -1683,56 +1681,79 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
   const getLeftColumnUniqueValues = useCallback(
     async (columnName: string) => {
       const leftTableName = componentConfig.leftPanel?.tableName;
-      if (!leftTableName || leftData.length === 0) return [];
+      if (!leftTableName) return [];
 
-      // 현재 로드된 데이터에서 고유값 추출
-      const uniqueValues = new Set<string>();
+      // 1단계: 카테고리 API 시도 (DB에서 라벨 조회)
+      try {
+        const { apiClient } = await import("@/lib/api/client");
+        const response = await apiClient.get(`/table-categories/${leftTableName}/${columnName}/values`);
+        if (response.data.success && response.data.data && response.data.data.length > 0) {
+          return response.data.data.map((item: any) => ({
+            value: item.valueCode,
+            label: item.valueLabel,
+          }));
+        }
+      } catch {
+        // 카테고리 API 실패 시 다음 단계로
+      }
+
+      // 2단계: DISTINCT API (백엔드 라벨 변환 포함)
+      try {
+        const { apiClient } = await import("@/lib/api/client");
+        const response = await apiClient.get(`/entity/${leftTableName}/distinct/${columnName}`);
+        if (response.data.success && response.data.data && response.data.data.length > 0) {
+          return response.data.data.map((item: any) => ({
+            value: String(item.value),
+            label: String(item.label),
+          }));
+        }
+      } catch {
+        // DISTINCT API 실패 시 다음 단계로
+      }
+
+      // 3단계: 로컬 데이터에서 고유값 추출 (최종 fallback)
+      if (leftData.length === 0) return [];
+
+      const uniqueValuesMap = new Map<string, string>();
 
       leftData.forEach((item) => {
-        // 🆕 조인 컬럼 처리 (item_info.standard → item_code_standard 또는 item_id_standard)
         let value: any;
 
         if (columnName.includes(".")) {
-          // 조인 컬럼: getEntityJoinValue와 동일한 로직 적용
           const [refTable, fieldName] = columnName.split(".");
           const inferredSourceColumn = refTable.replace("_info", "_code").replace("_mng", "_id");
 
-          // 정확한 키로 먼저 시도
           const exactKey = `${inferredSourceColumn}_${fieldName}`;
           value = item[exactKey];
 
-          // 🆕 item_id 패턴 시도
           if (value === undefined) {
             const idPatternKey = `${refTable.replace("_info", "_id").replace("_mng", "_id")}_${fieldName}`;
             value = item[idPatternKey];
           }
 
-          // 기본 별칭 패턴 시도 (item_code_name 또는 item_id_name)
           if (value === undefined && (fieldName === "item_name" || fieldName === "name")) {
             const aliasKey = `${inferredSourceColumn}_name`;
             value = item[aliasKey];
-            // item_id_name 패턴도 시도
             if (value === undefined) {
               const idAliasKey = `${refTable.replace("_info", "_id").replace("_mng", "_id")}_name`;
               value = item[idAliasKey];
             }
           }
         } else {
-          // 일반 컬럼
           value = item[columnName];
         }
 
         if (value !== null && value !== undefined && value !== "") {
-          // _name 필드 우선 사용 (category/entity type)
-          const displayValue = item[`${columnName}_name`] || value;
-          uniqueValues.add(String(displayValue));
+          const strValue = String(value);
+          const nameField = item[`${columnName}_name`];
+          const label = nameField || strValue;
+          uniqueValuesMap.set(strValue, label);
         }
       });
 
-      return Array.from(uniqueValues).map((value) => ({
-        value: value,
-        label: value,
-      }));
+      return Array.from(uniqueValuesMap.entries())
+        .map(([value, label]) => ({ value, label }))
+        .sort((a, b) => a.label.localeCompare(b.label));
     },
     [componentConfig.leftPanel?.tableName, leftData],
   );
@@ -2970,13 +2991,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
     <div
       ref={containerRef}
       style={{
-        ...(isPreview
-          ? {
-              position: "relative",
-              height: `${component.style?.height || 600}px`,
-              border: "1px solid #e5e7eb",
-            }
-          : componentStyle),
+        ...componentStyle,
         display: "flex",
         flexDirection: "row",
       }}
@@ -2990,8 +3005,8 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
     >
       {/* 좌측 패널 */}
       <div
-        style={{ width: `${leftWidth}%`, minWidth: isPreview ? "0" : `${minLeftWidth}px`, height: "100%" }}
-        className="border-border flex flex-shrink-0 flex-col border-r"
+        style={{ width: `${leftWidth}%`, minWidth: isDesignMode ? `${minLeftWidth}px` : "0", height: "100%" }}
+        className="border-border flex flex-col border-r"
       >
         <Card className="flex flex-col border-0 shadow-none" style={{ height: "100%" }}>
           <CardHeader
@@ -3048,22 +3063,74 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                 data-component-id={component.id}
                 data-panel-side="left"
               >
-                {/* 🆕 커스텀 모드: 디자인/실행 모드 통합 렌더링 */}
+                {/* 커스텀 모드: 디자인/실행 모드 분기 렌더링 */}
                 {componentConfig.leftPanel?.components && componentConfig.leftPanel.components.length > 0 ? (
+                  !isDesignMode ? (
+                    // 런타임: ResponsiveGridRenderer로 반응형 렌더링
+                    (() => {
+                      const leftComps = componentConfig.leftPanel!.components;
+                      const canvasW = Math.max(...leftComps.map((c: PanelInlineComponent) => (c.position?.x || 0) + (c.size?.width || 200)), 800);
+                      const canvasH = Math.max(...leftComps.map((c: PanelInlineComponent) => (c.position?.y || 0) + (c.size?.height || 100)), 400);
+                      const compDataList = leftComps.map((c: PanelInlineComponent) => ({
+                        id: c.id,
+                        type: "component" as const,
+                        componentType: c.componentType,
+                        label: c.label,
+                        position: c.position || { x: 0, y: 0 },
+                        size: c.size || { width: 400, height: 300 },
+                        componentConfig: c.componentConfig || {},
+                        style: c.style || {},
+                        tableName: c.componentConfig?.tableName,
+                        columnName: c.componentConfig?.columnName,
+                        webType: c.componentConfig?.webType,
+                        inputType: (c as any).inputType || c.componentConfig?.inputType,
+                      })) as any;
+                      return (
+                        <ResponsiveGridRenderer
+                          components={compDataList}
+                          canvasWidth={canvasW}
+                          canvasHeight={canvasH}
+                          renderComponent={(comp) => (
+                            <DynamicComponentRenderer
+                              component={comp as any}
+                              isDesignMode={false}
+                              isInteractive={true}
+                              formData={{}}
+                              tableName={componentConfig.leftPanel?.tableName}
+                              menuObjid={(props as any).menuObjid}
+                              screenId={(props as any).screenId}
+                              userId={(props as any).userId}
+                              userName={(props as any).userName}
+                              companyCode={companyCode}
+                              allComponents={(props as any).allComponents}
+                              selectedRowsData={localSelectedRowsData}
+                              onSelectedRowsChange={handleLocalSelectedRowsChange}
+                              onFormDataChange={(data: any) => {
+                                if (data?.selectedRowsData && data.selectedRowsData.length > 0) {
+                                  setCustomLeftSelectedData(data.selectedRowsData[0]);
+                                  setSelectedLeftItem(data.selectedRowsData[0]);
+                                } else if (data?.selectedRowsData && data.selectedRowsData.length === 0) {
+                                  setCustomLeftSelectedData({});
+                                  setSelectedLeftItem(null);
+                                }
+                              }}
+                            />
+                          )}
+                        />
+                      );
+                    })()
+                  ) : (
                   <div className="relative h-full w-full" style={{ minHeight: "100%", minWidth: "100%" }}>
                     {componentConfig.leftPanel.components.map((comp: PanelInlineComponent) => {
                       const isSelectedComp = selectedPanelComponentId === comp.id;
                       const isDraggingComp = draggingCompId === comp.id;
                       const isResizingComp = resizingCompId === comp.id;
                       
-                      // 드래그/리사이즈 중 표시할 크기/위치
                       const displayX = isDraggingComp && dragPosition ? dragPosition.x : (comp.position?.x || 0);
                       const displayY = isDraggingComp && dragPosition ? dragPosition.y : (comp.position?.y || 0);
                       const displayWidth = isResizingComp && resizeSize ? resizeSize.width : (comp.size?.width || 200);
                       const displayHeight = isResizingComp && resizeSize ? resizeSize.height : (comp.size?.height || 100);
                       
-                      // 컴포넌트 데이터를 DynamicComponentRenderer 형식으로 변환
-                      // componentConfig의 주요 속성을 최상위로 펼침 (일반 화면의 overrides 플래트닝과 동일)
                       const componentData = {
                         id: comp.id,
                         type: "component" as const,
@@ -3073,16 +3140,13 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                         size: { width: displayWidth, height: displayHeight },
                         componentConfig: comp.componentConfig || {},
                         style: comp.style || {},
-                        // 파일 업로드/미디어 등이 component.tableName, component.columnName을 직접 참조하므로 펼침
                         tableName: comp.componentConfig?.tableName,
                         columnName: comp.componentConfig?.columnName,
                         webType: comp.componentConfig?.webType,
-                        inputType: comp.inputType || comp.componentConfig?.inputType,
+                        inputType: (comp as any).inputType || comp.componentConfig?.inputType,
                       };
 
-                      if (isDesignMode) {
-                        // 디자인 모드: 탭 컴포넌트와 동일하게 실제 컴포넌트 렌더링
-                        return (
+                      return (
                           <div
                             key={comp.id}
                             data-panel-comp-id={comp.id}
@@ -3104,38 +3168,38 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                             {/* 드래그 핸들 - 컴포넌트 외부 상단 */}
                             <div
                               className={cn(
-                                "flex h-4 cursor-move items-center justify-between rounded-t border border-b-0 bg-gray-100 px-1",
-                                isSelectedComp ? "border-primary" : "border-gray-200"
+                                "flex h-4 cursor-move items-center justify-between rounded-t border border-b-0 bg-muted px-1",
+                                isSelectedComp ? "border-primary" : "border-border"
                               )}
                               style={{ width: displayWidth }}
                               onMouseDown={(e) => handlePanelDragStart(e, "left", comp)}
                             >
                               <div className="flex items-center gap-0.5">
-                                <Move className="h-2.5 w-2.5 text-gray-400" />
-                                <span className="max-w-[100px] truncate text-[9px] text-gray-500">
+                                <Move className="h-2.5 w-2.5 text-muted-foreground/70" />
+                                <span className="max-w-[100px] truncate text-[9px] text-muted-foreground">
                                   {comp.label || comp.componentType}
                                 </span>
                               </div>
                               <div className="flex items-center">
                                 <button
-                                  className="rounded p-0.5 hover:bg-gray-200"
+                                  className="rounded p-0.5 hover:bg-muted/80"
                                   onClick={(e) => {
                                     e.stopPropagation();
                                     onSelectPanelComponent?.("left", comp.id, comp);
                                   }}
                                   title="설정"
                                 >
-                                  <Settings className="h-2.5 w-2.5 text-gray-500" />
+                                  <Settings className="h-2.5 w-2.5 text-muted-foreground" />
                                 </button>
                                 <button
-                                  className="rounded p-0.5 hover:bg-red-100"
+                                  className="rounded p-0.5 hover:bg-destructive/10"
                                   onClick={(e) => {
                                     e.stopPropagation();
                                     handleRemovePanelComponent("left", comp.id);
                                   }}
                                   title="삭제"
                                 >
-                                  <Trash2 className="h-2.5 w-2.5 text-red-500" />
+                                  <Trash2 className="h-2.5 w-2.5 text-destructive" />
                                 </button>
                               </div>
                             </div>
@@ -3146,7 +3210,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                 "relative overflow-hidden rounded-b border bg-white shadow-sm",
                                 isSelectedComp
                                   ? "border-primary ring-2 ring-primary/30"
-                                  : "border-gray-200",
+                                  : "border-border",
                                 (isDraggingComp || isResizingComp) && "opacity-80 shadow-lg",
                                 !(isDraggingComp || isResizingComp) && "transition-all"
                               )}
@@ -3219,68 +3283,17 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                             </div>
                           </div>
                         );
-                      } else {
-                        // 실행 모드: DynamicComponentRenderer로 렌더링
-                        const componentData = {
-                          id: comp.id,
-                          type: "component" as const,
-                          componentType: comp.componentType,
-                          label: comp.label,
-                          position: comp.position || { x: 0, y: 0 },
-                          size: comp.size || { width: 400, height: 300 },
-                          componentConfig: comp.componentConfig || {},
-                          style: comp.style || {},
-                        };
-                        
-                        return (
-                          <div
-                            key={comp.id}
-                            className="absolute"
-                            style={{
-                              left: comp.position?.x || 0,
-                              top: comp.position?.y || 0,
-                              width: comp.size?.width || 400,
-                              height: comp.size?.height || 300,
-                            }}
-                          >
-                            <DynamicComponentRenderer
-                              component={componentData as any}
-                              isDesignMode={false}
-                              isInteractive={true}
-                              formData={{}}
-                              tableName={componentConfig.leftPanel?.tableName}
-                              menuObjid={(props as any).menuObjid}
-                              screenId={(props as any).screenId}
-                              userId={(props as any).userId}
-                              userName={(props as any).userName}
-                              companyCode={companyCode}
-                              allComponents={(props as any).allComponents}
-                              selectedRowsData={localSelectedRowsData}
-                              onSelectedRowsChange={handleLocalSelectedRowsChange}
-                              onFormDataChange={(data: any) => {
-                                // 커스텀 모드: 좌측 카드/테이블 선택 시 데이터 캡처
-                                if (data?.selectedRowsData && data.selectedRowsData.length > 0) {
-                                  setCustomLeftSelectedData(data.selectedRowsData[0]);
-                                  setSelectedLeftItem(data.selectedRowsData[0]);
-                                } else if (data?.selectedRowsData && data.selectedRowsData.length === 0) {
-                                  setCustomLeftSelectedData({});
-                                  setSelectedLeftItem(null);
-                                }
-                              }}
-                            />
-                          </div>
-                        );
-                      }
                     })}
                   </div>
+                  )
                 ) : (
                   // 컴포넌트가 없을 때 드롭 영역 표시
-                  <div className="flex h-full w-full flex-col items-center justify-center rounded border-2 border-dashed border-gray-300 bg-gray-50/50">
-                    <Plus className="mb-2 h-8 w-8 text-gray-400" />
-                    <p className="text-sm font-medium text-gray-500">
+                  <div className="flex h-full w-full flex-col items-center justify-center rounded border-2 border-dashed border-input bg-muted/50">
+                    <Plus className="mb-2 h-8 w-8 text-muted-foreground/70" />
+                    <p className="text-sm font-medium text-muted-foreground">
                       커스텀 모드
                     </p>
-                    <p className="mt-1 text-xs text-gray-400">
+                    <p className="mt-1 text-xs text-muted-foreground/70">
                       {isDesignMode ? "컴포넌트를 드래그하여 배치하세요" : "배치된 컴포넌트가 없습니다"}
                     </p>
                   </div>
@@ -3292,21 +3305,21 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                 {isDesignMode ? (
                   // 디자인 모드: 샘플 테이블
                   <div className="overflow-auto">
-                    <table className="min-w-full divide-y divide-gray-200">
-                      <thead className="bg-gray-50">
+                    <table className="min-w-full divide-y divide-border">
+                      <thead className="bg-muted">
                         <tr>
-                          <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">컬럼 1</th>
-                          <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">컬럼 2</th>
-                          <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">컬럼 3</th>
+                          <th className="px-3 py-2 text-left text-xs font-medium text-muted-foreground uppercase">컬럼 1</th>
+                          <th className="px-3 py-2 text-left text-xs font-medium text-muted-foreground uppercase">컬럼 2</th>
+                          <th className="px-3 py-2 text-left text-xs font-medium text-muted-foreground uppercase">컬럼 3</th>
                         </tr>
                       </thead>
-                      <tbody className="divide-y divide-gray-200 bg-white">
-                        <tr className="cursor-pointer hover:bg-gray-50">
+                      <tbody className="divide-y divide-border bg-white">
+                        <tr className="cursor-pointer hover:bg-muted">
                           <td className="px-3 py-2 text-sm whitespace-nowrap">데이터 1-1</td>
                           <td className="px-3 py-2 text-sm whitespace-nowrap">데이터 1-2</td>
                           <td className="px-3 py-2 text-sm whitespace-nowrap">데이터 1-3</td>
                         </tr>
-                        <tr className="cursor-pointer hover:bg-gray-50">
+                        <tr className="cursor-pointer hover:bg-muted">
                           <td className="px-3 py-2 text-sm whitespace-nowrap">데이터 2-1</td>
                           <td className="px-3 py-2 text-sm whitespace-nowrap">데이터 2-2</td>
                           <td className="px-3 py-2 text-sm whitespace-nowrap">데이터 2-3</td>
@@ -3376,16 +3389,16 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                         <div className="overflow-auto">
                           {groupedLeftData.map((group, groupIdx) => (
                             <div key={groupIdx} className="mb-4">
-                              <div className="bg-gray-100 px-3 py-2 text-sm font-semibold">
+                              <div className="bg-muted px-3 py-2 text-sm font-semibold">
                                 {group.groupKey} ({group.count}개)
                               </div>
-                              <table className="min-w-full divide-y divide-gray-200">
-                                <thead className="bg-gray-50">
+                              <table className="min-w-full divide-y divide-border">
+                                <thead className="bg-muted">
                                   <tr>
                                     {columnsToShow.map((col, idx) => (
                                       <th
                                         key={idx}
-                                        className="px-3 py-2 text-left text-xs font-medium tracking-wider text-gray-500 uppercase whitespace-nowrap"
+                                        className="px-3 py-2 text-left text-xs font-medium tracking-wider text-muted-foreground uppercase whitespace-nowrap"
                                         style={{
                                           width: col.width ? `${col.width}px` : "auto",
                                           minWidth: "80px",
@@ -3396,12 +3409,12 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                       </th>
                                     ))}
                                     {hasGroupedLeftActions && (
-                                      <th className="px-3 py-2 text-right text-xs font-medium tracking-wider text-gray-500 uppercase whitespace-nowrap" style={{ width: "80px" }}>
+                                      <th className="px-3 py-2 text-right text-xs font-medium tracking-wider text-muted-foreground uppercase whitespace-nowrap" style={{ width: "80px" }}>
                                       </th>
                                     )}
                                   </tr>
                                 </thead>
-                                <tbody className="divide-y divide-gray-200 bg-white">
+                                <tbody className="divide-y divide-border bg-white">
                                   {group.items.map((item, idx) => {
                                     const sourceColumn = componentConfig.leftPanel?.itemAddConfig?.sourceColumn || "id";
                                     const itemId = item[sourceColumn] || item.id || item.ID || idx;
@@ -3420,7 +3433,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                         {columnsToShow.map((col, colIdx) => (
                                           <td
                                             key={colIdx}
-                                            className="px-3 py-2 text-sm whitespace-nowrap text-gray-900"
+                                            className="px-3 py-2 text-sm whitespace-nowrap text-foreground"
                                             style={{ textAlign: col.align || "left" }}
                                           >
                                             {formatCellValue(
@@ -3440,9 +3453,9 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                                     e.stopPropagation();
                                                     handleEditClick("left", item);
                                                   }}
-                                                  className="rounded p-1 transition-colors hover:bg-gray-200"
+                                                  className="rounded p-1 transition-colors hover:bg-muted/80"
                                                 >
-                                                  <Pencil className="h-3.5 w-3.5 text-gray-500" />
+                                                  <Pencil className="h-3.5 w-3.5 text-muted-foreground" />
                                                 </button>
                                               )}
                                               {(componentConfig.leftPanel?.showDelete !== false) && (
@@ -3451,9 +3464,9 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                                     e.stopPropagation();
                                                     handleDeleteClick("left", item);
                                                   }}
-                                                  className="rounded p-1 transition-colors hover:bg-red-100"
+                                                  className="rounded p-1 transition-colors hover:bg-destructive/10"
                                                 >
-                                                  <Trash2 className="h-3.5 w-3.5 text-red-500" />
+                                                  <Trash2 className="h-3.5 w-3.5 text-destructive" />
                                                 </button>
                                               )}
                                             </div>
@@ -3477,13 +3490,13 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                     );
                     return (
                       <div className="overflow-auto">
-                        <table className="min-w-full divide-y divide-gray-200">
-                          <thead className="sticky top-0 z-10 bg-gray-50">
+                        <table className="min-w-full divide-y divide-border">
+                          <thead className="sticky top-0 z-10 bg-muted">
                             <tr>
                               {columnsToShow.map((col, idx) => (
                                 <th
                                   key={idx}
-                                  className="px-3 py-2 text-left text-xs font-medium tracking-wider text-gray-500 uppercase whitespace-nowrap"
+                                  className="px-3 py-2 text-left text-xs font-medium tracking-wider text-muted-foreground uppercase whitespace-nowrap"
                                   style={{
                                     width: col.width ? `${col.width}px` : "auto",
                                     minWidth: "80px",
@@ -3494,12 +3507,12 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                 </th>
                               ))}
                               {hasLeftTableActions && (
-                                <th className="px-3 py-2 text-right text-xs font-medium tracking-wider text-gray-500 uppercase whitespace-nowrap" style={{ width: "80px" }}>
+                                <th className="px-3 py-2 text-right text-xs font-medium tracking-wider text-muted-foreground uppercase whitespace-nowrap" style={{ width: "80px" }}>
                                 </th>
                               )}
                             </tr>
                           </thead>
-                          <tbody className="divide-y divide-gray-200 bg-white">
+                          <tbody className="divide-y divide-border bg-white">
                             {filteredData.map((item, idx) => {
                               const sourceColumn = componentConfig.leftPanel?.itemAddConfig?.sourceColumn || "id";
                               const itemId = item[sourceColumn] || item.id || item.ID || idx;
@@ -3518,7 +3531,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                   {columnsToShow.map((col, colIdx) => (
                                     <td
                                       key={colIdx}
-                                      className="px-3 py-2 text-sm whitespace-nowrap text-gray-900"
+                                      className="px-3 py-2 text-sm whitespace-nowrap text-foreground"
                                       style={{ textAlign: col.align || "left" }}
                                     >
                                       {formatCellValue(
@@ -3538,9 +3551,9 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                               e.stopPropagation();
                                               handleEditClick("left", item);
                                             }}
-                                            className="rounded p-1 transition-colors hover:bg-gray-200"
+                                            className="rounded p-1 transition-colors hover:bg-muted/80"
                                           >
-                                            <Pencil className="h-3.5 w-3.5 text-gray-500" />
+                                            <Pencil className="h-3.5 w-3.5 text-muted-foreground" />
                                           </button>
                                         )}
                                         {(componentConfig.leftPanel?.showDelete !== false) && (
@@ -3549,9 +3562,9 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                               e.stopPropagation();
                                               handleDeleteClick("left", item);
                                             }}
-                                            className="rounded p-1 transition-colors hover:bg-red-100"
+                                            className="rounded p-1 transition-colors hover:bg-destructive/10"
                                           >
-                                            <Trash2 className="h-3.5 w-3.5 text-red-500" />
+                                            <Trash2 className="h-3.5 w-3.5 text-destructive" />
                                           </button>
                                         )}
                                       </div>
@@ -3704,9 +3717,9 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                               {hasChildren ? (
                                 <div className="flex-shrink-0">
                                   {isExpanded ? (
-                                    <ChevronDown className="h-4 w-4 text-gray-500" />
+                                    <ChevronDown className="h-4 w-4 text-muted-foreground" />
                                   ) : (
-                                    <ChevronRight className="h-4 w-4 text-gray-500" />
+                                    <ChevronRight className="h-4 w-4 text-muted-foreground" />
                                   )}
                                 </div>
                               ) : (
@@ -3731,10 +3744,10 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                         e.stopPropagation();
                                         handleEditClick("left", item);
                                       }}
-                                      className="rounded p-1 transition-colors hover:bg-gray-200"
+                                      className="rounded p-1 transition-colors hover:bg-muted/80"
                                       title="수정"
                                     >
-                                      <Pencil className="h-4 w-4 text-gray-600" />
+                                      <Pencil className="h-4 w-4 text-muted-foreground" />
                                     </button>
                                   )}
 
@@ -3745,10 +3758,10 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                         e.stopPropagation();
                                         handleDeleteClick("left", item);
                                       }}
-                                      className="rounded p-1 transition-colors hover:bg-red-100"
+                                      className="rounded p-1 transition-colors hover:bg-destructive/10"
                                       title="삭제"
                                     >
-                                      <Trash2 className="h-4 w-4 text-red-600" />
+                                      <Trash2 className="h-4 w-4 text-destructive" />
                                     </button>
                                   )}
 
@@ -3759,10 +3772,10 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                         e.stopPropagation();
                                         handleItemAddClick(item);
                                       }}
-                                      className="rounded p-1 transition-colors hover:bg-gray-200"
+                                      className="rounded p-1 transition-colors hover:bg-muted/80"
                                       title="하위 항목 추가"
                                     >
-                                      <Plus className="h-4 w-4 text-gray-600" />
+                                      <Plus className="h-4 w-4 text-muted-foreground" />
                                     </button>
                                   )}
                                 </div>
@@ -3814,8 +3827,8 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
 
       {/* 우측 패널 */}
       <div
-        style={{ width: `${100 - leftWidth}%`, minWidth: isPreview ? "0" : `${minRightWidth}px`, height: "100%" }}
-        className="flex flex-shrink-0 flex-col border-l border-border/60 bg-muted/5"
+        style={{ width: `${100 - leftWidth}%`, minWidth: isDesignMode ? `${minRightWidth}px` : "0", height: "100%" }}
+        className="flex flex-col border-l border-border/60 bg-muted/5"
       >
         <Card className="flex flex-col border-0 bg-transparent shadow-none" style={{ height: "100%" }}>
           <CardHeader
@@ -3904,7 +3917,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
               </div>
             </div>
           )}
-          <CardContent className="flex-1 overflow-hidden p-4">
+          <CardContent className="flex-1 overflow-auto p-4">
             {/* 추가 탭 컨텐츠 */}
             {activeTabIndex > 0 ? (
               (() => {
@@ -4184,192 +4197,36 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                 data-component-id={component.id}
                 data-panel-side="right"
               >
-                {/* 🆕 커스텀 모드: 디자인/실행 모드 통합 렌더링 */}
+                {/* 커스텀 모드: 디자인/실행 모드 분기 렌더링 */}
                 {componentConfig.rightPanel?.components && componentConfig.rightPanel.components.length > 0 ? (
-                  <div className="relative h-full w-full" style={{ minHeight: "100%", minWidth: "100%" }}>
-                    {componentConfig.rightPanel.components.map((comp: PanelInlineComponent) => {
-                      const isSelectedComp = selectedPanelComponentId === comp.id;
-                      const isDraggingComp = draggingCompId === comp.id;
-                      const isResizingComp = resizingCompId === comp.id;
-                      
-                      // 드래그/리사이즈 중 표시할 크기/위치
-                      const displayX = isDraggingComp && dragPosition ? dragPosition.x : (comp.position?.x || 0);
-                      const displayY = isDraggingComp && dragPosition ? dragPosition.y : (comp.position?.y || 0);
-                      const displayWidth = isResizingComp && resizeSize ? resizeSize.width : (comp.size?.width || 200);
-                      const displayHeight = isResizingComp && resizeSize ? resizeSize.height : (comp.size?.height || 100);
-                      
-                      // 컴포넌트 데이터를 DynamicComponentRenderer 형식으로 변환
-                      // componentConfig의 주요 속성을 최상위로 펼침 (일반 화면의 overrides 플래트닝과 동일)
-                      const componentData = {
-                        id: comp.id,
+                  !isDesignMode ? (
+                    // 런타임: ResponsiveGridRenderer로 반응형 렌더링
+                    (() => {
+                      const rightComps = componentConfig.rightPanel!.components;
+                      const canvasW = Math.max(...rightComps.map((c: PanelInlineComponent) => (c.position?.x || 0) + (c.size?.width || 200)), 800);
+                      const canvasH = Math.max(...rightComps.map((c: PanelInlineComponent) => (c.position?.y || 0) + (c.size?.height || 100)), 400);
+                      const compDataList = rightComps.map((c: PanelInlineComponent) => ({
+                        id: c.id,
                         type: "component" as const,
-                        componentType: comp.componentType,
-                        label: comp.label,
-                        position: comp.position || { x: 0, y: 0 },
-                        size: { width: displayWidth, height: displayHeight },
-                        componentConfig: comp.componentConfig || {},
-                        style: comp.style || {},
-                        // 파일 업로드/미디어 등이 component.tableName, component.columnName을 직접 참조하므로 펼침
-                        tableName: comp.componentConfig?.tableName,
-                        columnName: comp.componentConfig?.columnName,
-                        webType: comp.componentConfig?.webType,
-                        inputType: comp.inputType || comp.componentConfig?.inputType,
-                      };
-
-                      if (isDesignMode) {
-                        // 디자인 모드: 탭 컴포넌트와 동일하게 실제 컴포넌트 렌더링
-                        return (
-                          <div
-                            key={comp.id}
-                            data-panel-comp-id={comp.id}
-                            className="absolute"
-                            style={{
-                              left: displayX,
-                              top: displayY,
-                              zIndex: isDraggingComp ? 100 : isSelectedComp ? 10 : 1,
-                            }}
-                            onClick={(e) => {
-                              e.stopPropagation();
-                              // 패널 컴포넌트 선택 시 탭 내 선택 해제
-                              if (comp.componentType !== "v2-tabs-widget") {
-                                setNestedTabSelectedCompId(undefined);
-                              }
-                              onSelectPanelComponent?.("right", comp.id, comp);
-                            }}
-                          >
-                            {/* 드래그 핸들 - 컴포넌트 외부 상단 */}
-                            <div
-                              className={cn(
-                                "flex h-4 cursor-move items-center justify-between rounded-t border border-b-0 bg-gray-100 px-1",
-                                isSelectedComp ? "border-primary" : "border-gray-200"
-                              )}
-                              style={{ width: displayWidth }}
-                              onMouseDown={(e) => handlePanelDragStart(e, "right", comp)}
-                            >
-                              <div className="flex items-center gap-0.5">
-                                <Move className="h-2.5 w-2.5 text-gray-400" />
-                                <span className="max-w-[100px] truncate text-[9px] text-gray-500">
-                                  {comp.label || comp.componentType}
-                                </span>
-                              </div>
-                              <div className="flex items-center">
-                                <button
-                                  className="rounded p-0.5 hover:bg-gray-200"
-                                  onClick={(e) => {
-                                    e.stopPropagation();
-                                    onSelectPanelComponent?.("right", comp.id, comp);
-                                  }}
-                                  title="설정"
-                                >
-                                  <Settings className="h-2.5 w-2.5 text-gray-500" />
-                                </button>
-                                <button
-                                  className="rounded p-0.5 hover:bg-red-100"
-                                  onClick={(e) => {
-                                    e.stopPropagation();
-                                    handleRemovePanelComponent("right", comp.id);
-                                  }}
-                                  title="삭제"
-                                >
-                                  <Trash2 className="h-2.5 w-2.5 text-red-500" />
-                                </button>
-                              </div>
-                            </div>
-
-                            {/* 실제 컴포넌트 렌더링 - 핸들 아래에 별도 영역 */}
-                            <div 
-                              className={cn(
-                                "relative overflow-hidden rounded-b border bg-white shadow-sm",
-                                isSelectedComp
-                                  ? "border-primary ring-2 ring-primary/30"
-                                  : "border-gray-200",
-                                (isDraggingComp || isResizingComp) && "opacity-80 shadow-lg",
-                                !(isDraggingComp || isResizingComp) && "transition-all"
-                              )}
-                              style={{
-                                width: displayWidth,
-                                height: displayHeight,
-                              }}
-                            >
-                              {/* 🆕 컨테이너 컴포넌트(탭, 분할 패널)는 드롭 이벤트를 받을 수 있어야 함 */}
-                              <div className={cn(
-                                "h-full w-full",
-                                // 탭/분할 패널 같은 컨테이너 컴포넌트는 pointer-events 활성화
-                                (comp.componentType === "v2-tabs-widget" || 
-                                 comp.componentType === "tabs-widget" ||
-                                 comp.componentType === "v2-split-panel-layout" ||
-                                 comp.componentType === "split-panel-layout")
-                                  ? "" 
-                                  : "pointer-events-none"
-                              )}>
-                                <DynamicComponentRenderer
-                                  component={componentData as any}
-                                  isDesignMode={true}
-                                  formData={{}}
-                                  // 🆕 중첩된 컴포넌트 업데이트 핸들러 전달
-                                  onUpdateComponent={(updatedComp: any) => {
-                                    handleNestedComponentUpdate("right", comp.id, updatedComp);
-                                  }}
-                                  // 🆕 중첩된 탭 내부 컴포넌트 선택 핸들러 - 부모 분할 패널 정보 포함
-                                  onSelectTabComponent={(tabId: string, compId: string, tabComp: any) => {
-                                    console.log("🔍 [SplitPanel-Right] onSelectTabComponent 호출:", { tabId, compId, tabComp, parentSplitPanelId: component.id });
-                                    // 탭 내 컴포넌트 선택 상태 업데이트
-                                    setNestedTabSelectedCompId(compId);
-                                    // 부모 분할 패널 정보와 함께 전역 이벤트 발생
-                                    const event = new CustomEvent("nested-tab-component-select", {
-                                      detail: {
-                                        tabsComponentId: comp.id,
-                                        tabId,
-                                        componentId: compId,
-                                        component: tabComp,
-                                        parentSplitPanelId: component.id,
-                                        parentPanelSide: "right",
-                                      },
-                                    });
-                                    window.dispatchEvent(event);
-                                  }}
-                                  selectedTabComponentId={nestedTabSelectedCompId}
-                                />
-                              </div>
-                              
-                              {/* 리사이즈 가장자리 영역 - 선택된 컴포넌트에만 표시 */}
-                              {isSelectedComp && (
-                                <>
-                                  {/* 오른쪽 가장자리 (너비 조절) */}
-                                  <div
-                                    className="pointer-events-auto absolute right-0 top-0 z-10 h-full w-2 cursor-ew-resize hover:bg-primary/10"
-                                    onMouseDown={(e) => handlePanelResizeStart(e, "right", comp, "e")}
-                                  />
-                                  {/* 아래 가장자리 (높이 조절) */}
-                                  <div
-                                    className="pointer-events-auto absolute bottom-0 left-0 z-10 h-2 w-full cursor-ns-resize hover:bg-primary/10"
-                                    onMouseDown={(e) => handlePanelResizeStart(e, "right", comp, "s")}
-                                  />
-                                  {/* 오른쪽 아래 모서리 (너비+높이 조절) */}
-                                  <div
-                                    className="pointer-events-auto absolute bottom-0 right-0 z-20 h-3 w-3 cursor-nwse-resize hover:bg-primary/20"
-                                    onMouseDown={(e) => handlePanelResizeStart(e, "right", comp, "se")}
-                                  />
-                                </>
-                              )}
-                            </div>
-                          </div>
-                        );
-                      } else {
-                        
-                        return (
-                          <div
-                            key={comp.id}
-                            className="absolute"
-                            style={{
-                              left: comp.position?.x || 0,
-                              top: comp.position?.y || 0,
-                              width: comp.size?.width || 400,
-                              height: comp.size?.height || 300,
-                            }}
-                          >
+                        componentType: c.componentType,
+                        label: c.label,
+                        position: c.position || { x: 0, y: 0 },
+                        size: c.size || { width: 400, height: 300 },
+                        componentConfig: c.componentConfig || {},
+                        style: c.style || {},
+                        tableName: c.componentConfig?.tableName,
+                        columnName: c.componentConfig?.columnName,
+                        webType: c.componentConfig?.webType,
+                        inputType: (c as any).inputType || c.componentConfig?.inputType,
+                      })) as any;
+                      return (
+                        <ResponsiveGridRenderer
+                          components={compDataList}
+                          canvasWidth={canvasW}
+                          canvasHeight={canvasH}
+                          renderComponent={(comp) => (
                             <DynamicComponentRenderer
-                              component={componentData as any}
+                              component={comp as any}
                               isDesignMode={false}
                               isInteractive={true}
                               formData={customLeftSelectedData}
@@ -4386,19 +4243,171 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                               selectedRowsData={localSelectedRowsData}
                               onSelectedRowsChange={handleLocalSelectedRowsChange}
                             />
+                          )}
+                        />
+                      );
+                    })()
+                  ) : (
+                  <div className="relative h-full w-full" style={{ minHeight: "100%", minWidth: "100%" }}>
+                    {componentConfig.rightPanel.components.map((comp: PanelInlineComponent) => {
+                      const isSelectedComp = selectedPanelComponentId === comp.id;
+                      const isDraggingComp = draggingCompId === comp.id;
+                      const isResizingComp = resizingCompId === comp.id;
+                      
+                      const displayX = isDraggingComp && dragPosition ? dragPosition.x : (comp.position?.x || 0);
+                      const displayY = isDraggingComp && dragPosition ? dragPosition.y : (comp.position?.y || 0);
+                      const displayWidth = isResizingComp && resizeSize ? resizeSize.width : (comp.size?.width || 200);
+                      const displayHeight = isResizingComp && resizeSize ? resizeSize.height : (comp.size?.height || 100);
+                      
+                      const componentData = {
+                        id: comp.id,
+                        type: "component" as const,
+                        componentType: comp.componentType,
+                        label: comp.label,
+                        position: comp.position || { x: 0, y: 0 },
+                        size: { width: displayWidth, height: displayHeight },
+                        componentConfig: comp.componentConfig || {},
+                        style: comp.style || {},
+                        tableName: comp.componentConfig?.tableName,
+                        columnName: comp.componentConfig?.columnName,
+                        webType: comp.componentConfig?.webType,
+                        inputType: (comp as any).inputType || comp.componentConfig?.inputType,
+                      };
+
+                      return (
+                          <div
+                            key={comp.id}
+                            data-panel-comp-id={comp.id}
+                            className="absolute"
+                            style={{
+                              left: displayX,
+                              top: displayY,
+                              zIndex: isDraggingComp ? 100 : isSelectedComp ? 10 : 1,
+                            }}
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              if (comp.componentType !== "v2-tabs-widget") {
+                                setNestedTabSelectedCompId(undefined);
+                              }
+                              onSelectPanelComponent?.("right", comp.id, comp);
+                            }}
+                          >
+                            <div
+                              className={cn(
+                                "flex h-4 cursor-move items-center justify-between rounded-t border border-b-0 bg-muted px-1",
+                                isSelectedComp ? "border-primary" : "border-border"
+                              )}
+                              style={{ width: displayWidth }}
+                              onMouseDown={(e) => handlePanelDragStart(e, "right", comp)}
+                            >
+                              <div className="flex items-center gap-0.5">
+                                <Move className="h-2.5 w-2.5 text-muted-foreground/70" />
+                                <span className="max-w-[100px] truncate text-[9px] text-muted-foreground">
+                                  {comp.label || comp.componentType}
+                                </span>
+                              </div>
+                              <div className="flex items-center">
+                                <button
+                                  className="rounded p-0.5 hover:bg-muted/80"
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    onSelectPanelComponent?.("right", comp.id, comp);
+                                  }}
+                                  title="설정"
+                                >
+                                  <Settings className="h-2.5 w-2.5 text-muted-foreground" />
+                                </button>
+                                <button
+                                  className="rounded p-0.5 hover:bg-destructive/10"
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    handleRemovePanelComponent("right", comp.id);
+                                  }}
+                                  title="삭제"
+                                >
+                                  <Trash2 className="h-2.5 w-2.5 text-destructive" />
+                                </button>
+                              </div>
+                            </div>
+
+                            <div 
+                              className={cn(
+                                "relative overflow-hidden rounded-b border bg-white shadow-sm",
+                                isSelectedComp
+                                  ? "border-primary ring-2 ring-primary/30"
+                                  : "border-border",
+                                (isDraggingComp || isResizingComp) && "opacity-80 shadow-lg",
+                                !(isDraggingComp || isResizingComp) && "transition-all"
+                              )}
+                              style={{
+                                width: displayWidth,
+                                height: displayHeight,
+                              }}
+                            >
+                              <div className={cn(
+                                "h-full w-full",
+                                (comp.componentType === "v2-tabs-widget" || 
+                                 comp.componentType === "tabs-widget" ||
+                                 comp.componentType === "v2-split-panel-layout" ||
+                                 comp.componentType === "split-panel-layout")
+                                  ? "" 
+                                  : "pointer-events-none"
+                              )}>
+                                <DynamicComponentRenderer
+                                  component={componentData as any}
+                                  isDesignMode={true}
+                                  formData={{}}
+                                  onUpdateComponent={(updatedComp: any) => {
+                                    handleNestedComponentUpdate("right", comp.id, updatedComp);
+                                  }}
+                                  onSelectTabComponent={(tabId: string, compId: string, tabComp: any) => {
+                                    setNestedTabSelectedCompId(compId);
+                                    const event = new CustomEvent("nested-tab-component-select", {
+                                      detail: {
+                                        tabsComponentId: comp.id,
+                                        tabId,
+                                        componentId: compId,
+                                        component: tabComp,
+                                        parentSplitPanelId: component.id,
+                                        parentPanelSide: "right",
+                                      },
+                                    });
+                                    window.dispatchEvent(event);
+                                  }}
+                                  selectedTabComponentId={nestedTabSelectedCompId}
+                                />
+                              </div>
+                              
+                              {isSelectedComp && (
+                                <>
+                                  <div
+                                    className="pointer-events-auto absolute right-0 top-0 z-10 h-full w-2 cursor-ew-resize hover:bg-primary/10"
+                                    onMouseDown={(e) => handlePanelResizeStart(e, "right", comp, "e")}
+                                  />
+                                  <div
+                                    className="pointer-events-auto absolute bottom-0 left-0 z-10 h-2 w-full cursor-ns-resize hover:bg-primary/10"
+                                    onMouseDown={(e) => handlePanelResizeStart(e, "right", comp, "s")}
+                                  />
+                                  <div
+                                    className="pointer-events-auto absolute bottom-0 right-0 z-20 h-3 w-3 cursor-nwse-resize hover:bg-primary/20"
+                                    onMouseDown={(e) => handlePanelResizeStart(e, "right", comp, "se")}
+                                  />
+                                </>
+                              )}
+                            </div>
                           </div>
                         );
-                      }
                     })}
                   </div>
+                  )
                 ) : (
                   // 컴포넌트가 없을 때 드롭 영역 표시
-                  <div className="flex h-full w-full flex-col items-center justify-center rounded border-2 border-dashed border-gray-300 bg-gray-50/50">
-                    <Plus className="mb-2 h-8 w-8 text-gray-400" />
-                    <p className="text-sm font-medium text-gray-500">
+                  <div className="flex h-full w-full flex-col items-center justify-center rounded border-2 border-dashed border-input bg-muted/50">
+                    <Plus className="mb-2 h-8 w-8 text-muted-foreground/70" />
+                    <p className="text-sm font-medium text-muted-foreground">
                       커스텀 모드
                     </p>
-                    <p className="mt-1 text-xs text-gray-400">
+                    <p className="mt-1 text-xs text-muted-foreground/70">
                       {isDesignMode ? "컴포넌트를 드래그하여 배치하세요" : "배치된 컴포넌트가 없습니다"}
                     </p>
                   </div>
@@ -4485,10 +4494,11 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                         }));
                     }
 
+                    const tableMinWidth = columnsToShow.reduce((sum, col) => sum + (col.width || 100), 0) + 80;
                     return (
                       <div className="flex h-full w-full flex-col">
                         <div className="min-h-0 flex-1 overflow-auto">
-                          <table className="min-w-full">
+                          <table style={{ minWidth: `${tableMinWidth}px` }}>
                             <thead className="sticky top-0 z-10">
                               <tr className="border-b-2 border-border/60">
                                 {columnsToShow.map((col, idx) => (
@@ -4564,10 +4574,10 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                                   e.stopPropagation();
                                                   handleDeleteClick("right", item);
                                                 }}
-                                                className="rounded p-1 transition-colors hover:bg-red-100"
+                                                className="rounded p-1 transition-colors hover:bg-destructive/10"
                                                 title={componentConfig.rightPanel?.deleteButton?.buttonLabel || "삭제"}
                                               >
-                                                <Trash2 className="h-4 w-4 text-red-600" />
+                                                <Trash2 className="h-4 w-4 text-destructive" />
                                               </button>
                                             )}
                                           </div>
@@ -4613,10 +4623,11 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                     const hasDeleteButton = !isDesignMode && (componentConfig.rightPanel?.deleteButton?.enabled ?? true);
                     const hasActions = hasEditButton || hasDeleteButton;
 
+                    const tableMinW2 = columnsToDisplay.reduce((sum, col) => sum + (col.width || 100), 0) + 80;
                     return filteredData.length > 0 ? (
                       <div className="flex h-full w-full flex-col">
                         <div className="min-h-0 flex-1 overflow-auto">
-                          <table className="w-full text-sm">
+                          <table className="text-sm" style={{ minWidth: `${tableMinW2}px` }}>
                             <thead className="sticky top-0 z-10 bg-background">
                               <tr className="border-b-2 border-border/60">
                                 {columnsToDisplay.map((col) => (
@@ -4896,7 +4907,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                   <div key={index}>
                     <Label htmlFor={col.name} className="text-xs sm:text-sm">
                       {col.label} {col.required && <span className="text-destructive">*</span>}
-                      {isPreFilled && <span className="ml-2 text-[10px] text-blue-600">(자동 설정됨)</span>}
+                      {isPreFilled && <span className="ml-2 text-[10px] text-primary">(자동 설정됨)</span>}
                     </Label>
                     <Input
                       id={col.name}
diff --git a/frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutConfigPanel.tsx b/frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutConfigPanel.tsx
index c4c699cb..4516c197 100644
--- a/frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutConfigPanel.tsx
+++ b/frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutConfigPanel.tsx
@@ -11,7 +11,25 @@ import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, Command
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Button } from "@/components/ui/button";
 // Accordion 제거 - 단순 섹션으로 변경
-import { Check, ChevronsUpDown, ArrowRight, Plus, X, ArrowUp, ArrowDown, Trash2, Database, GripVertical, Move, Settings2, PanelLeft, PanelRight, Layers, ChevronRight, Link2 } from "lucide-react";
+import {
+  Check,
+  ChevronsUpDown,
+  ArrowRight,
+  Plus,
+  X,
+  ArrowUp,
+  ArrowDown,
+  Trash2,
+  Database,
+  GripVertical,
+  Move,
+  Settings2,
+  PanelLeft,
+  PanelRight,
+  Layers,
+  ChevronRight,
+  Link2,
+} from "lucide-react";
 import { Badge } from "@/components/ui/badge";
 import { PanelInlineComponent } from "./types";
 import { cn } from "@/lib/utils";
@@ -22,16 +40,47 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } f
 import { tableTypeApi } from "@/lib/api/screen";
 import { DataFilterConfigPanel } from "@/components/screen/config-panels/DataFilterConfigPanel";
 import { entityJoinApi } from "@/lib/api/entityJoin";
-import { DndContext, closestCenter, type DragEndEvent, KeyboardSensor, PointerSensor, useSensor, useSensors } from "@dnd-kit/core";
+import {
+  DndContext,
+  closestCenter,
+  type DragEndEvent,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
 import { SortableContext, useSortable, verticalListSortingStrategy, arrayMove } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 
 // 드래그 가능한 컬럼 아이템
 function SortableColumnRow({
-  id, col, index, isNumeric, isEntityJoin, onLabelChange, onWidthChange, onFormatChange, onRemove, onShowInSummaryChange, onShowInDetailChange, onProgressChange, availableChildColumns, availableParentColumns,
+  id,
+  col,
+  index,
+  isNumeric,
+  isEntityJoin,
+  onLabelChange,
+  onWidthChange,
+  onFormatChange,
+  onRemove,
+  onShowInSummaryChange,
+  onShowInDetailChange,
+  onProgressChange,
+  availableChildColumns,
+  availableParentColumns,
 }: {
   id: string;
-  col: { name: string; label: string; width?: number; format?: any; showInSummary?: boolean; showInDetail?: boolean; type?: string; numerator?: string; denominator?: string };
+  col: {
+    name: string;
+    label: string;
+    width?: number;
+    format?: any;
+    showInSummary?: boolean;
+    showInDetail?: boolean;
+    type?: string;
+    numerator?: string;
+    denominator?: string;
+  };
   index: number;
   isNumeric: boolean;
   isEntityJoin?: boolean;
@@ -53,29 +102,42 @@ function SortableColumnRow({
       ref={setNodeRef}
       style={style}
       className={cn(
-        "flex items-center gap-1.5 rounded-md border bg-card px-2 py-1.5",
+        "bg-card flex items-center gap-1.5 rounded-md border px-2 py-1.5",
         isDragging && "z-50 opacity-50 shadow-md",
-        isEntityJoin && "border-blue-200 bg-blue-50/30",
+        isEntityJoin && "border-primary/20 bg-primary/10/30",
         col.type === "progress" && "border-emerald-200 bg-emerald-50/30",
       )}
     >
-      <div {...attributes} {...listeners} className="text-muted-foreground hover:text-foreground cursor-grab touch-none">
+      <div
+        {...attributes}
+        {...listeners}
+        className="text-muted-foreground hover:text-foreground cursor-grab touch-none"
+      >
         <GripVertical className="h-3 w-3" />
       </div>
       {col.type === "progress" ? (
         <Popover>
           <PopoverTrigger asChild>
-            <button className="shrink-0 cursor-pointer rounded bg-emerald-100 px-1 text-[9px] font-medium text-emerald-700 hover:bg-emerald-200" title="클릭하여 설정 변경">BAR</button>
+            <button
+              className="shrink-0 cursor-pointer rounded bg-emerald-100 px-1 text-[9px] font-medium text-emerald-700 hover:bg-emerald-200"
+              title="클릭하여 설정 변경"
+            >
+              BAR
+            </button>
           </PopoverTrigger>
           <PopoverContent className="w-56 space-y-2 p-3" align="start">
             <p className="text-xs font-medium">프로그레스 설정</p>
             <div className="space-y-1">
               <Label className="text-[10px]">현재값 (자식 컬럼)</Label>
               <Select value={col.numerator || ""} onValueChange={(v) => onProgressChange?.({ numerator: v })}>
-                <SelectTrigger className="h-7 text-[10px]"><SelectValue placeholder="컬럼 선택" /></SelectTrigger>
+                <SelectTrigger className="h-7 text-[10px]">
+                  <SelectValue placeholder="컬럼 선택" />
+                </SelectTrigger>
                 <SelectContent>
                   {(availableChildColumns || []).map((c) => (
-                    <SelectItem key={c.columnName} value={c.columnName} className="text-xs">{c.columnLabel || c.columnName}</SelectItem>
+                    <SelectItem key={c.columnName} value={c.columnName} className="text-xs">
+                      {c.columnLabel || c.columnName}
+                    </SelectItem>
                   ))}
                 </SelectContent>
               </Select>
@@ -83,10 +145,14 @@ function SortableColumnRow({
             <div className="space-y-1">
               <Label className="text-[10px]">최대값 (부모 컬럼)</Label>
               <Select value={col.denominator || ""} onValueChange={(v) => onProgressChange?.({ denominator: v })}>
-                <SelectTrigger className="h-7 text-[10px]"><SelectValue placeholder="컬럼 선택" /></SelectTrigger>
+                <SelectTrigger className="h-7 text-[10px]">
+                  <SelectValue placeholder="컬럼 선택" />
+                </SelectTrigger>
                 <SelectContent>
                   {(availableParentColumns || []).map((c) => (
-                    <SelectItem key={c.columnName} value={c.columnName} className="text-xs">{c.columnLabel || c.columnName}</SelectItem>
+                    <SelectItem key={c.columnName} value={c.columnName} className="text-xs">
+                      {c.columnLabel || c.columnName}
+                    </SelectItem>
                   ))}
                 </SelectContent>
               </Select>
@@ -94,7 +160,7 @@ function SortableColumnRow({
           </PopoverContent>
         </Popover>
       ) : isEntityJoin ? (
-        <Link2 className="h-3 w-3 shrink-0 text-blue-500" title="Entity 조인 컬럼" />
+        <Link2 className="text-primary h-3 w-3 shrink-0" title="Entity 조인 컬럼" />
       ) : (
         <span className="text-muted-foreground w-5 shrink-0 text-center text-[10px] font-medium">#{index + 1}</span>
       )}
@@ -134,7 +200,10 @@ function SortableColumnRow({
         </label>
       )}
       {onShowInDetailChange && (
-        <label className="flex shrink-0 cursor-pointer items-center gap-0.5 text-[10px]" title="행 클릭 시 상세 정보에 표시">
+        <label
+          className="flex shrink-0 cursor-pointer items-center gap-0.5 text-[10px]"
+          title="행 클릭 시 상세 정보에 표시"
+        >
           <input
             type="checkbox"
             checked={col.showInDetail !== false}
@@ -144,7 +213,13 @@ function SortableColumnRow({
           상세
         </label>
       )}
-      <Button type="button" variant="ghost" size="sm" onClick={onRemove} className="text-muted-foreground hover:text-destructive h-5 w-5 shrink-0 p-0">
+      <Button
+        type="button"
+        variant="ghost"
+        size="sm"
+        onClick={onRemove}
+        className="text-muted-foreground hover:text-destructive h-5 w-5 shrink-0 p-0"
+      >
         <X className="h-3 w-3" />
       </Button>
     </div>
@@ -338,10 +413,31 @@ interface AdditionalTabConfigPanelProps {
   loadTableColumns: (tableName: string) => Promise<void>;
   loadingColumns: Record<string, boolean>;
   // Entity 조인 컬럼 (테이블별)
-  entityJoinColumns?: Record<string, {
-    availableColumns: Array<{ tableName: string; columnName: string; columnLabel: string; dataType: string; joinAlias: string; suggestedLabel: string }>;
-    joinTables: Array<{ tableName: string; currentDisplayColumn: string; joinConfig?: any; availableColumns: Array<{ columnName: string; columnLabel: string; dataType: string; inputType?: string; description?: string }> }>;
-  }>;
+  entityJoinColumns?: Record<
+    string,
+    {
+      availableColumns: Array<{
+        tableName: string;
+        columnName: string;
+        columnLabel: string;
+        dataType: string;
+        joinAlias: string;
+        suggestedLabel: string;
+      }>;
+      joinTables: Array<{
+        tableName: string;
+        currentDisplayColumn: string;
+        joinConfig?: any;
+        availableColumns: Array<{
+          columnName: string;
+          columnLabel: string;
+          dataType: string;
+          inputType?: string;
+          description?: string;
+        }>;
+      }>;
+    }
+  >;
 }
 
 const AdditionalTabConfigPanel: React.FC<AdditionalTabConfigPanelProps> = ({
@@ -385,487 +481,558 @@ const AdditionalTabConfigPanel: React.FC<AdditionalTabConfigPanelProps> = ({
   };
 
   return (
-    <AccordionItem
-      key={tab.tabId}
-      value={tab.tabId}
-      className="rounded-lg border bg-card"
-    >
+    <AccordionItem key={tab.tabId} value={tab.tabId} className="bg-card rounded-lg border">
       <AccordionTrigger className="px-3 py-2 hover:no-underline">
         <div className="flex flex-1 items-center gap-2">
-          <GripVertical className="h-4 w-4 text-gray-400" />
-          <span className="text-sm font-medium">
-            {tab.label || `탭 ${tabIndex + 1}`}
-          </span>
-          {tab.tableName && (
-            <span className="text-xs text-gray-500">({tab.tableName})</span>
-          )}
+          <GripVertical className="text-muted-foreground/70 h-4 w-4" />
+          <span className="text-sm font-medium">{tab.label || `탭 ${tabIndex + 1}`}</span>
+          {tab.tableName && <span className="text-muted-foreground text-xs">({tab.tableName})</span>}
         </div>
       </AccordionTrigger>
       <AccordionContent className="space-y-4 px-3 pb-3">
+        {/* ===== 1. 기본 정보 ===== */}
+        <div className="border-border/50 bg-muted/40 space-y-3 rounded-lg border p-3">
+          <h3 className="border-l-primary/40 border-l-2 pl-2 text-xs font-semibold">기본 정보</h3>
+          <div className="grid grid-cols-2 gap-3">
+            <div className="space-y-1">
+              <Label className="text-xs">탭 라벨</Label>
+              <Input
+                value={tab.label}
+                onChange={(e) => updateTab({ label: e.target.value })}
+                placeholder="탭 이름"
+                className="h-8 text-xs"
+              />
+            </div>
+            <div className="space-y-1">
+              <Label className="text-xs">패널 제목</Label>
+              <Input
+                value={tab.title}
+                onChange={(e) => updateTab({ title: e.target.value })}
+                placeholder="패널 제목"
+                className="h-8 text-xs"
+              />
+            </div>
+          </div>
+        </div>
 
-          {/* ===== 1. 기본 정보 ===== */}
-          <div className="space-y-3 rounded-lg border border-border/50 bg-muted/40 p-3">
-            <h3 className="border-l-2 border-l-primary/40 pl-2 text-xs font-semibold">기본 정보</h3>
-            <div className="grid grid-cols-2 gap-3">
-              <div className="space-y-1">
-                <Label className="text-xs">탭 라벨</Label>
+        {/* ===== 2. 테이블 선택 ===== */}
+        <div className="border-border/50 bg-muted/40 space-y-3 rounded-lg border p-3">
+          <h3 className="border-l-primary/40 border-l-2 pl-2 text-xs font-semibold">테이블 설정</h3>
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button variant="outline" role="combobox" className="h-8 w-full justify-between text-xs">
+                {tab.tableName || "테이블을 선택하세요"}
+                <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-full p-0">
+              <Command>
+                <CommandInput placeholder="테이블 검색..." className="text-xs" />
+                <CommandEmpty>테이블을 찾을 수 없습니다.</CommandEmpty>
+                <CommandGroup className="max-h-[200px] overflow-auto">
+                  {availableRightTables.map((table) => (
+                    <CommandItem
+                      key={table.tableName}
+                      value={`${table.displayName || ""} ${table.tableName}`}
+                      onSelect={() => updateTab({ tableName: table.tableName, columns: [] })}
+                    >
+                      <Check
+                        className={cn("mr-2 h-4 w-4", tab.tableName === table.tableName ? "opacity-100" : "opacity-0")}
+                      />
+                      {table.displayName || table.tableName}
+                      {table.displayName && (
+                        <span className="text-muted-foreground ml-2 text-xs">({table.tableName})</span>
+                      )}
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              </Command>
+            </PopoverContent>
+          </Popover>
+        </div>
+
+        {/* ===== 3. 표시 모드 + 요약 설정 ===== */}
+        <div className="border-border/50 bg-muted/40 space-y-3 rounded-lg border p-3">
+          <h3 className="border-l-primary/40 border-l-2 pl-2 text-xs font-semibold">표시 설정</h3>
+          <div className="space-y-2">
+            <Label className="text-xs">표시 모드</Label>
+            <Select
+              value={tab.displayMode || "list"}
+              onValueChange={(value: "list" | "table") => updateTab({ displayMode: value })}
+            >
+              <SelectTrigger className="h-8 bg-white text-xs">
+                <SelectValue>{(tab.displayMode || "list") === "list" ? "목록 (LIST)" : "테이블 (TABLE)"}</SelectValue>
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="list">
+                  <div className="flex flex-col py-1">
+                    <span className="text-sm font-medium">목록 (LIST)</span>
+                    <span className="text-muted-foreground text-xs">클릭 가능한 항목 목록 (기본)</span>
+                  </div>
+                </SelectItem>
+                <SelectItem value="table">
+                  <div className="flex flex-col py-1">
+                    <span className="text-sm font-medium">테이블 (TABLE)</span>
+                    <span className="text-muted-foreground text-xs">컬럼 헤더가 있는 테이블 형식</span>
+                  </div>
+                </SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          {/* 요약 설정 (목록 모드) */}
+          {(tab.displayMode || "list") === "list" && (
+            <div className="border-border bg-muted space-y-3 rounded-lg border p-3">
+              <Label className="text-sm font-semibold">요약 표시 설정</Label>
+              <div className="space-y-2">
+                <Label className="text-xs">표시할 컬럼 개수</Label>
                 <Input
-                  value={tab.label}
-                  onChange={(e) => updateTab({ label: e.target.value })}
-                  placeholder="탭 이름"
-                  className="h-8 text-xs"
+                  type="number"
+                  min="1"
+                  max="10"
+                  value={tab.summaryColumnCount ?? 3}
+                  onChange={(e) => updateTab({ summaryColumnCount: parseInt(e.target.value) || 3 })}
+                  className="bg-white"
                 />
+                <p className="text-muted-foreground text-xs">접기 전에 표시할 컬럼 개수 (기본: 3개)</p>
               </div>
-              <div className="space-y-1">
-                <Label className="text-xs">패널 제목</Label>
-                <Input
-                  value={tab.title}
-                  onChange={(e) => updateTab({ title: e.target.value })}
-                  placeholder="패널 제목"
-                  className="h-8 text-xs"
+              <div className="flex items-center justify-between space-x-2">
+                <div className="flex-1">
+                  <Label className="text-xs">라벨 표시</Label>
+                  <p className="text-muted-foreground text-xs">컬럼명 표시 여부</p>
+                </div>
+                <Checkbox
+                  checked={tab.summaryShowLabel ?? true}
+                  onCheckedChange={(checked) => updateTab({ summaryShowLabel: checked as boolean })}
                 />
               </div>
             </div>
-          </div>
+          )}
+        </div>
 
-          {/* ===== 2. 테이블 선택 ===== */}
-          <div className="space-y-3 rounded-lg border border-border/50 bg-muted/40 p-3">
-            <h3 className="border-l-2 border-l-primary/40 pl-2 text-xs font-semibold">테이블 설정</h3>
-            <Popover>
-              <PopoverTrigger asChild>
-                <Button
-                  variant="outline"
-                  role="combobox"
-                  className="h-8 w-full justify-between text-xs"
-                >
-                  {tab.tableName || "테이블을 선택하세요"}
-                  <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
-                </Button>
-              </PopoverTrigger>
-              <PopoverContent className="w-full p-0">
-                <Command>
-                  <CommandInput placeholder="테이블 검색..." className="text-xs" />
-                  <CommandEmpty>테이블을 찾을 수 없습니다.</CommandEmpty>
-                  <CommandGroup className="max-h-[200px] overflow-auto">
-                    {availableRightTables.map((table) => (
-                      <CommandItem
-                        key={table.tableName}
-                        value={`${table.displayName || ""} ${table.tableName}`}
-                        onSelect={() => updateTab({ tableName: table.tableName, columns: [] })}
-                      >
-                        <Check
-                          className={cn(
-                            "mr-2 h-4 w-4",
-                            tab.tableName === table.tableName ? "opacity-100" : "opacity-0"
-                          )}
-                        />
-                        {table.displayName || table.tableName}
-                        {table.displayName && <span className="ml-2 text-xs text-gray-500">({table.tableName})</span>}
-                      </CommandItem>
-                    ))}
-                  </CommandGroup>
-                </Command>
-              </PopoverContent>
-            </Popover>
-          </div>
-
-          {/* ===== 3. 표시 모드 + 요약 설정 ===== */}
-          <div className="space-y-3 rounded-lg border border-border/50 bg-muted/40 p-3">
-            <h3 className="border-l-2 border-l-primary/40 pl-2 text-xs font-semibold">표시 설정</h3>
-            <div className="space-y-2">
-              <Label className="text-xs">표시 모드</Label>
+        {/* ===== 4. 컬럼 매핑 (연결 키) ===== */}
+        <div className="border-border/50 bg-muted/40 space-y-3 rounded-lg border p-3">
+          <h3 className="border-l-primary/40 border-l-2 pl-2 text-xs font-semibold">컬럼 매핑 (연결 키)</h3>
+          <p className="text-muted-foreground text-[10px]">좌측 패널 선택 시 관련 데이터만 표시합니다</p>
+          <div className="grid grid-cols-2 gap-2">
+            <div className="space-y-1">
+              <Label className="text-[10px]">좌측 컬럼</Label>
               <Select
-                value={tab.displayMode || "list"}
-                onValueChange={(value: "list" | "table") => updateTab({ displayMode: value })}
+                value={tab.relation?.keys?.[0]?.leftColumn || tab.relation?.leftColumn || "__none__"}
+                onValueChange={(value) => {
+                  if (value === "__none__") {
+                    updateTab({ relation: undefined });
+                  } else {
+                    updateTab({
+                      relation: {
+                        ...tab.relation,
+                        type: "join",
+                        keys: [{ leftColumn: value, rightColumn: tab.relation?.keys?.[0]?.rightColumn || "" }],
+                      },
+                    });
+                  }
+                }}
               >
-                <SelectTrigger className="h-8 bg-white text-xs">
-                  <SelectValue>
-                    {(tab.displayMode || "list") === "list" ? "목록 (LIST)" : "테이블 (TABLE)"}
-                  </SelectValue>
+                <SelectTrigger className="h-8 text-xs">
+                  <SelectValue placeholder="선택" />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="list">
-                    <div className="flex flex-col py-1">
-                      <span className="text-sm font-medium">목록 (LIST)</span>
-                      <span className="text-xs text-gray-500">클릭 가능한 항목 목록 (기본)</span>
-                    </div>
-                  </SelectItem>
-                  <SelectItem value="table">
-                    <div className="flex flex-col py-1">
-                      <span className="text-sm font-medium">테이블 (TABLE)</span>
-                      <span className="text-xs text-gray-500">컬럼 헤더가 있는 테이블 형식</span>
-                    </div>
+                  <SelectItem value="__none__">
+                    <span className="text-muted-foreground">선택 안 함 (전체 데이터)</span>
                   </SelectItem>
+                  {leftTableColumns.map((col) => (
+                    <SelectItem key={col.columnName} value={col.columnName}>
+                      {col.columnLabel || col.columnName}
+                    </SelectItem>
+                  ))}
                 </SelectContent>
               </Select>
             </div>
-
-            {/* 요약 설정 (목록 모드) */}
-            {(tab.displayMode || "list") === "list" && (
-              <div className="space-y-3 rounded-lg border border-gray-200 bg-gray-50 p-3">
-                <Label className="text-sm font-semibold">요약 표시 설정</Label>
-                <div className="space-y-2">
-                  <Label className="text-xs">표시할 컬럼 개수</Label>
-                  <Input
-                    type="number" min="1" max="10"
-                    value={tab.summaryColumnCount ?? 3}
-                    onChange={(e) => updateTab({ summaryColumnCount: parseInt(e.target.value) || 3 })}
-                    className="bg-white"
-                  />
-                  <p className="text-xs text-gray-500">접기 전에 표시할 컬럼 개수 (기본: 3개)</p>
-                </div>
-                <div className="flex items-center justify-between space-x-2">
-                  <div className="flex-1">
-                    <Label className="text-xs">라벨 표시</Label>
-                    <p className="text-xs text-gray-500">컬럼명 표시 여부</p>
-                  </div>
-                  <Checkbox
-                    checked={tab.summaryShowLabel ?? true}
-                    onCheckedChange={(checked) => updateTab({ summaryShowLabel: checked as boolean })}
-                  />
-                </div>
-              </div>
-            )}
-          </div>
-
-          {/* ===== 4. 컬럼 매핑 (연결 키) ===== */}
-          <div className="space-y-3 rounded-lg border border-border/50 bg-muted/40 p-3">
-            <h3 className="border-l-2 border-l-primary/40 pl-2 text-xs font-semibold">컬럼 매핑 (연결 키)</h3>
-            <p className="text-muted-foreground text-[10px]">좌측 패널 선택 시 관련 데이터만 표시합니다</p>
-            <div className="grid grid-cols-2 gap-2">
-              <div className="space-y-1">
-                <Label className="text-[10px]">좌측 컬럼</Label>
-                <Select
-                  value={tab.relation?.keys?.[0]?.leftColumn || tab.relation?.leftColumn || "__none__"}
-                  onValueChange={(value) => {
-                    if (value === "__none__") {
-                      updateTab({ relation: undefined });
-                    } else {
-                      updateTab({
-                        relation: {
-                          ...tab.relation,
-                          type: "join",
-                          keys: [{ leftColumn: value, rightColumn: tab.relation?.keys?.[0]?.rightColumn || "" }],
-                        },
-                      });
-                    }
-                  }}
-                >
-                  <SelectTrigger className="h-8 text-xs">
-                    <SelectValue placeholder="선택" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="__none__"><span className="text-muted-foreground">선택 안 함 (전체 데이터)</span></SelectItem>
-                    {leftTableColumns.map((col) => (
-                      <SelectItem key={col.columnName} value={col.columnName}>{col.columnLabel || col.columnName}</SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
-              <div className="space-y-1">
-                <Label className="text-[10px]">우측 컬럼</Label>
-                <Select
-                  value={tab.relation?.keys?.[0]?.rightColumn || tab.relation?.foreignKey || "__none__"}
-                  onValueChange={(value) => {
-                    if (value === "__none__") {
-                      updateTab({ relation: undefined });
-                    } else {
-                      updateTab({
-                        relation: {
-                          ...tab.relation,
-                          type: "join",
-                          keys: [{ leftColumn: tab.relation?.keys?.[0]?.leftColumn || "", rightColumn: value }],
-                        },
-                      });
-                    }
-                  }}
-                >
-                  <SelectTrigger className="h-8 text-xs">
-                    <SelectValue placeholder="선택" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="__none__"><span className="text-muted-foreground">선택 안 함 (전체 데이터)</span></SelectItem>
-                    {tabColumns.map((col) => (
-                      <SelectItem key={col.columnName} value={col.columnName}>{col.columnLabel || col.columnName}</SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
+            <div className="space-y-1">
+              <Label className="text-[10px]">우측 컬럼</Label>
+              <Select
+                value={tab.relation?.keys?.[0]?.rightColumn || tab.relation?.foreignKey || "__none__"}
+                onValueChange={(value) => {
+                  if (value === "__none__") {
+                    updateTab({ relation: undefined });
+                  } else {
+                    updateTab({
+                      relation: {
+                        ...tab.relation,
+                        type: "join",
+                        keys: [{ leftColumn: tab.relation?.keys?.[0]?.leftColumn || "", rightColumn: value }],
+                      },
+                    });
+                  }
+                }}
+              >
+                <SelectTrigger className="h-8 text-xs">
+                  <SelectValue placeholder="선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">
+                    <span className="text-muted-foreground">선택 안 함 (전체 데이터)</span>
+                  </SelectItem>
+                  {tabColumns.map((col) => (
+                    <SelectItem key={col.columnName} value={col.columnName}>
+                      {col.columnLabel || col.columnName}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
             </div>
           </div>
+        </div>
 
-          {/* ===== 5. 기능 버튼 ===== */}
-          <div className="space-y-3 rounded-lg border border-border/50 bg-muted/40 p-3">
-            <h3 className="border-l-2 border-l-primary/40 pl-2 text-xs font-semibold">기능 버튼</h3>
-            <div className="grid grid-cols-4 gap-2">
-              <div className="flex items-center gap-1">
-                <Checkbox id={`tab-${tabIndex}-search`} checked={tab.showSearch} onCheckedChange={(checked) => updateTab({ showSearch: !!checked })} />
-                <label htmlFor={`tab-${tabIndex}-search`} className="text-xs">검색</label>
-              </div>
-              <div className="flex items-center gap-1">
-                <Checkbox id={`tab-${tabIndex}-add`} checked={tab.showAdd} onCheckedChange={(checked) => updateTab({ showAdd: !!checked })} />
-                <label htmlFor={`tab-${tabIndex}-add`} className="text-xs">추가</label>
-              </div>
-              <div className="flex items-center gap-1">
-                <Checkbox id={`tab-${tabIndex}-edit`} checked={tab.showEdit} onCheckedChange={(checked) => updateTab({ showEdit: !!checked })} />
-                <label htmlFor={`tab-${tabIndex}-edit`} className="text-xs">수정</label>
-              </div>
-              <div className="flex items-center gap-1">
-                <Checkbox id={`tab-${tabIndex}-delete`} checked={tab.showDelete} onCheckedChange={(checked) => updateTab({ showDelete: !!checked })} />
-                <label htmlFor={`tab-${tabIndex}-delete`} className="text-xs">삭제</label>
-              </div>
+        {/* ===== 5. 기능 버튼 ===== */}
+        <div className="border-border/50 bg-muted/40 space-y-3 rounded-lg border p-3">
+          <h3 className="border-l-primary/40 border-l-2 pl-2 text-xs font-semibold">기능 버튼</h3>
+          <div className="grid grid-cols-4 gap-2">
+            <div className="flex items-center gap-1">
+              <Checkbox
+                id={`tab-${tabIndex}-search`}
+                checked={tab.showSearch}
+                onCheckedChange={(checked) => updateTab({ showSearch: !!checked })}
+              />
+              <label htmlFor={`tab-${tabIndex}-search`} className="text-xs">
+                검색
+              </label>
+            </div>
+            <div className="flex items-center gap-1">
+              <Checkbox
+                id={`tab-${tabIndex}-add`}
+                checked={tab.showAdd}
+                onCheckedChange={(checked) => updateTab({ showAdd: !!checked })}
+              />
+              <label htmlFor={`tab-${tabIndex}-add`} className="text-xs">
+                추가
+              </label>
+            </div>
+            <div className="flex items-center gap-1">
+              <Checkbox
+                id={`tab-${tabIndex}-edit`}
+                checked={tab.showEdit}
+                onCheckedChange={(checked) => updateTab({ showEdit: !!checked })}
+              />
+              <label htmlFor={`tab-${tabIndex}-edit`} className="text-xs">
+                수정
+              </label>
+            </div>
+            <div className="flex items-center gap-1">
+              <Checkbox
+                id={`tab-${tabIndex}-delete`}
+                checked={tab.showDelete}
+                onCheckedChange={(checked) => updateTab({ showDelete: !!checked })}
+              />
+              <label htmlFor={`tab-${tabIndex}-delete`} className="text-xs">
+                삭제
+              </label>
             </div>
           </div>
+        </div>
 
-          {/* ===== 6. 표시할 컬럼 - DnD + Entity 조인 통합 ===== */}
-          {(() => {
-            const selectedColumns = tab.columns || [];
-            const filteredTabCols = tabColumns.filter((c) => !["company_code", "company_name"].includes(c.columnName));
-            const unselectedCols = filteredTabCols.filter((c) => !selectedColumns.some((sc) => sc.name === c.columnName));
-            const dbNumericTypes = ["numeric", "decimal", "integer", "bigint", "double precision", "real", "smallint", "int4", "int8", "float4", "float8"];
-            const inputNumericTypes = ["number", "decimal", "currency", "integer"];
+        {/* ===== 6. 표시할 컬럼 - DnD + Entity 조인 통합 ===== */}
+        {(() => {
+          const selectedColumns = tab.columns || [];
+          const filteredTabCols = tabColumns.filter((c) => !["company_code", "company_name"].includes(c.columnName));
+          const unselectedCols = filteredTabCols.filter((c) => !selectedColumns.some((sc) => sc.name === c.columnName));
+          const dbNumericTypes = [
+            "numeric",
+            "decimal",
+            "integer",
+            "bigint",
+            "double precision",
+            "real",
+            "smallint",
+            "int4",
+            "int8",
+            "float4",
+            "float8",
+          ];
+          const inputNumericTypes = ["number", "decimal", "currency", "integer"];
 
-            const handleTabDragEnd = (event: DragEndEvent) => {
-              const { active, over } = event;
-              if (over && active.id !== over.id) {
-                const oldIndex = selectedColumns.findIndex((c) => c.name === active.id);
-                const newIndex = selectedColumns.findIndex((c) => c.name === over.id);
-                if (oldIndex !== -1 && newIndex !== -1) {
-                  updateTab({ columns: arrayMove([...selectedColumns], oldIndex, newIndex) });
-                }
+          const handleTabDragEnd = (event: DragEndEvent) => {
+            const { active, over } = event;
+            if (over && active.id !== over.id) {
+              const oldIndex = selectedColumns.findIndex((c) => c.name === active.id);
+              const newIndex = selectedColumns.findIndex((c) => c.name === over.id);
+              if (oldIndex !== -1 && newIndex !== -1) {
+                updateTab({ columns: arrayMove([...selectedColumns], oldIndex, newIndex) });
               }
-            };
+            }
+          };
 
-            return (
-              <div className="space-y-3 rounded-lg border border-border/50 bg-muted/40 p-3">
-                <h3 className="border-l-2 border-l-primary/40 pl-2 text-xs font-semibold">표시할 컬럼 ({selectedColumns.length}개 선택)</h3>
-                <div className="max-h-[400px] overflow-y-auto rounded-md border bg-white p-2">
-                  {!tab.tableName ? (
-                    <p className="text-muted-foreground py-2 text-center text-xs">테이블을 선택해주세요</p>
-                  ) : loadingTabColumns ? (
-                    <p className="text-muted-foreground py-2 text-center text-xs">컬럼을 불러오는 중...</p>
-                  ) : (
-                    <>
-                      {selectedColumns.length > 0 && (
-                        <DndContext collisionDetection={closestCenter} onDragEnd={handleTabDragEnd}>
-                          <SortableContext items={selectedColumns.map((c) => c.name)} strategy={verticalListSortingStrategy}>
-                            <div className="space-y-1">
-                              {selectedColumns.map((col, index) => {
-                                const colInfo = tabColumns.find((c) => c.columnName === col.name);
-                                const isNumeric = colInfo && (
-                                  dbNumericTypes.includes(colInfo.dataType?.toLowerCase() || "") ||
+          return (
+            <div className="border-border/50 bg-muted/40 space-y-3 rounded-lg border p-3">
+              <h3 className="border-l-primary/40 border-l-2 pl-2 text-xs font-semibold">
+                표시할 컬럼 ({selectedColumns.length}개 선택)
+              </h3>
+              <div className="max-h-[400px] overflow-y-auto rounded-md border bg-white p-2">
+                {!tab.tableName ? (
+                  <p className="text-muted-foreground py-2 text-center text-xs">테이블을 선택해주세요</p>
+                ) : loadingTabColumns ? (
+                  <p className="text-muted-foreground py-2 text-center text-xs">컬럼을 불러오는 중...</p>
+                ) : (
+                  <>
+                    {selectedColumns.length > 0 && (
+                      <DndContext collisionDetection={closestCenter} onDragEnd={handleTabDragEnd}>
+                        <SortableContext
+                          items={selectedColumns.map((c) => c.name)}
+                          strategy={verticalListSortingStrategy}
+                        >
+                          <div className="space-y-1">
+                            {selectedColumns.map((col, index) => {
+                              const colInfo = tabColumns.find((c) => c.columnName === col.name);
+                              const isNumeric =
+                                colInfo &&
+                                (dbNumericTypes.includes(colInfo.dataType?.toLowerCase() || "") ||
                                   inputNumericTypes.includes(colInfo.input_type?.toLowerCase() || "") ||
-                                  inputNumericTypes.includes(colInfo.webType?.toLowerCase() || "")
-                                );
-                                return (
-                                  <SortableColumnRow
-                                    key={col.name}
-                                    id={col.name}
-                                    col={col}
-                                    index={index}
-                                    isNumeric={!!isNumeric}
-                                    isEntityJoin={!!(col as any).isEntityJoin}
-                                    onLabelChange={(value) => {
-                                      const newColumns = [...selectedColumns];
-                                      newColumns[index] = { ...newColumns[index], label: value };
-                                      updateTab({ columns: newColumns });
-                                    }}
-                                    onWidthChange={(value) => {
-                                      const newColumns = [...selectedColumns];
-                                      newColumns[index] = { ...newColumns[index], width: value };
-                                      updateTab({ columns: newColumns });
-                                    }}
-                                    onFormatChange={(checked) => {
-                                      const newColumns = [...selectedColumns];
-                                      newColumns[index] = { ...newColumns[index], format: { ...newColumns[index].format, type: "number", thousandSeparator: checked } };
-                                      updateTab({ columns: newColumns });
-                                    }}
-                                    onRemove={() => updateTab({ columns: selectedColumns.filter((_, i) => i !== index) })}
-                                    onShowInSummaryChange={(checked) => {
-                                      const newColumns = [...selectedColumns];
-                                      newColumns[index] = { ...newColumns[index], showInSummary: checked };
-                                      updateTab({ columns: newColumns });
-                                    }}
-                                    onShowInDetailChange={(checked) => {
-                                      const newColumns = [...selectedColumns];
-                                      newColumns[index] = { ...newColumns[index], showInDetail: checked };
-                                      updateTab({ columns: newColumns });
-                                    }}
-                                    onProgressChange={(updates) => {
-                                      const newColumns = [...selectedColumns];
-                                      newColumns[index] = { ...newColumns[index], ...updates };
-                                      updateTab({ columns: newColumns });
-                                    }}
-                                    availableChildColumns={tabColumns.map((c) => ({ columnName: c.columnName, columnLabel: c.columnLabel || c.columnName }))}
-                                    availableParentColumns={leftTableColumns.map((c) => ({ columnName: c.columnName, columnLabel: c.columnLabel || c.columnName }))}
-                                  />
-                                );
-                              })}
-                            </div>
-                          </SortableContext>
-                        </DndContext>
-                      )}
-
-                      {selectedColumns.length > 0 && unselectedCols.length > 0 && (
-                        <div className="border-border/60 my-2 flex items-center gap-2 border-t pt-2">
-                          <span className="text-muted-foreground text-[10px]">미선택 컬럼</span>
-                        </div>
-                      )}
-
-                      <div className="space-y-0.5">
-                        {unselectedCols.map((column) => (
-                          <div
-                            key={column.columnName}
-                            className="hover:bg-muted/50 flex cursor-pointer items-center gap-2 rounded px-2 py-1.5"
-                            onClick={() => {
-                              updateTab({ columns: [...selectedColumns, { name: column.columnName, label: column.columnLabel || column.columnName, width: 100 }] });
-                            }}
-                          >
-                            <Checkbox checked={false} className="pointer-events-none h-3.5 w-3.5 shrink-0" />
-                            <span className="text-muted-foreground truncate text-xs">{column.columnLabel || column.columnName}</span>
-                          </div>
-                        ))}
-                      </div>
-
-                      {/* 프로그레스 컬럼 추가 */}
-                      {tab.tableName && (
-                        <div className="border-border/60 my-2 border-t pt-2">
-                          <details className="group">
-                            <summary className="flex cursor-pointer list-none items-center gap-2 select-none">
-                              <ChevronRight className="h-3 w-3 shrink-0 text-emerald-500 transition-transform group-open:rotate-90" />
-                              <span className="text-[10px] font-medium text-emerald-600">프로그레스 컬럼 추가</span>
-                            </summary>
-                            <div className="mt-2 space-y-2 rounded-md border border-emerald-200 bg-emerald-50/50 p-2">
-                              <div className="space-y-1">
-                                <Label className="text-[10px]">라벨</Label>
-                                <Input
-                                  id={`tab-${tabIndex}-progress-label`}
-                                  placeholder="예: 샷수 현황"
-                                  className="h-7 text-xs"
-                                  defaultValue=""
+                                  inputNumericTypes.includes(colInfo.webType?.toLowerCase() || ""));
+                              return (
+                                <SortableColumnRow
+                                  key={col.name}
+                                  id={col.name}
+                                  col={col}
+                                  index={index}
+                                  isNumeric={!!isNumeric}
+                                  isEntityJoin={!!(col as any).isEntityJoin}
+                                  onLabelChange={(value) => {
+                                    const newColumns = [...selectedColumns];
+                                    newColumns[index] = { ...newColumns[index], label: value };
+                                    updateTab({ columns: newColumns });
+                                  }}
+                                  onWidthChange={(value) => {
+                                    const newColumns = [...selectedColumns];
+                                    newColumns[index] = { ...newColumns[index], width: value };
+                                    updateTab({ columns: newColumns });
+                                  }}
+                                  onFormatChange={(checked) => {
+                                    const newColumns = [...selectedColumns];
+                                    newColumns[index] = {
+                                      ...newColumns[index],
+                                      format: {
+                                        ...newColumns[index].format,
+                                        type: "number",
+                                        thousandSeparator: checked,
+                                      },
+                                    };
+                                    updateTab({ columns: newColumns });
+                                  }}
+                                  onRemove={() => updateTab({ columns: selectedColumns.filter((_, i) => i !== index) })}
+                                  onShowInSummaryChange={(checked) => {
+                                    const newColumns = [...selectedColumns];
+                                    newColumns[index] = { ...newColumns[index], showInSummary: checked };
+                                    updateTab({ columns: newColumns });
+                                  }}
+                                  onShowInDetailChange={(checked) => {
+                                    const newColumns = [...selectedColumns];
+                                    newColumns[index] = { ...newColumns[index], showInDetail: checked };
+                                    updateTab({ columns: newColumns });
+                                  }}
+                                  onProgressChange={(updates) => {
+                                    const newColumns = [...selectedColumns];
+                                    newColumns[index] = { ...newColumns[index], ...updates };
+                                    updateTab({ columns: newColumns });
+                                  }}
+                                  availableChildColumns={tabColumns.map((c) => ({
+                                    columnName: c.columnName,
+                                    columnLabel: c.columnLabel || c.columnName,
+                                  }))}
+                                  availableParentColumns={leftTableColumns.map((c) => ({
+                                    columnName: c.columnName,
+                                    columnLabel: c.columnLabel || c.columnName,
+                                  }))}
                                 />
-                              </div>
-                              <div className="grid grid-cols-2 gap-2">
-                                <div className="space-y-1">
-                                  <Label className="text-[10px]">현재값 (자식 컬럼)</Label>
-                                  <Select
-                                    onValueChange={(v) => {
-                                      const el = document.getElementById(`tab-${tabIndex}-progress-numerator`) as HTMLInputElement;
-                                      if (el) el.value = v;
-                                    }}
-                                  >
-                                    <SelectTrigger className="h-7 text-[10px]">
-                                      <SelectValue placeholder="컬럼 선택" />
-                                    </SelectTrigger>
-                                    <SelectContent>
-                                      {tabColumns.map((col) => (
-                                        <SelectItem key={col.columnName} value={col.columnName} className="text-xs">
-                                          {col.columnLabel || col.columnName}
-                                        </SelectItem>
-                                      ))}
-                                    </SelectContent>
-                                  </Select>
-                                  <input type="hidden" id={`tab-${tabIndex}-progress-numerator`} />
-                                </div>
-                                <div className="space-y-1">
-                                  <Label className="text-[10px]">최대값 (부모 컬럼)</Label>
-                                  <Select
-                                    onValueChange={(v) => {
-                                      const el = document.getElementById(`tab-${tabIndex}-progress-denominator`) as HTMLInputElement;
-                                      if (el) el.value = v;
-                                    }}
-                                  >
-                                    <SelectTrigger className="h-7 text-[10px]">
-                                      <SelectValue placeholder="컬럼 선택" />
-                                    </SelectTrigger>
-                                    <SelectContent>
-                                      {leftTableColumns.map((col) => (
-                                        <SelectItem key={col.columnName} value={col.columnName} className="text-xs">
-                                          {col.columnLabel || col.columnName}
-                                        </SelectItem>
-                                      ))}
-                                    </SelectContent>
-                                  </Select>
-                                  <input type="hidden" id={`tab-${tabIndex}-progress-denominator`} />
-                                </div>
-                              </div>
-                              <Button
-                                type="button"
-                                variant="outline"
-                                size="sm"
-                                className="h-7 w-full text-xs text-emerald-700 border-emerald-300 hover:bg-emerald-100"
-                                onClick={() => {
-                                  const labelEl = document.getElementById(`tab-${tabIndex}-progress-label`) as HTMLInputElement;
-                                  const numEl = document.getElementById(`tab-${tabIndex}-progress-numerator`) as HTMLInputElement;
-                                  const denEl = document.getElementById(`tab-${tabIndex}-progress-denominator`) as HTMLInputElement;
-                                  const label = labelEl?.value || "프로그레스";
-                                  const numerator = numEl?.value;
-                                  const denominator = denEl?.value;
-                                  if (!numerator || !denominator) return;
-                                  updateTab({
-                                    columns: [
-                                      ...selectedColumns,
-                                      {
-                                        name: `progress_${numerator}_${denominator}`,
-                                        label,
-                                        width: 200,
-                                        type: "progress",
-                                        numerator,
-                                        denominator,
-                                      } as any,
-                                    ],
-                                  });
-                                  if (labelEl) labelEl.value = "";
-                                }}
-                              >
-                                추가
-                              </Button>
-                            </div>
-                          </details>
+                              );
+                            })}
+                          </div>
+                        </SortableContext>
+                      </DndContext>
+                    )}
+
+                    {selectedColumns.length > 0 && unselectedCols.length > 0 && (
+                      <div className="border-border/60 my-2 flex items-center gap-2 border-t pt-2">
+                        <span className="text-muted-foreground text-[10px]">미선택 컬럼</span>
+                      </div>
+                    )}
+
+                    <div className="space-y-0.5">
+                      {unselectedCols.map((column) => (
+                        <div
+                          key={column.columnName}
+                          className="hover:bg-muted/50 flex cursor-pointer items-center gap-2 rounded px-2 py-1.5"
+                          onClick={() => {
+                            updateTab({
+                              columns: [
+                                ...selectedColumns,
+                                { name: column.columnName, label: column.columnLabel || column.columnName, width: 100 },
+                              ],
+                            });
+                          }}
+                        >
+                          <Checkbox checked={false} className="pointer-events-none h-3.5 w-3.5 shrink-0" />
+                          <span className="text-muted-foreground truncate text-xs">
+                            {column.columnLabel || column.columnName}
+                          </span>
                         </div>
-                      )}
+                      ))}
+                    </div>
 
-                      {/* Entity 조인 컬럼 - 아코디언 (접기/펼치기) */}
-                      {(() => {
-                        const joinData = tab.tableName ? entityJoinColumnsMap?.[tab.tableName] : null;
-                        if (!joinData || joinData.joinTables.length === 0) return null;
+                    {/* 프로그레스 컬럼 추가 */}
+                    {tab.tableName && (
+                      <div className="border-border/60 my-2 border-t pt-2">
+                        <details className="group">
+                          <summary className="flex cursor-pointer list-none items-center gap-2 select-none">
+                            <ChevronRight className="h-3 w-3 shrink-0 text-emerald-500 transition-transform group-open:rotate-90" />
+                            <span className="text-[10px] font-medium text-emerald-600">프로그레스 컬럼 추가</span>
+                          </summary>
+                          <div className="mt-2 space-y-2 rounded-md border border-emerald-200 bg-emerald-50/50 p-2">
+                            <div className="space-y-1">
+                              <Label className="text-[10px]">라벨</Label>
+                              <Input
+                                id={`tab-${tabIndex}-progress-label`}
+                                placeholder="예: 샷수 현황"
+                                className="h-7 text-xs"
+                                defaultValue=""
+                              />
+                            </div>
+                            <div className="grid grid-cols-2 gap-2">
+                              <div className="space-y-1">
+                                <Label className="text-[10px]">현재값 (자식 컬럼)</Label>
+                                <Select
+                                  onValueChange={(v) => {
+                                    const el = document.getElementById(
+                                      `tab-${tabIndex}-progress-numerator`,
+                                    ) as HTMLInputElement;
+                                    if (el) el.value = v;
+                                  }}
+                                >
+                                  <SelectTrigger className="h-7 text-[10px]">
+                                    <SelectValue placeholder="컬럼 선택" />
+                                  </SelectTrigger>
+                                  <SelectContent>
+                                    {tabColumns.map((col) => (
+                                      <SelectItem key={col.columnName} value={col.columnName} className="text-xs">
+                                        {col.columnLabel || col.columnName}
+                                      </SelectItem>
+                                    ))}
+                                  </SelectContent>
+                                </Select>
+                                <input type="hidden" id={`tab-${tabIndex}-progress-numerator`} />
+                              </div>
+                              <div className="space-y-1">
+                                <Label className="text-[10px]">최대값 (부모 컬럼)</Label>
+                                <Select
+                                  onValueChange={(v) => {
+                                    const el = document.getElementById(
+                                      `tab-${tabIndex}-progress-denominator`,
+                                    ) as HTMLInputElement;
+                                    if (el) el.value = v;
+                                  }}
+                                >
+                                  <SelectTrigger className="h-7 text-[10px]">
+                                    <SelectValue placeholder="컬럼 선택" />
+                                  </SelectTrigger>
+                                  <SelectContent>
+                                    {leftTableColumns.map((col) => (
+                                      <SelectItem key={col.columnName} value={col.columnName} className="text-xs">
+                                        {col.columnLabel || col.columnName}
+                                      </SelectItem>
+                                    ))}
+                                  </SelectContent>
+                                </Select>
+                                <input type="hidden" id={`tab-${tabIndex}-progress-denominator`} />
+                              </div>
+                            </div>
+                            <Button
+                              type="button"
+                              variant="outline"
+                              size="sm"
+                              className="h-7 w-full border-emerald-300 text-xs text-emerald-700 hover:bg-emerald-100"
+                              onClick={() => {
+                                const labelEl = document.getElementById(
+                                  `tab-${tabIndex}-progress-label`,
+                                ) as HTMLInputElement;
+                                const numEl = document.getElementById(
+                                  `tab-${tabIndex}-progress-numerator`,
+                                ) as HTMLInputElement;
+                                const denEl = document.getElementById(
+                                  `tab-${tabIndex}-progress-denominator`,
+                                ) as HTMLInputElement;
+                                const label = labelEl?.value || "프로그레스";
+                                const numerator = numEl?.value;
+                                const denominator = denEl?.value;
+                                if (!numerator || !denominator) return;
+                                updateTab({
+                                  columns: [
+                                    ...selectedColumns,
+                                    {
+                                      name: `progress_${numerator}_${denominator}`,
+                                      label,
+                                      width: 200,
+                                      type: "progress",
+                                      numerator,
+                                      denominator,
+                                    } as any,
+                                  ],
+                                });
+                                if (labelEl) labelEl.value = "";
+                              }}
+                            >
+                              추가
+                            </Button>
+                          </div>
+                        </details>
+                      </div>
+                    )}
 
-                        return joinData.joinTables.map((joinTable, tableIndex) => {
-                          const joinColumnsToShow = joinTable.availableColumns.filter((column) => {
-                            const matchingJoinColumn = joinData.availableColumns.find(
-                              (jc) => jc.tableName === joinTable.tableName && jc.columnName === column.columnName,
-                            );
-                            if (!matchingJoinColumn) return false;
-                            return !selectedColumns.some((c) => c.name === matchingJoinColumn.joinAlias);
-                          });
-                          const addedCount = joinTable.availableColumns.length - joinColumnsToShow.length;
-                          if (joinColumnsToShow.length === 0 && addedCount === 0) return null;
+                    {/* Entity 조인 컬럼 - 아코디언 (접기/펼치기) */}
+                    {(() => {
+                      const joinData = tab.tableName ? entityJoinColumnsMap?.[tab.tableName] : null;
+                      if (!joinData || joinData.joinTables.length === 0) return null;
 
-                          return (
-                            <details key={`tab-join-${tableIndex}`} className="group">
-                              <summary className="border-border/60 my-2 flex cursor-pointer list-none items-center gap-2 border-t pt-2 select-none">
-                                <ChevronRight className="h-3 w-3 shrink-0 text-blue-500 transition-transform group-open:rotate-90" />
-                                <Link2 className="h-3 w-3 shrink-0 text-blue-500" />
-                                <span className="text-[10px] font-medium text-blue-600">{joinTable.tableName}</span>
-                                {addedCount > 0 && (
-                                  <span className="rounded-full bg-blue-100 px-1.5 text-[9px] font-medium text-blue-600">{addedCount}개 선택</span>
-                                )}
-                                <span className="text-[9px] text-gray-400">{joinColumnsToShow.length}개 남음</span>
-                              </summary>
-                              <div className="space-y-0.5 pt-1">
-                                {joinColumnsToShow.map((column, colIndex) => {
-                                  const matchingJoinColumn = joinData.availableColumns.find(
-                                    (jc) => jc.tableName === joinTable.tableName && jc.columnName === column.columnName,
-                                  );
-                                  if (!matchingJoinColumn) return null;
+                      return joinData.joinTables.map((joinTable, tableIndex) => {
+                        const joinColumnsToShow = joinTable.availableColumns.filter((column) => {
+                          const matchingJoinColumn = joinData.availableColumns.find(
+                            (jc) => jc.tableName === joinTable.tableName && jc.columnName === column.columnName,
+                          );
+                          if (!matchingJoinColumn) return false;
+                          return !selectedColumns.some((c) => c.name === matchingJoinColumn.joinAlias);
+                        });
+                        const addedCount = joinTable.availableColumns.length - joinColumnsToShow.length;
+                        if (joinColumnsToShow.length === 0 && addedCount === 0) return null;
 
-                                  return (
-                                    <div
-                                      key={colIndex}
-                                      className="flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 hover:bg-blue-50/60"
-                                      onClick={() => {
-                                        updateTab({
-                                          columns: [...selectedColumns, {
+                        return (
+                          <details key={`tab-join-${tableIndex}`} className="group">
+                            <summary className="border-border/60 my-2 flex cursor-pointer list-none items-center gap-2 border-t pt-2 select-none">
+                              <ChevronRight className="text-primary h-3 w-3 shrink-0 transition-transform group-open:rotate-90" />
+                              <Link2 className="text-primary h-3 w-3 shrink-0" />
+                              <span className="text-primary text-[10px] font-medium">{joinTable.tableName}</span>
+                              {addedCount > 0 && (
+                                <span className="bg-primary/10 text-primary rounded-full px-1.5 text-[9px] font-medium">
+                                  {addedCount}개 선택
+                                </span>
+                              )}
+                              <span className="text-muted-foreground/70 text-[9px]">
+                                {joinColumnsToShow.length}개 남음
+                              </span>
+                            </summary>
+                            <div className="space-y-0.5 pt-1">
+                              {joinColumnsToShow.map((column, colIndex) => {
+                                const matchingJoinColumn = joinData.availableColumns.find(
+                                  (jc) => jc.tableName === joinTable.tableName && jc.columnName === column.columnName,
+                                );
+                                if (!matchingJoinColumn) return null;
+
+                                return (
+                                  <div
+                                    key={colIndex}
+                                    className="hover:bg-primary/10/60 flex cursor-pointer items-center gap-2 rounded px-2 py-1.5"
+                                    onClick={() => {
+                                      updateTab({
+                                        columns: [
+                                          ...selectedColumns,
+                                          {
                                             name: matchingJoinColumn.joinAlias,
                                             label: matchingJoinColumn.suggestedLabel || matchingJoinColumn.columnLabel,
                                             width: 100,
@@ -876,466 +1043,469 @@ const AdditionalTabConfigPanel: React.FC<AdditionalTabConfigPanelProps> = ({
                                               referenceTable: matchingJoinColumn.tableName,
                                               joinAlias: matchingJoinColumn.joinAlias,
                                             },
-                                          }],
-                                        });
-                                      }}
-                                    >
-                                      <Checkbox checked={false} className="pointer-events-none h-3.5 w-3.5 shrink-0" />
-                                      <Link2 className="h-3 w-3 shrink-0 text-blue-500" />
-                                      <span className="truncate text-xs text-blue-700">{column.columnLabel || column.columnName}</span>
-                                    </div>
-                                  );
-                                })}
-                                {joinColumnsToShow.length === 0 && (
-                                  <p className="px-2 py-1 text-[10px] text-gray-400">모든 컬럼이 이미 추가되었습니다</p>
-                                )}
-                              </div>
-                            </details>
-                          );
-                        });
-                      })()}
-                    </>
-                  )}
-                </div>
-              </div>
-            );
-          })()}
-
-          {/* ===== 7. 추가 모달 컬럼 설정 (showAdd일 때) ===== */}
-          {tab.showAdd && (
-            <div className="space-y-3 rounded-lg border border-border/50 bg-muted/40 p-3">
-              <div className="flex items-center justify-between">
-                <h3 className="border-l-2 border-l-primary/40 pl-2 text-xs font-semibold">추가 모달 컬럼 설정</h3>
-                <Button
-                  size="sm"
-                  variant="outline"
-                  onClick={() => {
-                    const currentColumns = tab.addModalColumns || [];
-                    const newColumns = [...currentColumns, { name: "", label: "", required: false }];
-                    updateTab({ addModalColumns: newColumns });
-                  }}
-                  className="h-7 text-xs"
-                  disabled={!tab.tableName}
-                >
-                  <Plus className="mr-1 h-3 w-3" />
-                  컬럼 추가
-                </Button>
-              </div>
-
-              <div className="space-y-2">
-                {(tab.addModalColumns || []).length === 0 ? (
-                  <div className="rounded-md border border-dashed border-gray-300 bg-white p-3 text-center">
-                    <p className="text-xs text-gray-500">추가 모달에 표시할 컬럼을 설정하세요</p>
-                  </div>
-                ) : (
-                  (tab.addModalColumns || []).map((col, colIndex) => (
-                    <div key={colIndex} className="flex items-center gap-2 rounded-md border bg-white p-2">
-                      <Select
-                        value={col.name}
-                        onValueChange={(value) => {
-                          const selectedCol = tabColumns.find((c) => c.columnName === value);
-                          const newColumns = [...(tab.addModalColumns || [])];
-                          newColumns[colIndex] = {
-                            ...col,
-                            name: value,
-                            label: selectedCol?.columnLabel || value,
-                          };
-                          updateTab({ addModalColumns: newColumns });
-                        }}
-                      >
-                        <SelectTrigger className="h-8 flex-1 text-xs">
-                          <SelectValue placeholder="컬럼 선택" />
-                        </SelectTrigger>
-                        <SelectContent>
-                          {tabColumns.map((column) => (
-                            <SelectItem key={column.columnName} value={column.columnName}>
-                              {column.columnLabel || column.columnName}
-                            </SelectItem>
-                          ))}
-                        </SelectContent>
-                      </Select>
-                      <Input
-                        value={col.label}
-                        onChange={(e) => {
-                          const newColumns = [...(tab.addModalColumns || [])];
-                          newColumns[colIndex] = { ...col, label: e.target.value };
-                          updateTab({ addModalColumns: newColumns });
-                        }}
-                        placeholder="라벨"
-                        className="h-8 w-24 text-xs"
-                      />
-                      <div className="flex items-center gap-1">
-                        <Checkbox
-                          checked={col.required}
-                          onCheckedChange={(checked) => {
-                            const newColumns = [...(tab.addModalColumns || [])];
-                            newColumns[colIndex] = { ...col, required: !!checked };
-                            updateTab({ addModalColumns: newColumns });
-                          }}
-                        />
-                        <span className="text-[10px]">필수</span>
-                      </div>
-                      <Button
-                        size="sm"
-                        variant="ghost"
-                        onClick={() => {
-                          const newColumns = (tab.addModalColumns || []).filter((_, i) => i !== colIndex);
-                          updateTab({ addModalColumns: newColumns });
-                        }}
-                        className="h-8 w-8 p-0 text-red-500"
-                      >
-                        <X className="h-3 w-3" />
-                      </Button>
-                    </div>
-                  ))
+                                          },
+                                        ],
+                                      });
+                                    }}
+                                  >
+                                    <Checkbox checked={false} className="pointer-events-none h-3.5 w-3.5 shrink-0" />
+                                    <Link2 className="text-primary h-3 w-3 shrink-0" />
+                                    <span className="text-primary truncate text-xs">
+                                      {column.columnLabel || column.columnName}
+                                    </span>
+                                  </div>
+                                );
+                              })}
+                              {joinColumnsToShow.length === 0 && (
+                                <p className="text-muted-foreground/70 px-2 py-1 text-[10px]">
+                                  모든 컬럼이 이미 추가되었습니다
+                                </p>
+                              )}
+                            </div>
+                          </details>
+                        );
+                      });
+                    })()}
+                  </>
                 )}
               </div>
             </div>
-          )}
+          );
+        })()}
 
-          {/* Entity 조인 컬럼은 표시 컬럼 목록에 통합됨 */}
-
-          {/* ===== 8. 데이터 필터링 ===== */}
-          <div className="space-y-3 rounded-lg border border-border/50 bg-muted/40 p-3">
-            <h3 className="border-l-2 border-l-primary/40 pl-2 text-xs font-semibold">데이터 필터링</h3>
-            <DataFilterConfigPanel
-              tableName={tab.tableName}
-              columns={tabColumns}
-              config={tab.dataFilter}
-              onConfigChange={(dataFilter) => updateTab({ dataFilter })}
-              menuObjid={menuObjid}
-            />
-          </div>
-
-          {/* ===== 9. 중복 데이터 제거 ===== */}
-          <div className="space-y-3 rounded-lg border border-border/50 bg-muted/40 p-3">
+        {/* ===== 7. 추가 모달 컬럼 설정 (showAdd일 때) ===== */}
+        {tab.showAdd && (
+          <div className="border-border/50 bg-muted/40 space-y-3 rounded-lg border p-3">
             <div className="flex items-center justify-between">
-              <h3 className="border-l-2 border-l-primary/40 pl-2 text-xs font-semibold">중복 데이터 제거</h3>
-              <Switch
-                checked={tab.deduplication?.enabled ?? false}
-                onCheckedChange={(checked) => {
-                  if (checked) {
-                    updateTab({
-                      deduplication: {
-                        enabled: true,
-                        groupByColumn: "",
-                        keepStrategy: "latest",
-                        sortColumn: "start_date",
-                      },
-                    });
-                  } else {
-                    updateTab({ deduplication: undefined });
-                  }
+              <h3 className="border-l-primary/40 border-l-2 pl-2 text-xs font-semibold">추가 모달 컬럼 설정</h3>
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={() => {
+                  const currentColumns = tab.addModalColumns || [];
+                  const newColumns = [...currentColumns, { name: "", label: "", required: false }];
+                  updateTab({ addModalColumns: newColumns });
                 }}
-              />
+                className="h-7 text-xs"
+                disabled={!tab.tableName}
+              >
+                <Plus className="mr-1 h-3 w-3" />
+                컬럼 추가
+              </Button>
             </div>
-            {tab.deduplication?.enabled && (
-              <div className="mt-2 space-y-2">
-                <div className="space-y-1">
-                  <Label className="text-[10px]">기준 컬럼</Label>
-                  <Select
-                    value={tab.deduplication?.groupByColumn || ""}
-                    onValueChange={(value) => {
-                      updateTab({
-                        deduplication: { ...tab.deduplication!, groupByColumn: value },
-                      });
-                    }}
-                  >
-                    <SelectTrigger className="h-7 text-xs">
-                      <SelectValue placeholder="컬럼 선택" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {tabColumns.map((col) => (
-                        <SelectItem key={col.columnName} value={col.columnName}>
-                          {col.columnLabel || col.columnName}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                </div>
-                <div className="space-y-1">
-                  <Label className="text-[10px]">정렬 컬럼</Label>
-                  <Select
-                    value={tab.deduplication?.sortColumn || ""}
-                    onValueChange={(value) => {
-                      updateTab({
-                        deduplication: { ...tab.deduplication!, sortColumn: value },
-                      });
-                    }}
-                  >
-                    <SelectTrigger className="h-7 text-xs">
-                      <SelectValue placeholder="컬럼 선택" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {tabColumns.map((col) => (
-                        <SelectItem key={col.columnName} value={col.columnName}>
-                          {col.columnLabel || col.columnName}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                </div>
-                <div className="space-y-1">
-                  <Label className="text-[10px]">유지 전략</Label>
-                  <Select
-                    value={tab.deduplication?.keepStrategy || "latest"}
-                    onValueChange={(value: "latest" | "earliest" | "base_price" | "current_date") => {
-                      updateTab({
-                        deduplication: { ...tab.deduplication!, keepStrategy: value },
-                      });
-                    }}
-                  >
-                    <SelectTrigger className="h-7 text-xs">
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="latest">최신</SelectItem>
-                      <SelectItem value="earliest">가장 오래된</SelectItem>
-                      <SelectItem value="current_date">현재 날짜 기준</SelectItem>
-                      <SelectItem value="base_price">기준가</SelectItem>
-                    </SelectContent>
-                  </Select>
-                </div>
-              </div>
-            )}
-          </div>
 
-          {/* ===== 10. 수정 버튼 설정 ===== */}
-          {tab.showEdit && (
-            <div className="space-y-3 rounded-lg border border-border/50 bg-muted/40 p-3">
-              <h3 className="border-l-2 border-l-primary/40 pl-2 text-xs font-semibold">수정 버튼 설정</h3>
-              <div className="space-y-2">
-                <div className="space-y-1">
-                  <Label className="text-[10px]">수정 모드</Label>
-                  <Select
-                    value={tab.editButton?.mode || "auto"}
-                    onValueChange={(value: "auto" | "modal") => {
-                      updateTab({
-                        editButton: { ...tab.editButton, enabled: true, mode: value },
-                      });
-                    }}
-                  >
-                    <SelectTrigger className="h-7 text-xs">
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="auto">자동 (인라인)</SelectItem>
-                      <SelectItem value="modal">모달 화면</SelectItem>
-                    </SelectContent>
-                  </Select>
+            <div className="space-y-2">
+              {(tab.addModalColumns || []).length === 0 ? (
+                <div className="border-input rounded-md border border-dashed bg-white p-3 text-center">
+                  <p className="text-muted-foreground text-xs">추가 모달에 표시할 컬럼을 설정하세요</p>
                 </div>
-
-                {tab.editButton?.mode === "modal" && (
-                  <div className="space-y-1">
-                    <Label className="text-[10px]">수정 모달 화면</Label>
-                    <ScreenSelector
-                      value={tab.editButton?.modalScreenId}
-                      onChange={(screenId) => {
-                        updateTab({
-                          editButton: { ...tab.editButton, enabled: true, mode: "modal", modalScreenId: screenId },
-                        });
-                      }}
-                    />
-                  </div>
-                )}
-
-                <div className="grid grid-cols-2 gap-2">
-                  <div className="space-y-1">
-                    <Label className="text-[10px]">버튼 라벨</Label>
-                    <Input
-                      value={tab.editButton?.buttonLabel || ""}
-                      onChange={(e) => {
-                        updateTab({
-                          editButton: { ...tab.editButton, enabled: true, buttonLabel: e.target.value || undefined },
-                        });
-                      }}
-                      placeholder="수정"
-                      className="h-7 text-xs"
-                    />
-                  </div>
-                  <div className="space-y-1">
-                    <Label className="text-[10px]">버튼 스타일</Label>
+              ) : (
+                (tab.addModalColumns || []).map((col, colIndex) => (
+                  <div key={colIndex} className="flex items-center gap-2 rounded-md border bg-white p-2">
                     <Select
-                      value={tab.editButton?.buttonVariant || "ghost"}
-                      onValueChange={(value: "default" | "outline" | "ghost") => {
-                        updateTab({
-                          editButton: { ...tab.editButton, enabled: true, buttonVariant: value },
-                        });
+                      value={col.name}
+                      onValueChange={(value) => {
+                        const selectedCol = tabColumns.find((c) => c.columnName === value);
+                        const newColumns = [...(tab.addModalColumns || [])];
+                        newColumns[colIndex] = {
+                          ...col,
+                          name: value,
+                          label: selectedCol?.columnLabel || value,
+                        };
+                        updateTab({ addModalColumns: newColumns });
                       }}
                     >
-                      <SelectTrigger className="h-7 text-xs">
-                        <SelectValue />
+                      <SelectTrigger className="h-8 flex-1 text-xs">
+                        <SelectValue placeholder="컬럼 선택" />
                       </SelectTrigger>
                       <SelectContent>
-                        <SelectItem value="ghost">Ghost (기본)</SelectItem>
-                        <SelectItem value="outline">Outline</SelectItem>
-                        <SelectItem value="default">Default</SelectItem>
+                        {tabColumns.map((column) => (
+                          <SelectItem key={column.columnName} value={column.columnName}>
+                            {column.columnLabel || column.columnName}
+                          </SelectItem>
+                        ))}
                       </SelectContent>
                     </Select>
+                    <Input
+                      value={col.label}
+                      onChange={(e) => {
+                        const newColumns = [...(tab.addModalColumns || [])];
+                        newColumns[colIndex] = { ...col, label: e.target.value };
+                        updateTab({ addModalColumns: newColumns });
+                      }}
+                      placeholder="라벨"
+                      className="h-8 w-24 text-xs"
+                    />
+                    <div className="flex items-center gap-1">
+                      <Checkbox
+                        checked={col.required}
+                        onCheckedChange={(checked) => {
+                          const newColumns = [...(tab.addModalColumns || [])];
+                          newColumns[colIndex] = { ...col, required: !!checked };
+                          updateTab({ addModalColumns: newColumns });
+                        }}
+                      />
+                      <span className="text-[10px]">필수</span>
+                    </div>
+                    <Button
+                      size="sm"
+                      variant="ghost"
+                      onClick={() => {
+                        const newColumns = (tab.addModalColumns || []).filter((_, i) => i !== colIndex);
+                        updateTab({ addModalColumns: newColumns });
+                      }}
+                      className="text-destructive h-8 w-8 p-0"
+                    >
+                      <X className="h-3 w-3" />
+                    </Button>
                   </div>
-                </div>
+                ))
+              )}
+            </div>
+          </div>
+        )}
 
-                {/* 그룹핑 기준 컬럼 */}
-                <div className="space-y-1">
-                  <Label className="text-[10px]">그룹핑 기준 컬럼</Label>
-                  <p className="text-[9px] text-gray-500">수정 시 같은 값을 가진 레코드를 함께 불러옵니다</p>
-                  <div className="max-h-[120px] space-y-1 overflow-y-auto rounded-md border bg-white p-2">
+        {/* Entity 조인 컬럼은 표시 컬럼 목록에 통합됨 */}
+
+        {/* ===== 8. 데이터 필터링 ===== */}
+        <div className="border-border/50 bg-muted/40 space-y-3 rounded-lg border p-3">
+          <h3 className="border-l-primary/40 border-l-2 pl-2 text-xs font-semibold">데이터 필터링</h3>
+          <DataFilterConfigPanel
+            tableName={tab.tableName}
+            columns={tabColumns}
+            config={tab.dataFilter}
+            onConfigChange={(dataFilter) => updateTab({ dataFilter })}
+            menuObjid={menuObjid}
+          />
+        </div>
+
+        {/* ===== 9. 중복 데이터 제거 ===== */}
+        <div className="border-border/50 bg-muted/40 space-y-3 rounded-lg border p-3">
+          <div className="flex items-center justify-between">
+            <h3 className="border-l-primary/40 border-l-2 pl-2 text-xs font-semibold">중복 데이터 제거</h3>
+            <Switch
+              checked={tab.deduplication?.enabled ?? false}
+              onCheckedChange={(checked) => {
+                if (checked) {
+                  updateTab({
+                    deduplication: {
+                      enabled: true,
+                      groupByColumn: "",
+                      keepStrategy: "latest",
+                      sortColumn: "start_date",
+                    },
+                  });
+                } else {
+                  updateTab({ deduplication: undefined });
+                }
+              }}
+            />
+          </div>
+          {tab.deduplication?.enabled && (
+            <div className="mt-2 space-y-2">
+              <div className="space-y-1">
+                <Label className="text-[10px]">기준 컬럼</Label>
+                <Select
+                  value={tab.deduplication?.groupByColumn || ""}
+                  onValueChange={(value) => {
+                    updateTab({
+                      deduplication: { ...tab.deduplication!, groupByColumn: value },
+                    });
+                  }}
+                >
+                  <SelectTrigger className="h-7 text-xs">
+                    <SelectValue placeholder="컬럼 선택" />
+                  </SelectTrigger>
+                  <SelectContent>
                     {tabColumns.map((col) => (
-                      <div key={col.columnName} className="flex items-center gap-2">
-                        <Checkbox
-                          id={`tab-${tabIndex}-groupby-${col.columnName}`}
-                          checked={(tab.editButton?.groupByColumns || []).includes(col.columnName)}
-                          onCheckedChange={(checked) => {
-                            const current = tab.editButton?.groupByColumns || [];
-                            const newColumns = checked
-                              ? [...current, col.columnName]
-                              : current.filter((c) => c !== col.columnName);
-                            updateTab({
-                              editButton: { ...tab.editButton, enabled: true, groupByColumns: newColumns },
-                            });
-                          }}
-                        />
-                        <label htmlFor={`tab-${tabIndex}-groupby-${col.columnName}`} className="text-[10px]">
-                          {col.columnLabel || col.columnName}
-                        </label>
-                      </div>
+                      <SelectItem key={col.columnName} value={col.columnName}>
+                        {col.columnLabel || col.columnName}
+                      </SelectItem>
                     ))}
-                  </div>
-                </div>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="space-y-1">
+                <Label className="text-[10px]">정렬 컬럼</Label>
+                <Select
+                  value={tab.deduplication?.sortColumn || ""}
+                  onValueChange={(value) => {
+                    updateTab({
+                      deduplication: { ...tab.deduplication!, sortColumn: value },
+                    });
+                  }}
+                >
+                  <SelectTrigger className="h-7 text-xs">
+                    <SelectValue placeholder="컬럼 선택" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {tabColumns.map((col) => (
+                      <SelectItem key={col.columnName} value={col.columnName}>
+                        {col.columnLabel || col.columnName}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="space-y-1">
+                <Label className="text-[10px]">유지 전략</Label>
+                <Select
+                  value={tab.deduplication?.keepStrategy || "latest"}
+                  onValueChange={(value: "latest" | "earliest" | "base_price" | "current_date") => {
+                    updateTab({
+                      deduplication: { ...tab.deduplication!, keepStrategy: value },
+                    });
+                  }}
+                >
+                  <SelectTrigger className="h-7 text-xs">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="latest">최신</SelectItem>
+                    <SelectItem value="earliest">가장 오래된</SelectItem>
+                    <SelectItem value="current_date">현재 날짜 기준</SelectItem>
+                    <SelectItem value="base_price">기준가</SelectItem>
+                  </SelectContent>
+                </Select>
               </div>
             </div>
           )}
+        </div>
 
-          {/* ===== 10-1. 추가 버튼 설정 ===== */}
-          {tab.showAdd && (
-            <div className="space-y-3 rounded-lg border border-border/50 bg-muted/40 p-3">
-              <h3 className="border-l-2 border-l-primary/40 pl-2 text-xs font-semibold">추가 버튼 설정</h3>
-              <div className="space-y-2">
+        {/* ===== 10. 수정 버튼 설정 ===== */}
+        {tab.showEdit && (
+          <div className="border-border/50 bg-muted/40 space-y-3 rounded-lg border p-3">
+            <h3 className="border-l-primary/40 border-l-2 pl-2 text-xs font-semibold">수정 버튼 설정</h3>
+            <div className="space-y-2">
+              <div className="space-y-1">
+                <Label className="text-[10px]">수정 모드</Label>
+                <Select
+                  value={tab.editButton?.mode || "auto"}
+                  onValueChange={(value: "auto" | "modal") => {
+                    updateTab({
+                      editButton: { ...tab.editButton, enabled: true, mode: value },
+                    });
+                  }}
+                >
+                  <SelectTrigger className="h-7 text-xs">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="auto">자동 (인라인)</SelectItem>
+                    <SelectItem value="modal">모달 화면</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+
+              {tab.editButton?.mode === "modal" && (
                 <div className="space-y-1">
-                  <Label className="text-[10px]">추가 모드</Label>
-                  <Select
-                    value={tab.addButton?.mode || "auto"}
-                    onValueChange={(value: "auto" | "modal") => {
+                  <Label className="text-[10px]">수정 모달 화면</Label>
+                  <ScreenSelector
+                    value={tab.editButton?.modalScreenId}
+                    onChange={(screenId) => {
                       updateTab({
-                        addButton: { ...tab.addButton, enabled: true, mode: value },
+                        editButton: { ...tab.editButton, enabled: true, mode: "modal", modalScreenId: screenId },
                       });
                     }}
-                  >
-                    <SelectTrigger className="h-7 text-xs">
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="auto">자동 (내장 폼)</SelectItem>
-                      <SelectItem value="modal">모달 화면</SelectItem>
-                    </SelectContent>
-                  </Select>
+                  />
                 </div>
+              )}
 
-                {tab.addButton?.mode === "modal" && (
-                  <div className="space-y-1">
-                    <Label className="text-[10px]">추가 모달 화면</Label>
-                    <ScreenSelector
-                      value={tab.addButton?.modalScreenId}
-                      onChange={(screenId) => {
-                        updateTab({
-                          addButton: { ...tab.addButton, enabled: true, mode: "modal", modalScreenId: screenId },
-                        });
-                      }}
-                    />
-                  </div>
-                )}
-
+              <div className="grid grid-cols-2 gap-2">
                 <div className="space-y-1">
                   <Label className="text-[10px]">버튼 라벨</Label>
                   <Input
-                    value={tab.addButton?.buttonLabel || ""}
+                    value={tab.editButton?.buttonLabel || ""}
                     onChange={(e) => {
                       updateTab({
-                        addButton: { ...tab.addButton, enabled: true, buttonLabel: e.target.value || undefined },
+                        editButton: { ...tab.editButton, enabled: true, buttonLabel: e.target.value || undefined },
                       });
                     }}
-                    placeholder="추가"
+                    placeholder="수정"
                     className="h-7 text-xs"
                   />
                 </div>
-              </div>
-            </div>
-          )}
-
-          {/* ===== 11. 삭제 버튼 설정 ===== */}
-          {tab.showDelete && (
-            <div className="space-y-3 rounded-lg border border-border/50 bg-muted/40 p-3">
-              <h3 className="border-l-2 border-l-primary/40 pl-2 text-xs font-semibold">삭제 버튼 설정</h3>
-              <div className="space-y-2">
-                <div className="grid grid-cols-2 gap-2">
-                  <div className="space-y-1">
-                    <Label className="text-[10px]">버튼 라벨</Label>
-                    <Input
-                      value={tab.deleteButton?.buttonLabel || ""}
-                      onChange={(e) => {
-                        updateTab({
-                          deleteButton: { ...tab.deleteButton, enabled: true, buttonLabel: e.target.value || undefined },
-                        });
-                      }}
-                      placeholder="삭제"
-                      className="h-7 text-xs"
-                    />
-                  </div>
-                  <div className="space-y-1">
-                    <Label className="text-[10px]">버튼 스타일</Label>
-                    <Select
-                      value={tab.deleteButton?.buttonVariant || "ghost"}
-                      onValueChange={(value: "default" | "outline" | "ghost" | "destructive") => {
-                        updateTab({
-                          deleteButton: { ...tab.deleteButton, enabled: true, buttonVariant: value },
-                        });
-                      }}
-                    >
-                      <SelectTrigger className="h-7 text-xs">
-                        <SelectValue />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="ghost">Ghost (기본)</SelectItem>
-                        <SelectItem value="outline">Outline</SelectItem>
-                        <SelectItem value="default">Default</SelectItem>
-                        <SelectItem value="destructive">Destructive (빨강)</SelectItem>
-                      </SelectContent>
-                    </Select>
-                  </div>
-                </div>
                 <div className="space-y-1">
-                  <Label className="text-[10px]">삭제 확인 메시지</Label>
-                  <Input
-                    value={tab.deleteButton?.confirmMessage || ""}
-                    onChange={(e) => {
+                  <Label className="text-[10px]">버튼 스타일</Label>
+                  <Select
+                    value={tab.editButton?.buttonVariant || "ghost"}
+                    onValueChange={(value: "default" | "outline" | "ghost") => {
                       updateTab({
-                        deleteButton: { ...tab.deleteButton, enabled: true, confirmMessage: e.target.value || undefined },
+                        editButton: { ...tab.editButton, enabled: true, buttonVariant: value },
                       });
                     }}
-                    placeholder="정말 삭제하시겠습니까?"
-                    className="h-7 text-xs"
-                  />
+                  >
+                    <SelectTrigger className="h-7 text-xs">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="ghost">Ghost (기본)</SelectItem>
+                      <SelectItem value="outline">Outline</SelectItem>
+                      <SelectItem value="default">Default</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+
+              {/* 그룹핑 기준 컬럼 */}
+              <div className="space-y-1">
+                <Label className="text-[10px]">그룹핑 기준 컬럼</Label>
+                <p className="text-muted-foreground text-[9px]">수정 시 같은 값을 가진 레코드를 함께 불러옵니다</p>
+                <div className="max-h-[120px] space-y-1 overflow-y-auto rounded-md border bg-white p-2">
+                  {tabColumns.map((col) => (
+                    <div key={col.columnName} className="flex items-center gap-2">
+                      <Checkbox
+                        id={`tab-${tabIndex}-groupby-${col.columnName}`}
+                        checked={(tab.editButton?.groupByColumns || []).includes(col.columnName)}
+                        onCheckedChange={(checked) => {
+                          const current = tab.editButton?.groupByColumns || [];
+                          const newColumns = checked
+                            ? [...current, col.columnName]
+                            : current.filter((c) => c !== col.columnName);
+                          updateTab({
+                            editButton: { ...tab.editButton, enabled: true, groupByColumns: newColumns },
+                          });
+                        }}
+                      />
+                      <label htmlFor={`tab-${tabIndex}-groupby-${col.columnName}`} className="text-[10px]">
+                        {col.columnLabel || col.columnName}
+                      </label>
+                    </div>
+                  ))}
                 </div>
               </div>
             </div>
-          )}
-
-          {/* ===== 탭 삭제 버튼 ===== */}
-          <div className="flex justify-end border-t pt-2">
-            <Button
-              variant="ghost"
-              size="sm"
-              className="text-red-500 hover:bg-red-50 hover:text-red-600"
-              onClick={() => {
-                const newTabs = config.rightPanel?.additionalTabs?.filter((_, i) => i !== tabIndex) || [];
-                updateRightPanel({ additionalTabs: newTabs });
-              }}
-            >
-              <Trash2 className="mr-1 h-3 w-3" />
-              탭 삭제
-            </Button>
           </div>
+        )}
 
+        {/* ===== 10-1. 추가 버튼 설정 ===== */}
+        {tab.showAdd && (
+          <div className="border-border/50 bg-muted/40 space-y-3 rounded-lg border p-3">
+            <h3 className="border-l-primary/40 border-l-2 pl-2 text-xs font-semibold">추가 버튼 설정</h3>
+            <div className="space-y-2">
+              <div className="space-y-1">
+                <Label className="text-[10px]">추가 모드</Label>
+                <Select
+                  value={tab.addButton?.mode || "auto"}
+                  onValueChange={(value: "auto" | "modal") => {
+                    updateTab({
+                      addButton: { ...tab.addButton, enabled: true, mode: value },
+                    });
+                  }}
+                >
+                  <SelectTrigger className="h-7 text-xs">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="auto">자동 (내장 폼)</SelectItem>
+                    <SelectItem value="modal">모달 화면</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+
+              {tab.addButton?.mode === "modal" && (
+                <div className="space-y-1">
+                  <Label className="text-[10px]">추가 모달 화면</Label>
+                  <ScreenSelector
+                    value={tab.addButton?.modalScreenId}
+                    onChange={(screenId) => {
+                      updateTab({
+                        addButton: { ...tab.addButton, enabled: true, mode: "modal", modalScreenId: screenId },
+                      });
+                    }}
+                  />
+                </div>
+              )}
+
+              <div className="space-y-1">
+                <Label className="text-[10px]">버튼 라벨</Label>
+                <Input
+                  value={tab.addButton?.buttonLabel || ""}
+                  onChange={(e) => {
+                    updateTab({
+                      addButton: { ...tab.addButton, enabled: true, buttonLabel: e.target.value || undefined },
+                    });
+                  }}
+                  placeholder="추가"
+                  className="h-7 text-xs"
+                />
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* ===== 11. 삭제 버튼 설정 ===== */}
+        {tab.showDelete && (
+          <div className="border-border/50 bg-muted/40 space-y-3 rounded-lg border p-3">
+            <h3 className="border-l-primary/40 border-l-2 pl-2 text-xs font-semibold">삭제 버튼 설정</h3>
+            <div className="space-y-2">
+              <div className="grid grid-cols-2 gap-2">
+                <div className="space-y-1">
+                  <Label className="text-[10px]">버튼 라벨</Label>
+                  <Input
+                    value={tab.deleteButton?.buttonLabel || ""}
+                    onChange={(e) => {
+                      updateTab({
+                        deleteButton: { ...tab.deleteButton, enabled: true, buttonLabel: e.target.value || undefined },
+                      });
+                    }}
+                    placeholder="삭제"
+                    className="h-7 text-xs"
+                  />
+                </div>
+                <div className="space-y-1">
+                  <Label className="text-[10px]">버튼 스타일</Label>
+                  <Select
+                    value={tab.deleteButton?.buttonVariant || "ghost"}
+                    onValueChange={(value: "default" | "outline" | "ghost" | "destructive") => {
+                      updateTab({
+                        deleteButton: { ...tab.deleteButton, enabled: true, buttonVariant: value },
+                      });
+                    }}
+                  >
+                    <SelectTrigger className="h-7 text-xs">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="ghost">Ghost (기본)</SelectItem>
+                      <SelectItem value="outline">Outline</SelectItem>
+                      <SelectItem value="default">Default</SelectItem>
+                      <SelectItem value="destructive">Destructive (빨강)</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+              <div className="space-y-1">
+                <Label className="text-[10px]">삭제 확인 메시지</Label>
+                <Input
+                  value={tab.deleteButton?.confirmMessage || ""}
+                  onChange={(e) => {
+                    updateTab({
+                      deleteButton: { ...tab.deleteButton, enabled: true, confirmMessage: e.target.value || undefined },
+                    });
+                  }}
+                  placeholder="정말 삭제하시겠습니까?"
+                  className="h-7 text-xs"
+                />
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* ===== 탭 삭제 버튼 ===== */}
+        <div className="flex justify-end border-t pt-2">
+          <Button
+            variant="ghost"
+            size="sm"
+            className="text-destructive hover:bg-destructive/10 hover:text-destructive"
+            onClick={() => {
+              const newTabs = config.rightPanel?.additionalTabs?.filter((_, i) => i !== tabIndex) || [];
+              updateRightPanel({ additionalTabs: newTabs });
+            }}
+          >
+            <Trash2 className="mr-1 h-3 w-3" />탭 삭제
+          </Button>
+        </div>
       </AccordionContent>
     </AccordionItem>
   );
@@ -1413,25 +1583,25 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
 
   // 전체 테이블 목록 항상 로드 (좌측/우측 모두 사용)
   useEffect(() => {
-      const loadAllTables = async () => {
-        try {
-          const { tableManagementApi } = await import("@/lib/api/tableManagement");
-          const response = await tableManagementApi.getTableList();
-          if (response.success && response.data) {
+    const loadAllTables = async () => {
+      try {
+        const { tableManagementApi } = await import("@/lib/api/tableManagement");
+        const response = await tableManagementApi.getTableList();
+        if (response.success && response.data) {
           console.log("✅ 분할패널: 전체 테이블 목록 로드", response.data.length, "개");
-            setAllTables(response.data);
-          }
-        } catch (error) {
-          console.error("❌ 전체 테이블 목록 로드 실패:", error);
+          setAllTables(response.data);
         }
-      };
-      loadAllTables();
+      } catch (error) {
+        console.error("❌ 전체 테이블 목록 로드 실패:", error);
+      }
+    };
+    loadAllTables();
   }, []);
 
   // 초기 로드 시 좌측 패널 테이블이 없으면 화면 테이블로 설정
   useEffect(() => {
     if (screenTableName && !config.leftPanel?.tableName) {
-        updateLeftPanel({ tableName: screenTableName });
+      updateLeftPanel({ tableName: screenTableName });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [screenTableName]);
@@ -1697,7 +1867,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
     return (
       <div className="rounded-lg border p-4">
         <p className="text-sm font-medium">테이블 데이터를 불러올 수 없습니다.</p>
-        <p className="mt-1 text-xs text-gray-600">
+        <p className="text-muted-foreground mt-1 text-xs">
           화면에 테이블이 연결되지 않았거나 테이블 목록이 로드되지 않았습니다.
         </p>
       </div>
@@ -1715,7 +1885,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
   return (
     <div className="space-y-3">
       {/* ===== 간소화된 설정 메뉴 카드 ===== */}
-      <h3 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">분할 패널 설정</h3>
+      <h3 className="text-muted-foreground text-xs font-semibold tracking-wider uppercase">분할 패널 설정</h3>
       <div className="space-y-1.5">
         {[
           {
@@ -1746,16 +1916,16 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
           <button
             key={item.id}
             onClick={() => setActiveModal(item.id)}
-            className="flex w-full items-center gap-3 rounded-lg border bg-card p-3 text-left transition-colors hover:bg-accent"
+            className="bg-card hover:bg-accent flex w-full items-center gap-3 rounded-lg border p-3 text-left transition-colors"
           >
-            <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-muted">
-              <item.icon className="h-4 w-4 text-muted-foreground" />
+            <div className="bg-muted flex h-8 w-8 shrink-0 items-center justify-center rounded-md">
+              <item.icon className="text-muted-foreground h-4 w-4" />
             </div>
             <div className="min-w-0 flex-1">
               <p className="text-sm font-medium">{item.title}</p>
-              <p className="truncate text-xs text-muted-foreground">{item.desc}</p>
+              <p className="text-muted-foreground truncate text-xs">{item.desc}</p>
             </div>
-            <ChevronRight className="h-4 w-4 shrink-0 text-muted-foreground" />
+            <ChevronRight className="text-muted-foreground h-4 w-4 shrink-0" />
           </button>
         ))}
       </div>
@@ -1768,68 +1938,72 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
             <DialogDescription className="text-xs">패널 관계 타입 및 레이아웃을 설정합니다</DialogDescription>
           </DialogHeader>
           <div className="space-y-6">
-      {/* 관계 타입 선택 */}
-      <div className="space-y-3 rounded-lg border border-border/50 bg-muted/40 p-4">
-        <h3 className="border-l-2 border-l-primary/40 pl-2 text-sm font-semibold">우측 패널 표시 방식</h3>
-        <p className="text-muted-foreground text-xs">좌측 항목 선택 시 우측에 어떤 형태로 데이터를 보여줄지 설정합니다</p>
-        <Select
-          value={relationshipType}
-          onValueChange={(value: "join" | "detail") => {
-            updateRightPanel({
-              relation: { ...config.rightPanel?.relation, type: value },
-            });
-          }}
-        >
-          <SelectTrigger className="h-10 bg-white">
-            <SelectValue placeholder="표시 방식 선택">
-              {relationshipType === "detail" ? "선택 시 표시" : "연관 목록"}
-            </SelectValue>
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="detail">
-              <div className="flex flex-col py-1">
-                <span className="text-sm font-medium">선택 시 표시</span>
-                <span className="text-xs text-gray-500">좌측 선택 시에만 우측 데이터 표시 / 미선택 시 빈 화면</span>
-              </div>
-            </SelectItem>
-            <SelectItem value="join">
-              <div className="flex flex-col py-1">
-                <span className="text-sm font-medium">연관 목록</span>
-                <span className="text-xs text-gray-500">미선택 시 전체 표시 / 좌측 선택 시 필터링</span>
-              </div>
-            </SelectItem>
-          </SelectContent>
-        </Select>
-      </div>
+            {/* 관계 타입 선택 */}
+            <div className="border-border/50 bg-muted/40 space-y-3 rounded-lg border p-4">
+              <h3 className="border-l-primary/40 border-l-2 pl-2 text-sm font-semibold">우측 패널 표시 방식</h3>
+              <p className="text-muted-foreground text-xs">
+                좌측 항목 선택 시 우측에 어떤 형태로 데이터를 보여줄지 설정합니다
+              </p>
+              <Select
+                value={relationshipType}
+                onValueChange={(value: "join" | "detail") => {
+                  updateRightPanel({
+                    relation: { ...config.rightPanel?.relation, type: value },
+                  });
+                }}
+              >
+                <SelectTrigger className="h-10 bg-white">
+                  <SelectValue placeholder="표시 방식 선택">
+                    {relationshipType === "detail" ? "선택 시 표시" : "연관 목록"}
+                  </SelectValue>
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="detail">
+                    <div className="flex flex-col py-1">
+                      <span className="text-sm font-medium">선택 시 표시</span>
+                      <span className="text-muted-foreground text-xs">
+                        좌측 선택 시에만 우측 데이터 표시 / 미선택 시 빈 화면
+                      </span>
+                    </div>
+                  </SelectItem>
+                  <SelectItem value="join">
+                    <div className="flex flex-col py-1">
+                      <span className="text-sm font-medium">연관 목록</span>
+                      <span className="text-muted-foreground text-xs">미선택 시 전체 표시 / 좌측 선택 시 필터링</span>
+                    </div>
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
 
-      {/* 레이아웃 설정 */}
-      <div className="space-y-4 rounded-lg border border-border/50 bg-muted/40 p-4">
-        <h3 className="border-l-2 border-l-primary/40 pl-2 text-sm font-semibold">레이아웃</h3>
-        <div className="space-y-2">
-          <Label>좌측 패널 너비: {config.splitRatio || 30}%</Label>
-          <Slider
-            value={[config.splitRatio || 30]}
-            onValueChange={(value) => updateConfig({ splitRatio: value[0] })}
-            min={20}
-            max={80}
-            step={5}
-          />
-        </div>
-        <div className="flex items-center justify-between">
-          <Label>크기 조절 가능</Label>
-          <Switch
-            checked={config.resizable ?? true}
-            onCheckedChange={(checked) => updateConfig({ resizable: checked })}
-          />
-        </div>
-        <div className="flex items-center justify-between">
-          <Label>자동 데이터 로드</Label>
-          <Switch
-            checked={config.autoLoad ?? true}
-            onCheckedChange={(checked) => updateConfig({ autoLoad: checked })}
-          />
-        </div>
-      </div>
+            {/* 레이아웃 설정 */}
+            <div className="border-border/50 bg-muted/40 space-y-4 rounded-lg border p-4">
+              <h3 className="border-l-primary/40 border-l-2 pl-2 text-sm font-semibold">레이아웃</h3>
+              <div className="space-y-2">
+                <Label>좌측 패널 너비: {config.splitRatio || 30}%</Label>
+                <Slider
+                  value={[config.splitRatio || 30]}
+                  onValueChange={(value) => updateConfig({ splitRatio: value[0] })}
+                  min={20}
+                  max={80}
+                  step={5}
+                />
+              </div>
+              <div className="flex items-center justify-between">
+                <Label>크기 조절 가능</Label>
+                <Switch
+                  checked={config.resizable ?? true}
+                  onCheckedChange={(checked) => updateConfig({ resizable: checked })}
+                />
+              </div>
+              <div className="flex items-center justify-between">
+                <Label>자동 데이터 로드</Label>
+                <Switch
+                  checked={config.autoLoad ?? true}
+                  onCheckedChange={(checked) => updateConfig({ autoLoad: checked })}
+                />
+              </div>
+            </div>
           </div>
         </DialogContent>
       </Dialog>
@@ -1842,125 +2016,127 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
             <DialogDescription className="text-xs">마스터 데이터 표시 및 필터링을 설정합니다</DialogDescription>
           </DialogHeader>
           <div className="space-y-4">
-      {/* 좌측 패널 설정 */}
-      <div className="space-y-4 rounded-lg border border-border/50 bg-muted/40 p-4">
-        <h3 className="border-l-2 border-l-primary/40 pl-2 text-sm font-semibold">좌측 패널 설정 (마스터)</h3>
+            {/* 좌측 패널 설정 */}
+            <div className="border-border/50 bg-muted/40 space-y-4 rounded-lg border p-4">
+              <h3 className="border-l-primary/40 border-l-2 pl-2 text-sm font-semibold">좌측 패널 설정 (마스터)</h3>
 
-        {/* 🆕 좌측 패널 테이블 선택 */}
-        <div className="space-y-2">
-          <Label className="text-xs font-medium">표시 테이블</Label>
-          <Popover open={leftTableOpen} onOpenChange={setLeftTableOpen}>
-            <PopoverTrigger asChild>
-              <Button
-                variant="outline"
-                role="combobox"
-                aria-expanded={leftTableOpen}
-                className="h-9 w-full justify-between text-xs"
-              >
-                <div className="flex items-center gap-2 truncate">
-                  <Database className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
-                  <span className="truncate">
-                    {config.leftPanel?.tableName
-                      ? allTables.find((t) => (t.tableName || t.table_name) === config.leftPanel?.tableName)?.tableLabel ||
-                        allTables.find((t) => (t.tableName || t.table_name) === config.leftPanel?.tableName)?.displayName ||
-                        config.leftPanel?.tableName
-                      : "테이블을 선택하세요"}
-                  </span>
-                </div>
-                <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-              </Button>
-            </PopoverTrigger>
-            <PopoverContent className="w-[300px] p-0" align="start">
-              <Command>
-                <CommandInput placeholder="테이블 검색..." className="text-xs" />
-                <CommandList>
-                  <CommandEmpty className="py-3 text-center text-xs text-muted-foreground">
-                    테이블을 찾을 수 없습니다.
-                  </CommandEmpty>
-                  
-                  {/* 화면 기본 테이블 */}
-                  {screenTableName && (
-                    <CommandGroup heading="기본 (화면 테이블)">
-                      <CommandItem
-                        value={screenTableName}
-                        onSelect={() => {
-                          updateLeftPanel({ tableName: screenTableName, columns: [] });
-                          setLeftTableOpen(false);
-                        }}
-                        className="text-xs"
-                      >
-                        <Check
-                          className={cn(
-                            "mr-2 h-4 w-4",
-                            config.leftPanel?.tableName === screenTableName ? "opacity-100" : "opacity-0"
-                          )}
-                        />
-                        <Database className="mr-2 h-3.5 w-3.5 text-blue-500" />
-                        {allTables.find((t) => (t.tableName || t.table_name) === screenTableName)?.tableLabel ||
-                          allTables.find((t) => (t.tableName || t.table_name) === screenTableName)?.displayName ||
-                          screenTableName}
-                      </CommandItem>
-                    </CommandGroup>
-                  )}
+              {/* 🆕 좌측 패널 테이블 선택 */}
+              <div className="space-y-2">
+                <Label className="text-xs font-medium">표시 테이블</Label>
+                <Popover open={leftTableOpen} onOpenChange={setLeftTableOpen}>
+                  <PopoverTrigger asChild>
+                    <Button
+                      variant="outline"
+                      role="combobox"
+                      aria-expanded={leftTableOpen}
+                      className="h-9 w-full justify-between text-xs"
+                    >
+                      <div className="flex items-center gap-2 truncate">
+                        <Database className="text-muted-foreground h-3.5 w-3.5 shrink-0" />
+                        <span className="truncate">
+                          {config.leftPanel?.tableName
+                            ? allTables.find((t) => (t.tableName || t.table_name) === config.leftPanel?.tableName)
+                                ?.tableLabel ||
+                              allTables.find((t) => (t.tableName || t.table_name) === config.leftPanel?.tableName)
+                                ?.displayName ||
+                              config.leftPanel?.tableName
+                            : "테이블을 선택하세요"}
+                        </span>
+                      </div>
+                      <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-[300px] p-0" align="start">
+                    <Command>
+                      <CommandInput placeholder="테이블 검색..." className="text-xs" />
+                      <CommandList>
+                        <CommandEmpty className="text-muted-foreground py-3 text-center text-xs">
+                          테이블을 찾을 수 없습니다.
+                        </CommandEmpty>
 
-                  {/* 전체 테이블 */}
-                  <CommandGroup heading="전체 테이블">
-                    {allTables
-                      .filter((t) => (t.tableName || t.table_name) !== screenTableName)
-                      .map((table) => {
-                        const tableName = table.tableName || table.table_name;
-                        const displayName = table.tableLabel || table.displayName || tableName;
-                        return (
-                          <CommandItem
-                            key={tableName}
-                            value={tableName}
-                            onSelect={() => {
-                              updateLeftPanel({ tableName, columns: [] });
-                              setLeftTableOpen(false);
-                            }}
-                            className="text-xs"
-                          >
-                            <Check
-                              className={cn(
-                                "mr-2 h-4 w-4",
-                                config.leftPanel?.tableName === tableName ? "opacity-100" : "opacity-0"
-                              )}
-                            />
-                            <Database className="mr-2 h-3.5 w-3.5 text-muted-foreground" />
-                            <span className="truncate">{displayName}</span>
-                          </CommandItem>
-                        );
-                      })}
-                  </CommandGroup>
-                </CommandList>
-              </Command>
-            </PopoverContent>
-          </Popover>
-          {config.leftPanel?.tableName && config.leftPanel?.tableName !== screenTableName && (
-            <p className="text-[10px] text-muted-foreground">
-              화면 기본 테이블이 아닌 다른 테이블의 데이터를 표시합니다.
-            </p>
-          )}
-        </div>
+                        {/* 화면 기본 테이블 */}
+                        {screenTableName && (
+                          <CommandGroup heading="기본 (화면 테이블)">
+                            <CommandItem
+                              value={screenTableName}
+                              onSelect={() => {
+                                updateLeftPanel({ tableName: screenTableName, columns: [] });
+                                setLeftTableOpen(false);
+                              }}
+                              className="text-xs"
+                            >
+                              <Check
+                                className={cn(
+                                  "mr-2 h-4 w-4",
+                                  config.leftPanel?.tableName === screenTableName ? "opacity-100" : "opacity-0",
+                                )}
+                              />
+                              <Database className="text-primary mr-2 h-3.5 w-3.5" />
+                              {allTables.find((t) => (t.tableName || t.table_name) === screenTableName)?.tableLabel ||
+                                allTables.find((t) => (t.tableName || t.table_name) === screenTableName)?.displayName ||
+                                screenTableName}
+                            </CommandItem>
+                          </CommandGroup>
+                        )}
 
-        <div className="space-y-2">
-          <Label>패널 제목</Label>
-          <Input
-            value={localTitles.left}
-            onChange={(e) => {
-              setIsUserEditing(true);
-              setLocalTitles((prev) => ({ ...prev, left: e.target.value }));
-            }}
-            onBlur={() => {
-              setIsUserEditing(false);
-              updateLeftPanel({ title: localTitles.left });
-            }}
-            placeholder="좌측 패널 제목"
-          />
-        </div>
+                        {/* 전체 테이블 */}
+                        <CommandGroup heading="전체 테이블">
+                          {allTables
+                            .filter((t) => (t.tableName || t.table_name) !== screenTableName)
+                            .map((table) => {
+                              const tableName = table.tableName || table.table_name;
+                              const displayName = table.tableLabel || table.displayName || tableName;
+                              return (
+                                <CommandItem
+                                  key={tableName}
+                                  value={tableName}
+                                  onSelect={() => {
+                                    updateLeftPanel({ tableName, columns: [] });
+                                    setLeftTableOpen(false);
+                                  }}
+                                  className="text-xs"
+                                >
+                                  <Check
+                                    className={cn(
+                                      "mr-2 h-4 w-4",
+                                      config.leftPanel?.tableName === tableName ? "opacity-100" : "opacity-0",
+                                    )}
+                                  />
+                                  <Database className="text-muted-foreground mr-2 h-3.5 w-3.5" />
+                                  <span className="truncate">{displayName}</span>
+                                </CommandItem>
+                              );
+                            })}
+                        </CommandGroup>
+                      </CommandList>
+                    </Command>
+                  </PopoverContent>
+                </Popover>
+                {config.leftPanel?.tableName && config.leftPanel?.tableName !== screenTableName && (
+                  <p className="text-muted-foreground text-[10px]">
+                    화면 기본 테이블이 아닌 다른 테이블의 데이터를 표시합니다.
+                  </p>
+                )}
+              </div>
 
-        {/* 헤더 높이 설정 - 숨김 처리 */}
-        {/* <div className="space-y-2">
+              <div className="space-y-2">
+                <Label>패널 제목</Label>
+                <Input
+                  value={localTitles.left}
+                  onChange={(e) => {
+                    setIsUserEditing(true);
+                    setLocalTitles((prev) => ({ ...prev, left: e.target.value }));
+                  }}
+                  onBlur={() => {
+                    setIsUserEditing(false);
+                    updateLeftPanel({ title: localTitles.left });
+                  }}
+                  placeholder="좌측 패널 제목"
+                />
+              </div>
+
+              {/* 헤더 높이 설정 - 숨김 처리 */}
+              {/* <div className="space-y-2">
           <Label>헤더 높이 (px)</Label>
           <Input
             type="number"
@@ -1973,454 +2149,532 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
           <p className="text-muted-foreground text-xs">패널 상단 헤더의 높이 (기본: 48px)</p>
         </div> */}
 
-        <div className="space-y-2">
-          <Label>표시 모드</Label>
-          <Select
-            value={config.leftPanel?.displayMode || "list"}
-            onValueChange={(value: "list" | "table" | "custom") => updateLeftPanel({ displayMode: value })}
-          >
-            <SelectTrigger className="h-10 bg-white">
-              <SelectValue placeholder="표시 모드 선택">
-                {(config.leftPanel?.displayMode || "list") === "list" ? "목록 (LIST)" : (config.leftPanel?.displayMode || "list") === "table" ? "테이블 (TABLE)" : "커스텀 (CUSTOM)"}
-              </SelectValue>
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="list">
-                <div className="flex flex-col py-1">
-                  <span className="text-sm font-medium">목록 (LIST)</span>
-                  <span className="text-xs text-gray-500">클릭 가능한 항목 목록 (기본)</span>
-                </div>
-              </SelectItem>
-              <SelectItem value="table">
-                <div className="flex flex-col py-1">
-                  <span className="text-sm font-medium">테이블 (TABLE)</span>
-                  <span className="text-xs text-gray-500">컬럼 헤더가 있는 테이블 형식</span>
-                </div>
-              </SelectItem>
-              <SelectItem value="custom">
-                <div className="flex flex-col py-1">
-                  <span className="text-sm font-medium">커스텀 (CUSTOM)</span>
-                  <span className="text-xs text-gray-500">패널 안에 컴포넌트 자유 배치</span>
-                </div>
-              </SelectItem>
-            </SelectContent>
-          </Select>
-          {config.leftPanel?.displayMode === "custom" && (
-            <p className="text-xs text-amber-600">
-              화면 디자이너에서 좌측 패널에 컴포넌트를 드래그하여 배치하세요.
-            </p>
-          )}
-        </div>
-
-        {/* 🆕 커스텀 모드: 배치된 컴포넌트 목록 */}
-        {config.leftPanel?.displayMode === "custom" && (
-          <div className="space-y-2">
-            <Label className="text-xs font-medium">배치된 컴포넌트</Label>
-            {!config.leftPanel?.components || config.leftPanel.components.length === 0 ? (
-              <div className="rounded-md border border-dashed bg-muted/30 p-4 text-center">
-                <Move className="mx-auto mb-2 h-6 w-6 text-muted-foreground" />
-                <p className="text-muted-foreground text-xs">
-                  디자인 화면에서 컴포넌트를 드래그하여 추가하세요
-                </p>
-              </div>
-            ) : (
               <div className="space-y-2">
-                {config.leftPanel.components.map((comp: PanelInlineComponent) => (
-                  <div
-                    key={comp.id}
-                    className="flex items-center justify-between rounded-md border bg-background p-2"
-                  >
-                    <div className="flex-1">
-                      <p className="text-xs font-medium">
-                        {comp.label || comp.componentType}
-                      </p>
-                      <p className="text-muted-foreground text-[10px]">
-                        {comp.componentType} | 위치: ({comp.position?.x || 0}, {comp.position?.y || 0}) | 크기: {comp.size?.width || 0}x{comp.size?.height || 0}
-                      </p>
-                    </div>
-                    <Button
-                      onClick={() => {
-                        const updatedComponents = (config.leftPanel?.components || []).filter(
-                          (c: PanelInlineComponent) => c.id !== comp.id
-                        );
-                        onChange({
-                          ...config,
-                          leftPanel: {
-                            ...config.leftPanel,
-                            components: updatedComponents,
-                          },
-                        });
-                      }}
-                      size="sm"
-                      variant="ghost"
-                      className="h-6 w-6 p-0 text-destructive hover:text-destructive"
-                    >
-                      <Trash2 className="h-3 w-3" />
-                    </Button>
-                  </div>
-                ))}
-              </div>
-            )}
-          </div>
-        )}
-
-        {/* 좌측 패널 표시 컬럼 설정 - 드래그앤드롭 (커스텀 모드가 아닐 때만) */}
-        {config.leftPanel?.displayMode !== "custom" && (() => {
-          const selectedColumns = config.leftPanel?.columns || [];
-          const filteredTableColumns = leftTableColumns.filter((c) => !["company_code", "company_name"].includes(c.columnName));
-          const unselectedColumns = filteredTableColumns.filter((c) => !selectedColumns.some((sc) => sc.name === c.columnName));
-          const dbNumericTypes = ["numeric", "decimal", "integer", "bigint", "double precision", "real", "smallint", "int4", "int8", "float4", "float8"];
-          const inputNumericTypes = ["number", "decimal", "currency", "integer"];
-
-          const handleLeftDragEnd = (event: DragEndEvent) => {
-            const { active, over } = event;
-            if (over && active.id !== over.id) {
-              const oldIndex = selectedColumns.findIndex((c) => c.name === active.id);
-              const newIndex = selectedColumns.findIndex((c) => c.name === over.id);
-              if (oldIndex !== -1 && newIndex !== -1) {
-                updateLeftPanel({ columns: arrayMove([...selectedColumns], oldIndex, newIndex) });
-              }
-            }
-          };
-
-          return (
-            <div className="space-y-2">
-              <Label className="text-xs font-medium">표시할 컬럼 ({selectedColumns.length}개 선택)</Label>
-              <div className="max-h-[400px] overflow-y-auto rounded-md border p-2">
-                {leftTableColumns.length === 0 ? (
-                  <p className="text-muted-foreground py-2 text-center text-xs">컬럼 로딩 중...</p>
-                ) : (
-                  <>
-                    {/* 선택된 컬럼 - 드래그앤드롭 정렬 */}
-                    {selectedColumns.length > 0 && (
-                      <DndContext collisionDetection={closestCenter} onDragEnd={handleLeftDragEnd}>
-                        <SortableContext items={selectedColumns.map((c) => c.name)} strategy={verticalListSortingStrategy}>
-                          <div className="space-y-1">
-                            {selectedColumns.map((col, index) => {
-                              const colInfo = leftTableColumns.find((c) => c.columnName === col.name);
-                              const isNumeric = colInfo && (
-                                dbNumericTypes.includes(colInfo.dataType?.toLowerCase() || "") ||
-                                inputNumericTypes.includes(colInfo.input_type?.toLowerCase() || "") ||
-                                inputNumericTypes.includes(colInfo.webType?.toLowerCase() || "")
-                              );
-                              return (
-                                <SortableColumnRow
-                                  key={col.name}
-                                  id={col.name}
-                                  col={col}
-                                  index={index}
-                                  isNumeric={!!isNumeric}
-                                  isEntityJoin={!!(col as any).isEntityJoin}
-                                  onLabelChange={(value) => {
-                                    const newColumns = [...selectedColumns];
-                                    newColumns[index] = { ...newColumns[index], label: value };
-                                    updateLeftPanel({ columns: newColumns });
-                                  }}
-                                  onWidthChange={(value) => {
-                                    const newColumns = [...selectedColumns];
-                                    newColumns[index] = { ...newColumns[index], width: value };
-                                    updateLeftPanel({ columns: newColumns });
-                                  }}
-                                  onFormatChange={(checked) => {
-                                    const newColumns = [...selectedColumns];
-                                    newColumns[index] = { ...newColumns[index], format: { ...newColumns[index].format, type: "number", thousandSeparator: checked } };
-                                    updateLeftPanel({ columns: newColumns });
-                                  }}
-                                  onRemove={() => updateLeftPanel({ columns: selectedColumns.filter((_, i) => i !== index) })}
-                                />
-                              );
-                            })}
-                          </div>
-                        </SortableContext>
-                      </DndContext>
-                    )}
-
-                    {/* 구분선 */}
-                    {selectedColumns.length > 0 && unselectedColumns.length > 0 && (
-                      <div className="border-border/60 my-2 flex items-center gap-2 border-t pt-2">
-                        <span className="text-muted-foreground text-[10px]">미선택 컬럼</span>
+                <Label>표시 모드</Label>
+                <Select
+                  value={config.leftPanel?.displayMode || "list"}
+                  onValueChange={(value: "list" | "table" | "custom") => updateLeftPanel({ displayMode: value })}
+                >
+                  <SelectTrigger className="h-10 bg-white">
+                    <SelectValue placeholder="표시 모드 선택">
+                      {(config.leftPanel?.displayMode || "list") === "list"
+                        ? "목록 (LIST)"
+                        : (config.leftPanel?.displayMode || "list") === "table"
+                          ? "테이블 (TABLE)"
+                          : "커스텀 (CUSTOM)"}
+                    </SelectValue>
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="list">
+                      <div className="flex flex-col py-1">
+                        <span className="text-sm font-medium">목록 (LIST)</span>
+                        <span className="text-muted-foreground text-xs">클릭 가능한 항목 목록 (기본)</span>
                       </div>
-                    )}
+                    </SelectItem>
+                    <SelectItem value="table">
+                      <div className="flex flex-col py-1">
+                        <span className="text-sm font-medium">테이블 (TABLE)</span>
+                        <span className="text-muted-foreground text-xs">컬럼 헤더가 있는 테이블 형식</span>
+                      </div>
+                    </SelectItem>
+                    <SelectItem value="custom">
+                      <div className="flex flex-col py-1">
+                        <span className="text-sm font-medium">커스텀 (CUSTOM)</span>
+                        <span className="text-muted-foreground text-xs">패널 안에 컴포넌트 자유 배치</span>
+                      </div>
+                    </SelectItem>
+                  </SelectContent>
+                </Select>
+                {config.leftPanel?.displayMode === "custom" && (
+                  <p className="text-xs text-amber-600">
+                    화면 디자이너에서 좌측 패널에 컴포넌트를 드래그하여 배치하세요.
+                  </p>
+                )}
+              </div>
 
-                    {/* 미선택 컬럼 - 클릭으로 추가 */}
-                    <div className="space-y-0.5">
-                      {unselectedColumns.map((column) => (
+              {/* 🆕 커스텀 모드: 배치된 컴포넌트 목록 */}
+              {config.leftPanel?.displayMode === "custom" && (
+                <div className="space-y-2">
+                  <Label className="text-xs font-medium">배치된 컴포넌트</Label>
+                  {!config.leftPanel?.components || config.leftPanel.components.length === 0 ? (
+                    <div className="bg-muted/30 rounded-md border border-dashed p-4 text-center">
+                      <Move className="text-muted-foreground mx-auto mb-2 h-6 w-6" />
+                      <p className="text-muted-foreground text-xs">디자인 화면에서 컴포넌트를 드래그하여 추가하세요</p>
+                    </div>
+                  ) : (
+                    <div className="space-y-2">
+                      {config.leftPanel.components.map((comp: PanelInlineComponent) => (
                         <div
-                          key={column.columnName}
-                          className="hover:bg-muted/50 flex cursor-pointer items-center gap-2 rounded px-2 py-1.5"
-                          onClick={() => {
-                            updateLeftPanel({ columns: [...selectedColumns, { name: column.columnName, label: column.columnLabel || column.columnName, width: 100 }] });
-                          }}
+                          key={comp.id}
+                          className="bg-background flex items-center justify-between rounded-md border p-2"
                         >
-                          <Checkbox checked={false} className="pointer-events-none h-3.5 w-3.5 shrink-0" />
-                          <span className="text-muted-foreground truncate text-xs">{column.columnLabel || column.columnName}</span>
+                          <div className="flex-1">
+                            <p className="text-xs font-medium">{comp.label || comp.componentType}</p>
+                            <p className="text-muted-foreground text-[10px]">
+                              {comp.componentType} | 위치: ({comp.position?.x || 0}, {comp.position?.y || 0}) | 크기:{" "}
+                              {comp.size?.width || 0}x{comp.size?.height || 0}
+                            </p>
+                          </div>
+                          <Button
+                            onClick={() => {
+                              const updatedComponents = (config.leftPanel?.components || []).filter(
+                                (c: PanelInlineComponent) => c.id !== comp.id,
+                              );
+                              onChange({
+                                ...config,
+                                leftPanel: {
+                                  ...config.leftPanel,
+                                  components: updatedComponents,
+                                },
+                              });
+                            }}
+                            size="sm"
+                            variant="ghost"
+                            className="text-destructive hover:text-destructive h-6 w-6 p-0"
+                          >
+                            <Trash2 className="h-3 w-3" />
+                          </Button>
                         </div>
                       ))}
                     </div>
+                  )}
+                </div>
+              )}
 
-                    {/* 좌측 패널 - Entity 조인 컬럼 아코디언 */}
-                    {(() => {
-                      const leftTable = config.leftPanel?.tableName || screenTableName;
-                      const joinData = leftTable ? entityJoinColumns[leftTable] : null;
-                      if (!joinData || joinData.joinTables.length === 0) return null;
+              {/* 좌측 패널 표시 컬럼 설정 - 드래그앤드롭 (커스텀 모드가 아닐 때만) */}
+              {config.leftPanel?.displayMode !== "custom" &&
+                (() => {
+                  const selectedColumns = config.leftPanel?.columns || [];
+                  const filteredTableColumns = leftTableColumns.filter(
+                    (c) => !["company_code", "company_name"].includes(c.columnName),
+                  );
+                  const unselectedColumns = filteredTableColumns.filter(
+                    (c) => !selectedColumns.some((sc) => sc.name === c.columnName),
+                  );
+                  const dbNumericTypes = [
+                    "numeric",
+                    "decimal",
+                    "integer",
+                    "bigint",
+                    "double precision",
+                    "real",
+                    "smallint",
+                    "int4",
+                    "int8",
+                    "float4",
+                    "float8",
+                  ];
+                  const inputNumericTypes = ["number", "decimal", "currency", "integer"];
 
-                      return joinData.joinTables.map((joinTable, tableIndex) => {
-                        const joinColumnsToShow = joinTable.availableColumns.filter((column) => {
-                          const matchingJoinColumn = joinData.availableColumns.find(
-                            (jc) => jc.tableName === joinTable.tableName && jc.columnName === column.columnName,
-                          );
-                          if (!matchingJoinColumn) return false;
-                          return !selectedColumns.some((c) => c.name === matchingJoinColumn.joinAlias);
-                        });
-                        const addedCount = joinTable.availableColumns.length - joinColumnsToShow.length;
+                  const handleLeftDragEnd = (event: DragEndEvent) => {
+                    const { active, over } = event;
+                    if (over && active.id !== over.id) {
+                      const oldIndex = selectedColumns.findIndex((c) => c.name === active.id);
+                      const newIndex = selectedColumns.findIndex((c) => c.name === over.id);
+                      if (oldIndex !== -1 && newIndex !== -1) {
+                        updateLeftPanel({ columns: arrayMove([...selectedColumns], oldIndex, newIndex) });
+                      }
+                    }
+                  };
 
-                        if (joinColumnsToShow.length === 0 && addedCount === 0) return null;
+                  return (
+                    <div className="space-y-2">
+                      <Label className="text-xs font-medium">표시할 컬럼 ({selectedColumns.length}개 선택)</Label>
+                      <div className="max-h-[400px] overflow-y-auto rounded-md border p-2">
+                        {leftTableColumns.length === 0 ? (
+                          <p className="text-muted-foreground py-2 text-center text-xs">컬럼 로딩 중...</p>
+                        ) : (
+                          <>
+                            {/* 선택된 컬럼 - 드래그앤드롭 정렬 */}
+                            {selectedColumns.length > 0 && (
+                              <DndContext collisionDetection={closestCenter} onDragEnd={handleLeftDragEnd}>
+                                <SortableContext
+                                  items={selectedColumns.map((c) => c.name)}
+                                  strategy={verticalListSortingStrategy}
+                                >
+                                  <div className="space-y-1">
+                                    {selectedColumns.map((col, index) => {
+                                      const colInfo = leftTableColumns.find((c) => c.columnName === col.name);
+                                      const isNumeric =
+                                        colInfo &&
+                                        (dbNumericTypes.includes(colInfo.dataType?.toLowerCase() || "") ||
+                                          inputNumericTypes.includes(colInfo.input_type?.toLowerCase() || "") ||
+                                          inputNumericTypes.includes(colInfo.webType?.toLowerCase() || ""));
+                                      return (
+                                        <SortableColumnRow
+                                          key={col.name}
+                                          id={col.name}
+                                          col={col}
+                                          index={index}
+                                          isNumeric={!!isNumeric}
+                                          isEntityJoin={!!(col as any).isEntityJoin}
+                                          onLabelChange={(value) => {
+                                            const newColumns = [...selectedColumns];
+                                            newColumns[index] = { ...newColumns[index], label: value };
+                                            updateLeftPanel({ columns: newColumns });
+                                          }}
+                                          onWidthChange={(value) => {
+                                            const newColumns = [...selectedColumns];
+                                            newColumns[index] = { ...newColumns[index], width: value };
+                                            updateLeftPanel({ columns: newColumns });
+                                          }}
+                                          onFormatChange={(checked) => {
+                                            const newColumns = [...selectedColumns];
+                                            newColumns[index] = {
+                                              ...newColumns[index],
+                                              format: {
+                                                ...newColumns[index].format,
+                                                type: "number",
+                                                thousandSeparator: checked,
+                                              },
+                                            };
+                                            updateLeftPanel({ columns: newColumns });
+                                          }}
+                                          onRemove={() =>
+                                            updateLeftPanel({ columns: selectedColumns.filter((_, i) => i !== index) })
+                                          }
+                                        />
+                                      );
+                                    })}
+                                  </div>
+                                </SortableContext>
+                              </DndContext>
+                            )}
 
-                        return (
-                          <details key={`join-${tableIndex}`} className="group">
-                            <summary className="border-border/60 my-2 flex cursor-pointer list-none items-center gap-2 border-t pt-2 select-none">
-                              <ChevronRight className="h-3 w-3 shrink-0 text-blue-500 transition-transform group-open:rotate-90" />
-                              <Link2 className="h-3 w-3 shrink-0 text-blue-500" />
-                              <span className="text-[10px] font-medium text-blue-600">{joinTable.tableName}</span>
-                              {addedCount > 0 && (
-                                <span className="rounded-full bg-blue-100 px-1.5 text-[9px] font-medium text-blue-600">{addedCount}개 선택</span>
-                              )}
-                              <span className="text-[9px] text-gray-400">{joinColumnsToShow.length}개 남음</span>
-                            </summary>
-                            <div className="space-y-0.5 pt-1">
-                              {joinColumnsToShow.map((column, colIndex) => {
-                                const matchingJoinColumn = joinData.availableColumns.find(
-                                  (jc) => jc.tableName === joinTable.tableName && jc.columnName === column.columnName,
-                                );
-                                if (!matchingJoinColumn) return null;
+                            {/* 구분선 */}
+                            {selectedColumns.length > 0 && unselectedColumns.length > 0 && (
+                              <div className="border-border/60 my-2 flex items-center gap-2 border-t pt-2">
+                                <span className="text-muted-foreground text-[10px]">미선택 컬럼</span>
+                              </div>
+                            )}
+
+                            {/* 미선택 컬럼 - 클릭으로 추가 */}
+                            <div className="space-y-0.5">
+                              {unselectedColumns.map((column) => (
+                                <div
+                                  key={column.columnName}
+                                  className="hover:bg-muted/50 flex cursor-pointer items-center gap-2 rounded px-2 py-1.5"
+                                  onClick={() => {
+                                    updateLeftPanel({
+                                      columns: [
+                                        ...selectedColumns,
+                                        {
+                                          name: column.columnName,
+                                          label: column.columnLabel || column.columnName,
+                                          width: 100,
+                                        },
+                                      ],
+                                    });
+                                  }}
+                                >
+                                  <Checkbox checked={false} className="pointer-events-none h-3.5 w-3.5 shrink-0" />
+                                  <span className="text-muted-foreground truncate text-xs">
+                                    {column.columnLabel || column.columnName}
+                                  </span>
+                                </div>
+                              ))}
+                            </div>
+
+                            {/* 좌측 패널 - Entity 조인 컬럼 아코디언 */}
+                            {(() => {
+                              const leftTable = config.leftPanel?.tableName || screenTableName;
+                              const joinData = leftTable ? entityJoinColumns[leftTable] : null;
+                              if (!joinData || joinData.joinTables.length === 0) return null;
+
+                              return joinData.joinTables.map((joinTable, tableIndex) => {
+                                const joinColumnsToShow = joinTable.availableColumns.filter((column) => {
+                                  const matchingJoinColumn = joinData.availableColumns.find(
+                                    (jc) => jc.tableName === joinTable.tableName && jc.columnName === column.columnName,
+                                  );
+                                  if (!matchingJoinColumn) return false;
+                                  return !selectedColumns.some((c) => c.name === matchingJoinColumn.joinAlias);
+                                });
+                                const addedCount = joinTable.availableColumns.length - joinColumnsToShow.length;
+
+                                if (joinColumnsToShow.length === 0 && addedCount === 0) return null;
 
                                 return (
-                                  <div
-                                    key={colIndex}
-                                    className="flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 hover:bg-blue-50/60"
-                                    onClick={() => {
-                                      updateLeftPanel({
-                                        columns: [...selectedColumns, {
-                                          name: matchingJoinColumn.joinAlias,
-                                          label: matchingJoinColumn.suggestedLabel || matchingJoinColumn.columnLabel,
-                                          width: 100,
-                                          isEntityJoin: true,
-                                          joinInfo: {
-                                            sourceTable: leftTable!,
-                                            sourceColumn: (joinTable as any).joinConfig?.sourceColumn || "",
-                                            referenceTable: matchingJoinColumn.tableName,
-                                            joinAlias: matchingJoinColumn.joinAlias,
-                                          },
-                                        }],
-                                      });
-                                    }}
-                                  >
-                                    <Checkbox checked={false} className="pointer-events-none h-3.5 w-3.5 shrink-0" />
-                                    <Link2 className="h-3 w-3 shrink-0 text-blue-500" />
-                                    <span className="truncate text-xs text-blue-700">{column.columnLabel || column.columnName}</span>
-                                  </div>
+                                  <details key={`join-${tableIndex}`} className="group">
+                                    <summary className="border-border/60 my-2 flex cursor-pointer list-none items-center gap-2 border-t pt-2 select-none">
+                                      <ChevronRight className="text-primary h-3 w-3 shrink-0 transition-transform group-open:rotate-90" />
+                                      <Link2 className="text-primary h-3 w-3 shrink-0" />
+                                      <span className="text-primary text-[10px] font-medium">
+                                        {joinTable.tableName}
+                                      </span>
+                                      {addedCount > 0 && (
+                                        <span className="bg-primary/10 text-primary rounded-full px-1.5 text-[9px] font-medium">
+                                          {addedCount}개 선택
+                                        </span>
+                                      )}
+                                      <span className="text-muted-foreground/70 text-[9px]">
+                                        {joinColumnsToShow.length}개 남음
+                                      </span>
+                                    </summary>
+                                    <div className="space-y-0.5 pt-1">
+                                      {joinColumnsToShow.map((column, colIndex) => {
+                                        const matchingJoinColumn = joinData.availableColumns.find(
+                                          (jc) =>
+                                            jc.tableName === joinTable.tableName && jc.columnName === column.columnName,
+                                        );
+                                        if (!matchingJoinColumn) return null;
+
+                                        return (
+                                          <div
+                                            key={colIndex}
+                                            className="hover:bg-primary/10/60 flex cursor-pointer items-center gap-2 rounded px-2 py-1.5"
+                                            onClick={() => {
+                                              updateLeftPanel({
+                                                columns: [
+                                                  ...selectedColumns,
+                                                  {
+                                                    name: matchingJoinColumn.joinAlias,
+                                                    label:
+                                                      matchingJoinColumn.suggestedLabel ||
+                                                      matchingJoinColumn.columnLabel,
+                                                    width: 100,
+                                                    isEntityJoin: true,
+                                                    joinInfo: {
+                                                      sourceTable: leftTable!,
+                                                      sourceColumn: (joinTable as any).joinConfig?.sourceColumn || "",
+                                                      referenceTable: matchingJoinColumn.tableName,
+                                                      joinAlias: matchingJoinColumn.joinAlias,
+                                                    },
+                                                  },
+                                                ],
+                                              });
+                                            }}
+                                          >
+                                            <Checkbox
+                                              checked={false}
+                                              className="pointer-events-none h-3.5 w-3.5 shrink-0"
+                                            />
+                                            <Link2 className="text-primary h-3 w-3 shrink-0" />
+                                            <span className="text-primary truncate text-xs">
+                                              {column.columnLabel || column.columnName}
+                                            </span>
+                                          </div>
+                                        );
+                                      })}
+                                      {joinColumnsToShow.length === 0 && (
+                                        <p className="text-muted-foreground/70 px-2 py-1 text-[10px]">
+                                          모든 컬럼이 이미 추가되었습니다
+                                        </p>
+                                      )}
+                                    </div>
+                                  </details>
                                 );
-                              })}
-                              {joinColumnsToShow.length === 0 && (
-                                <p className="px-2 py-1 text-[10px] text-gray-400">모든 컬럼이 이미 추가되었습니다</p>
-                              )}
-                            </div>
-                          </details>
-                        );
-                      });
-                    })()}
-                  </>
+                              });
+                            })()}
+                          </>
+                        )}
+                      </div>
+                    </div>
+                  );
+                })()}
+            </div>
+
+            {/* 좌측 패널 데이터 필터링 */}
+            <div className="border-border/50 bg-muted/40 space-y-4 rounded-lg border p-4">
+              <h3 className="border-l-primary/40 border-l-2 pl-2 text-sm font-semibold">좌측 패널 데이터 필터링</h3>
+              <p className="text-muted-foreground text-xs">특정 컬럼 값으로 좌측 패널 데이터를 필터링합니다</p>
+              <DataFilterConfigPanel
+                tableName={config.leftPanel?.tableName || screenTableName}
+                columns={leftTableColumns.map(
+                  (col) =>
+                    ({
+                      columnName: col.columnName,
+                      columnLabel: col.columnLabel || col.columnName,
+                      dataType: col.dataType || "text",
+                      input_type: (col as any).input_type,
+                    }) as any,
                 )}
-              </div>
+                config={config.leftPanel?.dataFilter}
+                onConfigChange={(dataFilter) => updateLeftPanel({ dataFilter })}
+                menuObjid={menuObjid} // 🆕 메뉴 OBJID 전달
+              />
             </div>
-          );
-        })()}
-      </div>
 
-      {/* 좌측 패널 데이터 필터링 */}
-      <div className="space-y-4 rounded-lg border border-border/50 bg-muted/40 p-4">
-        <h3 className="border-l-2 border-l-primary/40 pl-2 text-sm font-semibold">좌측 패널 데이터 필터링</h3>
-        <p className="text-muted-foreground text-xs">특정 컬럼 값으로 좌측 패널 데이터를 필터링합니다</p>
-        <DataFilterConfigPanel
-          tableName={config.leftPanel?.tableName || screenTableName}
-          columns={leftTableColumns.map(
-            (col) =>
-              ({
-                columnName: col.columnName,
-                columnLabel: col.columnLabel || col.columnName,
-                dataType: col.dataType || "text",
-                input_type: (col as any).input_type,
-              }) as any,
-          )}
-          config={config.leftPanel?.dataFilter}
-          onConfigChange={(dataFilter) => updateLeftPanel({ dataFilter })}
-          menuObjid={menuObjid} // 🆕 메뉴 OBJID 전달
-        />
-      </div>
+            {/* 좌측 패널 버튼 설정 */}
+            <div className="border-border/50 bg-muted/40 space-y-4 rounded-lg border p-4">
+              <h3 className="border-l-primary/40 border-l-2 pl-2 text-sm font-semibold">좌측 패널 버튼 설정</h3>
 
-      {/* 좌측 패널 버튼 설정 */}
-      <div className="space-y-4 rounded-lg border border-border/50 bg-muted/40 p-4">
-        <h3 className="border-l-2 border-l-primary/40 pl-2 text-sm font-semibold">좌측 패널 버튼 설정</h3>
-
-        {/* 버튼 표시 체크박스 */}
-        <div className="grid grid-cols-4 gap-2">
-          <div className="flex items-center gap-1">
-            <Checkbox
-              id="left-showSearch"
-              checked={config.leftPanel?.showSearch ?? false}
-              onCheckedChange={(checked) => updateLeftPanel({ showSearch: !!checked })}
-            />
-            <label htmlFor="left-showSearch" className="text-xs">검색</label>
-          </div>
-          <div className="flex items-center gap-1">
-            <Checkbox
-              id="left-showAdd"
-              checked={config.leftPanel?.showAdd ?? false}
-              onCheckedChange={(checked) => updateLeftPanel({ showAdd: !!checked })}
-            />
-            <label htmlFor="left-showAdd" className="text-xs">추가</label>
-          </div>
-          <div className="flex items-center gap-1">
-            <Checkbox
-              id="left-showEdit"
-              checked={config.leftPanel?.showEdit ?? true}
-              onCheckedChange={(checked) => updateLeftPanel({ showEdit: !!checked })}
-            />
-            <label htmlFor="left-showEdit" className="text-xs">수정</label>
-          </div>
-          <div className="flex items-center gap-1">
-            <Checkbox
-              id="left-showDelete"
-              checked={config.leftPanel?.showDelete ?? true}
-              onCheckedChange={(checked) => updateLeftPanel({ showDelete: !!checked })}
-            />
-            <label htmlFor="left-showDelete" className="text-xs">삭제</label>
-          </div>
-        </div>
-
-        {/* 추가 버튼 상세 설정 */}
-        {config.leftPanel?.showAdd && (
-          <div className="space-y-3 rounded-lg border border-border/50 bg-muted/40 p-3">
-            <h3 className="border-l-2 border-l-primary/40 pl-2 text-xs font-semibold">추가 버튼 설정</h3>
-            <div className="space-y-2">
-              <div className="space-y-1">
-                <Label className="text-[10px]">추가 모드</Label>
-                <Select
-                  value={config.leftPanel?.addButton?.mode || "auto"}
-                  onValueChange={(value: "auto" | "modal") =>
-                    updateLeftPanel({
-                      addButton: { ...config.leftPanel?.addButton, enabled: true, mode: value },
-                    })
-                  }
-                >
-                  <SelectTrigger className="h-7 text-xs">
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="auto">자동 (내장 폼)</SelectItem>
-                    <SelectItem value="modal">모달 화면</SelectItem>
-                  </SelectContent>
-                </Select>
+              {/* 버튼 표시 체크박스 */}
+              <div className="grid grid-cols-4 gap-2">
+                <div className="flex items-center gap-1">
+                  <Checkbox
+                    id="left-showSearch"
+                    checked={config.leftPanel?.showSearch ?? false}
+                    onCheckedChange={(checked) => updateLeftPanel({ showSearch: !!checked })}
+                  />
+                  <label htmlFor="left-showSearch" className="text-xs">
+                    검색
+                  </label>
+                </div>
+                <div className="flex items-center gap-1">
+                  <Checkbox
+                    id="left-showAdd"
+                    checked={config.leftPanel?.showAdd ?? false}
+                    onCheckedChange={(checked) => updateLeftPanel({ showAdd: !!checked })}
+                  />
+                  <label htmlFor="left-showAdd" className="text-xs">
+                    추가
+                  </label>
+                </div>
+                <div className="flex items-center gap-1">
+                  <Checkbox
+                    id="left-showEdit"
+                    checked={config.leftPanel?.showEdit ?? true}
+                    onCheckedChange={(checked) => updateLeftPanel({ showEdit: !!checked })}
+                  />
+                  <label htmlFor="left-showEdit" className="text-xs">
+                    수정
+                  </label>
+                </div>
+                <div className="flex items-center gap-1">
+                  <Checkbox
+                    id="left-showDelete"
+                    checked={config.leftPanel?.showDelete ?? true}
+                    onCheckedChange={(checked) => updateLeftPanel({ showDelete: !!checked })}
+                  />
+                  <label htmlFor="left-showDelete" className="text-xs">
+                    삭제
+                  </label>
+                </div>
               </div>
 
-              {config.leftPanel?.addButton?.mode === "modal" && (
-                <div className="space-y-1">
-                  <Label className="text-[10px]">추가 모달 화면</Label>
-                  <ScreenSelector
-                    value={config.leftPanel?.addButton?.modalScreenId}
-                    onChange={(screenId) =>
-                      updateLeftPanel({
-                        addButton: { ...config.leftPanel?.addButton, enabled: true, mode: "modal", modalScreenId: screenId },
-                      })
-                    }
-                  />
+              {/* 추가 버튼 상세 설정 */}
+              {config.leftPanel?.showAdd && (
+                <div className="border-border/50 bg-muted/40 space-y-3 rounded-lg border p-3">
+                  <h3 className="border-l-primary/40 border-l-2 pl-2 text-xs font-semibold">추가 버튼 설정</h3>
+                  <div className="space-y-2">
+                    <div className="space-y-1">
+                      <Label className="text-[10px]">추가 모드</Label>
+                      <Select
+                        value={config.leftPanel?.addButton?.mode || "auto"}
+                        onValueChange={(value: "auto" | "modal") =>
+                          updateLeftPanel({
+                            addButton: { ...config.leftPanel?.addButton, enabled: true, mode: value },
+                          })
+                        }
+                      >
+                        <SelectTrigger className="h-7 text-xs">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="auto">자동 (내장 폼)</SelectItem>
+                          <SelectItem value="modal">모달 화면</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+
+                    {config.leftPanel?.addButton?.mode === "modal" && (
+                      <div className="space-y-1">
+                        <Label className="text-[10px]">추가 모달 화면</Label>
+                        <ScreenSelector
+                          value={config.leftPanel?.addButton?.modalScreenId}
+                          onChange={(screenId) =>
+                            updateLeftPanel({
+                              addButton: {
+                                ...config.leftPanel?.addButton,
+                                enabled: true,
+                                mode: "modal",
+                                modalScreenId: screenId,
+                              },
+                            })
+                          }
+                        />
+                      </div>
+                    )}
+
+                    <div className="space-y-1">
+                      <Label className="text-[10px]">버튼 라벨</Label>
+                      <Input
+                        value={config.leftPanel?.addButton?.buttonLabel || ""}
+                        onChange={(e) =>
+                          updateLeftPanel({
+                            addButton: {
+                              ...config.leftPanel?.addButton,
+                              enabled: true,
+                              mode: config.leftPanel?.addButton?.mode || "auto",
+                              buttonLabel: e.target.value || undefined,
+                            },
+                          })
+                        }
+                        placeholder="추가"
+                        className="h-7 text-xs"
+                      />
+                    </div>
+                  </div>
                 </div>
               )}
 
-              <div className="space-y-1">
-                <Label className="text-[10px]">버튼 라벨</Label>
-                <Input
-                  value={config.leftPanel?.addButton?.buttonLabel || ""}
-                  onChange={(e) =>
-                    updateLeftPanel({
-                      addButton: {
-                        ...config.leftPanel?.addButton,
-                        enabled: true,
-                        mode: config.leftPanel?.addButton?.mode || "auto",
-                        buttonLabel: e.target.value || undefined,
-                      },
-                    })
-                  }
-                  placeholder="추가"
-                  className="h-7 text-xs"
-                />
-              </div>
-            </div>
-          </div>
-        )}
+              {/* 수정 버튼 상세 설정 */}
+              {(config.leftPanel?.showEdit ?? true) && (
+                <div className="border-border/50 bg-muted/40 space-y-3 rounded-lg border p-3">
+                  <h3 className="border-l-primary/40 border-l-2 pl-2 text-xs font-semibold">수정 버튼 설정</h3>
+                  <div className="space-y-2">
+                    <div className="space-y-1">
+                      <Label className="text-[10px]">수정 모드</Label>
+                      <Select
+                        value={config.leftPanel?.editButton?.mode || "auto"}
+                        onValueChange={(value: "auto" | "modal") =>
+                          updateLeftPanel({
+                            editButton: { ...config.leftPanel?.editButton, enabled: true, mode: value },
+                          })
+                        }
+                      >
+                        <SelectTrigger className="h-7 text-xs">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="auto">자동 (인라인)</SelectItem>
+                          <SelectItem value="modal">모달 화면</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
 
-        {/* 수정 버튼 상세 설정 */}
-        {(config.leftPanel?.showEdit ?? true) && (
-          <div className="space-y-3 rounded-lg border border-border/50 bg-muted/40 p-3">
-            <h3 className="border-l-2 border-l-primary/40 pl-2 text-xs font-semibold">수정 버튼 설정</h3>
-            <div className="space-y-2">
-              <div className="space-y-1">
-                <Label className="text-[10px]">수정 모드</Label>
-                <Select
-                  value={config.leftPanel?.editButton?.mode || "auto"}
-                  onValueChange={(value: "auto" | "modal") =>
-                    updateLeftPanel({
-                      editButton: { ...config.leftPanel?.editButton, enabled: true, mode: value },
-                    })
-                  }
-                >
-                  <SelectTrigger className="h-7 text-xs">
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="auto">자동 (인라인)</SelectItem>
-                    <SelectItem value="modal">모달 화면</SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
+                    {config.leftPanel?.editButton?.mode === "modal" && (
+                      <div className="space-y-1">
+                        <Label className="text-[10px]">수정 모달 화면</Label>
+                        <ScreenSelector
+                          value={config.leftPanel?.editButton?.modalScreenId}
+                          onChange={(screenId) =>
+                            updateLeftPanel({
+                              editButton: {
+                                ...config.leftPanel?.editButton,
+                                enabled: true,
+                                mode: "modal",
+                                modalScreenId: screenId,
+                              },
+                            })
+                          }
+                        />
+                      </div>
+                    )}
 
-              {config.leftPanel?.editButton?.mode === "modal" && (
-                <div className="space-y-1">
-                  <Label className="text-[10px]">수정 모달 화면</Label>
-                  <ScreenSelector
-                    value={config.leftPanel?.editButton?.modalScreenId}
-                    onChange={(screenId) =>
-                      updateLeftPanel({
-                        editButton: { ...config.leftPanel?.editButton, enabled: true, mode: "modal", modalScreenId: screenId },
-                      })
-                    }
-                  />
+                    <div className="space-y-1">
+                      <Label className="text-[10px]">버튼 라벨</Label>
+                      <Input
+                        value={config.leftPanel?.editButton?.buttonLabel || ""}
+                        onChange={(e) =>
+                          updateLeftPanel({
+                            editButton: {
+                              ...config.leftPanel?.editButton,
+                              enabled: true,
+                              mode: config.leftPanel?.editButton?.mode || "auto",
+                              buttonLabel: e.target.value || undefined,
+                            },
+                          })
+                        }
+                        placeholder="수정"
+                        className="h-7 text-xs"
+                      />
+                    </div>
+                  </div>
                 </div>
               )}
-
-              <div className="space-y-1">
-                <Label className="text-[10px]">버튼 라벨</Label>
-                <Input
-                  value={config.leftPanel?.editButton?.buttonLabel || ""}
-                  onChange={(e) =>
-                    updateLeftPanel({
-                      editButton: {
-                        ...config.leftPanel?.editButton,
-                        enabled: true,
-                        mode: config.leftPanel?.editButton?.mode || "auto",
-                        buttonLabel: e.target.value || undefined,
-                      },
-                    })
-                  }
-                  placeholder="수정"
-                  className="h-7 text-xs"
-                />
-              </div>
             </div>
           </div>
-        )}
-      </div>
-          </div>
         </DialogContent>
       </Dialog>
 
@@ -2429,31 +2683,35 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
         <DialogContent className="max-h-[85vh] max-w-2xl overflow-y-auto">
           <DialogHeader>
             <DialogTitle className="text-base">우측 패널 설정</DialogTitle>
-            <DialogDescription className="text-xs">상세/필터 데이터 표시, 버튼, 중복 제거를 설정합니다</DialogDescription>
+            <DialogDescription className="text-xs">
+              상세/필터 데이터 표시, 버튼, 중복 제거를 설정합니다
+            </DialogDescription>
           </DialogHeader>
           <div className="space-y-4">
-      {/* 우측 패널 설정 */}
-      <div className="space-y-4 rounded-lg border border-border/50 bg-muted/40 p-4">
-        <h3 className="border-l-2 border-l-primary/40 pl-2 text-sm font-semibold">우측 패널 설정 ({relationshipType === "detail" ? "선택 시 표시" : "연관 목록"})</h3>
+            {/* 우측 패널 설정 */}
+            <div className="border-border/50 bg-muted/40 space-y-4 rounded-lg border p-4">
+              <h3 className="border-l-primary/40 border-l-2 pl-2 text-sm font-semibold">
+                우측 패널 설정 ({relationshipType === "detail" ? "선택 시 표시" : "연관 목록"})
+              </h3>
 
-        <div className="space-y-2">
-          <Label>패널 제목</Label>
-          <Input
-            value={localTitles.right}
-            onChange={(e) => {
-              setIsUserEditing(true);
-              setLocalTitles((prev) => ({ ...prev, right: e.target.value }));
-            }}
-            onBlur={() => {
-              setIsUserEditing(false);
-              updateRightPanel({ title: localTitles.right });
-            }}
-            placeholder="우측 패널 제목"
-          />
-        </div>
+              <div className="space-y-2">
+                <Label>패널 제목</Label>
+                <Input
+                  value={localTitles.right}
+                  onChange={(e) => {
+                    setIsUserEditing(true);
+                    setLocalTitles((prev) => ({ ...prev, right: e.target.value }));
+                  }}
+                  onBlur={() => {
+                    setIsUserEditing(false);
+                    updateRightPanel({ title: localTitles.right });
+                  }}
+                  placeholder="우측 패널 제목"
+                />
+              </div>
 
-        {/* 헤더 높이 설정 - 숨김 처리 */}
-        {/* <div className="space-y-2">
+              {/* 헤더 높이 설정 - 숨김 처리 */}
+              {/* <div className="space-y-2">
           <Label>헤더 높이 (px)</Label>
           <Input
             type="number"
@@ -2466,821 +2724,881 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
           <p className="text-muted-foreground text-xs">패널 상단 헤더의 높이 (기본: 48px)</p>
         </div> */}
 
-        {/* 관계 타입에 따라 테이블 선택 UI 변경 */}
-        <div className="space-y-2">
-          <Label>우측 패널 테이블</Label>
-          <Popover open={rightTableOpen} onOpenChange={setRightTableOpen}>
-            <PopoverTrigger asChild>
-              <Button
-                variant="outline"
-                role="combobox"
-                aria-expanded={rightTableOpen}
-                className="w-full justify-between"
-              >
-                {config.rightPanel?.tableName || "테이블을 선택하세요"}
-                <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-              </Button>
-            </PopoverTrigger>
-            <PopoverContent className="w-full p-0">
-              <Command>
-                <CommandInput placeholder="테이블 검색..." />
-                <CommandEmpty>테이블을 찾을 수 없습니다.</CommandEmpty>
-                <CommandGroup className="max-h-[200px] overflow-auto">
-                  {availableRightTables.map((table) => (
-                    <CommandItem
-                      key={table.tableName}
-                      value={`${table.displayName || ""} ${table.tableName}`}
-                      onSelect={() => {
-                        updateRightPanel({ tableName: table.tableName });
-                        setRightTableOpen(false);
-                      }}
-                    >
-                      <Check
-                        className={cn(
-                          "mr-2 h-4 w-4",
-                          config.rightPanel?.tableName === table.tableName ? "opacity-100" : "opacity-0",
-                        )}
-                      />
-                      {table.displayName || table.tableName}
-                      {table.displayName && <span className="ml-2 text-xs text-gray-500">({table.tableName})</span>}
-                    </CommandItem>
-                  ))}
-                </CommandGroup>
-              </Command>
-            </PopoverContent>
-          </Popover>
-        </div>
-
-        <div className="space-y-2">
-          <Label>표시 모드</Label>
-          <Select
-            value={config.rightPanel?.displayMode || "list"}
-            onValueChange={(value: "list" | "table" | "custom") => updateRightPanel({ displayMode: value })}
-          >
-            <SelectTrigger className="h-10 bg-white">
-              <SelectValue placeholder="표시 모드 선택">
-                {(config.rightPanel?.displayMode || "list") === "list" ? "목록 (LIST)" : (config.rightPanel?.displayMode || "list") === "table" ? "테이블 (TABLE)" : "커스텀 (CUSTOM)"}
-              </SelectValue>
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="list">
-                <div className="flex flex-col py-1">
-                  <span className="text-sm font-medium">목록 (LIST)</span>
-                  <span className="text-xs text-gray-500">클릭 가능한 항목 목록 (기본)</span>
-                </div>
-              </SelectItem>
-              <SelectItem value="table">
-                <div className="flex flex-col py-1">
-                  <span className="text-sm font-medium">테이블 (TABLE)</span>
-                  <span className="text-xs text-gray-500">컬럼 헤더가 있는 테이블 형식</span>
-                </div>
-              </SelectItem>
-              <SelectItem value="custom">
-                <div className="flex flex-col py-1">
-                  <span className="text-sm font-medium">커스텀 (CUSTOM)</span>
-                  <span className="text-xs text-gray-500">패널 안에 컴포넌트 자유 배치</span>
-                </div>
-              </SelectItem>
-            </SelectContent>
-          </Select>
-          {config.rightPanel?.displayMode === "custom" && (
-            <p className="text-xs text-amber-600">
-              화면 디자이너에서 우측 패널에 컴포넌트를 드래그하여 배치하세요.
-            </p>
-          )}
-        </div>
-
-        {/* 🆕 커스텀 모드: 배치된 컴포넌트 목록 */}
-        {config.rightPanel?.displayMode === "custom" && (
-          <div className="space-y-2">
-            <Label className="text-xs font-medium">배치된 컴포넌트</Label>
-            {!config.rightPanel?.components || config.rightPanel.components.length === 0 ? (
-              <div className="rounded-md border border-dashed bg-muted/30 p-4 text-center">
-                <Move className="mx-auto mb-2 h-6 w-6 text-muted-foreground" />
-                <p className="text-muted-foreground text-xs">
-                  디자인 화면에서 컴포넌트를 드래그하여 추가하세요
-                </p>
-              </div>
-            ) : (
+              {/* 관계 타입에 따라 테이블 선택 UI 변경 */}
               <div className="space-y-2">
-                {config.rightPanel.components.map((comp: PanelInlineComponent) => (
-                  <div
-                    key={comp.id}
-                    className="flex items-center justify-between rounded-md border bg-background p-2"
-                  >
-                    <div className="flex-1">
-                      <p className="text-xs font-medium">
-                        {comp.label || comp.componentType}
-                      </p>
-                      <p className="text-muted-foreground text-[10px]">
-                        {comp.componentType} | 위치: ({comp.position?.x || 0}, {comp.position?.y || 0}) | 크기: {comp.size?.width || 0}x{comp.size?.height || 0}
-                      </p>
-                    </div>
+                <Label>우측 패널 테이블</Label>
+                <Popover open={rightTableOpen} onOpenChange={setRightTableOpen}>
+                  <PopoverTrigger asChild>
                     <Button
-                      onClick={() => {
-                        const updatedComponents = (config.rightPanel?.components || []).filter(
-                          (c: PanelInlineComponent) => c.id !== comp.id
-                        );
-                        onChange({
-                          ...config,
-                          rightPanel: {
-                            ...config.rightPanel,
-                            components: updatedComponents,
-                          },
-                        });
-                      }}
-                      size="sm"
-                      variant="ghost"
-                      className="h-6 w-6 p-0 text-destructive hover:text-destructive"
+                      variant="outline"
+                      role="combobox"
+                      aria-expanded={rightTableOpen}
+                      className="w-full justify-between"
                     >
-                      <Trash2 className="h-3 w-3" />
+                      {config.rightPanel?.tableName || "테이블을 선택하세요"}
+                      <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                     </Button>
-                  </div>
-                ))}
+                  </PopoverTrigger>
+                  <PopoverContent className="w-full p-0">
+                    <Command>
+                      <CommandInput placeholder="테이블 검색..." />
+                      <CommandEmpty>테이블을 찾을 수 없습니다.</CommandEmpty>
+                      <CommandGroup className="max-h-[200px] overflow-auto">
+                        {availableRightTables.map((table) => (
+                          <CommandItem
+                            key={table.tableName}
+                            value={`${table.displayName || ""} ${table.tableName}`}
+                            onSelect={() => {
+                              updateRightPanel({ tableName: table.tableName });
+                              setRightTableOpen(false);
+                            }}
+                          >
+                            <Check
+                              className={cn(
+                                "mr-2 h-4 w-4",
+                                config.rightPanel?.tableName === table.tableName ? "opacity-100" : "opacity-0",
+                              )}
+                            />
+                            {table.displayName || table.tableName}
+                            {table.displayName && (
+                              <span className="text-muted-foreground ml-2 text-xs">({table.tableName})</span>
+                            )}
+                          </CommandItem>
+                        ))}
+                      </CommandGroup>
+                    </Command>
+                  </PopoverContent>
+                </Popover>
               </div>
-            )}
-          </div>
-        )}
 
-        {/* 요약 표시 설정 (LIST 모드에서만, 커스텀 모드가 아닐 때) */}
-        {(config.rightPanel?.displayMode || "list") === "list" && (
-          <div className="space-y-3 rounded-lg border border-gray-200 bg-gray-50 p-3">
-            <Label className="text-sm font-semibold">요약 표시 설정</Label>
-
-            <div className="space-y-2">
-              <Label className="text-xs">표시할 컬럼 개수</Label>
-              <Input
-                type="number"
-                min="1"
-                max="10"
-                value={config.rightPanel?.summaryColumnCount ?? 3}
-                onChange={(e) => {
-                  const value = parseInt(e.target.value) || 3;
-                  updateRightPanel({ summaryColumnCount: value });
-                }}
-                className="bg-white"
-              />
-              <p className="text-xs text-gray-500">접기 전에 표시할 컬럼 개수 (기본: 3개)</p>
-            </div>
-
-            <div className="flex items-center justify-between space-x-2">
-              <div className="flex-1">
-                <Label className="text-xs">라벨 표시</Label>
-                <p className="text-xs text-gray-500">컬럼명 표시 여부</p>
-              </div>
-              <Checkbox
-                checked={config.rightPanel?.summaryShowLabel ?? true}
-                onCheckedChange={(checked) => {
-                  updateRightPanel({ summaryShowLabel: checked as boolean });
-                }}
-              />
-            </div>
-          </div>
-        )}
-
-        {/* 필터 연결 컬럼 제거됨 - Entity 조인이 자동으로 관계를 처리 */}
-
-        {/* 우측 패널 표시 컬럼 설정 - 드래그앤드롭 */}
-        {(() => {
-          const selectedColumns = config.rightPanel?.columns || [];
-          const filteredTableColumns = rightTableColumns.filter((c) => !["company_code", "company_name"].includes(c.columnName));
-          const unselectedColumns = filteredTableColumns.filter((c) => !selectedColumns.some((sc) => sc.name === c.columnName));
-          const dbNumericTypes = ["numeric", "decimal", "integer", "bigint", "double precision", "real", "smallint", "int4", "int8", "float4", "float8"];
-          const inputNumericTypes = ["number", "decimal", "currency", "integer"];
-
-          const handleRightDragEnd = (event: DragEndEvent) => {
-            const { active, over } = event;
-            if (over && active.id !== over.id) {
-              const oldIndex = selectedColumns.findIndex((c) => c.name === active.id);
-              const newIndex = selectedColumns.findIndex((c) => c.name === over.id);
-              if (oldIndex !== -1 && newIndex !== -1) {
-                updateRightPanel({ columns: arrayMove([...selectedColumns], oldIndex, newIndex) });
-              }
-            }
-          };
-
-          return (
-            <div className="space-y-2">
-              <Label className="text-xs font-medium">표시할 컬럼 ({selectedColumns.length}개 선택)</Label>
-              <div className="max-h-[400px] overflow-y-auto rounded-md border p-2">
-                {rightTableColumns.length === 0 ? (
-                  <p className="text-muted-foreground py-2 text-center text-xs">테이블을 선택해주세요</p>
-                ) : (
-                  <>
-                    {selectedColumns.length > 0 && (
-                      <DndContext collisionDetection={closestCenter} onDragEnd={handleRightDragEnd}>
-                        <SortableContext items={selectedColumns.map((c) => c.name)} strategy={verticalListSortingStrategy}>
-                          <div className="space-y-1">
-                            {selectedColumns.map((col, index) => {
-                              const colInfo = rightTableColumns.find((c) => c.columnName === col.name);
-                              const isNumeric = colInfo && (
-                                dbNumericTypes.includes(colInfo.dataType?.toLowerCase() || "") ||
-                                inputNumericTypes.includes(colInfo.input_type?.toLowerCase() || "") ||
-                                inputNumericTypes.includes(colInfo.webType?.toLowerCase() || "")
-                              );
-                              return (
-                                <SortableColumnRow
-                                  key={col.name}
-                                  id={col.name}
-                                  col={col}
-                                  index={index}
-                                  isNumeric={!!isNumeric}
-                                  isEntityJoin={!!(col as any).isEntityJoin}
-                                  onLabelChange={(value) => {
-                                    const newColumns = [...selectedColumns];
-                                    newColumns[index] = { ...newColumns[index], label: value };
-                                    updateRightPanel({ columns: newColumns });
-                                  }}
-                                  onWidthChange={(value) => {
-                                    const newColumns = [...selectedColumns];
-                                    newColumns[index] = { ...newColumns[index], width: value };
-                                    updateRightPanel({ columns: newColumns });
-                                  }}
-                                  onFormatChange={(checked) => {
-                                    const newColumns = [...selectedColumns];
-                                    newColumns[index] = { ...newColumns[index], format: { ...newColumns[index].format, type: "number", thousandSeparator: checked } };
-                                    updateRightPanel({ columns: newColumns });
-                                  }}
-                                  onRemove={() => updateRightPanel({ columns: selectedColumns.filter((_, i) => i !== index) })}
-                                  onShowInSummaryChange={(checked) => {
-                                    const newColumns = [...selectedColumns];
-                                    newColumns[index] = { ...newColumns[index], showInSummary: checked };
-                                    updateRightPanel({ columns: newColumns });
-                                  }}
-                                  onShowInDetailChange={(checked) => {
-                                    const newColumns = [...selectedColumns];
-                                    newColumns[index] = { ...newColumns[index], showInDetail: checked };
-                                    updateRightPanel({ columns: newColumns });
-                                  }}
-                                />
-                              );
-                            })}
-                          </div>
-                        </SortableContext>
-                      </DndContext>
-                    )}
-
-                    {selectedColumns.length > 0 && unselectedColumns.length > 0 && (
-                      <div className="border-border/60 my-2 flex items-center gap-2 border-t pt-2">
-                        <span className="text-muted-foreground text-[10px]">미선택 컬럼</span>
+              <div className="space-y-2">
+                <Label>표시 모드</Label>
+                <Select
+                  value={config.rightPanel?.displayMode || "list"}
+                  onValueChange={(value: "list" | "table" | "custom") => updateRightPanel({ displayMode: value })}
+                >
+                  <SelectTrigger className="h-10 bg-white">
+                    <SelectValue placeholder="표시 모드 선택">
+                      {(config.rightPanel?.displayMode || "list") === "list"
+                        ? "목록 (LIST)"
+                        : (config.rightPanel?.displayMode || "list") === "table"
+                          ? "테이블 (TABLE)"
+                          : "커스텀 (CUSTOM)"}
+                    </SelectValue>
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="list">
+                      <div className="flex flex-col py-1">
+                        <span className="text-sm font-medium">목록 (LIST)</span>
+                        <span className="text-muted-foreground text-xs">클릭 가능한 항목 목록 (기본)</span>
                       </div>
-                    )}
+                    </SelectItem>
+                    <SelectItem value="table">
+                      <div className="flex flex-col py-1">
+                        <span className="text-sm font-medium">테이블 (TABLE)</span>
+                        <span className="text-muted-foreground text-xs">컬럼 헤더가 있는 테이블 형식</span>
+                      </div>
+                    </SelectItem>
+                    <SelectItem value="custom">
+                      <div className="flex flex-col py-1">
+                        <span className="text-sm font-medium">커스텀 (CUSTOM)</span>
+                        <span className="text-muted-foreground text-xs">패널 안에 컴포넌트 자유 배치</span>
+                      </div>
+                    </SelectItem>
+                  </SelectContent>
+                </Select>
+                {config.rightPanel?.displayMode === "custom" && (
+                  <p className="text-xs text-amber-600">
+                    화면 디자이너에서 우측 패널에 컴포넌트를 드래그하여 배치하세요.
+                  </p>
+                )}
+              </div>
 
-                    <div className="space-y-0.5">
-                      {unselectedColumns.map((column) => (
+              {/* 🆕 커스텀 모드: 배치된 컴포넌트 목록 */}
+              {config.rightPanel?.displayMode === "custom" && (
+                <div className="space-y-2">
+                  <Label className="text-xs font-medium">배치된 컴포넌트</Label>
+                  {!config.rightPanel?.components || config.rightPanel.components.length === 0 ? (
+                    <div className="bg-muted/30 rounded-md border border-dashed p-4 text-center">
+                      <Move className="text-muted-foreground mx-auto mb-2 h-6 w-6" />
+                      <p className="text-muted-foreground text-xs">디자인 화면에서 컴포넌트를 드래그하여 추가하세요</p>
+                    </div>
+                  ) : (
+                    <div className="space-y-2">
+                      {config.rightPanel.components.map((comp: PanelInlineComponent) => (
                         <div
-                          key={column.columnName}
-                          className="hover:bg-muted/50 flex cursor-pointer items-center gap-2 rounded px-2 py-1.5"
-                          onClick={() => {
-                            updateRightPanel({ columns: [...selectedColumns, { name: column.columnName, label: column.columnLabel || column.columnName, width: 100 }] });
-                          }}
+                          key={comp.id}
+                          className="bg-background flex items-center justify-between rounded-md border p-2"
                         >
-                          <Checkbox checked={false} className="pointer-events-none h-3.5 w-3.5 shrink-0" />
-                          <span className="text-muted-foreground truncate text-xs">{column.columnLabel || column.columnName}</span>
+                          <div className="flex-1">
+                            <p className="text-xs font-medium">{comp.label || comp.componentType}</p>
+                            <p className="text-muted-foreground text-[10px]">
+                              {comp.componentType} | 위치: ({comp.position?.x || 0}, {comp.position?.y || 0}) | 크기:{" "}
+                              {comp.size?.width || 0}x{comp.size?.height || 0}
+                            </p>
+                          </div>
+                          <Button
+                            onClick={() => {
+                              const updatedComponents = (config.rightPanel?.components || []).filter(
+                                (c: PanelInlineComponent) => c.id !== comp.id,
+                              );
+                              onChange({
+                                ...config,
+                                rightPanel: {
+                                  ...config.rightPanel,
+                                  components: updatedComponents,
+                                },
+                              });
+                            }}
+                            size="sm"
+                            variant="ghost"
+                            className="text-destructive hover:text-destructive h-6 w-6 p-0"
+                          >
+                            <Trash2 className="h-3 w-3" />
+                          </Button>
                         </div>
                       ))}
                     </div>
+                  )}
+                </div>
+              )}
 
-                    {/* Entity 조인 컬럼 - 아코디언 (접기/펼치기) */}
-                    {(() => {
-                      const rightTable = config.rightPanel?.tableName;
-                      const joinData = rightTable ? entityJoinColumns[rightTable] : null;
-                      if (!joinData || joinData.joinTables.length === 0) return null;
+              {/* 요약 표시 설정 (LIST 모드에서만, 커스텀 모드가 아닐 때) */}
+              {(config.rightPanel?.displayMode || "list") === "list" && (
+                <div className="border-border bg-muted space-y-3 rounded-lg border p-3">
+                  <Label className="text-sm font-semibold">요약 표시 설정</Label>
 
-                      return joinData.joinTables.map((joinTable, tableIndex) => {
-                        const joinColumnsToShow = joinTable.availableColumns.filter((column) => {
-                          const matchingJoinColumn = joinData.availableColumns.find(
-                            (jc) => jc.tableName === joinTable.tableName && jc.columnName === column.columnName,
-                          );
-                          if (!matchingJoinColumn) return false;
-                          return !selectedColumns.some((c) => c.name === matchingJoinColumn.joinAlias);
-                        });
-                        const addedCount = joinTable.availableColumns.length - joinColumnsToShow.length;
+                  <div className="space-y-2">
+                    <Label className="text-xs">표시할 컬럼 개수</Label>
+                    <Input
+                      type="number"
+                      min="1"
+                      max="10"
+                      value={config.rightPanel?.summaryColumnCount ?? 3}
+                      onChange={(e) => {
+                        const value = parseInt(e.target.value) || 3;
+                        updateRightPanel({ summaryColumnCount: value });
+                      }}
+                      className="bg-white"
+                    />
+                    <p className="text-muted-foreground text-xs">접기 전에 표시할 컬럼 개수 (기본: 3개)</p>
+                  </div>
 
-                        if (joinColumnsToShow.length === 0 && addedCount === 0) return null;
+                  <div className="flex items-center justify-between space-x-2">
+                    <div className="flex-1">
+                      <Label className="text-xs">라벨 표시</Label>
+                      <p className="text-muted-foreground text-xs">컬럼명 표시 여부</p>
+                    </div>
+                    <Checkbox
+                      checked={config.rightPanel?.summaryShowLabel ?? true}
+                      onCheckedChange={(checked) => {
+                        updateRightPanel({ summaryShowLabel: checked as boolean });
+                      }}
+                    />
+                  </div>
+                </div>
+              )}
 
-                        return (
-                          <details key={`join-${tableIndex}`} className="group">
-                            <summary className="border-border/60 my-2 flex cursor-pointer list-none items-center gap-2 border-t pt-2 select-none">
-                              <ChevronRight className="h-3 w-3 shrink-0 text-blue-500 transition-transform group-open:rotate-90" />
-                              <Link2 className="h-3 w-3 shrink-0 text-blue-500" />
-                              <span className="text-[10px] font-medium text-blue-600">{joinTable.tableName}</span>
-                              {addedCount > 0 && (
-                                <span className="rounded-full bg-blue-100 px-1.5 text-[9px] font-medium text-blue-600">{addedCount}개 선택</span>
-                              )}
-                              <span className="text-[9px] text-gray-400">{joinColumnsToShow.length}개 남음</span>
-                            </summary>
-                            <div className="space-y-0.5 pt-1">
-                              {joinColumnsToShow.map((column, colIndex) => {
+              {/* 필터 연결 컬럼 제거됨 - Entity 조인이 자동으로 관계를 처리 */}
+
+              {/* 우측 패널 표시 컬럼 설정 - 드래그앤드롭 */}
+              {(() => {
+                const selectedColumns = config.rightPanel?.columns || [];
+                const filteredTableColumns = rightTableColumns.filter(
+                  (c) => !["company_code", "company_name"].includes(c.columnName),
+                );
+                const unselectedColumns = filteredTableColumns.filter(
+                  (c) => !selectedColumns.some((sc) => sc.name === c.columnName),
+                );
+                const dbNumericTypes = [
+                  "numeric",
+                  "decimal",
+                  "integer",
+                  "bigint",
+                  "double precision",
+                  "real",
+                  "smallint",
+                  "int4",
+                  "int8",
+                  "float4",
+                  "float8",
+                ];
+                const inputNumericTypes = ["number", "decimal", "currency", "integer"];
+
+                const handleRightDragEnd = (event: DragEndEvent) => {
+                  const { active, over } = event;
+                  if (over && active.id !== over.id) {
+                    const oldIndex = selectedColumns.findIndex((c) => c.name === active.id);
+                    const newIndex = selectedColumns.findIndex((c) => c.name === over.id);
+                    if (oldIndex !== -1 && newIndex !== -1) {
+                      updateRightPanel({ columns: arrayMove([...selectedColumns], oldIndex, newIndex) });
+                    }
+                  }
+                };
+
+                return (
+                  <div className="space-y-2">
+                    <Label className="text-xs font-medium">표시할 컬럼 ({selectedColumns.length}개 선택)</Label>
+                    <div className="max-h-[400px] overflow-y-auto rounded-md border p-2">
+                      {rightTableColumns.length === 0 ? (
+                        <p className="text-muted-foreground py-2 text-center text-xs">테이블을 선택해주세요</p>
+                      ) : (
+                        <>
+                          {selectedColumns.length > 0 && (
+                            <DndContext collisionDetection={closestCenter} onDragEnd={handleRightDragEnd}>
+                              <SortableContext
+                                items={selectedColumns.map((c) => c.name)}
+                                strategy={verticalListSortingStrategy}
+                              >
+                                <div className="space-y-1">
+                                  {selectedColumns.map((col, index) => {
+                                    const colInfo = rightTableColumns.find((c) => c.columnName === col.name);
+                                    const isNumeric =
+                                      colInfo &&
+                                      (dbNumericTypes.includes(colInfo.dataType?.toLowerCase() || "") ||
+                                        inputNumericTypes.includes(colInfo.input_type?.toLowerCase() || "") ||
+                                        inputNumericTypes.includes(colInfo.webType?.toLowerCase() || ""));
+                                    return (
+                                      <SortableColumnRow
+                                        key={col.name}
+                                        id={col.name}
+                                        col={col}
+                                        index={index}
+                                        isNumeric={!!isNumeric}
+                                        isEntityJoin={!!(col as any).isEntityJoin}
+                                        onLabelChange={(value) => {
+                                          const newColumns = [...selectedColumns];
+                                          newColumns[index] = { ...newColumns[index], label: value };
+                                          updateRightPanel({ columns: newColumns });
+                                        }}
+                                        onWidthChange={(value) => {
+                                          const newColumns = [...selectedColumns];
+                                          newColumns[index] = { ...newColumns[index], width: value };
+                                          updateRightPanel({ columns: newColumns });
+                                        }}
+                                        onFormatChange={(checked) => {
+                                          const newColumns = [...selectedColumns];
+                                          newColumns[index] = {
+                                            ...newColumns[index],
+                                            format: {
+                                              ...newColumns[index].format,
+                                              type: "number",
+                                              thousandSeparator: checked,
+                                            },
+                                          };
+                                          updateRightPanel({ columns: newColumns });
+                                        }}
+                                        onRemove={() =>
+                                          updateRightPanel({ columns: selectedColumns.filter((_, i) => i !== index) })
+                                        }
+                                        onShowInSummaryChange={(checked) => {
+                                          const newColumns = [...selectedColumns];
+                                          newColumns[index] = { ...newColumns[index], showInSummary: checked };
+                                          updateRightPanel({ columns: newColumns });
+                                        }}
+                                        onShowInDetailChange={(checked) => {
+                                          const newColumns = [...selectedColumns];
+                                          newColumns[index] = { ...newColumns[index], showInDetail: checked };
+                                          updateRightPanel({ columns: newColumns });
+                                        }}
+                                      />
+                                    );
+                                  })}
+                                </div>
+                              </SortableContext>
+                            </DndContext>
+                          )}
+
+                          {selectedColumns.length > 0 && unselectedColumns.length > 0 && (
+                            <div className="border-border/60 my-2 flex items-center gap-2 border-t pt-2">
+                              <span className="text-muted-foreground text-[10px]">미선택 컬럼</span>
+                            </div>
+                          )}
+
+                          <div className="space-y-0.5">
+                            {unselectedColumns.map((column) => (
+                              <div
+                                key={column.columnName}
+                                className="hover:bg-muted/50 flex cursor-pointer items-center gap-2 rounded px-2 py-1.5"
+                                onClick={() => {
+                                  updateRightPanel({
+                                    columns: [
+                                      ...selectedColumns,
+                                      {
+                                        name: column.columnName,
+                                        label: column.columnLabel || column.columnName,
+                                        width: 100,
+                                      },
+                                    ],
+                                  });
+                                }}
+                              >
+                                <Checkbox checked={false} className="pointer-events-none h-3.5 w-3.5 shrink-0" />
+                                <span className="text-muted-foreground truncate text-xs">
+                                  {column.columnLabel || column.columnName}
+                                </span>
+                              </div>
+                            ))}
+                          </div>
+
+                          {/* Entity 조인 컬럼 - 아코디언 (접기/펼치기) */}
+                          {(() => {
+                            const rightTable = config.rightPanel?.tableName;
+                            const joinData = rightTable ? entityJoinColumns[rightTable] : null;
+                            if (!joinData || joinData.joinTables.length === 0) return null;
+
+                            return joinData.joinTables.map((joinTable, tableIndex) => {
+                              const joinColumnsToShow = joinTable.availableColumns.filter((column) => {
                                 const matchingJoinColumn = joinData.availableColumns.find(
                                   (jc) => jc.tableName === joinTable.tableName && jc.columnName === column.columnName,
                                 );
-                                if (!matchingJoinColumn) return null;
+                                if (!matchingJoinColumn) return false;
+                                return !selectedColumns.some((c) => c.name === matchingJoinColumn.joinAlias);
+                              });
+                              const addedCount = joinTable.availableColumns.length - joinColumnsToShow.length;
 
-                                return (
-                                  <div
-                                    key={colIndex}
-                                    className="flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 hover:bg-blue-50/60"
-                                    onClick={() => {
-                                      updateRightPanel({
-                                        columns: [...selectedColumns, {
-                                          name: matchingJoinColumn.joinAlias,
-                                          label: matchingJoinColumn.suggestedLabel || matchingJoinColumn.columnLabel,
-                                          width: 100,
-                                          isEntityJoin: true,
-                                          joinInfo: {
-                                            sourceTable: rightTable!,
-                                            sourceColumn: (joinTable as any).joinConfig?.sourceColumn || "",
-                                            referenceTable: matchingJoinColumn.tableName,
-                                            joinAlias: matchingJoinColumn.joinAlias,
-                                          },
-                                        }],
-                                      });
-                                    }}
-                                  >
-                                    <Checkbox checked={false} className="pointer-events-none h-3.5 w-3.5 shrink-0" />
-                                    <Link2 className="h-3 w-3 shrink-0 text-blue-500" />
-                                    <span className="truncate text-xs text-blue-700">{column.columnLabel || column.columnName}</span>
+                              if (joinColumnsToShow.length === 0 && addedCount === 0) return null;
+
+                              return (
+                                <details key={`join-${tableIndex}`} className="group">
+                                  <summary className="border-border/60 my-2 flex cursor-pointer list-none items-center gap-2 border-t pt-2 select-none">
+                                    <ChevronRight className="text-primary h-3 w-3 shrink-0 transition-transform group-open:rotate-90" />
+                                    <Link2 className="text-primary h-3 w-3 shrink-0" />
+                                    <span className="text-primary text-[10px] font-medium">{joinTable.tableName}</span>
+                                    {addedCount > 0 && (
+                                      <span className="bg-primary/10 text-primary rounded-full px-1.5 text-[9px] font-medium">
+                                        {addedCount}개 선택
+                                      </span>
+                                    )}
+                                    <span className="text-muted-foreground/70 text-[9px]">
+                                      {joinColumnsToShow.length}개 남음
+                                    </span>
+                                  </summary>
+                                  <div className="space-y-0.5 pt-1">
+                                    {joinColumnsToShow.map((column, colIndex) => {
+                                      const matchingJoinColumn = joinData.availableColumns.find(
+                                        (jc) =>
+                                          jc.tableName === joinTable.tableName && jc.columnName === column.columnName,
+                                      );
+                                      if (!matchingJoinColumn) return null;
+
+                                      return (
+                                        <div
+                                          key={colIndex}
+                                          className="hover:bg-primary/10/60 flex cursor-pointer items-center gap-2 rounded px-2 py-1.5"
+                                          onClick={() => {
+                                            updateRightPanel({
+                                              columns: [
+                                                ...selectedColumns,
+                                                {
+                                                  name: matchingJoinColumn.joinAlias,
+                                                  label:
+                                                    matchingJoinColumn.suggestedLabel || matchingJoinColumn.columnLabel,
+                                                  width: 100,
+                                                  isEntityJoin: true,
+                                                  joinInfo: {
+                                                    sourceTable: rightTable!,
+                                                    sourceColumn: (joinTable as any).joinConfig?.sourceColumn || "",
+                                                    referenceTable: matchingJoinColumn.tableName,
+                                                    joinAlias: matchingJoinColumn.joinAlias,
+                                                  },
+                                                },
+                                              ],
+                                            });
+                                          }}
+                                        >
+                                          <Checkbox
+                                            checked={false}
+                                            className="pointer-events-none h-3.5 w-3.5 shrink-0"
+                                          />
+                                          <Link2 className="text-primary h-3 w-3 shrink-0" />
+                                          <span className="text-primary truncate text-xs">
+                                            {column.columnLabel || column.columnName}
+                                          </span>
+                                        </div>
+                                      );
+                                    })}
+                                    {joinColumnsToShow.length === 0 && (
+                                      <p className="text-muted-foreground/70 px-2 py-1 text-[10px]">
+                                        모든 컬럼이 이미 추가되었습니다
+                                      </p>
+                                    )}
                                   </div>
-                                );
-                              })}
-                              {joinColumnsToShow.length === 0 && (
-                                <p className="px-2 py-1 text-[10px] text-gray-400">모든 컬럼이 이미 추가되었습니다</p>
-                              )}
-                            </div>
-                          </details>
-                        );
-                      });
-                    })()}
-                  </>
+                                </details>
+                              );
+                            });
+                          })()}
+                        </>
+                      )}
+                    </div>
+                  </div>
+                );
+              })()}
+            </div>
+
+            {/* 우측 패널 Entity 조인 컬럼은 표시 컬럼 목록에 통합됨 */}
+
+            {/* 우측 패널 데이터 필터링 */}
+            <div className="border-border/50 bg-muted/40 space-y-4 rounded-lg border p-4">
+              <h3 className="border-l-primary/40 border-l-2 pl-2 text-sm font-semibold">우측 패널 데이터 필터링</h3>
+              <p className="text-muted-foreground text-xs">특정 컬럼 값으로 우측 패널 데이터를 필터링합니다</p>
+              <DataFilterConfigPanel
+                tableName={config.rightPanel?.tableName}
+                columns={rightTableColumns.map(
+                  (col) =>
+                    ({
+                      columnName: col.columnName,
+                      columnLabel: col.columnLabel || col.columnName,
+                      dataType: col.dataType || "text",
+                      input_type: (col as any).input_type,
+                    }) as any,
                 )}
+                config={config.rightPanel?.dataFilter}
+                onConfigChange={(dataFilter) => updateRightPanel({ dataFilter })}
+                menuObjid={menuObjid} // 🆕 메뉴 OBJID 전달
+              />
+            </div>
+
+            {/* 우측 패널 중복 제거 */}
+            <div className="border-border/50 bg-muted/40 space-y-4 rounded-lg border p-4">
+              <div className="flex items-center justify-between">
+                <div>
+                  <h3 className="border-l-primary/40 border-l-2 pl-2 text-sm font-semibold">중복 데이터 제거</h3>
+                  <p className="text-muted-foreground text-xs">같은 값을 가진 데이터를 하나로 통합하여 표시</p>
+                </div>
+                <Switch
+                  checked={config.rightPanel?.deduplication?.enabled ?? false}
+                  onCheckedChange={(checked) => {
+                    if (checked) {
+                      updateRightPanel({
+                        deduplication: {
+                          enabled: true,
+                          groupByColumn: "",
+                          keepStrategy: "latest",
+                          sortColumn: "start_date",
+                        },
+                      });
+                    } else {
+                      updateRightPanel({ deduplication: undefined });
+                    }
+                  }}
+                />
               </div>
-            </div>
-          );
-        })()}
-      </div>
 
-      {/* 우측 패널 Entity 조인 컬럼은 표시 컬럼 목록에 통합됨 */}
+              {config.rightPanel?.deduplication?.enabled && (
+                <div className="space-y-3 border-l-2 pl-4">
+                  {/* 중복 제거 기준 컬럼 */}
+                  <div>
+                    <Label className="text-xs">중복 제거 기준 컬럼</Label>
+                    <Select
+                      value={config.rightPanel?.deduplication?.groupByColumn || ""}
+                      onValueChange={(value) =>
+                        updateRightPanel({
+                          deduplication: { ...config.rightPanel?.deduplication!, groupByColumn: value },
+                        })
+                      }
+                    >
+                      <SelectTrigger className="h-8 text-xs">
+                        <SelectValue placeholder="기준 컬럼 선택" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {rightTableColumns.map((col) => (
+                          <SelectItem key={col.columnName} value={col.columnName}>
+                            {col.columnLabel || col.columnName}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    <p className="text-muted-foreground mt-1 text-[10px]">
+                      이 컬럼의 값이 같은 데이터들 중 하나만 표시합니다
+                    </p>
+                  </div>
 
-      {/* 우측 패널 데이터 필터링 */}
-      <div className="space-y-4 rounded-lg border border-border/50 bg-muted/40 p-4">
-        <h3 className="border-l-2 border-l-primary/40 pl-2 text-sm font-semibold">우측 패널 데이터 필터링</h3>
-        <p className="text-muted-foreground text-xs">특정 컬럼 값으로 우측 패널 데이터를 필터링합니다</p>
-        <DataFilterConfigPanel
-          tableName={config.rightPanel?.tableName}
-          columns={rightTableColumns.map(
-            (col) =>
-              ({
-                columnName: col.columnName,
-                columnLabel: col.columnLabel || col.columnName,
-                dataType: col.dataType || "text",
-                input_type: (col as any).input_type,
-              }) as any,
-          )}
-          config={config.rightPanel?.dataFilter}
-          onConfigChange={(dataFilter) => updateRightPanel({ dataFilter })}
-          menuObjid={menuObjid} // 🆕 메뉴 OBJID 전달
-        />
-      </div>
+                  {/* 유지 전략 */}
+                  <div>
+                    <Label className="text-xs">유지 전략</Label>
+                    <Select
+                      value={config.rightPanel?.deduplication?.keepStrategy || "latest"}
+                      onValueChange={(value: any) =>
+                        updateRightPanel({
+                          deduplication: { ...config.rightPanel?.deduplication!, keepStrategy: value },
+                        })
+                      }
+                    >
+                      <SelectTrigger className="h-8 text-xs">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="latest">최신 데이터 (가장 최근)</SelectItem>
+                        <SelectItem value="earliest">최초 데이터 (가장 오래된)</SelectItem>
+                        <SelectItem value="current_date">현재 유효한 데이터 (날짜 기준)</SelectItem>
+                        <SelectItem value="base_price">기준단가로 설정된 데이터</SelectItem>
+                      </SelectContent>
+                    </Select>
+                    <p className="text-muted-foreground mt-1 text-[10px]">
+                      {config.rightPanel?.deduplication?.keepStrategy === "latest" &&
+                        "가장 최근에 추가된 데이터를 표시합니다"}
+                      {config.rightPanel?.deduplication?.keepStrategy === "earliest" &&
+                        "가장 먼저 추가된 데이터를 표시합니다"}
+                      {config.rightPanel?.deduplication?.keepStrategy === "current_date" &&
+                        "오늘 날짜 기준으로 유효한 기간의 데이터를 표시합니다"}
+                      {config.rightPanel?.deduplication?.keepStrategy === "base_price" &&
+                        "기준단가(base_price)로 체크된 데이터를 표시합니다"}
+                    </p>
+                  </div>
 
-      {/* 우측 패널 중복 제거 */}
-      <div className="space-y-4 rounded-lg border border-border/50 bg-muted/40 p-4">
-        <div className="flex items-center justify-between">
-          <div>
-            <h3 className="border-l-2 border-l-primary/40 pl-2 text-sm font-semibold">중복 데이터 제거</h3>
-            <p className="text-muted-foreground text-xs">같은 값을 가진 데이터를 하나로 통합하여 표시</p>
-          </div>
-          <Switch
-            checked={config.rightPanel?.deduplication?.enabled ?? false}
-            onCheckedChange={(checked) => {
-              if (checked) {
-                updateRightPanel({
-                  deduplication: {
-                    enabled: true,
-                    groupByColumn: "",
-                    keepStrategy: "latest",
-                    sortColumn: "start_date",
-                  },
-                });
-              } else {
-                updateRightPanel({ deduplication: undefined });
-              }
-            }}
-          />
-        </div>
-
-        {config.rightPanel?.deduplication?.enabled && (
-          <div className="space-y-3 border-l-2 pl-4">
-            {/* 중복 제거 기준 컬럼 */}
-            <div>
-              <Label className="text-xs">중복 제거 기준 컬럼</Label>
-              <Select
-                value={config.rightPanel?.deduplication?.groupByColumn || ""}
-                onValueChange={(value) =>
-                  updateRightPanel({
-                    deduplication: { ...config.rightPanel?.deduplication!, groupByColumn: value },
-                  })
-                }
-              >
-                <SelectTrigger className="h-8 text-xs">
-                  <SelectValue placeholder="기준 컬럼 선택" />
-                </SelectTrigger>
-                <SelectContent>
-                  {rightTableColumns.map((col) => (
-                    <SelectItem key={col.columnName} value={col.columnName}>
-                      {col.columnLabel || col.columnName}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-              <p className="text-muted-foreground mt-1 text-[10px]">
-                이 컬럼의 값이 같은 데이터들 중 하나만 표시합니다
-              </p>
+                  {/* 정렬 기준 컬럼 (latest/earliest만) */}
+                  {(config.rightPanel?.deduplication?.keepStrategy === "latest" ||
+                    config.rightPanel?.deduplication?.keepStrategy === "earliest") && (
+                    <div>
+                      <Label className="text-xs">정렬 기준 컬럼</Label>
+                      <Select
+                        value={config.rightPanel?.deduplication?.sortColumn || ""}
+                        onValueChange={(value) =>
+                          updateRightPanel({
+                            deduplication: { ...config.rightPanel?.deduplication!, sortColumn: value },
+                          })
+                        }
+                      >
+                        <SelectTrigger className="h-8 text-xs">
+                          <SelectValue placeholder="정렬 기준 컬럼 선택" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {rightTableColumns
+                            .filter(
+                              (col) =>
+                                col.dataType === "date" ||
+                                col.dataType === "timestamp" ||
+                                col.columnName.includes("date"),
+                            )
+                            .map((col) => (
+                              <SelectItem key={col.columnName} value={col.columnName}>
+                                {col.columnLabel || col.columnName}
+                              </SelectItem>
+                            ))}
+                        </SelectContent>
+                      </Select>
+                      <p className="text-muted-foreground mt-1 text-[10px]">
+                        이 컬럼의 값으로 최신/최초를 판단합니다 (보통 날짜 컬럼)
+                      </p>
+                    </div>
+                  )}
+                </div>
+              )}
             </div>
 
-            {/* 유지 전략 */}
-            <div>
-              <Label className="text-xs">유지 전략</Label>
-              <Select
-                value={config.rightPanel?.deduplication?.keepStrategy || "latest"}
-                onValueChange={(value: any) =>
-                  updateRightPanel({
-                    deduplication: { ...config.rightPanel?.deduplication!, keepStrategy: value },
-                  })
-                }
-              >
-                <SelectTrigger className="h-8 text-xs">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="latest">최신 데이터 (가장 최근)</SelectItem>
-                  <SelectItem value="earliest">최초 데이터 (가장 오래된)</SelectItem>
-                  <SelectItem value="current_date">현재 유효한 데이터 (날짜 기준)</SelectItem>
-                  <SelectItem value="base_price">기준단가로 설정된 데이터</SelectItem>
-                </SelectContent>
-              </Select>
-              <p className="text-muted-foreground mt-1 text-[10px]">
-                {config.rightPanel?.deduplication?.keepStrategy === "latest" &&
-                  "가장 최근에 추가된 데이터를 표시합니다"}
-                {config.rightPanel?.deduplication?.keepStrategy === "earliest" &&
-                  "가장 먼저 추가된 데이터를 표시합니다"}
-                {config.rightPanel?.deduplication?.keepStrategy === "current_date" &&
-                  "오늘 날짜 기준으로 유효한 기간의 데이터를 표시합니다"}
-                {config.rightPanel?.deduplication?.keepStrategy === "base_price" &&
-                  "기준단가(base_price)로 체크된 데이터를 표시합니다"}
-              </p>
-            </div>
-
-            {/* 정렬 기준 컬럼 (latest/earliest만) */}
-            {(config.rightPanel?.deduplication?.keepStrategy === "latest" ||
-              config.rightPanel?.deduplication?.keepStrategy === "earliest") && (
-              <div>
-                <Label className="text-xs">정렬 기준 컬럼</Label>
-                <Select
-                  value={config.rightPanel?.deduplication?.sortColumn || ""}
-                  onValueChange={(value) =>
-                    updateRightPanel({
-                      deduplication: { ...config.rightPanel?.deduplication!, sortColumn: value },
-                    })
-                  }
-                >
-                  <SelectTrigger className="h-8 text-xs">
-                    <SelectValue placeholder="정렬 기준 컬럼 선택" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {rightTableColumns
-                      .filter(
-                        (col) =>
-                          col.dataType === "date" || col.dataType === "timestamp" || col.columnName.includes("date"),
-                      )
-                      .map((col) => (
-                        <SelectItem key={col.columnName} value={col.columnName}>
-                          {col.columnLabel || col.columnName}
-                        </SelectItem>
-                      ))}
-                  </SelectContent>
-                </Select>
-                <p className="text-muted-foreground mt-1 text-[10px]">
-                  이 컬럼의 값으로 최신/최초를 판단합니다 (보통 날짜 컬럼)
-                </p>
-              </div>
-            )}
-          </div>
-        )}
-      </div>
-
-      {/* 🆕 우측 패널 수정 버튼 설정 */}
-      <div className="space-y-4 rounded-lg border border-border/50 bg-muted/40 p-4">
-        <div className="flex items-center justify-between">
-          <div>
-            <h3 className="border-l-2 border-l-primary/40 pl-2 text-sm font-semibold">수정 버튼 설정</h3>
-            <p className="text-muted-foreground text-xs">우측 리스트의 수정 버튼 동작 방식 설정</p>
-          </div>
-          <Switch
-            checked={config.rightPanel?.editButton?.enabled ?? true}
-            onCheckedChange={(checked) => {
-              updateRightPanel({
-                editButton: {
-                  enabled: checked,
-                  mode: config.rightPanel?.editButton?.mode || "auto",
-                  buttonLabel: config.rightPanel?.editButton?.buttonLabel,
-                  buttonVariant: config.rightPanel?.editButton?.buttonVariant,
-                },
-              });
-            }}
-          />
-        </div>
-
-        {(config.rightPanel?.editButton?.enabled ?? true) && (
-          <div className="space-y-3 border-l-2 pl-4">
-            {/* 수정 모드 */}
-            <div>
-              <Label className="text-xs">수정 모드</Label>
-              <Select
-                value={config.rightPanel?.editButton?.mode || "auto"}
-                onValueChange={(value: "auto" | "modal") =>
-                  updateRightPanel({
-                    editButton: {
-                      ...config.rightPanel?.editButton,
-                      mode: value,
-                      enabled: config.rightPanel?.editButton?.enabled ?? true,
-                    },
-                  })
-                }
-              >
-                <SelectTrigger className="h-8 text-xs">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="auto">자동 편집 (인라인)</SelectItem>
-                  <SelectItem value="modal">커스텀 모달 화면</SelectItem>
-                </SelectContent>
-              </Select>
-              <p className="text-muted-foreground mt-1 text-[10px]">
-                {config.rightPanel?.editButton?.mode === "modal"
-                  ? "지정한 화면을 모달로 열어 데이터를 수정합니다"
-                  : "현재 위치에서 직접 데이터를 수정합니다"}
-              </p>
-            </div>
-
-            {/* 모달 화면 선택 (modal 모드일 때만) */}
-            {config.rightPanel?.editButton?.mode === "modal" && (
-              <div>
-                <Label className="text-xs">모달 화면</Label>
-                <ScreenSelector
-                  value={config.rightPanel?.editButton?.modalScreenId}
-                  onChange={(screenId) =>
+            {/* 🆕 우측 패널 수정 버튼 설정 */}
+            <div className="border-border/50 bg-muted/40 space-y-4 rounded-lg border p-4">
+              <div className="flex items-center justify-between">
+                <div>
+                  <h3 className="border-l-primary/40 border-l-2 pl-2 text-sm font-semibold">수정 버튼 설정</h3>
+                  <p className="text-muted-foreground text-xs">우측 리스트의 수정 버튼 동작 방식 설정</p>
+                </div>
+                <Switch
+                  checked={config.rightPanel?.editButton?.enabled ?? true}
+                  onCheckedChange={(checked) => {
                     updateRightPanel({
                       editButton: {
-                        ...config.rightPanel?.editButton!,
-                        modalScreenId: screenId,
-                      },
-                    })
-                  }
-                />
-                <p className="text-muted-foreground mt-1 text-[10px]">수정 버튼 클릭 시 열릴 화면을 선택하세요</p>
-              </div>
-            )}
-
-            {/* 버튼 라벨 */}
-            <div>
-              <Label className="text-xs">버튼 라벨</Label>
-              <Input
-                value={config.rightPanel?.editButton?.buttonLabel || "수정"}
-                onChange={(e) =>
-                  updateRightPanel({
-                    editButton: {
-                      ...config.rightPanel?.editButton!,
-                      buttonLabel: e.target.value,
-                      enabled: config.rightPanel?.editButton?.enabled ?? true,
-                      mode: config.rightPanel?.editButton?.mode || "auto",
-                    },
-                  })
-                }
-                className="h-8 text-xs"
-                placeholder="수정"
-              />
-            </div>
-
-            {/* 버튼 스타일 */}
-            <div>
-              <Label className="text-xs">버튼 스타일</Label>
-              <Select
-                value={config.rightPanel?.editButton?.buttonVariant || "outline"}
-                onValueChange={(value: any) =>
-                  updateRightPanel({
-                    editButton: {
-                      ...config.rightPanel?.editButton!,
-                      buttonVariant: value,
-                      enabled: config.rightPanel?.editButton?.enabled ?? true,
-                      mode: config.rightPanel?.editButton?.mode || "auto",
-                    },
-                  })
-                }
-              >
-                <SelectTrigger className="h-8 text-xs">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="default">기본 (파란색)</SelectItem>
-                  <SelectItem value="outline">외곽선</SelectItem>
-                  <SelectItem value="ghost">투명</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-
-            {/* 🆕 그룹핑 기준 컬럼 설정 (modal 모드일 때만 표시) */}
-            {config.rightPanel?.editButton?.mode === "modal" && (
-              <GroupByColumnsSelector
-                tableName={config.rightPanel?.tableName}
-                selectedColumns={config.rightPanel?.editButton?.groupByColumns || []}
-                onChange={(columns) => {
-                  updateRightPanel({
-                    editButton: {
-                      ...config.rightPanel?.editButton!,
-                      groupByColumns: columns,
-                      enabled: config.rightPanel?.editButton?.enabled ?? true,
-                      mode: config.rightPanel?.editButton?.mode || "auto",
-                    },
-                  });
-                }}
-              />
-            )}
-          </div>
-        )}
-      </div>
-
-      {/* 🆕 우측 패널 추가 버튼 설정 */}
-      {config.rightPanel?.showAdd && (
-        <div className="space-y-3 rounded-lg border border-border/50 bg-muted/40 p-4">
-          <div className="flex items-center justify-between">
-            <div>
-              <h3 className="border-l-2 border-l-primary/40 pl-2 text-sm font-semibold">추가 버튼 설정</h3>
-              <p className="text-muted-foreground text-xs">우측 리스트의 추가 버튼 동작 방식 설정</p>
-            </div>
-          </div>
-
-          <div className="space-y-3 border-l-2 pl-4">
-            <div>
-              <Label className="text-xs">추가 모드</Label>
-              <Select
-                value={config.rightPanel?.addButton?.mode || "auto"}
-                onValueChange={(value: "auto" | "modal") =>
-                  updateRightPanel({
-                    addButton: {
-                      ...config.rightPanel?.addButton,
-                      mode: value,
-                      enabled: true,
-                    },
-                  })
-                }
-              >
-                <SelectTrigger className="h-8 text-xs">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="auto">자동 (내장 폼)</SelectItem>
-                  <SelectItem value="modal">모달 화면</SelectItem>
-                </SelectContent>
-              </Select>
-              <p className="text-muted-foreground mt-1 text-[10px]">
-                {config.rightPanel?.addButton?.mode === "modal"
-                  ? "지정한 화면을 모달로 열어 데이터를 추가합니다"
-                  : "내장 폼으로 데이터를 추가합니다"}
-              </p>
-            </div>
-
-            {config.rightPanel?.addButton?.mode === "modal" && (
-              <div>
-                <Label className="text-xs">모달 화면</Label>
-                <ScreenSelector
-                  value={config.rightPanel?.addButton?.modalScreenId}
-                  onChange={(screenId) =>
-                    updateRightPanel({
-                      addButton: {
-                        ...config.rightPanel?.addButton!,
-                        modalScreenId: screenId,
-                      },
-                    })
-                  }
-                />
-              </div>
-            )}
-
-            <div>
-              <Label className="text-xs">버튼 라벨</Label>
-              <Input
-                value={config.rightPanel?.addButton?.buttonLabel || "추가"}
-                onChange={(e) =>
-                  updateRightPanel({
-                    addButton: {
-                      ...config.rightPanel?.addButton!,
-                      buttonLabel: e.target.value,
-                      enabled: true,
-                      mode: config.rightPanel?.addButton?.mode || "auto",
-                    },
-                  })
-                }
-                placeholder="추가"
-                className="h-8 text-xs"
-              />
-            </div>
-          </div>
-        </div>
-      )}
-
-      {/* 🆕 우측 패널 삭제 버튼 설정 */}
-      <div className="space-y-3 rounded-lg border border-border/50 bg-muted/40 p-4">
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <h3 className="border-l-2 border-l-primary/40 pl-2 text-sm font-semibold">삭제 버튼 설정</h3>
-          </div>
-          <Switch
-            checked={config.rightPanel?.deleteButton?.enabled ?? true}
-            onCheckedChange={(checked) => {
-              updateRightPanel({
-                deleteButton: {
-                  enabled: checked,
-                  buttonLabel: config.rightPanel?.deleteButton?.buttonLabel,
-                  buttonVariant: config.rightPanel?.deleteButton?.buttonVariant,
-                },
-              });
-            }}
-          />
-        </div>
-
-        {(config.rightPanel?.deleteButton?.enabled ?? true) && (
-          <div className="space-y-3">
-            <div className="grid grid-cols-2 gap-3">
-              {/* 버튼 라벨 */}
-              <div className="space-y-1">
-                <Label className="text-xs">버튼 라벨</Label>
-                <Input
-                  value={config.rightPanel?.deleteButton?.buttonLabel || ""}
-                  placeholder="삭제"
-                  onChange={(e) => {
-                    updateRightPanel({
-                      deleteButton: {
-                        ...config.rightPanel?.deleteButton!,
-                        buttonLabel: e.target.value || undefined,
-                        enabled: config.rightPanel?.deleteButton?.enabled ?? true,
+                        enabled: checked,
+                        mode: config.rightPanel?.editButton?.mode || "auto",
+                        buttonLabel: config.rightPanel?.editButton?.buttonLabel,
+                        buttonVariant: config.rightPanel?.editButton?.buttonVariant,
                       },
                     });
                   }}
-                  className="h-8 text-xs"
                 />
               </div>
 
-              {/* 버튼 스타일 */}
-              <div className="space-y-1">
-                <Label className="text-xs">버튼 스타일</Label>
-                <Select
-                  value={config.rightPanel?.deleteButton?.buttonVariant || "ghost"}
-                  onValueChange={(value: "default" | "outline" | "ghost" | "destructive") => {
+              {(config.rightPanel?.editButton?.enabled ?? true) && (
+                <div className="space-y-3 border-l-2 pl-4">
+                  {/* 수정 모드 */}
+                  <div>
+                    <Label className="text-xs">수정 모드</Label>
+                    <Select
+                      value={config.rightPanel?.editButton?.mode || "auto"}
+                      onValueChange={(value: "auto" | "modal") =>
+                        updateRightPanel({
+                          editButton: {
+                            ...config.rightPanel?.editButton,
+                            mode: value,
+                            enabled: config.rightPanel?.editButton?.enabled ?? true,
+                          },
+                        })
+                      }
+                    >
+                      <SelectTrigger className="h-8 text-xs">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="auto">자동 편집 (인라인)</SelectItem>
+                        <SelectItem value="modal">커스텀 모달 화면</SelectItem>
+                      </SelectContent>
+                    </Select>
+                    <p className="text-muted-foreground mt-1 text-[10px]">
+                      {config.rightPanel?.editButton?.mode === "modal"
+                        ? "지정한 화면을 모달로 열어 데이터를 수정합니다"
+                        : "현재 위치에서 직접 데이터를 수정합니다"}
+                    </p>
+                  </div>
+
+                  {/* 모달 화면 선택 (modal 모드일 때만) */}
+                  {config.rightPanel?.editButton?.mode === "modal" && (
+                    <div>
+                      <Label className="text-xs">모달 화면</Label>
+                      <ScreenSelector
+                        value={config.rightPanel?.editButton?.modalScreenId}
+                        onChange={(screenId) =>
+                          updateRightPanel({
+                            editButton: {
+                              ...config.rightPanel?.editButton!,
+                              modalScreenId: screenId,
+                            },
+                          })
+                        }
+                      />
+                      <p className="text-muted-foreground mt-1 text-[10px]">수정 버튼 클릭 시 열릴 화면을 선택하세요</p>
+                    </div>
+                  )}
+
+                  {/* 버튼 라벨 */}
+                  <div>
+                    <Label className="text-xs">버튼 라벨</Label>
+                    <Input
+                      value={config.rightPanel?.editButton?.buttonLabel || "수정"}
+                      onChange={(e) =>
+                        updateRightPanel({
+                          editButton: {
+                            ...config.rightPanel?.editButton!,
+                            buttonLabel: e.target.value,
+                            enabled: config.rightPanel?.editButton?.enabled ?? true,
+                            mode: config.rightPanel?.editButton?.mode || "auto",
+                          },
+                        })
+                      }
+                      className="h-8 text-xs"
+                      placeholder="수정"
+                    />
+                  </div>
+
+                  {/* 버튼 스타일 */}
+                  <div>
+                    <Label className="text-xs">버튼 스타일</Label>
+                    <Select
+                      value={config.rightPanel?.editButton?.buttonVariant || "outline"}
+                      onValueChange={(value: any) =>
+                        updateRightPanel({
+                          editButton: {
+                            ...config.rightPanel?.editButton!,
+                            buttonVariant: value,
+                            enabled: config.rightPanel?.editButton?.enabled ?? true,
+                            mode: config.rightPanel?.editButton?.mode || "auto",
+                          },
+                        })
+                      }
+                    >
+                      <SelectTrigger className="h-8 text-xs">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="default">기본 (파란색)</SelectItem>
+                        <SelectItem value="outline">외곽선</SelectItem>
+                        <SelectItem value="ghost">투명</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+
+                  {/* 🆕 그룹핑 기준 컬럼 설정 (modal 모드일 때만 표시) */}
+                  {config.rightPanel?.editButton?.mode === "modal" && (
+                    <GroupByColumnsSelector
+                      tableName={config.rightPanel?.tableName}
+                      selectedColumns={config.rightPanel?.editButton?.groupByColumns || []}
+                      onChange={(columns) => {
+                        updateRightPanel({
+                          editButton: {
+                            ...config.rightPanel?.editButton!,
+                            groupByColumns: columns,
+                            enabled: config.rightPanel?.editButton?.enabled ?? true,
+                            mode: config.rightPanel?.editButton?.mode || "auto",
+                          },
+                        });
+                      }}
+                    />
+                  )}
+                </div>
+              )}
+            </div>
+
+            {/* 🆕 우측 패널 추가 버튼 설정 */}
+            {config.rightPanel?.showAdd && (
+              <div className="border-border/50 bg-muted/40 space-y-3 rounded-lg border p-4">
+                <div className="flex items-center justify-between">
+                  <div>
+                    <h3 className="border-l-primary/40 border-l-2 pl-2 text-sm font-semibold">추가 버튼 설정</h3>
+                    <p className="text-muted-foreground text-xs">우측 리스트의 추가 버튼 동작 방식 설정</p>
+                  </div>
+                </div>
+
+                <div className="space-y-3 border-l-2 pl-4">
+                  <div>
+                    <Label className="text-xs">추가 모드</Label>
+                    <Select
+                      value={config.rightPanel?.addButton?.mode || "auto"}
+                      onValueChange={(value: "auto" | "modal") =>
+                        updateRightPanel({
+                          addButton: {
+                            ...config.rightPanel?.addButton,
+                            mode: value,
+                            enabled: true,
+                          },
+                        })
+                      }
+                    >
+                      <SelectTrigger className="h-8 text-xs">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="auto">자동 (내장 폼)</SelectItem>
+                        <SelectItem value="modal">모달 화면</SelectItem>
+                      </SelectContent>
+                    </Select>
+                    <p className="text-muted-foreground mt-1 text-[10px]">
+                      {config.rightPanel?.addButton?.mode === "modal"
+                        ? "지정한 화면을 모달로 열어 데이터를 추가합니다"
+                        : "내장 폼으로 데이터를 추가합니다"}
+                    </p>
+                  </div>
+
+                  {config.rightPanel?.addButton?.mode === "modal" && (
+                    <div>
+                      <Label className="text-xs">모달 화면</Label>
+                      <ScreenSelector
+                        value={config.rightPanel?.addButton?.modalScreenId}
+                        onChange={(screenId) =>
+                          updateRightPanel({
+                            addButton: {
+                              ...config.rightPanel?.addButton!,
+                              modalScreenId: screenId,
+                            },
+                          })
+                        }
+                      />
+                    </div>
+                  )}
+
+                  <div>
+                    <Label className="text-xs">버튼 라벨</Label>
+                    <Input
+                      value={config.rightPanel?.addButton?.buttonLabel || "추가"}
+                      onChange={(e) =>
+                        updateRightPanel({
+                          addButton: {
+                            ...config.rightPanel?.addButton!,
+                            buttonLabel: e.target.value,
+                            enabled: true,
+                            mode: config.rightPanel?.addButton?.mode || "auto",
+                          },
+                        })
+                      }
+                      placeholder="추가"
+                      className="h-8 text-xs"
+                    />
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {/* 🆕 우측 패널 삭제 버튼 설정 */}
+            <div className="border-border/50 bg-muted/40 space-y-3 rounded-lg border p-4">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-2">
+                  <h3 className="border-l-primary/40 border-l-2 pl-2 text-sm font-semibold">삭제 버튼 설정</h3>
+                </div>
+                <Switch
+                  checked={config.rightPanel?.deleteButton?.enabled ?? true}
+                  onCheckedChange={(checked) => {
                     updateRightPanel({
                       deleteButton: {
-                        ...config.rightPanel?.deleteButton!,
-                        buttonVariant: value,
-                        enabled: config.rightPanel?.deleteButton?.enabled ?? true,
+                        enabled: checked,
+                        buttonLabel: config.rightPanel?.deleteButton?.buttonLabel,
+                        buttonVariant: config.rightPanel?.deleteButton?.buttonVariant,
                       },
                     });
                   }}
-                >
-                  <SelectTrigger className="h-8 text-xs">
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="ghost">Ghost (기본)</SelectItem>
-                    <SelectItem value="outline">Outline</SelectItem>
-                    <SelectItem value="default">Default</SelectItem>
-                    <SelectItem value="destructive">Destructive (빨강)</SelectItem>
-                  </SelectContent>
-                </Select>
+                />
               </div>
-            </div>
 
-            {/* 삭제 확인 메시지 */}
-            <div className="space-y-1">
-              <Label className="text-xs">삭제 확인 메시지</Label>
-              <Input
-                value={config.rightPanel?.deleteButton?.confirmMessage || ""}
-                placeholder="정말 삭제하시겠습니까?"
-                onChange={(e) => {
-                  updateRightPanel({
-                    deleteButton: {
-                      ...config.rightPanel?.deleteButton!,
-                      confirmMessage: e.target.value || undefined,
-                      enabled: config.rightPanel?.deleteButton?.enabled ?? true,
-                    },
-                  });
-                }}
-                className="h-8 text-xs"
-              />
+              {(config.rightPanel?.deleteButton?.enabled ?? true) && (
+                <div className="space-y-3">
+                  <div className="grid grid-cols-2 gap-3">
+                    {/* 버튼 라벨 */}
+                    <div className="space-y-1">
+                      <Label className="text-xs">버튼 라벨</Label>
+                      <Input
+                        value={config.rightPanel?.deleteButton?.buttonLabel || ""}
+                        placeholder="삭제"
+                        onChange={(e) => {
+                          updateRightPanel({
+                            deleteButton: {
+                              ...config.rightPanel?.deleteButton!,
+                              buttonLabel: e.target.value || undefined,
+                              enabled: config.rightPanel?.deleteButton?.enabled ?? true,
+                            },
+                          });
+                        }}
+                        className="h-8 text-xs"
+                      />
+                    </div>
+
+                    {/* 버튼 스타일 */}
+                    <div className="space-y-1">
+                      <Label className="text-xs">버튼 스타일</Label>
+                      <Select
+                        value={config.rightPanel?.deleteButton?.buttonVariant || "ghost"}
+                        onValueChange={(value: "default" | "outline" | "ghost" | "destructive") => {
+                          updateRightPanel({
+                            deleteButton: {
+                              ...config.rightPanel?.deleteButton!,
+                              buttonVariant: value,
+                              enabled: config.rightPanel?.deleteButton?.enabled ?? true,
+                            },
+                          });
+                        }}
+                      >
+                        <SelectTrigger className="h-8 text-xs">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="ghost">Ghost (기본)</SelectItem>
+                          <SelectItem value="outline">Outline</SelectItem>
+                          <SelectItem value="default">Default</SelectItem>
+                          <SelectItem value="destructive">Destructive (빨강)</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+
+                  {/* 삭제 확인 메시지 */}
+                  <div className="space-y-1">
+                    <Label className="text-xs">삭제 확인 메시지</Label>
+                    <Input
+                      value={config.rightPanel?.deleteButton?.confirmMessage || ""}
+                      placeholder="정말 삭제하시겠습니까?"
+                      onChange={(e) => {
+                        updateRightPanel({
+                          deleteButton: {
+                            ...config.rightPanel?.deleteButton!,
+                            confirmMessage: e.target.value || undefined,
+                            enabled: config.rightPanel?.deleteButton?.enabled ?? true,
+                          },
+                        });
+                      }}
+                      className="h-8 text-xs"
+                    />
+                  </div>
+                </div>
+              )}
             </div>
           </div>
-        )}
-      </div>
-          </div>
         </DialogContent>
       </Dialog>
 
@@ -3289,76 +3607,74 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
         <DialogContent className="max-h-[85vh] max-w-2xl overflow-y-auto">
           <DialogHeader>
             <DialogTitle className="text-base">추가 탭 설정</DialogTitle>
-            <DialogDescription className="text-xs">우측 패널에 다른 테이블 데이터를 탭으로 추가합니다</DialogDescription>
+            <DialogDescription className="text-xs">
+              우측 패널에 다른 테이블 데이터를 탭으로 추가합니다
+            </DialogDescription>
           </DialogHeader>
           <div className="space-y-4">
-      <div className="space-y-4 rounded-lg border border-border/50 bg-muted/40 p-4">
-        <div className="flex items-center justify-between">
-          <div>
-            <h3 className="border-l-2 border-l-primary/40 pl-2 text-sm font-semibold">추가 탭</h3>
-            <p className="text-muted-foreground text-xs">
-              우측 패널에 다른 테이블 데이터를 탭으로 추가합니다
-            </p>
-          </div>
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => {
-              const newTab: AdditionalTabConfig = {
-                tabId: `tab_${Date.now()}`,
-                label: `탭 ${(config.rightPanel?.additionalTabs?.length || 0) + 1}`,
-                title: "",
-                tableName: "",
-                displayMode: "list",
-                showSearch: false,
-                showAdd: false,
-                showEdit: true,
-                showDelete: true,
-                summaryColumnCount: 3,
-                summaryShowLabel: true,
-              };
-              updateRightPanel({
-                additionalTabs: [...(config.rightPanel?.additionalTabs || []), newTab],
-              });
-            }}
-          >
-            <Plus className="mr-1 h-3 w-3" />
-            탭 추가
-          </Button>
-        </div>
+            <div className="border-border/50 bg-muted/40 space-y-4 rounded-lg border p-4">
+              <div className="flex items-center justify-between">
+                <div>
+                  <h3 className="border-l-primary/40 border-l-2 pl-2 text-sm font-semibold">추가 탭</h3>
+                  <p className="text-muted-foreground text-xs">우측 패널에 다른 테이블 데이터를 탭으로 추가합니다</p>
+                </div>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => {
+                    const newTab: AdditionalTabConfig = {
+                      tabId: `tab_${Date.now()}`,
+                      label: `탭 ${(config.rightPanel?.additionalTabs?.length || 0) + 1}`,
+                      title: "",
+                      tableName: "",
+                      displayMode: "list",
+                      showSearch: false,
+                      showAdd: false,
+                      showEdit: true,
+                      showDelete: true,
+                      summaryColumnCount: 3,
+                      summaryShowLabel: true,
+                    };
+                    updateRightPanel({
+                      additionalTabs: [...(config.rightPanel?.additionalTabs || []), newTab],
+                    });
+                  }}
+                >
+                  <Plus className="mr-1 h-3 w-3" />탭 추가
+                </Button>
+              </div>
 
-        {/* 추가된 탭 목록 */}
-        {(config.rightPanel?.additionalTabs?.length || 0) > 0 ? (
-          <Accordion type="multiple" className="space-y-2">
-            {config.rightPanel?.additionalTabs?.map((tab, tabIndex) => (
-              <AdditionalTabConfigPanel
-                key={tab.tabId}
-                tab={tab}
-                tabIndex={tabIndex}
-                config={config}
-                updateRightPanel={updateRightPanel}
-                availableRightTables={availableRightTables}
-                leftTableColumns={leftTableColumns}
-                menuObjid={menuObjid}
-                loadedTableColumns={loadedTableColumns}
-                loadTableColumns={loadTableColumns}
-                loadingColumns={loadingColumns}
-                entityJoinColumns={entityJoinColumns}
-              />
-            ))}
-          </Accordion>
-        ) : (
-          <div className="rounded-lg border border-dashed p-4 text-center">
-            <p className="text-xs text-gray-500">
-              추가된 탭이 없습니다. [탭 추가] 버튼을 클릭하여 새 탭을 추가하세요.
-            </p>
-          </div>
-        )}
-      </div>
+              {/* 추가된 탭 목록 */}
+              {(config.rightPanel?.additionalTabs?.length || 0) > 0 ? (
+                <Accordion type="multiple" className="space-y-2">
+                  {config.rightPanel?.additionalTabs?.map((tab, tabIndex) => (
+                    <AdditionalTabConfigPanel
+                      key={tab.tabId}
+                      tab={tab}
+                      tabIndex={tabIndex}
+                      config={config}
+                      updateRightPanel={updateRightPanel}
+                      availableRightTables={availableRightTables}
+                      leftTableColumns={leftTableColumns}
+                      menuObjid={menuObjid}
+                      loadedTableColumns={loadedTableColumns}
+                      loadTableColumns={loadTableColumns}
+                      loadingColumns={loadingColumns}
+                      entityJoinColumns={entityJoinColumns}
+                    />
+                  ))}
+                </Accordion>
+              ) : (
+                <div className="rounded-lg border border-dashed p-4 text-center">
+                  <p className="text-muted-foreground text-xs">
+                    추가된 탭이 없습니다. [탭 추가] 버튼을 클릭하여 새 탭을 추가하세요.
+                  </p>
+                </div>
+              )}
+            </div>
           </div>
         </DialogContent>
       </Dialog>
     </div>
   );
 };
-
diff --git a/frontend/lib/registry/components/v2-split-panel-layout/config-panels/CommonConfigTab.tsx b/frontend/lib/registry/components/v2-split-panel-layout/config-panels/CommonConfigTab.tsx
index f67ec74c..6eea7384 100644
--- a/frontend/lib/registry/components/v2-split-panel-layout/config-panels/CommonConfigTab.tsx
+++ b/frontend/lib/registry/components/v2-split-panel-layout/config-panels/CommonConfigTab.tsx
@@ -44,13 +44,13 @@ export const CommonConfigTab: React.FC<CommonConfigTabProps> = ({
             <SelectItem value="detail">
               <div className="flex flex-col py-1">
                 <span className="text-sm font-medium">선택 시 표시</span>
-                <span className="text-xs text-gray-500">좌측 선택 시에만 우측 데이터 표시 / 미선택 시 빈 화면</span>
+                <span className="text-xs text-muted-foreground">좌측 선택 시에만 우측 데이터 표시 / 미선택 시 빈 화면</span>
               </div>
             </SelectItem>
             <SelectItem value="join">
               <div className="flex flex-col py-1">
                 <span className="text-sm font-medium">연관 목록</span>
-                <span className="text-xs text-gray-500">미선택 시 전체 표시 / 좌측 선택 시 필터링</span>
+                <span className="text-xs text-muted-foreground">미선택 시 전체 표시 / 좌측 선택 시 필터링</span>
               </div>
             </SelectItem>
           </SelectContent>
diff --git a/frontend/lib/registry/components/v2-split-panel-layout/config-panels/LeftPanelConfigTab.tsx b/frontend/lib/registry/components/v2-split-panel-layout/config-panels/LeftPanelConfigTab.tsx
index ba90a112..91309828 100644
--- a/frontend/lib/registry/components/v2-split-panel-layout/config-panels/LeftPanelConfigTab.tsx
+++ b/frontend/lib/registry/components/v2-split-panel-layout/config-panels/LeftPanelConfigTab.tsx
@@ -107,7 +107,7 @@ export const LeftPanelConfigTab: React.FC<LeftPanelConfigTabProps> = ({
                             config.leftPanel?.tableName === screenTableName ? "opacity-100" : "opacity-0"
                           )}
                         />
-                        <Database className="mr-2 h-3.5 w-3.5 text-blue-500" />
+                        <Database className="mr-2 h-3.5 w-3.5 text-primary" />
                         {allTables.find((t) => (t.tableName || t.table_name) === screenTableName)?.tableLabel ||
                           allTables.find((t) => (t.tableName || t.table_name) === screenTableName)?.displayName ||
                           screenTableName}
@@ -184,19 +184,19 @@ export const LeftPanelConfigTab: React.FC<LeftPanelConfigTabProps> = ({
               <SelectItem value="list">
                 <div className="flex flex-col py-1">
                   <span className="text-sm font-medium">목록 (LIST)</span>
-                  <span className="text-xs text-gray-500">클릭 가능한 항목 목록 (기본)</span>
+                  <span className="text-xs text-muted-foreground">클릭 가능한 항목 목록 (기본)</span>
                 </div>
               </SelectItem>
               <SelectItem value="table">
                 <div className="flex flex-col py-1">
                   <span className="text-sm font-medium">테이블 (TABLE)</span>
-                  <span className="text-xs text-gray-500">컬럼 헤더가 있는 테이블 형식</span>
+                  <span className="text-xs text-muted-foreground">컬럼 헤더가 있는 테이블 형식</span>
                 </div>
               </SelectItem>
               <SelectItem value="custom">
                 <div className="flex flex-col py-1">
                   <span className="text-sm font-medium">커스텀 (CUSTOM)</span>
-                  <span className="text-xs text-gray-500">패널 안에 컴포넌트 자유 배치</span>
+                  <span className="text-xs text-muted-foreground">패널 안에 컴포넌트 자유 배치</span>
                 </div>
               </SelectItem>
             </SelectContent>
@@ -365,13 +365,13 @@ export const LeftPanelConfigTab: React.FC<LeftPanelConfigTabProps> = ({
                         return (
                           <details key={`join-${tableIndex}`} className="group">
                             <summary className="border-border/60 my-2 flex cursor-pointer list-none items-center gap-2 border-t pt-2 select-none">
-                              <ChevronRight className="h-3 w-3 shrink-0 text-blue-500 transition-transform group-open:rotate-90" />
-                              <Link2 className="h-3 w-3 shrink-0 text-blue-500" />
-                              <span className="text-[10px] font-medium text-blue-600">{joinTable.tableName}</span>
+                              <ChevronRight className="h-3 w-3 shrink-0 text-primary transition-transform group-open:rotate-90" />
+                              <Link2 className="h-3 w-3 shrink-0 text-primary" />
+                              <span className="text-[10px] font-medium text-primary">{joinTable.tableName}</span>
                               {addedCount > 0 && (
-                                <span className="rounded-full bg-blue-100 px-1.5 text-[9px] font-medium text-blue-600">{addedCount}개 선택</span>
+                                <span className="rounded-full bg-primary/10 px-1.5 text-[9px] font-medium text-primary">{addedCount}개 선택</span>
                               )}
-                              <span className="text-[9px] text-gray-400">{joinColumnsToShow.length}개 남음</span>
+                              <span className="text-[9px] text-muted-foreground/70">{joinColumnsToShow.length}개 남음</span>
                             </summary>
                             <div className="space-y-0.5 pt-1">
                               {joinColumnsToShow.map((column, colIndex) => {
@@ -383,7 +383,7 @@ export const LeftPanelConfigTab: React.FC<LeftPanelConfigTabProps> = ({
                                 return (
                                   <div
                                     key={colIndex}
-                                    className="flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 hover:bg-blue-50/60"
+                                    className="flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 hover:bg-primary/10/60"
                                     onClick={() => {
                                       updateLeftPanel({
                                         columns: [...selectedColumns, {
@@ -402,13 +402,13 @@ export const LeftPanelConfigTab: React.FC<LeftPanelConfigTabProps> = ({
                                     }}
                                   >
                                     <Checkbox checked={false} className="pointer-events-none h-3.5 w-3.5 shrink-0" />
-                                    <Link2 className="h-3 w-3 shrink-0 text-blue-500" />
-                                    <span className="truncate text-xs text-blue-700">{column.columnLabel || column.columnName}</span>
+                                    <Link2 className="h-3 w-3 shrink-0 text-primary" />
+                                    <span className="truncate text-xs text-primary">{column.columnLabel || column.columnName}</span>
                                   </div>
                                 );
                               })}
                               {joinColumnsToShow.length === 0 && (
-                                <p className="px-2 py-1 text-[10px] text-gray-400">모든 컬럼이 이미 추가되었습니다</p>
+                                <p className="px-2 py-1 text-[10px] text-muted-foreground/70">모든 컬럼이 이미 추가되었습니다</p>
                               )}
                             </div>
                           </details>
diff --git a/frontend/lib/registry/components/v2-split-panel-layout/config-panels/RightPanelConfigTab.tsx b/frontend/lib/registry/components/v2-split-panel-layout/config-panels/RightPanelConfigTab.tsx
index 5e1d91dd..d6d6e493 100644
--- a/frontend/lib/registry/components/v2-split-panel-layout/config-panels/RightPanelConfigTab.tsx
+++ b/frontend/lib/registry/components/v2-split-panel-layout/config-panels/RightPanelConfigTab.tsx
@@ -116,7 +116,7 @@ export const RightPanelConfigTab: React.FC<RightPanelConfigTabProps> = ({
                         )}
                       />
                       {(table as any).displayName || tableName}
-                      {(table as any).displayName && <span className="ml-2 text-xs text-gray-500">({tableName})</span>}
+                      {(table as any).displayName && <span className="ml-2 text-xs text-muted-foreground">({tableName})</span>}
                     </CommandItem>
                   );
                   })}
@@ -141,19 +141,19 @@ export const RightPanelConfigTab: React.FC<RightPanelConfigTabProps> = ({
               <SelectItem value="list">
                 <div className="flex flex-col py-1">
                   <span className="text-sm font-medium">목록 (LIST)</span>
-                  <span className="text-xs text-gray-500">클릭 가능한 항목 목록 (기본)</span>
+                  <span className="text-xs text-muted-foreground">클릭 가능한 항목 목록 (기본)</span>
                 </div>
               </SelectItem>
               <SelectItem value="table">
                 <div className="flex flex-col py-1">
                   <span className="text-sm font-medium">테이블 (TABLE)</span>
-                  <span className="text-xs text-gray-500">컬럼 헤더가 있는 테이블 형식</span>
+                  <span className="text-xs text-muted-foreground">컬럼 헤더가 있는 테이블 형식</span>
                 </div>
               </SelectItem>
               <SelectItem value="custom">
                 <div className="flex flex-col py-1">
                   <span className="text-sm font-medium">커스텀 (CUSTOM)</span>
-                  <span className="text-xs text-gray-500">패널 안에 컴포넌트 자유 배치</span>
+                  <span className="text-xs text-muted-foreground">패널 안에 컴포넌트 자유 배치</span>
                 </div>
               </SelectItem>
             </SelectContent>
@@ -215,7 +215,7 @@ export const RightPanelConfigTab: React.FC<RightPanelConfigTabProps> = ({
         )}
 
         {(config.rightPanel?.displayMode || "list") === "list" && (
-          <div className="space-y-3 rounded-lg border border-gray-200 bg-gray-50 p-3">
+          <div className="space-y-3 rounded-lg border border-border bg-muted p-3">
             <Label className="text-sm font-semibold">요약 표시 설정</Label>
             <div className="space-y-2">
               <Label className="text-xs">표시할 컬럼 개수</Label>
@@ -230,12 +230,12 @@ export const RightPanelConfigTab: React.FC<RightPanelConfigTabProps> = ({
                 }}
                 className="bg-white"
               />
-              <p className="text-xs text-gray-500">접기 전에 표시할 컬럼 개수 (기본: 3개)</p>
+              <p className="text-xs text-muted-foreground">접기 전에 표시할 컬럼 개수 (기본: 3개)</p>
             </div>
             <div className="flex items-center justify-between space-x-2">
               <div className="flex-1">
                 <Label className="text-xs">라벨 표시</Label>
-                <p className="text-xs text-gray-500">컬럼명 표시 여부</p>
+                <p className="text-xs text-muted-foreground">컬럼명 표시 여부</p>
               </div>
               <Checkbox
                 checked={config.rightPanel?.summaryShowLabel ?? true}
@@ -365,13 +365,13 @@ export const RightPanelConfigTab: React.FC<RightPanelConfigTabProps> = ({
                         return (
                           <details key={`join-${tableIndex}`} className="group">
                             <summary className="border-border/60 my-2 flex cursor-pointer list-none items-center gap-2 border-t pt-2 select-none">
-                              <ChevronRight className="h-3 w-3 shrink-0 text-blue-500 transition-transform group-open:rotate-90" />
-                              <Link2 className="h-3 w-3 shrink-0 text-blue-500" />
-                              <span className="text-[10px] font-medium text-blue-600">{joinTable.tableName}</span>
+                              <ChevronRight className="h-3 w-3 shrink-0 text-primary transition-transform group-open:rotate-90" />
+                              <Link2 className="h-3 w-3 shrink-0 text-primary" />
+                              <span className="text-[10px] font-medium text-primary">{joinTable.tableName}</span>
                               {addedCount > 0 && (
-                                <span className="rounded-full bg-blue-100 px-1.5 text-[9px] font-medium text-blue-600">{addedCount}개 선택</span>
+                                <span className="rounded-full bg-primary/10 px-1.5 text-[9px] font-medium text-primary">{addedCount}개 선택</span>
                               )}
-                              <span className="text-[9px] text-gray-400">{joinColumnsToShow.length}개 남음</span>
+                              <span className="text-[9px] text-muted-foreground/70">{joinColumnsToShow.length}개 남음</span>
                             </summary>
                             <div className="space-y-0.5 pt-1">
                               {joinColumnsToShow.map((column, colIndex) => {
@@ -383,7 +383,7 @@ export const RightPanelConfigTab: React.FC<RightPanelConfigTabProps> = ({
                                 return (
                                   <div
                                     key={colIndex}
-                                    className="flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 hover:bg-blue-50/60"
+                                    className="flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 hover:bg-primary/10/60"
                                     onClick={() => {
                                       updateRightPanel({
                                         columns: [...selectedColumns, {
@@ -402,13 +402,13 @@ export const RightPanelConfigTab: React.FC<RightPanelConfigTabProps> = ({
                                     }}
                                   >
                                     <Checkbox checked={false} className="pointer-events-none h-3.5 w-3.5 shrink-0" />
-                                    <Link2 className="h-3 w-3 shrink-0 text-blue-500" />
-                                    <span className="truncate text-xs text-blue-700">{column.columnLabel || column.columnName}</span>
+                                    <Link2 className="h-3 w-3 shrink-0 text-primary" />
+                                    <span className="truncate text-xs text-primary">{column.columnLabel || column.columnName}</span>
                                   </div>
                                 );
                               })}
                               {joinColumnsToShow.length === 0 && (
-                                <p className="px-2 py-1 text-[10px] text-gray-400">모든 컬럼이 이미 추가되었습니다</p>
+                                <p className="px-2 py-1 text-[10px] text-muted-foreground/70">모든 컬럼이 이미 추가되었습니다</p>
                               )}
                             </div>
                           </details>
diff --git a/frontend/lib/registry/components/v2-split-panel-layout/config-panels/SharedComponents.tsx b/frontend/lib/registry/components/v2-split-panel-layout/config-panels/SharedComponents.tsx
index c4a6dc68..a6c4be0d 100644
--- a/frontend/lib/registry/components/v2-split-panel-layout/config-panels/SharedComponents.tsx
+++ b/frontend/lib/registry/components/v2-split-panel-layout/config-panels/SharedComponents.tsx
@@ -37,14 +37,14 @@ export function SortableColumnRow({
       className={cn(
         "flex items-center gap-1.5 rounded-md border bg-card px-2 py-1.5",
         isDragging && "z-50 opacity-50 shadow-md",
-        isEntityJoin && "border-blue-200 bg-blue-50/30",
+        isEntityJoin && "border-primary/20 bg-primary/10/30",
       )}
     >
       <div {...attributes} {...listeners} className="text-muted-foreground hover:text-foreground cursor-grab touch-none">
         <GripVertical className="h-3 w-3" />
       </div>
       {isEntityJoin ? (
-        <Link2 className="h-3 w-3 shrink-0 text-blue-500" title="Entity 조인 컬럼" />
+        <Link2 className="h-3 w-3 shrink-0 text-primary" title="Entity 조인 컬럼" />
       ) : (
         <span className="text-muted-foreground w-5 shrink-0 text-center text-[10px] font-medium">#{index + 1}</span>
       )}
diff --git a/frontend/lib/registry/components/v2-table-list/CardModeRenderer.tsx b/frontend/lib/registry/components/v2-table-list/CardModeRenderer.tsx
index 7623c1b5..205b71ec 100644
--- a/frontend/lib/registry/components/v2-table-list/CardModeRenderer.tsx
+++ b/frontend/lib/registry/components/v2-table-list/CardModeRenderer.tsx
@@ -71,7 +71,7 @@ export const CardModeRenderer: React.FC<CardModeRendererProps> = ({
     if (!config.showActions) return null;
 
     return (
-      <div className="mt-3 flex items-center justify-end space-x-1 border-t border-gray-100 pt-3">
+      <div className="mt-3 flex items-center justify-end space-x-1 border-t border-border pt-3">
         <Button
           variant="ghost"
           size="sm"
@@ -145,7 +145,7 @@ export const CardModeRenderer: React.FC<CardModeRendererProps> = ({
             key={`card-${index}-${idValue}`}
             style={cardStyle}
             className={`transition-all duration-200 hover:shadow-md ${
-              isSelected ? "bg-blue-50/30 ring-2 ring-blue-500" : ""
+              isSelected ? "bg-primary/10/30 ring-2 ring-ring" : ""
             }`}
             onClick={(e) => onRowClick?.(row, index, e)}
           >
@@ -153,7 +153,7 @@ export const CardModeRenderer: React.FC<CardModeRendererProps> = ({
               <div className="flex items-start justify-between">
                 <div className="min-w-0 flex-1">
                   <CardTitle className="truncate text-sm font-medium">{titleValue || "제목 없음"}</CardTitle>
-                  {subtitleValue && <div className="mt-1 truncate text-xs text-gray-500">{subtitleValue}</div>}
+                  {subtitleValue && <div className="mt-1 truncate text-xs text-muted-foreground">{subtitleValue}</div>}
                 </div>
 
                 {/* ID 뱃지 */}
@@ -176,7 +176,7 @@ export const CardModeRenderer: React.FC<CardModeRendererProps> = ({
                       return isObjid ? getFilePreviewUrl(strValue) : getFullImageUrl(strValue);
                     })()}
                     alt={titleValue}
-                    className="h-24 w-full rounded-md bg-gray-100 object-cover"
+                    className="h-24 w-full rounded-md bg-muted object-cover"
                     onError={(e) => {
                       const target = e.target as HTMLImageElement;
                       // 이미지 로드 실패 시 폴백 표시
@@ -195,7 +195,7 @@ export const CardModeRenderer: React.FC<CardModeRendererProps> = ({
               )}
 
               {/* 설명 표시 */}
-              {descriptionValue && <div className="mb-3 line-clamp-2 text-xs text-gray-600">{descriptionValue}</div>}
+              {descriptionValue && <div className="mb-3 line-clamp-2 text-xs text-muted-foreground">{descriptionValue}</div>}
 
               {/* 추가 필드들 표시 (선택적) */}
               <div className="space-y-1">
@@ -217,7 +217,7 @@ export const CardModeRenderer: React.FC<CardModeRendererProps> = ({
 
                     return (
                       <div key={col.columnName} className="flex items-center justify-between text-xs">
-                        <span className="truncate text-gray-500">{col.displayName}:</span>
+                        <span className="truncate text-muted-foreground">{col.displayName}:</span>
                         <span className="ml-2 truncate font-medium">{value}</span>
                       </div>
                     );
diff --git a/frontend/lib/registry/components/v2-table-list/SingleTableWithSticky.tsx b/frontend/lib/registry/components/v2-table-list/SingleTableWithSticky.tsx
index 36bec277..69bcc9cd 100644
--- a/frontend/lib/registry/components/v2-table-list/SingleTableWithSticky.tsx
+++ b/frontend/lib/registry/components/v2-table-list/SingleTableWithSticky.tsx
@@ -90,14 +90,15 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
         boxSizing: "border-box",
       }}
     >
-      <div className="relative flex-1 overflow-auto">
+      <div className="relative flex-1 overflow-auto" style={{ WebkitOverflowScrolling: "touch" }}>
         <Table
           noWrapper
           className="w-full"
           style={{
             width: "100%",
-            tableLayout: "auto", // 테이블 크기 자동 조정
+            tableLayout: "auto",
             boxSizing: "border-box",
+            minWidth: `${Math.max(actualColumns.length * 80, 400)}px`,
           }}
         >
           <TableHeader
diff --git a/frontend/lib/registry/components/v2-table-list/TableListComponent.tsx b/frontend/lib/registry/components/v2-table-list/TableListComponent.tsx
index 4087be04..2accfe1e 100644
--- a/frontend/lib/registry/components/v2-table-list/TableListComponent.tsx
+++ b/frontend/lib/registry/components/v2-table-list/TableListComponent.tsx
@@ -11,6 +11,7 @@ import { getFullImageUrl } from "@/lib/api/client";
 import { getFilePreviewUrl } from "@/lib/api/file";
 import { Button } from "@/components/ui/button";
 import { v2EventBus, V2_EVENTS, V2ErrorBoundary } from "@/lib/v2-core";
+import { getAdaptiveLabelColor } from "@/lib/utils/darkModeColor";
 
 // 🖼️ 테이블 셀 이미지 썸네일 컴포넌트
 // objid인 경우 인증된 API로 blob URL 생성, 경로인 경우 직접 URL 사용
@@ -404,7 +405,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
 
   // 디버그 로그 제거 (성능 최적화)
 
-  const buttonColor = component.style?.labelColor || "#212121";
+  const buttonColor = getAdaptiveLabelColor(component.style?.labelColor);
   const buttonTextColor = component.config?.buttonTextColor || "#ffffff";
 
   const gridColumns = component.gridColumns || 1;
@@ -432,7 +433,13 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
     width: "100%",
     height: "100%",
     minHeight: isDesignMode ? "300px" : "100%",
-    ...style, // style prop이 위의 기본값들을 덮어씀
+    ...style,
+    // 런타임에서는 DB의 고정 px 크기를 무시하고 부모에 맞춤
+    ...(!isDesignMode && {
+      width: "100%",
+      height: "100%",
+      minWidth: 0,
+    }),
   };
 
   // ========================================
@@ -706,7 +713,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
   const [categoryMappings, setCategoryMappings] = useState<
     Record<string, Record<string, { label: string; color?: string }>>
   >({});
-  const [categoryMappingsKey, setCategoryMappingsKey] = useState(0); // 강제 리렌더링용
+  const [categoryMappingsKey, setCategoryMappingsKey] = useState(0);
   const [searchValues, setSearchValues] = useState<Record<string, any>>({});
   const [selectedRows, setSelectedRows] = useState<Set<string>>(new Set());
   const [columnWidths, setColumnWidths] = useState<Record<string, number>>({});
@@ -1038,66 +1045,69 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
 
     // 컬럼의 고유 값 조회 함수
     const getColumnUniqueValues = async (columnName: string) => {
-      const meta = columnMeta[columnName];
-      const inputType = meta?.inputType || "text";
+      const { apiClient } = await import("@/lib/api/client");
 
-      // 카테고리 타입인 경우 전체 정의된 값 조회 (백엔드 API)
-      if (inputType === "category") {
-        try {
-          // API 클라이언트 사용 (쿠키 인증 자동 처리)
-          const { apiClient } = await import("@/lib/api/client");
-          const response = await apiClient.get(`/table-categories/${tableConfig.selectedTable}/${columnName}/values`);
+      // 최고관리자가 특정 회사 프리뷰 시 해당 회사 카테고리만 필터링
+      const filterParam = companyCode && companyCode !== "*"
+        ? `?filterCompanyCode=${encodeURIComponent(companyCode)}`
+        : "";
 
-          if (response.data.success && response.data.data) {
-            const categoryOptions = response.data.data.map((item: any) => ({
-              value: item.valueCode, // 카멜케이스
-              label: item.valueLabel, // 카멜케이스
-            }));
-
-            return categoryOptions;
-          }
-        } catch (error: any) {
-          // 에러 시 현재 데이터 기반으로 fallback
-        }
-      }
-
-      // 백엔드 DISTINCT API로 전체 고유값 조회 (페이징과 무관하게 모든 값 반환)
+      // 1단계: 카테고리 API 시도 (columnMeta 무관하게 항상 시도)
       try {
-        const { apiClient } = await import("@/lib/api/client");
-        const response = await apiClient.get(`/entity/${tableConfig.selectedTable}/distinct/${columnName}`);
-
+        const response = await apiClient.get(`/table-categories/${tableConfig.selectedTable}/${columnName}/values${filterParam}`);
         if (response.data.success && response.data.data && response.data.data.length > 0) {
           return response.data.data.map((item: any) => ({
+            value: item.valueCode,
+            label: item.valueLabel,
+          }));
+        }
+      } catch {
+        // 카테고리 API 실패 시 다음 단계로
+      }
+
+      // 2단계: DISTINCT API (백엔드에서 category_values/code_info 라벨 변환 포함)
+      try {
+        const response = await apiClient.get(`/entity/${tableConfig.selectedTable}/distinct/${columnName}`);
+        if (response.data.success && response.data.data && response.data.data.length > 0) {
+          let options = response.data.data.map((item: any) => ({
             value: String(item.value),
             label: String(item.label),
           }));
+
+          // 프론트엔드 카테고리 매핑으로 추가 라벨 변환
+          const mapping = categoryMappings[columnName];
+          if (mapping && Object.keys(mapping).length > 0) {
+            options = options.map((opt) => ({
+              value: opt.value,
+              label: mapping[opt.value]?.label || opt.label,
+            }));
+          }
+
+          return options;
         }
-      } catch (error: any) {
-        // DISTINCT API 실패 시 현재 데이터 기반으로 fallback
+      } catch {
+        // DISTINCT API 실패 시 다음 단계로
       }
 
-      // fallback: 현재 로드된 데이터에서 고유 값 추출
-      const isLabelType = ["category", "entity", "code"].includes(inputType);
-      const labelField = isLabelType ? `${columnName}_name` : columnName;
-
+      // 3단계: 현재 로드된 데이터에서 고유 값 추출 (최종 fallback)
       const uniqueValuesMap = new Map<string, string>();
+      const mapping = categoryMappings[columnName];
 
       data.forEach((row) => {
         const value = row[columnName];
         if (value !== null && value !== undefined && value !== "") {
-          const label = isLabelType && row[labelField] ? row[labelField] : String(value);
-          uniqueValuesMap.set(String(value), label);
+          const strValue = String(value);
+          // _name 필드 또는 카테고리 매핑에서 라벨 가져오기
+          const nameField = row[`${columnName}_name`];
+          const mappedLabel = mapping?.[strValue]?.label;
+          const label = mappedLabel || nameField || strValue;
+          uniqueValuesMap.set(strValue, label);
         }
       });
 
-      const result = Array.from(uniqueValuesMap.entries())
-        .map(([value, label]) => ({
-          value: value,
-          label: label,
-        }))
+      return Array.from(uniqueValuesMap.entries())
+        .map(([value, label]) => ({ value, label }))
         .sort((a, b) => a.label.localeCompare(b.label));
-
-      return result;
     };
 
     const registration = {
@@ -1149,14 +1159,13 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
     tableConfig.selectedTable,
     tableConfig.columns,
     columnLabels,
-    columnMeta, // columnMeta가 변경되면 재등록 (inputType 정보 필요)
+    columnMeta,
+    categoryMappings,
     columnWidths,
     tableLabel,
-    data, // 데이터 자체가 변경되면 재등록 (고유 값 조회용)
-    totalItems, // 전체 항목 수가 변경되면 재등록
+    data,
+    totalItems,
     registerTable,
-    // unregisterTable은 의존성에서 제외 - 무한 루프 방지
-    // unregisterTable 함수는 의존성이 없어 안정적임
   ]);
 
   // 🎯 초기 로드 시 localStorage에서 정렬 상태 불러오기 (없으면 defaultSort 적용)
@@ -1400,7 +1409,13 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
         const mappings: Record<string, Record<string, { label: string; color?: string }>> = {};
         const apiClient = (await import("@/lib/api/client")).apiClient;
 
+        // 최고관리자가 특정 회사 프리뷰 시 해당 회사 카테고리만 필터링
+        const filterCompanyParam = companyCode && companyCode !== "*"
+          ? `&filterCompanyCode=${encodeURIComponent(companyCode)}`
+          : "";
+
         // 트리 구조를 평탄화하는 헬퍼 함수 (메인 테이블 + 엔티티 조인 공통 사용)
+        // valueCode만 키로 사용 (valueId까지 넣으면 같은 라벨이 2번 나옴)
         const flattenTree = (items: any[], mapping: Record<string, { label: string; color?: string }>) => {
           items.forEach((item: any) => {
             if (item.valueCode) {
@@ -1409,12 +1424,6 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                 color: item.color,
               };
             }
-            if (item.valueId !== undefined && item.valueId !== null) {
-              mapping[String(item.valueId)] = {
-                label: item.valueLabel,
-                color: item.color,
-              };
-            }
             if (item.children && Array.isArray(item.children) && item.children.length > 0) {
               flattenTree(item.children, mapping);
             }
@@ -1442,7 +1451,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
             }
 
             // 비활성화된 카테고리도 라벨로 표시하기 위해 includeInactive=true
-            const response = await apiClient.get(`/table-categories/${targetTable}/${targetColumn}/values?includeInactive=true`);
+            const response = await apiClient.get(`/table-categories/${targetTable}/${targetColumn}/values?includeInactive=true${filterCompanyParam}`);
 
             if (response.data.success && response.data.data && Array.isArray(response.data.data)) {
               const mapping: Record<string, { label: string; color?: string }> = {};
@@ -1525,7 +1534,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
               // inputType이 category인 경우 카테고리 매핑 로드
               if (inputTypeInfo?.inputType === "category" && !mappings[col.columnName]) {
                 try {
-                  const response = await apiClient.get(`/table-categories/${joinedTable}/${col.actualColumn}/values?includeInactive=true`);
+                  const response = await apiClient.get(`/table-categories/${joinedTable}/${col.actualColumn}/values?includeInactive=true${filterCompanyParam}`);
 
                   if (response.data.success && response.data.data && Array.isArray(response.data.data)) {
                     const mapping: Record<string, { label: string; color?: string }> = {};
@@ -1595,6 +1604,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
     JSON.stringify(categoryColumns),
     JSON.stringify(tableConfig.columns),
     columnMeta,
+    companyCode,
   ]);
 
   // ========================================
@@ -4253,8 +4263,8 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
 
         return (
           <div className="flex max-w-full items-center gap-1.5 text-sm">
-            <Paperclip className="h-4 w-4 flex-shrink-0 text-gray-500" />
-            <span className="truncate text-blue-600" title={fileNames}>
+            <Paperclip className="h-4 w-4 flex-shrink-0 text-muted-foreground" />
+            <span className="truncate text-primary" title={fileNames}>
               {fileNames}
             </span>
             {files.length > 1 && <span className="text-muted-foreground flex-shrink-0 text-xs">({files.length})</span>}
@@ -5195,7 +5205,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
               <div className="flex flex-col gap-1">
                 <div className="text-muted-foreground px-2 py-1 text-xs font-medium">Excel</div>
                 <Button variant="ghost" size="sm" className="justify-start text-xs" onClick={() => exportToExcel(true)}>
-                  <FileSpreadsheet className="mr-2 h-3 w-3 text-green-600" />
+                  <FileSpreadsheet className="mr-2 h-3 w-3 text-emerald-600" />
                   전체 Excel 내보내기
                 </Button>
                 <Button
@@ -5205,13 +5215,13 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                   onClick={() => exportToExcel(false)}
                   disabled={selectedRows.size === 0}
                 >
-                  <FileSpreadsheet className="mr-2 h-3 w-3 text-green-600" />
+                  <FileSpreadsheet className="mr-2 h-3 w-3 text-emerald-600" />
                   선택 항목만 ({selectedRows.size}개)
                 </Button>
                 <div className="border-border my-1 border-t" />
                 <div className="text-muted-foreground px-2 py-1 text-xs font-medium">PDF/인쇄</div>
                 <Button variant="ghost" size="sm" className="justify-start text-xs" onClick={() => exportToPdf(true)}>
-                  <FileText className="mr-2 h-3 w-3 text-red-600" />
+                  <FileText className="mr-2 h-3 w-3 text-destructive" />
                   전체 PDF 내보내기
                 </Button>
                 <Button
@@ -5221,7 +5231,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                   onClick={() => exportToPdf(false)}
                   disabled={selectedRows.size === 0}
                 >
-                  <FileText className="mr-2 h-3 w-3 text-red-600" />
+                  <FileText className="mr-2 h-3 w-3 text-destructive" />
                   선택 항목만 ({selectedRows.size}개)
                 </Button>
               </div>
@@ -5268,7 +5278,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
     onDragStart: isDesignMode ? onDragStart : undefined,
     onDragEnd: isDesignMode ? onDragEnd : undefined,
     draggable: isDesignMode,
-    className: cn("w-full h-full", className, isDesignMode && "cursor-move"), // customer-item-mapping과 동일
+    className: cn("w-full h-full overflow-hidden", className, isDesignMode && "cursor-move"),
     style: componentStyle,
   };
 
@@ -5338,7 +5348,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
           </div>
         )}
 
-        <div style={{ flex: 1, overflow: "hidden" }}>
+        <div style={{ flex: 1, overflow: "auto", WebkitOverflowScrolling: "touch" }}>
           <SingleTableWithSticky
             data={data}
             columns={visibleColumns}
@@ -5404,7 +5414,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                   className="h-7 text-xs"
                   title="Excel 내보내기"
                 >
-                  <FileSpreadsheet className="mr-1 h-3 w-3 text-green-600" />
+                  <FileSpreadsheet className="mr-1 h-3 w-3 text-emerald-600" />
                   Excel
                 </Button>
               )}
@@ -5416,7 +5426,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                   className="h-7 text-xs"
                   title="PDF 내보내기"
                 >
-                  <FileText className="mr-1 h-3 w-3 text-red-600" />
+                  <FileText className="mr-1 h-3 w-3 text-destructive" />
                   PDF
                 </Button>
               )}
@@ -5648,6 +5658,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
               width: "100%",
               height: "100%",
               overflow: "auto",
+              WebkitOverflowScrolling: "touch",
             }}
             onScroll={handleVirtualScroll}
           >
@@ -5658,6 +5669,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                 borderCollapse: "collapse",
                 width: "100%",
                 tableLayout: "fixed",
+                minWidth: "400px",
               }}
             >
               {/* 헤더 (sticky) */}
@@ -5875,7 +5887,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                         {/* 리사이즈 핸들 (체크박스 제외) */}
                         {columnIndex < visibleColumns.length - 1 && column.columnName !== "__checkbox__" && (
                           <div
-                            className="absolute top-0 right-0 z-20 h-full w-2 cursor-col-resize hover:bg-blue-500"
+                            className="absolute top-0 right-0 z-20 h-full w-2 cursor-col-resize hover:bg-primary"
                             style={{ marginRight: "-4px", paddingLeft: "4px", paddingRight: "4px" }}
                             onClick={(e) => e.stopPropagation()} // 정렬 클릭 방지
                             onMouseDown={(e) => {
@@ -6228,11 +6240,11 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                                   // 🆕 배치 편집: 수정된 셀 스타일 (노란 배경)
                                   isModified && !cellValidationError && "bg-amber-100 dark:bg-amber-900/40",
                                   // 🆕 유효성 에러: 빨간 테두리 및 배경
-                                  cellValidationError && "bg-red-50 ring-2 ring-red-500 ring-inset dark:bg-red-950/40",
+                                  cellValidationError && "bg-destructive/10 ring-2 ring-destructive ring-inset dark:bg-destructive/15",
                                   // 🆕 검색 하이라이트 스타일 (노란 배경)
                                   isSearchHighlighted && !isCellFocused && "bg-yellow-200 dark:bg-yellow-700/50",
                                   // 🆕 편집 불가 컬럼 스타일 (연한 회색 배경)
-                                  column.editable === false && "bg-gray-50 dark:bg-gray-900/30",
+                                  column.editable === false && "bg-muted dark:bg-foreground/30",
                                 )}
                                 // 🆕 유효성 에러 툴팁
                                 title={cellValidationError || undefined}
@@ -6625,7 +6637,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
 
             {/* 행 삭제 */}
             <button
-              className="hover:bg-destructive hover:text-destructive-foreground flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm text-red-600"
+              className="hover:bg-destructive hover:text-destructive-foreground flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm text-destructive"
               onClick={async () => {
                 if (confirm("이 행을 삭제하시겠습니까?")) {
                   try {
@@ -6692,7 +6704,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                       variant="ghost"
                       size="sm"
                       onClick={() => removeFilterGroup(group.id)}
-                      className="h-6 w-6 p-0 text-red-500 hover:text-red-700"
+                      className="h-6 w-6 p-0 text-destructive hover:text-destructive"
                     >
                       <X className="h-4 w-4" />
                     </Button>
@@ -6752,7 +6764,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                           variant="ghost"
                           size="sm"
                           onClick={() => removeFilterCondition(group.id, condition.id)}
-                          className="h-6 w-6 p-0 text-red-500 hover:text-red-700"
+                          className="h-6 w-6 p-0 text-destructive hover:text-destructive"
                           disabled={group.conditions.length === 1}
                         >
                           <X className="h-3 w-3" />
diff --git a/frontend/lib/registry/components/v2-table-list/TableListConfigPanel.tsx b/frontend/lib/registry/components/v2-table-list/TableListConfigPanel.tsx
index 7de8a533..c5f1ad54 100644
--- a/frontend/lib/registry/components/v2-table-list/TableListConfigPanel.tsx
+++ b/frontend/lib/registry/components/v2-table-list/TableListConfigPanel.tsx
@@ -63,14 +63,14 @@ function SortableColumnRow({
       className={cn(
         "bg-card flex items-center gap-1.5 rounded-md border px-2 py-1.5",
         isDragging && "z-50 opacity-50 shadow-md",
-        isEntityJoin && "border-blue-200 bg-blue-50/30",
+        isEntityJoin && "border-primary/20 bg-primary/10/30",
       )}
     >
       <div {...attributes} {...listeners} className="text-muted-foreground hover:text-foreground cursor-grab touch-none">
         <GripVertical className="h-3 w-3" />
       </div>
       {isEntityJoin ? (
-        <Link2 className="h-3 w-3 shrink-0 text-blue-500" />
+        <Link2 className="h-3 w-3 shrink-0 text-primary" />
       ) : (
         <span className="text-muted-foreground w-5 shrink-0 text-center text-[10px] font-medium">#{index + 1}</span>
       )}
@@ -917,7 +917,7 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
                           <div className="flex flex-col">
                             <span>{table.displayName}</span>
                             {table.displayName !== table.tableName && (
-                              <span className="text-[10px] text-gray-400">{table.tableName}</span>
+                              <span className="text-[10px] text-muted-foreground/70">{table.tableName}</span>
                             )}
                           </div>
                         </CommandItem>
@@ -1176,7 +1176,7 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
                   placeholder="8"
                   className="h-8"
                 />
-                <div className="text-xs text-gray-500">이 수를 넘는 컬럼이 있으면 가로 스크롤이 생성됩니다</div>
+                <div className="text-xs text-muted-foreground">이 수를 넘는 컬럼이 있으면 가로 스크롤이 생성됩니다</div>
               </div>
             </div>
           )}
@@ -1215,7 +1215,7 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
                         <Label className="text-xs">표시할 컬럼 선택</Label>
                         {entityDisplayConfigs[column.columnName].sourceColumns.length === 0 &&
                         entityDisplayConfigs[column.columnName].joinColumns.length === 0 ? (
-                          <div className="py-2 text-center text-xs text-gray-400">
+                          <div className="py-2 text-center text-xs text-muted-foreground/70">
                             표시 가능한 컬럼이 없습니다.
                             {!column.entityDisplayConfig?.joinTable && (
                               <p className="mt-1 text-[10px]">
@@ -1300,7 +1300,7 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
                       {/* 참조 테이블 미설정 안내 */}
                       {!column.entityDisplayConfig?.joinTable &&
                         entityDisplayConfigs[column.columnName].sourceColumns.length > 0 && (
-                          <div className="rounded bg-blue-50 p-2 text-[10px] text-blue-600">
+                          <div className="rounded bg-primary/10 p-2 text-[10px] text-primary">
                             현재 기본 테이블 컬럼만 표시됩니다. 테이블 타입 관리에서 참조 테이블을 설정하면 조인된
                             테이블의 컬럼도 선택할 수 있습니다.
                           </div>
@@ -1310,14 +1310,14 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
                       {entityDisplayConfigs[column.columnName].selectedColumns.length > 0 && (
                         <div className="space-y-1">
                           <Label className="text-xs">미리보기</Label>
-                          <div className="flex flex-wrap gap-1 rounded bg-gray-50 p-2 text-xs">
+                          <div className="flex flex-wrap gap-1 rounded bg-muted p-2 text-xs">
                             {entityDisplayConfigs[column.columnName].selectedColumns.map((colName, idx) => (
                               <React.Fragment key={colName}>
                                 <Badge variant="secondary" className="text-xs">
                                   {colName}
                                 </Badge>
                                 {idx < entityDisplayConfigs[column.columnName].selectedColumns.length - 1 && (
-                                  <span className="text-gray-400">
+                                  <span className="text-muted-foreground/70">
                                     {entityDisplayConfigs[column.columnName].separator}
                                   </span>
                                 )}
@@ -1328,7 +1328,7 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
                       )}
                     </div>
                   ) : (
-                    <div className="py-4 text-center text-xs text-gray-400">컬럼 정보 로딩 중...</div>
+                    <div className="py-4 text-center text-xs text-muted-foreground/70">컬럼 정보 로딩 중...</div>
                   )}
                 </div>
               ))}
@@ -1337,17 +1337,17 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
 
         {!targetTableName ? (
           <div className="space-y-3">
-            <div className="text-center text-gray-500">
+            <div className="text-center text-muted-foreground">
               <p>테이블이 선택되지 않았습니다.</p>
               <p className="text-sm">위 데이터 소스에서 테이블을 선택하세요.</p>
             </div>
           </div>
         ) : availableColumns.length === 0 ? (
           <div className="space-y-3">
-            <div className="text-center text-gray-500">
+            <div className="text-center text-muted-foreground">
               <p>컬럼을 추가하려면 먼저 컴포넌트에 테이블을 명시적으로 선택하거나</p>
               <p className="text-sm">기본 설정 탭에서 테이블을 설정해주세요.</p>
-              <p className="mt-2 text-xs text-blue-600">현재 화면 테이블: {screenTableName}</p>
+              <p className="mt-2 text-xs text-primary">현재 화면 테이블: {screenTableName}</p>
             </div>
           </div>
         ) : (
@@ -1429,7 +1429,7 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
                             )}
                           </button>
                         )}
-                        <span className={cn("text-[10px] text-gray-400", !isAdded && "ml-auto")}>
+                        <span className={cn("text-[10px] text-muted-foreground/70", !isAdded && "ml-auto")}>
                           {column.input_type || column.dataType}
                         </span>
                       </div>
@@ -1452,14 +1452,14 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
                 <div className="space-y-3">
                   {entityJoinColumns.joinTables.map((joinTable, tableIndex) => (
                     <div key={tableIndex} className="space-y-1">
-                      <div className="mb-1 flex items-center gap-2 text-[10px] font-medium text-blue-600">
+                      <div className="mb-1 flex items-center gap-2 text-[10px] font-medium text-primary">
                         <Link2 className="h-3 w-3" />
                         <span>{joinTable.tableName}</span>
                         <Badge variant="outline" className="text-[10px]">
                           {joinTable.currentDisplayColumn}
                         </Badge>
                       </div>
-                      <div className="max-h-28 space-y-0.5 overflow-y-auto rounded-md border border-blue-200 bg-blue-50/30 p-2">
+                      <div className="max-h-28 space-y-0.5 overflow-y-auto rounded-md border border-primary/20 bg-primary/10/30 p-2">
                         {joinTable.availableColumns.map((column, colIndex) => {
                           const matchingJoinColumn = entityJoinColumns.availableColumns.find(
                             (jc) => jc.tableName === joinTable.tableName && jc.columnName === column.columnName,
@@ -1475,8 +1475,8 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
                             <div
                               key={colIndex}
                               className={cn(
-                                "flex cursor-pointer items-center gap-2 rounded px-2 py-1 hover:bg-blue-100/50",
-                                isAlreadyAdded && "bg-blue-100",
+                                "flex cursor-pointer items-center gap-2 rounded px-2 py-1 hover:bg-primary/10/50",
+                                isAlreadyAdded && "bg-primary/10",
                               )}
                               onClick={() => {
                                 if (isAlreadyAdded) {
@@ -1506,9 +1506,40 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
                                 }}
                                 className="pointer-events-none h-3.5 w-3.5"
                               />
-                              <Link2 className="h-3 w-3 flex-shrink-0 text-blue-500" />
+                              <Link2 className="h-3 w-3 flex-shrink-0 text-primary" />
                               <span className="truncate text-xs">{column.columnLabel}</span>
-                              <span className="ml-auto text-[10px] text-blue-400">
+                              {isAlreadyAdded && (
+                                <button
+                                  type="button"
+                                  title={
+                                    config.columns?.find((c) => c.columnName === matchingJoinColumn.joinAlias)?.editable === false
+                                      ? "편집 잠금 (클릭하여 해제)"
+                                      : "편집 가능 (클릭하여 잠금)"
+                                  }
+                                  className={cn(
+                                    "ml-auto flex-shrink-0 rounded p-0.5 transition-colors",
+                                    config.columns?.find((c) => c.columnName === matchingJoinColumn.joinAlias)?.editable === false
+                                      ? "text-destructive hover:bg-destructive/10"
+                                      : "text-muted-foreground hover:bg-muted",
+                                  )}
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    const currentCol = config.columns?.find((c) => c.columnName === matchingJoinColumn.joinAlias);
+                                    if (currentCol) {
+                                      updateColumn(matchingJoinColumn.joinAlias, {
+                                        editable: currentCol.editable === false ? undefined : false,
+                                      });
+                                    }
+                                  }}
+                                >
+                                  {config.columns?.find((c) => c.columnName === matchingJoinColumn.joinAlias)?.editable === false ? (
+                                    <Lock className="h-3 w-3" />
+                                  ) : (
+                                    <Unlock className="h-3 w-3" />
+                                  )}
+                                </button>
+                              )}
+                              <span className={cn("text-[10px] text-primary/80", !isAlreadyAdded && "ml-auto")}>
                                 {column.inputType || column.dataType}
                               </span>
                             </div>
diff --git a/frontend/lib/registry/components/v2-table-list/config-panels/BasicConfigPanel.tsx b/frontend/lib/registry/components/v2-table-list/config-panels/BasicConfigPanel.tsx
index a4022aa1..32c9d7a2 100644
--- a/frontend/lib/registry/components/v2-table-list/config-panels/BasicConfigPanel.tsx
+++ b/frontend/lib/registry/components/v2-table-list/config-panels/BasicConfigPanel.tsx
@@ -93,7 +93,7 @@ export const BasicConfigPanel: React.FC<BasicConfigPanelProps> = ({
                         <div className="flex flex-col">
                           <span>{table.displayName}</span>
                           {table.displayName !== table.tableName && (
-                            <span className="text-[10px] text-gray-400">{table.tableName}</span>
+                            <span className="text-[10px] text-muted-foreground/70">{table.tableName}</span>
                           )}
                         </div>
                       </CommandItem>
diff --git a/frontend/lib/registry/components/v2-table-list/config-panels/ColumnsConfigPanel.tsx b/frontend/lib/registry/components/v2-table-list/config-panels/ColumnsConfigPanel.tsx
index 00375b7a..d8905f76 100644
--- a/frontend/lib/registry/components/v2-table-list/config-panels/ColumnsConfigPanel.tsx
+++ b/frontend/lib/registry/components/v2-table-list/config-panels/ColumnsConfigPanel.tsx
@@ -42,14 +42,14 @@ function SortableColumnRow({
       className={cn(
         "bg-card flex items-center gap-1.5 rounded-md border px-2 py-1.5",
         isDragging && "z-50 opacity-50 shadow-md",
-        isEntityJoin && "border-blue-200 bg-blue-50/30",
+        isEntityJoin && "border-primary/20 bg-primary/10/30",
       )}
     >
       <div {...attributes} {...listeners} className="text-muted-foreground hover:text-foreground cursor-grab touch-none">
         <GripVertical className="h-3 w-3" />
       </div>
       {isEntityJoin ? (
-        <Link2 className="h-3 w-3 shrink-0 text-blue-500" />
+        <Link2 className="h-3 w-3 shrink-0 text-primary" />
       ) : (
         <span className="text-muted-foreground w-5 shrink-0 text-center text-[10px] font-medium">#{index + 1}</span>
       )}
@@ -178,7 +178,7 @@ export const ColumnsConfigPanel: React.FC<ColumnsConfigPanelProps> = ({
                       <Label className="text-xs">표시할 컬럼 선택</Label>
                       {entityDisplayConfigs[column.columnName].sourceColumns.length === 0 &&
                       entityDisplayConfigs[column.columnName].joinColumns.length === 0 ? (
-                        <div className="py-2 text-center text-xs text-gray-400">
+                        <div className="py-2 text-center text-xs text-muted-foreground/70">
                           표시 가능한 컬럼이 없습니다.
                           {!column.entityDisplayConfig?.joinTable && (
                             <p className="mt-1 text-[10px]">
@@ -258,7 +258,7 @@ export const ColumnsConfigPanel: React.FC<ColumnsConfigPanelProps> = ({
 
                     {!column.entityDisplayConfig?.joinTable &&
                       entityDisplayConfigs[column.columnName].sourceColumns.length > 0 && (
-                        <div className="rounded bg-blue-50 p-2 text-[10px] text-blue-600">
+                        <div className="rounded bg-primary/10 p-2 text-[10px] text-primary">
                           현재 기본 테이블 컬럼만 표시됩니다. 테이블 타입 관리에서 참조 테이블을 설정하면 조인된
                           테이블의 컬럼도 선택할 수 있습니다.
                         </div>
@@ -267,14 +267,14 @@ export const ColumnsConfigPanel: React.FC<ColumnsConfigPanelProps> = ({
                     {entityDisplayConfigs[column.columnName].selectedColumns.length > 0 && (
                       <div className="space-y-1">
                         <Label className="text-xs">미리보기</Label>
-                        <div className="flex flex-wrap gap-1 rounded bg-gray-50 p-2 text-xs">
+                        <div className="flex flex-wrap gap-1 rounded bg-muted p-2 text-xs">
                           {entityDisplayConfigs[column.columnName].selectedColumns.map((colName, idx) => (
                             <React.Fragment key={colName}>
                               <Badge variant="secondary" className="text-xs">
                                 {colName}
                               </Badge>
                               {idx < entityDisplayConfigs[column.columnName].selectedColumns.length - 1 && (
-                                <span className="text-gray-400">
+                                <span className="text-muted-foreground/70">
                                   {entityDisplayConfigs[column.columnName].separator}
                                 </span>
                               )}
@@ -285,7 +285,7 @@ export const ColumnsConfigPanel: React.FC<ColumnsConfigPanelProps> = ({
                     )}
                   </div>
                 ) : (
-                  <div className="py-4 text-center text-xs text-gray-400">컬럼 정보 로딩 중...</div>
+                  <div className="py-4 text-center text-xs text-muted-foreground/70">컬럼 정보 로딩 중...</div>
                 )}
               </div>
             ))}
@@ -294,17 +294,17 @@ export const ColumnsConfigPanel: React.FC<ColumnsConfigPanelProps> = ({
 
       {!targetTableName ? (
         <div className="space-y-3">
-          <div className="text-center text-gray-500">
+          <div className="text-center text-muted-foreground">
             <p>테이블이 선택되지 않았습니다.</p>
             <p className="text-sm">기본 설정 탭에서 테이블을 선택하세요.</p>
           </div>
         </div>
       ) : availableColumns.length === 0 ? (
         <div className="space-y-3">
-          <div className="text-center text-gray-500">
+          <div className="text-center text-muted-foreground">
             <p>컬럼을 추가하려면 먼저 컴포넌트에 테이블을 명시적으로 선택하거나</p>
             <p className="text-sm">기본 설정 탭에서 테이블을 설정해주세요.</p>
-            <p className="mt-2 text-xs text-blue-600">현재 화면 테이블: {screenTableName}</p>
+            <p className="mt-2 text-xs text-primary">현재 화면 테이블: {screenTableName}</p>
           </div>
         </div>
       ) : (
@@ -383,7 +383,7 @@ export const ColumnsConfigPanel: React.FC<ColumnsConfigPanelProps> = ({
                         )}
                       </button>
                     )}
-                    <span className={cn("text-[10px] text-gray-400", !isAdded && "ml-auto")}>
+                    <span className={cn("text-[10px] text-muted-foreground/70", !isAdded && "ml-auto")}>
                       {column.input_type || column.dataType}
                     </span>
                   </div>
@@ -402,14 +402,14 @@ export const ColumnsConfigPanel: React.FC<ColumnsConfigPanelProps> = ({
               <div className="space-y-3">
                 {entityJoinColumns.joinTables.map((joinTable, tableIndex) => (
                   <div key={tableIndex} className="space-y-1">
-                    <div className="mb-1 flex items-center gap-2 text-[10px] font-medium text-blue-600">
+                    <div className="mb-1 flex items-center gap-2 text-[10px] font-medium text-primary">
                       <Link2 className="h-3 w-3" />
                       <span>{joinTable.tableName}</span>
                       <Badge variant="outline" className="text-[10px]">
                         {joinTable.currentDisplayColumn}
                       </Badge>
                     </div>
-                    <div className="max-h-28 space-y-0.5 overflow-y-auto rounded-md border border-blue-200 bg-blue-50/30 p-2">
+                    <div className="max-h-28 space-y-0.5 overflow-y-auto rounded-md border border-primary/20 bg-primary/10/30 p-2">
                       {joinTable.availableColumns.map((column, colIndex) => {
                         const matchingJoinColumn = entityJoinColumns.availableColumns.find(
                           (jc) => jc.tableName === joinTable.tableName && jc.columnName === column.columnName,
@@ -423,8 +423,8 @@ export const ColumnsConfigPanel: React.FC<ColumnsConfigPanelProps> = ({
                           <div
                             key={colIndex}
                             className={cn(
-                              "flex cursor-pointer items-center gap-2 rounded px-2 py-1 hover:bg-blue-100/50",
-                              isAlreadyAdded && "bg-blue-100",
+                              "flex cursor-pointer items-center gap-2 rounded px-2 py-1 hover:bg-primary/10/50",
+                              isAlreadyAdded && "bg-primary/10",
                             )}
                             onClick={() => {
                               if (isAlreadyAdded) {
@@ -455,9 +455,40 @@ export const ColumnsConfigPanel: React.FC<ColumnsConfigPanelProps> = ({
                               }}
                               className="pointer-events-none h-3.5 w-3.5"
                             />
-                            <Link2 className="h-3 w-3 flex-shrink-0 text-blue-500" />
+                            <Link2 className="h-3 w-3 flex-shrink-0 text-primary" />
                             <span className="truncate text-xs">{column.columnLabel}</span>
-                            <span className="ml-auto text-[10px] text-blue-400">
+                            {isAlreadyAdded && (
+                              <button
+                                type="button"
+                                title={
+                                  config.columns?.find((c: ColumnConfig) => c.columnName === matchingJoinColumn.joinAlias)?.editable === false
+                                    ? "편집 잠금 (클릭하여 해제)"
+                                    : "편집 가능 (클릭하여 잠금)"
+                                }
+                                className={cn(
+                                  "ml-auto flex-shrink-0 rounded p-0.5 transition-colors",
+                                  config.columns?.find((c: ColumnConfig) => c.columnName === matchingJoinColumn.joinAlias)?.editable === false
+                                    ? "text-destructive hover:bg-destructive/10"
+                                    : "text-muted-foreground hover:bg-muted",
+                                )}
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  const currentCol = config.columns?.find((c: ColumnConfig) => c.columnName === matchingJoinColumn.joinAlias);
+                                  if (currentCol) {
+                                    onUpdateColumn(matchingJoinColumn.joinAlias, {
+                                      editable: currentCol.editable === false ? undefined : false,
+                                    });
+                                  }
+                                }}
+                              >
+                                {config.columns?.find((c: ColumnConfig) => c.columnName === matchingJoinColumn.joinAlias)?.editable === false ? (
+                                  <Lock className="h-3 w-3" />
+                                ) : (
+                                  <Unlock className="h-3 w-3" />
+                                )}
+                              </button>
+                            )}
+                            <span className={cn("text-[10px] text-primary/80", !isAlreadyAdded && "ml-auto")}>
                               {column.inputType || column.dataType}
                             </span>
                           </div>
diff --git a/frontend/lib/registry/components/v2-table-list/config-panels/OptionsConfigPanel.tsx b/frontend/lib/registry/components/v2-table-list/config-panels/OptionsConfigPanel.tsx
index 5599e49e..afed47b3 100644
--- a/frontend/lib/registry/components/v2-table-list/config-panels/OptionsConfigPanel.tsx
+++ b/frontend/lib/registry/components/v2-table-list/config-panels/OptionsConfigPanel.tsx
@@ -257,7 +257,7 @@ export const OptionsConfigPanel: React.FC<OptionsConfigPanelProps> = ({
                 placeholder="8"
                 className="h-8"
               />
-              <div className="text-xs text-gray-500">이 수를 넘는 컬럼이 있으면 가로 스크롤이 생성됩니다</div>
+              <div className="text-xs text-muted-foreground">이 수를 넘는 컬럼이 있으면 가로 스크롤이 생성됩니다</div>
             </div>
           </div>
         )}
diff --git a/frontend/lib/registry/components/v2-table-search-widget/TableSearchWidget.tsx b/frontend/lib/registry/components/v2-table-search-widget/TableSearchWidget.tsx
index 39e888ab..c9d60136 100644
--- a/frontend/lib/registry/components/v2-table-search-widget/TableSearchWidget.tsx
+++ b/frontend/lib/registry/components/v2-table-search-widget/TableSearchWidget.tsx
@@ -257,7 +257,9 @@ export function TableSearchWidget({ component, screenId, onHeightChange }: Table
   // currentTable이 준비되고 필터값이 있을 때 실행
   useEffect(() => {
     if (!needsFilterReapplyRef.current) return;
-    if (!currentTable?.onFilterChange) return;
+    // currentTable을 로컬 변수로 캡처하여 strict 타입 가드 적용
+    const table = currentTable;
+    if (!table?.onFilterChange) return;
 
     // 플래그 즉시 해제 (중복 실행 방지)
     needsFilterReapplyRef.current = false;
@@ -271,8 +273,8 @@ export function TableSearchWidget({ component, screenId, onHeightChange }: Table
     );
     if (!hasValues) return;
 
-    const filtersWithValues = activeFilters
-      .map((filter) => {
+    const filtersWithValues: TableFilter[] = activeFilters
+      .map((filter): TableFilter => {
         let filterValue = filterValues[filter.columnName];
 
         // 날짜 범위 객체 처리
@@ -288,8 +290,8 @@ export function TableSearchWidget({ component, screenId, onHeightChange }: Table
             const day = String(date.getDate()).padStart(2, "0");
             return `${year}-${month}-${day}`;
           };
-          const fromStr = filterValue.from ? formatDate(filterValue.from) : "";
-          const toStr = filterValue.to ? formatDate(filterValue.to) : "";
+          const fromStr = filterValue.from ? formatDate(filterValue.from as Date) : "";
+          const toStr = filterValue.to ? formatDate(filterValue.to as Date) : "";
           if (fromStr && toStr) filterValue = `${fromStr}|${toStr}`;
           else if (fromStr) filterValue = `${fromStr}|`;
           else if (toStr) filterValue = `|${toStr}`;
@@ -298,27 +300,27 @@ export function TableSearchWidget({ component, screenId, onHeightChange }: Table
 
         // 배열 처리
         if (Array.isArray(filterValue)) {
-          filterValue = filterValue.join("|");
+          filterValue = (filterValue as unknown[]).join("|");
         }
 
-        let operator = "contains";
+        let operator: TableFilter["operator"] = "contains";
         if (filter.filterType === "select") operator = "equals";
         else if (filter.filterType === "number") operator = "equals";
 
         return {
           ...filter,
-          value: filterValue || "",
+          value: (filterValue || "") as string | number | boolean,
           operator,
         };
       })
-      .filter((f) => {
+      .filter((f): f is TableFilter => {
         if (!f.value) return false;
         if (typeof f.value === "string" && f.value === "") return false;
         return true;
       });
 
     // 직접 onFilterChange 호출 (applyFilters 클로저 우회)
-    currentTable.onFilterChange(filtersWithValues);
+    table.onFilterChange(filtersWithValues as TableFilter[]);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentTable?.onFilterChange, currentTable?.tableName, activeFilters, filterValues]);
 
@@ -437,13 +439,17 @@ export function TableSearchWidget({ component, screenId, onHeightChange }: Table
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentTable?.tableName, filterMode, screenId, currentTableTabId, JSON.stringify(presetFilters)]);
 
-  // select 옵션 로드 (데이터 변경 시 빈 옵션 재조회)
+  // select 옵션 로드 (getColumnUniqueValues 변경 시 재로드 - columnMeta 갱신 반영)
   useEffect(() => {
     if (!currentTable?.getColumnUniqueValues || activeFilters.length === 0) {
       return;
     }
 
+    let cancelled = false;
+
     const loadSelectOptions = async () => {
+      // currentTable을 로컬 변수로 캡처하여 비동기 실행 중 undefined 방지
+      const table = currentTable;
       const selectFilters = activeFilters.filter((f) => f.filterType === "select");
 
       if (selectFilters.length === 0) {
@@ -455,7 +461,7 @@ export function TableSearchWidget({ component, screenId, onHeightChange }: Table
 
       for (const filter of selectFilters) {
         try {
-          const options = await currentTable.getColumnUniqueValues(filter.columnName);
+          const options = await table.getColumnUniqueValues!(filter.columnName);
           if (options && options.length > 0) {
             loadedOptions[filter.columnName] = options;
             hasNewOptions = true;
@@ -465,21 +471,18 @@ export function TableSearchWidget({ component, screenId, onHeightChange }: Table
         }
       }
 
-      if (hasNewOptions) {
+      if (!cancelled && hasNewOptions) {
         setSelectOptions((prev) => {
-          // 이미 로드된 옵션은 유지, 새로 로드된 옵션만 병합
-          const merged = { ...prev };
-          for (const [key, value] of Object.entries(loadedOptions)) {
-            if (!merged[key] || merged[key].length === 0) {
-              merged[key] = value;
-            }
-          }
-          return merged;
+          // 새로 로드된 옵션으로 항상 갱신 (카테고리 label 정보가 나중에 로드될 수 있으므로)
+          // 로드 실패한 컬럼의 기존 옵션은 유지
+          return { ...prev, ...loadedOptions };
         });
       }
     };
 
     loadSelectOptions();
+
+    return () => { cancelled = true; };
   }, [activeFilters, currentTable?.tableName, currentTable?.getColumnUniqueValues, currentTable?.dataCount]);
 
   // 높이 변화 감지 및 알림 (실제 화면에서만)
@@ -557,8 +560,8 @@ export function TableSearchWidget({ component, screenId, onHeightChange }: Table
   // 필터 적용 함수
   const applyFilters = (values: Record<string, any> = filterValues) => {
     // 빈 값이 아닌 필터만 적용
-    const filtersWithValues = activeFilters
-      .map((filter) => {
+    const filtersWithValues: TableFilter[] = activeFilters
+      .map((filter): TableFilter => {
         let filterValue = values[filter.columnName];
 
         // 날짜 범위 객체를 처리
@@ -577,8 +580,8 @@ export function TableSearchWidget({ component, screenId, onHeightChange }: Table
           };
 
           // "YYYY-MM-DD|YYYY-MM-DD" 형식으로 변환
-          const fromStr = filterValue.from ? formatDate(filterValue.from) : "";
-          const toStr = filterValue.to ? formatDate(filterValue.to) : "";
+          const fromStr = filterValue.from ? formatDate(filterValue.from as Date) : "";
+          const toStr = filterValue.to ? formatDate(filterValue.to as Date) : "";
 
           if (fromStr && toStr) {
             // 둘 다 있으면 파이프로 연결
@@ -597,35 +600,34 @@ export function TableSearchWidget({ component, screenId, onHeightChange }: Table
         // 다중선택 배열을 처리 (파이프로 연결된 문자열로 변환)
         // filterType에 관계없이 배열이면 파이프로 연결
         if (Array.isArray(filterValue)) {
-          filterValue = filterValue.join("|");
+          filterValue = (filterValue as unknown[]).join("|");
         }
 
-        // 🔧 filterType에 따라 operator 설정
-        // - "select" 유형: 정확히 일치 (equals)
-        // - "text" 유형: 부분 일치 (contains)
-        // - "date", "number": 각각 적절한 처리
-        let operator = "contains"; // 기본값
+        // filterType에 따라 operator 설정
+        let operator: TableFilter["operator"] = "contains";
         if (filter.filterType === "select") {
-          operator = "equals"; // 선택 필터는 정확히 일치
+          operator = "equals";
         } else if (filter.filterType === "number") {
-          operator = "equals"; // 숫자도 정확히 일치
+          operator = "equals";
         }
 
         return {
           ...filter,
-          value: filterValue || "",
-          operator, // operator 추가
+          value: (filterValue || "") as string | number | boolean,
+          operator,
         };
       })
-      .filter((f) => {
+      .filter((f): f is TableFilter => {
         // 빈 값 체크
         if (!f.value) return false;
         if (typeof f.value === "string" && f.value === "") return false;
         return true;
       });
 
-    if (currentTable?.onFilterChange) {
-      currentTable.onFilterChange(filtersWithValues);
+    // currentTable을 로컬 변수로 캡처하여 strict 타입 가드 적용
+    const table = currentTable;
+    if (table?.onFilterChange) {
+      table.onFilterChange(filtersWithValues);
     }
   };
 
@@ -651,7 +653,7 @@ export function TableSearchWidget({ component, screenId, onHeightChange }: Table
     switch (filter.filterType) {
       case "date":
         return (
-          <div style={{ width: `${width}px` }}>
+          <div className="w-full sm:w-auto" style={{ maxWidth: `${width}px` }}>
             <ModernDatePicker
               label={column?.columnLabel || filter.columnName}
               value={value ? (typeof value === "string" ? { from: new Date(value), to: new Date(value) } : value) : {}}
@@ -674,8 +676,8 @@ export function TableSearchWidget({ component, screenId, onHeightChange }: Table
             type="number"
             value={value}
             onChange={(e) => handleFilterChange(filter.columnName, e.target.value)}
-            className="h-9 text-xs focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:outline-none sm:text-sm"
-            style={{ width: `${width}px`, height: "36px", minHeight: "36px", outline: "none", boxShadow: "none" }}
+            className="h-9 w-full text-xs focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:outline-none sm:w-auto sm:text-sm"
+            style={{ maxWidth: `${width}px`, height: "36px", minHeight: "36px", outline: "none", boxShadow: "none" }}
             placeholder={column?.columnLabel}
           />
         );
@@ -724,10 +726,10 @@ export function TableSearchWidget({ component, screenId, onHeightChange }: Table
                 variant="outline"
                 role="combobox"
                 className={cn(
-                  "h-9 min-h-9 justify-between text-xs font-normal focus:ring-0 focus:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 sm:text-sm",
+                  "h-9 min-h-9 w-full justify-between text-xs font-normal focus:ring-0 focus:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 sm:w-auto sm:text-sm",
                   selectedValues.length === 0 && "text-muted-foreground",
                 )}
-                style={{ width: `${width}px`, height: "36px", minHeight: "36px", outline: "none", boxShadow: "none" }}
+                style={{ maxWidth: `${width}px`, height: "36px", minHeight: "36px", outline: "none", boxShadow: "none" }}
               >
                 <span className="truncate">{getDisplayText()}</span>
                 <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
@@ -779,8 +781,8 @@ export function TableSearchWidget({ component, screenId, onHeightChange }: Table
             type="text"
             value={value}
             onChange={(e) => handleFilterChange(filter.columnName, e.target.value)}
-            className="h-9 text-xs focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:outline-none sm:text-sm"
-            style={{ width: `${width}px`, height: "36px", minHeight: "36px", outline: "none", boxShadow: "none" }}
+            className="h-9 w-full text-xs focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:outline-none sm:w-auto sm:text-sm"
+            style={{ maxWidth: `${width}px`, height: "36px", minHeight: "36px", outline: "none", boxShadow: "none" }}
             placeholder={column?.columnLabel}
           />
         );
@@ -799,7 +801,7 @@ export function TableSearchWidget({ component, screenId, onHeightChange }: Table
     >
       {/* 필터 입력 필드들 */}
       {activeFilters.length > 0 && (
-        <div className="flex flex-1 flex-wrap items-center gap-2">
+        <div className="flex flex-1 flex-col gap-2 sm:flex-row sm:flex-wrap sm:items-center">
           {activeFilters.map((filter) => (
             <div key={filter.columnName}>{renderFilterInput(filter)}</div>
           ))}
@@ -816,7 +818,7 @@ export function TableSearchWidget({ component, screenId, onHeightChange }: Table
       {activeFilters.length === 0 && <div className="flex-1" />}
 
       {/* 오른쪽: 데이터 건수 + 설정 버튼들 (고정 모드에서는 숨김) */}
-      <div className="flex flex-shrink-0 items-center gap-2">
+      <div className="flex w-full flex-shrink-0 items-center justify-between gap-2 sm:w-auto sm:justify-end">
         {/* 데이터 건수 표시 */}
         {currentTable?.dataCount !== undefined && (
           <div className="bg-muted text-muted-foreground rounded-md px-3 py-1.5 text-xs font-medium sm:text-sm">
diff --git a/frontend/lib/registry/components/v2-tabs-widget/TabsRenderer.tsx b/frontend/lib/registry/components/v2-tabs-widget/TabsRenderer.tsx
index 99efdaca..fd98bda6 100644
--- a/frontend/lib/registry/components/v2-tabs-widget/TabsRenderer.tsx
+++ b/frontend/lib/registry/components/v2-tabs-widget/TabsRenderer.tsx
@@ -34,10 +34,10 @@ const TabsRenderer: ComponentRenderer = ({ component, children, ...props }) => {
             {children && React.Children.count(children) > 0 ? (
               children
             ) : (
-              <div className="flex h-full items-center justify-center rounded border border-dashed border-gray-300 bg-gray-50">
+              <div className="flex h-full items-center justify-center rounded border border-dashed border-input bg-muted">
                 <div className="text-center">
-                  <div className="text-sm text-gray-600">{tab.content}</div>
-                  <div className="mt-1 text-xs text-gray-400">탭 내용 영역</div>
+                  <div className="text-sm text-muted-foreground">{tab.content}</div>
+                  <div className="mt-1 text-xs text-muted-foreground/70">탭 내용 영역</div>
                 </div>
               </div>
             )}
diff --git a/frontend/lib/registry/components/v2-tabs-widget/tabs-component.tsx b/frontend/lib/registry/components/v2-tabs-widget/tabs-component.tsx
index 0a04f76d..491b45e4 100644
--- a/frontend/lib/registry/components/v2-tabs-widget/tabs-component.tsx
+++ b/frontend/lib/registry/components/v2-tabs-widget/tabs-component.tsx
@@ -295,11 +295,6 @@ const TabsDesignEditor: React.FC<{
               }}
             >
               {tab.label || "탭"}
-              {tab.components && tab.components.length > 0 && (
-                <span className="ml-1 text-xs text-muted-foreground">
-                  ({tab.components.length})
-                </span>
-              )}
             </div>
           ))
         ) : (
@@ -372,38 +367,38 @@ const TabsDesignEditor: React.FC<{
                       {/* 드래그 핸들 - 컴포넌트 외부 상단 */}
                       <div
                         className={cn(
-                          "flex h-4 cursor-move items-center justify-between rounded-t border border-b-0 bg-gray-100 px-1",
-                          isSelected ? "border-primary" : "border-gray-200"
+                          "flex h-4 cursor-move items-center justify-between rounded-t border border-b-0 bg-muted px-1",
+                          isSelected ? "border-primary" : "border-border"
                         )}
                         style={{ width: comp.size?.width || 200 }}
                         onMouseDown={(e) => handleDragStart(e, comp)}
                       >
                         <div className="flex items-center gap-0.5">
-                          <Move className="h-2.5 w-2.5 text-gray-400" />
-                          <span className="text-[9px] text-gray-500 truncate max-w-[100px]">
+                          <Move className="h-2.5 w-2.5 text-muted-foreground/70" />
+                          <span className="text-[9px] text-muted-foreground truncate max-w-[100px]">
                             {comp.label || comp.componentType}
                           </span>
                         </div>
                         <div className="flex items-center">
                           <button
-                            className="rounded p-0.5 hover:bg-gray-200"
+                            className="rounded p-0.5 hover:bg-muted/80"
                             onClick={(e) => {
                               e.stopPropagation();
                               onSelectTabComponent?.(activeTabId, comp.id, comp);
                             }}
                             title="설정"
                           >
-                            <Settings className="h-2.5 w-2.5 text-gray-500" />
+                            <Settings className="h-2.5 w-2.5 text-muted-foreground" />
                           </button>
                           <button
-                            className="rounded p-0.5 hover:bg-red-100"
+                            className="rounded p-0.5 hover:bg-destructive/10"
                             onClick={(e) => {
                               e.stopPropagation();
                               handleDeleteComponent(comp.id);
                             }}
                             title="삭제"
                           >
-                            <Trash2 className="h-2.5 w-2.5 text-red-500" />
+                            <Trash2 className="h-2.5 w-2.5 text-destructive" />
                           </button>
                         </div>
                       </div>
@@ -414,7 +409,7 @@ const TabsDesignEditor: React.FC<{
                           "relative rounded-b border bg-white shadow-sm overflow-hidden",
                           isSelected
                             ? "border-primary ring-2 ring-primary/30"
-                            : "border-gray-200",
+                            : "border-border",
                           (isDragging || isResizing) && "opacity-80 shadow-lg",
                           !(isDragging || isResizing) && "transition-all"
                         )}
@@ -457,12 +452,12 @@ const TabsDesignEditor: React.FC<{
                 })}
               </div>
             ) : (
-              <div className="flex h-full w-full flex-col items-center justify-center rounded border-2 border-dashed border-gray-300 bg-gray-50/50">
-                <Plus className="mb-2 h-8 w-8 text-gray-400" />
-                <p className="text-sm font-medium text-gray-500">
+              <div className="flex h-full w-full flex-col items-center justify-center rounded border-2 border-dashed border-input bg-muted/50">
+                <Plus className="mb-2 h-8 w-8 text-muted-foreground/70" />
+                <p className="text-sm font-medium text-muted-foreground">
                   컴포넌트를 드래그하여 추가
                 </p>
-                <p className="mt-1 text-xs text-gray-400">
+                <p className="mt-1 text-xs text-muted-foreground/70">
                   좌측 패널에서 컴포넌트를 이 영역에 드롭하세요
                 </p>
               </div>
@@ -649,11 +644,6 @@ ComponentRegistry.registerComponent({
                 }}
               >
                 {tab.label || "탭"}
-                {tab.components && tab.components.length > 0 && (
-                  <span className="ml-1 text-xs text-muted-foreground">
-                    ({tab.components.length})
-                  </span>
-                )}
               </div>
             ))
           ) : (
@@ -677,7 +667,7 @@ ComponentRegistry.registerComponent({
                   {activeTab.components.map((comp: TabInlineComponent) => (
                     <div
                       key={comp.id}
-                      className="absolute rounded border border-dashed border-gray-300 bg-white/80 p-2 shadow-sm"
+                      className="absolute rounded border border-dashed border-input bg-white/80 p-2 shadow-sm"
                       style={{
                         left: comp.position?.x || 0,
                         top: comp.position?.y || 0,
@@ -686,10 +676,10 @@ ComponentRegistry.registerComponent({
                       }}
                     >
                       <div className="flex h-full flex-col items-center justify-center">
-                        <span className="text-xs font-medium text-gray-600">
+                        <span className="text-xs font-medium text-muted-foreground">
                           {comp.label || comp.componentType}
                         </span>
-                        <span className="text-[10px] text-gray-400">
+                        <span className="text-[10px] text-muted-foreground/70">
                           {comp.componentType}
                         </span>
                       </div>
@@ -697,12 +687,12 @@ ComponentRegistry.registerComponent({
                   ))}
                 </div>
               ) : (
-                <div className="flex h-full w-full flex-col items-center justify-center rounded border-2 border-dashed border-gray-300 bg-gray-50/50">
-                  <Plus className="mb-2 h-8 w-8 text-gray-400" />
-                  <p className="text-sm font-medium text-gray-500">
+                <div className="flex h-full w-full flex-col items-center justify-center rounded border-2 border-dashed border-input bg-muted/50">
+                  <Plus className="mb-2 h-8 w-8 text-muted-foreground/70" />
+                  <p className="text-sm font-medium text-muted-foreground">
                     컴포넌트를 드래그하여 추가
                   </p>
-                  <p className="mt-1 text-xs text-gray-400">
+                  <p className="mt-1 text-xs text-muted-foreground/70">
                     좌측 패널에서 컴포넌트를 이 영역에 드롭하세요
                   </p>
                 </div>
diff --git a/frontend/lib/registry/components/v2-text-display/TextDisplayComponent.tsx b/frontend/lib/registry/components/v2-text-display/TextDisplayComponent.tsx
index fe66b458..86b83c19 100644
--- a/frontend/lib/registry/components/v2-text-display/TextDisplayComponent.tsx
+++ b/frontend/lib/registry/components/v2-text-display/TextDisplayComponent.tsx
@@ -4,6 +4,7 @@ import React from "react";
 import { ComponentRendererProps } from "../../types";
 import { TextDisplayConfig } from "./types";
 import { filterDOMProps } from "@/lib/utils/domPropsFilter";
+import { getAdaptiveLabelColor } from "@/lib/utils/darkModeColor";
 
 export interface TextDisplayComponentProps extends ComponentRendererProps {
   // 추가 props가 필요한 경우 여기에 정의
@@ -63,7 +64,7 @@ export const TextDisplayComponent: React.FC<TextDisplayComponentProps> = ({
   const textStyle: React.CSSProperties = {
     fontSize: customStyle.fontSize || componentConfig.fontSize || "14px",
     fontWeight: customStyle.fontWeight || componentConfig.fontWeight || "normal",
-    color: customStyle.color || componentConfig.color || "#212121",
+    color: getAdaptiveLabelColor(customStyle.color || componentConfig.color),
     textAlign: (customStyle.textAlign || componentConfig.textAlign || "left") as React.CSSProperties["textAlign"],
     backgroundColor: customStyle.backgroundColor || componentConfig.backgroundColor || "transparent",
     padding: componentConfig.padding || "0",
diff --git a/frontend/lib/registry/layouts/TabsLayoutRenderer.tsx b/frontend/lib/registry/layouts/TabsLayoutRenderer.tsx
index 1c758c1c..044a7db3 100644
--- a/frontend/lib/registry/layouts/TabsLayoutRenderer.tsx
+++ b/frontend/lib/registry/layouts/TabsLayoutRenderer.tsx
@@ -105,7 +105,7 @@ const TabsLayoutComponent: React.FC<TabsLayoutComponentProps> = ({
         >
           {/* 탭 목록 */}
           <TabsList
-            className={` ${sizeClass} ${tabsConfig.position === "bottom" ? "order-2" : ""} ${tabsConfig.position === "right" ? "order-2" : ""} ${tabsConfig.variant === "pills" ? "bg-gray-100" : ""} ${tabsConfig.variant === "underline" ? "border-b" : ""} `}
+            className={` ${sizeClass} ${tabsConfig.position === "bottom" ? "order-2" : ""} ${tabsConfig.position === "right" ? "order-2" : ""} ${tabsConfig.variant === "pills" ? "bg-muted" : ""} ${tabsConfig.variant === "underline" ? "border-b" : ""} `}
             style={{
               flexShrink: 0,
               justifyContent:
@@ -116,7 +116,7 @@ const TabsLayoutComponent: React.FC<TabsLayoutComponentProps> = ({
               <div key={zone.id} className="flex items-center">
                 <TabsTrigger
                   value={zone.id}
-                  className={` ${sizeClass} ${tabsConfig.variant === "pills" ? "rounded-full" : ""} ${tabsConfig.variant === "underline" ? "border-b-2 border-transparent data-[state=active]:border-blue-500" : ""} `}
+                  className={` ${sizeClass} ${tabsConfig.variant === "pills" ? "rounded-full" : ""} ${tabsConfig.variant === "underline" ? "border-b-2 border-transparent data-[state=active]:border-primary" : ""} `}
                 >
                   {zone.name}
                 </TabsTrigger>
@@ -124,7 +124,7 @@ const TabsLayoutComponent: React.FC<TabsLayoutComponentProps> = ({
                 {/* 닫기 버튼 (설정에서 허용한 경우) */}
                 {tabsConfig.closable && isDesignMode && layout.zones.length > 1 && (
                   <button
-                    className="ml-1 rounded p-1 hover:bg-gray-200"
+                    className="ml-1 rounded p-1 hover:bg-muted/80"
                     onClick={(e) => {
                       e.stopPropagation();
                       // 탭 닫기 로직 (실제 구현 시 필요)
diff --git a/frontend/lib/registry/layouts/accordion/AccordionLayout.tsx b/frontend/lib/registry/layouts/accordion/AccordionLayout.tsx
index 0af2edf2..13e1fd62 100644
--- a/frontend/lib/registry/layouts/accordion/AccordionLayout.tsx
+++ b/frontend/lib/registry/layouts/accordion/AccordionLayout.tsx
@@ -23,8 +23,8 @@ export const AccordionLayout: React.FC<AccordionLayoutProps> = ({
 }) => {
   if (!layout.layoutConfig.accordion) {
     return (
-      <div className="error-layout flex items-center justify-center rounded border-2 border-red-300 bg-red-50 p-4">
-        <div className="text-center text-red-600">
+      <div className="error-layout flex items-center justify-center rounded border-2 border-destructive/30 bg-destructive/10 p-4">
+        <div className="text-center text-destructive">
           <div className="font-medium">accordion 설정이 없습니다.</div>
           <div className="mt-1 text-sm">layoutConfig.accordion가 필요합니다.</div>
         </div>
@@ -147,10 +147,10 @@ const AccordionSection: React.FC<{
 
   const headerStyle: React.CSSProperties = {
     padding: "12px 16px",
-    backgroundColor: isDesignMode ? "#3b82f6" : "#f8fafc",
-    color: isDesignMode ? "white" : "#212121",
-    border: "1px solid #e2e8f0",
-    borderBottom: isExpanded ? "none" : "1px solid #e2e8f0",
+    backgroundColor: isDesignMode ? "#3b82f6" : "hsl(var(--muted))",
+    color: isDesignMode ? "white" : "hsl(var(--foreground))",
+    border: "1px solid hsl(var(--border))",
+    borderBottom: isExpanded ? "none" : "1px solid hsl(var(--border))",
     cursor: "pointer",
     userSelect: "none",
     display: "flex",
@@ -169,8 +169,8 @@ const AccordionSection: React.FC<{
     maxHeight: isExpanded ? zone.size?.height || "500px" : "0",
     overflow: "hidden",
     transition: "all 0.3s ease",
-    backgroundColor: "white",
-    border: "1px solid #e2e8f0",
+    backgroundColor: "hsl(var(--card))",
+    border: "1px solid hsl(var(--border))",
     borderTop: "none",
     borderRadius: "0 0 8px 8px",
     margin: "2px",
diff --git a/frontend/lib/registry/layouts/card-layout/CardLayoutLayout.tsx b/frontend/lib/registry/layouts/card-layout/CardLayoutLayout.tsx
index 66876e67..ee365bd3 100644
--- a/frontend/lib/registry/layouts/card-layout/CardLayoutLayout.tsx
+++ b/frontend/lib/registry/layouts/card-layout/CardLayoutLayout.tsx
@@ -166,11 +166,11 @@ export const CardLayoutLayout: React.FC<CardLayoutProps> = ({
                   key={zone.id}
                   style={cardStyle}
                   onClick={() => onSelectComponent?.(zone.id)}
-                  className="hover:border-blue-500 hover:shadow-md"
+                  className="hover:border-primary hover:shadow-md"
                 >
                   {/* 존 라벨 */}
                   <div className="absolute top-2 left-2 z-10">
-                    <div className="rounded bg-blue-500 px-2 py-1 text-xs text-white">{zone.name}</div>
+                    <div className="rounded bg-primary px-2 py-1 text-xs text-white">{zone.name}</div>
                   </div>
 
                   {/* 존 내용 */}
@@ -178,7 +178,7 @@ export const CardLayoutLayout: React.FC<CardLayoutProps> = ({
                     {zoneChildren.length > 0 ? (
                       <div className="flex-1">{zoneChildren}</div>
                     ) : (
-                      <div className="flex flex-1 items-center justify-center rounded border-2 border-dashed border-gray-200 text-gray-400">
+                      <div className="flex flex-1 items-center justify-center rounded border-2 border-dashed border-border text-muted-foreground/70">
                         <div className="text-center">
                           <div className="text-sm font-medium">카드 존</div>
                           <div className="mt-1 text-xs">컴포넌트를 드래그하여 추가하세요</div>
@@ -199,8 +199,8 @@ export const CardLayoutLayout: React.FC<CardLayoutProps> = ({
                 {/* 카드 이미지 */}
                 {cardConfig.cardStyle?.showImage && cardConfig.columnMapping?.imageColumn && (
                   <div className="mb-3 flex justify-center">
-                    <div className="flex h-16 w-16 items-center justify-center rounded-full bg-gray-200">
-                      <span className="text-xl text-gray-500">👤</span>
+                    <div className="flex h-16 w-16 items-center justify-center rounded-full bg-muted/80">
+                      <span className="text-xl text-muted-foreground">👤</span>
                     </div>
                   </div>
                 )}
@@ -208,7 +208,7 @@ export const CardLayoutLayout: React.FC<CardLayoutProps> = ({
                 {/* 카드 타이틀 */}
                 {cardConfig.cardStyle?.showTitle && (
                   <div className="mb-2">
-                    <h3 className="text-lg font-semibold text-gray-900">
+                    <h3 className="text-lg font-semibold text-foreground">
                       {getColumnValue(item, cardConfig.columnMapping?.titleColumn) ||
                         getAutoFallbackValue(item, "title")}
                     </h3>
@@ -218,7 +218,7 @@ export const CardLayoutLayout: React.FC<CardLayoutProps> = ({
                 {/* 카드 서브타이틀 */}
                 {cardConfig.cardStyle?.showSubtitle && (
                   <div className="mb-2">
-                    <p className="text-sm font-medium text-blue-600">
+                    <p className="text-sm font-medium text-primary">
                       {getColumnValue(item, cardConfig.columnMapping?.subtitleColumn) ||
                         getAutoFallbackValue(item, "subtitle")}
                     </p>
@@ -228,7 +228,7 @@ export const CardLayoutLayout: React.FC<CardLayoutProps> = ({
                 {/* 카드 설명 */}
                 {cardConfig.cardStyle?.showDescription && (
                   <div className="mb-3 flex-1">
-                    <p className="text-sm leading-relaxed text-gray-600">
+                    <p className="text-sm leading-relaxed text-muted-foreground">
                       {truncateText(
                         getColumnValue(item, cardConfig.columnMapping?.descriptionColumn) ||
                           getAutoFallbackValue(item, "description"),
@@ -240,15 +240,15 @@ export const CardLayoutLayout: React.FC<CardLayoutProps> = ({
 
                 {/* 추가 표시 컬럼들 */}
                 {cardConfig.columnMapping?.displayColumns && cardConfig.columnMapping.displayColumns.length > 0 && (
-                  <div className="space-y-1 border-t border-gray-100 pt-3">
+                  <div className="space-y-1 border-t border-border pt-3">
                     {cardConfig.columnMapping.displayColumns.map((columnName, idx) => {
                       const value = getColumnValue(item, columnName);
                       if (!value) return null;
 
                       return (
                         <div key={idx} className="flex justify-between text-xs">
-                          <span className="text-gray-500 capitalize">{getColumnLabel(columnName)}:</span>
-                          <span className="font-medium text-gray-700">{value}</span>
+                          <span className="text-muted-foreground capitalize">{getColumnLabel(columnName)}:</span>
+                          <span className="font-medium text-foreground">{value}</span>
                         </div>
                       );
                     })}
@@ -257,8 +257,8 @@ export const CardLayoutLayout: React.FC<CardLayoutProps> = ({
 
                 {/* 카드 액션 (선택사항) */}
                 <div className="mt-3 flex justify-end space-x-2">
-                  <button className="text-xs font-medium text-blue-600 hover:text-blue-800">상세보기</button>
-                  <button className="text-xs font-medium text-gray-500 hover:text-gray-700">편집</button>
+                  <button className="text-xs font-medium text-primary hover:text-primary">상세보기</button>
+                  <button className="text-xs font-medium text-muted-foreground hover:text-foreground">편집</button>
                 </div>
               </div>
             ))}
@@ -266,7 +266,7 @@ export const CardLayoutLayout: React.FC<CardLayoutProps> = ({
         {/* 빈 상태 표시 */}
         {!isDesignMode && displayData.length === 0 && (
           <div className="col-span-full flex items-center justify-center p-8">
-            <div className="text-center text-gray-500">
+            <div className="text-center text-muted-foreground">
               <div className="mb-2 text-lg">📋</div>
               <div className="text-sm">표시할 데이터가 없습니다</div>
             </div>
diff --git a/frontend/lib/registry/layouts/flexbox/FlexboxLayout.tsx b/frontend/lib/registry/layouts/flexbox/FlexboxLayout.tsx
index 8970b043..5a5af75e 100644
--- a/frontend/lib/registry/layouts/flexbox/FlexboxLayout.tsx
+++ b/frontend/lib/registry/layouts/flexbox/FlexboxLayout.tsx
@@ -24,8 +24,8 @@ export const FlexboxLayout: React.FC<FlexboxLayoutProps> = ({
 }) => {
   if (!layout.layoutConfig.flexbox) {
     return (
-      <div className="error-layout flex items-center justify-center rounded border-2 border-red-300 bg-red-50 p-4">
-        <div className="text-center text-red-600">
+      <div className="error-layout flex items-center justify-center rounded border-2 border-destructive/30 bg-destructive/10 p-4">
+        <div className="text-center text-destructive">
           <div className="font-medium">플렉스박스 레이아웃 설정이 없습니다.</div>
           <div className="mt-1 text-sm">layoutConfig.flexbox가 필요합니다.</div>
         </div>
diff --git a/frontend/lib/registry/layouts/grid/GridLayout.tsx b/frontend/lib/registry/layouts/grid/GridLayout.tsx
index eef79ecb..21bf7d01 100644
--- a/frontend/lib/registry/layouts/grid/GridLayout.tsx
+++ b/frontend/lib/registry/layouts/grid/GridLayout.tsx
@@ -24,8 +24,8 @@ export const GridLayout: React.FC<GridLayoutProps> = ({
 }) => {
   if (!layout.layoutConfig.grid) {
     return (
-      <div className="error-layout flex items-center justify-center rounded border-2 border-red-300 bg-red-50 p-4">
-        <div className="text-center text-red-600">
+      <div className="error-layout flex items-center justify-center rounded border-2 border-destructive/30 bg-destructive/10 p-4">
+        <div className="text-center text-destructive">
           <div className="font-medium">그리드 레이아웃 설정이 없습니다.</div>
           <div className="mt-1 text-sm">layoutConfig.grid가 필요합니다.</div>
         </div>
diff --git a/frontend/lib/registry/layouts/hero-section/HeroSectionLayout.tsx b/frontend/lib/registry/layouts/hero-section/HeroSectionLayout.tsx
index 660690f4..6c2c09a0 100644
--- a/frontend/lib/registry/layouts/hero-section/HeroSectionLayout.tsx
+++ b/frontend/lib/registry/layouts/hero-section/HeroSectionLayout.tsx
@@ -23,8 +23,8 @@ export const HeroSectionLayout: React.FC<HeroSectionLayoutProps> = ({
 }) => {
   if (!layout.layoutConfig.heroSection) {
     return (
-      <div className="error-layout flex items-center justify-center rounded border-2 border-red-300 bg-red-50 p-4">
-        <div className="text-center text-red-600">
+      <div className="error-layout flex items-center justify-center rounded border-2 border-destructive/30 bg-destructive/10 p-4">
+        <div className="text-center text-destructive">
           <div className="font-medium">heroSection 설정이 없습니다.</div>
           <div className="mt-1 text-sm">layoutConfig.heroSection가 필요합니다.</div>
         </div>
diff --git a/frontend/lib/registry/layouts/split/SplitLayout.tsx b/frontend/lib/registry/layouts/split/SplitLayout.tsx
index 1a85164d..7a3bcb13 100644
--- a/frontend/lib/registry/layouts/split/SplitLayout.tsx
+++ b/frontend/lib/registry/layouts/split/SplitLayout.tsx
@@ -23,8 +23,8 @@ export const SplitLayout: React.FC<SplitLayoutProps> = ({
 }) => {
   if (!layout.layoutConfig.split) {
     return (
-      <div className="error-layout flex items-center justify-center rounded border-2 border-red-300 bg-red-50 p-4">
-        <div className="text-center text-red-600">
+      <div className="error-layout flex items-center justify-center rounded border-2 border-destructive/30 bg-destructive/10 p-4">
+        <div className="text-center text-destructive">
           <div className="font-medium">split 설정이 없습니다.</div>
           <div className="mt-1 text-sm">layoutConfig.split가 필요합니다.</div>
         </div>
diff --git a/frontend/lib/registry/pop-components/pop-button.tsx b/frontend/lib/registry/pop-components/pop-button.tsx
index ae6d05d9..616f0a6b 100644
--- a/frontend/lib/registry/pop-components/pop-button.tsx
+++ b/frontend/lib/registry/pop-components/pop-button.tsx
@@ -6,13 +6,7 @@ import { Label } from "@/components/ui/label";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -58,12 +52,7 @@ import type { CollectedDataResponse, StatusChangeRule, ConditionalValue } from "
 import { apiClient } from "@/lib/api/client";
 import { TableCombobox } from "./pop-shared/TableCombobox";
 import { ColumnCombobox } from "./pop-shared/ColumnCombobox";
-import {
-  fetchTableList,
-  fetchTableColumns,
-  type TableInfo,
-  type ColumnInfo,
-} from "./pop-dashboard/utils/dataFetcher";
+import { fetchTableList, fetchTableColumns, type TableInfo, type ColumnInfo } from "./pop-dashboard/utils/dataFetcher";
 
 // ========================================
 // STEP 1: 타입 정의
@@ -124,15 +113,7 @@ export interface ButtonMainAction {
 }
 
 /** 프리셋 이름 */
-export type ButtonPreset =
-  | "save"
-  | "delete"
-  | "logout"
-  | "menu"
-  | "modal-open"
-  | "cart"
-  | "inbound-confirm"
-  | "custom";
+export type ButtonPreset = "save" | "delete" | "logout" | "menu" | "modal-open" | "cart" | "inbound-confirm" | "custom";
 
 /** row_data 저장 모드 */
 export type RowDataMode = "all" | "selected";
@@ -178,7 +159,14 @@ export type ButtonTaskType =
   | "custom-event";
 
 /** 데이터 수정 연산 */
-export type UpdateOperationType = "assign" | "add" | "subtract" | "multiply" | "divide" | "conditional" | "db-conditional";
+export type UpdateOperationType =
+  | "assign"
+  | "add"
+  | "subtract"
+  | "multiply"
+  | "divide"
+  | "conditional"
+  | "db-conditional";
 
 /** 데이터 수정 값 출처 */
 export type UpdateValueSource = "fixed" | "linked" | "reference";
@@ -341,15 +329,18 @@ export const TASK_TYPE_LABELS: Record<ButtonTaskType, string> = {
   "data-delete": "데이터 삭제",
   "cart-save": "장바구니 저장",
   "modal-open": "모달 열기",
-  "navigate": "페이지 이동",
+  navigate: "페이지 이동",
   "close-modal": "모달 닫기",
-  "refresh": "새로고침",
+  refresh: "새로고침",
   "api-call": "API 호출",
   "custom-event": "커스텀 이벤트",
 };
 
 /** 빠른 시작 템플릿별 기본 작업 목록 + 외형 */
-export const QUICK_START_DEFAULTS: Record<QuickStartTemplate, { label: string; variant: ButtonVariant; icon: string; confirm?: ConfirmConfig; tasks: ButtonTask[] }> = {
+export const QUICK_START_DEFAULTS: Record<
+  QuickStartTemplate,
+  { label: string; variant: ButtonVariant; icon: string; confirm?: ConfirmConfig; tasks: ButtonTask[] }
+> = {
   save: {
     label: "저장",
     variant: "default",
@@ -560,9 +551,9 @@ function SectionDivider({ label }: { label: string }) {
   return (
     <div className="pt-3 pb-1">
       <div className="flex items-center gap-2">
-        <div className="h-px flex-1 bg-gray-300" />
-        <span className="text-xs font-medium text-gray-500">{label}</span>
-        <div className="h-px flex-1 bg-gray-300" />
+        <div className="bg-muted/60 h-px flex-1" />
+        <span className="text-muted-foreground text-xs font-medium">{label}</span>
+        <div className="bg-muted/60 h-px flex-1" />
       </div>
     </div>
   );
@@ -585,14 +576,10 @@ function CartMappingRow({
       <span className={cn("min-w-0 flex-1 text-[10px]", auto ? "text-muted-foreground" : "text-foreground")}>
         {source}
       </span>
-      <span className="shrink-0 text-[10px] text-muted-foreground">&rarr;</span>
+      <span className="text-muted-foreground shrink-0 text-[10px]">&rarr;</span>
       <div className="shrink-0 text-right">
-        <code className="rounded bg-muted px-1 font-mono text-[10px] text-foreground">
-          {target}
-        </code>
-        {desc && (
-          <p className="mt-0.5 text-[9px] text-muted-foreground leading-tight">{desc}</p>
-        )}
+        <code className="bg-muted text-foreground rounded px-1 font-mono text-[10px]">{target}</code>
+        {desc && <p className="text-muted-foreground mt-0.5 text-[9px] leading-tight">{desc}</p>}
       </div>
     </div>
   );
@@ -600,8 +587,23 @@ function CartMappingRow({
 
 /** 허용된 아이콘 맵 (개별 import로 트리 쉐이킹 적용) */
 const LUCIDE_ICON_MAP: Record<string, LucideIcon> = {
-  Save, Trash2, LogOut, Menu, ExternalLink, Plus, Check, X,
-  Edit, Search, RefreshCw, Download, Upload, Send, Copy, Settings, ChevronDown,
+  Save,
+  Trash2,
+  LogOut,
+  Menu,
+  ExternalLink,
+  Plus,
+  Check,
+  X,
+  Edit,
+  Search,
+  RefreshCw,
+  Download,
+  Upload,
+  Send,
+  Copy,
+  Settings,
+  ChevronDown,
   ShoppingCart,
   ShoppingBag,
   PackageCheck,
@@ -610,15 +612,7 @@ const LUCIDE_ICON_MAP: Record<string, LucideIcon> = {
 };
 
 /** Lucide 아이콘 동적 렌더링 */
-function DynamicLucideIcon({
-  name,
-  size = 16,
-  className,
-}: {
-  name: string;
-  size?: number;
-  className?: string;
-}) {
+function DynamicLucideIcon({ name, size = 16, className }: { name: string; size?: number; className?: string }) {
   const IconComponent = LUCIDE_ICON_MAP[name];
   if (!IconComponent) return null;
   return <IconComponent size={size} className={className} />;
@@ -636,20 +630,8 @@ interface PopButtonComponentProps {
   componentId?: string;
 }
 
-export function PopButtonComponent({
-  config,
-  label,
-  isDesignMode,
-  screenId,
-  componentId,
-}: PopButtonComponentProps) {
-  const {
-    execute,
-    isLoading,
-    pendingConfirm,
-    confirmExecute,
-    cancelConfirm,
-  } = usePopAction(screenId || "");
+export function PopButtonComponent({ config, label, isDesignMode, screenId, componentId }: PopButtonComponentProps) {
+  const { execute, isLoading, pendingConfirm, confirmExecute, cancelConfirm } = usePopAction(screenId || "");
 
   const { subscribe, publish } = usePopEvent(screenId || "default");
 
@@ -663,9 +645,13 @@ export function PopButtonComponent({
   const [confirmProcessing, setConfirmProcessing] = useState(false);
   const [showInboundConfirm, setShowInboundConfirm] = useState(false);
   const [inboundSelectedCount, setInboundSelectedCount] = useState(0);
-  const [generatedCodesResult, setGeneratedCodesResult] = useState<Array<{ targetColumn: string; code: string; showResultModal?: boolean }>>([]);
+  const [generatedCodesResult, setGeneratedCodesResult] = useState<
+    Array<{ targetColumn: string; code: string; showResultModal?: boolean }>
+  >([]);
 
-  const [deferredV2Tasks, setDeferredV2Tasks] = useState<Array<{ type: string; targetScreenId?: string; params?: Record<string, string> }>>([]);
+  const [deferredV2Tasks, setDeferredV2Tasks] = useState<
+    Array<{ type: string; targetScreenId?: string; params?: Record<string, string> }>
+  >([]);
 
   const handleCloseGeneratedCodesModal = useCallback(() => {
     setGeneratedCodesResult([]);
@@ -723,29 +709,23 @@ export function PopButtonComponent({
 
   useEffect(() => {
     if (!hasDataTasks || !componentId) return;
-    const unsub = subscribe(
-      `__comp_input__${componentId}__selected_items`,
-      (payload: unknown) => {
-        const data = payload as { value?: unknown[] } | undefined;
-        const items = Array.isArray(data?.value) ? data.value : [];
-        setInboundSelectedCount(items.length);
-      }
-    );
+    const unsub = subscribe(`__comp_input__${componentId}__selected_items`, (payload: unknown) => {
+      const data = payload as { value?: unknown[] } | undefined;
+      const items = Array.isArray(data?.value) ? data.value : [];
+      setInboundSelectedCount(items.length);
+    });
     return unsub;
   }, [hasDataTasks, componentId, subscribe]);
 
   // 장바구니 상태 수신 (카드 목록에서 count/isDirty 전달)
   useEffect(() => {
     if (!isCartMode || !componentId) return;
-    const unsub = subscribe(
-      `__comp_input__${componentId}__cart_updated`,
-      (payload: unknown) => {
-        const data = payload as { value?: { count?: number; isDirty?: boolean } } | undefined;
-        const inner = data?.value;
-        if (inner?.count !== undefined) setCartCount(inner.count);
-        if (inner?.isDirty !== undefined) setCartIsDirty(inner.isDirty);
-      }
-    );
+    const unsub = subscribe(`__comp_input__${componentId}__cart_updated`, (payload: unknown) => {
+      const data = payload as { value?: { count?: number; isDirty?: boolean } } | undefined;
+      const inner = data?.value;
+      if (inner?.count !== undefined) setCartCount(inner.count);
+      if (inner?.isDirty !== undefined) setCartIsDirty(inner.isDirty);
+    });
     return unsub;
   }, [isCartMode, componentId, subscribe]);
 
@@ -755,25 +735,22 @@ export function PopButtonComponent({
 
   useEffect(() => {
     if (!isCartMode || !componentId) return;
-    const unsub = subscribe(
-      `__comp_input__${componentId}__cart_save_completed`,
-      (payload: unknown) => {
-        const data = payload as { value?: { success?: boolean } } | undefined;
-        setCartSaving(false);
-        if (data?.value?.success) {
-          setCartIsDirty(false);
-          const targetScreenId = cartScreenIdRef.current;
-          if (targetScreenId) {
-            const cleanId = targetScreenId.replace(/^.*\/(\d+)$/, "$1").trim();
-            window.location.href = `/pop/screens/${cleanId}`;
-          } else {
-            toast.success("장바구니가 저장되었습니다.");
-          }
+    const unsub = subscribe(`__comp_input__${componentId}__cart_save_completed`, (payload: unknown) => {
+      const data = payload as { value?: { success?: boolean } } | undefined;
+      setCartSaving(false);
+      if (data?.value?.success) {
+        setCartIsDirty(false);
+        const targetScreenId = cartScreenIdRef.current;
+        if (targetScreenId) {
+          const cleanId = targetScreenId.replace(/^.*\/(\d+)$/, "$1").trim();
+          window.location.href = `/pop/screens/${cleanId}`;
         } else {
-          toast.error("장바구니 저장에 실패했습니다.");
+          toast.success("장바구니가 저장되었습니다.");
         }
+      } else {
+        toast.error("장바구니 저장에 실패했습니다.");
       }
-    );
+    });
     return unsub;
   }, [isCartMode, componentId, subscribe]);
 
@@ -789,8 +766,7 @@ export function PopButtonComponent({
   const handleCartSave = useCallback(() => {
     if (!componentId) return;
     setCartSaving(true);
-    const selectedCols =
-      config?.cart?.rowDataMode === "selected" ? config.cart.selectedColumns : undefined;
+    const selectedCols = config?.cart?.rowDataMode === "selected" ? config.cart.selectedColumns : undefined;
     publish(`__comp_output__${componentId}__cart_save_trigger`, {
       selectedColumns: selectedCols,
     });
@@ -822,15 +798,12 @@ export function PopButtonComponent({
     try {
       // 동기적 이벤트 수집 (connectionResolver가 동기 중계)
       const responses: CollectedDataResponse[] = [];
-      const unsub = subscribe(
-        `__comp_input__${componentId}__collected_data`,
-        (payload: unknown) => {
-          const enriched = payload as { value?: CollectedDataResponse };
-          if (enriched?.value) {
-            responses.push(enriched.value);
-          }
+      const unsub = subscribe(`__comp_input__${componentId}__collected_data`, (payload: unknown) => {
+        const enriched = payload as { value?: CollectedDataResponse };
+        if (enriched?.value) {
+          responses.push(enriched.value);
         }
-      );
+      });
 
       publish(`__comp_output__${componentId}__collect_data`, {
         requestId: crypto.randomUUID(),
@@ -844,8 +817,8 @@ export function PopButtonComponent({
         return;
       }
 
-      const cardListData = responses.find(r => r.componentType === "pop-card-list");
-      const fieldData = responses.find(r => r.componentType === "pop-field");
+      const cardListData = responses.find((r) => r.componentType === "pop-card-list");
+      const fieldData = responses.find((r) => r.componentType === "pop-field");
 
       const selectedItems = cardListData?.data?.items ?? [];
       if (selectedItems.length === 0) {
@@ -874,7 +847,8 @@ export function PopButtonComponent({
       });
 
       if (result.data?.success) {
-        const codes: Array<{ targetColumn: string; code: string; showResultModal?: boolean }> = result.data.data?.generatedCodes ?? [];
+        const codes: Array<{ targetColumn: string; code: string; showResultModal?: boolean }> =
+          result.data.data?.generatedCodes ?? [];
         const modalCodes = codes.filter((c) => c.showResultModal);
         if (modalCodes.length > 0) {
           setGeneratedCodesResult(modalCodes);
@@ -912,7 +886,14 @@ export function PopButtonComponent({
       setConfirmProcessing(false);
       setShowInboundConfirm(false);
     }
-  }, [componentId, subscribe, publish, config?.statusChangeRules, config?.inboundConfirm?.statusChangeRules, config?.followUpActions]);
+  }, [
+    componentId,
+    subscribe,
+    publish,
+    config?.statusChangeRules,
+    config?.inboundConfirm?.statusChangeRules,
+    config?.followUpActions,
+  ]);
 
   // v2: 데이터 수집 → executeTaskList 호출
   const handleV2Execute = useCallback(async () => {
@@ -921,13 +902,10 @@ export function PopButtonComponent({
 
     try {
       const responses: CollectedDataResponse[] = [];
-      const unsub = subscribe(
-        `__comp_input__${componentId}__collected_data`,
-        (payload: unknown) => {
-          const enriched = payload as { value?: CollectedDataResponse };
-          if (enriched?.value) responses.push(enriched.value);
-        },
-      );
+      const unsub = subscribe(`__comp_input__${componentId}__collected_data`, (payload: unknown) => {
+        const enriched = payload as { value?: CollectedDataResponse };
+        if (enriched?.value) responses.push(enriched.value);
+      });
 
       publish(`__comp_output__${componentId}__collect_data`, {
         requestId: crypto.randomUUID(),
@@ -957,9 +935,11 @@ export function PopButtonComponent({
       if (result.success) {
         const resultData = result.data as Record<string, unknown> | undefined;
         const generatedCodes = resultData?.generatedCodes as
-          Array<{ targetColumn: string; code: string; showResultModal?: boolean }> | undefined;
+          | Array<{ targetColumn: string; code: string; showResultModal?: boolean }>
+          | undefined;
         const deferred = resultData?.deferredTasks as
-          Array<{ type: string; targetScreenId?: string; params?: Record<string, string> }> | undefined;
+          | Array<{ type: string; targetScreenId?: string; params?: Record<string, string> }>
+          | undefined;
 
         if (generatedCodes?.some((g) => g.showResultModal)) {
           setGeneratedCodesResult(generatedCodes);
@@ -985,7 +965,11 @@ export function PopButtonComponent({
     if (isDesignMode) {
       const modeLabel = v2Config
         ? v2Config.tasks.map((t) => TASK_TYPE_LABELS[t.type]).join(" → ")
-        : isCartMode ? "장바구니 저장" : isInboundConfirmMode ? "입고 확정" : ACTION_TYPE_LABELS[config?.action?.type || "save"];
+        : isCartMode
+          ? "장바구니 저장"
+          : isInboundConfirmMode
+            ? "입고 확정"
+            : ACTION_TYPE_LABELS[config?.action?.type || "save"];
       toast.info(`[디자인 모드] ${modeLabel}`);
       return;
     }
@@ -1040,7 +1024,19 @@ export function PopButtonComponent({
       confirm: config?.confirm,
       followUpActions: config?.followUpActions,
     });
-  }, [isDesignMode, v2Config, isCartMode, isInboundConfirmMode, config, cartCount, cartIsDirty, execute, handleCartSave, handleInboundConfirm, handleV2Execute]);
+  }, [
+    isDesignMode,
+    v2Config,
+    isCartMode,
+    isInboundConfirmMode,
+    config,
+    cartCount,
+    cartIsDirty,
+    execute,
+    handleCartSave,
+    handleInboundConfirm,
+    handleV2Execute,
+  ]);
 
   // 외형
   const buttonLabel = config?.label || label || "버튼";
@@ -1063,7 +1059,7 @@ export function PopButtonComponent({
       return "bg-emerald-600 hover:bg-emerald-700 text-white border-emerald-600";
     }
     if (cartIsDirty) {
-      return "bg-orange-500 hover:bg-orange-600 text-white border-orange-500 animate-pulse";
+      return "bg-amber-500 hover:bg-orange-600 text-white border-orange-500 animate-pulse";
     }
     return "";
   }, [isCartMode, cartCount, cartIsDirty]);
@@ -1077,9 +1073,7 @@ export function PopButtonComponent({
   // 데이터 작업 버튼 2상태 색상: 미선택(기본) / 선택됨(초록)
   const inboundButtonClass = useMemo(() => {
     if (isCartMode) return "";
-    return inboundSelectedCount > 0
-      ? "bg-emerald-600 hover:bg-emerald-700 text-white border-emerald-600"
-      : "";
+    return inboundSelectedCount > 0 ? "bg-emerald-600 hover:bg-emerald-700 text-white border-emerald-600" : "";
   }, [isCartMode, inboundSelectedCount]);
 
   return (
@@ -1112,9 +1106,7 @@ export function PopButtonComponent({
             <div
               className={cn(
                 "absolute -top-2 -right-2 flex items-center justify-center rounded-full text-[10px] font-bold",
-                cartIsDirty
-                  ? "bg-orange-500 text-white"
-                  : "bg-emerald-600 text-white",
+                cartIsDirty ? "bg-amber-500 text-white" : "bg-emerald-600 text-white",
               )}
               style={{ minWidth: 18, height: 18, padding: "0 4px" }}
             >
@@ -1125,7 +1117,7 @@ export function PopButtonComponent({
           {/* 선택 개수 배지 (v1 inbound-confirm + v2 data tasks) */}
           {!isCartMode && hasDataTasks && inboundSelectedCount > 0 && (
             <div
-              className="absolute -top-2 -right-2 flex items-center justify-center rounded-full bg-emerald-600 text-white text-[10px] font-bold"
+              className="absolute -top-2 -right-2 flex items-center justify-center rounded-full bg-emerald-600 text-[10px] font-bold text-white"
               style={{ minWidth: 18, height: 18, padding: "0 4px" }}
             >
               {inboundSelectedCount}
@@ -1138,17 +1130,13 @@ export function PopButtonComponent({
       <AlertDialog open={showCartConfirm} onOpenChange={setShowCartConfirm}>
         <AlertDialogContent className="max-w-[95vw] sm:max-w-[400px]">
           <AlertDialogHeader>
-            <AlertDialogTitle className="text-base sm:text-lg">
-              장바구니 저장
-            </AlertDialogTitle>
+            <AlertDialogTitle className="text-base sm:text-lg">장바구니 저장</AlertDialogTitle>
             <AlertDialogDescription className="text-xs sm:text-sm">
               {config?.confirm?.message || `${cartCount}개 항목을 장바구니에 저장하시겠습니까?`}
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter className="gap-2 sm:gap-0">
-            <AlertDialogCancel className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
-              취소
-            </AlertDialogCancel>
+            <AlertDialogCancel className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">취소</AlertDialogCancel>
             <AlertDialogAction
               onClick={() => {
                 setShowCartConfirm(false);
@@ -1166,13 +1154,11 @@ export function PopButtonComponent({
       <AlertDialog open={showInboundConfirm} onOpenChange={setShowInboundConfirm}>
         <AlertDialogContent className="max-w-[95vw] sm:max-w-[400px]">
           <AlertDialogHeader>
-            <AlertDialogTitle className="text-base sm:text-lg">
-              {v2Config ? "실행 확인" : "입고 확정"}
-            </AlertDialogTitle>
+            <AlertDialogTitle className="text-base sm:text-lg">{v2Config ? "실행 확인" : "입고 확정"}</AlertDialogTitle>
             <AlertDialogDescription className="text-xs sm:text-sm">
               {v2Config
-                ? (v2Config.confirm?.message || "작업을 실행하시겠습니까?")
-                : (config?.confirm?.message || "선택한 품목을 입고 확정하시겠습니까?")}
+                ? v2Config.confirm?.message || "작업을 실행하시겠습니까?"
+                : config?.confirm?.message || "선택한 품목을 입고 확정하시겠습니까?"}
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter className="gap-2 sm:gap-0">
@@ -1183,7 +1169,9 @@ export function PopButtonComponent({
               취소
             </AlertDialogCancel>
             <AlertDialogAction
-              onClick={() => { v2Config ? handleV2Execute() : handleInboundConfirm(); }}
+              onClick={() => {
+                v2Config ? handleV2Execute() : handleInboundConfirm();
+              }}
               disabled={confirmProcessing}
               className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
             >
@@ -1194,12 +1182,15 @@ export function PopButtonComponent({
       </AlertDialog>
 
       {/* 채번 결과 다이얼로그 - 사용자가 확인 누를 때까지 유지 */}
-      <AlertDialog open={generatedCodesResult.length > 0} onOpenChange={(open) => { if (!open) handleCloseGeneratedCodesModal(); }}>
+      <AlertDialog
+        open={generatedCodesResult.length > 0}
+        onOpenChange={(open) => {
+          if (!open) handleCloseGeneratedCodesModal();
+        }}
+      >
         <AlertDialogContent className="max-w-[95vw] sm:max-w-[400px]">
           <AlertDialogHeader>
-            <AlertDialogTitle className="text-base sm:text-lg">
-              자동 생성 완료
-            </AlertDialogTitle>
+            <AlertDialogTitle className="text-base sm:text-lg">자동 생성 완료</AlertDialogTitle>
             <AlertDialogDescription asChild>
               <div className="space-y-2 text-xs sm:text-sm">
                 <p>다음 번호가 자동 생성되었습니다.</p>
@@ -1224,26 +1215,25 @@ export function PopButtonComponent({
       </AlertDialog>
 
       {/* 일반 확인 다이얼로그 */}
-      <AlertDialog open={!!pendingConfirm} onOpenChange={(open) => { if (!open) cancelConfirm(); }}>
+      <AlertDialog
+        open={!!pendingConfirm}
+        onOpenChange={(open) => {
+          if (!open) cancelConfirm();
+        }}
+      >
         <AlertDialogContent className="max-w-[95vw] sm:max-w-[400px]">
           <AlertDialogHeader>
-            <AlertDialogTitle className="text-base sm:text-lg">
-              실행 확인
-            </AlertDialogTitle>
-            <AlertDialogDescription className="text-xs sm:text-sm">
-              {getConfirmMessage()}
-            </AlertDialogDescription>
+            <AlertDialogTitle className="text-base sm:text-lg">실행 확인</AlertDialogTitle>
+            <AlertDialogDescription className="text-xs sm:text-sm">{getConfirmMessage()}</AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter className="gap-2 sm:gap-0">
-            <AlertDialogCancel className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
-              취소
-            </AlertDialogCancel>
+            <AlertDialogCancel className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">취소</AlertDialogCancel>
             <AlertDialogAction
               onClick={confirmExecute}
               className={cn(
                 "h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm",
                 config?.action?.type === "delete" &&
-                  "bg-destructive text-destructive-foreground hover:bg-destructive/90"
+                  "bg-destructive text-destructive-foreground hover:bg-destructive/90",
               )}
             >
               확인
@@ -1267,10 +1257,7 @@ interface PopButtonConfigPanelProps {
   componentId?: string;
 }
 
-export function PopButtonConfigPanel({
-  config,
-  onUpdate,
-}: PopButtonConfigPanelProps) {
+export function PopButtonConfigPanel({ config, onUpdate }: PopButtonConfigPanelProps) {
   const v2 = useMemo(() => migrateButtonConfig(config), [config]);
 
   const updateV2 = useCallback(
@@ -1350,9 +1337,7 @@ export function PopButtonConfigPanel({
           </Button>
         ))}
       </div>
-      <p className="text-[10px] text-muted-foreground">
-        클릭하면 외형과 작업 목록이 자동 설정됩니다
-      </p>
+      <p className="text-muted-foreground text-[10px]">클릭하면 외형과 작업 목록이 자동 설정됩니다</p>
 
       {/* 외형 설정 */}
       <SectionDivider label="외형" />
@@ -1369,10 +1354,7 @@ export function PopButtonConfigPanel({
 
         <div>
           <Label className="text-xs">스타일</Label>
-          <Select
-            value={v2.variant || "default"}
-            onValueChange={(v) => updateV2({ variant: v as ButtonVariant })}
-          >
+          <Select value={v2.variant || "default"} onValueChange={(v) => updateV2({ variant: v as ButtonVariant })}>
             <SelectTrigger className="h-8 text-xs">
               <SelectValue />
             </SelectTrigger>
@@ -1388,10 +1370,7 @@ export function PopButtonConfigPanel({
 
         <div>
           <Label className="text-xs">아이콘</Label>
-          <Select
-            value={v2.icon || "none"}
-            onValueChange={(v) => updateV2({ icon: v === "none" ? undefined : v })}
-          >
+          <Select value={v2.icon || "none"} onValueChange={(v) => updateV2({ icon: v === "none" ? undefined : v })}>
             <SelectTrigger className="h-8 text-xs">
               <SelectValue placeholder="없음" />
             </SelectTrigger>
@@ -1427,9 +1406,7 @@ export function PopButtonConfigPanel({
           <Checkbox
             id="confirmEnabledV2"
             checked={v2.confirm?.enabled || false}
-            onCheckedChange={(checked) =>
-              updateV2({ confirm: { ...v2.confirm, enabled: checked === true } })
-            }
+            onCheckedChange={(checked) => updateV2({ confirm: { ...v2.confirm, enabled: checked === true } })}
           />
           <Label htmlFor="confirmEnabledV2" className="text-xs">
             실행 전 확인 메시지 표시
@@ -1438,9 +1415,7 @@ export function PopButtonConfigPanel({
         {v2.confirm?.enabled && (
           <Input
             value={v2.confirm?.message || ""}
-            onChange={(e) =>
-              updateV2({ confirm: { ...v2.confirm, enabled: true, message: e.target.value } })
-            }
+            onChange={(e) => updateV2({ confirm: { ...v2.confirm, enabled: true, message: e.target.value } })}
             placeholder="비워두면 기본 메시지 사용"
             className="h-8 text-xs"
           />
@@ -1451,7 +1426,7 @@ export function PopButtonConfigPanel({
       <SectionDivider label="작업 목록" />
       <div className="space-y-1.5">
         {v2.tasks.length === 0 && (
-          <p className="text-[10px] text-muted-foreground py-2 text-center">
+          <p className="text-muted-foreground py-2 text-center text-[10px]">
             작업이 없습니다. 빠른 시작 또는 아래 버튼으로 추가하세요.
           </p>
         )}
@@ -1509,40 +1484,53 @@ function TaskItemEditor({
   const designerCtx = usePopDesignerContext();
 
   return (
-    <div className="rounded border border-border">
+    <div className="border-border rounded border">
       {/* 헤더: 타입 + 순서 + 삭제 */}
       <div
-        className="flex cursor-pointer items-center gap-1 px-2 py-1.5 hover:bg-muted/30"
+        className="hover:bg-muted/30 flex cursor-pointer items-center gap-1 px-2 py-1.5"
         onClick={() => setExpanded(!expanded)}
       >
-        <ChevronRight
-          className={cn("h-3 w-3 shrink-0 transition-transform", expanded && "rotate-90")}
-        />
-        <GripVertical className="h-3 w-3 shrink-0 text-muted-foreground" />
+        <ChevronRight className={cn("h-3 w-3 shrink-0 transition-transform", expanded && "rotate-90")} />
+        <GripVertical className="text-muted-foreground h-3 w-3 shrink-0" />
         <span className="text-[10px] font-medium">
           {index + 1}. {TASK_TYPE_LABELS[task.type]}
         </span>
-        {task.label && (
-          <span className="ml-1 text-[10px] text-muted-foreground truncate">
-            ({task.label})
-          </span>
-        )}
+        {task.label && <span className="text-muted-foreground ml-1 truncate text-[10px]">({task.label})</span>}
         <div className="ml-auto flex items-center gap-0.5">
           {index > 0 && (
-            <Button variant="ghost" size="icon" className="h-5 w-5" onClick={(e) => { e.stopPropagation(); onMove("up"); }}>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-5 w-5"
+              onClick={(e) => {
+                e.stopPropagation();
+                onMove("up");
+              }}
+            >
               <span className="text-[10px]">^</span>
             </Button>
           )}
           {index < totalCount - 1 && (
-            <Button variant="ghost" size="icon" className="h-5 w-5" onClick={(e) => { e.stopPropagation(); onMove("down"); }}>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-5 w-5"
+              onClick={(e) => {
+                e.stopPropagation();
+                onMove("down");
+              }}
+            >
               <span className="text-[10px]">v</span>
             </Button>
           )}
           <Button
             variant="ghost"
             size="icon"
-            className="h-5 w-5 text-destructive"
-            onClick={(e) => { e.stopPropagation(); onRemove(); }}
+            className="text-destructive h-5 w-5"
+            onClick={(e) => {
+              e.stopPropagation();
+              onRemove();
+            }}
           >
             <Trash2 className="h-3 w-3" />
           </Button>
@@ -1592,20 +1580,13 @@ function TaskDetailForm({
   switch (task.type) {
     case "data-save":
       return (
-        <p className="text-[10px] text-muted-foreground">
+        <p className="text-muted-foreground text-[10px]">
           연결된 입력 컴포넌트의 저장 매핑을 사용합니다. 별도 설정 불필요.
         </p>
       );
 
     case "data-update":
-      return (
-        <DataUpdateTaskForm
-          task={task}
-          onUpdate={onUpdate}
-          tables={tables}
-          columns={columns}
-        />
-      );
+      return <DataUpdateTaskForm task={task} onUpdate={onUpdate} tables={tables} columns={columns} />;
 
     case "data-delete":
       return (
@@ -1646,7 +1627,9 @@ function TaskDetailForm({
               </SelectTrigger>
               <SelectContent>
                 {Object.entries(MODAL_MODE_LABELS).map(([key, lbl]) => (
-                  <SelectItem key={key} value={key} className="text-xs">{lbl}</SelectItem>
+                  <SelectItem key={key} value={key} className="text-xs">
+                    {lbl}
+                  </SelectItem>
                 ))}
               </SelectContent>
             </Select>
@@ -1674,7 +1657,12 @@ function TaskDetailForm({
           {task.modalMode === "fullscreen" && designerCtx && (
             <div>
               {task.modalScreenId ? (
-                <Button variant="outline" size="sm" className="h-7 w-full text-xs" onClick={() => designerCtx.navigateToCanvas(task.modalScreenId!)}>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="h-7 w-full text-xs"
+                  onClick={() => designerCtx.navigateToCanvas(task.modalScreenId!)}
+                >
                   모달 캔버스 열기
                 </Button>
               ) : (
@@ -1733,7 +1721,9 @@ function TaskDetailForm({
               </SelectTrigger>
               <SelectContent>
                 {Object.entries(API_METHOD_LABELS).map(([key, lbl]) => (
-                  <SelectItem key={key} value={key} className="text-xs">{lbl}</SelectItem>
+                  <SelectItem key={key} value={key} className="text-xs">
+                    {lbl}
+                  </SelectItem>
                 ))}
               </SelectContent>
             </Select>
@@ -1756,9 +1746,7 @@ function TaskDetailForm({
 
     case "refresh":
     case "close-modal":
-      return (
-        <p className="text-[10px] text-muted-foreground">설정 불필요</p>
-      );
+      return <p className="text-muted-foreground text-[10px]">설정 불필요</p>;
 
     default:
       return null;
@@ -1841,13 +1829,27 @@ function DataUpdateTaskForm({
                 <SelectValue />
               </SelectTrigger>
               <SelectContent>
-                <SelectItem value="assign" className="text-xs">대입 (=)</SelectItem>
-                <SelectItem value="add" className="text-xs">더하기 (+=)</SelectItem>
-                <SelectItem value="subtract" className="text-xs">빼기 (-=)</SelectItem>
-                <SelectItem value="multiply" className="text-xs">곱하기 (*=)</SelectItem>
-                <SelectItem value="divide" className="text-xs">나누기 (/=)</SelectItem>
-                <SelectItem value="conditional" className="text-xs">조건부 (클라이언트)</SelectItem>
-                <SelectItem value="db-conditional" className="text-xs">조건부 (DB 컬럼 비교)</SelectItem>
+                <SelectItem value="assign" className="text-xs">
+                  대입 (=)
+                </SelectItem>
+                <SelectItem value="add" className="text-xs">
+                  더하기 (+=)
+                </SelectItem>
+                <SelectItem value="subtract" className="text-xs">
+                  빼기 (-=)
+                </SelectItem>
+                <SelectItem value="multiply" className="text-xs">
+                  곱하기 (*=)
+                </SelectItem>
+                <SelectItem value="divide" className="text-xs">
+                  나누기 (/=)
+                </SelectItem>
+                <SelectItem value="conditional" className="text-xs">
+                  조건부 (클라이언트)
+                </SelectItem>
+                <SelectItem value="db-conditional" className="text-xs">
+                  조건부 (DB 컬럼 비교)
+                </SelectItem>
               </SelectContent>
             </Select>
           </div>
@@ -1864,84 +1866,148 @@ function DataUpdateTaskForm({
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="fixed" className="text-xs">고정값</SelectItem>
-                  <SelectItem value="linked" className="text-xs">연결 데이터</SelectItem>
+                  <SelectItem value="fixed" className="text-xs">
+                    고정값
+                  </SelectItem>
+                  <SelectItem value="linked" className="text-xs">
+                    연결 데이터
+                  </SelectItem>
                 </SelectContent>
               </Select>
             </div>
           )}
 
           {/* 고정값 입력 */}
-          {task.valueSource === "fixed" && task.operationType !== "conditional" && task.operationType !== "db-conditional" && (
-            <Input
-              value={task.fixedValue || ""}
-              onChange={(e) => onUpdate({ fixedValue: e.target.value })}
-              className="h-7 text-xs"
-              placeholder="변경할 값"
-            />
-          )}
+          {task.valueSource === "fixed" &&
+            task.operationType !== "conditional" &&
+            task.operationType !== "db-conditional" && (
+              <Input
+                value={task.fixedValue || ""}
+                onChange={(e) => onUpdate({ fixedValue: e.target.value })}
+                className="h-7 text-xs"
+                placeholder="변경할 값"
+              />
+            )}
 
           {/* 연결 데이터 필드명 */}
-          {task.valueSource === "linked" && task.operationType !== "conditional" && task.operationType !== "db-conditional" && (
-            <Input
-              value={task.sourceField || ""}
-              onChange={(e) => onUpdate({ sourceField: e.target.value })}
-              className="h-7 text-xs"
-              placeholder="연결 필드명 (예: qty)"
-            />
-          )}
+          {task.valueSource === "linked" &&
+            task.operationType !== "conditional" &&
+            task.operationType !== "db-conditional" && (
+              <Input
+                value={task.sourceField || ""}
+                onChange={(e) => onUpdate({ sourceField: e.target.value })}
+                className="h-7 text-xs"
+                placeholder="연결 필드명 (예: qty)"
+              />
+            )}
 
           {/* DB 컬럼 비교 조건부 설정 */}
           {task.operationType === "db-conditional" && (
-            <div className="space-y-2 rounded border border-dashed border-muted-foreground/30 p-2">
-              <p className="text-[10px] text-muted-foreground">DB에서 컬럼 A와 컬럼 B를 비교하여 값을 판정합니다</p>
+            <div className="border-muted-foreground/30 space-y-2 rounded border border-dashed p-2">
+              <p className="text-muted-foreground text-[10px]">DB에서 컬럼 A와 컬럼 B를 비교하여 값을 판정합니다</p>
               <div className="flex items-center gap-1">
-                <ColumnCombobox columns={columns} value={task.compareColumn ?? ""} onSelect={(v) => onUpdate({ compareColumn: v })} placeholder="비교 컬럼 A" />
-                <Select value={task.compareOperator ?? ">="} onValueChange={(v) => onUpdate({ compareOperator: v as ButtonTask["compareOperator"] })}>
-                  <SelectTrigger className="h-7 w-14 text-[10px]"><SelectValue /></SelectTrigger>
+                <ColumnCombobox
+                  columns={columns}
+                  value={task.compareColumn ?? ""}
+                  onSelect={(v) => onUpdate({ compareColumn: v })}
+                  placeholder="비교 컬럼 A"
+                />
+                <Select
+                  value={task.compareOperator ?? ">="}
+                  onValueChange={(v) => onUpdate({ compareOperator: v as ButtonTask["compareOperator"] })}
+                >
+                  <SelectTrigger className="h-7 w-14 text-[10px]">
+                    <SelectValue />
+                  </SelectTrigger>
                   <SelectContent>
                     {["=", "!=", ">", "<", ">=", "<="].map((op) => (
-                      <SelectItem key={op} value={op} className="text-xs">{op}</SelectItem>
+                      <SelectItem key={op} value={op} className="text-xs">
+                        {op}
+                      </SelectItem>
                     ))}
                   </SelectContent>
                 </Select>
-                <ColumnCombobox columns={columns} value={task.compareWith ?? ""} onSelect={(v) => onUpdate({ compareWith: v })} placeholder="비교 컬럼 B" />
+                <ColumnCombobox
+                  columns={columns}
+                  value={task.compareWith ?? ""}
+                  onSelect={(v) => onUpdate({ compareWith: v })}
+                  placeholder="비교 컬럼 B"
+                />
               </div>
               <div className="flex items-center gap-1">
-                <span className="shrink-0 text-[10px] text-muted-foreground">참 -&gt;</span>
-                <Input value={task.dbThenValue ?? ""} onChange={(e) => onUpdate({ dbThenValue: e.target.value })} className="h-7 flex-1 text-[10px]" placeholder="예: 입고완료" />
+                <span className="text-muted-foreground shrink-0 text-[10px]">참 -&gt;</span>
+                <Input
+                  value={task.dbThenValue ?? ""}
+                  onChange={(e) => onUpdate({ dbThenValue: e.target.value })}
+                  className="h-7 flex-1 text-[10px]"
+                  placeholder="예: 입고완료"
+                />
               </div>
               <div className="flex items-center gap-1">
-                <span className="shrink-0 text-[10px] text-muted-foreground">거짓 -&gt;</span>
-                <Input value={task.dbElseValue ?? ""} onChange={(e) => onUpdate({ dbElseValue: e.target.value })} className="h-7 flex-1 text-[10px]" placeholder="예: 부분입고" />
+                <span className="text-muted-foreground shrink-0 text-[10px]">거짓 -&gt;</span>
+                <Input
+                  value={task.dbElseValue ?? ""}
+                  onChange={(e) => onUpdate({ dbElseValue: e.target.value })}
+                  className="h-7 flex-1 text-[10px]"
+                  placeholder="예: 부분입고"
+                />
               </div>
             </div>
           )}
 
           {/* 조건부 값 설정 */}
           {task.operationType === "conditional" && (
-            <div className="space-y-2 rounded border border-dashed border-muted-foreground/30 p-2">
+            <div className="border-muted-foreground/30 space-y-2 rounded border border-dashed p-2">
               {conditions.map((cond, cIdx) => (
                 <div key={cIdx} className="space-y-1">
                   <div className="flex items-center gap-1">
-                    <span className="shrink-0 text-[10px] text-muted-foreground">만약</span>
-                    <ColumnCombobox columns={columns} value={cond.whenColumn} onSelect={(v) => updateCondition(cIdx, { whenColumn: v })} placeholder="컬럼" />
-                    <Select value={cond.operator} onValueChange={(v) => updateCondition(cIdx, { operator: v as "=" | "!=" | ">" | "<" | ">=" | "<=" })}>
-                      <SelectTrigger className="h-7 w-14 text-[10px]"><SelectValue /></SelectTrigger>
+                    <span className="text-muted-foreground shrink-0 text-[10px]">만약</span>
+                    <ColumnCombobox
+                      columns={columns}
+                      value={cond.whenColumn}
+                      onSelect={(v) => updateCondition(cIdx, { whenColumn: v })}
+                      placeholder="컬럼"
+                    />
+                    <Select
+                      value={cond.operator}
+                      onValueChange={(v) =>
+                        updateCondition(cIdx, { operator: v as "=" | "!=" | ">" | "<" | ">=" | "<=" })
+                      }
+                    >
+                      <SelectTrigger className="h-7 w-14 text-[10px]">
+                        <SelectValue />
+                      </SelectTrigger>
                       <SelectContent>
                         {["=", "!=", ">", "<", ">=", "<="].map((op) => (
-                          <SelectItem key={op} value={op} className="text-xs">{op}</SelectItem>
+                          <SelectItem key={op} value={op} className="text-xs">
+                            {op}
+                          </SelectItem>
                         ))}
                       </SelectContent>
                     </Select>
-                    <Input value={cond.whenValue} onChange={(e) => updateCondition(cIdx, { whenValue: e.target.value })} className="h-7 w-16 text-[10px]" placeholder="값" />
-                    <Button variant="ghost" size="icon" className="h-5 w-5 shrink-0" onClick={() => removeCondition(cIdx)}>
+                    <Input
+                      value={cond.whenValue}
+                      onChange={(e) => updateCondition(cIdx, { whenValue: e.target.value })}
+                      className="h-7 w-16 text-[10px]"
+                      placeholder="값"
+                    />
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-5 w-5 shrink-0"
+                      onClick={() => removeCondition(cIdx)}
+                    >
                       <X className="h-3 w-3" />
                     </Button>
                   </div>
                   <div className="flex items-center gap-1 pl-4">
-                    <span className="shrink-0 text-[10px] text-muted-foreground">이면 -&gt;</span>
-                    <Input value={cond.thenValue} onChange={(e) => updateCondition(cIdx, { thenValue: e.target.value })} className="h-7 text-[10px]" placeholder="변경할 값" />
+                    <span className="text-muted-foreground shrink-0 text-[10px]">이면 -&gt;</span>
+                    <Input
+                      value={cond.thenValue}
+                      onChange={(e) => updateCondition(cIdx, { thenValue: e.target.value })}
+                      className="h-7 text-[10px]"
+                      placeholder="변경할 값"
+                    />
                   </div>
                 </div>
               ))}
@@ -1949,7 +2015,7 @@ function DataUpdateTaskForm({
                 <Plus className="mr-1 h-3 w-3" /> 조건 추가
               </Button>
               <div className="flex items-center gap-1">
-                <span className="shrink-0 text-[10px] text-muted-foreground">그 외 -&gt;</span>
+                <span className="text-muted-foreground shrink-0 text-[10px]">그 외 -&gt;</span>
                 <Input
                   value={defaultValue}
                   onChange={(e) => onUpdate({ conditionalValue: { conditions, defaultValue: e.target.value } })}
@@ -1968,25 +2034,40 @@ function DataUpdateTaskForm({
                 value={task.lookupMode ?? "auto"}
                 onValueChange={(v) => onUpdate({ lookupMode: v as "auto" | "manual" })}
               >
-                <SelectTrigger className="h-6 w-16 text-[10px]"><SelectValue /></SelectTrigger>
+                <SelectTrigger className="h-6 w-16 text-[10px]">
+                  <SelectValue />
+                </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="auto" className="text-[10px]">자동</SelectItem>
-                  <SelectItem value="manual" className="text-[10px]">수동</SelectItem>
+                  <SelectItem value="auto" className="text-[10px]">
+                    자동
+                  </SelectItem>
+                  <SelectItem value="manual" className="text-[10px]">
+                    수동
+                  </SelectItem>
                 </SelectContent>
               </Select>
             </div>
             {task.lookupMode === "manual" && (
               <div className="flex items-center gap-1">
                 <Select value={task.manualItemField ?? ""} onValueChange={(v) => onUpdate({ manualItemField: v })}>
-                  <SelectTrigger className="h-7 flex-1 text-[10px]"><SelectValue placeholder="카드 항목 필드" /></SelectTrigger>
+                  <SelectTrigger className="h-7 flex-1 text-[10px]">
+                    <SelectValue placeholder="카드 항목 필드" />
+                  </SelectTrigger>
                   <SelectContent>
                     {KNOWN_ITEM_FIELDS.map((f) => (
-                      <SelectItem key={f.value} value={f.value} className="text-[10px]">{f.label}</SelectItem>
+                      <SelectItem key={f.value} value={f.value} className="text-[10px]">
+                        {f.label}
+                      </SelectItem>
                     ))}
                   </SelectContent>
                 </Select>
-                <span className="shrink-0 text-[10px] text-muted-foreground">-&gt;</span>
-                <ColumnCombobox columns={columns} value={task.manualPkColumn ?? ""} onSelect={(v) => onUpdate({ manualPkColumn: v })} placeholder="대상 PK 컬럼" />
+                <span className="text-muted-foreground shrink-0 text-[10px]">-&gt;</span>
+                <ColumnCombobox
+                  columns={columns}
+                  value={task.manualPkColumn ?? ""}
+                  onSelect={(v) => onUpdate({ manualPkColumn: v })}
+                  placeholder="대상 PK 컬럼"
+                />
               </div>
             )}
           </div>
@@ -2075,9 +2156,7 @@ function ActionDetailFields({
             <Label className="text-xs">모달 방식</Label>
             <Select
               value={action?.modalMode || "fullscreen"}
-              onValueChange={(v) =>
-                onUpdate({ modalMode: v as ModalMode })
-              }
+              onValueChange={(v) => onUpdate({ modalMode: v as ModalMode })}
               disabled={disabled}
             >
               <SelectTrigger className="h-8 text-xs">
@@ -2097,9 +2176,7 @@ function ActionDetailFields({
               <Label className="text-xs">화면 ID</Label>
               <Input
                 value={action?.modalScreenId || ""}
-                onChange={(e) =>
-                  onUpdate({ modalScreenId: e.target.value })
-                }
+                onChange={(e) => onUpdate({ modalScreenId: e.target.value })}
                 placeholder="화면 ID"
                 className="h-8 text-xs"
                 disabled={disabled}
@@ -2136,10 +2213,7 @@ function ActionDetailFields({
                   onClick={() => {
                     const selectedId = designerCtx.selectedComponentId;
                     if (!selectedId) return;
-                    const modalId = designerCtx.createModalCanvas(
-                      selectedId,
-                      action?.modalTitle || "새 모달"
-                    );
+                    const modalId = designerCtx.createModalCanvas(selectedId, action?.modalTitle || "새 모달");
                     onUpdate({ modalScreenId: modalId });
                   }}
                 >
@@ -2203,38 +2277,26 @@ function FollowUpActionsEditor({
   return (
     <div className="space-y-2">
       {actions.length === 0 && (
-        <p className="text-[10px] text-muted-foreground">
-          메인 액션 성공 후 순차 실행할 후속 동작
-        </p>
+        <p className="text-muted-foreground text-[10px]">메인 액션 성공 후 순차 실행할 후속 동작</p>
       )}
 
       {actions.map((fa, idx) => (
-        <div
-          key={idx}
-          className="space-y-1.5 rounded border p-2"
-        >
+        <div key={idx} className="space-y-1.5 rounded border p-2">
           <div className="flex items-center justify-between">
-            <span className="text-[10px] font-medium text-muted-foreground">
-              후속 {idx + 1}
-            </span>
+            <span className="text-muted-foreground text-[10px] font-medium">후속 {idx + 1}</span>
             <Button
               type="button"
               variant="ghost"
               size="sm"
               onClick={() => handleRemove(idx)}
-              className="h-5 px-1 text-[10px] text-destructive"
+              className="text-destructive h-5 px-1 text-[10px]"
             >
               삭제
             </Button>
           </div>
 
           {/* 타입 선택 */}
-          <Select
-            value={fa.type}
-            onValueChange={(v) =>
-              handleUpdate(idx, { type: v as FollowUpActionType })
-            }
-          >
+          <Select value={fa.type} onValueChange={(v) => handleUpdate(idx, { type: v as FollowUpActionType })}>
             <SelectTrigger className="h-7 text-xs">
               <SelectValue />
             </SelectTrigger>
@@ -2251,9 +2313,7 @@ function FollowUpActionsEditor({
           {fa.type === "event" && (
             <Input
               value={fa.eventName || ""}
-              onChange={(e) =>
-                handleUpdate(idx, { eventName: e.target.value })
-              }
+              onChange={(e) => handleUpdate(idx, { eventName: e.target.value })}
               placeholder="이벤트명"
               className="h-7 text-xs"
             />
@@ -2261,9 +2321,7 @@ function FollowUpActionsEditor({
           {fa.type === "navigate" && (
             <Input
               value={fa.targetScreenId || ""}
-              onChange={(e) =>
-                handleUpdate(idx, { targetScreenId: e.target.value })
-              }
+              onChange={(e) => handleUpdate(idx, { targetScreenId: e.target.value })}
               placeholder="화면 ID"
               className="h-7 text-xs"
             />
@@ -2271,13 +2329,7 @@ function FollowUpActionsEditor({
         </div>
       ))}
 
-      <Button
-        type="button"
-        variant="outline"
-        size="sm"
-        onClick={handleAdd}
-        className="w-full h-7 text-xs"
-      >
+      <Button type="button" variant="outline" size="sm" onClick={handleAdd} className="h-7 w-full text-xs">
         후속 액션 추가
       </Button>
     </div>
@@ -2288,11 +2340,7 @@ function FollowUpActionsEditor({
 // STEP 4: 미리보기 + 레지스트리 등록
 // ========================================
 
-function PopButtonPreviewComponent({
-  config,
-}: {
-  config?: PopButtonConfig;
-}) {
+function PopButtonPreviewComponent({ config }: { config?: PopButtonConfig }) {
   const buttonLabel = config?.label || "버튼";
   const variant = config?.variant || "default";
   const iconName = config?.icon || "";
@@ -2300,21 +2348,8 @@ function PopButtonPreviewComponent({
 
   return (
     <div className="flex h-full w-full items-center justify-center overflow-hidden">
-      <Button
-        variant={variant}
-        className={cn(
-          "pointer-events-none",
-          isIconOnly && "px-2"
-        )}
-        tabIndex={-1}
-      >
-        {iconName && (
-          <DynamicLucideIcon
-            name={iconName}
-            size={16}
-            className={isIconOnly ? "" : "mr-1.5"}
-          />
-        )}
+      <Button variant={variant} className={cn("pointer-events-none", isIconOnly && "px-2")} tabIndex={-1}>
+        {iconName && <DynamicLucideIcon name={iconName} size={16} className={isIconOnly ? "" : "mr-1.5"} />}
         {!isIconOnly && <span>{buttonLabel}</span>}
       </Button>
     </div>
@@ -2450,9 +2485,9 @@ function SingleRuleEditor({
   };
 
   return (
-    <div className="space-y-2 rounded border border-border p-2">
+    <div className="border-border space-y-2 rounded border p-2">
       <div className="flex items-center justify-between">
-        <span className="text-[10px] font-medium text-muted-foreground">규칙 {idx + 1}</span>
+        <span className="text-muted-foreground text-[10px] font-medium">규칙 {idx + 1}</span>
         <Button variant="ghost" size="icon" className="h-5 w-5" onClick={onRemove}>
           <Trash2 className="h-3 w-3" />
         </Button>
@@ -2472,11 +2507,7 @@ function SingleRuleEditor({
       {rule.targetTable && (
         <div className="space-y-1">
           <Label className="text-[10px]">변경 컬럼</Label>
-          <ColumnCombobox
-            columns={columns}
-            value={rule.targetColumn}
-            onSelect={(v) => onUpdate({ targetColumn: v })}
-          />
+          <ColumnCombobox columns={columns} value={rule.targetColumn} onSelect={(v) => onUpdate({ targetColumn: v })} />
         </div>
       )}
 
@@ -2493,33 +2524,36 @@ function SingleRuleEditor({
                 <SelectValue />
               </SelectTrigger>
               <SelectContent>
-                <SelectItem value="auto" className="text-[10px]">자동</SelectItem>
-                <SelectItem value="manual" className="text-[10px]">수동</SelectItem>
+                <SelectItem value="auto" className="text-[10px]">
+                  자동
+                </SelectItem>
+                <SelectItem value="manual" className="text-[10px]">
+                  수동
+                </SelectItem>
               </SelectContent>
             </Select>
           </div>
           {(rule.lookupMode ?? "auto") === "auto" ? (
-            <p className="text-[10px] text-muted-foreground">
+            <p className="text-muted-foreground text-[10px]">
               {rule.targetTable === "cart_items"
                 ? `카드 항목.__cart_id → ${rule.targetTable}.id`
-                : `카드 항목.row_key → ${rule.targetTable}.${columns.find(c => c.isPrimaryKey)?.name ?? "PK(조회중)"}`}
+                : `카드 항목.row_key → ${rule.targetTable}.${columns.find((c) => c.isPrimaryKey)?.name ?? "PK(조회중)"}`}
             </p>
           ) : (
             <div className="flex items-center gap-1">
-              <Select
-                value={rule.manualItemField ?? ""}
-                onValueChange={(v) => onUpdate({ manualItemField: v })}
-              >
+              <Select value={rule.manualItemField ?? ""} onValueChange={(v) => onUpdate({ manualItemField: v })}>
                 <SelectTrigger className="h-7 flex-1 text-[10px]">
                   <SelectValue placeholder="카드 항목 필드" />
                 </SelectTrigger>
                 <SelectContent>
                   {KNOWN_ITEM_FIELDS.map((f) => (
-                    <SelectItem key={f.value} value={f.value} className="text-[10px]">{f.label}</SelectItem>
+                    <SelectItem key={f.value} value={f.value} className="text-[10px]">
+                      {f.label}
+                    </SelectItem>
                   ))}
                 </SelectContent>
               </Select>
-              <span className="shrink-0 text-[10px] text-muted-foreground">→</span>
+              <span className="text-muted-foreground shrink-0 text-[10px]">→</span>
               <ColumnCombobox
                 columns={columns}
                 value={rule.manualPkColumn ?? ""}
@@ -2574,11 +2608,11 @@ function SingleRuleEditor({
 
           {/* 조건부 */}
           {rule.valueType === "conditional" && (
-            <div className="space-y-2 rounded border border-dashed border-muted-foreground/30 p-2">
+            <div className="border-muted-foreground/30 space-y-2 rounded border border-dashed p-2">
               {conditions.map((cond, cIdx) => (
                 <div key={cIdx} className="space-y-1">
                   <div className="flex items-center gap-1">
-                    <span className="shrink-0 text-[10px] text-muted-foreground">만약</span>
+                    <span className="text-muted-foreground shrink-0 text-[10px]">만약</span>
                     <ColumnCombobox
                       columns={columns}
                       value={cond.whenColumn}
@@ -2587,14 +2621,18 @@ function SingleRuleEditor({
                     />
                     <Select
                       value={cond.operator}
-                      onValueChange={(v) => updateCondition(cIdx, { operator: v as "=" | "!=" | ">" | "<" | ">=" | "<=" })}
+                      onValueChange={(v) =>
+                        updateCondition(cIdx, { operator: v as "=" | "!=" | ">" | "<" | ">=" | "<=" })
+                      }
                     >
                       <SelectTrigger className="h-7 w-14 text-[10px]">
                         <SelectValue />
                       </SelectTrigger>
                       <SelectContent>
                         {["=", "!=", ">", "<", ">=", "<="].map((op) => (
-                          <SelectItem key={op} value={op} className="text-xs">{op}</SelectItem>
+                          <SelectItem key={op} value={op} className="text-xs">
+                            {op}
+                          </SelectItem>
                         ))}
                       </SelectContent>
                     </Select>
@@ -2604,12 +2642,17 @@ function SingleRuleEditor({
                       className="h-7 w-16 text-[10px]"
                       placeholder="값"
                     />
-                    <Button variant="ghost" size="icon" className="h-5 w-5 shrink-0" onClick={() => removeCondition(cIdx)}>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-5 w-5 shrink-0"
+                      onClick={() => removeCondition(cIdx)}
+                    >
                       <X className="h-3 w-3" />
                     </Button>
                   </div>
                   <div className="flex items-center gap-1 pl-4">
-                    <span className="shrink-0 text-[10px] text-muted-foreground">이면 -&gt;</span>
+                    <span className="text-muted-foreground shrink-0 text-[10px]">이면 -&gt;</span>
                     <Input
                       value={cond.thenValue}
                       onChange={(e) => updateCondition(cIdx, { thenValue: e.target.value })}
@@ -2624,7 +2667,7 @@ function SingleRuleEditor({
                 조건 추가
               </Button>
               <div className="flex items-center gap-1">
-                <span className="shrink-0 text-[10px] text-muted-foreground">그 외 -&gt;</span>
+                <span className="text-muted-foreground shrink-0 text-[10px]">그 외 -&gt;</span>
                 <Input
                   value={defaultValue}
                   onChange={(e) =>
@@ -2638,7 +2681,6 @@ function SingleRuleEditor({
               </div>
             </div>
           )}
-
         </>
       )}
     </div>
@@ -2664,15 +2706,57 @@ PopComponentRegistry.registerComponent({
   } as PopButtonConfig,
   connectionMeta: {
     sendable: [
-      { key: "cart_save_trigger", label: "저장 요청", type: "event", category: "event", description: "장바구니 일괄 저장 요청 (카드 목록에 전달)" },
-      { key: "collect_data", label: "데이터 수집 요청", type: "event", category: "event", description: "연결된 컴포넌트에 데이터+매핑 수집 요청" },
-      { key: "action_completed", label: "액션 완료", type: "event", category: "event", description: "확정/저장 완료 후 결과 전달" },
+      {
+        key: "cart_save_trigger",
+        label: "저장 요청",
+        type: "event",
+        category: "event",
+        description: "장바구니 일괄 저장 요청 (카드 목록에 전달)",
+      },
+      {
+        key: "collect_data",
+        label: "데이터 수집 요청",
+        type: "event",
+        category: "event",
+        description: "연결된 컴포넌트에 데이터+매핑 수집 요청",
+      },
+      {
+        key: "action_completed",
+        label: "액션 완료",
+        type: "event",
+        category: "event",
+        description: "확정/저장 완료 후 결과 전달",
+      },
     ],
     receivable: [
-      { key: "cart_updated", label: "장바구니 상태", type: "event", category: "event", description: "카드 목록에서 장바구니 변경 시 count/isDirty 수신" },
-      { key: "cart_save_completed", label: "저장 완료", type: "event", category: "event", description: "카드 목록에서 DB 저장 완료 시 수신" },
-      { key: "collected_data", label: "수집된 데이터", type: "event", category: "event", description: "컴포넌트에서 수집한 데이터+매핑 응답" },
-      { key: "selected_items", label: "선택된 항목", type: "event", category: "event", description: "카드 목록에서 체크박스로 선택된 항목 수 수신" },
+      {
+        key: "cart_updated",
+        label: "장바구니 상태",
+        type: "event",
+        category: "event",
+        description: "카드 목록에서 장바구니 변경 시 count/isDirty 수신",
+      },
+      {
+        key: "cart_save_completed",
+        label: "저장 완료",
+        type: "event",
+        category: "event",
+        description: "카드 목록에서 DB 저장 완료 시 수신",
+      },
+      {
+        key: "collected_data",
+        label: "수집된 데이터",
+        type: "event",
+        category: "event",
+        description: "컴포넌트에서 수집한 데이터+매핑 응답",
+      },
+      {
+        key: "selected_items",
+        label: "선택된 항목",
+        type: "event",
+        category: "event",
+        description: "카드 목록에서 체크박스로 선택된 항목 수 수신",
+      },
     ],
   },
   touchOptimized: true,
diff --git a/frontend/lib/registry/pop-components/pop-card-list/NumberInputModal.tsx b/frontend/lib/registry/pop-components/pop-card-list/NumberInputModal.tsx
index 6e818a0c..4136d144 100644
--- a/frontend/lib/registry/pop-components/pop-card-list/NumberInputModal.tsx
+++ b/frontend/lib/registry/pop-components/pop-card-list/NumberInputModal.tsx
@@ -232,7 +232,7 @@ export function NumberInputModal({
           >
             <VisuallyHidden><DialogTitle>수량 입력</DialogTitle></VisuallyHidden>
             {/* 헤더 */}
-            <div className="flex items-center justify-between bg-blue-500 px-4 py-3">
+            <div className="flex items-center justify-between bg-primary px-4 py-3">
               <div className="flex items-center gap-2">
                 {isBackVisible && (
                   <button
@@ -243,7 +243,7 @@ export function NumberInputModal({
                     <ArrowLeft className="h-4 w-4" />
                   </button>
                 )}
-                <span className="rounded-full bg-blue-400/50 px-3 py-1 text-sm font-medium text-white">
+                <span className="rounded-full bg-primary/70/50 px-3 py-1 text-sm font-medium text-white">
                   {headerLabel}
                 </span>
               </div>
@@ -264,7 +264,7 @@ export function NumberInputModal({
                 <div className="space-y-3">
                   {/* 안내 메시지 - 마지막 등록 결과 */}
                   {showSummary && entries.length > 0 && (
-                    <div className="rounded-lg bg-blue-50 px-3 py-2 text-center text-sm font-medium text-blue-700">
+                    <div className="rounded-lg bg-primary/10 px-3 py-2 text-center text-sm font-medium text-primary">
                       {(() => {
                         const last = entries[entries.length - 1];
                         return `${last.packageCount}${last.unitLabel} x ${last.quantityPerUnit}${unit} = ${last.totalQuantity.toLocaleString()}${unit}`;
@@ -274,19 +274,19 @@ export function NumberInputModal({
 
                   {/* 포장 내역 리스트 */}
                   <div className="space-y-1.5">
-                    <p className="text-xs font-medium text-gray-500">포장 내역</p>
+                    <p className="text-xs font-medium text-muted-foreground">포장 내역</p>
                     {entries.map((entry, idx) => (
                       <div
                         key={idx}
-                        className="flex items-center justify-between rounded-lg border border-gray-200 bg-gray-50 px-3 py-2"
+                        className="flex items-center justify-between rounded-lg border border-border bg-muted px-3 py-2"
                       >
-                        <span className="text-sm text-gray-700">
+                        <span className="text-sm text-foreground">
                           {entry.packageCount}{entry.unitLabel} x {entry.quantityPerUnit}{unit} = {entry.totalQuantity.toLocaleString()}{unit}
                         </span>
                         <button
                           type="button"
                           onClick={() => handleRemoveEntry(idx)}
-                          className="rounded-full p-1 text-gray-400 hover:bg-red-50 hover:text-red-500"
+                          className="rounded-full p-1 text-muted-foreground/70 hover:bg-destructive/10 hover:text-destructive"
                         >
                           <Trash2 className="h-3.5 w-3.5" />
                         </button>
@@ -295,9 +295,9 @@ export function NumberInputModal({
                   </div>
 
                   {/* 합계 */}
-                  <div className="flex items-center justify-between rounded-lg bg-green-50 px-3 py-2">
-                    <span className="text-sm font-medium text-green-700">합계</span>
-                    <span className="text-lg font-bold text-green-700">
+                  <div className="flex items-center justify-between rounded-lg bg-emerald-50 px-3 py-2">
+                    <span className="text-sm font-medium text-emerald-700">합계</span>
+                    <span className="text-lg font-bold text-emerald-700">
                       {entriesTotal.toLocaleString()} {unit}
                     </span>
                   </div>
@@ -317,7 +317,7 @@ export function NumberInputModal({
                     {remainingQuantity > 0 && (
                       <button
                         type="button"
-                        className="flex h-12 items-center justify-center gap-1.5 rounded-2xl border border-blue-200 bg-blue-50 text-sm font-bold text-blue-600 active:bg-blue-100"
+                        className="flex h-12 items-center justify-center gap-1.5 rounded-2xl border border-primary/20 bg-primary/10 text-sm font-bold text-primary active:bg-primary/10"
                         onClick={handleAddMore}
                       >
                         <Plus className="h-4 w-4" />
@@ -326,7 +326,7 @@ export function NumberInputModal({
                     )}
                     <button
                       type="button"
-                      className={`flex h-12 items-center justify-center rounded-2xl bg-green-500 text-base font-bold text-white active:bg-green-600 ${remainingQuantity <= 0 ? "col-span-2" : ""}`}
+                      className={`flex h-12 items-center justify-center rounded-2xl bg-emerald-500 text-base font-bold text-white active:bg-emerald-600 ${remainingQuantity <= 0 ? "col-span-2" : ""}`}
                       onClick={handleComplete}
                     >
                       완료
@@ -336,13 +336,13 @@ export function NumberInputModal({
               ) : (
                 <>
                   {/* 숫자 표시 영역 */}
-                  <div className="flex min-h-[72px] items-center justify-end rounded-xl border-2 border-gray-200 bg-gray-50 px-4 py-4">
+                  <div className="flex min-h-[72px] items-center justify-end rounded-xl border-2 border-border bg-muted px-4 py-4">
                     {displayText ? (
-                      <span className="text-4xl font-bold tracking-tight text-gray-900">
+                      <span className="text-4xl font-bold tracking-tight text-foreground">
                         {displayText}
                       </span>
                     ) : (
-                      <span className="text-2xl text-gray-300">0</span>
+                      <span className="text-2xl text-muted-foreground/50">0</span>
                     )}
                   </div>
 
@@ -357,7 +357,7 @@ export function NumberInputModal({
                       <button
                         key={n}
                         type="button"
-                        className="h-14 rounded-2xl border border-gray-200 bg-gray-50 text-xl font-semibold text-gray-800 active:bg-gray-200"
+                        className="h-14 rounded-2xl border border-border bg-muted text-xl font-semibold text-foreground active:bg-muted/80"
                         onClick={() => handleNumberClick(n)}
                       >
                         {n}
@@ -375,7 +375,7 @@ export function NumberInputModal({
                       <button
                         key={n}
                         type="button"
-                        className="h-14 rounded-2xl border border-gray-200 bg-gray-50 text-xl font-semibold text-gray-800 active:bg-gray-200"
+                        className="h-14 rounded-2xl border border-border bg-muted text-xl font-semibold text-foreground active:bg-muted/80"
                         onClick={() => handleNumberClick(n)}
                       >
                         {n}
@@ -393,7 +393,7 @@ export function NumberInputModal({
                       <button
                         key={n}
                         type="button"
-                        className="h-14 rounded-2xl border border-gray-200 bg-gray-50 text-xl font-semibold text-gray-800 active:bg-gray-200"
+                        className="h-14 rounded-2xl border border-border bg-muted text-xl font-semibold text-foreground active:bg-muted/80"
                         onClick={() => handleNumberClick(n)}
                       >
                         {n}
@@ -401,7 +401,7 @@ export function NumberInputModal({
                     ))}
                     <button
                       type="button"
-                      className="h-14 rounded-2xl bg-blue-100 text-sm font-bold text-blue-600 active:bg-blue-200"
+                      className="h-14 rounded-2xl bg-primary/10 text-sm font-bold text-primary active:bg-blue-200"
                       onClick={handleMax}
                     >
                       MAX
@@ -409,14 +409,14 @@ export function NumberInputModal({
 
                     <button
                       type="button"
-                      className="h-14 rounded-2xl border border-gray-200 bg-gray-50 text-xl font-semibold text-gray-800 active:bg-gray-200"
+                      className="h-14 rounded-2xl border border-border bg-muted text-xl font-semibold text-foreground active:bg-muted/80"
                       onClick={() => handleNumberClick("0")}
                     >
                       0
                     </button>
                     <button
                       type="button"
-                      className="col-span-3 h-14 rounded-2xl bg-green-500 text-base font-bold text-white active:bg-green-600"
+                      className="col-span-3 h-14 rounded-2xl bg-emerald-500 text-base font-bold text-white active:bg-emerald-600"
                       onClick={handleConfirm}
                     >
                       {step === "package_count" ? "다음" : "확인"}
diff --git a/frontend/lib/registry/pop-components/pop-card-list/PopCardListComponent.tsx b/frontend/lib/registry/pop-components/pop-card-list/PopCardListComponent.tsx
index f6a1c5c3..4b7c182c 100644
--- a/frontend/lib/registry/pop-components/pop-card-list/PopCardListComponent.tsx
+++ b/frontend/lib/registry/pop-components/pop-card-list/PopCardListComponent.tsx
@@ -1104,10 +1104,10 @@ function Card({
   const borderClass = isCartListMode
     ? isSelected
       ? "border-primary border-2 hover:border-primary/80"
-      : "hover:border-2 hover:border-blue-500"
+      : "hover:border-2 hover:border-primary"
     : isCarted
       ? "border-emerald-500 border-2 hover:border-emerald-600"
-      : "hover:border-2 hover:border-blue-500";
+      : "hover:border-2 hover:border-primary";
 
   // 카드 헤더 배경: 장바구니 목록 모드에서는 선택 상태, 기본 모드에서는 담기 상태 기준
   const headerBgClass = isCartListMode
@@ -1385,7 +1385,7 @@ function FieldRow({
       </span>
       <MarqueeText
         className="font-medium"
-        style={{ color: field.textColor || (isFormula ? "#ea580c" : "#000000") }}
+        style={{ color: field.textColor || (isFormula ? "#ea580c" : "hsl(var(--foreground))") }}
       >
         {displayValue}
       </MarqueeText>
diff --git a/frontend/lib/registry/pop-components/pop-field/PopFieldConfig.tsx b/frontend/lib/registry/pop-components/pop-field/PopFieldConfig.tsx
index 8b5beb84..3b51667f 100644
--- a/frontend/lib/registry/pop-components/pop-field/PopFieldConfig.tsx
+++ b/frontend/lib/registry/pop-components/pop-field/PopFieldConfig.tsx
@@ -1633,7 +1633,7 @@ function FieldItemEditor({
             [{FIELD_INPUT_TYPE_LABELS[field.inputType]}]
           </span>
           {field.readOnly && (
-            <span className="ml-1 text-orange-500">(읽기전용)</span>
+            <span className="ml-1 text-amber-500">(읽기전용)</span>
           )}
         </span>
         <Button
@@ -2247,21 +2247,21 @@ function LinkedFiltersEditor({
 const BG_COLOR_OPTIONS = [
   { value: "__default__", label: "기본" },
   { value: "bg-emerald-50", label: "초록" },
-  { value: "bg-blue-50", label: "파랑" },
+  { value: "bg-primary/10", label: "파랑" },
   { value: "bg-amber-50", label: "노랑" },
   { value: "bg-rose-50", label: "빨강" },
   { value: "bg-purple-50", label: "보라" },
-  { value: "bg-gray-50", label: "회색" },
+  { value: "bg-muted", label: "회색" },
 ] as const;
 
 const BORDER_COLOR_OPTIONS = [
   { value: "__default__", label: "기본" },
   { value: "border-emerald-200", label: "초록" },
-  { value: "border-blue-200", label: "파랑" },
+  { value: "border-primary/20", label: "파랑" },
   { value: "border-amber-200", label: "노랑" },
   { value: "border-rose-200", label: "빨강" },
   { value: "border-purple-200", label: "보라" },
-  { value: "border-gray-200", label: "회색" },
+  { value: "border-border", label: "회색" },
 ] as const;
 
 function AppearanceEditor({
diff --git a/frontend/lib/registry/pop-components/pop-icon.tsx b/frontend/lib/registry/pop-components/pop-icon.tsx
index 3ecb9d49..ff04ab7b 100644
--- a/frontend/lib/registry/pop-components/pop-icon.tsx
+++ b/frontend/lib/registry/pop-components/pop-icon.tsx
@@ -125,9 +125,9 @@ function SectionDivider({ label }: { label: string }) {
   return (
     <div className="pt-3 pb-1">
       <div className="flex items-center gap-2">
-        <div className="h-px flex-1 bg-gray-300" />
-        <span className="text-xs font-medium text-gray-500">{label}</span>
-        <div className="h-px flex-1 bg-gray-300" />
+        <div className="h-px flex-1 bg-muted/60" />
+        <span className="text-xs font-medium text-muted-foreground">{label}</span>
+        <div className="h-px flex-1 bg-muted/60" />
       </div>
     </div>
   );
@@ -426,7 +426,7 @@ export function PopIconComponent({
         <span 
           className={cn("truncate max-w-full", !isLabelRight && "mt-1")}
           style={{ 
-            color: config?.labelColor || "#000000",
+            color: config?.labelColor || "hsl(var(--foreground))",
             fontSize: config?.labelFontSize || 12,
           }}
         >
@@ -445,7 +445,7 @@ export function PopIconComponent({
                 : "외부 URL로 이동합니다."
               }
               <br />
-              <span className="text-red-600 font-medium">
+              <span className="text-destructive font-medium">
                 ※ 저장하지 않은 변경사항은 사라집니다.
               </span>
             </AlertDialogDescription>
@@ -555,7 +555,7 @@ function QuickSelectGrid({ config, onUpdate }: PopIconConfigPanelProps) {
             title={item.label}
           >
             {item.type === "lucide" ? (
-              <DynamicLucideIcon name={item.value} size={18} className="text-gray-700" />
+              <DynamicLucideIcon name={item.value} size={18} className="text-foreground" />
             ) : (
               <span className="text-base">{item.value}</span>
             )}
@@ -593,7 +593,7 @@ function EmojiInput({ config, onUpdate }: PopIconConfigPanelProps) {
         className="h-8 text-xs"
         maxLength={4}
       />
-      <p className="text-xs text-gray-500">
+      <p className="text-xs text-muted-foreground">
         Windows: Win + . / Mac: Ctrl + Cmd + Space
       </p>
       
@@ -743,7 +743,7 @@ function ImageUpload({ config, onUpdate }: PopIconConfigPanelProps) {
       </div>
 
       {/* 에러 메시지 */}
-      {error && <p className="text-xs text-red-500">{error}</p>}
+      {error && <p className="text-xs text-destructive">{error}</p>}
 
       {/* 또는 URL 직접 입력 */}
       <Input
@@ -766,7 +766,7 @@ function ImageUpload({ config, onUpdate }: PopIconConfigPanelProps) {
       {/* 현재 이미지 미리보기 + 크기 조절 */}
       {hasImage && (
         <div className="mt-2 space-y-2">
-          <div className="relative p-2 border rounded bg-gray-50">
+          <div className="relative p-2 border rounded bg-muted">
             {/* eslint-disable-next-line @next/next/no-img-element */}
             <img
               src={previewUrl}
@@ -774,7 +774,7 @@ function ImageUpload({ config, onUpdate }: PopIconConfigPanelProps) {
               className="max-h-20 mx-auto object-contain"
             />
             {isTemp && (
-              <span className="absolute top-1 right-1 text-[10px] bg-yellow-100 text-yellow-700 px-1.5 py-0.5 rounded">
+              <span className="absolute top-1 right-1 text-[10px] bg-amber-100 text-yellow-700 px-1.5 py-0.5 rounded">
                 임시
               </span>
             )}
@@ -795,7 +795,7 @@ function ImageUpload({ config, onUpdate }: PopIconConfigPanelProps) {
             className="w-full"
           />
           {isTemp && (
-            <p className="text-xs text-yellow-600">
+            <p className="text-xs text-amber-600">
               ※ 화면 저장 시 서버에 업로드됩니다.
             </p>
           )}
diff --git a/frontend/lib/registry/pop-components/pop-search/PopSearchComponent.tsx b/frontend/lib/registry/pop-components/pop-search/PopSearchComponent.tsx
index 380cc103..6813e373 100644
--- a/frontend/lib/registry/pop-components/pop-search/PopSearchComponent.tsx
+++ b/frontend/lib/registry/pop-components/pop-search/PopSearchComponent.tsx
@@ -340,9 +340,9 @@ function matchSearchMode(cellValue: string, term: string, mode: ModalSearchMode)
 // ========================================
 
 const ICON_COLORS = [
-  "bg-red-500", "bg-orange-500", "bg-amber-500", "bg-yellow-500",
-  "bg-lime-500", "bg-green-500", "bg-emerald-500", "bg-teal-500",
-  "bg-cyan-500", "bg-sky-500", "bg-blue-500", "bg-indigo-500",
+  "bg-destructive", "bg-amber-500", "bg-amber-500", "bg-amber-500",
+  "bg-lime-500", "bg-emerald-500", "bg-emerald-500", "bg-teal-500",
+  "bg-cyan-500", "bg-sky-500", "bg-primary", "bg-primary",
   "bg-violet-500", "bg-purple-500", "bg-fuchsia-500", "bg-pink-500",
 ];
 
diff --git a/frontend/lib/registry/pop-components/pop-text.tsx b/frontend/lib/registry/pop-components/pop-text.tsx
index 969a8a13..bfbe5e06 100644
--- a/frontend/lib/registry/pop-components/pop-text.tsx
+++ b/frontend/lib/registry/pop-components/pop-text.tsx
@@ -187,7 +187,7 @@ function DesignModePreview({
       // 이미지 미리보기
       if (!config?.imageUrl) {
         return (
-          <div className="flex h-full w-full items-center justify-center border border-dashed border-gray-300 text-[10px] text-gray-400">
+          <div className="flex h-full w-full items-center justify-center border border-dashed border-input text-[10px] text-muted-foreground/70">
             이미지 URL 없음
           </div>
         );
@@ -256,7 +256,7 @@ function DateTimePreview({ config }: { config?: PopTextConfig }) {
   return (
     <span
       className={cn(
-        "font-mono text-gray-600",
+        "font-mono text-muted-foreground",
         FONT_SIZE_CLASSES[config?.fontSize || "base"]
       )}
     >
@@ -305,7 +305,7 @@ function DateTimeDisplay({ config }: { config?: PopTextConfig }) {
 function ImageDisplay({ config }: { config?: PopTextConfig }) {
   if (!config?.imageUrl) {
     return (
-      <div className="flex h-full items-center justify-center border-2 border-dashed text-xs text-gray-400">
+      <div className="flex h-full items-center justify-center border-2 border-dashed text-xs text-muted-foreground/70">
         이미지 URL 필요
       </div>
     );
@@ -399,9 +399,9 @@ function SectionDivider({ label }: { label: string }) {
   return (
     <div className="pt-3 pb-1">
       <div className="flex items-center gap-2">
-        <div className="h-px flex-1 bg-gray-300" />
-        <span className="text-xs font-medium text-gray-500">{label}</span>
-        <div className="h-px flex-1 bg-gray-300" />
+        <div className="h-px flex-1 bg-muted/60" />
+        <span className="text-xs font-medium text-muted-foreground">{label}</span>
+        <div className="h-px flex-1 bg-muted/60" />
       </div>
     </div>
   );
diff --git a/frontend/lib/tabStateCache.ts b/frontend/lib/tabStateCache.ts
new file mode 100644
index 00000000..bb33de3d
--- /dev/null
+++ b/frontend/lib/tabStateCache.ts
@@ -0,0 +1,428 @@
+/**
+ * 탭별 상태를 sessionStorage에 캐싱/복원하는 엔진.
+ * F5 새로고침 시 비활성 탭의 데이터를 보존한다.
+ *
+ * 캐싱 키 구조: `tab-cache-{tabId}`
+ * 값: JSON 직렬화된 TabCacheData
+ */
+
+const CACHE_PREFIX = "tab-cache-";
+
+// --- 캐싱할 상태 구조 ---
+
+export interface FormFieldSnapshot {
+  idx: number;
+  tag: string;
+  type: string;
+  name: string;
+  id: string;
+  value?: string;
+  checked?: boolean;
+}
+
+/** 개별 스크롤 요소의 위치 스냅샷 (DOM 경로 기반) */
+export interface ScrollSnapshot {
+  /** 탭 컨테이너 기준 자식 인덱스 경로 (예: "0/2/1/3") */
+  path: string;
+  top: number;
+  left: number;
+}
+
+export interface TabCacheData {
+  /** DOM 폼 필드 스냅샷 (F5 복원용) */
+  domFormFields?: FormFieldSnapshot[];
+
+  /** 다중 스크롤 위치 (split panel 등 여러 스크롤 영역 지원) */
+  scrollPositions?: ScrollSnapshot[];
+
+  /** 캐싱 시각 */
+  cachedAt: number;
+}
+
+// --- 공개 API ---
+
+/**
+ * 탭 상태를 sessionStorage에 즉시 저장
+ */
+export function saveTabCacheImmediate(tabId: string, data: Partial<Omit<TabCacheData, "cachedAt">>): void {
+  if (typeof window === "undefined") return;
+
+  try {
+    const key = CACHE_PREFIX + tabId;
+    const current = loadTabCache(tabId);
+    const merged: TabCacheData = {
+      ...current,
+      ...data,
+      cachedAt: Date.now(),
+    };
+    sessionStorage.setItem(key, JSON.stringify(merged));
+  } catch (e) {
+    console.warn("[TabCache] 저장 실패:", tabId, e);
+  }
+}
+
+/**
+ * 탭 상태를 sessionStorage에서 로드
+ */
+export function loadTabCache(tabId: string): TabCacheData | null {
+  if (typeof window === "undefined") return null;
+
+  try {
+    const key = CACHE_PREFIX + tabId;
+    const raw = sessionStorage.getItem(key);
+    if (!raw) return null;
+    return JSON.parse(raw) as TabCacheData;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * 특정 탭의 캐시 삭제
+ */
+export function clearTabCache(tabId: string): void {
+  if (typeof window === "undefined") return;
+
+  try {
+    sessionStorage.removeItem(CACHE_PREFIX + tabId);
+  } catch {
+    // ignore
+  }
+}
+
+/**
+ * 모든 탭 캐시 삭제
+ */
+export function clearAllTabCaches(): void {
+  if (typeof window === "undefined") return;
+
+  try {
+    const keysToRemove: string[] = [];
+    for (let i = 0; i < sessionStorage.length; i++) {
+      const key = sessionStorage.key(i);
+      if (key?.startsWith(CACHE_PREFIX)) {
+        keysToRemove.push(key);
+      }
+    }
+    keysToRemove.forEach((key) => sessionStorage.removeItem(key));
+  } catch {
+    // ignore
+  }
+}
+
+// ============================================================
+// DOM 폼 상태 캡처/복원
+// ============================================================
+
+/**
+ * 컨테이너 내의 모든 폼 요소 상태를 스냅샷으로 캡처
+ */
+export function captureFormState(container: HTMLElement | null): FormFieldSnapshot[] | null {
+  if (!container) return null;
+
+  const fields: FormFieldSnapshot[] = [];
+  const elements = container.querySelectorAll<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>(
+    "input, textarea, select",
+  );
+
+  elements.forEach((el, idx) => {
+    const field: FormFieldSnapshot = {
+      idx,
+      tag: el.tagName.toLowerCase(),
+      type: (el as HTMLInputElement).type || "",
+      name: el.name || "",
+      id: el.id || "",
+    };
+
+    if (el instanceof HTMLInputElement) {
+      if (el.type === "checkbox" || el.type === "radio") {
+        field.checked = el.checked;
+      } else if (el.type !== "file" && el.type !== "password") {
+        field.value = el.value;
+      }
+    } else if (el instanceof HTMLTextAreaElement) {
+      field.value = el.value;
+    } else if (el instanceof HTMLSelectElement) {
+      field.value = el.value;
+    }
+
+    fields.push(field);
+  });
+
+  return fields.length > 0 ? fields : null;
+}
+
+/**
+ * 단일 폼 필드에 값을 복원하고 React onChange를 트리거
+ */
+function applyFieldValue(el: Element, field: FormFieldSnapshot): void {
+  if (el instanceof HTMLInputElement) {
+    if (field.type === "checkbox" || field.type === "radio") {
+      if (el.checked !== field.checked) {
+        const setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "checked")?.set;
+        setter?.call(el, field.checked);
+        el.dispatchEvent(new Event("input", { bubbles: true }));
+        el.dispatchEvent(new Event("change", { bubbles: true }));
+      }
+    } else if (field.value !== undefined && el.value !== field.value) {
+      const setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set;
+      setter?.call(el, field.value);
+      el.dispatchEvent(new Event("input", { bubbles: true }));
+      el.dispatchEvent(new Event("change", { bubbles: true }));
+    }
+  } else if (el instanceof HTMLTextAreaElement) {
+    if (field.value !== undefined && el.value !== field.value) {
+      const setter = Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, "value")?.set;
+      setter?.call(el, field.value);
+      el.dispatchEvent(new Event("input", { bubbles: true }));
+      el.dispatchEvent(new Event("change", { bubbles: true }));
+    }
+  } else if (el instanceof HTMLSelectElement) {
+    if (field.value !== undefined && el.value !== field.value) {
+      el.value = field.value;
+      el.dispatchEvent(new Event("change", { bubbles: true }));
+    }
+  }
+}
+
+/**
+ * 컨테이너에서 스냅샷 필드에 해당하는 DOM 요소를 찾는다
+ */
+function findFieldElement(
+  container: HTMLElement,
+  field: FormFieldSnapshot,
+  allElements: NodeListOf<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>,
+): Element | null {
+  // 1순위: id로 검색
+  if (field.id) {
+    try {
+      const el = container.querySelector(`#${CSS.escape(field.id)}`);
+      if (el) return el;
+    } catch {
+      /* ignore */
+    }
+  }
+  // 2순위: name으로 검색 (유일한 경우)
+  if (field.name) {
+    try {
+      const candidates = container.querySelectorAll(`[name="${CSS.escape(field.name)}"]`);
+      if (candidates.length === 1) return candidates[0];
+    } catch {
+      /* ignore */
+    }
+  }
+  // 3순위: 인덱스 + tag/type 일치 검증
+  if (field.idx < allElements.length) {
+    const candidate = allElements[field.idx];
+    if (candidate.tagName.toLowerCase() === field.tag && ((candidate as HTMLInputElement).type || "") === field.type) {
+      return candidate;
+    }
+  }
+  return null;
+}
+
+/**
+ * 캡처한 폼 스냅샷을 DOM에 복원하고 React onChange를 트리거.
+ * 폼 필드가 아직 DOM에 없으면 폴링으로 대기한다.
+ * 반환된 cleanup 함수를 호출하면 대기를 취소할 수 있다.
+ */
+export function restoreFormState(
+  container: HTMLElement | null,
+  fields: FormFieldSnapshot[] | null,
+): (() => void) | undefined {
+  if (!container || !fields || fields.length === 0) return undefined;
+
+  let cleaned = false;
+
+  const cleanup = () => {
+    if (cleaned) return;
+    cleaned = true;
+    clearInterval(pollId);
+    clearTimeout(timeoutId);
+  };
+
+  const tryRestore = (): boolean => {
+    const elements = container.querySelectorAll<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>(
+      "input, textarea, select",
+    );
+    if (elements.length === 0) return false;
+
+    let restoredCount = 0;
+    for (const field of fields) {
+      const el = findFieldElement(container, field, elements);
+      if (el) {
+        applyFieldValue(el, field);
+        restoredCount++;
+      }
+    }
+    return restoredCount > 0;
+  };
+
+  // 즉시 시도
+  if (tryRestore()) return undefined;
+
+  // 다음 프레임에서 재시도
+  requestAnimationFrame(() => {
+    if (cleaned) return;
+    if (tryRestore()) {
+      cleanup();
+      return;
+    }
+  });
+
+  // 폼 필드가 DOM에 나타날 때까지 폴링 (API 데이터 로드 대기)
+  const pollId = setInterval(() => {
+    if (tryRestore()) cleanup();
+  }, 100);
+
+  // 최대 5초 대기 후 포기
+  const timeoutId = setTimeout(() => {
+    tryRestore();
+    cleanup();
+  }, 5000);
+
+  return cleanup;
+}
+
+// ============================================================
+// DOM 경로 기반 스크롤 위치 캡처/복원 (다중 스크롤 영역 지원)
+// ============================================================
+
+/**
+ * 컨테이너 기준 자식 인덱스 경로를 생성한다.
+ * 예: container > div(2번째) > div(1번째) > div(3번째) → "2/1/3"
+ */
+export function getElementPath(element: HTMLElement, container: HTMLElement): string | null {
+  const indices: number[] = [];
+  let current: HTMLElement | null = element;
+
+  while (current && current !== container) {
+    const parent: HTMLElement | null = current.parentElement;
+    if (!parent) return null;
+
+    const children = parent.children;
+    let idx = -1;
+    for (let i = 0; i < children.length; i++) {
+      if (children[i] === current) {
+        idx = i;
+        break;
+      }
+    }
+    if (idx === -1) return null;
+
+    indices.unshift(idx);
+    current = parent;
+  }
+
+  if (current !== container) return null;
+  return indices.join("/");
+}
+
+/**
+ * 경로 문자열로 컨테이너 내의 요소를 찾는다.
+ */
+function findElementByPath(container: HTMLElement, path: string): HTMLElement | null {
+  if (!path) return container;
+
+  const indices = path.split("/").map(Number);
+  let current: HTMLElement = container;
+
+  for (const idx of indices) {
+    if (!current.children || idx >= current.children.length) return null;
+    const child = current.children[idx];
+    if (!(child instanceof HTMLElement)) return null;
+    current = child;
+  }
+
+  return current;
+}
+
+/**
+ * 컨테이너 하위의 모든 스크롤된 요소를 찾아 경로와 함께 캡처한다.
+ * F5 직전 (beforeunload)에 호출 - 활성 탭은 display:block이므로 DOM 값이 정확하다.
+ */
+export function captureAllScrollPositions(container: HTMLElement | null): ScrollSnapshot[] | undefined {
+  if (!container) return undefined;
+
+  const snapshots: ScrollSnapshot[] = [];
+  const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT);
+  let node: Node | null;
+
+  while ((node = walker.nextNode())) {
+    const el = node as HTMLElement;
+    if (el.scrollTop > 0 || el.scrollLeft > 0) {
+      const path = getElementPath(el, container);
+      if (path) {
+        snapshots.push({ path, top: el.scrollTop, left: el.scrollLeft });
+      }
+    }
+  }
+
+  return snapshots.length > 0 ? snapshots : undefined;
+}
+
+/**
+ * 다중 스크롤 위치를 DOM 경로 기반으로 복원한다.
+ * 컨텐츠가 아직 로드되지 않았을 수 있으므로 폴링으로 대기한다.
+ */
+export function restoreAllScrollPositions(
+  container: HTMLElement | null,
+  positions?: ScrollSnapshot[],
+): (() => void) | undefined {
+  if (!container || !positions || positions.length === 0) return undefined;
+
+  let cleaned = false;
+
+  const cleanup = () => {
+    if (cleaned) return;
+    cleaned = true;
+    clearInterval(pollId);
+    clearTimeout(timeoutId);
+  };
+
+  const tryRestore = (): boolean => {
+    let restoredCount = 0;
+
+    for (const pos of positions) {
+      const el = findElementByPath(container, pos.path);
+      if (!el) continue;
+
+      if (el.scrollHeight >= pos.top + el.clientHeight) {
+        el.scrollTop = pos.top;
+        el.scrollLeft = pos.left;
+        restoredCount++;
+      }
+    }
+
+    return restoredCount === positions.length;
+  };
+
+  if (tryRestore()) return undefined;
+
+  requestAnimationFrame(() => {
+    if (cleaned) return;
+    if (tryRestore()) {
+      cleanup();
+      return;
+    }
+  });
+
+  const pollId = setInterval(() => {
+    if (tryRestore()) cleanup();
+  }, 50);
+
+  // 최대 5초 대기 후 강제 복원
+  const timeoutId = setTimeout(() => {
+    for (const pos of positions) {
+      const el = findElementByPath(container, pos.path);
+      if (el) {
+        el.scrollTop = pos.top;
+        el.scrollLeft = pos.left;
+      }
+    }
+    cleanup();
+  }, 5000);
+
+  return cleanup;
+}
+
diff --git a/frontend/lib/utils/buttonActions.ts b/frontend/lib/utils/buttonActions.ts
index 165e796d..0c9b1327 100644
--- a/frontend/lib/utils/buttonActions.ts
+++ b/frontend/lib/utils/buttonActions.ts
@@ -8,6 +8,7 @@ import { DynamicFormApi } from "@/lib/api/dynamicForm";
 import { ImprovedButtonActionExecutor } from "@/lib/utils/improvedButtonActionExecutor";
 import { apiClient } from "@/lib/api/client";
 import type { ExtendedControlContext } from "@/types/control-management";
+import { isColumnRequiredByMeta } from "@/lib/registry/DynamicComponentRenderer";
 
 /**
  * 🔧 formData 내 배열 값을 쉼표 구분 문자열로 변환
@@ -463,13 +464,15 @@ export class ButtonActionExecutor {
           console.warn(`지원되지 않는 액션 타입: ${config.type}`);
           return false;
       }
-    } catch (error) {
+    } catch (error: any) {
       console.error("버튼 액션 실행 오류:", error);
-      showErrorToast(
-        config.errorMessage || `'${config.label || config.type}' 버튼 실행에 실패했습니다`,
-        error,
-        { guidance: "설정을 확인하거나 잠시 후 다시 시도해 주세요." }
-      );
+      const actualMsg =
+        error?.response?.data?.message ||
+        error?.response?.data?.error?.message ||
+        error?.message ||
+        "";
+      const title = actualMsg || config.errorMessage || `'${config.label || config.type}' 실행에 실패했습니다`;
+      toast.error(title);
       return false;
     }
   }
@@ -479,7 +482,7 @@ export class ButtonActionExecutor {
    */
   private static validateRequiredFields(context: ButtonActionContext): { isValid: boolean; missingFields: string[] } {
     const missingFields: string[] = [];
-    const { formData, allComponents } = context;
+    const { formData, allComponents, tableName } = context;
 
     if (!allComponents || allComponents.length === 0) {
       console.log("⚠️ [validateRequiredFields] allComponents 없음 - 검증 스킵");
@@ -487,18 +490,20 @@ export class ButtonActionExecutor {
     }
 
     allComponents.forEach((component: any) => {
-      // 컴포넌트의 required 속성 확인 (여러 위치에서 체크)
-      const isRequired =
+      const columnName = component.columnName || component.style?.columnName;
+
+      // 수동 required 속성 + NOT NULL 메타데이터 기반 필수 여부 통합 체크
+      const manualRequired =
         component.required === true ||
         component.style?.required === true ||
         component.componentConfig?.required === true;
+      const notNullRequired = isColumnRequiredByMeta(tableName, columnName);
+      const isRequired = manualRequired || notNullRequired;
 
-      const columnName = component.columnName || component.style?.columnName;
       const label = component.label || component.style?.label || columnName;
 
       if (isRequired && columnName) {
         const value = formData[columnName];
-        // 값이 비어있는지 확인 (null, undefined, 빈 문자열, 공백만 있는 문자열)
         if (value === null || value === undefined || (typeof value === "string" && value.trim() === "")) {
           missingFields.push(label || columnName);
         }
@@ -601,22 +606,15 @@ export class ButtonActionExecutor {
       try {
         await onSave();
         return true;
-      } catch (error) {
+      } catch (error: any) {
         console.error("❌ [handleSave] onSave 콜백 실행 오류:", error);
-        throw error;
-      }
-    }
-
-    // 🆕 EditModal 등에서 전달된 onSave 콜백이 있으면 우선 사용
-    // 단, _tableSection_ 데이터가 있으면 건너뛰기 (handleUniversalFormModalTableSectionSave가 처리)
-    // EditModal이 내부에서 직접 repeaterSave 이벤트를 발행하고 완료를 기다림
-    if (onSave && !hasTableSectionData) {
-      try {
-        await onSave();
-        return true;
-      } catch (error) {
-        console.error("❌ [handleSave] onSave 콜백 실행 오류:", error);
-        throw error;
+        const msg =
+          error?.response?.data?.message ||
+          error?.response?.data?.error?.message ||
+          error?.message ||
+          "저장에 실패했습니다.";
+        toast.error(msg);
+        return false;
       }
     }
 
@@ -1737,7 +1735,12 @@ export class ButtonActionExecutor {
         }
 
         if (!saveResult.success) {
-          throw new Error(saveResult.message || "저장에 실패했습니다.");
+          const errorMsg =
+            saveResult.message ||
+            saveResult.error?.message ||
+            "저장에 실패했습니다.";
+          toast.error(errorMsg);
+          return false;
         }
 
         // 🔥 저장 성공 후 연결된 제어 실행 (dataflowTiming이 'after'인 경우)
@@ -1926,9 +1929,15 @@ export class ButtonActionExecutor {
       window.dispatchEvent(new CustomEvent("saveSuccessInModal"));
 
       return true;
-    } catch (error) {
+    } catch (error: any) {
       console.error("저장 오류:", error);
-      throw error; // 에러를 다시 던져서 컴포넌트에서 처리하도록 함
+      const msg =
+        error?.response?.data?.message ||
+        error?.response?.data?.error?.message ||
+        error?.message ||
+        "저장에 실패했습니다.";
+      toast.error(msg);
+      return false;
     }
   }
 
diff --git a/frontend/lib/utils/darkModeColor.ts b/frontend/lib/utils/darkModeColor.ts
new file mode 100644
index 00000000..efbc645f
--- /dev/null
+++ b/frontend/lib/utils/darkModeColor.ts
@@ -0,0 +1,18 @@
+/**
+ * 다크모드 대응 색상 유틸리티
+ * 화면 디자이너에서 기본값으로 저장된 어두운 색상을 감지하여
+ * 다크모드에서 자동으로 CSS 변수(foreground)로 대체
+ */
+
+const DEFAULT_DARK_COLORS = new Set([
+  "#212121", "#000000", "#333333", "#333", "#000",
+  "black", "#111111", "#1a1a1a", "#64748b",
+]);
+
+export const isDefaultDarkLabelColor = (color?: string): boolean => {
+  if (!color) return true;
+  return DEFAULT_DARK_COLORS.has(color.toLowerCase().trim());
+};
+
+export const getAdaptiveLabelColor = (labelColor?: string): string =>
+  isDefaultDarkLabelColor(labelColor) ? "hsl(var(--foreground))" : labelColor!;
diff --git a/frontend/lib/utils/formValidation.ts b/frontend/lib/utils/formValidation.ts
index c521455c..48cb60e1 100644
--- a/frontend/lib/utils/formValidation.ts
+++ b/frontend/lib/utils/formValidation.ts
@@ -5,6 +5,7 @@
 
 import { WebType, DynamicWebType, isValidWebType, normalizeWebType } from "@/types/v2-web-types";
 import { ColumnInfo, ComponentData, WidgetComponent } from "@/types/screen";
+import { isColumnRequiredByMeta } from "@/lib/registry/DynamicComponentRenderer";
 
 // 검증 결과 타입
 export interface ValidationResult {
@@ -78,8 +79,8 @@ export const validateFormData = async (
       );
     }
 
-    // 2. 필수 필드 검증
-    const requiredValidation = validateRequiredFields(formData, components);
+    // 2. 필수 필드 검증 (NOT NULL 메타데이터 포함)
+    const requiredValidation = validateRequiredFields(formData, components, tableName);
     errors.push(...requiredValidation);
 
     // 3. 데이터 타입 검증 및 변환
@@ -192,14 +193,17 @@ export const validateFormSchema = (
 export const validateRequiredFields = (
   formData: Record<string, any>,
   components: ComponentData[],
+  tableName?: string,
 ): ValidationError[] => {
   const errors: ValidationError[] = [];
   const widgetComponents = components.filter((c) => c.type === "widget") as WidgetComponent[];
 
   for (const component of widgetComponents) {
-    if (!component.required) continue;
-
     const fieldName = component.columnName || component.id;
+    // 수동 required + NOT NULL 메타데이터 기반 통합 체크
+    const isRequired = component.required || isColumnRequiredByMeta(tableName, fieldName);
+    if (!isRequired) continue;
+
     const value = formData[fieldName];
 
     if (
@@ -661,3 +665,4 @@ const calculateStringSimilarity = (str1: string, str2: string): number => {
 
   return maxLen === 0 ? 1 : (maxLen - distance) / maxLen;
 };
+
diff --git a/frontend/lib/utils/getComponentConfigPanel.tsx b/frontend/lib/utils/getComponentConfigPanel.tsx
index 10e06d83..5c2e9a61 100644
--- a/frontend/lib/utils/getComponentConfigPanel.tsx
+++ b/frontend/lib/utils/getComponentConfigPanel.tsx
@@ -395,22 +395,22 @@ export const DynamicComponentConfigPanel: React.FC<ComponentConfigPanelProps> =
 
   if (loading) {
     return (
-      <div className="rounded-md border border-dashed border-gray-300 bg-gray-50 p-4 w-full">
-        <div className="flex items-center gap-2 text-gray-600">
+      <div className="rounded-md border border-dashed border-input bg-muted p-4 w-full">
+        <div className="flex items-center gap-2 text-muted-foreground">
           <span className="text-sm font-medium">⏳ 로딩 중...</span>
         </div>
-        <p className="mt-1 text-xs text-gray-500">설정 패널을 불러오는 중입니다.</p>
+        <p className="mt-1 text-xs text-muted-foreground">설정 패널을 불러오는 중입니다.</p>
       </div>
     );
   }
 
   if (error) {
     return (
-      <div className="rounded-md border border-dashed border-red-300 bg-red-50 p-4 w-full">
-        <div className="flex items-center gap-2 text-red-600">
+      <div className="rounded-md border border-dashed border-destructive/30 bg-destructive/10 p-4 w-full">
+        <div className="flex items-center gap-2 text-destructive">
           <span className="text-sm font-medium">⚠️ 로드 실패</span>
         </div>
-        <p className="mt-1 text-xs text-red-500">설정 패널을 불러올 수 없습니다: {error}</p>
+        <p className="mt-1 text-xs text-destructive">설정 패널을 불러올 수 없습니다: {error}</p>
       </div>
     );
   }
@@ -418,11 +418,11 @@ export const DynamicComponentConfigPanel: React.FC<ComponentConfigPanelProps> =
   if (!ConfigPanelComponent) {
     console.warn(`⚠️ DynamicComponentConfigPanel: ${componentId} ConfigPanelComponent가 null`);
     return (
-      <div className="rounded-md border border-dashed border-yellow-300 bg-yellow-50 p-4 w-full">
-        <div className="flex items-center gap-2 text-yellow-600">
+      <div className="rounded-md border border-dashed border-amber-300 bg-amber-50 p-4 w-full">
+        <div className="flex items-center gap-2 text-amber-600">
           <span className="text-sm font-medium">⚠️ 설정 패널 없음</span>
         </div>
-        <p className="mt-1 text-xs text-yellow-500">컴포넌트 "{componentId}"에 대한 설정 패널이 없습니다.</p>
+        <p className="mt-1 text-xs text-amber-500">컴포넌트 "{componentId}"에 대한 설정 패널이 없습니다.</p>
       </div>
     );
   }
diff --git a/frontend/lib/v2-core/services/ScheduleConfirmDialog.tsx b/frontend/lib/v2-core/services/ScheduleConfirmDialog.tsx
index 75da02a5..302f5ffa 100644
--- a/frontend/lib/v2-core/services/ScheduleConfirmDialog.tsx
+++ b/frontend/lib/v2-core/services/ScheduleConfirmDialog.tsx
@@ -58,23 +58,23 @@ export function ScheduleConfirmDialog({
 
         {/* 요약 정보 */}
         <div className="grid grid-cols-3 gap-3 py-4">
-          <div className="flex flex-col items-center rounded-lg border bg-green-50 p-3 dark:bg-green-900/20">
-            <Plus className="mb-1 h-5 w-5 text-green-600" />
-            <span className="text-2xl font-bold text-green-600">
+          <div className="flex flex-col items-center rounded-lg border bg-emerald-50 p-3 dark:bg-emerald-900/20">
+            <Plus className="mb-1 h-5 w-5 text-emerald-600" />
+            <span className="text-2xl font-bold text-emerald-600">
               {summary.createCount}
             </span>
             <span className="text-xs text-muted-foreground">생성</span>
           </div>
-          <div className="flex flex-col items-center rounded-lg border bg-red-50 p-3 dark:bg-red-900/20">
-            <Trash2 className="mb-1 h-5 w-5 text-red-600" />
-            <span className="text-2xl font-bold text-red-600">
+          <div className="flex flex-col items-center rounded-lg border bg-destructive/10 p-3 dark:bg-red-900/20">
+            <Trash2 className="mb-1 h-5 w-5 text-destructive" />
+            <span className="text-2xl font-bold text-destructive">
               {summary.deleteCount}
             </span>
             <span className="text-xs text-muted-foreground">삭제</span>
           </div>
-          <div className="flex flex-col items-center rounded-lg border bg-blue-50 p-3 dark:bg-blue-900/20">
-            <RefreshCw className="mb-1 h-5 w-5 text-blue-600" />
-            <span className="text-2xl font-bold text-blue-600">
+          <div className="flex flex-col items-center rounded-lg border bg-primary/10 p-3 dark:bg-primary/20/20">
+            <RefreshCw className="mb-1 h-5 w-5 text-primary" />
+            <span className="text-2xl font-bold text-primary">
               {summary.updateCount}
             </span>
             <span className="text-xs text-muted-foreground">수정</span>
@@ -88,7 +88,7 @@ export function ScheduleConfirmDialog({
             {toCreate.length > 0 && (
               <div>
                 <h4 className="mb-2 flex items-center gap-2 text-sm font-medium">
-                  <Badge variant="default" className="bg-green-600">
+                  <Badge variant="default" className="bg-emerald-600">
                     생성
                   </Badge>
                   {toCreate.length}건
@@ -123,7 +123,7 @@ export function ScheduleConfirmDialog({
                   <Badge variant="destructive">삭제</Badge>
                   {toDelete.length}건
                 </h4>
-                <div className="space-y-1 rounded-md border border-red-200 bg-red-50/50 p-2 dark:border-red-800 dark:bg-red-900/10">
+                <div className="space-y-1 rounded-md border border-destructive/20 bg-destructive/10/50 p-2 dark:border-red-800 dark:bg-red-900/10">
                   {toDelete.slice(0, 5).map((item, index) => (
                     <div
                       key={index}
@@ -153,7 +153,7 @@ export function ScheduleConfirmDialog({
                   <Badge variant="secondary">수정</Badge>
                   {toUpdate.length}건
                 </h4>
-                <div className="space-y-1 rounded-md border border-blue-200 bg-blue-50/50 p-2 dark:border-blue-800 dark:bg-blue-900/10">
+                <div className="space-y-1 rounded-md border border-primary/20 bg-primary/10/50 p-2 dark:border-primary/30 dark:bg-primary/20/10">
                   {toUpdate.slice(0, 5).map((item, index) => (
                     <div
                       key={index}
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 01edd32d..f38af595 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -71,7 +71,9 @@
         "lucide-react": "^0.525.0",
         "mammoth": "^1.11.0",
         "next": "^15.4.8",
+        "next-themes": "^0.4.6",
         "qrcode": "^1.5.4",
+        "radix-ui": "^1.4.3",
         "react": "19.1.0",
         "react-day-picker": "^9.11.1",
         "react-dnd": "^16.0.1",
@@ -94,7 +96,8 @@
         "three": "^0.180.0",
         "uuid": "^13.0.0",
         "xlsx": "^0.18.5",
-        "zod": "^4.1.5"
+        "zod": "^4.1.5",
+        "zustand": "^5.0.11"
       },
       "devDependencies": {
         "@eslint/eslintrc": "^3",
@@ -1491,6 +1494,29 @@
       "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==",
       "license": "MIT"
     },
+    "node_modules/@radix-ui/react-accessible-icon": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-accessible-icon/-/react-accessible-icon-1.1.7.tgz",
+      "integrity": "sha512-XM+E4WXl0OqUJFovy6GjmxxFyx9opfCAIUku4dlKRd5YEPqt4kALOkQOp0Of6reHuUkJuiPBEc5k0o4z4lTC8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-visually-hidden": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-accordion": {
       "version": "1.2.12",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-accordion/-/react-accordion-1.2.12.tgz",
@@ -1573,6 +1599,29 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-aspect-ratio": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-aspect-ratio/-/react-aspect-ratio-1.1.7.tgz",
+      "integrity": "sha512-Yq6lvO9HQyPwev1onK1daHCHqXVLzPhSVjmsNjCa2Zcxy2f7uJD2itDtxknv6FzAKCwD1qQkeVDmX/cev13n/g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-avatar": {
       "version": "1.1.10",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-avatar/-/react-avatar-1.1.10.tgz",
@@ -1891,6 +1940,65 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-form": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-form/-/react-form-0.1.8.tgz",
+      "integrity": "sha512-QM70k4Zwjttifr5a4sZFts9fn8FzHYvQ5PiB19O2HsYibaHSVt9fH9rzB0XZo/YcM+b7t/p7lYCT/F5eOeF5yQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-label": "2.1.7",
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-hover-card": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-hover-card/-/react-hover-card-1.1.15.tgz",
+      "integrity": "sha512-qgTkjNT1CfKMoP0rcasmlH2r1DAiYicWsDsufxl940sT2wHNEWWv6FMWIQXWhVdmC1d/HYfbhQx60KYyAtKxjg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-popper": "1.2.8",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-id": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.1.tgz",
@@ -1972,6 +2080,38 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-menubar": {
+      "version": "1.1.16",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-menubar/-/react-menubar-1.1.16.tgz",
+      "integrity": "sha512-EB1FktTz5xRRi2Er974AUQZWg2yVBb1yjip38/lgwtCVRd3a+maUoGHN/xs9Yv8SY8QwbSEb+YrxGadVWbEutA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-menu": "2.1.16",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.11",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-navigation-menu": {
       "version": "1.2.14",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-navigation-menu/-/react-navigation-menu-1.2.14.tgz",
@@ -2008,6 +2148,70 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-one-time-password-field": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-one-time-password-field/-/react-one-time-password-field-0.1.8.tgz",
+      "integrity": "sha512-ycS4rbwURavDPVjCb5iS3aG4lURFDILi6sKI/WITUMZ13gMmn/xGjpLoqBAalhJaDk8I3UbCM5GzKHrnzwHbvg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.1",
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.11",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-effect-event": "0.0.2",
+        "@radix-ui/react-use-is-hydrated": "0.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-password-toggle-field": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-password-toggle-field/-/react-password-toggle-field-0.1.3.tgz",
+      "integrity": "sha512-/UuCrDBWravcaMix4TdT+qlNdVwOM1Nck9kWx/vafXsdfj1ChfhOdfi3cy9SGBpWgTXwYCuboT/oYpJy3clqfw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-effect-event": "0.0.2",
+        "@radix-ui/react-use-is-hydrated": "0.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-popover": {
       "version": "1.1.15",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.1.15.tgz",
@@ -2332,6 +2536,39 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-slider": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slider/-/react-slider-1.3.6.tgz",
+      "integrity": "sha512-JPYb1GuM1bxfjMRlNLE+BcmBC8onfCi60Blk7OBqi2MLTFdS+8401U4uFjnwkOr49BLmXxLC6JHkvAsx5OJvHw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.1",
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-slot": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
@@ -2409,6 +2646,157 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-toast": {
+      "version": "1.2.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toast/-/react-toast-1.2.15.tgz",
+      "integrity": "sha512-3OSz3TacUWy4WtOXV38DggwxoqJK4+eDkNMl5Z/MJZaoUPaP4/9lf81xXMe1I2ReTAptverZUpbPY4wWwWyL5g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-visually-hidden": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle": {
+      "version": "1.1.10",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle/-/react-toggle-1.1.10.tgz",
+      "integrity": "sha512-lS1odchhFTeZv3xwHH31YPObmJn8gOg7Lq12inrr0+BH/l3Tsq32VfjqH1oh80ARM3mlkfMic15n0kg4sD1poQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle-group": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle-group/-/react-toggle-group-1.1.11.tgz",
+      "integrity": "sha512-5umnS0T8JQzQT6HbPyO7Hh9dgd82NmS36DQr+X/YJ9ctFNCiiQd6IJAYYZ33LUwm8M+taCz5t2ui29fHZc4Y6Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.11",
+        "@radix-ui/react-toggle": "1.1.10",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toolbar": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toolbar/-/react-toolbar-1.1.11.tgz",
+      "integrity": "sha512-4ol06/1bLoFu1nwUqzdD4Y5RZ9oDdKeiHIsntug54Hcr1pgaHiPqHFEaXI1IFP/EsOfROQZ8Mig9VTIRza6Tjg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.11",
+        "@radix-ui/react-separator": "1.1.7",
+        "@radix-ui/react-toggle-group": "1.1.11"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.2.8.tgz",
+      "integrity": "sha512-tY7sVt1yL9ozIxvmbtN5qtmH2krXcBCfjEiCgKGLqunJHvgvZG2Pcl2oQ3kbcZARb1BGEHdkLzcYGO8ynVlieg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-popper": "1.2.8",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-visually-hidden": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-callback-ref": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz",
@@ -12087,6 +12475,16 @@
         }
       }
     },
+    "node_modules/next-themes": {
+      "version": "0.4.6",
+      "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.6.tgz",
+      "integrity": "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc"
+      }
+    },
     "node_modules/next/node_modules/nanoid": {
       "version": "3.3.11",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
@@ -13126,6 +13524,83 @@
       "integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw==",
       "license": "ISC"
     },
+    "node_modules/radix-ui": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/radix-ui/-/radix-ui-1.4.3.tgz",
+      "integrity": "sha512-aWizCQiyeAenIdUbqEpXgRA1ya65P13NKn/W8rWkcN0OPkRDxdBVLWnIEDsS2RpwCK2nobI7oMUSmexzTDyAmA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-accessible-icon": "1.1.7",
+        "@radix-ui/react-accordion": "1.2.12",
+        "@radix-ui/react-alert-dialog": "1.1.15",
+        "@radix-ui/react-arrow": "1.1.7",
+        "@radix-ui/react-aspect-ratio": "1.1.7",
+        "@radix-ui/react-avatar": "1.1.10",
+        "@radix-ui/react-checkbox": "1.3.3",
+        "@radix-ui/react-collapsible": "1.1.12",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-context-menu": "2.2.16",
+        "@radix-ui/react-dialog": "1.1.15",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-dropdown-menu": "2.1.16",
+        "@radix-ui/react-focus-guards": "1.1.3",
+        "@radix-ui/react-focus-scope": "1.1.7",
+        "@radix-ui/react-form": "0.1.8",
+        "@radix-ui/react-hover-card": "1.1.15",
+        "@radix-ui/react-label": "2.1.7",
+        "@radix-ui/react-menu": "2.1.16",
+        "@radix-ui/react-menubar": "1.1.16",
+        "@radix-ui/react-navigation-menu": "1.2.14",
+        "@radix-ui/react-one-time-password-field": "0.1.8",
+        "@radix-ui/react-password-toggle-field": "0.1.3",
+        "@radix-ui/react-popover": "1.1.15",
+        "@radix-ui/react-popper": "1.2.8",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-progress": "1.1.7",
+        "@radix-ui/react-radio-group": "1.3.8",
+        "@radix-ui/react-roving-focus": "1.1.11",
+        "@radix-ui/react-scroll-area": "1.2.10",
+        "@radix-ui/react-select": "2.2.6",
+        "@radix-ui/react-separator": "1.1.7",
+        "@radix-ui/react-slider": "1.3.6",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-switch": "1.2.6",
+        "@radix-ui/react-tabs": "1.1.13",
+        "@radix-ui/react-toast": "1.2.15",
+        "@radix-ui/react-toggle": "1.1.10",
+        "@radix-ui/react-toggle-group": "1.1.11",
+        "@radix-ui/react-toolbar": "1.1.11",
+        "@radix-ui/react-tooltip": "1.2.8",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-effect-event": "0.0.2",
+        "@radix-ui/react-use-escape-keydown": "1.1.1",
+        "@radix-ui/react-use-is-hydrated": "0.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1",
+        "@radix-ui/react-visually-hidden": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/raf": {
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
@@ -15843,9 +16318,9 @@
       }
     },
     "node_modules/zustand": {
-      "version": "5.0.8",
-      "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.8.tgz",
-      "integrity": "sha512-gyPKpIaxY9XcO2vSMrLbiER7QMAMGOQZVRdJ6Zi782jkbzZygq5GI9nG8g+sMgitRtndwaBSl7uiqC49o1SSiw==",
+      "version": "5.0.11",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.11.tgz",
+      "integrity": "sha512-fdZY+dk7zn/vbWNCYmzZULHRrss0jx5pPFiOuMZ/5HJN6Yv3u+1Wswy/4MpZEkEGhtNH+pwxZB8OKgUBPzYAGg==",
       "license": "MIT",
       "engines": {
         "node": ">=12.20.0"
diff --git a/frontend/package.json b/frontend/package.json
index 2de7c057..81de41a1 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -80,7 +80,9 @@
     "lucide-react": "^0.525.0",
     "mammoth": "^1.11.0",
     "next": "^15.4.8",
+    "next-themes": "^0.4.6",
     "qrcode": "^1.5.4",
+    "radix-ui": "^1.4.3",
     "react": "19.1.0",
     "react-day-picker": "^9.11.1",
     "react-dnd": "^16.0.1",
@@ -103,7 +105,8 @@
     "three": "^0.180.0",
     "uuid": "^13.0.0",
     "xlsx": "^0.18.5",
-    "zod": "^4.1.5"
+    "zod": "^4.1.5",
+    "zustand": "^5.0.11"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
diff --git a/frontend/scripts/browser-verification.ts b/frontend/scripts/browser-verification.ts
new file mode 100644
index 00000000..086fbb79
--- /dev/null
+++ b/frontend/scripts/browser-verification.ts
@@ -0,0 +1,111 @@
+/**
+ * 브라우저 검증 스크립트
+ * 1. 로그인 페이지 접속
+ * 2. 로그인
+ * 3. /screens/29 접속
+ * 4. 화면 렌더링 검증 (버튼, 테이블, 검색 필터)
+ */
+
+import { chromium } from "playwright";
+import * as path from "path";
+
+const BASE_URL = "http://localhost:9771";
+const SCREENSHOT_DIR = path.join(__dirname, "../verification-screenshots");
+
+async function main() {
+  const browser = await chromium.launch({ headless: true });
+  const context = await browser.newContext({ viewport: { width: 1280, height: 800 } });
+  const page = await context.newPage();
+
+  const results: { step: string; success: boolean; message?: string }[] = [];
+
+  try {
+    // Step 1: 로그인 페이지 접속
+    console.log("Step 1: 로그인 페이지 접속...");
+    await page.goto(`${BASE_URL}/login`, { waitUntil: "networkidle", timeout: 10000 });
+    await page.screenshot({ path: path.join(SCREENSHOT_DIR, "01-login-page.png"), fullPage: true });
+    results.push({ step: "1. 로그인 페이지 접속", success: true });
+
+    // Step 2: 로그인
+    console.log("Step 2: 로그인...");
+    await page.fill('#userId', "wace");
+    await page.fill('#password', "qlalfqjsgh11");
+    await page.screenshot({ path: path.join(SCREENSHOT_DIR, "02-login-filled.png"), fullPage: true });
+
+    const loginButton = page.locator('button[type="submit"]').first();
+    await loginButton.click();
+    await page.waitForURL((url) => !url.pathname.includes("/login") || url.pathname === "/", { timeout: 10000 }).catch(() => {});
+    await page.waitForTimeout(2000);
+
+    const currentUrl = page.url();
+    if (currentUrl.includes("/login") && !currentUrl.includes("/screens")) {
+      await page.screenshot({ path: path.join(SCREENSHOT_DIR, "02-login-result.png"), fullPage: true });
+      const errorText = await page.locator('[role="alert"], .error, .text-destructive, [class*="error"]').first().textContent().catch(() => "");
+      results.push({ step: "2. 로그인", success: false, message: errorText || "로그인 실패 - 여전히 로그인 페이지에 있음" });
+    } else {
+      results.push({ step: "2. 로그인", success: true });
+    }
+
+    // Step 3: /screens/29 접속
+    console.log("Step 3: /screens/29 접속...");
+    await page.goto(`${BASE_URL}/screens/29`, { waitUntil: "networkidle", timeout: 15000 });
+    await page.waitForTimeout(3000);
+    await page.screenshot({ path: path.join(SCREENSHOT_DIR, "03-screen-29.png"), fullPage: true });
+    results.push({ step: "3. /screens/29 접속", success: true });
+
+    // Step 4: 화면 렌더링 검증
+    console.log("Step 4: 화면 렌더링 검증...");
+    const checks: { name: string; selector: string; found: boolean }[] = [];
+
+    // 버튼 확인
+    const buttons = page.locator("button, [role='button'], input[type='submit'], input[type='button']");
+    const buttonCount = await buttons.count();
+    checks.push({ name: "버튼", selector: "button, [role='button']", found: buttonCount > 0 });
+
+    // 테이블 확인
+    const tables = page.locator("table, [role='grid'], [role='table'], .ag-root");
+    const tableCount = await tables.count();
+    checks.push({ name: "테이블", selector: "table, [role='grid']", found: tableCount > 0 });
+
+    // 검색 필터 확인 (input, select 등)
+    const searchFilters = page.locator('input[type="text"], input[type="search"], input[placeholder*="검색"], input[placeholder*="Search"], select, [class*="filter"], [class*="search"]');
+    const filterCount = await searchFilters.count();
+    checks.push({ name: "검색/필터", selector: "input, select, filter", found: filterCount > 0 });
+
+    await page.screenshot({ path: path.join(SCREENSHOT_DIR, "04-screen-29-verified.png"), fullPage: true });
+
+    const allPassed = checks.every((c) => c.found);
+    results.push({
+      step: "4. 화면 렌더링 검증",
+      success: allPassed,
+      message: checks.map((c) => `${c.name}: ${c.found ? "O" : "X"}`).join(", "),
+    });
+
+    // 결과 출력
+    console.log("\n=== 검증 결과 ===");
+    results.forEach((r) => {
+      console.log(`${r.step}: ${r.success ? "성공" : "실패"}${r.message ? ` - ${r.message}` : ""}`);
+    });
+    checks.forEach((c) => {
+      console.log(`  - ${c.name}: ${c.found ? "보임" : "없음"}`);
+    });
+
+    const finalSuccess = results.every((r) => r.success);
+    console.log(`\n최종 판정: ${finalSuccess ? "성공" : "실패"}`);
+
+    // 결과를 JSON 파일로 저장
+    const fs = await import("fs");
+    fs.writeFileSync(
+      path.join(SCREENSHOT_DIR, "verification-result.json"),
+      JSON.stringify({ results, checks, finalSuccess: finalSuccess ? "성공" : "실패" }, null, 2)
+    );
+  } catch (error: any) {
+    console.error("오류 발생:", error.message);
+    await page.screenshot({ path: path.join(SCREENSHOT_DIR, "99-error.png"), fullPage: true }).catch(() => {});
+    results.push({ step: "오류", success: false, message: error.message });
+  } finally {
+    await browser.close();
+  }
+}
+
+main();
diff --git a/frontend/scripts/company-menu-flow-verification.ts b/frontend/scripts/company-menu-flow-verification.ts
new file mode 100644
index 00000000..33d4aba7
--- /dev/null
+++ b/frontend/scripts/company-menu-flow-verification.ts
@@ -0,0 +1,156 @@
+/**
+ * 회사 선택 → 메뉴 → 수주/구매관리 화면 검증
+ * 1. 로그인 (topseal7 또는 wace)
+ * 2. 회사 선택 → 탑씰
+ * 3. 영업관리 > 수주관리 또는 구매관리
+ * 4. 데이터 화면 스크린샷
+ * 5. 테이블 가로 스크롤 확인
+ */
+
+import { chromium } from "playwright";
+import * as path from "path";
+import * as fs from "fs";
+
+const BASE_URL = "http://localhost:9771";
+const SCREENSHOT_DIR = path.join(__dirname, "../verification-screenshots");
+
+async function main() {
+  const browser = await chromium.launch({ headless: true });
+  const context = await browser.newContext({ viewport: { width: 1280, height: 900 } });
+  const page = await context.newPage();
+
+  const steps: string[] = [];
+
+  try {
+    // Step 1: 로그인 페이지
+    console.log("Step 1: 로그인 페이지 접속...");
+    await page.goto(`${BASE_URL}/login`, { waitUntil: "domcontentloaded", timeout: 15000 });
+    await page.screenshot({ path: path.join(SCREENSHOT_DIR, "flow-01-login-page.png"), fullPage: true });
+    steps.push("01-login-page");
+
+    // Step 2: 로그인 시도 (topseal7 먼저)
+    console.log("Step 2: 로그인 (topseal7 시도)...");
+    await page.fill("#userId", "topseal7");
+    await page.fill("#password", "qlalfqjsgh11");
+    await page.screenshot({ path: path.join(SCREENSHOT_DIR, "flow-02-login-topseal7.png"), fullPage: true });
+    await page.locator('button[type="submit"]').first().click();
+    await page.waitForTimeout(3000);
+
+    const urlAfterLogin = page.url();
+    const isStillLogin = urlAfterLogin.includes("/login");
+
+    if (isStillLogin) {
+      console.log("topseal7 로그인 실패, wace 시도...");
+      await page.fill("#userId", "wace");
+      await page.fill("#password", "qlalfqjsgh11");
+      await page.screenshot({ path: path.join(SCREENSHOT_DIR, "flow-02b-login-wace.png"), fullPage: true });
+    await page.locator('button[type="submit"]').first().click();
+    await page.waitForTimeout(3000);
+  }
+  await page.waitForURL((url) => !url.includes("/login"), { timeout: 15000 }).catch(() => {});
+  await page.waitForTimeout(3000);
+  await page.screenshot({ path: path.join(SCREENSHOT_DIR, "flow-03-after-login.png"), fullPage: true });
+  steps.push("03-after-login");
+
+    // Step 3: 회사 선택 → 탑씰 (SUPER_ADMIN만 보임, 메인 앱 로드 대기)
+    console.log("Step 3: 회사 선택 클릭...");
+    await page.getByText("현재 관리 회사").waitFor({ timeout: 8000 }).catch(() => {});
+    await page.waitForTimeout(1000);
+    const companyBtn = page.getByText("회사 선택").first();
+    if ((await companyBtn.count()) > 0) {
+      await companyBtn.click();
+      await page.waitForTimeout(1500);
+      await page.screenshot({ path: path.join(SCREENSHOT_DIR, "flow-04-company-dropdown.png"), fullPage: true });
+
+      const tapsealOption = page.getByText("탑씰", { exact: true }).first();
+      if ((await tapsealOption.count()) > 0) {
+        await tapsealOption.click();
+        await page.waitForTimeout(2000);
+        console.log("탑씰 선택됨");
+      } else {
+        console.log("탑씰 옵션 없음 - 스킵");
+      }
+      await page.screenshot({ path: path.join(SCREENSHOT_DIR, "flow-05-after-company.png"), fullPage: true });
+    } else {
+      console.log("회사 선택 버튼 없음");
+      await page.screenshot({ path: path.join(SCREENSHOT_DIR, "flow-05-no-company-btn.png"), fullPage: true });
+    }
+    steps.push("05-after-company");
+
+    // Step 4: 영업관리 > 수주관리 또는 구매관리
+    console.log("Step 4: 메뉴 클릭 (영업관리 > 수주관리)...");
+    const salesMgmt = page.getByText("영업관리").first();
+    if ((await salesMgmt.count()) > 0) {
+      await salesMgmt.click();
+      await page.waitForTimeout(1000);
+      await page.screenshot({ path: path.join(SCREENSHOT_DIR, "flow-06-sales-expanded.png"), fullPage: true });
+
+      const orderMgmt = page.getByText("수주관리").first();
+      if ((await orderMgmt.count()) > 0) {
+        await orderMgmt.click();
+        await page.waitForTimeout(3000);
+        await page.screenshot({ path: path.join(SCREENSHOT_DIR, "flow-07-order-screen.png"), fullPage: true });
+      } else {
+        const purchaseMgmt = page.getByText("구매관리").first();
+        if ((await purchaseMgmt.count()) > 0) {
+          await purchaseMgmt.click();
+          await page.waitForTimeout(3000);
+          await page.screenshot({ path: path.join(SCREENSHOT_DIR, "flow-07-purchase-screen.png"), fullPage: true });
+        }
+      }
+    } else {
+      const purchaseMgmt = page.getByText("구매관리").first();
+      if ((await purchaseMgmt.count()) > 0) {
+        await purchaseMgmt.click();
+        await page.waitForTimeout(3000);
+        await page.screenshot({ path: path.join(SCREENSHOT_DIR, "flow-07-purchase-direct.png"), fullPage: true });
+      }
+    }
+    steps.push("07-menu-screen");
+
+    // Step 5: /screens/1244 직접 접속 시도
+    console.log("Step 5: /screens/1244 직접 접속...");
+    await page.goto(`${BASE_URL}/screens/1244`, { waitUntil: "domcontentloaded", timeout: 15000 });
+    await page.waitForTimeout(5000);
+    await page.getByText("로딩중", { exact: false }).waitFor({ state: "hidden", timeout: 10000 }).catch(() => {});
+    await page.waitForTimeout(2000);
+    await page.screenshot({ path: path.join(SCREENSHOT_DIR, "flow-08-screen-1244.png"), fullPage: true });
+    steps.push("08-screen-1244");
+
+    // Step 6: 테이블 가로 스크롤 확인
+    console.log("Step 6: 테이블 가로 스크롤 확인...");
+    const tableContainer = page.locator("table").locator("..").first();
+    const table = page.locator("table").first();
+    if ((await table.count()) > 0) {
+      const tableBox = await table.boundingBox();
+      const hasOverflowX = await table.evaluate((el) => {
+        const parent = el.closest("[style*='overflow'], [class*='overflow']");
+        return parent ? getComputedStyle(parent as Element).overflowX !== "visible" : false;
+      }).catch(() => false);
+      const scrollWidth = await table.evaluate((el) => el.scrollWidth);
+      const clientWidth = await table.evaluate((el) => el.clientWidth);
+      const canScroll = scrollWidth > clientWidth;
+      console.log(`테이블: scrollWidth=${scrollWidth}, clientWidth=${clientWidth}, 가로스크롤가능=${canScroll}`);
+    }
+    await page.screenshot({ path: path.join(SCREENSHOT_DIR, "flow-09-table-scroll-check.png"), fullPage: true });
+    steps.push("09-table-scroll");
+
+    // Step 7: 최종 스크린샷
+    console.log("Step 7: 최종 스크린샷...");
+    await page.screenshot({ path: path.join(SCREENSHOT_DIR, "flow-10-final.png"), fullPage: true });
+    steps.push("10-final");
+
+    fs.writeFileSync(
+      path.join(SCREENSHOT_DIR, "flow-result.json"),
+      JSON.stringify({ steps, timestamp: new Date().toISOString() }, null, 2)
+    );
+    console.log("\n완료. 스크린샷:", SCREENSHOT_DIR);
+  } catch (error: any) {
+    console.error("오류:", error.message);
+    await page.screenshot({ path: path.join(SCREENSHOT_DIR, "flow-99-error.png"), fullPage: true }).catch(() => {});
+  } finally {
+    await browser.close();
+  }
+}
+
+main();
diff --git a/frontend/scripts/dashboard-verification.ts b/frontend/scripts/dashboard-verification.ts
new file mode 100644
index 00000000..2a3a7bf0
--- /dev/null
+++ b/frontend/scripts/dashboard-verification.ts
@@ -0,0 +1,71 @@
+/**
+ * 대시보드 검증 스크립트
+ * 1. 로그인
+ * 2. /main으로 강제 이동 (reload)
+ * 3. 대시보드 스크린샷
+ */
+
+import { chromium } from "playwright";
+import * as path from "path";
+import * as fs from "fs";
+
+const BASE_URL = "http://localhost:9771";
+const SCREENSHOT_DIR = path.join(__dirname, "../verification-screenshots");
+
+async function main() {
+  if (!fs.existsSync(SCREENSHOT_DIR)) {
+    fs.mkdirSync(SCREENSHOT_DIR, { recursive: true });
+  }
+
+  const browser = await chromium.launch({ headless: true });
+  const context = await browser.newContext({ viewport: { width: 1280, height: 800 } });
+  const page = await context.newPage();
+
+  try {
+    // Step 1: 로그인 페이지 접속
+    console.log("Step 1: 로그인 페이지 접속...");
+    await page.goto(`${BASE_URL}/login`, { waitUntil: "commit", timeout: 30000 });
+    await page.waitForTimeout(1000);
+
+    // Step 2: 로그인
+    console.log("Step 2: 로그인...");
+    await page.fill("#userId", "wace");
+    await page.fill("#password", "qlalfqjsgh11");
+    await page.click('button[type="submit"]');
+
+    // Step 3: 리다이렉트 대기 (최대 15초)
+    console.log("Step 3: 페이지 로드 대기 (최대 15초)...");
+    await page.waitForURL((url) => !url.pathname.includes("/login"), { timeout: 15000 }).catch(() => {});
+    await page.waitForTimeout(4000); // 쿠키/토큰 설정 완료 대기
+
+    // Step 4: /main으로 강제 이동 (reload)
+    console.log("Step 4: /main으로 강제 이동...");
+    await page.goto(`${BASE_URL}/main`, { waitUntil: "commit", timeout: 30000 });
+    await page.waitForTimeout(3000); // 페이지 렌더링 대기
+
+    // Step 5: 페이지 내용 검증 및 스크린샷
+    const heading = await page.locator("h1").first().textContent().catch(() => "");
+    const url = page.url();
+    console.log("Step 5: 현재 URL:", url);
+    console.log("  -> h1 제목:", heading?.trim() || "(없음)");
+
+    await page.screenshot({
+      path: path.join(SCREENSHOT_DIR, "main-dashboard.png"),
+      fullPage: true,
+    });
+    console.log("  -> main-dashboard.png 저장됨");
+
+    await browser.close();
+    console.log("\n검증 완료. 스크린샷:", path.join(SCREENSHOT_DIR, "main-dashboard.png"));
+  } catch (error) {
+    console.error("오류:", error);
+    await page.screenshot({
+      path: path.join(SCREENSHOT_DIR, "dashboard-error.png"),
+      fullPage: true,
+    }).catch(() => {});
+    await browser.close();
+    process.exit(1);
+  }
+}
+
+main();
diff --git a/frontend/scripts/po-approval-company7-test.ts b/frontend/scripts/po-approval-company7-test.ts
new file mode 100644
index 00000000..a1023c89
--- /dev/null
+++ b/frontend/scripts/po-approval-company7-test.ts
@@ -0,0 +1,179 @@
+/**
+ * COMPANY_7 사용자(topseal_admin) 발주관리 결재 시스템 테스트
+ * 실행: npx tsx frontend/scripts/po-approval-company7-test.ts
+ */
+import { chromium } from "playwright";
+import { writeFileSync } from "fs";
+
+const BASE_URL = "http://localhost:9771";
+const LOGIN_ID = "topseal_admin";
+const LOGIN_PW = "qlalfqjsgh11";
+const SCREEN_URL = `${BASE_URL}/screen/COMPANY_7_064`;
+
+const results: string[] = [];
+const screenshotDir = "/Users/gbpark/ERP-node/approval-company7-screenshots";
+
+async function main() {
+  const browser = await chromium.launch({ headless: true });
+  const context = await browser.newContext({ viewport: { width: 1280, height: 900 } });
+  const page = await context.newPage();
+
+  const screenshot = async (name: string) => {
+    const path = `${screenshotDir}/${name}.png`;
+    await page.screenshot({ path, fullPage: true });
+    results.push(`  스크린샷: ${name}.png`);
+  };
+
+  try {
+    // Step 1: 로그인
+    results.push("\n=== Step 1: 로그인 (topseal_admin) ===");
+    await page.goto(BASE_URL, { waitUntil: "domcontentloaded", timeout: 30000 });
+    await page.waitForTimeout(2000);
+
+    const loginPage = page.locator('input[type="text"], input[name="userId"], #userId').first();
+    if ((await loginPage.count()) > 0) {
+      await page.getByPlaceholder("사용자 ID를 입력하세요").or(page.locator('#userId, input[name="userId"]')).first().fill(LOGIN_ID);
+      await page.getByPlaceholder("비밀번호를 입력하세요").or(page.locator('#password, input[name="password"]')).first().fill(LOGIN_PW);
+      await page.getByRole("button", { name: "로그인" }).or(page.locator('button[type="submit"]')).first().click();
+      await page.waitForTimeout(3000);
+      try {
+        await page.waitForURL((url) => !url.toString().includes("/login"), { timeout: 25000 });
+      } catch {
+        results.push("  WARN: 로그인 후 URL 변경 없음 - 로그인 실패 가능");
+      }
+    }
+    await page.waitForTimeout(3000);
+    const urlAfterLogin = page.url();
+    results.push(`  현재 URL: ${urlAfterLogin}`);
+    await screenshot("01-after-login");
+    if (urlAfterLogin.includes("/login")) {
+      results.push("  FAIL: 로그인 실패 - 여전히 로그인 페이지에 있음");
+    } else {
+      results.push("  OK: 로그인 완료");
+    }
+
+    // Step 2: 구매관리 메뉴 또는 직접 URL
+    results.push("\n=== Step 2: 발주관리 화면 이동 ===");
+    const purchaseMenu = page.locator('text="구매관리"').first();
+    const hasPurchaseMenu = (await purchaseMenu.count()) > 0;
+    if (hasPurchaseMenu) {
+      await purchaseMenu.click();
+      await page.waitForTimeout(800);
+      const poMenu = page.locator('text="발주관리"').or(page.locator('text="발주 관리"')).first();
+      if ((await poMenu.count()) > 0) {
+        await poMenu.click();
+        await page.waitForTimeout(3000);
+      } else {
+        await page.goto(SCREEN_URL, { waitUntil: "domcontentloaded", timeout: 20000 });
+        await page.waitForTimeout(5000);
+      }
+    } else {
+      results.push("  INFO: 구매관리 메뉴 없음, 직접 URL 이동");
+      await page.goto(SCREEN_URL, { waitUntil: "domcontentloaded", timeout: 20000 });
+      await page.waitForTimeout(5000);
+    }
+    await screenshot("02-po-screen");
+    results.push("  OK: 발주관리 화면 로드");
+
+    // Step 3: 그리드 컬럼 상세 확인
+    results.push("\n=== Step 3: 그리드 컬럼 및 데이터 확인 ===");
+    await page.waitForTimeout(2000);
+
+    const headers = await page.locator("table th, [role='columnheader']").allTextContents();
+    const headerTexts = headers.map((h) => h.trim()).filter((h) => h.length > 0);
+    results.push(`  컬럼 헤더 (전체): ${JSON.stringify(headerTexts)}`);
+
+    const firstCol = headerTexts[0] || "";
+    const isFirstColKorean = firstCol === "결재상태";
+    const isFirstColEnglish = firstCol === "approval_status" || firstCol.toLowerCase().includes("approval");
+    results.push(`  첫 번째 컬럼: "${firstCol}"`);
+    results.push(isFirstColKorean ? "  결재상태(한글) 표시됨" : isFirstColEnglish ? "  approval_status(영문) 표시됨" : `  기타: ${firstCol}`);
+
+    const rows = await page.locator("table tbody tr, [role='row']").count();
+    const hasEmptyMsg = (await page.locator('text="데이터가 없습니다"').count()) > 0;
+    results.push(`  데이터 행 수: ${rows}`);
+    results.push(hasEmptyMsg ? "  빈 그리드: '데이터가 없습니다' 메시지 표시" : "  데이터 있음");
+
+    if (rows > 0 && !hasEmptyMsg) {
+      const firstColCells = await page.locator("table tbody tr td:first-child").allTextContents();
+      results.push(`  첫 번째 컬럼 값(샘플): ${JSON.stringify(firstColCells.slice(0, 5))}`);
+
+      const poNumbers = await page.locator("table tbody td").filter({ hasText: /PO-|발주/ }).allTextContents();
+      results.push(`  발주번호 형식 데이터: ${poNumbers.length > 0 ? JSON.stringify(poNumbers.slice(0, 5)) : "없음"}`);
+    }
+
+    await screenshot("03-grid-detail");
+    results.push("  OK: 그리드 상세 스크린샷 저장");
+
+    // Step 4: 결재 요청 버튼 확인
+    results.push("\n=== Step 4: 결재 요청 버튼 확인 ===");
+    const approvalBtn = page.getByRole("button", { name: "결재 요청" }).or(page.locator('button:has-text("결재 요청")'));
+    const hasApprovalBtn = (await approvalBtn.count()) > 0;
+    results.push(hasApprovalBtn ? "  OK: '결재 요청' 파란색 버튼 확인됨" : "  FAIL: '결재 요청' 버튼 없음");
+    await screenshot("04-approval-button");
+
+    // Step 5: 행 선택 후 결재 요청 클릭
+    results.push("\n=== Step 5: 행 선택 후 결재 요청 ===");
+    const firstRow = page.locator("table tbody tr").first();
+    const checkbox = page.locator("table tbody tr input[type='checkbox']").first();
+    const hasRows = (await firstRow.count()) > 0;
+    const hasCheckbox = (await checkbox.count()) > 0;
+
+    if (hasRows) {
+      if (hasCheckbox) {
+        await checkbox.click();
+        await page.waitForTimeout(300);
+      } else {
+        await firstRow.click();
+        await page.waitForTimeout(300);
+      }
+      results.push("  OK: 행 선택 완료");
+    } else {
+      results.push("  INFO: 데이터 행 없음, 행 선택 없이 진행");
+    }
+
+    if (hasApprovalBtn) {
+      await approvalBtn.first().click({ force: true });
+      await page.waitForTimeout(2000);
+      await screenshot("05-approval-modal");
+
+      const modal = page.locator('[role="dialog"]');
+      const modalOpened = (await modal.count()) > 0;
+      results.push(modalOpened ? "  OK: 결재 모달 열림" : "  FAIL: 결재 모달 열리지 않음");
+
+      if (modalOpened) {
+        const searchInput = page.getByPlaceholder("이름 또는 사번으로 검색...").or(page.locator('[role="dialog"] input[placeholder*="검색"]'));
+        if ((await searchInput.count()) > 0) {
+          await searchInput.first().fill("김");
+          await page.waitForTimeout(2000);
+          await screenshot("06-approver-search-results");
+
+          const searchResults = page.locator('[role="dialog"] div.max-h-48 button, [role="dialog"] div.overflow-y-auto button');
+          const resultCount = await searchResults.count();
+          const resultTexts = await searchResults.allTextContents();
+          results.push(`  결재자 검색 결과: ${resultCount}명`);
+          if (resultTexts.length > 0) {
+            results.push(`  결재자 목록: ${JSON.stringify(resultTexts.slice(0, 10))}`);
+          }
+        }
+      }
+    }
+
+    await screenshot("07-final");
+  } catch (err: any) {
+    results.push(`\nERROR: ${err.message}`);
+    await page.screenshot({ path: `${screenshotDir}/error.png`, fullPage: true }).catch(() => {});
+  } finally {
+    await browser.close();
+  }
+
+  const output = results.join("\n");
+  console.log("\n" + "=".repeat(60));
+  console.log("COMPANY_7 (topseal_admin) 발주관리 결재 테스트 결과");
+  console.log("=".repeat(60));
+  console.log(output);
+  console.log("=".repeat(60));
+  writeFileSync("/Users/gbpark/ERP-node/approval-company7-report.txt", output);
+}
+
+main();
diff --git a/frontend/scripts/purchase-order-approval-test.ts b/frontend/scripts/purchase-order-approval-test.ts
new file mode 100644
index 00000000..0ea0cbe1
--- /dev/null
+++ b/frontend/scripts/purchase-order-approval-test.ts
@@ -0,0 +1,174 @@
+/**
+ * 발주관리 화면 결재 시스템 E2E 테스트
+ * 메뉴: 구매관리 → 발주관리
+ * 실행: npx tsx frontend/scripts/purchase-order-approval-test.ts
+ */
+import { chromium } from "playwright";
+import { writeFileSync } from "fs";
+
+const BASE_URL = "http://localhost:9771";
+const LOGIN_ID = "wace";
+const LOGIN_PW = "qlalfqjsgh11";
+
+const results: string[] = [];
+const screenshotDir = "/Users/gbpark/ERP-node/approval-test-screenshots";
+
+async function main() {
+  const browser = await chromium.launch({ headless: true });
+  const context = await browser.newContext({ viewport: { width: 1280, height: 900 } });
+  const page = await context.newPage();
+
+  const screenshot = async (name: string) => {
+    const path = `${screenshotDir}/${name}.png`;
+    await page.screenshot({ path, fullPage: true });
+    results.push(`  스크린샷: ${name}.png`);
+  };
+
+  try {
+    // Step 1: 로그인
+    results.push("\n=== Step 1: 로그인 ===");
+    await page.goto(BASE_URL, { waitUntil: "domcontentloaded", timeout: 30000 });
+    await screenshot("01-login-page");
+
+    const userIdInput = page.getByPlaceholder("사용자 ID를 입력하세요").or(page.locator('#userId, input[name="userId"]'));
+    const pwInput = page.getByPlaceholder("비밀번호를 입력하세요").or(page.locator('#password, input[name="password"]'));
+    const loginBtn = page.getByRole("button", { name: "로그인" }).or(page.locator('button[type="submit"]'));
+
+    await userIdInput.first().fill(LOGIN_ID);
+    await pwInput.first().fill(LOGIN_PW);
+    await loginBtn.first().click();
+    await page.waitForURL((url) => !url.toString().includes("/login"), { timeout: 30000 });
+    await page.waitForLoadState("domcontentloaded");
+    await page.waitForTimeout(5000); // 메뉴 로드 대기
+    await screenshot("02-after-login");
+    results.push("  OK: 로그인 완료, 대시보드 로드");
+
+    // Step 2: 구매관리 → 발주관리 메뉴 이동 (또는 직접 URL)
+    results.push("\n=== Step 2: 구매관리 → 발주관리 메뉴 이동 ===");
+    const purchaseMenu = page.locator('text="구매관리"').first();
+    const hasPurchaseMenu = (await purchaseMenu.count()) > 0;
+    let poScreenLoaded = false;
+
+    if (hasPurchaseMenu) {
+      await purchaseMenu.click();
+      await page.waitForTimeout(800);
+      await screenshot("03-purchase-menu-expanded");
+
+      const poMenu = page.locator('text="발주관리"').or(page.locator('text="발주 관리"')).first();
+      const hasPoMenu = (await poMenu.count()) > 0;
+      if (hasPoMenu) {
+        await poMenu.click();
+        await page.waitForTimeout(3000);
+        await screenshot("04-po-screen-loaded");
+        poScreenLoaded = true;
+        results.push("  OK: 메뉴로 발주관리 화면 이동 완료");
+      }
+    }
+
+    if (!poScreenLoaded) {
+      results.push("  INFO: 메뉴에서 발주관리 미발견, 직접 URL로 이동");
+      const allMenuTexts = await page.locator("aside a, aside button, aside [role='menuitem']").allTextContents();
+      results.push(`  메뉴 목록: ${JSON.stringify(allMenuTexts.slice(0, 30))}`);
+      await page.goto(`${BASE_URL}/screen/COMPANY_7_064`, { waitUntil: "domcontentloaded", timeout: 20000 });
+      await page.waitForTimeout(4000);
+      await screenshot("04-po-screen-loaded");
+      results.push("  OK: /screen/COMPANY_7_064 직접 이동 완료");
+    }
+
+    // Step 3: 그리드 컬럼 확인
+    results.push("\n=== Step 3: 그리드 컬럼 확인 ===");
+    await page.waitForTimeout(2000);
+    await screenshot("05-grid-columns");
+
+    const headers = await page.locator("table th, [role='columnheader']").allTextContents();
+    const headerTexts = headers.map((h) => h.trim()).filter((h) => h.length > 0);
+    results.push(`  컬럼 목록: ${JSON.stringify(headerTexts)}`);
+
+    const hasApprovalColumn = headerTexts.some((h) => h.includes("결재상태"));
+    results.push(hasApprovalColumn ? "  OK: '결재상태' 컬럼 확인됨" : "  FAIL: '결재상태' 컬럼 없음");
+
+    // 결재상태 값 확인 (작성중 등)
+    const statusCellTexts = await page.locator("table tbody td").allTextContents();
+    const approvalValues = statusCellTexts.filter((t) =>
+      ["작성중", "결재중", "결재완료", "반려"].some((s) => t.includes(s))
+    );
+    results.push(`  결재상태 값: ${approvalValues.length > 0 ? approvalValues.join(", ") : "데이터 없음 또는 해당 값 없음"}`);
+
+    // Step 4: 행 선택 후 결재 요청 버튼 클릭
+    results.push("\n=== Step 4: 행 선택 및 결재 요청 버튼 클릭 ===");
+    const firstRow = page.locator("table tbody tr, [role='row']").first();
+    const hasRows = (await firstRow.count()) > 0;
+    if (hasRows) {
+      await firstRow.click({ force: true });
+      await page.waitForTimeout(500);
+      await screenshot("06-row-selected");
+      results.push("  OK: 첫 번째 행 선택");
+    } else {
+      results.push("  INFO: 데이터 행 없음, 행 선택 없이 진행");
+    }
+
+    const approvalBtn = page.getByRole("button", { name: "결재 요청" }).or(page.locator('button:has-text("결재 요청")'));
+    const hasApprovalBtn = (await approvalBtn.count()) > 0;
+    if (!hasApprovalBtn) {
+      results.push("  FAIL: '결재 요청' 버튼 없음");
+    } else {
+      await approvalBtn.first().click({ force: true });
+      await page.waitForTimeout(2000);
+      await screenshot("07-approval-modal-opened");
+
+      const modal = page.locator('[role="dialog"]');
+      const modalOpened = (await modal.count()) > 0;
+      results.push(modalOpened ? "  OK: 결재 모달 열림" : "  FAIL: 결재 모달 열리지 않음");
+    }
+
+    // Step 5: 결재자 검색 테스트
+    results.push("\n=== Step 5: 결재자 검색 테스트 ===");
+    const searchInput = page.getByPlaceholder("이름 또는 사번으로 검색...").or(
+      page.locator('input[placeholder*="검색"]')
+    );
+    const hasSearchInput = (await searchInput.count()) > 0;
+    if (!hasSearchInput) {
+      results.push("  FAIL: 결재자 검색 입력 필드 없음");
+    } else {
+      await searchInput.first().fill("김");
+      await page.waitForTimeout(2000);
+      await screenshot("08-approver-search-results");
+
+      // 검색 결과 확인 (ApprovalRequestModal: div.max-h-48 내부 button)
+      const searchResults = page.locator(
+        '[role="dialog"] div.max-h-48 button, [role="dialog"] div.overflow-y-auto button'
+      );
+      const resultCount = await searchResults.count();
+      const resultTexts = await searchResults.allTextContents();
+      results.push(`  검색 결과 수: ${resultCount}명`);
+      if (resultTexts.length > 0) {
+        const names = resultTexts.map((t) => t.trim()).filter((t) => t.length > 0);
+        results.push(`  결재자 목록: ${JSON.stringify(names.slice(0, 10))}`);
+      }
+
+      // "검색 결과가 없습니다" 또는 "검색 중" 메시지 확인
+      const noResultsMsg = page.locator('text="검색 결과가 없습니다"');
+      const searchingMsg = page.locator('text="검색 중"');
+      if ((await noResultsMsg.count()) > 0) results.push("  (검색 결과 없음 메시지 표시됨)");
+      if ((await searchingMsg.count()) > 0) results.push("  (검색 중 메시지 표시됨 - 대기 부족 가능)");
+    }
+
+    // 최종 스크린샷
+    await screenshot("09-final-state");
+  } catch (err: any) {
+    results.push(`\nERROR: ${err.message}`);
+    await page.screenshot({ path: `${screenshotDir}/error.png`, fullPage: true }).catch(() => {});
+  } finally {
+    await browser.close();
+  }
+
+  const output = results.join("\n");
+  console.log("\n" + "=".repeat(60));
+  console.log("발주관리 결재 시스템 테스트 결과");
+  console.log("=".repeat(60));
+  console.log(output);
+  console.log("=".repeat(60));
+  writeFileSync("/Users/gbpark/ERP-node/approval-test-report.txt", output);
+}
+
+main();
diff --git a/frontend/scripts/screen-approval-modal-test.ts b/frontend/scripts/screen-approval-modal-test.ts
new file mode 100644
index 00000000..cc47073c
--- /dev/null
+++ b/frontend/scripts/screen-approval-modal-test.ts
@@ -0,0 +1,101 @@
+/**
+ * 결재 모달 테스트: 버튼 클릭 vs CustomEvent 직접 발송
+ * 실행: npx tsx frontend/scripts/screen-approval-modal-test.ts
+ */
+import { chromium } from "playwright";
+import { writeFileSync } from "fs";
+
+const BASE_URL = "http://localhost:9771";
+const LOGIN_ID = "wace";
+const LOGIN_PW = "qlalfqjsgh11";
+const SCREEN_URL = `${BASE_URL}/screen/COMPANY_7_064`;
+
+const results: string[] = [];
+
+async function main() {
+  const browser = await chromium.launch({ headless: true });
+  const context = await browser.newContext({ viewport: { width: 1280, height: 900 } });
+  const page = await context.newPage();
+
+  try {
+    // 1. 로그인
+    results.push("=== 1. 로그인 ===");
+    await page.goto(`${BASE_URL}/login`, { waitUntil: "networkidle", timeout: 15000 });
+    await page.getByPlaceholder("사용자 ID를 입력하세요").or(page.locator('#userId, input[name="userId"]')).first().fill(LOGIN_ID);
+    await page.getByPlaceholder("비밀번호를 입력하세요").or(page.locator('#password, input[name="password"]')).first().fill(LOGIN_PW);
+    await page.getByRole("button", { name: "로그인" }).or(page.locator('button[type="submit"]')).first().click();
+    await page.waitForURL((url) => !url.toString().includes("/login"), { timeout: 30000 });
+    await page.waitForLoadState("networkidle");
+    results.push("OK: 로그인 성공");
+
+    // 2. 화면 이동 및 대기
+    results.push("\n=== 2. 화면 COMPANY_7_064 이동 ===");
+    await page.goto(SCREEN_URL, { waitUntil: "networkidle", timeout: 20000 });
+    await page.waitForTimeout(3000);
+    results.push("OK: 페이지 로드 완료");
+
+    // 3. 전체 페이지 스크린샷
+    results.push("\n=== 3. 전체 페이지 스크린샷 ===");
+    await page.screenshot({ path: "/Users/gbpark/ERP-node/approval-test-1-full-page.png", fullPage: true });
+    results.push("OK: approval-test-1-full-page.png 저장");
+
+    // 4. "결재 요청" 버튼 클릭
+    results.push("\n=== 4. 결재 요청 버튼 클릭 ===");
+    const approvalBtn = page.getByRole("button", { name: "결재 요청" }).or(page.locator('button:has-text("결재 요청")'));
+    await approvalBtn.first().click({ force: true });
+    await page.waitForTimeout(2000);
+
+    // 5. 클릭 후 스크린샷
+    results.push("\n=== 5. 클릭 후 스크린샷 ===");
+    await page.screenshot({ path: "/Users/gbpark/ERP-node/approval-test-2-after-button-click.png", fullPage: true });
+    results.push("OK: approval-test-2-after-button-click.png 저장");
+
+    // 6. 모달 등장 여부 확인
+    results.push("\n=== 6. 버튼 클릭 후 모달 확인 ===");
+    const modalAfterClick = page.locator('[role="dialog"]');
+    const modalVisibleAfterClick = (await modalAfterClick.count()) > 0;
+    results.push(modalVisibleAfterClick ? "OK: 버튼 클릭으로 모달 열림" : "FAIL: 버튼 클릭 후 모달 없음");
+
+    // 7. CustomEvent 직접 발송 (모달이 없었을 때)
+    results.push("\n=== 7. CustomEvent 직접 발송 ===");
+    await page.evaluate(() => {
+      window.dispatchEvent(
+        new CustomEvent("open-approval-modal", {
+          detail: { targetTable: "purchase_order_mng", targetRecordId: "test-123" },
+        })
+      );
+    });
+    await page.waitForTimeout(2000);
+
+    // 8. CustomEvent 발송 후 스크린샷
+    results.push("\n=== 8. CustomEvent 발송 후 스크린샷 ===");
+    await page.screenshot({ path: "/Users/gbpark/ERP-node/approval-test-3-after-customevent.png", fullPage: true });
+    results.push("OK: approval-test-3-after-customevent.png 저장");
+
+    // 9. CustomEvent 발송 후 모달 확인
+    results.push("\n=== 9. CustomEvent 발송 후 모달 확인 ===");
+    const modalAfterEvent = page.locator('[role="dialog"]');
+    const modalVisibleAfterEvent = (await modalAfterEvent.count()) > 0;
+    results.push(modalVisibleAfterEvent ? "OK: CustomEvent 발송으로 모달 열림" : "FAIL: CustomEvent 발송 후에도 모달 없음");
+
+    // 10. 최종 요약
+    results.push("\n=== 10. 최종 요약 ===");
+    results.push(`버튼 클릭 → 모달: ${modalVisibleAfterClick ? "YES" : "NO"}`);
+    results.push(`CustomEvent 발송 → 모달: ${modalVisibleAfterEvent ? "YES" : "NO"}`);
+  } catch (err: any) {
+    results.push(`\nERROR: ${err.message}`);
+    await page.screenshot({ path: "/Users/gbpark/ERP-node/approval-test-error.png", fullPage: true }).catch(() => {});
+  } finally {
+    await browser.close();
+  }
+
+  const output = results.join("\n");
+  console.log("\n" + "=".repeat(60));
+  console.log("결재 모달 테스트 결과");
+  console.log("=".repeat(60));
+  console.log(output);
+  console.log("=".repeat(60));
+  writeFileSync("/Users/gbpark/ERP-node/approval-modal-test-result.txt", output);
+}
+
+main();
diff --git a/frontend/scripts/screen68-verification.ts b/frontend/scripts/screen68-verification.ts
new file mode 100644
index 00000000..231a9ab7
--- /dev/null
+++ b/frontend/scripts/screen68-verification.ts
@@ -0,0 +1,135 @@
+/**
+ * 수주관리 화면(68) 검증 스크립트
+ * - 로그인 상태 확인 후 필요시 로그인
+ * - /screens/68 접속
+ * - 테이블, 검색 필터, 버튼 확인
+ */
+
+import { chromium } from "playwright";
+import * as path from "path";
+import * as fs from "fs";
+
+const BASE_URL = "http://localhost:9771";
+const SCREENSHOT_DIR = path.join(__dirname, "../verification-screenshots");
+
+async function main() {
+  const browser = await chromium.launch({ headless: true });
+  const context = await browser.newContext({
+    viewport: { width: 1280, height: 900 },
+    storageState: undefined, // 새 세션 (쿠키 유지 안 함 - 이전 세션 로그인 상태 확인용)
+  });
+  const page = await context.newPage();
+
+  const steps: { step: string; success: boolean; message?: string }[] = [];
+
+  try {
+    // Step 1: 로그인 페이지 접속 및 로그인 (Playwright는 매번 새 브라우저이므로 항상 로그인 필요)
+    console.log("Step 1: 로그인...");
+    await page.goto(`${BASE_URL}/login`, { waitUntil: "domcontentloaded", timeout: 15000 });
+    await page.waitForTimeout(1000);
+    await page.screenshot({ path: path.join(SCREENSHOT_DIR, "s68-01-login-page.png"), fullPage: true });
+
+    await page.fill("#userId", "wace");
+    await page.fill("#password", "qlalfqjsgh11");
+    await page.screenshot({ path: path.join(SCREENSHOT_DIR, "s68-02-login-filled.png"), fullPage: true });
+    await page.locator('button[type="submit"]').first().click();
+    await page.waitForTimeout(3000);
+    steps.push({ step: "로그인", success: true });
+
+    // Step 2: /screens/68 접속
+    console.log("Step 2: /screens/68 접속...");
+    await page.goto(`${BASE_URL}/screens/68`, { waitUntil: "domcontentloaded", timeout: 15000 });
+
+    // 5초 대기 (페이지 완전 로드)
+    console.log("Step 3: 5초 대기 (페이지 완전 로드)...");
+    await page.waitForTimeout(5000);
+
+    await page.screenshot({ path: path.join(SCREENSHOT_DIR, "s68-03-screen-loaded.png"), fullPage: true });
+    steps.push({ step: "/screens/68 접속 및 5초 대기", success: true });
+
+    // Step 3: 요소 검증
+    console.log("Step 3: 요소 검증...");
+
+    const hasError = await page.locator('text="화면을 찾을 수 없습니다"').count() > 0;
+    if (hasError) {
+      steps.push({ step: "화면 로드", success: false, message: "404 - 화면을 찾을 수 없습니다" });
+    } else {
+      // 테이블 (TableListComponent: role=grid, table, thead/tbody)
+      const tableSelectors = [
+        "table",
+        "[role='grid']",
+        "[role='table']",
+        "thead",
+        "tbody",
+        ".table-mobile-fixed",
+        "[class*='ag-']",
+        "[class*='table-list']",
+      ];
+      let tableFound = false;
+      for (const sel of tableSelectors) {
+        if ((await page.locator(sel).count()) > 0) {
+          tableFound = true;
+          break;
+        }
+      }
+
+      // 검색/필터 (input, select, 테이블 툴바 검색/필터 버튼)
+      const filterSelectors = [
+        "input",
+        "select",
+        'input[type="text"]',
+        'input[type="search"]',
+        'input[placeholder*="검색"]',
+        "button:has-text('검색')",
+        "button:has-text('필터')",
+        "[class*='filter']",
+        "[class*='search']",
+      ];
+      let filterFound = false;
+      for (const sel of filterSelectors) {
+        if ((await page.locator(sel).count()) > 0) {
+          filterFound = true;
+          break;
+        }
+      }
+
+      // 버튼
+      const buttonCount = await page.locator("button, [role='button'], input[type='submit']").count();
+      const buttonsFound = buttonCount > 0;
+
+      steps.push({
+        step: "화면 요소 검증",
+        success: tableFound && filterFound && buttonsFound,
+        message: `테이블: ${tableFound ? "O" : "X"}, 검색: ${filterFound ? "O" : "X"}, 버튼: ${buttonsFound ? "O" : "X"}`,
+      });
+
+      await page.screenshot({ path: path.join(SCREENSHOT_DIR, "s68-04-verified.png"), fullPage: true });
+
+      const finalSuccess = tableFound && filterFound && buttonsFound && !hasError;
+      console.log("\n=== 검증 결과 ===");
+      steps.forEach((s) => console.log(`${s.step}: ${s.success ? "성공" : "실패"}${s.message ? ` - ${s.message}` : ""}`));
+      console.log(`\n최종 판정: ${finalSuccess ? "성공" : "실패"}`);
+
+      fs.writeFileSync(
+        path.join(SCREENSHOT_DIR, "s68-result.json"),
+        JSON.stringify(
+          {
+            steps,
+            checks: { table: tableFound, filter: filterFound, buttons: buttonsFound },
+            finalSuccess: finalSuccess ? "성공" : "실패",
+          },
+          null,
+          2
+        )
+      );
+    }
+  } catch (error: any) {
+    console.error("오류:", error.message);
+    await page.screenshot({ path: path.join(SCREENSHOT_DIR, "s68-99-error.png"), fullPage: true }).catch(() => {});
+    steps.push({ step: "오류", success: false, message: error.message });
+  } finally {
+    await browser.close();
+  }
+}
+
+main();
diff --git a/frontend/scripts/screen94-124-verification.ts b/frontend/scripts/screen94-124-verification.ts
new file mode 100644
index 00000000..f422a607
--- /dev/null
+++ b/frontend/scripts/screen94-124-verification.ts
@@ -0,0 +1,163 @@
+/**
+ * 화면 94(수주), 124(수주목록 리스트) 검증 스크립트
+ * - 로그인 후 각 화면 접속
+ * - 컴포넌트 배치, 테이블/필터/버튼, 가로 레이아웃 확인
+ */
+
+import { chromium } from "playwright";
+import * as path from "path";
+import * as fs from "fs";
+
+const BASE_URL = "http://localhost:9771";
+const SCREENSHOT_DIR = path.join(__dirname, "../verification-screenshots");
+
+interface ScreenResult {
+  screenId: number;
+  name: string;
+  componentsOk: boolean;
+  tableVisible: boolean;
+  filterVisible: boolean;
+  buttonsVisible: boolean;
+  layoutHorizontal: boolean;
+  noError: boolean;
+  success: boolean;
+}
+
+type ScreenType = "form" | "list";
+
+async function verifyScreen(page: any, screenId: number, name: string, type: ScreenType): Promise<ScreenResult> {
+  console.log(`\n--- 화면 ${screenId} (${name}) 검증 ---`);
+  await page.goto(`${BASE_URL}/screens/${screenId}`, { waitUntil: "domcontentloaded", timeout: 20000 });
+  // 로딩 완료 대기: "로딩중" 텍스트 사라질 때까지 최대 12초
+  await page.getByText("로딩중", { exact: false }).waitFor({ state: "hidden", timeout: 12000 }).catch(() => {});
+  // 리스트 화면: 테이블 로딩 대기. 폼 화면: 버튼/input 대기
+  if (type === "list") {
+    await page.waitForSelector("table, [role='grid'], thead, tbody", { timeout: 8000 }).catch(() => {});
+  } else {
+    await page.waitForSelector("button, input", { timeout: 5000 }).catch(() => {});
+  }
+  await page.waitForTimeout(2000);
+
+  const result: ScreenResult = {
+    screenId,
+    name,
+    componentsOk: false,
+    tableVisible: false,
+    filterVisible: false,
+    buttonsVisible: false,
+    layoutHorizontal: false,
+    noError: false,
+    success: false,
+  };
+
+  // 404/에러 메시지 확인
+  const has404 = (await page.locator('text="화면을 찾을 수 없습니다"').count()) > 0;
+  const hasError = (await page.locator('text="오류 발생"').count()) > 0;
+  result.noError = !has404;
+
+  // 테이블
+  const tableSelectors = ["table", "[role='grid']", "thead", "tbody", ".table-mobile-fixed"];
+  for (const sel of tableSelectors) {
+    if ((await page.locator(sel).count()) > 0) {
+      result.tableVisible = true;
+      break;
+    }
+  }
+
+  // 필터/검색
+  const filterSelectors = ["input", "select", "button:has-text('검색')", "button:has-text('필터')"];
+  for (const sel of filterSelectors) {
+    if ((await page.locator(sel).count()) > 0) {
+      result.filterVisible = true;
+      break;
+    }
+  }
+
+  // 버튼 (사이드바 포함, 화면에 버튼이 있으면 OK)
+  const buttonCount = await page.locator("button, [role='button']").count();
+  result.buttonsVisible = buttonCount > 0;
+
+  // 가로 레이아웃: 사이드바+메인 구조, flex/grid, 또는 테이블이 있으면 가로 배치로 간주
+  const hasFlexRow = (await page.locator(".flex-row, .md\\:flex-row, .flex").count()) > 0;
+  const hasGrid = (await page.locator(".grid, [class*='grid-cols']").count()) > 0;
+  const hasMain = (await page.locator("main, [role='main'], .flex-1, [class*='flex-1']").count()) > 0;
+  const hasSidebar = (await page.getByText("현재 관리 회사").count()) > 0 || (await page.getByText("VEXPLOR").count()) > 0;
+  result.layoutHorizontal = (hasMain && (hasFlexRow || hasGrid || result.tableVisible)) || hasSidebar;
+
+  // 컴포넌트 정상 배치 (테이블, 버튼, 또는 input/필터 중 하나라도 있으면 OK)
+  result.componentsOk = result.tableVisible || result.buttonsVisible || result.filterVisible;
+
+  // 성공: 폼 화면은 테이블 불필요, 리스트 화면은 테이블 필수
+  const baseOk = result.componentsOk && result.filterVisible && result.buttonsVisible && result.layoutHorizontal && result.noError;
+  result.success = type === "form" ? baseOk : baseOk && result.tableVisible;
+
+  return result;
+}
+
+async function main() {
+  const browser = await chromium.launch({ headless: true });
+  const context = await browser.newContext({ viewport: { width: 1280, height: 900 } });
+  const page = await context.newPage();
+
+  const results: ScreenResult[] = [];
+
+  try {
+    // 로그인 (Playwright는 새 브라우저이므로)
+    console.log("로그인...");
+    await page.goto(`${BASE_URL}/login`, { waitUntil: "domcontentloaded", timeout: 15000 });
+    await page.waitForTimeout(1000);
+    await page.fill("#userId", "wace");
+    await page.fill("#password", "qlalfqjsgh11");
+    await page.locator('button[type="submit"]').first().click();
+    await page.waitForURL((url) => !url.includes("/login"), { timeout: 15000 }).catch(() => {});
+    await page.waitForTimeout(3000);
+
+    // 화면 94
+    await page.screenshot({
+      path: path.join(SCREENSHOT_DIR, "s94-01-before.png"),
+      fullPage: true,
+    });
+    const r94 = await verifyScreen(page, 94, "수주", "form");
+    results.push(r94);
+    await page.screenshot({
+      path: path.join(SCREENSHOT_DIR, "s94-02-after.png"),
+      fullPage: true,
+    });
+
+    // 화면 124
+    await page.screenshot({
+      path: path.join(SCREENSHOT_DIR, "s124-01-before.png"),
+      fullPage: true,
+    });
+    const r124 = await verifyScreen(page, 124, "수주목록 리스트", "list");
+    results.push(r124);
+    await page.screenshot({
+      path: path.join(SCREENSHOT_DIR, "s124-02-after.png"),
+      fullPage: true,
+    });
+
+    // 결과 출력
+    console.log("\n=== 검증 결과 ===");
+    results.forEach((r) => {
+      console.log(
+        `화면 ${r.screenId} (${r.name}): ${r.success ? "성공" : "실패"}` +
+          ` | 테이블:${r.tableVisible ? "O" : "X"} 필터:${r.filterVisible ? "O" : "X"} 버튼:${r.buttonsVisible ? "O" : "X"} 레이아웃:${r.layoutHorizontal ? "O" : "X"} 에러없음:${r.noError ? "O" : "X"}`
+      );
+    });
+
+    const allSuccess = results.every((r) => r.success);
+    console.log(`\n최종 판정: ${allSuccess ? "성공" : "실패"}`);
+
+    fs.writeFileSync(
+      path.join(SCREENSHOT_DIR, "s94-124-result.json"),
+      JSON.stringify({ results, finalSuccess: allSuccess ? "성공" : "실패" }, null, 2)
+    );
+  } catch (error: any) {
+    console.error("오류:", error.message);
+    await page.screenshot({ path: path.join(SCREENSHOT_DIR, "s94-124-error.png"), fullPage: true }).catch(() => {});
+  } finally {
+    await browser.close();
+  }
+}
+
+main();
diff --git a/frontend/scripts/ui-redesign-verification.ts b/frontend/scripts/ui-redesign-verification.ts
new file mode 100644
index 00000000..ceb78c3f
--- /dev/null
+++ b/frontend/scripts/ui-redesign-verification.ts
@@ -0,0 +1,112 @@
+/**
+ * UI 리디자인 검증 스크립트
+ * 1. 로그인 페이지 스크린샷
+ * 2. 로그인
+ * 3. 대시보드 스크린샷
+ * 4. 사이드바 스크린샷
+ */
+
+import { chromium } from "playwright";
+import * as path from "path";
+import * as fs from "fs";
+
+const BASE_URL = "http://localhost:9771";
+const SCREENSHOT_DIR = path.join(__dirname, "../verification-screenshots");
+
+async function main() {
+  if (!fs.existsSync(SCREENSHOT_DIR)) {
+    fs.mkdirSync(SCREENSHOT_DIR, { recursive: true });
+  }
+
+  const browser = await chromium.launch({ headless: true });
+  const context = await browser.newContext({ viewport: { width: 1280, height: 800 } });
+  const page = await context.newPage();
+
+  try {
+    // Step 1: 로그인 페이지 접속 및 스크린샷
+    console.log("Step 1: 로그인 페이지 접속...");
+    await page.goto(`${BASE_URL}/login`, { waitUntil: "commit", timeout: 30000 });
+    await page.waitForTimeout(1500);
+    await page.screenshot({
+      path: path.join(SCREENSHOT_DIR, "01-login-page.png"),
+      fullPage: true,
+    });
+    console.log("  -> 01-login-page.png 저장됨");
+
+    // Step 2: 로그인
+    console.log("Step 2: 로그인...");
+    await page.fill("#userId", "admin");
+    await page.fill("#password", "1234");
+    await page.click('button[type="submit"]');
+    await page.waitForURL((url) => !url.pathname.includes("/login"), { timeout: 10000 }).catch(() => {});
+    await page.waitForTimeout(3000);
+
+    const currentUrl = page.url();
+    if (currentUrl.includes("/login")) {
+      console.log("  -> 로그인 실패, 현재 URL:", currentUrl);
+    } else {
+      console.log("  -> 로그인 성공, 리다이렉트:", currentUrl);
+
+      // Step 3: 메인 페이지로 이동 (대시보드)
+      if (!currentUrl.includes("/main") && !currentUrl.includes("/admin")) {
+        await page.goto(`${BASE_URL}/main`, { waitUntil: "load", timeout: 20000 });
+        await page.waitForTimeout(2000);
+      }
+
+      // 대시보드 전체 스크린샷
+      await page.screenshot({
+        path: path.join(SCREENSHOT_DIR, "02-dashboard.png"),
+        fullPage: true,
+      });
+      console.log("  -> 02-dashboard.png 저장됨");
+
+      // Step 4: 사이드바 포커스 스크린샷 (좌측 영역)
+      const sidebar = page.locator("aside");
+      if ((await sidebar.count()) > 0) {
+        await sidebar.first().screenshot({
+          path: path.join(SCREENSHOT_DIR, "03-sidebar.png"),
+        });
+        console.log("  -> 03-sidebar.png 저장됨");
+      }
+
+      // Step 5: 테이블/그리드 화면으로 이동하여 스타일 확인
+      console.log("Step 5: 테이블 화면 탐색...");
+      const menuLinks = page.locator('aside a[href*="/screens/"], aside [role="button"]');
+      const linkCount = await menuLinks.count();
+      if (linkCount > 0) {
+        await menuLinks.first().click();
+        await page.waitForTimeout(2500);
+        await page.screenshot({
+          path: path.join(SCREENSHOT_DIR, "04-table-screen.png"),
+          fullPage: false,
+        });
+        console.log("  -> 04-table-screen.png 저장됨");
+      } else {
+        // 메뉴 클릭으로 화면 이동 시도
+        const firstMenu = page.locator('aside [class*="cursor-pointer"]').first();
+        if ((await firstMenu.count()) > 0) {
+          await firstMenu.click();
+          await page.waitForTimeout(2500);
+          await page.screenshot({
+            path: path.join(SCREENSHOT_DIR, "04-table-screen.png"),
+            fullPage: false,
+          });
+          console.log("  -> 04-table-screen.png 저장됨");
+        }
+      }
+    }
+
+    await browser.close();
+    console.log("\n검증 완료. 스크린샷:", SCREENSHOT_DIR);
+  } catch (error) {
+    console.error("오류:", error);
+    await page.screenshot({
+      path: path.join(SCREENSHOT_DIR, "error.png"),
+      fullPage: true,
+    }).catch(() => {});
+    await browser.close();
+    process.exit(1);
+  }
+}
+
+main();
diff --git a/frontend/scripts/verify-button-layout-screens.ts b/frontend/scripts/verify-button-layout-screens.ts
new file mode 100644
index 00000000..34cf3cd4
--- /dev/null
+++ b/frontend/scripts/verify-button-layout-screens.ts
@@ -0,0 +1,130 @@
+/**
+ * 화면 156, 4155, 1053 검증: 버튼 레이아웃 및 가시성
+ */
+
+import { chromium } from "playwright";
+import * as path from "path";
+import * as fs from "fs";
+
+const BASE_URL = "http://localhost:9771";
+const SCREENSHOT_DIR = path.join(__dirname, "../verification-screenshots");
+
+async function loginIfNeeded(page: any) {
+  if (page.url().includes("/login")) {
+    await page.fill("#userId", "wace");
+    await page.fill("#password", "qlalfqjsgh11");
+    await page.locator('button[type="submit"]').first().click();
+    await page.waitForURL((u: URL) => !u.includes("/login"), { timeout: 15000 }).catch(() => {});
+    await page.waitForTimeout(2000);
+  }
+}
+
+async function verifyScreen(
+  page: any,
+  screenId: number,
+  report: Record<string, any>
+) {
+  await page.goto(`${BASE_URL}/screens/${screenId}`, { waitUntil: "load", timeout: 30000 });
+  await page.waitForTimeout(2000);
+  if (page.url().includes("/login")) {
+    await loginIfNeeded(page);
+    await page.goto(`${BASE_URL}/screens/${screenId}`, { waitUntil: "load", timeout: 30000 });
+    await page.waitForTimeout(2000);
+  }
+  await page.getByText("로딩중", { exact: false }).waitFor({ state: "hidden", timeout: 10000 }).catch(() => {});
+  await page.waitForTimeout(1500);
+
+  const info = await page.evaluate(() => {
+    const buttons = Array.from(document.querySelectorAll("button"));
+    const buttonDetails = buttons.slice(0, 20).map((btn) => {
+      const text = (btn as HTMLElement).innerText?.trim() || "";
+      const rect = (btn as HTMLElement).getBoundingClientRect();
+      const style = window.getComputedStyle(btn);
+      return {
+        text: text.substring(0, 50),
+        hasText: text.length > 0,
+        width: rect.width,
+        height: rect.height,
+        visible: rect.width > 0 && rect.height > 0,
+      };
+    });
+    const buttonsWithText = buttonDetails.filter((b) => b.hasText);
+    const table = document.querySelector("table");
+    const pagination = document.body.innerText.includes("표시") || document.body.innerText.includes("1/");
+    const splitPanel = document.querySelector("[class*='split'], [class*='Split'], [class*='border-r']");
+    return {
+      pageLoadsWithoutErrors: !document.body.innerText.includes("화면을 찾을 수 없습니다"),
+      totalButtons: buttons.length,
+      buttonsWithTextCount: buttonsWithText.length,
+      buttonsVisibleWithText: buttonsWithText.length > 0,
+      buttonDetails: buttonDetails.slice(0, 10),
+      tableVisible: !!table,
+      paginationVisible: !!pagination,
+      splitPanelVisible: !!splitPanel,
+      bodyScrollWidth: document.body.scrollWidth,
+      viewportWidth: window.innerWidth,
+      viewportHeight: window.innerHeight,
+      hasHorizontalOverflow: document.body.scrollWidth > window.innerWidth,
+      layoutFitsViewport: document.body.scrollWidth <= window.innerWidth,
+    };
+  });
+
+  report.pageLoadsWithoutErrors = info.pageLoadsWithoutErrors;
+  report.buttonsVisibleWithText = info.buttonsVisibleWithText;
+  report.buttonsWithTextCount = info.buttonsWithTextCount;
+  report.buttonDetails = info.buttonDetails;
+  report.tableVisible = info.tableVisible;
+  report.paginationVisible = info.paginationVisible;
+  report.splitPanelVisible = info.splitPanelVisible;
+  report.layoutFitsViewport = info.layoutFitsViewport;
+  report.hasHorizontalOverflow = info.hasHorizontalOverflow;
+  report.details = {
+    bodyScrollWidth: info.bodyScrollWidth,
+    viewportWidth: info.viewportWidth,
+    viewportHeight: info.viewportHeight,
+  };
+
+  await page.screenshot({
+    path: path.join(SCREENSHOT_DIR, `screen-${screenId}-buttons.png`),
+    fullPage: true,
+  });
+  console.log(`screen-${screenId}-buttons.png saved`);
+}
+
+async function main() {
+  const browser = await chromium.launch({ headless: true });
+  const context = await browser.newContext({ viewport: { width: 1280, height: 900 } });
+  const page = await context.newPage();
+
+  const report: Record<string, any> = { screen156: {}, screen4155: {}, screen1053: {} };
+
+  try {
+    await page.goto(`${BASE_URL}/login`, { waitUntil: "load", timeout: 30000 });
+    await page.waitForTimeout(1000);
+    await loginIfNeeded(page);
+    await page.waitForTimeout(2000);
+
+    await verifyScreen(page, 156, report.screen156);
+    await verifyScreen(page, 4155, report.screen4155);
+    await verifyScreen(page, 1053, report.screen1053);
+
+    console.log("\n=== Report ===");
+    console.log(JSON.stringify(report, null, 2));
+
+    fs.writeFileSync(
+      path.join(SCREENSHOT_DIR, "button-layout-screens-report.json"),
+      JSON.stringify(report, null, 2)
+    );
+  } catch (error: any) {
+    console.error("Error:", error.message);
+    report.error = error.message;
+    await page.screenshot({
+      path: path.join(SCREENSHOT_DIR, "button-layout-error.png"),
+      fullPage: true,
+    }).catch(() => {});
+  } finally {
+    await browser.close();
+  }
+}
+
+main();
diff --git a/frontend/scripts/verify-overlay-buttons.ts b/frontend/scripts/verify-overlay-buttons.ts
new file mode 100644
index 00000000..42b24731
--- /dev/null
+++ b/frontend/scripts/verify-overlay-buttons.ts
@@ -0,0 +1,166 @@
+/**
+ * 화면 1053, 156 버튼 위치 검증
+ * 1053: overlay buttons within split panel
+ * 156: buttons in separate row above table
+ */
+
+import { chromium } from "playwright";
+import * as path from "path";
+import * as fs from "fs";
+
+const BASE_URL = "http://localhost:9771";
+const SCREENSHOT_DIR = path.join(__dirname, "../verification-screenshots");
+
+async function main() {
+  const browser = await chromium.launch({ headless: true });
+  const context = await browser.newContext({ viewport: { width: 1280, height: 900 } });
+  const page = await context.newPage();
+
+  const report: Record<string, any> = { screen1053: {}, screen156: {} };
+
+  try {
+    await page.goto(`${BASE_URL}/login`, { waitUntil: "domcontentloaded", timeout: 60000 });
+    await page.waitForTimeout(2000);
+    await page.fill("#userId", "wace");
+    await page.fill("#password", "qlalfqjsgh11");
+    await page.locator('button[type="submit"]').first().click();
+    await page.waitForURL((u: URL) => !u.includes("/login"), { timeout: 20000 }).catch(() => {});
+    await page.waitForTimeout(3000);
+
+    await page.goto(`${BASE_URL}/screens/156`, { waitUntil: "domcontentloaded", timeout: 45000 });
+    await page.waitForTimeout(2000);
+    if (page.url().includes("/login")) {
+      await page.fill("#userId", "wace");
+      await page.fill("#password", "qlalfqjsgh11");
+      await page.locator('button[type="submit"]').first().click();
+      await page.waitForURL((u: URL) => !u.includes("/login"), { timeout: 20000 }).catch(() => {});
+      await page.waitForTimeout(3000);
+    }
+
+    // Screen 1053
+    await page.goto(`${BASE_URL}/screens/1053?menuObjid=1762421920304`, { waitUntil: "domcontentloaded", timeout: 60000 });
+    await page.waitForTimeout(3000);
+    if (page.url().includes("/login")) {
+      await page.fill("#userId", "wace");
+      await page.fill("#password", "qlalfqjsgh11");
+      await page.locator('button[type="submit"]').first().click();
+      await page.waitForURL((u: URL) => !u.includes("/login"), { timeout: 25000 }).catch(() => {});
+      await page.waitForTimeout(5000);
+      await page.goto(`${BASE_URL}/screens/1053?menuObjid=1762421920304`, { waitUntil: "domcontentloaded", timeout: 60000 });
+      await page.waitForTimeout(3000);
+    }
+    await page.getByText("화면을 불러오는 중", { exact: false }).waitFor({ state: "hidden", timeout: 35000 }).catch(() => {});
+    await page.waitForTimeout(40000);
+
+    const splitPanelEl = page.locator("[class*='border-r'], [class*='split']").first();
+    await splitPanelEl.waitFor({ state: "visible", timeout: 15000 }).catch(() => {});
+    await page.waitForTimeout(3000);
+
+    const info1053 = await page.evaluate(() => {
+      const splitPanel = document.querySelector("[class*='border-r']") || document.querySelector("main");
+      const mainContent = document.querySelector("main") || document.body;
+      const allBtns = Array.from(document.querySelectorAll("button"));
+      const buttons = allBtns.filter((b) => {
+        const t = (b as HTMLElement).innerText?.trim() || "";
+        const r = (b as HTMLElement).getBoundingClientRect();
+        return t.length > 1 && r.x > 250 && t.match(/등록|수정|삭제|품목|테이블|결재|수주|출하/);
+      });
+      const splitRect = splitPanel ? (splitPanel as HTMLElement).getBoundingClientRect() : null;
+      const mainRect = mainContent ? (mainContent as HTMLElement).getBoundingClientRect() : null;
+
+      const buttonPositions = buttons.map((b) => {
+        const r = (b as HTMLElement).getBoundingClientRect();
+        const text = (b as HTMLElement).innerText?.trim().substring(0, 20);
+        return {
+          text,
+          x: r.x,
+          y: r.y,
+          right: r.right,
+          width: r.width,
+          height: r.height,
+          isWithinSplitPanel: splitRect
+            ? r.y >= splitRect.top - 20 && r.y <= splitRect.bottom + 20
+            : null,
+          isAboveMain: mainRect ? r.y < mainRect.top + 100 : null,
+        };
+      });
+
+      const table = document.querySelector("table");
+      const tableRect = table ? (table as HTMLElement).getBoundingClientRect() : null;
+      const buttonsAboveTable = buttonPositions.every((p) => tableRect && p.y < tableRect.top - 10);
+
+      return {
+        splitPanelVisible: !!splitPanel,
+        splitPanelRect: splitRect ? { top: splitRect.top, bottom: splitRect.bottom, left: splitRect.left, right: splitRect.right } : null,
+        mainRect: mainRect ? { top: mainRect.top, bottom: mainRect.bottom } : null,
+        buttonCount: buttons.length,
+        buttonPositions,
+        buttonsOverlaidOnSplitPanel: buttonPositions.some((p) => p.isWithinSplitPanel),
+        buttonsInSeparateRowAbove: buttonsAboveTable,
+        tableTop: tableRect?.top ?? null,
+      };
+    });
+
+    report.screen1053 = info1053;
+    await page.screenshot({ path: path.join(SCREENSHOT_DIR, "overlay-1053.png"), fullPage: true });
+    console.log("overlay-1053.png saved");
+
+    // Screen 156
+    await page.goto(`${BASE_URL}/screens/156?menuObjid=1762421920156`, { waitUntil: "domcontentloaded", timeout: 45000 });
+    await page.waitForTimeout(3000);
+    await page.getByText("화면을 불러오는 중", { exact: false }).waitFor({ state: "hidden", timeout: 35000 }).catch(() => {});
+    await page.waitForTimeout(40000);
+
+    const table156 = page.locator("table tbody tr").first();
+    await table156.waitFor({ state: "visible", timeout: 15000 }).catch(() => {});
+    await page.waitForTimeout(3000);
+
+    const info156 = await page.evaluate(() => {
+      const table = document.querySelector("table");
+      const tableRect = table ? (table as HTMLElement).getBoundingClientRect() : null;
+      const buttons = Array.from(document.querySelectorAll("button")).filter(
+        (b) => ((b as HTMLElement).innerText?.trim() || "").match(/결재|수주|수정|삭제|출하|테이블/)
+      );
+      const buttonPositions = buttons.map((b) => {
+        const r = (b as HTMLElement).getBoundingClientRect();
+        const text = (b as HTMLElement).innerText?.trim().substring(0, 20);
+        return {
+          text,
+          x: r.x,
+          y: r.y,
+          right: r.right,
+          width: r.width,
+          isAboveTable: tableRect ? r.y < tableRect.top - 5 : null,
+        };
+      });
+      const allButtonsAboveTable = buttonPositions.every((p) => p.isAboveTable);
+
+      return {
+        tableVisible: !!table,
+        tableTop: tableRect?.top ?? null,
+        buttonCount: buttons.length,
+        buttonPositions,
+        buttonsInSeparateRowAboveTable: allButtonsAboveTable,
+      };
+    });
+
+    report.screen156 = info156;
+    await page.screenshot({ path: path.join(SCREENSHOT_DIR, "overlay-156.png"), fullPage: true });
+    console.log("overlay-156.png saved");
+
+    fs.writeFileSync(
+      path.join(SCREENSHOT_DIR, "overlay-report.json"),
+      JSON.stringify(report, null, 2)
+    );
+    console.log("\n=== Report ===");
+    console.log(JSON.stringify(report, null, 2));
+  } catch (error: any) {
+    console.error("Error:", error.message);
+    report.error = error.message;
+    await page.screenshot({ path: path.join(SCREENSHOT_DIR, "overlay-error.png"), fullPage: true }).catch(() => {});
+  } finally {
+    await browser.close();
+  }
+}
+
+main();
diff --git a/frontend/scripts/verify-responsive-screens.ts b/frontend/scripts/verify-responsive-screens.ts
new file mode 100644
index 00000000..dbbf18e9
--- /dev/null
+++ b/frontend/scripts/verify-responsive-screens.ts
@@ -0,0 +1,126 @@
+/**
+ * 반응형 렌더링 검증: 화면 1053, 2089, 156, 4155
+ * 로그인: admin / wace1234!
+ */
+
+import { chromium } from "playwright";
+import * as path from "path";
+import * as fs from "fs";
+
+const BASE_URL = "http://localhost:9771";
+const SCREENSHOT_DIR = path.join(__dirname, "../verification-screenshots");
+
+async function main() {
+  const browser = await chromium.launch({ headless: true });
+  const context = await browser.newContext({ viewport: { width: 1280, height: 900 } });
+  const page = await context.newPage();
+
+  const report: Record<string, any> = {};
+
+  try {
+    // 1-3: Login
+    await page.goto(`${BASE_URL}/login`, { waitUntil: "load", timeout: 30000 });
+    await page.waitForTimeout(1500);
+    await page.fill("#userId", "admin");
+    await page.fill("#password", "wace1234!");
+    await page.locator('button[type="submit"]').first().click();
+    await page.waitForTimeout(3000);
+    if (page.url().includes("/login")) {
+      await page.fill("#userId", "wace");
+      await page.fill("#password", "qlalfqjsgh11");
+      await page.locator('button[type="submit"]').first().click();
+      await page.waitForTimeout(3000);
+    }
+    await page.waitForURL((u: URL) => !u.includes("/login"), { timeout: 15000 }).catch(() => {});
+    await page.waitForTimeout(2000);
+    await page.getByText("로딩중", { exact: false }).waitFor({ state: "hidden", timeout: 10000 }).catch(() => {});
+
+    async function captureAndVerify(screenId: number, screenName: string) {
+      await page.goto(`${BASE_URL}/screens/${screenId}`, { waitUntil: "domcontentloaded", timeout: 45000 });
+      await page.waitForTimeout(2000);
+      if (page.url().includes("/login")) {
+        await page.fill("#userId", "wace");
+        await page.fill("#password", "qlalfqjsgh11");
+        await page.locator('button[type="submit"]').first().click();
+        await page.waitForURL((u: URL) => !u.includes("/login"), { timeout: 15000 }).catch(() => {});
+        await page.waitForTimeout(2000);
+        await page.goto(`${BASE_URL}/screens/${screenId}`, { waitUntil: "domcontentloaded", timeout: 45000 });
+        await page.waitForTimeout(2000);
+      }
+      await page.getByText("로딩중", { exact: false }).waitFor({ state: "hidden", timeout: 10000 }).catch(() => {});
+      await page.getByText("화면을 불러오는 중", { exact: false }).waitFor({ state: "hidden", timeout: 25000 }).catch(() => {});
+      await page.waitForTimeout(2000);
+
+      const info = await page.evaluate(() => {
+        const buttons = Array.from(document.querySelectorAll("button"));
+        const btnWithText = buttons.filter((b) => (b as HTMLElement).innerText?.trim().length > 0);
+        const splitPanel = document.querySelector("[class*='split'], [class*='Split'], [class*='border-r']");
+        const leftPanel = document.querySelector("[class*='border-r']");
+        const table = document.querySelector("table");
+        const thead = document.querySelector("thead");
+        const tbody = document.querySelector("tbody");
+        const pagination = document.body.innerText.includes("표시") || document.body.innerText.includes("1/");
+        const bodyText = document.body.innerText;
+        const hasOverlap = bodyText.includes("화면을 찾을 수 없습니다") ? false : null;
+
+        const btnDetails = btnWithText.slice(0, 5).map((b) => ({
+          text: (b as HTMLElement).innerText?.trim().substring(0, 30),
+          rect: (b as HTMLElement).getBoundingClientRect(),
+        }));
+
+        return {
+          pageLoadsWithoutErrors: !bodyText.includes("화면을 찾을 수 없습니다"),
+          buttonsVisible: btnWithText.length > 0,
+          buttonsCount: btnWithText.length,
+          buttonDetails: btnDetails,
+          splitPanelVisible: !!splitPanel,
+          leftPanelVisible: !!leftPanel,
+          tableVisible: !!table && !!thead && !!tbody,
+          paginationVisible: !!pagination,
+          bodyScrollWidth: document.body.scrollWidth,
+          viewportWidth: window.innerWidth,
+          viewportHeight: window.innerHeight,
+          hasHorizontalOverflow: document.body.scrollWidth > window.innerWidth,
+        };
+      });
+
+      await page.screenshot({
+        path: path.join(SCREENSHOT_DIR, `responsive-${screenId}.png`),
+        fullPage: true,
+      });
+      console.log(`responsive-${screenId}.png saved`);
+
+      return { screenId, screenName, ...info };
+    }
+
+    // 4: Screen 1053 - 거래처관리
+    report.screen1053 = await captureAndVerify(1053, "거래처관리 - split panel custom mode");
+
+    // 5: Screen 2089 - BOM관리
+    report.screen2089 = await captureAndVerify(2089, "BOM관리 - split panel");
+
+    // 6: Screen 156 - 수주관리
+    report.screen156 = await captureAndVerify(156, "수주관리 - regular screen");
+
+    // 7: Screen 4155 - 작업지시
+    report.screen4155 = await captureAndVerify(4155, "작업지시 - buttons at bottom");
+
+    fs.writeFileSync(
+      path.join(SCREENSHOT_DIR, "responsive-report.json"),
+      JSON.stringify(report, null, 2)
+    );
+    console.log("\n=== Report ===");
+    console.log(JSON.stringify(report, null, 2));
+  } catch (error: any) {
+    console.error("Error:", error.message);
+    report.error = error.message;
+    await page.screenshot({
+      path: path.join(SCREENSHOT_DIR, "responsive-error.png"),
+      fullPage: true,
+    }).catch(() => {});
+  } finally {
+    await browser.close();
+  }
+}
+
+main();
diff --git a/frontend/scripts/verify-screen-1053-admin.ts b/frontend/scripts/verify-screen-1053-admin.ts
new file mode 100644
index 00000000..f98bc53e
--- /dev/null
+++ b/frontend/scripts/verify-screen-1053-admin.ts
@@ -0,0 +1,103 @@
+/**
+ * 화면 1053 검증 - admin/1234 로그인
+ */
+
+import { chromium } from "playwright";
+import * as path from "path";
+import * as fs from "fs";
+
+const BASE_URL = "http://localhost:9771";
+const SCREENSHOT_DIR = path.join(__dirname, "../verification-screenshots");
+
+async function main() {
+  const browser = await chromium.launch({ headless: true });
+  const context = await browser.newContext({ viewport: { width: 1280, height: 900 } });
+  const page = await context.newPage();
+
+  const report: Record<string, any> = {};
+
+  try {
+    await page.goto(`${BASE_URL}/login`, { waitUntil: "domcontentloaded", timeout: 60000 });
+    await page.waitForTimeout(2000);
+
+    await page.fill("#userId", "admin");
+    await page.fill("#password", "1234");
+    await page.locator('button[type="submit"]').first().click();
+    await page.waitForURL((u: URL) => !u.includes("/login"), { timeout: 20000 }).catch(() => {});
+    await page.waitForTimeout(3000);
+
+    if (page.url().includes("/login")) {
+      await page.fill("#userId", "wace");
+      await page.fill("#password", "qlalfqjsgh11");
+      await page.locator('button[type="submit"]').first().click();
+      await page.waitForURL((u: URL) => !u.includes("/login"), { timeout: 20000 }).catch(() => {});
+      await page.waitForTimeout(3000);
+    }
+
+    await page.goto(`${BASE_URL}/screens/1053`, { waitUntil: "domcontentloaded", timeout: 60000 });
+    await page.waitForTimeout(3000);
+    if (page.url().includes("/login")) {
+      await page.fill("#userId", "wace");
+      await page.fill("#password", "qlalfqjsgh11");
+      await page.locator('button[type="submit"]').first().click();
+      await page.waitForURL((u: URL) => !u.includes("/login"), { timeout: 20000 }).catch(() => {});
+      await page.waitForTimeout(3000);
+      await page.goto(`${BASE_URL}/screens/1053`, { waitUntil: "domcontentloaded", timeout: 60000 });
+      await page.waitForTimeout(3000);
+    }
+
+    await page.getByText("화면을 불러오는 중", { exact: false }).waitFor({ state: "hidden", timeout: 35000 }).catch(() => {});
+    await page.waitForTimeout(30000);
+
+    const table = page.locator("table tbody tr").first();
+    await table.waitFor({ state: "visible", timeout: 20000 }).catch(() => {});
+    await page.waitForTimeout(3000);
+
+    const info = await page.evaluate(() => {
+      const buttons = Array.from(document.querySelectorAll("button")).filter((b) => {
+        const t = (b as HTMLElement).innerText?.trim() || "";
+        const r = (b as HTMLElement).getBoundingClientRect();
+        return t.length > 1 && r.x > 250;
+      });
+      const leftPanel = document.querySelector("[class*='border-r']");
+      const tables = document.querySelectorAll("table");
+      const bodyText = document.body.innerText;
+
+      return {
+        buttonCount: buttons.length,
+        buttonDetails: buttons.slice(0, 15).map((b) => {
+          const r = (b as HTMLElement).getBoundingClientRect();
+          return {
+            text: (b as HTMLElement).innerText?.trim().substring(0, 30),
+            x: Math.round(r.x),
+            y: Math.round(r.y),
+            width: Math.round(r.width),
+            height: Math.round(r.height),
+          };
+        }),
+        splitPanelVisible: !!leftPanel || bodyText.includes("공급처") || bodyText.includes("좌측에서"),
+        tableCount: tables.length,
+        hasExcelDownload: bodyText.includes("엑셀") || bodyText.includes("다운로드") || bodyText.includes("업로드"),
+      };
+    });
+
+    report.screen1053 = info;
+    await page.screenshot({ path: path.join(SCREENSHOT_DIR, "screen-1053-admin.png"), fullPage: true });
+    console.log("screen-1053-admin.png saved");
+
+    fs.writeFileSync(
+      path.join(SCREENSHOT_DIR, "screen-1053-admin-report.json"),
+      JSON.stringify(report, null, 2)
+    );
+    console.log("\n=== Report ===");
+    console.log(JSON.stringify(report, null, 2));
+  } catch (error: any) {
+    console.error("Error:", error.message);
+    report.error = error.message;
+    await page.screenshot({ path: path.join(SCREENSHOT_DIR, "screen-1053-admin-error.png"), fullPage: true }).catch(() => {});
+  } finally {
+    await browser.close();
+  }
+}
+
+main();
diff --git a/frontend/scripts/verify-screen-1053.ts b/frontend/scripts/verify-screen-1053.ts
new file mode 100644
index 00000000..1f0cb96f
--- /dev/null
+++ b/frontend/scripts/verify-screen-1053.ts
@@ -0,0 +1,105 @@
+/**
+ * 화면 1053 검증: split-panel 레이아웃
+ * - 좌/우 패널, 버튼 오버레이, 높이 채움, overflow 확인
+ */
+
+import { chromium } from "playwright";
+import * as path from "path";
+import * as fs from "fs";
+
+const BASE_URL = "http://localhost:9771";
+const SCREENSHOT_DIR = path.join(__dirname, "../verification-screenshots");
+
+async function main() {
+  const browser = await chromium.launch({ headless: true });
+  const context = await browser.newContext({ viewport: { width: 1280, height: 900 } });
+  const page = await context.newPage();
+
+  const report: Record<string, any> = {};
+
+  try {
+    await page.goto(`${BASE_URL}/screens/1053`, { waitUntil: "load", timeout: 30000 });
+    await page.waitForTimeout(2000);
+
+    if (page.url().includes("/login")) {
+      await page.fill("#userId", "wace");
+      await page.fill("#password", "qlalfqjsgh11");
+      await page.locator('button[type="submit"]').first().click();
+      await page.waitForURL((u) => !u.includes("/login"), { timeout: 15000 }).catch(() => {});
+      await page.waitForTimeout(2000);
+      await page.goto(`${BASE_URL}/screens/1053`, { waitUntil: "load", timeout: 30000 });
+      await page.waitForTimeout(2000);
+    }
+
+    await page.getByText("로딩중", { exact: false }).waitFor({ state: "hidden", timeout: 10000 }).catch(() => {});
+    await page.waitForTimeout(1500);
+
+    report.pageLoadsWithoutErrors = (await page.locator('text="화면을 찾을 수 없습니다"').count()) === 0;
+
+    const splitPanel = await page.evaluate(() => {
+      const leftPanel = document.querySelector("[class*='split'][class*='left'], [data-panel='left'], [class*='left-panel']");
+      const rightPanel = document.querySelector("[class*='split'][class*='right'], [data-panel='right'], [class*='right-panel']");
+      const resizable = document.querySelector("[class*='resize'], [class*='ResizablePanel]");
+      const panels = document.querySelectorAll("[class*='panel'], [data-panel]");
+      return {
+        hasLeftPanel: !!leftPanel || document.body.innerText.includes("left") || panels.length >= 2,
+        hasRightPanel: !!rightPanel || panels.length >= 2,
+        panelCount: panels.length,
+        resizableCount: document.querySelectorAll("[class*='ResizablePanel'], [class*='resize']").length,
+      };
+    });
+    report.splitPanelVisible = splitPanel.panelCount >= 2 || splitPanel.resizableCount > 0;
+
+    const twoPanels = await page.locator("[class*='panel'], [data-panel], [class*='split']").count();
+    report.twoPanelsFound = twoPanels >= 2;
+
+    const buttons = await page.locator("button").count();
+    const buttonsTopRight = await page.evaluate(() => {
+      const btns = Array.from(document.querySelectorAll("button"));
+      const viewportW = window.innerWidth;
+      return btns.filter((b) => {
+        const r = b.getBoundingClientRect();
+        return r.right > viewportW * 0.5 && r.top < 200;
+      }).length;
+    });
+    report.buttonsVisible = buttons > 0;
+    report.buttonsInTopRightArea = buttonsTopRight;
+
+    const layoutFillsHeight = await page.evaluate(() => {
+      const main = document.querySelector("main") || document.body;
+      const h = (main as HTMLElement).offsetHeight;
+      return h >= window.innerHeight * 0.8;
+    });
+    report.layoutFillsHeight = layoutFillsHeight;
+
+    const overflow = await page.evaluate(() => ({
+      bodyScrollWidth: document.body.scrollWidth,
+      bodyScrollHeight: document.body.scrollHeight,
+      viewportWidth: window.innerWidth,
+      viewportHeight: window.innerHeight,
+      hasHorizontalOverflow: document.body.scrollWidth > window.innerWidth,
+      hasVerticalOverflow: document.body.scrollHeight > window.innerHeight,
+    }));
+    report.noContentOverflowsViewport = !overflow.hasHorizontalOverflow;
+    report.overflowDetails = overflow;
+
+    await page.screenshot({ path: path.join(SCREENSHOT_DIR, "screen-1053-snapshot.png"), fullPage: true });
+    console.log("screen-1053-snapshot.png saved");
+
+    console.log("\n=== Report ===");
+    console.log(JSON.stringify(report, null, 2));
+
+    fs.writeFileSync(
+      path.join(SCREENSHOT_DIR, "screen-1053-report.json"),
+      JSON.stringify(report, null, 2)
+    );
+  } catch (error: any) {
+    console.error("Error:", error.message);
+    report.error = error.message;
+    await page.screenshot({ path: path.join(SCREENSHOT_DIR, "screen-1053-error.png"), fullPage: true }).catch(() => {});
+  } finally {
+    await browser.close();
+  }
+}
+
+main();
diff --git a/frontend/scripts/verify-screen-1244-layout.ts b/frontend/scripts/verify-screen-1244-layout.ts
new file mode 100644
index 00000000..361ef742
--- /dev/null
+++ b/frontend/scripts/verify-screen-1244-layout.ts
@@ -0,0 +1,156 @@
+/**
+ * 화면 1244 검증: table-list 레이아웃 (데스크톱 + 모바일)
+ */
+
+import { chromium } from "playwright";
+import * as path from "path";
+import * as fs from "fs";
+
+const BASE_URL = "http://localhost:9771";
+const SCREENSHOT_DIR = path.join(__dirname, "../verification-screenshots");
+
+async function main() {
+  const browser = await chromium.launch({ headless: true });
+  const context = await browser.newContext({ viewport: { width: 1280, height: 900 } });
+  const page = await context.newPage();
+
+  const report: Record<string, any> = { desktop: {}, mobile: {} };
+
+  try {
+    await page.goto(`${BASE_URL}/screens/1244`, { waitUntil: "load", timeout: 30000 });
+    await page.waitForTimeout(2000);
+
+    if (page.url().includes("/login")) {
+      await page.fill("#userId", "wace");
+      await page.fill("#password", "qlalfqjsgh11");
+      await page.locator('button[type="submit"]').first().click();
+      await page.waitForURL((u) => !u.includes("/login"), { timeout: 15000 }).catch(() => {});
+      await page.waitForTimeout(2000);
+      await page.goto(`${BASE_URL}/screens/1244`, { waitUntil: "load", timeout: 30000 });
+      await page.waitForTimeout(2000);
+    }
+
+    await page.getByText("로딩중", { exact: false }).waitFor({ state: "hidden", timeout: 10000 }).catch(() => {});
+    await page.waitForTimeout(2000);
+
+    report.desktop.pageLoadsWithoutErrors =
+      (await page.locator('text="화면을 찾을 수 없습니다"').count()) === 0;
+
+    const desktopInfo = await page.evaluate(() => {
+      const table = document.querySelector("table");
+      const thead = document.querySelector("thead");
+      const tbody = document.querySelector("tbody");
+      const ths = document.querySelectorAll("thead th");
+      const buttons = document.querySelectorAll("button");
+      const searchInputs = document.querySelectorAll('input[type="text"], input[type="search"], select');
+      const pagination = document.body.innerText.includes("표시") ||
+        document.body.innerText.includes("1/") ||
+        document.body.innerText.includes("페이지") ||
+        document.querySelector("[class*='pagination'], [class*='Pagination']");
+
+      let buttonsBetweenSearchAndTable = 0;
+      const searchY = searchInputs.length > 0
+        ? (searchInputs[0] as HTMLElement).getBoundingClientRect().bottom
+        : 0;
+      const tableY = table ? (table as HTMLElement).getBoundingClientRect().top : 0;
+
+      buttons.forEach((btn) => {
+        const rect = (btn as HTMLElement).getBoundingClientRect();
+        if (rect.top >= searchY - 20 && rect.top <= tableY + 100) buttonsBetweenSearchAndTable++;
+      });
+
+      return {
+        tableVisible: !!table && !!thead && !!tbody,
+        columnCount: ths.length,
+        buttonsVisible: buttons.length > 0,
+        buttonsBetweenSearchAndTable,
+        paginationVisible: !!pagination,
+        bodyScrollWidth: document.body.scrollWidth,
+        viewportWidth: window.innerWidth,
+        hasHorizontalOverflow: document.body.scrollWidth > window.innerWidth,
+        tableScrollWidth: table ? (table as HTMLElement).scrollWidth : 0,
+        tableClientWidth: table ? (table as HTMLElement).clientWidth : 0,
+      };
+    });
+
+    report.desktop.buttonsVisible = desktopInfo.buttonsVisible;
+    report.desktop.buttonsBetweenSearchAndTable = desktopInfo.buttonsBetweenSearchAndTable;
+    report.desktop.tableVisible = desktopInfo.tableVisible;
+    report.desktop.columnCount = desktopInfo.columnCount;
+    report.desktop.paginationVisible = desktopInfo.paginationVisible;
+    report.desktop.noHorizontalOverflow = !desktopInfo.hasHorizontalOverflow;
+    report.desktop.overflowDetails = {
+      bodyScrollWidth: desktopInfo.bodyScrollWidth,
+      viewportWidth: desktopInfo.viewportWidth,
+      tableScrollWidth: desktopInfo.tableScrollWidth,
+      tableClientWidth: desktopInfo.tableClientWidth,
+    };
+
+    await page.screenshot({
+      path: path.join(SCREENSHOT_DIR, "screen-1244-desktop.png"),
+      fullPage: true,
+    });
+    console.log("screen-1244-desktop.png saved");
+
+    await page.setViewportSize({ width: 768, height: 900 });
+    await page.waitForTimeout(1500);
+
+    const mobileInfo = await page.evaluate(() => {
+      const table = document.querySelector("table");
+      const thead = document.querySelector("thead");
+      const tbody = document.querySelector("tbody");
+      const ths = document.querySelectorAll("thead th");
+      const buttons = document.querySelectorAll("button");
+      const pagination = document.body.innerText.includes("표시") ||
+        document.body.innerText.includes("1/") ||
+        document.body.innerText.includes("페이지") ||
+        document.querySelector("[class*='pagination'], [class*='Pagination']");
+
+      return {
+        tableVisible: !!table && !!thead && !!tbody,
+        columnCount: ths.length,
+        buttonsVisible: buttons.length > 0,
+        paginationVisible: !!pagination,
+        bodyScrollWidth: document.body.scrollWidth,
+        viewportWidth: window.innerWidth,
+        hasHorizontalOverflow: document.body.scrollWidth > window.innerWidth,
+      };
+    });
+
+    report.mobile.pageLoadsWithoutErrors = report.desktop.pageLoadsWithoutErrors;
+    report.mobile.buttonsVisible = mobileInfo.buttonsVisible;
+    report.mobile.tableVisible = mobileInfo.tableVisible;
+    report.mobile.columnCount = mobileInfo.columnCount;
+    report.mobile.paginationVisible = mobileInfo.paginationVisible;
+    report.mobile.noHorizontalOverflow = !mobileInfo.hasHorizontalOverflow;
+    report.mobile.overflowDetails = {
+      bodyScrollWidth: mobileInfo.bodyScrollWidth,
+      viewportWidth: mobileInfo.viewportWidth,
+    };
+
+    await page.screenshot({
+      path: path.join(SCREENSHOT_DIR, "screen-1244-mobile-768.png"),
+      fullPage: true,
+    });
+    console.log("screen-1244-mobile-768.png saved");
+
+    console.log("\n=== Report ===");
+    console.log(JSON.stringify(report, null, 2));
+
+    fs.writeFileSync(
+      path.join(SCREENSHOT_DIR, "screen-1244-layout-report.json"),
+      JSON.stringify(report, null, 2)
+    );
+  } catch (error: any) {
+    console.error("Error:", error.message);
+    report.error = error.message;
+    await page.screenshot({
+      path: path.join(SCREENSHOT_DIR, "screen-1244-error.png"),
+      fullPage: true,
+    }).catch(() => {});
+  } finally {
+    await browser.close();
+  }
+}
+
+main();
diff --git a/frontend/scripts/verify-screen-1244-refresh.ts b/frontend/scripts/verify-screen-1244-refresh.ts
new file mode 100644
index 00000000..aaeb7b9d
--- /dev/null
+++ b/frontend/scripts/verify-screen-1244-refresh.ts
@@ -0,0 +1,143 @@
+/**
+ * 화면 1244 새로고침 후 상세 검증
+ * - data-screen-runtime, 테이블, body의 scrollWidth/clientWidth 확인
+ */
+
+import { chromium } from "playwright";
+import * as path from "path";
+import * as fs from "fs";
+
+const BASE_URL = "http://localhost:9771";
+const SCREENSHOT_DIR = path.join(__dirname, "../verification-screenshots");
+
+async function main() {
+  const browser = await chromium.launch({ headless: true });
+  const context = await browser.newContext({ viewport: { width: 1280, height: 900 } });
+  const page = await context.newPage();
+
+  const results: Record<string, number | string | null> = {};
+
+  try {
+    // 로그인
+    await page.goto(`${BASE_URL}/login`, { waitUntil: "load", timeout: 30000 });
+    await page.waitForTimeout(1000);
+    await page.fill("#userId", "wace");
+    await page.fill("#password", "qlalfqjsgh11");
+    await page.locator('button[type="submit"]').first().click();
+    await page.waitForURL((u) => !u.includes("/login"), { timeout: 15000 }).catch(() => {});
+    await page.waitForTimeout(2000);
+
+    // /screens/1244 접속
+    await page.goto(`${BASE_URL}/screens/1244`, { waitUntil: "load", timeout: 45000 });
+    await page.getByText("로딩중", { exact: false }).waitFor({ state: "hidden", timeout: 10000 }).catch(() => {});
+    await page.waitForTimeout(2000);
+
+    // Step 1: 새로고침 (Ctrl+Shift+R - hard refresh)
+    console.log("Step 1: 새로고침 (Ctrl+Shift+R)...");
+    await page.keyboard.press("Control+Shift+r");
+    await page.waitForLoadState("load");
+    await page.waitForTimeout(3000);
+    await page.getByText("로딩중", { exact: false }).waitFor({ state: "hidden", timeout: 10000 }).catch(() => {});
+
+    // Step 2: 첫 스크린샷
+    await page.screenshot({ path: path.join(SCREENSHOT_DIR, "verify-06.png"), fullPage: true });
+    console.log("verify-06.png 저장");
+
+    // Step 3: JavaScript로 dimension 확인
+    const dims = await page.evaluate(() => {
+      const screenRuntime = document.querySelector("[data-screen-runtime]");
+      const table = document.querySelector("table");
+      const body = document.body;
+      const html = document.documentElement;
+
+      const tableContainer = table?.closest("[style*='overflow'], [class*='overflow']") || table?.parentElement;
+
+      return {
+        screenRuntime: screenRuntime
+          ? {
+              offsetWidth: (screenRuntime as HTMLElement).offsetWidth,
+              scrollWidth: (screenRuntime as HTMLElement).scrollWidth,
+              clientWidth: (screenRuntime as HTMLElement).clientWidth,
+            }
+          : null,
+        table: table
+          ? {
+              offsetWidth: table.offsetWidth,
+              scrollWidth: table.scrollWidth,
+              clientWidth: table.clientWidth,
+            }
+          : null,
+        tableContainer: tableContainer
+          ? {
+              clientWidth: (tableContainer as HTMLElement).clientWidth,
+              scrollWidth: (tableContainer as HTMLElement).scrollWidth,
+              offsetWidth: (tableContainer as HTMLElement).offsetWidth,
+            }
+          : null,
+        body: {
+          scrollWidth: body.scrollWidth,
+          clientWidth: body.clientWidth,
+          offsetWidth: body.offsetWidth,
+        },
+        html: {
+          scrollWidth: html.scrollWidth,
+          clientWidth: html.clientWidth,
+        },
+        viewport: {
+          innerWidth: window.innerWidth,
+          innerHeight: window.innerHeight,
+        },
+      };
+    });
+
+    results.screenRuntime_offsetWidth = dims.screenRuntime?.offsetWidth ?? null;
+    results.screenRuntime_scrollWidth = dims.screenRuntime?.scrollWidth ?? null;
+    results.screenRuntime_clientWidth = dims.screenRuntime?.clientWidth ?? null;
+    results.table_offsetWidth = dims.table?.offsetWidth ?? null;
+    results.table_scrollWidth = dims.table?.scrollWidth ?? null;
+    results.table_clientWidth = dims.table?.clientWidth ?? null;
+    results.tableContainer_clientWidth = dims.tableContainer?.clientWidth ?? null;
+    results.tableContainer_scrollWidth = dims.tableContainer?.scrollWidth ?? null;
+    results.body_scrollWidth = dims.body.scrollWidth;
+    results.body_clientWidth = dims.body.clientWidth;
+    results.viewport_innerWidth = dims.viewport.innerWidth;
+
+    // Step 4: 가로 overflow 확인
+    const hasOverflow = dims.body.scrollWidth > dims.viewport.innerWidth;
+    results.bodyOverflowX = hasOverflow;
+
+    // Step 5: 두 번째 스크린샷
+    await page.screenshot({ path: path.join(SCREENSHOT_DIR, "verify-07.png"), fullPage: true });
+    console.log("verify-07.png 저장");
+
+    console.log("\n=== 검증 결과 ===");
+    console.log("data-screen-runtime div:");
+    console.log("  offsetWidth:", results.screenRuntime_offsetWidth);
+    console.log("  scrollWidth:", results.screenRuntime_scrollWidth);
+    console.log("  clientWidth:", results.screenRuntime_clientWidth);
+    console.log("테이블:");
+    console.log("  offsetWidth:", results.table_offsetWidth);
+    console.log("  scrollWidth:", results.table_scrollWidth);
+    console.log("  clientWidth:", results.table_clientWidth);
+    console.log("테이블 컨테이너:");
+    console.log("  clientWidth:", results.tableContainer_clientWidth);
+    console.log("  scrollWidth:", results.tableContainer_scrollWidth);
+    console.log("body:");
+    console.log("  scrollWidth:", results.body_scrollWidth);
+    console.log("  clientWidth:", results.body_clientWidth);
+    console.log("뷰포트 innerWidth:", results.viewport_innerWidth);
+    console.log("가로 overflow:", results.bodyOverflowX);
+
+    fs.writeFileSync(
+      path.join(SCREENSHOT_DIR, "verify-refresh-result.json"),
+      JSON.stringify({ ...results, rawDims: dims }, null, 2)
+    );
+  } catch (error: any) {
+    console.error("오류:", error.message);
+    await page.screenshot({ path: path.join(SCREENSHOT_DIR, "verify-99-error.png"), fullPage: true }).catch(() => {});
+  } finally {
+    await browser.close();
+  }
+}
+
+main();
diff --git a/frontend/scripts/verify-screen-1244-refresh2.ts b/frontend/scripts/verify-screen-1244-refresh2.ts
new file mode 100644
index 00000000..0bf151a1
--- /dev/null
+++ b/frontend/scripts/verify-screen-1244-refresh2.ts
@@ -0,0 +1,142 @@
+/**
+ * 화면 1244 새로고침 검증 (2차)
+ * - 3초 대기 후 스크린샷
+ * - data-screen-runtime, 테이블 관련 div width 확인
+ * - 가로 스크롤 가능 여부 확인
+ */
+
+import { chromium } from "playwright";
+import * as path from "path";
+import * as fs from "fs";
+
+const BASE_URL = "http://localhost:9771";
+const SCREENSHOT_DIR = path.join(__dirname, "../verification-screenshots");
+
+async function main() {
+  const browser = await chromium.launch({ headless: true });
+  const context = await browser.newContext({ viewport: { width: 1280, height: 900 } });
+  const page = await context.newPage();
+
+  try {
+    // 로그인
+    await page.goto(`${BASE_URL}/login`, { waitUntil: "load", timeout: 30000 });
+    await page.waitForTimeout(1000);
+    await page.fill("#userId", "wace");
+    await page.fill("#password", "qlalfqjsgh11");
+    await page.locator('button[type="submit"]').first().click();
+    await page.waitForURL((u) => !u.includes("/login"), { timeout: 15000 }).catch(() => {});
+    await page.waitForTimeout(2000);
+
+    // /screens/1244 접속
+    await page.goto(`${BASE_URL}/screens/1244`, { waitUntil: "load", timeout: 45000 });
+    await page.getByText("로딩중", { exact: false }).waitFor({ state: "hidden", timeout: 10000 }).catch(() => {});
+    await page.waitForTimeout(2000);
+
+    // Step 1: 새로고침 (Ctrl+Shift+R)
+    console.log("Step 1: 새로고침 (Ctrl+Shift+R)...");
+    await page.keyboard.press("Control+Shift+r");
+    await page.waitForLoadState("load");
+    console.log("Step 2: 3초 대기...");
+    await page.waitForTimeout(3000);
+    await page.getByText("로딩중", { exact: false }).waitFor({ state: "hidden", timeout: 8000 }).catch(() => {});
+
+    // Step 3: 첫 스크린샷
+    await page.screenshot({ path: path.join(SCREENSHOT_DIR, "verify-08.png"), fullPage: true });
+    console.log("verify-08.png 저장");
+
+    // Step 4: JavaScript로 width 확인 (순수 함수로 작성)
+    const dims = await page.evaluate(() => {
+      const screenRuntime = document.querySelector("[data-screen-runtime]");
+      const table = document.querySelector("table");
+      const tableContainer = table?.closest("[style*='overflow'], [class*='overflow']");
+      const overflowHiddenDiv = table?.closest("[style*='overflow-hidden'], [class*='overflow-hidden']");
+
+      const tableAncestors: Array<{ level: number; tag: string; class: string; offsetWidth: number; scrollWidth: number; clientWidth: number; overflowX: string }> = [];
+      let p = table?.parentElement;
+      let idx = 0;
+      while (p && idx < 6) {
+        const s = window.getComputedStyle(p);
+        tableAncestors.push({
+          level: idx,
+          tag: p.tagName,
+          class: (p.className && typeof p.className === "string" ? p.className : "").slice(0, 60),
+          offsetWidth: p.offsetWidth,
+          scrollWidth: p.scrollWidth,
+          clientWidth: p.clientWidth,
+          overflowX: s.overflowX,
+        });
+        p = p.parentElement;
+        idx++;
+      }
+
+      return {
+        screenRuntime: screenRuntime
+          ? { offsetWidth: (screenRuntime as HTMLElement).offsetWidth, scrollWidth: (screenRuntime as HTMLElement).scrollWidth, clientWidth: (screenRuntime as HTMLElement).clientWidth }
+          : null,
+        table: table
+          ? { offsetWidth: (table as HTMLElement).offsetWidth, scrollWidth: (table as HTMLElement).scrollWidth, clientWidth: (table as HTMLElement).clientWidth }
+          : null,
+        tableContainer: tableContainer
+          ? { offsetWidth: (tableContainer as HTMLElement).offsetWidth, scrollWidth: (tableContainer as HTMLElement).scrollWidth, clientWidth: (tableContainer as HTMLElement).clientWidth }
+          : null,
+        overflowHiddenDiv: overflowHiddenDiv
+          ? { offsetWidth: (overflowHiddenDiv as HTMLElement).offsetWidth, scrollWidth: (overflowHiddenDiv as HTMLElement).scrollWidth, clientWidth: (overflowHiddenDiv as HTMLElement).clientWidth }
+          : null,
+        tableAncestors,
+        viewport: { innerWidth: window.innerWidth },
+      };
+    });
+
+    console.log("\n=== JavaScript 실행 결과 ===");
+    console.log("data-screen-runtime div:");
+    if (dims.screenRuntime) {
+      console.log("  offsetWidth:", dims.screenRuntime.offsetWidth);
+      console.log("  scrollWidth:", dims.screenRuntime.scrollWidth);
+      console.log("  clientWidth:", dims.screenRuntime.clientWidth);
+    } else {
+      console.log("  (없음)");
+    }
+    console.log("\n테이블:");
+    if (dims.table) {
+      console.log("  offsetWidth:", dims.table.offsetWidth);
+      console.log("  scrollWidth:", dims.table.scrollWidth);
+    }
+    console.log("\n테이블 컨테이너 (overflow):");
+    if (dims.tableContainer) {
+      console.log("  offsetWidth:", dims.tableContainer.offsetWidth);
+      console.log("  scrollWidth:", dims.tableContainer.scrollWidth);
+      console.log("  clientWidth:", dims.tableContainer.clientWidth);
+    }
+    console.log("\noverflow-hidden div:");
+    if (dims.overflowHiddenDiv) {
+      console.log("  offsetWidth:", dims.overflowHiddenDiv.offsetWidth);
+      console.log("  scrollWidth:", dims.overflowHiddenDiv.scrollWidth);
+    } else {
+      console.log("  (없음)");
+    }
+    console.log("\n테이블 조상 div들 (width):");
+    dims.tableAncestors?.forEach((a) => {
+      console.log(`  L${a.level} ${a.tag} overflow=${a.overflowX} offsetW=${a.offsetWidth} scrollW=${a.scrollWidth} clientW=${a.clientWidth}`);
+    });
+
+    // Step 5: 가로 스크롤 가능 여부
+    const canScroll = dims.table && dims.tableContainer && dims.table.scrollWidth > dims.tableContainer.clientWidth;
+    console.log("\n가로 스크롤 가능:", canScroll, "(테이블 scrollWidth > 컨테이너 clientWidth)");
+
+    // Step 6: 최종 스크린샷
+    await page.screenshot({ path: path.join(SCREENSHOT_DIR, "verify-09.png"), fullPage: true });
+    console.log("\nverify-09.png 저장");
+
+    fs.writeFileSync(
+      path.join(SCREENSHOT_DIR, "verify-refresh2-result.json"),
+      JSON.stringify({ ...dims, canScroll }, null, 2)
+    );
+  } catch (error: any) {
+    console.error("오류:", error.message);
+    await page.screenshot({ path: path.join(SCREENSHOT_DIR, "verify-99-error.png"), fullPage: true }).catch(() => {});
+  } finally {
+    await browser.close();
+  }
+}
+
+main();
diff --git a/frontend/scripts/verify-screen-1244.ts b/frontend/scripts/verify-screen-1244.ts
new file mode 100644
index 00000000..f21a2bc8
--- /dev/null
+++ b/frontend/scripts/verify-screen-1244.ts
@@ -0,0 +1,127 @@
+/**
+ * 화면 1244 검증: 테이블, 가로 스크롤, 페이지네이션 확인
+ */
+
+import { chromium } from "playwright";
+import * as path from "path";
+import * as fs from "fs";
+
+const BASE_URL = "http://localhost:9771";
+const SCREENSHOT_DIR = path.join(__dirname, "../verification-screenshots");
+
+async function main() {
+  const browser = await chromium.launch({ headless: true });
+  const context = await browser.newContext({ viewport: { width: 1280, height: 900 } });
+  const page = await context.newPage();
+
+  const results: Record<string, boolean | string> = {};
+
+  try {
+    // Step 1: 로그인 먼저 (Playwright는 새 브라우저)
+    console.log("Step 1: 로그인...");
+    await page.goto(`${BASE_URL}/login`, { waitUntil: "load", timeout: 30000 });
+    await page.waitForTimeout(1000);
+    await page.fill("#userId", "wace");
+    await page.fill("#password", "qlalfqjsgh11");
+    await page.locator('button[type="submit"]').first().click();
+    await page.waitForURL((u) => !u.includes("/login"), { timeout: 15000 }).catch(() => {});
+    await page.waitForTimeout(2000);
+
+    // Step 2: /screens/1244 접속
+    console.log("Step 2: /screens/1244 접속...");
+    await page.goto(`${BASE_URL}/screens/1244`, { waitUntil: "load", timeout: 45000 });
+    await page.waitForTimeout(2000);
+
+    await page.getByText("로딩중", { exact: false }).waitFor({ state: "hidden", timeout: 10000 }).catch(() => {});
+    await page.waitForTimeout(2000);
+
+    // Step 2: 화면 로드 스크린샷
+    await page.screenshot({ path: path.join(SCREENSHOT_DIR, "verify-01-initial.png"), fullPage: true });
+    console.log("verify-01-initial.png 저장");
+
+    // Step 3: 테이블 확인
+    const table = page.locator("table").first();
+    const tableCount = await table.count();
+    results.tableVisible = tableCount > 0;
+    console.log("테이블 보임:", results.tableVisible);
+
+    // Step 4: 가로 스크롤바 확인
+    const scrollContainer = page.locator("[class*='overflow'], .overflow-x-auto, [style*='overflow']").first();
+    const hasScrollContainer = (await scrollContainer.count()) > 0;
+    let scrollWidth = 0;
+    let clientWidth = 0;
+    if (results.tableVisible) {
+      scrollWidth = await table.evaluate((el) => el.scrollWidth);
+      clientWidth = await table.evaluate((el) => el.clientWidth);
+      results.tableScrollWidth = String(scrollWidth);
+      results.tableClientWidth = String(clientWidth);
+      results.horizontalScrollNeeded = scrollWidth > clientWidth;
+    }
+    console.log("테이블 scrollWidth:", scrollWidth, "clientWidth:", clientWidth);
+
+    // Step 5: 테이블 영역 오른쪽 스크롤 시도 (overflow-auto인 조상 요소 찾기)
+    if (results.tableVisible) {
+      try {
+        const scrollableAncestor = await table.evaluateHandle((el) => {
+          let parent: HTMLElement | null = el.parentElement;
+          while (parent) {
+            const style = getComputedStyle(parent);
+            if (style.overflowX === "auto" || style.overflowX === "scroll" || style.overflow === "auto") {
+              return parent;
+            }
+            parent = parent.parentElement;
+          }
+          return el.parentElement;
+        });
+        const scrollEl = scrollableAncestor.asElement();
+        if (scrollEl) {
+          await scrollEl.evaluate((el) => (el.scrollLeft = 300));
+          await page.waitForTimeout(500);
+        }
+      } catch (_) {}
+    }
+    await page.screenshot({ path: path.join(SCREENSHOT_DIR, "verify-02-after-scroll.png"), fullPage: true });
+    console.log("verify-02-after-scroll.png 저장");
+
+    // Step 6: 페이지네이션 확인
+    const paginationText = page.getByText("표시", { exact: false }).or(page.getByText("1/1", { exact: false }));
+    results.paginationVisible = (await paginationText.count()) > 0;
+    console.log("페이지네이션 보임:", results.paginationVisible);
+
+    // Step 7: 테이블이 뷰포트에 맞는지 (overflow 확인)
+    const bodyOverflow = await page.evaluate(() => {
+      const main = document.querySelector("main") || document.body;
+      return window.getComputedStyle(main).overflowX;
+    });
+    results.bodyOverflowX = bodyOverflow;
+
+    // Step 8: 중간 스크린샷 (테이블 + 페이지네이션 영역)
+    await page.screenshot({ path: path.join(SCREENSHOT_DIR, "verify-03-mid.png"), fullPage: true });
+    console.log("verify-03-mid.png 저장");
+
+    // Step 9: 페이지 하단으로 스크롤 (페이지네이션 바 확인)
+    await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
+    await page.waitForTimeout(500);
+    await page.screenshot({ path: path.join(SCREENSHOT_DIR, "verify-04-pagination-area.png"), fullPage: true });
+    console.log("verify-04-pagination-area.png 저장");
+
+    // Step 10: 최종 스크린샷
+    await page.evaluate(() => window.scrollTo(0, 0));
+    await page.waitForTimeout(300);
+    await page.screenshot({ path: path.join(SCREENSHOT_DIR, "verify-05-final.png"), fullPage: true });
+    console.log("verify-05-final.png 저장");
+
+    fs.writeFileSync(
+      path.join(SCREENSHOT_DIR, "verify-result.json"),
+      JSON.stringify(results, null, 2)
+    );
+    console.log("\n검증 결과:", results);
+  } catch (error: any) {
+    console.error("오류:", error.message);
+    await page.screenshot({ path: path.join(SCREENSHOT_DIR, "verify-99-error.png"), fullPage: true }).catch(() => {});
+  } finally {
+    await browser.close();
+  }
+}
+
+main();
diff --git a/frontend/scripts/verify-screen-150-tapseal.ts b/frontend/scripts/verify-screen-150-tapseal.ts
new file mode 100644
index 00000000..dbc210b1
--- /dev/null
+++ b/frontend/scripts/verify-screen-150-tapseal.ts
@@ -0,0 +1,162 @@
+/**
+ * 화면 150 검증 - 탑씰 영업 거래처관리
+ */
+
+import { chromium } from "playwright";
+import * as path from "path";
+import * as fs from "fs";
+
+const BASE_URL = "http://localhost:9771";
+const SCREENSHOT_DIR = path.join(__dirname, "../verification-screenshots");
+
+async function main() {
+  const browser = await chromium.launch({ headless: true });
+  const context = await browser.newContext({ viewport: { width: 1280, height: 900 } });
+  const page = await context.newPage();
+
+  const report: Record<string, any> = {};
+
+  try {
+    await page.goto(`${BASE_URL}/login`, { waitUntil: "load", timeout: 90000 });
+    await page.waitForTimeout(2000);
+
+    await page.fill("#userId", "admin");
+    await page.fill("#password", "1234");
+    await page.locator('button[type="submit"]').first().click();
+    await page.waitForURL((u: URL) => !u.includes("/login"), { timeout: 20000 }).catch(() => {});
+    await page.waitForTimeout(3000);
+
+    if (page.url().includes("/login")) {
+      await page.fill("#userId", "wace");
+      await page.fill("#password", "qlalfqjsgh11");
+      await page.locator('button[type="submit"]').first().click();
+      await page.waitForURL((u: URL) => !u.includes("/login"), { timeout: 20000 }).catch(() => {});
+      await page.waitForTimeout(3000);
+    }
+
+    const companyBtn = page.getByText("회사 선택").first();
+    if ((await companyBtn.count()) > 0) {
+      const currentCompany = await page.getByText("현재 관리 회사").locator("..").textContent().catch(() => "");
+      if (!currentCompany?.includes("탑씰") && !currentCompany?.includes("COMPANY_7")) {
+        await companyBtn.click();
+        await page.waitForTimeout(1500);
+        const tapseal = page.getByText("탑씰", { exact: true }).first();
+        const company7 = page.getByText("COMPANY_7", { exact: true }).first();
+        if ((await tapseal.count()) > 0) {
+          await tapseal.click();
+        } else if ((await company7.count()) > 0) {
+          await company7.click();
+        }
+        await page.waitForTimeout(2000);
+      }
+    }
+
+    await page.goto(`${BASE_URL}/screens/150`, { waitUntil: "domcontentloaded", timeout: 60000 });
+    await page.waitForTimeout(3000);
+    if (page.url().includes("/login")) {
+      await page.fill("#userId", "wace");
+      await page.fill("#password", "qlalfqjsgh11");
+      await page.locator('button[type="submit"]').first().click();
+      await page.waitForURL((u: URL) => !u.includes("/login"), { timeout: 20000 }).catch(() => {});
+      await page.waitForTimeout(3000);
+      await page.goto(`${BASE_URL}/screens/150`, { waitUntil: "domcontentloaded", timeout: 60000 });
+      await page.waitForTimeout(3000);
+    }
+
+    await page.getByText("화면을 불러오는 중", { exact: false }).waitFor({ state: "hidden", timeout: 25000 }).catch(() => {});
+    await page.waitForTimeout(8000);
+
+    const info = await page.evaluate(() => {
+      const buttons = Array.from(document.querySelectorAll("button")).filter((b) => {
+        const t = (b as HTMLElement).innerText?.trim() || "";
+        const r = (b as HTMLElement).getBoundingClientRect();
+        return t.length > 1 && r.x > 250 && r.width > 0;
+      });
+      const viewportWidth = window.innerWidth;
+      const leftThird = viewportWidth * 0.33;
+      const rightThird = viewportWidth * 0.66;
+
+      const btnDetails = buttons.map((b) => {
+        const r = (b as HTMLElement).getBoundingClientRect();
+        const text = (b as HTMLElement).innerText?.trim().substring(0, 40);
+        let group = "center";
+        if (r.x < leftThird) group = "left";
+        else if (r.x > rightThird) group = "right";
+        return {
+          text,
+          x: Math.round(r.x),
+          y: Math.round(r.y),
+          width: Math.round(r.width),
+          height: Math.round(r.height),
+          right: Math.round(r.right),
+          group,
+        };
+      });
+
+      const leftPanel = document.querySelector("[class*='border-r']");
+      const tables = document.querySelectorAll("table");
+      const rightPanel = document.querySelector("main")?.querySelectorAll("[class*='overflow'], [style*='overflow']");
+      const leftRect = leftPanel ? (leftPanel as HTMLElement).getBoundingClientRect() : null;
+      const mainRect = document.querySelector("main")?.getBoundingClientRect();
+      const contentWidth = mainRect ? mainRect.width : viewportWidth;
+      const leftWidthPercent = leftRect && contentWidth > 0 ? (leftRect.width / contentWidth) * 100 : null;
+
+      let overlaps = false;
+      for (let i = 0; i < btnDetails.length; i++) {
+        for (let j = i + 1; j < btnDetails.length; j++) {
+          const a = btnDetails[i];
+          const b = btnDetails[j];
+          if (Math.abs(a.y - b.y) < 30 && !(a.right < b.x || b.right < a.x)) overlaps = true;
+        }
+      }
+
+      const rightTable = tables.length > 1 ? tables[1] : tables[0];
+      const rightTableRect = rightTable ? (rightTable as HTMLElement).getBoundingClientRect() : null;
+      const rightTableScrollable = rightTable
+        ? (() => {
+            let el: Element | null = rightTable;
+            while (el) {
+              const s = window.getComputedStyle(el);
+              if (s.overflowY === "auto" || s.overflowY === "scroll" || s.overflow === "auto") return true;
+              el = el.parentElement;
+            }
+            return false;
+          })()
+        : null;
+
+      return {
+        buttonCount: buttons.length,
+        buttonDetails: btnDetails,
+        leftGroup: btnDetails.filter((b) => b.group === "left"),
+        centerGroup: btnDetails.filter((b) => b.group === "center"),
+        rightGroup: btnDetails.filter((b) => b.group === "right"),
+        splitPanelVisible: !!leftPanel,
+        leftWidthPercent: leftWidthPercent ? Math.round(leftWidthPercent) : null,
+        rightWidthPercent: leftWidthPercent ? Math.round(100 - leftWidthPercent) : null,
+        tableCount: tables.length,
+        rightPanelHasTable: !!rightTable,
+        rightTableScrollable,
+        buttonsOverlap: overlaps,
+      };
+    });
+
+    report.screen150 = info;
+    await page.screenshot({ path: path.join(SCREENSHOT_DIR, "screen-150-tapseal.png"), fullPage: true });
+    console.log("screen-150-tapseal.png saved");
+
+    fs.writeFileSync(
+      path.join(SCREENSHOT_DIR, "screen-150-tapseal-report.json"),
+      JSON.stringify(report, null, 2)
+    );
+    console.log("\n=== Report ===");
+    console.log(JSON.stringify(report, null, 2));
+  } catch (error: any) {
+    console.error("Error:", error.message);
+    report.error = error.message;
+    await page.screenshot({ path: path.join(SCREENSHOT_DIR, "screen-150-tapseal-error.png"), fullPage: true }).catch(() => {});
+  } finally {
+    await browser.close();
+  }
+}
+
+main();
diff --git a/frontend/scripts/verify-screen-1556.ts b/frontend/scripts/verify-screen-1556.ts
new file mode 100644
index 00000000..f6a4f660
--- /dev/null
+++ b/frontend/scripts/verify-screen-1556.ts
@@ -0,0 +1,93 @@
+/**
+ * 화면 1556 검증: tabs-widget 레이아웃
+ */
+
+import { chromium } from "playwright";
+import * as path from "path";
+import * as fs from "fs";
+
+const BASE_URL = "http://localhost:9771";
+const SCREENSHOT_DIR = path.join(__dirname, "../verification-screenshots");
+
+async function main() {
+  const browser = await chromium.launch({ headless: true });
+  const context = await browser.newContext({ viewport: { width: 1280, height: 900 } });
+  const page = await context.newPage();
+
+  const report: Record<string, any> = {};
+
+  try {
+    await page.goto(`${BASE_URL}/screens/1556`, { waitUntil: "load", timeout: 30000 });
+    await page.waitForTimeout(2000);
+
+    if (page.url().includes("/login")) {
+      await page.fill("#userId", "wace");
+      await page.fill("#password", "qlalfqjsgh11");
+      await page.locator('button[type="submit"]').first().click();
+      await page.waitForURL((u) => !u.includes("/login"), { timeout: 15000 }).catch(() => {});
+      await page.waitForTimeout(2000);
+      await page.goto(`${BASE_URL}/screens/1556`, { waitUntil: "load", timeout: 30000 });
+      await page.waitForTimeout(2000);
+    }
+
+    await page.getByText("로딩중", { exact: false }).waitFor({ state: "hidden", timeout: 10000 }).catch(() => {});
+    await page.waitForTimeout(2000);
+
+    report.pageLoadsWithoutErrors = (await page.locator('text="화면을 찾을 수 없습니다"').count()) === 0;
+
+    const tabInfo = await page.evaluate(() => {
+      const tabs = document.querySelectorAll("[role='tab'], [data-state='active'], [class*='TabsTrigger'], [class*='tab']");
+      const tabList = document.querySelector("[role='tablist']");
+      const loading = document.body.innerText.includes("로딩중") || document.body.innerText.includes("로딩 중");
+      return {
+        tabCount: tabs.length,
+        hasTabList: !!tabList,
+        tabHeadersVisible: tabs.length > 0 || !!tabList,
+        stuckOnLoading: loading,
+      };
+    });
+    report.tabHeadersVisible = tabInfo.tabHeadersVisible;
+    report.tabCount = tabInfo.tabCount;
+    report.tabContentLoadsProperly = !tabInfo.stuckOnLoading;
+
+    const loadingText = await page.getByText("로딩중", { exact: false }).count();
+    report.stuckOnLoading = loadingText > 0;
+
+    const layoutFillsHeight = await page.evaluate(() => {
+      const main = document.querySelector("main") || document.body;
+      const h = (main as HTMLElement).offsetHeight;
+      return h >= window.innerHeight * 0.8;
+    });
+    report.layoutFillsHeight = layoutFillsHeight;
+
+    const overflow = await page.evaluate(() => ({
+      bodyScrollWidth: document.body.scrollWidth,
+      bodyScrollHeight: document.body.scrollHeight,
+      viewportWidth: window.innerWidth,
+      viewportHeight: window.innerHeight,
+      hasHorizontalOverflow: document.body.scrollWidth > window.innerWidth,
+      hasVerticalOverflow: document.body.scrollHeight > window.innerHeight,
+    }));
+    report.noContentOverflowsViewport = !overflow.hasHorizontalOverflow;
+    report.overflowDetails = overflow;
+
+    await page.screenshot({ path: path.join(SCREENSHOT_DIR, "screen-1556-snapshot.png"), fullPage: true });
+    console.log("screen-1556-snapshot.png saved");
+
+    console.log("\n=== Report ===");
+    console.log(JSON.stringify(report, null, 2));
+
+    fs.writeFileSync(
+      path.join(SCREENSHOT_DIR, "screen-1556-report.json"),
+      JSON.stringify(report, null, 2)
+    );
+  } catch (error: any) {
+    console.error("Error:", error.message);
+    report.error = error.message;
+    await page.screenshot({ path: path.join(SCREENSHOT_DIR, "screen-1556-error.png"), fullPage: true }).catch(() => {});
+  } finally {
+    await browser.close();
+  }
+}
+
+main();
diff --git a/frontend/scripts/verify-screen-156.ts b/frontend/scripts/verify-screen-156.ts
new file mode 100644
index 00000000..de202465
--- /dev/null
+++ b/frontend/scripts/verify-screen-156.ts
@@ -0,0 +1,111 @@
+/**
+ * 화면 156 검증: 로드, 버튼, 테이블, 페이지네이션, 레이아웃
+ */
+
+import { chromium } from "playwright";
+import * as path from "path";
+import * as fs from "fs";
+
+const BASE_URL = "http://localhost:9771";
+const SCREENSHOT_DIR = path.join(__dirname, "../verification-screenshots");
+
+async function main() {
+  const browser = await chromium.launch({ headless: true });
+  const context = await browser.newContext({ viewport: { width: 1280, height: 900 } });
+  const page = await context.newPage();
+
+  const report: Record<string, any> = {};
+
+  try {
+    await page.goto(`${BASE_URL}/screens/156`, { waitUntil: "load", timeout: 30000 });
+    await page.waitForTimeout(2000);
+
+    const url = page.url();
+    if (url.includes("/login")) {
+      report.loginRequired = true;
+      await page.screenshot({ path: path.join(SCREENSHOT_DIR, "screen-156-login.png"), fullPage: true });
+      console.log("Login page - logging in with wace...");
+      await page.fill("#userId", "wace");
+      await page.fill("#password", "qlalfqjsgh11");
+      await page.locator('button[type="submit"]').first().click();
+      await page.waitForURL((u) => !u.includes("/login"), { timeout: 15000 }).catch(() => {});
+      await page.waitForTimeout(2000);
+      await page.goto(`${BASE_URL}/screens/156`, { waitUntil: "load", timeout: 30000 });
+      await page.waitForTimeout(2000);
+    }
+
+    const currentUrl = page.url();
+    report.loginRequired = currentUrl.includes("/login");
+    if (!currentUrl.includes("/login")) {
+      await page.getByText("로딩중", { exact: false }).waitFor({ state: "hidden", timeout: 10000 }).catch(() => {});
+      await page.waitForTimeout(2000);
+
+      const hasError = (await page.locator('text="화면을 찾을 수 없습니다"').count()) > 0;
+      report.pageLoadsWithoutErrors = !hasError;
+
+      const buttonCount = await page.locator("button").count();
+      const buttonsBetween = await page.evaluate(() => {
+        const searchWidget = document.querySelector("[class*='search'], [class*='filter']");
+        const table = document.querySelector("table");
+        const buttons = document.querySelectorAll("button");
+        let between = 0;
+        buttons.forEach((btn) => {
+          const rect = btn.getBoundingClientRect();
+          if (searchWidget && table) {
+            const sRect = searchWidget.getBoundingClientRect();
+            const tRect = table.getBoundingClientRect();
+            if (rect.top > sRect.bottom && rect.top < tRect.top) between++;
+          }
+        });
+        return between;
+      });
+      report.buttonsVisible = buttonCount > 0;
+      report.buttonsBetweenSearchAndTable = buttonsBetween;
+
+      const table = page.locator("table").first();
+      const tableVisible = (await table.count()) > 0;
+      report.tableVisible = tableVisible;
+
+      let tableOverflow = false;
+      if (tableVisible) {
+        const dims = await table.evaluate((el) => ({
+          scrollWidth: el.scrollWidth,
+          clientWidth: el.clientWidth,
+        }));
+        tableOverflow = dims.scrollWidth > dims.clientWidth;
+        report.tableScrollWidth = dims.scrollWidth;
+        report.tableClientWidth = dims.clientWidth;
+      }
+      report.tableOverflowsHorizontally = tableOverflow;
+
+      const paginationVisible = (await page.getByText("표시", { exact: false }).count()) > 0 ||
+        (await page.getByText("1/", { exact: false }).count()) > 0;
+      report.paginationBarVisible = paginationVisible;
+
+      const bodyScrollWidth = await page.evaluate(() => document.body.scrollWidth);
+      const viewportWidth = 1280;
+      report.bodyScrollWidth = bodyScrollWidth;
+      report.hasHorizontalScrollbar = bodyScrollWidth > viewportWidth;
+      report.layoutResponsive = !report.hasHorizontalScrollbar;
+
+      await page.screenshot({ path: path.join(SCREENSHOT_DIR, "screen-156-snapshot.png"), fullPage: true });
+      console.log("screen-156-snapshot.png saved");
+    }
+
+    console.log("\n=== Report ===");
+    console.log(JSON.stringify(report, null, 2));
+
+    fs.writeFileSync(
+      path.join(SCREENSHOT_DIR, "screen-156-report.json"),
+      JSON.stringify(report, null, 2)
+    );
+  } catch (error: any) {
+    console.error("Error:", error.message);
+    report.error = error.message;
+    await page.screenshot({ path: path.join(SCREENSHOT_DIR, "screen-156-error.png"), fullPage: true }).catch(() => {});
+  } finally {
+    await browser.close();
+  }
+}
+
+main();
diff --git a/frontend/scripts/verify-screens-156-1053-v2.ts b/frontend/scripts/verify-screens-156-1053-v2.ts
new file mode 100644
index 00000000..0042a99b
--- /dev/null
+++ b/frontend/scripts/verify-screens-156-1053-v2.ts
@@ -0,0 +1,141 @@
+/**
+ * 화면 156, 1053 재검증 - 로딩 완료 후 스크린샷
+ */
+
+import { chromium } from "playwright";
+import * as path from "path";
+import * as fs from "fs";
+
+const BASE_URL = "http://localhost:9771";
+const SCREENSHOT_DIR = path.join(__dirname, "../verification-screenshots");
+
+async function main() {
+  const browser = await chromium.launch({ headless: true });
+  const context = await browser.newContext({ viewport: { width: 1280, height: 900 } });
+  const page = await context.newPage();
+
+  const report: Record<string, any> = { screen156: {}, screen1053: {} };
+
+  try {
+    // 1-2: Ensure logged in - goto login first, then login
+    await page.goto(`${BASE_URL}/login`, { waitUntil: "domcontentloaded", timeout: 45000 });
+    await page.waitForTimeout(2000);
+    await page.fill("#userId", "wace");
+    await page.fill("#password", "qlalfqjsgh11");
+    await page.locator('button[type="submit"]').first().click();
+    await page.waitForURL((u: URL) => !u.includes("/login"), { timeout: 20000 }).catch(() => {});
+    await page.waitForTimeout(3000);
+
+    await page.goto(`${BASE_URL}/screens/156`, { waitUntil: "domcontentloaded", timeout: 45000 });
+    await page.waitForTimeout(2000);
+    if (page.url().includes("/login")) {
+      await page.fill("#userId", "wace");
+      await page.fill("#password", "qlalfqjsgh11");
+      await page.locator('button[type="submit"]').first().click();
+      await page.waitForURL((u: URL) => !u.includes("/login"), { timeout: 20000 }).catch(() => {});
+      await page.waitForTimeout(3000);
+    }
+
+    // 3: Company selection if present
+    const companyBtn = page.getByText("회사 선택").first();
+    if ((await companyBtn.count()) > 0) {
+      await companyBtn.click();
+      await page.waitForTimeout(1500);
+      const companyOption = page.getByText("company7", { exact: true }).first();
+      if ((await companyOption.count()) > 0) {
+        await companyOption.click();
+      } else {
+        const anyOption = page.locator("[role='menuitem'], [role='option'], button").filter({ hasText: /회사|company/i }).first();
+        if ((await anyOption.count()) > 0) await anyOption.click();
+      }
+      await page.waitForTimeout(2000);
+    }
+
+    // 4: Screen 156 with menuObjid
+    await page.goto(`${BASE_URL}/screens/156?menuObjid=1762421920156`, { waitUntil: "domcontentloaded", timeout: 45000 });
+    await page.waitForTimeout(3000);
+
+    if (page.url().includes("/login")) {
+      await page.fill("#userId", "wace");
+      await page.fill("#password", "qlalfqjsgh11");
+      await page.locator('button[type="submit"]').first().click();
+      await page.waitForURL((u: URL) => !u.includes("/login"), { timeout: 15000 }).catch(() => {});
+      await page.waitForTimeout(2000);
+      await page.goto(`${BASE_URL}/screens/156?menuObjid=1762421920156`, { waitUntil: "domcontentloaded", timeout: 45000 });
+      await page.waitForTimeout(3000);
+    }
+
+    await page.getByText("화면을 불러오는 중", { exact: false }).waitFor({ state: "hidden", timeout: 35000 }).catch(() => {});
+    await page.getByText("로딩중", { exact: false }).waitFor({ state: "hidden", timeout: 15000 }).catch(() => {});
+    await page.waitForTimeout(30000);
+
+    const table156 = page.locator("table tbody tr");
+    await table156.first().waitFor({ state: "visible", timeout: 15000 }).catch(() => {});
+    await page.waitForTimeout(3000);
+
+    const info156 = await page.evaluate(() => {
+      const table = document.querySelector("table");
+      const tbody = document.querySelector("tbody");
+      const rows = document.querySelectorAll("tbody tr");
+      const buttons = Array.from(document.querySelectorAll("button")).filter((b) => (b as HTMLElement).innerText?.trim().length > 2);
+      const pagination = document.body.innerText.includes("표시") || document.body.innerText.includes("1/");
+      return {
+        tableVisible: !!table && !!tbody,
+        dataRowCount: rows.length,
+        buttonsWithText: buttons.length,
+        paginationVisible: !!pagination,
+        buttonLabels: buttons.slice(0, 8).map((b) => (b as HTMLElement).innerText?.trim().substring(0, 20)),
+      };
+    });
+
+    report.screen156 = info156;
+    await page.screenshot({ path: path.join(SCREENSHOT_DIR, "responsive-156-v2.png"), fullPage: true });
+    console.log("responsive-156-v2.png saved");
+
+    // 5: Screen 1053 with menuObjid
+    await page.goto(`${BASE_URL}/screens/1053?menuObjid=1762421920304`, { waitUntil: "domcontentloaded", timeout: 45000 });
+    await page.waitForTimeout(3000);
+
+    await page.getByText("화면을 불러오는 중", { exact: false }).waitFor({ state: "hidden", timeout: 35000 }).catch(() => {});
+    await page.getByText("로딩중", { exact: false }).waitFor({ state: "hidden", timeout: 15000 }).catch(() => {});
+    await page.waitForTimeout(30000);
+
+    const splitPanel = page.locator("[class*='border-r'], [class*='split']").first();
+    await splitPanel.waitFor({ state: "visible", timeout: 15000 }).catch(() => {});
+    await page.waitForTimeout(3000);
+
+    const info1053 = await page.evaluate(() => {
+      const leftPanel = document.querySelector("[class*='border-r']");
+      const rightPanel = document.querySelector("main")?.querySelectorAll("div") || [];
+      const buttons = Array.from(document.querySelectorAll("button")).filter((b) => (b as HTMLElement).innerText?.trim().length > 2);
+      const table = document.querySelector("table");
+      const bodyText = document.body.innerText;
+      const hasSplitContent = bodyText.includes("좌측에서") || bodyText.includes("공급처") || bodyText.includes("품목");
+      return {
+        splitPanelVisible: !!leftPanel || hasSplitContent,
+        buttonsWithText: buttons.length,
+        tableVisible: !!table,
+        buttonLabels: buttons.slice(0, 8).map((b) => (b as HTMLElement).innerText?.trim().substring(0, 25)),
+      };
+    });
+
+    report.screen1053 = info1053;
+    await page.screenshot({ path: path.join(SCREENSHOT_DIR, "responsive-1053-v2.png"), fullPage: true });
+    console.log("responsive-1053-v2.png saved");
+
+    fs.writeFileSync(
+      path.join(SCREENSHOT_DIR, "verify-156-1053-v2-report.json"),
+      JSON.stringify(report, null, 2)
+    );
+    console.log("\n=== Report ===");
+    console.log(JSON.stringify(report, null, 2));
+  } catch (error: any) {
+    console.error("Error:", error.message);
+    report.error = error.message;
+    await page.screenshot({ path: path.join(SCREENSHOT_DIR, "verify-v2-error.png"), fullPage: true }).catch(() => {});
+  } finally {
+    await browser.close();
+  }
+}
+
+main();
diff --git a/frontend/scripts/verify-split-panel-screens.ts b/frontend/scripts/verify-split-panel-screens.ts
new file mode 100644
index 00000000..db8eb227
--- /dev/null
+++ b/frontend/scripts/verify-split-panel-screens.ts
@@ -0,0 +1,115 @@
+/**
+ * 화면 1722, 2089 검증: split-panel-layout2
+ */
+
+import { chromium } from "playwright";
+import * as path from "path";
+import * as fs from "fs";
+
+const BASE_URL = "http://localhost:9771";
+const SCREENSHOT_DIR = path.join(__dirname, "../verification-screenshots");
+
+async function loginIfNeeded(page: any) {
+  if (page.url().includes("/login")) {
+    await page.fill("#userId", "wace");
+    await page.fill("#password", "qlalfqjsgh11");
+    await page.locator('button[type="submit"]').first().click();
+    await page.waitForURL((u: URL) => !u.includes("/login"), { timeout: 15000 }).catch(() => {});
+    await page.waitForTimeout(2000);
+  }
+}
+
+async function verifyScreen(
+  page: any,
+  screenId: number,
+  report: Record<string, any>
+) {
+  await page.goto(`${BASE_URL}/screens/${screenId}`, { waitUntil: "load", timeout: 30000 });
+  await page.waitForTimeout(2000);
+  if (page.url().includes("/login")) {
+    await loginIfNeeded(page);
+    await page.goto(`${BASE_URL}/screens/${screenId}`, { waitUntil: "load", timeout: 30000 });
+    await page.waitForTimeout(2000);
+  }
+
+  await page.getByText("로딩중", { exact: false }).waitFor({ state: "hidden", timeout: 10000 }).catch(() => {});
+  await page.waitForTimeout(2000);
+
+  const info = await page.evaluate(() => {
+    const splitPanels = document.querySelectorAll("[class*='split'], [class*='Split'], [data-panel], [class*='panel']");
+    const hasSplitLayout = document.querySelector("[class*='split-panel'], [class*='SplitPanel'], [data-split]") !== null;
+    const panels = document.querySelectorAll("[class*='panel'], [class*='Panel'], [class*='resize']");
+    const leftPanelBorder = document.querySelectorAll("[class*='border-r']");
+    const bodyText = document.body.innerText;
+    const hasLeftRightPanels = bodyText.includes("왼쪽 목록에서") || bodyText.includes("품목 목록") || bodyText.includes("선택하세요");
+    const buttons = document.querySelectorAll("button");
+    const main = document.querySelector("main") || document.body;
+    const mainHeight = (main as HTMLElement).offsetHeight;
+
+    return {
+      pageLoadsWithoutErrors: !document.body.innerText.includes("화면을 찾을 수 없습니다"),
+      splitPanelCount: splitPanels.length,
+      panelCount: panels.length,
+      leftPanelBorderCount: leftPanelBorder.length,
+      bothPanelsVisible: panels.length >= 2 || splitPanels.length >= 2 || hasSplitLayout || (leftPanelBorder.length >= 1 && hasLeftRightPanels),
+      buttonsVisible: buttons.length > 0,
+      layoutFillsHeight: mainHeight >= window.innerHeight * 0.7,
+      bodyScrollWidth: document.body.scrollWidth,
+      bodyScrollHeight: document.body.scrollHeight,
+      viewportWidth: window.innerWidth,
+      viewportHeight: window.innerHeight,
+      hasHorizontalOverflow: document.body.scrollWidth > window.innerWidth,
+      hasVerticalOverflow: document.body.scrollHeight > window.innerHeight,
+    };
+  });
+
+  report.pageLoadsWithoutErrors = info.pageLoadsWithoutErrors;
+  report.splitPanelVisible = info.bothPanelsVisible || info.splitPanelCount > 0 || info.panelCount >= 2 || (info.leftPanelBorderCount >= 1 && info.pageLoadsWithoutErrors);
+  report.buttonsVisible = info.buttonsVisible;
+  report.layoutFillsHeight = info.layoutFillsHeight;
+  report.noContentOverflowsViewport = !info.hasHorizontalOverflow;
+  report.details = info;
+
+  await page.screenshot({
+    path: path.join(SCREENSHOT_DIR, `screen-${screenId}-snapshot.png`),
+    fullPage: true,
+  });
+  console.log(`screen-${screenId}-snapshot.png saved`);
+}
+
+async function main() {
+  const browser = await chromium.launch({ headless: true });
+  const context = await browser.newContext({ viewport: { width: 1280, height: 900 } });
+  const page = await context.newPage();
+
+  const report: Record<string, any> = { screen1722: {}, screen2089: {} };
+
+  try {
+    await page.goto(`${BASE_URL}/login`, { waitUntil: "load", timeout: 30000 });
+    await page.waitForTimeout(1000);
+    await loginIfNeeded(page);
+    await page.waitForTimeout(2000);
+
+    await verifyScreen(page, 1722, report.screen1722);
+    await verifyScreen(page, 2089, report.screen2089);
+
+    console.log("\n=== Report ===");
+    console.log(JSON.stringify(report, null, 2));
+
+    fs.writeFileSync(
+      path.join(SCREENSHOT_DIR, "split-panel-screens-report.json"),
+      JSON.stringify(report, null, 2)
+    );
+  } catch (error: any) {
+    console.error("Error:", error.message);
+    report.error = error.message;
+    await page.screenshot({
+      path: path.join(SCREENSHOT_DIR, "split-panel-error.png"),
+      fullPage: true,
+    }).catch(() => {});
+  } finally {
+    await browser.close();
+  }
+}
+
+main();
diff --git a/frontend/scripts/verify-tapseal-screens.ts b/frontend/scripts/verify-tapseal-screens.ts
new file mode 100644
index 00000000..f9fd7bc2
--- /dev/null
+++ b/frontend/scripts/verify-tapseal-screens.ts
@@ -0,0 +1,164 @@
+/**
+ * 탑씰 회사 실제 데이터 화면 검증
+ * - 회사 선택 → 탑씰
+ * - 구매관리 > 발주관리
+ * - 수주관리
+ * - 테이블 가로 스크롤, 페이지네이션 확인
+ */
+
+import { chromium } from "playwright";
+import * as path from "path";
+import * as fs from "fs";
+
+const BASE_URL = "http://localhost:9771";
+const SCREENSHOT_DIR = path.join(__dirname, "../verification-screenshots");
+
+async function main() {
+  const browser = await chromium.launch({ headless: true });
+  const context = await browser.newContext({ viewport: { width: 1280, height: 900 } });
+  const page = await context.newPage();
+
+  const results: Record<string, any> = {};
+
+  try {
+    // Step 1: 접속
+    console.log("Step 1: 접속...");
+    await page.goto(BASE_URL, { waitUntil: "load", timeout: 30000 });
+    await page.waitForTimeout(2000);
+
+    const url = page.url();
+    if (url.includes("/login")) {
+      console.log("로그인 필요...");
+      await page.fill("#userId", "wace");
+      await page.fill("#password", "qlalfqjsgh11");
+      await page.locator('button[type="submit"]').first().click();
+      await page.waitForURL((u) => !u.includes("/login"), { timeout: 15000 }).catch(() => {});
+      await page.waitForTimeout(3000);
+    }
+
+    await page.getByText("현재 관리 회사").waitFor({ timeout: 8000 }).catch(() => {});
+
+    // Step 2: 회사 선택 → 탑씰
+    console.log("Step 2: 회사 선택 → 탑씰...");
+    const companyBtn = page.getByText("회사 선택").first();
+    if ((await companyBtn.count()) > 0) {
+      await companyBtn.click();
+      await page.waitForTimeout(1500);
+      const tapseal = page.getByText("탑씰", { exact: true }).first();
+      if ((await tapseal.count()) > 0) {
+        await tapseal.click();
+        await page.waitForTimeout(2500);
+        console.log("탑씰 선택됨");
+      }
+    }
+
+    // Step 3: 구매관리 > 발주관리
+    console.log("Step 3: 구매관리 > 발주관리 클릭...");
+    const purchaseMgmt = page.getByText("구매관리").first();
+    if ((await purchaseMgmt.count()) > 0) {
+      await purchaseMgmt.click();
+      await page.waitForTimeout(800);
+      const orderMgmt = page.getByText("발주관리").first();
+      if ((await orderMgmt.count()) > 0) {
+        await orderMgmt.click();
+        await page.waitForTimeout(4000);
+      }
+    }
+    await page.getByText("로딩중", { exact: false }).waitFor({ state: "hidden", timeout: 10000 }).catch(() => {});
+    await page.waitForTimeout(2000);
+
+    // Step 4: 발주관리 스크린샷
+    await page.screenshot({ path: path.join(SCREENSHOT_DIR, "verify-10.png"), fullPage: true });
+    console.log("verify-10.png 저장 (발주관리)");
+
+    // Step 5: 발주관리 - 테이블/스크롤/페이지네이션 확인
+    const orderDims = await page.evaluate(() => {
+      const table = document.querySelector("table");
+      const tableContainer = table?.closest("[style*='overflow'], [class*='overflow']");
+      const pagination = document.body.innerText.includes("표시") || document.body.innerText.includes("1/");
+      return {
+        tableScrollWidth: table ? (table as HTMLElement).scrollWidth : 0,
+        tableClientWidth: table ? (table as HTMLElement).clientWidth : 0,
+        containerClientWidth: tableContainer ? (tableContainer as HTMLElement).clientWidth : 0,
+        hasPagination: pagination,
+        dataRows: table ? table.querySelectorAll("tbody tr").length : 0,
+      };
+    });
+    results.orderMgmt = orderDims;
+    console.log("발주관리 - 테이블:", orderDims.tableScrollWidth, "x", orderDims.tableClientWidth, "데이터행:", orderDims.dataRows, "페이지네이션:", orderDims.hasPagination);
+
+    // Step 6: 테이블 가로 스크롤 시도
+    const scrollResult = await page.evaluate(() => {
+      const table = document.querySelector("table");
+      const scrollable = table?.closest("[style*='overflow'], [class*='overflow']") as HTMLElement;
+      if (scrollable && scrollable.scrollWidth > scrollable.clientWidth) {
+        scrollable.scrollLeft = 200;
+        return { scrolled: true, scrollLeft: scrollable.scrollLeft };
+      }
+      return { scrolled: false };
+    });
+    results.orderScroll = scrollResult;
+    await page.waitForTimeout(500);
+
+    // Step 7: 수주관리 메뉴 클릭
+    console.log("Step 7: 수주관리 클릭...");
+    const salesMgmt = page.getByText("영업관리").first();
+    if ((await salesMgmt.count()) > 0) {
+      await salesMgmt.click();
+      await page.waitForTimeout(600);
+    }
+    const orderScreen = page.getByText("수주관리").first();
+    if ((await orderScreen.count()) > 0) {
+      await orderScreen.click();
+      await page.waitForTimeout(4000);
+    }
+    await page.getByText("로딩중", { exact: false }).waitFor({ state: "hidden", timeout: 10000 }).catch(() => {});
+    await page.waitForTimeout(2000);
+
+    // Step 8: 수주관리 스크린샷
+    await page.screenshot({ path: path.join(SCREENSHOT_DIR, "verify-11.png"), fullPage: true });
+    console.log("verify-11.png 저장 (수주관리)");
+
+    // Step 9: 수주관리 - 테이블/페이지네이션 확인
+    const salesDims = await page.evaluate(() => {
+      const table = document.querySelector("table");
+      const pagination = document.body.innerText.includes("표시") || document.body.innerText.includes("1/");
+      return {
+        tableScrollWidth: table ? (table as HTMLElement).scrollWidth : 0,
+        tableClientWidth: table ? (table as HTMLElement).clientWidth : 0,
+        hasPagination: pagination,
+        dataRows: table ? table.querySelectorAll("tbody tr").length : 0,
+      };
+    });
+    results.salesOrderMgmt = salesDims;
+    console.log("수주관리 - 테이블:", salesDims.tableScrollWidth, "x", salesDims.tableClientWidth, "데이터행:", salesDims.dataRows, "페이지네이션:", salesDims.hasPagination);
+
+    // 이전 문제 해결 여부
+    const orderTableFits = orderDims.tableScrollWidth <= (orderDims.containerClientWidth || orderDims.tableClientWidth + 100);
+    const salesTableFits = salesDims.tableScrollWidth <= salesDims.tableClientWidth + 100;
+    results.issuesResolved = {
+      orderTableOverflow: orderTableFits,
+      orderPaginationVisible: orderDims.hasPagination,
+      salesTableOverflow: salesTableFits,
+      salesPaginationVisible: salesDims.hasPagination,
+    };
+
+    console.log("\n=== 이전 문제 해결 여부 ===");
+    console.log("발주관리 - 테이블 넘침 해결:", orderTableFits);
+    console.log("발주관리 - 페이지네이션 보임:", orderDims.hasPagination);
+    console.log("수주관리 - 테이블 넘침 해결:", salesTableFits);
+    console.log("수주관리 - 페이지네이션 보임:", salesDims.hasPagination);
+
+    fs.writeFileSync(
+      path.join(SCREENSHOT_DIR, "verify-tapseal-result.json"),
+      JSON.stringify(results, null, 2)
+    );
+  } catch (error: any) {
+    console.error("오류:", error.message);
+    await page.screenshot({ path: path.join(SCREENSHOT_DIR, "verify-99-error.png"), fullPage: true }).catch(() => {});
+  } finally {
+    await browser.close();
+  }
+}
+
+main();
diff --git a/frontend/stores/tabStore.ts b/frontend/stores/tabStore.ts
new file mode 100644
index 00000000..ea0b8c5b
--- /dev/null
+++ b/frontend/stores/tabStore.ts
@@ -0,0 +1,224 @@
+"use client";
+
+import { create } from "zustand";
+import { devtools, persist } from "zustand/middleware";
+import { clearTabCache } from "@/lib/tabStateCache";
+
+// --- 타입 정의 ---
+
+export type AppMode = "user" | "admin";
+
+export interface Tab {
+  id: string;
+  type: "screen" | "admin";
+  title: string;
+  screenId?: number;
+  menuObjid?: number;
+  adminUrl?: string;
+}
+
+interface ModeTabData {
+  tabs: Tab[];
+  activeTabId: string | null;
+}
+
+interface TabState {
+  mode: AppMode;
+  user: ModeTabData;
+  admin: ModeTabData;
+  refreshKeys: Record<string, number>;
+
+  setMode: (mode: AppMode) => void;
+
+  openTab: (tab: Omit<Tab, "id">, insertIndex?: number) => void;
+  closeTab: (tabId: string) => void;
+  switchTab: (tabId: string) => void;
+  refreshTab: (tabId: string) => void;
+
+  closeOtherTabs: (tabId: string) => void;
+  closeTabsToLeft: (tabId: string) => void;
+  closeTabsToRight: (tabId: string) => void;
+  closeAllTabs: () => void;
+
+  updateTabOrder: (fromIndex: number, toIndex: number) => void;
+}
+
+// --- 헬퍼 함수 ---
+
+function generateTabId(tab: Omit<Tab, "id">): string {
+  if (tab.type === "screen" && tab.screenId != null) {
+    return `tab-screen-${tab.screenId}-${tab.menuObjid ?? 0}`;
+  }
+  if (tab.type === "admin" && tab.adminUrl) {
+    return `tab-admin-${tab.adminUrl.replace(/[^a-zA-Z0-9]/g, "-")}`;
+  }
+  return `tab-${Date.now()}`;
+}
+
+function findDuplicateTab(tabs: Tab[], newTab: Omit<Tab, "id">): Tab | undefined {
+  if (newTab.type === "screen" && newTab.screenId != null) {
+    return tabs.find(
+      (t) => t.type === "screen" && t.screenId === newTab.screenId && t.menuObjid === newTab.menuObjid,
+    );
+  }
+  if (newTab.type === "admin" && newTab.adminUrl) {
+    return tabs.find((t) => t.type === "admin" && t.adminUrl === newTab.adminUrl);
+  }
+  return undefined;
+}
+
+function getNextActiveTabId(tabs: Tab[], closedTabId: string, currentActiveId: string | null): string | null {
+  if (currentActiveId !== closedTabId) return currentActiveId;
+  const idx = tabs.findIndex((t) => t.id === closedTabId);
+  if (idx === -1) return null;
+  const remaining = tabs.filter((t) => t.id !== closedTabId);
+  if (remaining.length === 0) return null;
+  if (idx > 0) return remaining[Math.min(idx - 1, remaining.length - 1)].id;
+  return remaining[0].id;
+}
+
+// 현재 모드의 데이터 키 반환
+function modeKey(state: TabState): AppMode {
+  return state.mode;
+}
+
+// --- 셀렉터 (컴포넌트에서 사용) ---
+
+export function selectTabs(state: TabState): Tab[] {
+  return state[state.mode].tabs;
+}
+
+export function selectActiveTabId(state: TabState): string | null {
+  return state[state.mode].activeTabId;
+}
+
+// --- Store ---
+
+const EMPTY_MODE: ModeTabData = { tabs: [], activeTabId: null };
+
+export const useTabStore = create<TabState>()(
+  devtools(
+    persist(
+      (set, get) => ({
+        mode: "user" as AppMode,
+        user: { ...EMPTY_MODE },
+        admin: { ...EMPTY_MODE },
+        refreshKeys: {},
+
+        setMode: (mode) => {
+          set({ mode });
+        },
+
+        openTab: (tabData, insertIndex) => {
+          const mk = modeKey(get());
+          const modeData = get()[mk];
+          const existing = findDuplicateTab(modeData.tabs, tabData);
+
+          if (existing) {
+            set({ [mk]: { ...modeData, activeTabId: existing.id } });
+            return;
+          }
+
+          const id = generateTabId(tabData);
+          const newTab: Tab = { ...tabData, id };
+          const newTabs = [...modeData.tabs];
+
+          if (insertIndex != null && insertIndex >= 0 && insertIndex <= newTabs.length) {
+            newTabs.splice(insertIndex, 0, newTab);
+          } else {
+            newTabs.push(newTab);
+          }
+
+          set({ [mk]: { tabs: newTabs, activeTabId: id } });
+        },
+
+        closeTab: (tabId) => {
+          clearTabCache(tabId);
+          const mk = modeKey(get());
+          const modeData = get()[mk];
+          const nextActive = getNextActiveTabId(modeData.tabs, tabId, modeData.activeTabId);
+          const newTabs = modeData.tabs.filter((t) => t.id !== tabId);
+          const { [tabId]: _, ...restKeys } = get().refreshKeys;
+          set({ [mk]: { tabs: newTabs, activeTabId: nextActive }, refreshKeys: restKeys });
+        },
+
+        switchTab: (tabId) => {
+          const mk = modeKey(get());
+          const modeData = get()[mk];
+          set({ [mk]: { ...modeData, activeTabId: tabId } });
+        },
+
+        refreshTab: (tabId) => {
+          set((state) => ({
+            refreshKeys: { ...state.refreshKeys, [tabId]: (state.refreshKeys[tabId] || 0) + 1 },
+          }));
+        },
+
+        closeOtherTabs: (tabId) => {
+          const mk = modeKey(get());
+          const modeData = get()[mk];
+          modeData.tabs.filter((t) => t.id !== tabId).forEach((t) => clearTabCache(t.id));
+          set({ [mk]: { tabs: modeData.tabs.filter((t) => t.id === tabId), activeTabId: tabId } });
+        },
+
+        closeTabsToLeft: (tabId) => {
+          const mk = modeKey(get());
+          const modeData = get()[mk];
+          const idx = modeData.tabs.findIndex((t) => t.id === tabId);
+          if (idx === -1) return;
+          modeData.tabs.slice(0, idx).forEach((t) => clearTabCache(t.id));
+          set({ [mk]: { tabs: modeData.tabs.slice(idx), activeTabId: tabId } });
+        },
+
+        closeTabsToRight: (tabId) => {
+          const mk = modeKey(get());
+          const modeData = get()[mk];
+          const idx = modeData.tabs.findIndex((t) => t.id === tabId);
+          if (idx === -1) return;
+          modeData.tabs.slice(idx + 1).forEach((t) => clearTabCache(t.id));
+          set({ [mk]: { tabs: modeData.tabs.slice(0, idx + 1), activeTabId: tabId } });
+        },
+
+        closeAllTabs: () => {
+          const mk = modeKey(get());
+          const modeData = get()[mk];
+          modeData.tabs.forEach((t) => clearTabCache(t.id));
+          set({ [mk]: { tabs: [], activeTabId: null } });
+        },
+
+        updateTabOrder: (fromIndex, toIndex) => {
+          const mk = modeKey(get());
+          const modeData = get()[mk];
+          const newTabs = [...modeData.tabs];
+          const [moved] = newTabs.splice(fromIndex, 1);
+          newTabs.splice(toIndex, 0, moved);
+          set({ [mk]: { ...modeData, tabs: newTabs } });
+        },
+      }),
+      {
+        name: "erp-tab-store",
+        storage: {
+          getItem: (name) => {
+            if (typeof window === "undefined") return null;
+            const raw = sessionStorage.getItem(name);
+            return raw ? JSON.parse(raw) : null;
+          },
+          setItem: (name, value) => {
+            if (typeof window === "undefined") return;
+            sessionStorage.setItem(name, JSON.stringify(value));
+          },
+          removeItem: (name) => {
+            if (typeof window === "undefined") return;
+            sessionStorage.removeItem(name);
+          },
+        },
+        partialize: (state) => ({
+          mode: state.mode,
+          user: state.user,
+          admin: state.admin,
+        }) as unknown as TabState,
+      },
+    ),
+    { name: "TabStore" },
+  ),
+);
diff --git a/frontend/types/workHistory.ts b/frontend/types/workHistory.ts
index ea4820ca..7bdbc8c9 100644
--- a/frontend/types/workHistory.ts
+++ b/frontend/types/workHistory.ts
@@ -78,9 +78,9 @@ export const WORK_STATUS_LABELS: Record<WorkStatus, string> = {
 };
 
 export const WORK_STATUS_COLORS: Record<WorkStatus, string> = {
-  pending: 'bg-gray-100 text-gray-800',
-  in_progress: 'bg-blue-100 text-blue-800',
-  completed: 'bg-green-100 text-green-800',
-  cancelled: 'bg-red-100 text-red-800',
+  pending: 'bg-muted text-foreground',
+  in_progress: 'bg-primary/10 text-primary',
+  completed: 'bg-emerald-100 text-emerald-800',
+  cancelled: 'bg-destructive/10 text-red-800',
 };
 
diff --git a/pw-runner.mjs b/pw-runner.mjs
new file mode 100644
index 00000000..f8540a5a
--- /dev/null
+++ b/pw-runner.mjs
@@ -0,0 +1,89 @@
+import { chromium } from '/Users/gbpark/ERP-node/node_modules/playwright/index.mjs';
+import { writeFileSync } from 'fs';
+
+const results = [];
+let passed = true;
+let failReason = '';
+
+async function run() {
+  const browser = await chromium.launch({ headless: true });
+  const page = await browser.newPage();
+
+  try {
+    // 로그인
+    await page.goto('http://localhost:9771/login');
+    await page.waitForLoadState('networkidle');
+
+    await page.getByPlaceholder('사용자 ID를 입력하세요').fill('wace');
+    await page.getByPlaceholder('비밀번호를 입력하세요').fill('qlalfqjsgh11');
+
+    await Promise.all([
+      page.waitForURL(url => !url.toString().includes('/login'), { timeout: 30000 }),
+      page.getByRole('button', { name: '로그인' }).click(),
+    ]);
+    await page.waitForLoadState('networkidle');
+    results.push('✅ 로그인 성공');
+
+    // approvalBox 페이지 접속
+    await page.goto('http://localhost:9771/admin/approvalBox');
+    await page.waitForLoadState('domcontentloaded');
+    await page.waitForTimeout(3000);
+    results.push('✅ approvalBox 페이지 접속 성공');
+
+    // "보낸 결재" 탭 확인
+    const sentTabVisible = await page.getByRole('tab', { name: '보낸 결재' }).isVisible().catch(async () => {
+      return await page.getByText('보낸 결재').first().isVisible().catch(() => false);
+    });
+    if (!sentTabVisible) {
+      throw new Error('"보낸 결재" 탭이 보이지 않음');
+    }
+    results.push('✅ "보낸 결재" 탭 확인');
+
+    // 결재 목록 또는 빈 상태 확인
+    const rowCount = await page.locator('table tbody tr').count();
+    const hasEmpty = await page.getByText(/결재 요청이 없습니다|데이터가 없습니다|없습니다/).isVisible().catch(() => false);
+    results.push(`✅ 목록 확인 (rows: ${rowCount}, emptyMsg: ${hasEmpty})`);
+
+    // "받은 결재" 탭 클릭
+    const receivedTab = page.getByRole('tab', { name: '받은 결재' });
+    const receivedVisible = await receivedTab.isVisible().catch(() => false);
+    if (!receivedVisible) {
+      throw new Error('"받은 결재" 탭이 보이지 않음');
+    }
+    await receivedTab.click();
+    await page.waitForTimeout(2000);
+    results.push('✅ "받은 결재" 탭 클릭');
+
+    // 에러 오버레이 확인
+    const hasError = await page.locator('[id="__next"] .nextjs-container-errors-body').isVisible().catch(() => false);
+    if (hasError) {
+      throw new Error('에러 오버레이 발견');
+    }
+    results.push('✅ 에러 오버레이 없음');
+
+    // 스크린샷
+    await page.screenshot({ path: '/Users/gbpark/ERP-node/.agent-pipeline/browser-tests/result.png', fullPage: true });
+    results.push('✅ 스크린샷 저장');
+
+  } catch (err) {
+    passed = false;
+    failReason = err.message;
+    results.push(`❌ 실패: ${err.message}`);
+    await page.screenshot({ path: '/Users/gbpark/ERP-node/.agent-pipeline/browser-tests/result-fail.png', fullPage: true }).catch(() => {});
+  } finally {
+    await browser.close();
+  }
+}
+
+run().then(() => {
+  const output = results.join('\n');
+  console.log(output);
+  writeFileSync('/tmp/pw-runner-result.txt', output + '\n' + (passed ? 'RESULT: PASS' : `RESULT: FAIL - ${failReason}`));
+  console.log(passed ? 'RESULT: PASS' : `RESULT: FAIL - ${failReason}`);
+  process.exit(passed ? 0 : 1);
+}).catch(err => {
+  const msg = `치명적 오류: ${err.message}`;
+  console.error(msg);
+  writeFileSync('/tmp/pw-runner-result.txt', msg + '\nRESULT: FAIL - ' + err.message);
+  process.exit(1);
+});
diff --git a/run-current-e2e.sh b/run-current-e2e.sh
new file mode 100644
index 00000000..c998006e
--- /dev/null
+++ b/run-current-e2e.sh
@@ -0,0 +1,4 @@
+#!/bin/bash
+cd /Users/gbpark/ERP-node
+./node_modules/.bin/playwright test ".agent-pipeline/browser-tests/e2e-test.spec.ts" --config=".agent-pipeline/browser-tests/playwright.config.ts" --reporter=line 2>&1 | tee /tmp/playwright-result.txt
+echo "EXIT_CODE: $?" >> /tmp/playwright-result.txt
diff --git a/run-e2e-new-spec.sh b/run-e2e-new-spec.sh
new file mode 100644
index 00000000..f1ac6437
--- /dev/null
+++ b/run-e2e-new-spec.sh
@@ -0,0 +1,39 @@
+#!/bin/bash
+export PATH="/opt/homebrew/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:$HOME/.nvm/versions/node/$(ls $HOME/.nvm/versions/node/ 2>/dev/null | tail -1)/bin"
+
+cd /Users/gbpark/ERP-node
+
+# Node 경로 찾기
+NODE_BIN=""
+if command -v node &>/dev/null; then
+  NODE_BIN=$(command -v node)
+elif [ -f "$HOME/.nvm/nvm.sh" ]; then
+  source "$HOME/.nvm/nvm.sh"
+  NODE_BIN=$(command -v node)
+fi
+
+if [ -z "$NODE_BIN" ]; then
+  echo "BROWSER_TEST_RESULT: FAIL - node not found"
+  exit 1
+fi
+
+echo "Using node: $NODE_BIN"
+
+# playwright가 루트 node_modules에 있으므로 그걸로 실행
+PLAYWRIGHT_BIN="/Users/gbpark/ERP-node/node_modules/.bin/playwright"
+
+if [ -f "$PLAYWRIGHT_BIN" ]; then
+  echo "playwright binary found: $PLAYWRIGHT_BIN"
+  "$PLAYWRIGHT_BIN" test .agent-pipeline/browser-tests/e2e-test.spec.ts \
+    --config=.agent-pipeline/browser-tests/playwright.config.ts \
+    --reporter=line
+  EXIT=$?
+  if [ $EXIT -eq 0 ]; then
+    echo "BROWSER_TEST_RESULT: PASS"
+  else
+    echo "BROWSER_TEST_RESULT: FAIL - test failed with exit code $EXIT"
+  fi
+else
+  echo "playwright binary not found, falling back to mjs runner"
+  $NODE_BIN /Users/gbpark/ERP-node/run-e2e-runtime-test.mjs
+fi
diff --git a/run-e2e-smoke.sh b/run-e2e-smoke.sh
new file mode 100644
index 00000000..3cfde69b
--- /dev/null
+++ b/run-e2e-smoke.sh
@@ -0,0 +1,5 @@
+#!/bin/bash
+cd /Users/gbpark/ERP-node
+node run-e2e-test.mjs 2>&1 | tee /tmp/e2e-smoke-result.txt
+echo "EXIT_CODE: $?" >> /tmp/e2e-smoke-result.txt
+cat /tmp/e2e-smoke-result.txt
diff --git a/run-e2e-spec-test.sh b/run-e2e-spec-test.sh
new file mode 100644
index 00000000..971a3e06
--- /dev/null
+++ b/run-e2e-spec-test.sh
@@ -0,0 +1,21 @@
+#!/bin/bash
+export PATH="/opt/homebrew/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:$HOME/.nvm/versions/node/$(ls $HOME/.nvm/versions/node/ 2>/dev/null | tail -1)/bin"
+
+cd /Users/gbpark/ERP-node
+
+# Node 경로 찾기
+NODE_BIN=""
+if command -v node &>/dev/null; then
+  NODE_BIN=$(command -v node)
+elif [ -f "$HOME/.nvm/nvm.sh" ]; then
+  source "$HOME/.nvm/nvm.sh"
+  NODE_BIN=$(command -v node)
+fi
+
+if [ -z "$NODE_BIN" ]; then
+  echo "RESULT: FAIL - node not found"
+  exit 1
+fi
+
+echo "Using node: $NODE_BIN"
+$NODE_BIN /Users/gbpark/ERP-node/run-e2e-runtime-test.mjs
diff --git a/run-e2e-test.sh b/run-e2e-test.sh
new file mode 100644
index 00000000..445515c6
--- /dev/null
+++ b/run-e2e-test.sh
@@ -0,0 +1,4 @@
+#!/bin/bash
+cd /Users/gbpark/ERP-node
+node_modules/.bin/playwright test ".agent-pipeline/browser-tests/e2e-test.spec.ts" --config=".agent-pipeline/browser-tests/playwright.config.ts" --reporter=line
+echo "PLAYWRIGHT_EXIT:$?"
diff --git a/run-playwright-test.sh b/run-playwright-test.sh
new file mode 100644
index 00000000..c998006e
--- /dev/null
+++ b/run-playwright-test.sh
@@ -0,0 +1,4 @@
+#!/bin/bash
+cd /Users/gbpark/ERP-node
+./node_modules/.bin/playwright test ".agent-pipeline/browser-tests/e2e-test.spec.ts" --config=".agent-pipeline/browser-tests/playwright.config.ts" --reporter=line 2>&1 | tee /tmp/playwright-result.txt
+echo "EXIT_CODE: $?" >> /tmp/playwright-result.txt
diff --git a/run-pw.js b/run-pw.js
new file mode 100644
index 00000000..cd325753
--- /dev/null
+++ b/run-pw.js
@@ -0,0 +1,5 @@
+const { execSync } = require('child_process');
+const result = execSync(
+  './node_modules/.bin/playwright test ".agent-pipeline/browser-tests/e2e-test.spec.ts" --config=".agent-pipeline/browser-tests/playwright.config.ts" --reporter=line',
+  { cwd: '/Users/gbpark/ERP-node', stdio: 'inherit', timeout: 120000 }
+);
diff --git a/run-responsive-e2e.mjs b/run-responsive-e2e.mjs
new file mode 100644
index 00000000..d3e57f06
--- /dev/null
+++ b/run-responsive-e2e.mjs
@@ -0,0 +1,119 @@
+import { chromium } from '/Users/gbpark/ERP-node/node_modules/playwright/index.mjs';
+import { writeFileSync } from 'fs';
+
+const results = [];
+let passed = true;
+let failReason = '';
+
+async function login(page) {
+  await page.goto('http://localhost:9771/login');
+  await page.waitForLoadState('networkidle');
+
+  await page.getByPlaceholder('사용자 ID를 입력하세요').fill('wace');
+  await page.getByPlaceholder('비밀번호를 입력하세요').fill('qlalfqjsgh11');
+
+  await Promise.all([
+    page.waitForURL(url => !url.toString().includes('/login'), { timeout: 30000 }),
+    page.getByRole('button', { name: '로그인' }).click(),
+  ]);
+  await page.waitForLoadState('networkidle');
+}
+
+async function run() {
+  const browser = await chromium.launch({ headless: true });
+  const page = await browser.newPage();
+
+  try {
+    // 로그인
+    await login(page);
+    results.push('✅ 로그인 성공');
+
+    // ─── 1. batch-management 375px 카드 뷰 전환 확인 ───
+    await page.setViewportSize({ width: 375, height: 812 });
+    await page.goto('http://localhost:9771/admin/batch-management');
+    await page.waitForLoadState('domcontentloaded');
+    await page.waitForTimeout(3000);
+
+    const batchHasError = await page.locator('[id="__next"] .nextjs-container-errors-body').isVisible().catch(() => false);
+    if (batchHasError) throw new Error('batch-management 에러 오버레이 발견');
+    results.push('✅ batch-management 에러 없음');
+
+    // 페이지 정상 렌더링 확인
+    const batchBodyVisible = await page.locator('body').isVisible();
+    if (!batchBodyVisible) throw new Error('batch-management body 렌더링 실패');
+    results.push('✅ batch-management body 렌더링 정상');
+
+    // 가로 오버플로우 확인 (카드 뷰는 375px 내에 들어와야 함)
+    const batchScrollWidth = await page.evaluate(() => document.body.scrollWidth);
+    results.push(`ℹ️ batch-management scrollWidth: ${batchScrollWidth}px`);
+    if (batchScrollWidth > 420) throw new Error(`batch-management 가로 오버플로우: ${batchScrollWidth}px`);
+    results.push('✅ batch-management 375px 레이아웃 정상');
+
+    await page.screenshot({ path: '/Users/gbpark/ERP-node/.agent-pipeline/browser-tests/result-batch-375.png', fullPage: true });
+    results.push('✅ batch-management 스크린샷 저장');
+
+    // ─── 2. audit-log 375px 카드 뷰 전환 확인 ───
+    await page.goto('http://localhost:9771/admin/audit-log');
+    await page.waitForLoadState('domcontentloaded');
+    await page.waitForTimeout(3000);
+
+    const auditHasError = await page.locator('[id="__next"] .nextjs-container-errors-body').isVisible().catch(() => false);
+    if (auditHasError) throw new Error('audit-log 에러 오버레이 발견');
+    results.push('✅ audit-log 에러 없음');
+
+    const auditBodyVisible = await page.locator('body').isVisible();
+    if (!auditBodyVisible) throw new Error('audit-log body 렌더링 실패');
+    results.push('✅ audit-log body 렌더링 정상');
+
+    const auditScrollWidth = await page.evaluate(() => document.body.scrollWidth);
+    results.push(`ℹ️ audit-log scrollWidth: ${auditScrollWidth}px`);
+    if (auditScrollWidth > 420) throw new Error(`audit-log 가로 오버플로우: ${auditScrollWidth}px`);
+    results.push('✅ audit-log 375px 레이아웃 정상');
+
+    await page.screenshot({ path: '/Users/gbpark/ERP-node/.agent-pipeline/browser-tests/result-audit-375.png', fullPage: true });
+    results.push('✅ audit-log 스크린샷 저장');
+
+    // ─── 3. standards 375px 레이아웃 깨짐 확인 ───
+    await page.goto('http://localhost:9771/admin/standards');
+    await page.waitForLoadState('domcontentloaded');
+    await page.waitForTimeout(3000);
+
+    const standardsHasError = await page.locator('[id="__next"] .nextjs-container-errors-body').isVisible().catch(() => false);
+    if (standardsHasError) throw new Error('standards 에러 오버레이 발견');
+    results.push('✅ standards 에러 없음');
+
+    const standardsBodyVisible = await page.locator('body').isVisible();
+    if (!standardsBodyVisible) throw new Error('standards body 렌더링 실패');
+    results.push('✅ standards body 렌더링 정상');
+
+    const standardsScrollWidth = await page.evaluate(() => document.body.scrollWidth);
+    results.push(`ℹ️ standards scrollWidth: ${standardsScrollWidth}px`);
+    if (standardsScrollWidth > 420) throw new Error(`standards 가로 오버플로우: ${standardsScrollWidth}px`);
+    results.push('✅ standards 375px 레이아웃 정상');
+
+    await page.screenshot({ path: '/Users/gbpark/ERP-node/.agent-pipeline/browser-tests/result.png', fullPage: true });
+    results.push('✅ standards 스크린샷 저장');
+
+  } catch (err) {
+    passed = false;
+    failReason = err.message;
+    results.push(`❌ 실패: ${err.message}`);
+    await page.screenshot({ path: '/Users/gbpark/ERP-node/.agent-pipeline/browser-tests/result-fail.png', fullPage: true }).catch(() => {});
+  } finally {
+    await browser.close();
+  }
+}
+
+run().then(() => {
+  const output = results.join('\n');
+  console.log(output);
+  const finalResult = passed ? 'RESULT: PASS' : `RESULT: FAIL - ${failReason}`;
+  writeFileSync('/tmp/pw-responsive-result.txt', output + '\n' + finalResult);
+  console.log(finalResult);
+  process.exit(passed ? 0 : 1);
+}).catch(err => {
+  const msg = `치명적 오류: ${err.message}`;
+  console.error(msg);
+  writeFileSync('/tmp/pw-responsive-result.txt', msg + '\nRESULT: FAIL - ' + err.message);
+  process.exit(1);
+});
diff --git a/scripts/run-e2e-test.js b/scripts/run-e2e-test.js
new file mode 100644
index 00000000..fc9566db
--- /dev/null
+++ b/scripts/run-e2e-test.js
@@ -0,0 +1,151 @@
+/**
+ * 결재 템플릿 관리 및 결재함 E2E 테스트
+ * 실행: node scripts/run-e2e-test.js
+ */
+const { chromium } = require("playwright");
+
+const BASE_URL = "http://localhost:9771";
+const SCREENSHOT_DIR = ".agent-pipeline/browser-tests";
+
+async function runTest() {
+  const browser = await chromium.launch({ headless: true });
+  const context = await browser.newContext({
+    viewport: { width: 1280, height: 720 },
+  });
+  const page = await context.newPage();
+
+  const results = [];
+  let allPassed = true;
+
+  function pass(name) {
+    results.push({ name, status: "PASS" });
+    console.log(`PASS: ${name}`);
+  }
+
+  function fail(name, reason) {
+    results.push({ name, status: "FAIL", reason });
+    console.log(`FAIL: ${name} - ${reason}`);
+    allPassed = false;
+  }
+
+  try {
+    // 로그인
+    await page.goto(`${BASE_URL}/login`);
+    await page.waitForLoadState("networkidle");
+
+    await page.getByPlaceholder("사용자 ID를 입력하세요").fill("wace");
+    await page.getByPlaceholder("비밀번호를 입력하세요").fill("qlalfqjsgh11");
+
+    await Promise.all([
+      page.waitForURL(url => !url.toString().includes("/login"), { timeout: 30000 }),
+      page.getByRole("button", { name: "로그인" }).click(),
+    ]);
+    await page.waitForLoadState("networkidle");
+    pass("로그인");
+
+    // =========================================================
+    // 결재 템플릿 관리 페이지
+    // =========================================================
+    await page.goto(`${BASE_URL}/admin/approvalTemplate`);
+    await page.waitForLoadState("domcontentloaded");
+    await page.waitForTimeout(3000);
+
+    // 1. "결재 템플릿 관리" 제목 확인
+    try {
+      await page.locator("h1").filter({ hasText: "결재 템플릿 관리" }).waitFor({ timeout: 10000 });
+      pass("결재 템플릿 관리 - 제목 확인");
+    } catch (e) {
+      fail("결재 템플릿 관리 - 제목 확인", e.message);
+    }
+
+    // 2. "신규 등록" 버튼 확인
+    try {
+      await page.getByRole("button", { name: "신규 등록" }).waitFor({ timeout: 10000 });
+      pass("결재 템플릿 관리 - 신규 등록 버튼 확인");
+    } catch (e) {
+      fail("결재 템플릿 관리 - 신규 등록 버튼 확인", e.message);
+    }
+
+    // 3. 검색 입력란 확인
+    try {
+      await page.getByPlaceholder("템플릿명 또는 설명 검색...").waitFor({ timeout: 10000 });
+      pass("결재 템플릿 관리 - 검색 입력란 확인");
+    } catch (e) {
+      // placeholder가 다를 수 있으므로 input으로 재시도
+      try {
+        await page.locator("input[type='text']").first().waitFor({ timeout: 5000 });
+        pass("결재 템플릿 관리 - 검색 입력란 확인 (input fallback)");
+      } catch (e2) {
+        fail("결재 템플릿 관리 - 검색 입력란 확인", e.message);
+      }
+    }
+
+    // 4. JS 에러 오버레이 확인
+    const hasError1 = await page.locator('[id="__next"] .nextjs-container-errors-body').isVisible().catch(() => false);
+    if (!hasError1) {
+      pass("결재 템플릿 관리 - JS 에러 없음");
+    } else {
+      fail("결재 템플릿 관리 - JS 에러 없음", "에러 오버레이 감지됨");
+    }
+
+    await page.screenshot({ path: `${SCREENSHOT_DIR}/result-template.png`, fullPage: true });
+
+    // =========================================================
+    // 결재함 페이지
+    // =========================================================
+    await page.goto(`${BASE_URL}/admin/approvalBox`);
+    await page.waitForLoadState("domcontentloaded");
+    await page.waitForTimeout(3000);
+
+    // 1. 탭 확인
+    try {
+      await page.getByRole("tab", { name: /수신함/ }).waitFor({ timeout: 10000 });
+      pass("결재함 - 수신함 탭 확인");
+    } catch (e) {
+      fail("결재함 - 수신함 탭 확인", e.message);
+    }
+
+    try {
+      await page.getByRole("tab", { name: /상신함/ }).waitFor({ timeout: 10000 });
+      pass("결재함 - 상신함 탭 확인");
+    } catch (e) {
+      fail("결재함 - 상신함 탭 확인", e.message);
+    }
+
+    // 2. JS 에러 오버레이 확인
+    const hasError2 = await page.locator('[id="__next"] .nextjs-container-errors-body').isVisible().catch(() => false);
+    if (!hasError2) {
+      pass("결재함 - JS 에러 없음");
+    } else {
+      fail("결재함 - JS 에러 없음", "에러 오버레이 감지됨");
+    }
+
+    await page.screenshot({ path: `${SCREENSHOT_DIR}/result-box.png`, fullPage: true });
+
+  } catch (e) {
+    fail("테스트 실행", e.message);
+  } finally {
+    await browser.close();
+  }
+
+  console.log("\n=== 테스트 결과 ===");
+  results.forEach(r => {
+    const status = r.status === "PASS" ? "✓" : "✗";
+    console.log(`${status} ${r.name}${r.reason ? `: ${r.reason}` : ""}`);
+  });
+
+  if (allPassed) {
+    console.log("\nBROWSER_TEST_RESULT: PASS");
+    process.exit(0);
+  } else {
+    const failed = results.filter(r => r.status === "FAIL").map(r => r.name).join(", ");
+    console.log(`\nBROWSER_TEST_RESULT: FAIL - ${failed}`);
+    process.exit(1);
+  }
+}
+
+runTest().catch(e => {
+  console.error("치명적 오류:", e);
+  console.log("BROWSER_TEST_RESULT: FAIL - 치명적 오류: " + e.message);
+  process.exit(1);
+});
diff --git a/scripts/test-option-settings-responsive.ts b/scripts/test-option-settings-responsive.ts
new file mode 100644
index 00000000..98ba7351
--- /dev/null
+++ b/scripts/test-option-settings-responsive.ts
@@ -0,0 +1,139 @@
+/**
+ * 옵션설정 (Option Settings) 페이지 반응형 동작 테스트
+ * - V2CategoryManagerComponent + ResponsiveGridRenderer
+ * - 화면: http://localhost:9771/screens/1421
+ *
+ * 실행: npx tsx scripts/test-option-settings-responsive.ts
+ */
+import { chromium } from "playwright";
+import * as path from "path";
+import * as fs from "fs";
+
+const BASE_URL = "http://localhost:9771";
+const API_URL = "http://localhost:8080/api";
+const PAGE_URL = `${BASE_URL}/screens/1421`;
+const CREDENTIALS = [
+  { userId: "SUPER", password: "1234" },
+  { userId: "wace", password: "qlalfqjsgh11" },
+];
+
+const OUTPUT_DIR = path.join(__dirname, "../test-output/option-settings-responsive");
+
+async function loginViaApi(): Promise<string> {
+  for (const cred of CREDENTIALS) {
+    const res = await fetch(`${API_URL}/auth/login`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ userId: cred.userId, password: cred.password }),
+    });
+    const data = await res.json();
+    if (data.success && data.data?.token) {
+      console.log(`   Using credentials: ${cred.userId}`);
+      return data.data.token;
+    }
+  }
+  throw new Error("Login failed with all credentials");
+}
+
+async function main() {
+  fs.mkdirSync(OUTPUT_DIR, { recursive: true });
+
+  const token = await loginViaApi();
+  console.log("1. Logged in via API");
+
+  const browser = await chromium.launch({ headless: true });
+  const context = await browser.newContext({
+    viewport: { width: 1400, height: 900 },
+  });
+  const page = await context.newPage();
+
+  const consoleErrors: string[] = [];
+  const reactHookErrors: string[] = [];
+
+  page.on("console", (msg) => {
+    const type = msg.type();
+    const text = msg.text();
+    if (type === "error") {
+      consoleErrors.push(text);
+      if (text.includes("order of Hooks") || text.includes("React has detected")) {
+        reactHookErrors.push(text);
+      }
+    }
+  });
+
+  try {
+    console.log("2. Loading login page to inject token...");
+    await page.goto(`${BASE_URL}/login`, { waitUntil: "domcontentloaded", timeout: 15000 });
+    await page.evaluate((t: string) => {
+      localStorage.setItem("authToken", t);
+      document.cookie = `authToken=${t}; path=/; max-age=86400; SameSite=Lax`;
+    }, token);
+
+    console.log("3. Navigating to Option Settings page (screens/1421)...");
+    await page.goto(PAGE_URL, { waitUntil: "domcontentloaded", timeout: 15000 });
+    await page.waitForTimeout(5000);
+
+    const report: string[] = [];
+
+    const widths = [
+      { w: 1400, name: "1-desktop-1400px" },
+      { w: 1100, name: "2-tablet-1100px" },
+      { w: 900, name: "3-tablet-900px" },
+      { w: 600, name: "4-mobile-600px" },
+      { w: 1400, name: "5-desktop-1400px-restored" },
+    ];
+
+    for (const { w, name } of widths) {
+      console.log(`\nResizing to ${w}px...`);
+      await page.setViewportSize({ width: w, height: w === 600 ? 812 : 900 });
+      await page.waitForTimeout(1500);
+
+      const filePath = path.join(OUTPUT_DIR, `${name}.png`);
+      await page.screenshot({ path: filePath, fullPage: false });
+      console.log(`   Saved: ${filePath}`);
+
+      const hasCategoryColumn = (await page.locator('text=카테고리 컬럼').count()) > 0;
+      const hasUseStatus = (await page.locator('text=사용여부').count()) > 0;
+      const hasVerticalStack = (await page.locator('button:has-text("목록")').count()) > 0;
+      const hasLeftRightSplit = (await page.locator('[class*="cursor-col-resize"]').count()) > 0;
+
+      report.push(`[${w}px] Category column: ${hasCategoryColumn}, Use status: ${hasUseStatus}, Vertical: ${hasVerticalStack}, Split: ${hasLeftRightSplit}`);
+    }
+
+    console.log("\n" + "=".repeat(60));
+    console.log("OPTION SETTINGS RESPONSIVE TEST REPORT");
+    console.log("=".repeat(60));
+    report.forEach((r) => console.log(r));
+
+    if (consoleErrors.length > 0) {
+      console.log("\n--- Console Errors ---");
+      consoleErrors.slice(0, 10).forEach((e) => console.log("  ", e));
+    }
+    if (reactHookErrors.length > 0) {
+      console.log("\n--- React Hook Errors (order of Hooks) ---");
+      reactHookErrors.forEach((e) => console.log("  ", e));
+    }
+
+    fs.writeFileSync(
+      path.join(OUTPUT_DIR, "report.txt"),
+      [
+        "OPTION SETTINGS RESPONSIVE TEST REPORT",
+        "=".repeat(50),
+        ...report,
+        "",
+        "Console errors: " + consoleErrors.length,
+        "React Hook errors: " + reactHookErrors.length,
+        ...reactHookErrors.map((e) => "  " + e),
+      ].join("\n")
+    );
+
+    console.log("\nScreenshots saved to:", OUTPUT_DIR);
+  } catch (e) {
+    console.error("Error:", e);
+    throw e;
+  } finally {
+    await browser.close();
+  }
+}
+
+main();
diff --git a/scripts/test-responsive-split-panel.ts b/scripts/test-responsive-split-panel.ts
new file mode 100644
index 00000000..f2eac313
--- /dev/null
+++ b/scripts/test-responsive-split-panel.ts
@@ -0,0 +1,134 @@
+/**
+ * ResponsiveSplitPanel 반응형 동작 테스트
+ * - Desktop (>= 1280px): 좌우 분할 + 리사이저
+ * - Tablet (768-1279px): 좌측 패널 자동 접힘, 아이콘 버튼만 표시
+ * - Mobile (< 768px): 세로 스택 + 접기/펼치기 헤더
+ *
+ * 실행: npx tsx scripts/test-responsive-split-panel.ts
+ */
+import { chromium } from "playwright";
+import * as path from "path";
+import * as fs from "fs";
+
+const BASE_URL = "http://localhost:9771";
+const API_URL = "http://localhost:8080/api";
+const TABLE_MNG_PATH = "/admin/systemMng/tableMngList";
+const USER_ID = "wace";
+const PASSWORD = "qlalfqjsgh11";
+
+const OUTPUT_DIR = path.join(__dirname, "../test-output/responsive-split-panel");
+
+async function loginViaApi(): Promise<string> {
+  const res = await fetch(`${API_URL}/auth/login`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ userId: USER_ID, password: PASSWORD }),
+  });
+  const data = await res.json();
+  if (!data.success || !data.data?.token) throw new Error("Login failed: " + (data.message || "no token"));
+  return data.data.token;
+}
+
+async function main() {
+  fs.mkdirSync(OUTPUT_DIR, { recursive: true });
+
+  const token = await loginViaApi();
+  console.log("1. Logged in via API");
+
+  const browser = await chromium.launch({ headless: true });
+  const context = await browser.newContext({
+    viewport: { width: 1400, height: 900 },
+  });
+  const page = await context.newPage();
+
+  try {
+    // 공개 페이지에서 토큰 주입 후 테이블 페이지로 이동
+    console.log("2. Loading login page to inject token...");
+    await page.goto(`${BASE_URL}/login`, { waitUntil: "domcontentloaded", timeout: 15000 });
+    await page.evaluate((t: string) => {
+      localStorage.setItem("authToken", t);
+      document.cookie = `authToken=${t}; path=/; max-age=86400; SameSite=Lax`;
+    }, token);
+
+    console.log("3. Navigating to table management page...");
+    await page.goto(`${BASE_URL}${TABLE_MNG_PATH}`, { waitUntil: "domcontentloaded", timeout: 15000 });
+
+    await page.waitForTimeout(3000);
+
+    const report: string[] = [];
+
+    // --- 3. Desktop 1400px (default wide) ---
+    console.log("\n3. Desktop 1400px - taking screenshot...");
+    await page.setViewportSize({ width: 1400, height: 900 });
+    await page.waitForTimeout(1000);
+    const desktopPath = path.join(OUTPUT_DIR, "1-desktop-1400px.png");
+    await page.screenshot({ path: desktopPath, fullPage: false });
+    console.log(`   Saved: ${desktopPath}`);
+
+    const at1400 = {
+      resizer: (await page.locator('[class*="cursor-col-resize"]').count()) > 0,
+      leftPanelVisible: (await page.locator('text=테이블 검색').count()) > 0 || (await page.locator('input[placeholder*="검색"]').count()) > 0,
+      iconButtonOnly: (await page.locator('button[title*="열기"]').count()) > 0 && !(await page.locator('input[placeholder*="검색"]').isVisible()),
+    };
+    report.push(`[1400px] Resizer: ${at1400.resizer}, Left panel visible: ${at1400.leftPanelVisible}, Icon-only: ${at1400.iconButtonOnly}`);
+
+    // --- 4. Tablet 1000px ---
+    console.log("\n4. Tablet 1000px - resizing and taking screenshot...");
+    await page.setViewportSize({ width: 1000, height: 900 });
+    await page.waitForTimeout(1500);
+    const tabletPath = path.join(OUTPUT_DIR, "2-tablet-1000px.png");
+    await page.screenshot({ path: tabletPath, fullPage: false });
+    console.log(`   Saved: ${tabletPath}`);
+
+    const at1000 = {
+      resizer: (await page.locator('[class*="cursor-col-resize"]').count()) > 0,
+      leftPanelVisible: (await page.locator('input[placeholder*="검색"]').isVisible()),
+      iconButtonOnly: (await page.locator('button[title*="열기"]').count()) > 0,
+      verticalStack: (await page.locator('button:has-text("테이블 목록")').count()) > 0,
+    };
+    report.push(`[1000px] Resizer: ${at1000.resizer}, Left panel visible: ${at1000.leftPanelVisible}, Icon-only: ${at1000.iconButtonOnly}, Vertical stack: ${at1000.verticalStack}`);
+
+    // --- 5. Mobile 600px ---
+    console.log("\n5. Mobile 600px - resizing and taking screenshot...");
+    await page.setViewportSize({ width: 600, height: 812 });
+    await page.waitForTimeout(1500);
+    const mobilePath = path.join(OUTPUT_DIR, "3-mobile-600px.png");
+    await page.screenshot({ path: mobilePath, fullPage: false });
+    console.log(`   Saved: ${mobilePath}`);
+
+    const at600 = {
+      collapsibleHeader: (await page.locator('button:has-text("테이블 목록")').count()) > 0,
+      verticalStack: (await page.locator('button:has-text("테이블 목록")').count()) > 0,
+      leftPanelVisible: (await page.locator('input[placeholder*="검색"]').isVisible()),
+    };
+    report.push(`[600px] Collapsible header: ${at600.collapsibleHeader}, Vertical stack: ${at600.verticalStack}, Left panel visible: ${at600.leftPanelVisible}`);
+
+    // --- 6. Back to Desktop 1400px ---
+    console.log("\n6. Back to Desktop 1400px - resizing and taking screenshot...");
+    await page.setViewportSize({ width: 1400, height: 900 });
+    await page.waitForTimeout(1500);
+    const desktopAgainPath = path.join(OUTPUT_DIR, "4-desktop-1400px-again.png");
+    await page.screenshot({ path: desktopAgainPath, fullPage: false });
+    console.log(`   Saved: ${desktopAgainPath}`);
+
+    const at1400Again = {
+      resizer: (await page.locator('[class*="cursor-col-resize"]').count()) > 0,
+      leftPanelVisible: (await page.locator('input[placeholder*="검색"]').isVisible()),
+    };
+    report.push(`[1400px again] Resizer: ${at1400Again.resizer}, Left panel visible: ${at1400Again.leftPanelVisible}`);
+
+    // --- Report ---
+    console.log("\n" + "=".repeat(60));
+    console.log("RESPONSIVE LAYOUT TEST REPORT");
+    console.log("=".repeat(60));
+    report.forEach((r) => console.log(r));
+    console.log("\nScreenshots saved to:", OUTPUT_DIR);
+  } catch (e) {
+    console.error("Error:", e);
+    throw e;
+  } finally {
+    await browser.close();
+  }
+}
+
+main();
diff --git a/test-output/option-settings-responsive/1-desktop-1400px.png b/test-output/option-settings-responsive/1-desktop-1400px.png
new file mode 100644
index 00000000..46e7ca50
Binary files /dev/null and b/test-output/option-settings-responsive/1-desktop-1400px.png differ
diff --git a/test-output/option-settings-responsive/2-tablet-1100px.png b/test-output/option-settings-responsive/2-tablet-1100px.png
new file mode 100644
index 00000000..5c33a2af
Binary files /dev/null and b/test-output/option-settings-responsive/2-tablet-1100px.png differ
diff --git a/test-output/option-settings-responsive/3-tablet-900px.png b/test-output/option-settings-responsive/3-tablet-900px.png
new file mode 100644
index 00000000..8ddebe5c
Binary files /dev/null and b/test-output/option-settings-responsive/3-tablet-900px.png differ
diff --git a/test-output/option-settings-responsive/4-mobile-600px.png b/test-output/option-settings-responsive/4-mobile-600px.png
new file mode 100644
index 00000000..7b262383
Binary files /dev/null and b/test-output/option-settings-responsive/4-mobile-600px.png differ
diff --git a/test-output/option-settings-responsive/5-desktop-1400px-restored.png b/test-output/option-settings-responsive/5-desktop-1400px-restored.png
new file mode 100644
index 00000000..a6b35c85
Binary files /dev/null and b/test-output/option-settings-responsive/5-desktop-1400px-restored.png differ
diff --git a/test-output/option-settings-responsive/report.txt b/test-output/option-settings-responsive/report.txt
new file mode 100644
index 00000000..9e4b7c30
--- /dev/null
+++ b/test-output/option-settings-responsive/report.txt
@@ -0,0 +1,10 @@
+OPTION SETTINGS RESPONSIVE TEST REPORT
+==================================================
+[1400px] Category column: true, Use status: false, Vertical: true, Split: true
+[1100px] Category column: false, Use status: false, Vertical: true, Split: false
+[900px] Category column: false, Use status: false, Vertical: true, Split: false
+[600px] Category column: true, Use status: false, Vertical: true, Split: false
+[1400px] Category column: true, Use status: false, Vertical: true, Split: true
+
+Console errors: 0
+React Hook errors: 0
\ No newline at end of file
diff --git a/test-output/responsive-split-panel/1-desktop-1400px.png b/test-output/responsive-split-panel/1-desktop-1400px.png
new file mode 100644
index 00000000..370f9703
Binary files /dev/null and b/test-output/responsive-split-panel/1-desktop-1400px.png differ
diff --git a/test-output/responsive-split-panel/2-tablet-1000px.png b/test-output/responsive-split-panel/2-tablet-1000px.png
new file mode 100644
index 00000000..425a3f10
Binary files /dev/null and b/test-output/responsive-split-panel/2-tablet-1000px.png differ
diff --git a/test-output/responsive-split-panel/3-mobile-600px.png b/test-output/responsive-split-panel/3-mobile-600px.png
new file mode 100644
index 00000000..eac02492
Binary files /dev/null and b/test-output/responsive-split-panel/3-mobile-600px.png differ
diff --git a/test-output/responsive-split-panel/4-desktop-1400px-again.png b/test-output/responsive-split-panel/4-desktop-1400px-again.png
new file mode 100644
index 00000000..d4e8877e
Binary files /dev/null and b/test-output/responsive-split-panel/4-desktop-1400px-again.png differ
diff --git a/test-output/responsive-split-panel/desktop-1280px.png b/test-output/responsive-split-panel/desktop-1280px.png
new file mode 100644
index 00000000..8f62c26f
Binary files /dev/null and b/test-output/responsive-split-panel/desktop-1280px.png differ
diff --git a/test-output/responsive-split-panel/mobile-375px-expanded.png b/test-output/responsive-split-panel/mobile-375px-expanded.png
new file mode 100644
index 00000000..4272123a
Binary files /dev/null and b/test-output/responsive-split-panel/mobile-375px-expanded.png differ
diff --git a/test-output/responsive-split-panel/mobile-375px.png b/test-output/responsive-split-panel/mobile-375px.png
new file mode 100644
index 00000000..b0c06e2c
Binary files /dev/null and b/test-output/responsive-split-panel/mobile-375px.png differ
diff --git a/test-results/.last-run.json b/test-results/.last-run.json
new file mode 100644
index 00000000..cbcc1fba
--- /dev/null
+++ b/test-results/.last-run.json
@@ -0,0 +1,4 @@
+{
+  "status": "passed",
+  "failedTests": []
+}
\ No newline at end of file