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..5baa0e97
--- /dev/null
+++ b/.cursor/agents/pipeline-common-rules.md
@@ -0,0 +1,82 @@
+# WACE ERP 파이프라인 공통 룰 (모든 에이전트 필수 준수)
+
+## 1. 화면 유형 구분 (절대 규칙!)
+
+이 시스템은 **관리자 메뉴**와 **사용자 메뉴**가 완전히 다른 방식으로 동작한다.
+기능 구현 시 반드시 어느 유형인지 먼저 판단하라.
+
+### 관리자 메뉴 (Admin)
+- **구현 방식**: React 코드 기반 페이지 (`.tsx` 파일)
+- **경로**: `frontend/app/(main)/admin/{기능명}/page.tsx`
+- **메뉴 등록**: `menu_info` 테이블에 INSERT 필수 (코드만 만들고 메뉴 등록 안 하면 미완성!)
+- **대상**: 시스템 설정, 사용자 관리, 결재 관리, 코드 관리 등
+- **특징**: 하드코딩된 UI, 관리자만 접근
+
+### 사용자 메뉴 (User/Screen)
+- **구현 방식**: 로우코드 기반 (DB에 JSON으로 화면 구성 저장)
+- **데이터 저장**: `screen_layouts` 테이블에 JSON 형식 보관
+- **화면 디자이너**: 스크린 디자이너로 드래그앤드롭 구성
+- **V2 컴포넌트**: `frontend/lib/registry/components/v2-*` 디렉토리
+- **대상**: 일반 업무 화면, BOM, 문서 관리 등
+- **특징**: 코드 수정 없이 화면 구성 변경 가능
+
+### 판단 기준
+
+| 질문 | 관리자 메뉴 | 사용자 메뉴 |
+|------|-------------|-------------|
+| 누가 쓰나? | 시스템 관리자 | 일반 사용자 |
+| 화면 구조 고정? | 고정 (코드) | 유동적 (JSON) |
+| URL 패턴 | `/admin/*` | 스크린 디자이너 경유 |
+| 메뉴 등록 | `menu_info` INSERT 필수 | 스크린 레이아웃 등록 |
+
+## 2. 관리자 메뉴 등록 (코드 구현 후 필수!)
+
+관리자 기능을 코드로 만들었으면 반드시 `menu_info`에 등록해야 한다.
+
+```sql
+-- 예시: 결재 템플릿 관리 메뉴 등록
+INSERT INTO menu_info (menu_id, menu_name, url, parent_id, menu_type, sort_order, is_active, company_code)
+VALUES ('approvalTemplate', '결재 템플릿', '/admin/approvalTemplate', 'approval', 'ADMIN', 40, 'Y', '대상회사코드');
+```
+
+- 기존 메뉴 구조를 먼저 조회해서 parent_id, sort_order 등을 맞춰라
+- 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 엔드포인트 구현 + 라우트 등록
+- [ ] BE: company_code 필터링 적용
+- [ ] FE: API 클라이언트 함수 작성 (lib/api/)
+- [ ] FE: 화면 컴포넌트 구현
+- [ ] **메뉴 등록**: 관리자 메뉴면 menu_info INSERT, 사용자 메뉴면 스크린 레이아웃 등록
+- [ ] 빌드 통과: 백엔드 tsc + 프론트엔드 tsc
+
+## 6. 절대 하지 말 것
+
+1. 페이지 파일만 만들고 메뉴 등록 안 하기 (미완성!)
+2. fetch() 직접 사용 (lib/api/ 클라이언트 필수)
+3. company_code 필터링 빠뜨리기
+4. 하드코딩 색상/URL/사용자ID 사용
+5. Card 안에 Card 중첩 (중첩 박스 금지)
+6. 백엔드 재실행하기 (nodemon이 자동 재시작)
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..0eef5611
--- /dev/null
+++ b/.cursor/agents/pipeline-frontend.md
@@ -0,0 +1,63 @@
+---
+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;
+}
+```
+
+# 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..44cf2daa
--- /dev/null
+++ b/.cursor/agents/pipeline-ui.md
@@ -0,0 +1,50 @@
+---
+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
+
+# Your Domain
+- frontend/components/ (UI components)
+- frontend/app/ (pages)
+
+# 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/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/package-lock.json b/backend-node/package-lock.json
index 8b97b9ed..f482dc7b 100644
--- a/backend-node/package-lock.json
+++ b/backend-node/package-lock.json
@@ -1046,7 +1046,6 @@
       "integrity": "sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.3",
@@ -2374,7 +2373,6 @@
       "resolved": "https://registry.npmjs.org/@redis/client/-/client-1.6.1.tgz",
       "integrity": "sha512-/KCsg3xSlR+nCK8/8ZYSknYxvXHwubJrU82F3Lm1Fp6789VQ0/3RJKfsmRXjqfaTA++23CvC3hqmqe/2GEt6Kw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "cluster-key-slot": "1.1.2",
         "generic-pool": "3.9.0",
@@ -3487,7 +3485,6 @@
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.17.tgz",
       "integrity": "sha512-gfehUI8N1z92kygssiuWvLiwcbOB3IRktR6hTDgJlXMYh5OvkPSRmgfoBUmfZt+vhwJtX7v1Yw4KvvAf7c5QKQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "undici-types": "~6.21.0"
       }
@@ -3724,7 +3721,6 @@
       "integrity": "sha512-tbsV1jPne5CkFQCgPBcDOt30ItF7aJoZL997JSF7MhGQqOeT3svWRYxiqlfA5RUdlHN6Fi+EI9bxqbdyAUZjYQ==",
       "dev": true,
       "license": "BSD-2-Clause",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "6.21.0",
         "@typescript-eslint/types": "6.21.0",
@@ -3942,7 +3938,6 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -4468,7 +4463,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.8.3",
         "caniuse-lite": "^1.0.30001741",
@@ -5679,7 +5673,6 @@
       "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.6.1",
@@ -5958,7 +5951,6 @@
       "resolved": "https://registry.npmjs.org/express/-/express-4.21.2.tgz",
       "integrity": "sha512-28HqgMZAmih1Czt9ny7qr6ek2qddF4FclbMzwhCREB6OFfH+rXAnuNCwo1/wFvrtbgsQDb4kSbX9de9lFbrXnA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "accepts": "~1.3.8",
         "array-flatten": "1.1.1",
@@ -7494,7 +7486,6 @@
       "integrity": "sha512-NIy3oAFp9shda19hy4HK0HRTWKtPJmGdnvywu01nOqNC2vZg+Z+fvJDxpMQA88eb2I9EcafcdjYgsDthnYTvGw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@jest/core": "^29.7.0",
         "@jest/types": "^29.6.3",
@@ -8464,6 +8455,7 @@
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
       "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "js-tokens": "^3.0.0 || ^4.0.0"
       },
@@ -9351,7 +9343,6 @@
       "resolved": "https://registry.npmjs.org/pg/-/pg-8.16.3.tgz",
       "integrity": "sha512-enxc1h0jA/aq5oSDMvqyW3q89ra6XIIDZgCX9vkMrnz5DFTw/Ny3Li2lFQ+pt3L6MCgm/5o2o8HW9hiJji+xvw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "pg-connection-string": "^2.9.1",
         "pg-pool": "^3.10.1",
@@ -10207,6 +10198,7 @@
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
       "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       }
@@ -11014,7 +11006,6 @@
       "integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@cspotcode/source-map-support": "^0.8.0",
         "@tsconfig/node10": "^1.0.7",
@@ -11120,7 +11111,6 @@
       "integrity": "sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
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/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/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/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/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/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/결재시스템_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 f3626230..efcef2a4 100644
--- a/frontend/app/(main)/screens/[screenId]/page.tsx
+++ b/frontend/app/(main)/screens/[screenId]/page.tsx
@@ -3,32 +3,27 @@
 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";
 
@@ -39,14 +34,21 @@ export interface ScreenViewPageProps {
 
 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 = screenIdProp ?? parseInt(params.screenId as string);
 
   // props 우선, 없으면 URL 쿼리에서 menuObjid 가져오기
-  const menuObjid = menuObjidProp ?? (searchParams.get("menuObjid") ? parseInt(searchParams.get("menuObjid")!) : undefined);
+  const menuObjid =
+    menuObjidProp ?? (searchParams.get("menuObjid") ? parseInt(searchParams.get("menuObjid")!) : undefined);
 
   // URL 쿼리에서 프리뷰용 company_code 가져오기
   const previewCompanyCode = searchParams.get("company_code");
@@ -54,18 +56,11 @@ function ScreenViewPage({ screenIdProp, menuObjidProp }: ScreenViewPageProps = {
   // 프리뷰 모드 감지 (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);
@@ -80,19 +75,18 @@ function ScreenViewPage({ screenIdProp, menuObjidProp }: ScreenViewPageProps = {
   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>>({});
 
   // 레이어 시스템 지원
@@ -113,12 +107,10 @@ function ScreenViewPage({ screenIdProp, menuObjidProp }: ScreenViewPageProps = {
     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 () => {
@@ -164,20 +156,17 @@ function ScreenViewPage({ screenIdProp, menuObjidProp }: ScreenViewPageProps = {
     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({
@@ -188,7 +177,6 @@ function ScreenViewPage({ screenIdProp, menuObjidProp }: ScreenViewPageProps = {
               throw new Error("V2 레이아웃 변환 실패");
             }
           } else {
-            // V1 레이아웃 또는 빈 레이아웃
             const layoutData = await screenApi.getLayout(screenId);
             if (layoutData?.components?.length > 0) {
               setLayout(layoutData);
@@ -230,9 +218,12 @@ function ScreenViewPage({ screenIdProp, menuObjidProp }: ScreenViewPageProps = {
       } catch (error) {
         console.error("화면 로드 실패:", error);
         setError("화면을 불러오는데 실패했습니다.");
-        showErrorToast("화면을 불러오는 데 실패했습니다", error, { guidance: "화면 설정을 확인하거나 잠시 후 다시 시도해 주세요." });
+        showErrorToast("화면을 불러오는 데 실패했습니다", error, {
+          guidance: "화면 설정을 확인하거나 잠시 후 다시 시도해 주세요.",
+        });
       } finally {
         setLoading(false);
+        setLayoutReady(true);
       }
     };
 
@@ -241,17 +232,17 @@ function ScreenViewPage({ screenIdProp, menuObjidProp }: ScreenViewPageProps = {
     }
   }, [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);
 
@@ -260,7 +251,7 @@ function ScreenViewPage({ screenIdProp, menuObjidProp }: ScreenViewPageProps = {
           return;
         }
 
-        // 3. 각 레이어의 레이아웃 데이터 로드
+        // 각 레이어의 레이아웃 데이터 로드
         const layerDefinitions: LayerDefinition[] = [];
 
         for (const layerInfo of nonBaseLayers) {
@@ -268,7 +259,6 @@ function ScreenViewPage({ screenIdProp, menuObjidProp }: ScreenViewPageProps = {
             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) {
@@ -286,12 +276,10 @@ function ScreenViewPage({ screenIdProp, menuObjidProp }: ScreenViewPageProps = {
               }
             }
 
-            // 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}`,
@@ -299,20 +287,24 @@ function ScreenViewPage({ screenIdProp, menuObjidProp }: ScreenViewPageProps = {
               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,
             };
 
@@ -322,20 +314,6 @@ function ScreenViewPage({ screenIdProp, menuObjidProp }: ScreenViewPageProps = {
           }
         }
 
-        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);
@@ -345,7 +323,7 @@ function ScreenViewPage({ screenIdProp, menuObjidProp }: ScreenViewPageProps = {
     loadConditionalLayersAndZones();
   }, [screenId, layout]);
 
