diff --git a/.cursor/agents/pipeline-backend.md b/.cursor/agents/pipeline-backend.md
deleted file mode 100644
index 6b4ff99c..00000000
--- a/.cursor/agents/pipeline-backend.md
+++ /dev/null
@@ -1,66 +0,0 @@
----
-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
deleted file mode 100644
index 5baa0e97..00000000
--- a/.cursor/agents/pipeline-common-rules.md
+++ /dev/null
@@ -1,82 +0,0 @@
-# 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
deleted file mode 100644
index 33e25218..00000000
--- a/.cursor/agents/pipeline-db.md
+++ /dev/null
@@ -1,50 +0,0 @@
----
-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
deleted file mode 100644
index 0eef5611..00000000
--- a/.cursor/agents/pipeline-frontend.md
+++ /dev/null
@@ -1,63 +0,0 @@
----
-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
deleted file mode 100644
index 44cf2daa..00000000
--- a/.cursor/agents/pipeline-ui.md
+++ /dev/null
@@ -1,50 +0,0 @@
----
-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
deleted file mode 100644
index a4f4186d..00000000
--- a/.cursor/agents/pipeline-verifier.md
+++ /dev/null
@@ -1,57 +0,0 @@
----
-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/rules/ui-design-philosophy.mdc b/.cursor/rules/ui-design-philosophy.mdc
deleted file mode 100644
index 760860e4..00000000
--- a/.cursor/rules/ui-design-philosophy.mdc
+++ /dev/null
@@ -1,237 +0,0 @@
-# UI/UX 디자인 절대 철학 (Palantir + Toss)
-
-## 핵심 철학
-
-이 프로젝트의 UI는 **팔란티어의 정보 밀도**와 **토스의 사용자 중심 철학**을 결합한다.
-
-### 토스 철학 (사용성)
-- **쉬운 게 맞다**: 사용자가 고민하지 않아도 되게 만들어라
-- **한 화면에 하나의 질문**: 설정을 나열하지 말고 단계별로 안내해라
-- **선택지 최소화**: 10개 옵션 대신 가장 많이 쓰는 2-3개만 보여주고 나머지는 숨겨라
-- **몰라도 되는 건 숨기기**: 고급 설정은 기본적으로 접혀있어야 한다
-- **말하듯이 설명**: 전문 용어 대신 자연스러운 한국어로 안내해라 ("Z-Index" -> "앞/뒤 순서")
-- **기본값이 최선**: 대부분의 사용자가 설정을 안 바꿔도 잘 동작해야 한다
-
-### 팔란티어 철학 (정보 밀도)
-- **Dense but organized**: 정보를 빽빽하게 넣되, 시각적 계층으로 정리해라
-- **F-shaped hierarchy**: 왼쪽에서 오른쪽으로 읽는 자연스러운 흐름
-- **Composition**: 작은 원자적 조각을 조합하여 복잡한 UI를 구성해라
-- **뷰당 최대 10개 항목**: 한 섹션에 10개 이상 보이지 않게 분리해라
-
----
-
-## 절대 금지 사항 (위반 시 즉시 수정)
-
-### 1. 텍스트/요소 밀림 금지
-카드, 버튼, 라벨 등에서 텍스트가 의도한 위치에서 밀리거나 어긋나면 안 된다.
-- 카드 그리드에서 텍스트가 세로로 정렬되지 않는 경우 -> flex + 고정폭 또는 text-center로 해결
-- 아이콘과 텍스트가 같은 줄에 있어야 하는데 밀리는 경우 -> items-center + gap으로 해결
-
-```tsx
-// 금지: 텍스트가 밀리는 카드
-<button className="flex flex-col items-start p-3">
-  <Icon /><span>직접 입력</span>  // 아이콘과 텍스트가 밀림
-</button>
-
-// 필수: 정렬된 카드
-<button className="flex flex-col items-center justify-center p-3 text-center min-h-[80px]">
-  <Icon className="h-5 w-5 mb-1.5" />
-  <span className="text-xs font-medium leading-tight">직접 입력</span>
-  <span className="text-[10px] text-muted-foreground leading-tight mt-0.5">옵션을 직접 추가해요</span>
-</button>
-```
-
-### 2. 입력 폭 불일치 금지
-같은 영역에 있는 Input, Select 등 폼 컨트롤은 반드시 동일한 폭을 가져야 한다.
-- 같은 섹션의 Input이 서로 다른 너비를 가지면 안 된다
-- 나란히 배치된 필드(너비/높이 등)는 정확히 같은 폭이어야 한다
-
-```tsx
-// 금지: 폭이 다른 입력 필드
-<Input className="w-[120px]" />  // Z-Index
-<Input className="w-[180px]" />  // 높이  <- 폭이 다름!
-
-// 필수: 폭 일관성
-<div className="flex gap-2">
-  <div className="flex-1"><Label>너비</Label><Input className="h-7 w-full" /></div>
-  <div className="flex-1"><Label>높이</Label><Input className="h-7 w-full" /></div>
-</div>
-<div>
-  <Label>Z-Index</Label>
-  <Input className="h-7 w-full" />  // 같은 w-full
-</div>
-```
-
-### 3. 미작동 옵션 표시 금지
-실제로 동작하지 않는 설정 옵션을 사용자에게 보여주면 안 된다.
-- 기능이 구현되지 않은 옵션은 숨기거나 "준비 중" 표시
-- 특정 조건에서만 동작하는 옵션은 해당 조건이 아닐 때 비활성화(disabled) 처리
-
----
-
-## 설정 패널 디자인 패턴
-
-### 카드 선택 패턴 (타입/소스 선택)
-드롭다운 대신 시각적 카드로 선택하게 한다. 사용자가 뭘 선택하는지 한눈에 보인다.
-
-```tsx
-<div>
-  <p className="text-sm font-medium mb-3">이 필드는 어떤 데이터를 선택하나요?</p>
-  <div className="grid grid-cols-3 gap-2">
-    {cards.map(card => (
-      <button
-        key={card.value}
-        onClick={() => updateConfig("source", card.value)}
-        className={cn(
-          "flex flex-col items-center justify-center rounded-lg border p-3 text-center transition-all min-h-[80px]",
-          isSelected
-            ? "border-primary bg-primary/5 ring-1 ring-primary/20"
-            : "border-border hover:border-primary/50 hover:bg-muted/50"
-        )}
-      >
-        <card.icon className="h-5 w-5 mb-1.5 text-primary" />
-        <span className="text-xs font-medium leading-tight">{card.title}</span>
-        <span className="text-[10px] text-muted-foreground leading-tight mt-0.5">{card.description}</span>
-      </button>
-    ))}
-  </div>
-</div>
-```
-
-**카드 필수 규칙:**
-- 모든 카드는 동일한 높이 (`min-h-[80px]`)
-- 텍스트는 center 정렬
-- 아이콘은 텍스트 위에
-- 설명은 `text-[10px] text-muted-foreground`
-- 선택된 카드: `border-primary bg-primary/5 ring-1 ring-primary/20`
-
-### 고급 설정 패턴 (Progressive Disclosure)
-자주 안 쓰는 설정은 Collapsible로 숨긴다. 기본은 접혀있다.
-
-```tsx
-<Collapsible>
-  <CollapsibleTrigger asChild>
-    <button className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left hover:bg-muted/50 transition-colors">
-      <div className="flex items-center gap-2">
-        <Settings className="h-4 w-4 text-muted-foreground" />
-        <span className="text-sm font-medium">고급 설정</span>
-      </div>
-      <ChevronDown className="h-4 w-4 text-muted-foreground" />
-    </button>
-  </CollapsibleTrigger>
-  <CollapsibleContent>
-    <div className="rounded-b-lg border border-t-0 p-4 space-y-3">
-      {/* 고급 옵션들 */}
-    </div>
-  </CollapsibleContent>
-</Collapsible>
-```
-
-### 토글 옵션 패턴 (Switch + 설명)
-각 토글 옵션에 제목과 설명을 함께 보여준다. 사용자가 뭘 켜는 건지 이해할 수 있다.
-
-```tsx
-<div className="flex items-center justify-between py-2">
-  <div>
-    <p className="text-sm">여러 개 선택</p>
-    <p className="text-[11px] text-muted-foreground">한 번에 여러 값을 선택할 수 있어요</p>
-  </div>
-  <Switch checked={value} onCheckedChange={onChange} />
-</div>
-```
-
-**규칙:**
-- Checkbox가 아닌 **Switch** 사용 (토스 스타일)
-- 제목: `text-sm`
-- 설명: `text-[11px] text-muted-foreground`
-- Switch는 오른쪽 정렬
-
-### 소스별 설정 영역 패턴
-선택한 소스에 맞는 설정만 보여준다. 배경으로 구분한다.
-
-```tsx
-<div className="rounded-lg border bg-muted/30 p-4 space-y-3">
-  <div className="flex items-center gap-2">
-    <Icon className="h-4 w-4 text-primary" />
-    <span className="text-sm font-medium">{title}</span>
-  </div>
-  {/* 소스별 설정 내용 */}
-</div>
-```
-
-### 빈 상태 패턴
-데이터가 없을 때 친절하게 안내한다.
-
-```tsx
-<div className="text-center py-6 text-muted-foreground">
-  <Icon className="h-8 w-8 mx-auto mb-2 opacity-30" />
-  <p className="text-sm">아직 옵션이 없어요</p>
-  <p className="text-xs mt-0.5">위의 추가 버튼으로 옵션을 만들어보세요</p>
-</div>
-```
-
-### Property Row 패턴 (라벨 + 컨트롤)
-간단한 설정은 수평 배치한다.
-
-```tsx
-<div className="flex items-center justify-between py-1.5">
-  <span className="text-xs text-muted-foreground">기본 선택값</span>
-  <Select className="h-8 w-[160px]">...</Select>
-</div>
-```
-
----
-
-## 컨트롤 사이즈 표준
-
-| 컨텍스트 | 높이 | 텍스트 |
-|---------|------|--------|
-| 설정 패널 내부 | `h-7` (28px) 또는 `h-8` (32px) | `text-xs` 또는 `text-sm` |
-| 모달/폼 | `h-8` (32px) 또는 `h-10` (40px) | `text-sm` |
-| 메인 화면 | `h-10` (40px) | `text-sm` |
-
-설정 패널은 공간이 좁으므로 `h-7` ~ `h-8` 사용.
-
----
-
-## 설명 텍스트 톤앤매너
-
-- **~해요** 체 사용 (토스 스타일)
-- 짧고 명확하게
-- 전문 용어 피하기
-
-```
-// 좋은 예
-"옵션이 많을 때 검색으로 찾을 수 있어요"
-"한 번에 여러 값을 선택할 수 있어요"
-"선택한 값을 지울 수 있는 X 버튼이 표시돼요"
-
-// 나쁜 예
-"Searchable 모드를 활성화합니다"
-"Multiple selection을 허용합니다"
-"allowClear 옵션을 설정합니다"
-```
-
----
-
-## 색상 규칙
-
-- 선택/활성 강조: `border-primary bg-primary/5 ring-1 ring-primary/20`
-- 비활성 배경: `bg-muted/30`
-- 정보 텍스트: `text-muted-foreground`
-- 경고: `text-amber-600`
-- 성공: `text-emerald-600`
-- CSS 변수 필수, 하드코딩 색상 금지
-
----
-
-## 체크리스트 (UI 작업 완료 시 확인)
-
-- [ ] 같은 영역의 Input/Select 폭이 일치하는가?
-- [ ] 카드/버튼의 텍스트가 밀리지 않고 정렬되어 있는가?
-- [ ] 미작동 옵션이 표시되고 있지는 않은가?
-- [ ] 고급 설정이 기본으로 접혀있는가?
-- [ ] Switch에 설명 텍스트가 있는가?
-- [ ] 빈 상태에 안내 메시지가 있는가?
-- [ ] 전문 용어 대신 쉬운 한국어를 사용했는가?
-- [ ] 다크 모드에서 정상적으로 보이는가?