-  // 🆕 조건부 레이어 조건 평가 (formData 변경 시 동기적으로 즉시 계산)
+  // 조건부 레이어 조건 평가 (formData 변경 시 동기적으로 즉시 계산)
   const activeLayerIds = useMemo(() => {
     if (conditionalLayers.length === 0 || !layout) return [] as string[];
 
@@ -356,13 +334,10 @@ function ScreenViewPage({ screenIdProp, menuObjidProp }: ScreenViewPageProps = {
       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 ||
@@ -373,7 +348,6 @@ function ScreenViewPage({ screenIdProp, menuObjidProp }: ScreenViewPageProps = {
         let isMatch = false;
         switch (operator) {
           case "eq":
-            // 문자열로 변환하여 비교 (타입 불일치 방지)
             isMatch = String(targetValue ?? "") === String(value ?? "");
             break;
           case "neq":
@@ -381,35 +355,22 @@ function ScreenViewPage({ screenIdProp, menuObjidProp }: ScreenViewPageProps = {
             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);
@@ -425,23 +386,15 @@ function ScreenViewPage({ screenIdProp, menuObjidProp }: ScreenViewPageProps = {
       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;
         }
       }
@@ -465,28 +418,26 @@ function ScreenViewPage({ screenIdProp, menuObjidProp }: ScreenViewPageProps = {
         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;
       });
@@ -495,22 +446,12 @@ function ScreenViewPage({ screenIdProp, menuObjidProp }: ScreenViewPageProps = {
         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;
@@ -528,14 +469,13 @@ function ScreenViewPage({ screenIdProp, menuObjidProp }: ScreenViewPageProps = {
         }
       } catch (error) {
         console.log("메인 테이블 자동 로드 실패 (정상일 수 있음):", error);
-        // 에러는 무시 - 데이터가 없거나 권한이 없을 수 있음
       }
     };
 
     loadMainTableData();
   }, [screen, layout, companyCode]);
 
-  // 🆕 개별 autoFill 처리 (메인 테이블과 다른 테이블에서 조회하는 경우)
+  // 개별 autoFill 처리
   useEffect(() => {
     const initAutoFill = async () => {
       if (!layout || !layout.components || !user) {
@@ -543,20 +483,16 @@ function ScreenViewPage({ screenIdProp, menuObjidProp }: ScreenViewPageProps = {
       }
 
       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) {
@@ -581,12 +517,10 @@ function ScreenViewPage({ screenIdProp, menuObjidProp }: ScreenViewPageProps = {
     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;
@@ -614,19 +548,16 @@ function ScreenViewPage({ screenIdProp, menuObjidProp }: ScreenViewPageProps = {
 
       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 };
@@ -638,79 +569,57 @@ function ScreenViewPage({ screenIdProp, menuObjidProp }: ScreenViewPageProps = {
     }
   }, [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>
@@ -720,10 +629,10 @@ function ScreenViewPage({ screenIdProp, menuObjidProp }: ScreenViewPageProps = {
 
   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>
@@ -735,10 +644,6 @@ function ScreenViewPage({ screenIdProp, menuObjidProp }: ScreenViewPageProps = {
     );
   }
 
-  // 화면 해상도 정보가 있으면 해당 크기로, 없으면 기본 크기 사용
-  const screenWidth = layout?.screenResolution?.width || 1200;
-  const screenHeight = layout?.screenResolution?.height || 800;
-
   return (
     <ScreenPreviewProvider isPreviewMode={false}>
       <ActiveTabProvider>
@@ -749,565 +654,130 @@ function ScreenViewPage({ screenIdProp, menuObjidProp }: ScreenViewPageProps = {
           >
             {/* 레이아웃 준비 중 로딩 표시 */}
             {!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>
+              )
             )}
 
             {/* 편집 모달 */}
@@ -1324,16 +794,10 @@ function ScreenViewPage({ screenIdProp, menuObjidProp }: ScreenViewPageProps = {
               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,
+                }));
               }}
             />
 
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 4c2c4759..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 ===== */
@@ -459,3 +476,166 @@ select {
 }
 
 /* ===== 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 c473c245..2c5f1fa3 100644
--- a/frontend/app/layout.tsx
+++ b/frontend/app/layout.tsx
@@ -1,11 +1,11 @@
 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";
 
-
 const inter = Inter({
   subsets: ["latin"],
   variable: "--font-inter",
@@ -39,13 +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" />
-          </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..da749392 100644
--- a/frontend/components/common/ExcelUploadModal.tsx
+++ b/frontend/components/common/ExcelUploadModal.tsx
@@ -1329,7 +1329,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 +1520,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 +1759,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 +1779,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>
@@ -1884,7 +1884,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 +1899,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
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 bf574521..dca348c2 100644
--- a/frontend/components/common/ScreenModal.tsx
+++ b/frontend/components/common/ScreenModal.tsx
@@ -1036,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>
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/AppLayout.tsx b/frontend/components/layout/AppLayout.tsx
index 6efa9ae9..ad9a6aaf 100644
--- a/frontend/components/layout/AppLayout.tsx
+++ b/frontend/components/layout/AppLayout.tsx
@@ -33,6 +33,7 @@ import { SideMenu } from "./SideMenu";
 import { TabBar } from "./TabBar";
 import { TabContent } from "./TabContent";
 import { useTabStore } from "@/stores/tabStore";
+import { ThemeToggle } from "./ThemeToggle";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -51,7 +52,6 @@ import {
 import { CompanySwitcher } from "@/components/admin/CompanySwitcher";
 import { getIconComponent } from "@/components/admin/MenuIconPicker";
 
-// useAuth의 UserInfo 타입을 확장
 interface ExtendedUserInfo {
   userId: string;
   userName: string;
@@ -79,7 +79,6 @@ interface AppLayoutProps {
   children: React.ReactNode;
 }
 
-// 메뉴 아이콘 매핑 함수 (DB 아이콘 우선, 없으면 키워드 기반 fallback)
 const getMenuIcon = (menuName: string, dbIconName?: string | null) => {
   if (dbIconName) {
     const DbIcon = getIconComponent(dbIconName);
@@ -99,15 +98,12 @@ const getMenuIcon = (menuName: string, dbIconName?: string | null) => {
   return <FileText className="h-4 w-4" />;
 };
 
-// 메뉴 데이터를 UI용으로 변환하는 함수 (최상위 "사용자", "관리자" 제외)
-// parentPath: 탭 제목에 "기준정보 - 회사관리" 형태로 상위 카테고리를 포함하기 위한 경로
 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[] = [];
 
@@ -128,11 +124,9 @@ const convertMenuToUI = (menus: MenuItem[], userInfo: ExtendedUserInfo | null, p
   return filteredMenus.map((menu) => convertSingleMenu(menu, menus, userInfo, parentPath));
 };
 
-// 단일 메뉴 변환 함수
 const convertSingleMenu = (menu: MenuItem, allMenus: MenuItem[], userInfo: ExtendedUserInfo | null, parentPath: string = ""): any => {
   const menuId = menu.objid || menu.OBJID;
 
-  // 사용자 locale 기준으로 번역 처리
   const getDisplayText = (m: MenuItem) => {
     if (m.translated_name || m.TRANSLATED_NAME) {
       return m.translated_name || m.TRANSLATED_NAME;
@@ -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,13 +225,12 @@ function AppLayoutInner({ children }: AppLayoutProps) {
   const [showCompanySwitcher, setShowCompanySwitcher] = useState(false);
   const [currentCompanyName, setCurrentCompanyName] = useState<string>("");
 
-  // URL 직접 접근 시 탭 자동 열기 (북마크/공유 링크 대응)
+  // URL 직접 접근 시 탭 자동 열기
   useEffect(() => {
     const store = useTabStore.getState();
     const currentModeTabs = store[store.mode].tabs;
     if (currentModeTabs.length > 0) return;
 
-    // /screens/[screenId] 패턴 감지
     const screenMatch = pathname.match(/^\/screens\/(\d+)/);
     if (screenMatch) {
       const screenId = parseInt(screenMatch[1]);
@@ -246,19 +239,18 @@ function AppLayoutInner({ children }: AppLayoutProps) {
       return;
     }
 
-    // /admin/* 패턴 감지 -> admin 모드로 전환 후 탭 열기
     if (pathname.startsWith("/admin") && pathname !== "/admin") {
       store.setMode("admin");
       store.openTab({ type: "admin", title: pathname.split("/").pop() || "관리자", adminUrl: pathname });
     }
-  }, []); // 마운트 시 1회만 실행
+  }, []);
 
   // 현재 회사명 조회 (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) {
@@ -268,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);
           }
         }
@@ -281,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 {
@@ -311,7 +302,6 @@ function AppLayoutInner({ children }: AppLayoutProps) {
     selectImage,
     removeImage,
     saveProfile,
-    // 운전자 관련
     isDriver,
     hasVehicle,
     driverInfo,
@@ -328,19 +318,14 @@ function AppLayoutInner({ children }: AppLayoutProps) {
     handleRegisterVehicle,
   } = useProfile(user, refreshUserData, refreshMenus);
 
-  // 탭 스토어에서 현재 모드 가져오기
   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)) {
@@ -353,12 +338,10 @@ function AppLayoutInner({ children }: AppLayoutProps) {
 
   const { openTab } = useTabStore();
 
-  // 메뉴 클릭 핸들러 (탭으로 열기)
   const handleMenuClick = async (menu: any) => {
     if (menu.hasChildren) {
       toggleMenu(menu.id);
     } else {
-      // tabTitle: "기준정보 - 회사관리" 형태의 상위 포함 이름
       const menuName = menu.tabTitle || menu.label || menu.name || "메뉴";
       if (typeof window !== "undefined") {
         localStorage.setItem("currentMenuName", menuName);
@@ -379,8 +362,8 @@ function AppLayoutInner({ children }: AppLayoutProps) {
           if (isMobile) setSidebarOpen(false);
           return;
         }
-      } catch (error) {
-        console.warn("할당된 화면 조회 실패:", error);
+      } catch {
+        console.warn("할당된 화면 조회 실패");
       }
 
       if (menu.url && menu.url !== "#") {
@@ -396,50 +379,19 @@ function AppLayoutInner({ children }: AppLayoutProps) {
     }
   };
 
-  // 모드 전환 핸들러
-  // 모드 전환: 탭 스토어의 모드만 변경 (각 모드 탭은 독립 보존)
   const handleModeSwitch = () => {
     setTabMode(isAdminMode ? "user" : "admin");
   };
 
-  // 로그아웃 핸들러
   const handleLogout = async () => {
     try {
       await logout();
       router.push("/login");
-    } catch (error) {
-      // 로그아웃 실패 시 처리
+    } catch {
+      // 로그아웃 실패
     }
   };
 
-  // 사이드바 메뉴 -> 탭 바 드래그용 데이터 생성
-  const buildMenuDragData = async (menu: any): Promise<string | null> => {
-    const menuName = menu.label || menu.name || "메뉴";
-    const menuObjid = menu.objid || menu.id;
-
-    try {
-      const assignedScreens = await menuScreenApi.getScreensByMenu(menuObjid);
-      if (assignedScreens.length > 0) {
-        return JSON.stringify({
-          type: "screen" as const,
-          title: menuName,
-          screenId: assignedScreens[0].screenId,
-          menuObjid: parseInt(menuObjid),
-        });
-      }
-    } catch { /* ignore */ }
-
-    if (menu.url && menu.url !== "#") {
-      return JSON.stringify({
-        type: "admin" as const,
-        title: menuName,
-        adminUrl: menu.url,
-      });
-    }
-
-    return null;
-  };
-
   const handleMenuDragStart = (e: React.DragEvent, menu: any) => {
     if (menu.hasChildren) {
       e.preventDefault();
@@ -453,7 +405,6 @@ function AppLayoutInner({ children }: AppLayoutProps) {
     e.dataTransfer.setData("text/plain", menuName);
   };
 
-  // 메뉴 트리 렌더링 (드래그 가능)
   const renderMenu = (menu: any, level: number = 0) => {
     const isExpanded = expandedMenus.has(menu.id);
     const isLeaf = !menu.hasChildren;
@@ -463,12 +414,12 @@ function AppLayoutInner({ children }: AppLayoutProps) {
         <div
           draggable={isLeaf}
           onDragStart={(e) => handleMenuDragStart(e, menu)}
-          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 ${
+          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)}
         >
@@ -485,18 +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}
                 draggable={!child.hasChildren}
                 onDragStart={(e) => handleMenuDragStart(e, child)}
-                className={`flex cursor-pointer items-center rounded-lg px-3 py-2 text-sm transition-colors hover:cursor-pointer ${
+                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)}
               >
@@ -514,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">
@@ -535,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
@@ -560,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>
                   )}
@@ -570,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>
@@ -588,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>
@@ -597,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)}
+          />
         )}
 
         {/* 왼쪽 사이드바 */}
@@ -610,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>
@@ -634,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}
@@ -731,53 +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={`flex min-w-0 flex-1 flex-col overflow-hidden bg-white ${isMobile ? "h-[calc(100vh-56px)]" : "h-screen"}`}>
+        <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}
@@ -808,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/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/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 372132d4..b3d0c1cd 100644
--- a/frontend/components/screen/EditModal.tsx
+++ b/frontend/components/screen/EditModal.tsx
@@ -1593,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>
@@ -1608,7 +1608,7 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
             >
               <div
                 data-screen-runtime="true"
-                className="relative m-auto bg-white"
+                className="bg-card relative m-auto"
                 style={{
                   width: screenDimensions?.width || 800,
                   // 조건부 레이어가 활성화되면 높이 자동 확장
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 31c50c16..49f0f586 100644
--- a/frontend/components/screen/InteractiveScreenViewer.tsx
+++ b/frontend/components/screen/InteractiveScreenViewer.tsx
@@ -2232,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",
diff --git a/frontend/components/screen/InteractiveScreenViewerDynamic.tsx b/frontend/components/screen/InteractiveScreenViewerDynamic.tsx
index 24f63b15..75e7248e 100644
--- a/frontend/components/screen/InteractiveScreenViewerDynamic.tsx
+++ b/frontend/components/screen/InteractiveScreenViewerDynamic.tsx
@@ -28,6 +28,8 @@ import {
 } 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";
 import "@/lib/registry/components/CardRenderer";
@@ -1303,7 +1305,7 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
       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" } : {}),
@@ -1359,7 +1361,7 @@ 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",
                 }}
@@ -1410,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 718621e6..12f28756 100644
--- a/frontend/components/screen/OptimizedButtonComponent.tsx
+++ b/frontend/components/screen/OptimizedButtonComponent.tsx
@@ -607,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;
   };
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 aeacab1b..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`;
@@ -564,7 +586,8 @@ const RealtimePreviewDynamicComponent: React.FC<RealtimePreviewProps> = ({
       })()
     : componentStyle;
 
-  const baseStyle = {
+  const baseStyle = isDesignMode ? {
+    // 디자인 모드: 기존 절대 좌표 방식 그대로 유지
     left: `${adjustedPositionX}px`,
     top: `${position.y}px`,
     ...safeComponentStyle,
@@ -577,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,
   };
 
   // 크기 정보는 필요시에만 디버깅 (개발 중 문제 발생 시 주석 해제)
@@ -679,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/ScreenDesigner.tsx b/frontend/components/screen/ScreenDesigner.tsx
index fbefcca5..10e1153d 100644
--- a/frontend/components/screen/ScreenDesigner.tsx
+++ b/frontend/components/screen/ScreenDesigner.tsx
@@ -6697,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>
                 );
@@ -6714,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 9072eb7a..295371c0 100644
--- a/frontend/components/screen/config-panels/ButtonConfigPanel.tsx
+++ b/frontend/components/screen/config-panels/ButtonConfigPanel.tsx
@@ -1780,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>
                 )}
@@ -2048,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>
 
@@ -2232,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>
@@ -2806,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>
@@ -3247,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. 테이블에서 병합할 두 개의 행을 선택합니다
@@ -3519,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>
@@ -3559,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 테이블에 경로가 저장됩니다."
                   : "버튼 클릭 시 진행 중인 위치 추적이 종료됩니다."}
@@ -3585,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>
@@ -3696,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;로 + 연속 추적 시작
@@ -4514,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. 소스 컴포넌트에서 데이터를 선택합니다
@@ -4699,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>
@@ -4771,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>
@@ -4996,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>
@@ -5015,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>
         ) : (
@@ -5074,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>
                 );
@@ -5249,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" />
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 8b87dc0c..b3377139 100644
--- a/frontend/components/screen/panels/V2PropertiesPanel.tsx
+++ b/frontend/components/screen/panels/V2PropertiesPanel.tsx
@@ -1345,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>
@@ -1514,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 69a4c24c..d877fbcc 100644
--- a/frontend/components/screen/widgets/types/ButtonWidget.tsx
+++ b/frontend/components/screen/widgets/types/ButtonWidget.tsx
@@ -44,7 +44,7 @@ export const ButtonWidget: React.FC<WebTypeComponentProps> = ({
       <div
         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,
@@ -65,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,
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/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/button.tsx b/frontend/components/ui/button.tsx
index 42f71f26..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",
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/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 4282f8f2..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,19 +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="text-orange-500">*</span>}
+      {label}
+      {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>
   );
@@ -739,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 f0a371fa..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,125 +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">*</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 474a9516..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: "올바른 사업자번호 형식이 아닙니다",
+  },
 };
 
 // 형식 검증 함수 (외부에서도 사용 가능)
@@ -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 absolute left-0 top-full mt-0.5 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,14 +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="text-orange-500">*</span>}
+      {actualLabel}
+      {required && <span className="ml-0.5 text-amber-500">*</span>}
     </Label>
   ) : null;
 
@@ -1002,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%" } : {}) }}
@@ -1017,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 e9f152fb..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,13 +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="text-orange-500">*</span>}
+          {label}
+          {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 a24ba51e..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: 라디오 버튼 그룹
@@ -31,251 +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 textRef = useRef<HTMLSpanElement>(null);
-  const [isTruncated, setIsTruncated] = useState(false);
-  const [hoverTooltip, setHoverTooltip] = 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 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="truncate flex-1 text-left"
-              {...(isPlaceholder ? { "data-placeholder": placeholder } : {})}
-            >
-              {displayText}
-            </span>
-            <div className="flex items-center gap-1 ml-2">
-              {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="absolute bottom-full left-0 z-50 mb-1 rounded-md border bg-popover px-3 py-1.5 shadow-md animate-in fade-in-0 zoom-in-95">
-          <div className="space-y-0.5 text-xs">
-            {selectedLabels.map((label, i) => (
-              <div key={i}>{label}</div>
-            ))}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-});
+  },
+);
 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}
@@ -287,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>
@@ -300,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)}>
@@ -327,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>
@@ -340,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)}>
@@ -366,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}
@@ -387,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 = {
@@ -435,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>
@@ -463,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);
@@ -475,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>
@@ -506,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;
 
@@ -537,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]);
@@ -572,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}
@@ -618,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)}
             >
@@ -634,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>
@@ -647,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;
@@ -1002,274 +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">*</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/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/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/registry/DynamicComponentRenderer.tsx b/frontend/lib/registry/DynamicComponentRenderer.tsx
index feda15eb..8ee1ba20 100644
--- a/frontend/lib/registry/DynamicComponentRenderer.tsx
+++ b/frontend/lib/registry/DynamicComponentRenderer.tsx
@@ -10,6 +10,8 @@ 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>> = {};
@@ -86,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;
     }
@@ -278,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 버전이 등록되어 있는지 확인
@@ -297,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) {
@@ -347,7 +352,7 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
       default:
         conditionMet = fieldValue === value;
     }
-    
+
     // 액션에 따라 렌더링 결정
     if (action === "show" && !conditionMet) {
       return null;
@@ -366,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"인 경우
@@ -375,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")
@@ -413,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,
@@ -442,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 || isColumnRequiredByMeta(tableName, columnName);
+        const isRequired =
+          component.required || (component as any).required || isColumnRequiredByMeta(tableName, columnName);
         const isLeft = catLabelPosition === "left";
         return (
           <div style={{ position: "relative", width: "100%", height: "100%" }}>
@@ -460,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,
@@ -470,11 +471,10 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
               }}
               className="text-sm font-medium"
             >
-              {catLabelText}{isRequired && <span className="text-orange-500">*</span>}
+              {catLabelText}
+              {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>
         );
       }
@@ -611,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") {
@@ -675,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을 사용해야 함 (화면 테이블이 아닌 검색 대상 테이블)
@@ -692,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;
@@ -707,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 최신 설정 우선)
@@ -747,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,
@@ -760,20 +770,26 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
           // 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,
@@ -782,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 (메뉴 스코프)
@@ -801,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,
@@ -836,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,
@@ -871,7 +888,7 @@ 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 = effectiveComponent.required || isColumnRequiredByMeta(screenTableName, baseColumnName);
           const isLeft = labelPosition === "left";
@@ -883,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,
@@ -893,11 +908,10 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
                 }}
                 className="text-sm font-medium"
               >
-                {effectiveLabel}{isRequired && <span className="text-orange-500">*</span>}
+                {effectiveLabel}
+                {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>
           );
         }
@@ -985,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/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/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/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/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 09e2fc64..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",
                                   )}
                                 >
                                   {/* 컬럼명 - 선택된 옵션라벨 형식으로 표시 */}
@@ -835,13 +842,14 @@ export function RepeaterTable({
                             </Popover>
                           ) : (
                             <>
-                              {col.label}{col.required && <span className="text-orange-500">*</span>}
+                              {col.label}
+                              {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="드래그하여 너비 조정"
                         />
@@ -858,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>
@@ -869,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 }) => (
@@ -879,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/rack-structure/RackStructureComponent.tsx b/frontend/lib/registry/components/rack-structure/RackStructureComponent.tsx
index ea946531..63a4288a 100644
--- a/frontend/lib/registry/components/rack-structure/RackStructureComponent.tsx
+++ b/frontend/lib/registry/components/rack-structure/RackStructureComponent.tsx
@@ -95,12 +95,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 +111,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 +125,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 +139,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 +156,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>
@@ -664,7 +664,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 +757,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 +767,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 +817,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 +870,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 +889,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 +921,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 +969,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 +993,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..17e1a781 100644
--- a/frontend/lib/registry/components/rack-structure/RackStructureConfigPanel.tsx
+++ b/frontend/lib/registry/components/rack-structure/RackStructureConfigPanel.tsx
@@ -73,8 +73,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>
 
@@ -207,7 +207,7 @@ export const RackStructureConfigPanel: React.FC<RackStructureConfigPanelProps> =
 
       {/* 제한 설정 */}
       <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 +248,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/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 421ba5ee..fe316206 100644
--- a/frontend/lib/registry/components/repeat-screen-modal/RepeatScreenModalComponent.tsx
+++ b/frontend/lib/registry/components/repeat-screen-modal/RepeatScreenModalComponent.tsx
@@ -2137,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>
                 )}
@@ -2177,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>
@@ -2329,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",
                                     )}
                                   >
@@ -2374,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" />
@@ -2726,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>
         );
@@ -2769,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>
         );
@@ -2859,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>
         );
@@ -2904,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>
         );
@@ -3005,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] || "";
 }
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 e4e43f13..6f4aa411 100644
--- a/frontend/lib/registry/components/selected-items-detail-input/SelectedItemsDetailInputComponent.tsx
+++ b/frontend/lib/registry/components/selected-items-detail-input/SelectedItemsDetailInputComponent.tsx
@@ -1765,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>
@@ -1822,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>
                                 )}
                               </>
@@ -2043,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>
@@ -2215,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>
@@ -2225,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>
@@ -2292,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>
@@ -2564,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>
@@ -2630,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/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 f5ff5a39..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",
       };
 
   // 계층 구조 빌드 함수 (트리 구조 유지)
@@ -2491,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",
       }}
@@ -2511,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%" }}>
@@ -2558,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>
@@ -2638,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",
@@ -2658,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;
@@ -2677,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(
@@ -2702,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",
@@ -2720,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;
@@ -2739,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(
@@ -2898,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>
                               ) : (
@@ -2924,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>
 
                                   {/* 삭제 버튼 */}
@@ -2936,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>
 
                                   {/* 항목별 추가 버튼 */}
@@ -2949,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>
@@ -3004,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%" }}>
@@ -3185,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" />
@@ -3262,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);
@@ -3273,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>
@@ -3388,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",
@@ -3407,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;
 
@@ -3422,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(
@@ -3461,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>
@@ -3594,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" />
@@ -3808,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 1d8fa196..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;
@@ -4244,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>}
@@ -5144,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
@@ -5154,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
@@ -5170,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>
@@ -5353,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>
               )}
@@ -5365,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>
               )}
@@ -5877,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) => {
@@ -6226,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}
@@ -6608,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 {
@@ -6675,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>
@@ -6735,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/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/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 4ea4153f..f2539a0e 100644
--- a/frontend/lib/registry/components/v2-aggregation-widget/AggregationWidgetComponent.tsx
+++ b/frontend/lib/registry/components/v2-aggregation-widget/AggregationWidgetComponent.tsx
@@ -721,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-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-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-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-rack-structure/RackStructureComponent.tsx b/frontend/lib/registry/components/v2-rack-structure/RackStructureComponent.tsx
index 7309d861..127ffac8 100644
--- a/frontend/lib/registry/components/v2-rack-structure/RackStructureComponent.tsx
+++ b/frontend/lib/registry/components/v2-rack-structure/RackStructureComponent.tsx
@@ -96,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>
         )}
@@ -112,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
@@ -126,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}
@@ -140,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"
@@ -157,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>
@@ -627,7 +627,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">
@@ -720,9 +720,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>
@@ -730,47 +730,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단)
@@ -780,9 +780,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" />첫 번째 조건 추가
@@ -833,15 +833,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>
@@ -852,7 +852,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>
@@ -884,8 +884,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>
             )}
@@ -932,16 +932,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)}>
@@ -956,7 +956,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 88335dcc..67587110 100644
--- a/frontend/lib/registry/components/v2-rack-structure/RackStructureConfigPanel.tsx
+++ b/frontend/lib/registry/components/v2-rack-structure/RackStructureConfigPanel.tsx
@@ -90,8 +90,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>
 
@@ -224,7 +224,7 @@ export const RackStructureConfigPanel: React.FC<RackStructureConfigPanelProps> =
 
       {/* 제한 설정 */}
       <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>
@@ -265,7 +265,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-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-split-panel-layout/SplitPanelLayoutComponent.tsx b/frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutComponent.tsx
index 19107fda..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(),
       };
 
   // 계층 구조 빌드 함수 (트리 구조 유지)
@@ -2993,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",
       }}
@@ -3013,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
@@ -3071,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,
@@ -3096,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}
@@ -3127,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>
@@ -3169,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"
                               )}
@@ -3242,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>
@@ -3315,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>
@@ -3399,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",
@@ -3419,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;
@@ -3443,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(
@@ -3463,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) && (
@@ -3474,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>
@@ -3500,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",
@@ -3517,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;
@@ -3541,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(
@@ -3561,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) && (
@@ -3572,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>
@@ -3727,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>
                               ) : (
@@ -3754,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>
                                   )}
 
@@ -3768,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>
                                   )}
 
@@ -3782,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>
@@ -3837,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
@@ -3927,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 ? (
               (() => {
@@ -4207,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}
@@ -4409,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>
@@ -4508,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) => (
@@ -4587,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>
@@ -4636,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) => (
@@ -4919,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 0f01370f..593ab529 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 { getFilePreviewUrl } from "@/lib/api/file";
 import { Button } from "@/components/ui/button";
 import { v2EventBus, V2_EVENTS, V2ErrorBoundary } from "@/lib/v2-core";
 import { useTabId } from "@/contexts/TabIdContext";
+import { getAdaptiveLabelColor } from "@/lib/utils/darkModeColor";
 
 // 🖼️ 테이블 셀 이미지 썸네일 컴포넌트
 // objid인 경우 인증된 API로 blob URL 생성, 경로인 경우 직접 URL 사용
@@ -400,7 +401,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
 
   const currentTabId = useTabId();
 
-  const buttonColor = component.style?.labelColor || "#212121";
+  const buttonColor = getAdaptiveLabelColor(component.style?.labelColor);
   const buttonTextColor = component.config?.buttonTextColor || "#ffffff";
 
   const gridColumns = component.gridColumns || 1;
@@ -428,7 +429,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,
+    }),
   };
 
   // ========================================
@@ -4273,8 +4280,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>}
@@ -5184,7 +5191,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
@@ -5194,13 +5201,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
@@ -5210,7 +5217,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>
@@ -5258,7 +5265,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,
   };
 
@@ -5328,7 +5335,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}
@@ -5394,7 +5401,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>
               )}
@@ -5406,7 +5413,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>
               )}
@@ -5638,6 +5645,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
               width: "100%",
               height: "100%",
               overflow: "auto",
+              WebkitOverflowScrolling: "touch",
             }}
             onScroll={handleVirtualScroll}
           >
@@ -5648,6 +5656,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                 borderCollapse: "collapse",
                 width: "100%",
                 tableLayout: "fixed",
+                minWidth: "400px",
               }}
             >
               {/* 헤더 (sticky) */}
@@ -5865,7 +5874,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) => {
@@ -6218,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}
@@ -6615,7 +6624,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 {
@@ -6682,7 +6691,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>
@@ -6742,7 +6751,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..759c57dd 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,9 @@ 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">
+                              <span className="ml-auto text-[10px] text-primary/80">
                                 {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..22817ee0 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,9 @@ 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">
+                            <span className="ml-auto text-[10px] text-primary/80">
                               {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 f50e1981..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]);
 
@@ -446,6 +448,8 @@ export function TableSearchWidget({ component, screenId, onHeightChange }: Table
     let cancelled = false;
 
     const loadSelectOptions = async () => {
+      // currentTable을 로컬 변수로 캡처하여 비동기 실행 중 undefined 방지
+      const table = currentTable;
       const selectFilters = activeFilters.filter((f) => f.filterType === "select");
 
       if (selectFilters.length === 0) {
@@ -457,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;
@@ -556,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];
 
         // 날짜 범위 객체를 처리
@@ -576,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) {
             // 둘 다 있으면 파이프로 연결
@@ -596,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);
     }
   };
 
@@ -650,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) : {}}
@@ -673,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}
           />
         );
@@ -723,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" />
@@ -778,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}
           />
         );
@@ -798,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>
           ))}
@@ -815,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 d036c068..491b45e4 100644
--- a/frontend/lib/registry/components/v2-tabs-widget/tabs-component.tsx
+++ b/frontend/lib/registry/components/v2-tabs-widget/tabs-component.tsx
@@ -367,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>
@@ -409,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"
                         )}
@@ -452,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>
@@ -667,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,
@@ -676,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>
@@ -687,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/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/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 15c164c8..f38af595 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -71,6 +71,7 @@
         "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",
@@ -12474,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",
diff --git a/frontend/package.json b/frontend/package.json
index 68e79db4..81de41a1 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -80,6 +80,7 @@
     "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",
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/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