diff --git a/ARCHITECTURE.md b/ARCHITECTURE.md
new file mode 100644
index 0000000..8857677
--- /dev/null
+++ b/ARCHITECTURE.md
@@ -0,0 +1,136 @@
+# TK Factory Services - 데이터 아키텍처 가이드
+
+## 서비스 구조
+
+| 서비스 | 서브도메인 | 역할 | 포트 |
+|--------|-----------|------|------|
+| **tkuser** | tkuser.technicalkorea.net | 통합 관리 (기본 데이터) | API 30300, Web 30380 |
+| **tkfactory** (System 1) | tkfactory.technicalkorea.net | 공장 관리 | API 30005, Web 30080 |
+| **tkreport** (System 2) | tkreport.technicalkorea.net | 안전 신고 | API 30105, Web 30180 |
+| **tkqc** (System 3) | tkqc.technicalkorea.net | 부적합 관리 | API 30200, Web 30280 |
+| **SSO Auth** | - | 인증 (로그인/토큰) | 30050 |
+| **Gateway** | technicalkorea.net | SSO 라우팅 | 30000 |
+
+## 데이터 소유권 (Data Ownership)
+
+### 1. 기본 데이터 → tkuser API
+
+모든 시스템에서 공통으로 사용하는 마스터 데이터는 **tkuser**에서 관리합니다.
+
+| 데이터 | 설명 | DB 테이블 |
+|--------|------|-----------|
+| **사용자** | 계정, 역할, 비밀번호 | `sso_users` |
+| **페이지 권한** | 사용자별 페이지 접근 권한 | `user_page_permissions` |
+| **프로젝트** | 프로젝트 목록 및 설정 | `projects` |
+| **작업장** | 공장(카테고리) → 작업장 계층, 구역지도 | `workplace_categories`, `workplaces`, `workplace_map_regions` |
+| **설비** | 설비 마스터, 사진, 배치도 위치 | `equipments`, `equipment_photos` |
+| **부서** | 부서/조직 구조 | `departments` |
+| **작업자** | 작업자 인력 관리 | `workers` |
+| **작업/공정** | 공정(work_types) → 작업(tasks) 계층 | `work_types`, `tasks` |
+| **휴가 유형** | 연차/반차/특별휴가 유형 정의 | `vacation_types` |
+| **연차 배정** | 작업자별 연간 연차 일수 배정/사용 추적 | `vacation_balance_details` |
+
+다른 시스템은 tkuser API를 호출하여 기본 데이터를 조회합니다.
+
+### 2. 신고 데이터 → tkreport (System 2) API
+
+안전 신고와 관련된 트랜잭션 데이터는 **System 2**에서 관리합니다.
+
+| 데이터 | 설명 |
+|--------|------|
+| 안전 신고 | 신고 접수, 처리 현황 |
+| 작업 이슈 | 작업 관련 이슈 리포트 |
+| 신고 첨부파일 | 사진, 문서 등 |
+
+### 3. 관리 현황 데이터 → 해당 시스템 API
+
+각 시스템 고유의 운영 데이터는 해당 시스템에서 관리합니다.
+
+**System 1 (tkfactory)**
+| 데이터 | 설명 |
+|--------|------|
+| TBM 기록 | 일일 TBM 체크리스트 |
+| 작업 보고서 | 일일/주간 작업 보고 |
+| 출퇴근 기록 | 체크인/체크아웃 |
+| 근태/휴가 | 휴가 신청 및 관리 |
+| 순회 점검 | 일일 순회점검 결과 |
+
+**System 3 (tkqc)**
+| 데이터 | 설명 |
+|--------|------|
+| 부적합 이슈 | NCR 접수, 처리, 폐기 |
+| 일일 공수 | 작업자별 일일 공수 입력 |
+| 보고서 | 일일/주간/월간 보고서 |
+
+## tkuser API 엔드포인트
+
+| 경로 | 설명 |
+|------|------|
+| `GET/POST /api/users` | 사용자 CRUD |
+| `GET/POST /api/permissions` | 페이지 권한 관리 |
+| `GET/POST /api/projects` | 프로젝트 관리 |
+| `GET/POST /api/workers` | 작업자 관리 |
+| `GET/POST /api/departments` | 부서 관리 |
+| `GET/POST /api/workplaces` | 작업장·카테고리·구역지도 관리 |
+| `GET/POST /api/equipments` | 설비·사진 관리 |
+| `GET/POST /api/tasks` | 공정(work_types)·작업(tasks) 관리 |
+| `GET/POST /api/vacations` | 휴가 유형·연차 배정 관리 |
+
+## 데이터 흐름
+
+```
+┌───────────────────────────────────────────────────────────┐
+│                     tkuser (통합 관리)                       │
+│  사용자 / 프로젝트 / 작업장·설비 / 부서 / 작업·공정 / 휴가   │
+│                      [MariaDB]                            │
+└──────────┬──────────────┬──────────────┬──────────────────┘
+           │              │              │
+     API 조회         API 조회       API 조회
+           │              │              │
+    ┌──────▼──────┐ ┌─────▼──────┐ ┌────▼───────────┐
+    │  tkfactory  │ │  tkreport  │ │     tkqc       │
+    │  공장 관리   │ │  안전 신고  │ │  부적합 관리    │
+    │  [MariaDB]  │ │  [MariaDB] │ │  [PostgreSQL]  │
+    └─────────────┘ └────────────┘ └────────────────┘
+```
+
+## 인증 구조
+
+```
+사용자 로그인 → SSO Auth → JWT 토큰 (sso_token 쿠키)
+                           ↓
+              .technicalkorea.net 전체 공유
+                           ↓
+         각 시스템에서 쿠키로 인증 확인
+```
+
+- JWT 토큰은 `.technicalkorea.net` 도메인 쿠키로 설정
+- 모든 서브도메인에서 자동으로 인증 공유
+- 각 시스템 API는 동일한 `SSO_JWT_SECRET`으로 토큰 검증
+
+## 페이지 권한 체계
+
+권한은 **tkuser**에서 중앙 관리하며, 각 시스템은 API를 호출하여 권한을 확인합니다.
+
+| 시스템 | 권한 키 접두사 | 예시 |
+|--------|---------------|------|
+| System 1 | `s1.*` | `s1.work.tbm`, `s1.admin.projects` |
+| System 2 | - | 전체 허용 (권한 관리 불필요) |
+| System 3 | (접두사 없음) | `issues_dashboard`, `daily_work` |
+
+권한 우선순위:
+1. `user_page_permissions` 테이블에 명시적 설정이 있으면 해당 값 사용
+2. 없으면 `DEFAULT_PAGES`의 `default_access` 값 사용
+
+## 배포
+
+```bash
+# 전체 서비스
+docker compose up -d --build
+
+# 개별 서비스
+docker compose up -d --build tkuser-api tkuser-web
+docker compose up -d --build system1-api system1-web
+docker compose up -d --build system2-api system2-web
+docker compose up -d --build system3-api system3-web
+```
diff --git a/DEPLOYMENT.md b/DEPLOYMENT.md
new file mode 100644
index 0000000..3c02cdf
--- /dev/null
+++ b/DEPLOYMENT.md
@@ -0,0 +1,80 @@
+# TK Factory Services - 배포 가이드
+
+## NAS 접속
+
+| 환경 | 접속 주소 |
+|------|-----------|
+| **사내 네트워크 (로컬)** | `ssh hyungi@192.168.0.3` |
+| **외부 네트워크 (Tailscale VPN)** | `ssh hyungi@100.71.132.52` |
+
+> 외부에서 작업할 때는 Tailscale VPN IP(`100.71.132.52`)로 접속하세요.
+> Tailscale은 WireGuard 암호화를 사용하며, 인증된 기기만 접근 가능합니다.
+
+## 프로젝트 경로
+
+- **NAS 프로젝트**: `/volume1/docker/tk-factory-services`
+- **Docker 바이너리**: `/volume2/@appstore/ContainerManager/usr/bin`
+
+## 배포 방법
+
+### 1. 파일 전송 (scp)
+
+```bash
+# Synology NAS는 -O (레거시 모드) 플래그 필요
+scp -O <로컬파일> hyungi@100.71.132.52:/volume1/docker/tk-factory-services/<경로>
+```
+
+### 2. 컨테이너 빌드 및 재시작
+
+```bash
+ssh hyungi@100.71.132.52 "\
+  export PATH=\$PATH:/volume2/@appstore/ContainerManager/usr/bin && \
+  cd /volume1/docker/tk-factory-services && \
+  docker compose up -d --build <서비스명>"
+```
+
+### 서비스명 목록
+
+| 서비스 | 도메인 | 컨테이너 |
+|--------|--------|----------|
+| tkuser-web | tkuser.technicalkorea.net | tk-tkuser-web |
+| tkuser-api | - | tk-tkuser-api |
+| system1-web | tkfactory.technicalkorea.net | tk-system1-web |
+| system1-api | - | tk-system1-api |
+| system2-web | tkreport.technicalkorea.net | tk-system2-web |
+| system2-api | - | tk-system2-api |
+| system3-web | tkqc.technicalkorea.net | tk-system3-web |
+| system3-api | - | tk-system3-api |
+| gateway | technicalkorea.net | tk-gateway |
+| sso-auth | - | tk-sso-auth |
+
+### 3. DB 접속
+
+```bash
+ssh hyungi@100.71.132.52 "\
+  export PATH=\$PATH:/volume2/@appstore/ContainerManager/usr/bin && \
+  docker exec -it tk-mariadb mysql -uhyungi_user -p hyungi"
+```
+
+## 예시: System 2 전체 배포
+
+```bash
+NAS=hyungi@100.71.132.52
+PROJECT=/volume1/docker/tk-factory-services
+
+# 파일 전송
+scp -O system2-report/web/nginx.conf $NAS:$PROJECT/system2-report/web/nginx.conf
+scp -O system2-report/web/pages/safety/issue-report.html $NAS:$PROJECT/system2-report/web/pages/safety/issue-report.html
+scp -O system2-report/web/js/work-issue-report.js $NAS:$PROJECT/system2-report/web/js/work-issue-report.js
+scp -O system2-report/api/controllers/workIssueController.js $NAS:$PROJECT/system2-report/api/controllers/workIssueController.js
+
+# 컨테이너 재빌드
+ssh $NAS "export PATH=\$PATH:/volume2/@appstore/ContainerManager/usr/bin && \
+  cd $PROJECT && docker compose up -d --build system2-web system2-api"
+```
+
+## 주의사항
+
+- **Synology SCP**: 반드시 `-O` 플래그 사용 (레거시 프로토콜)
+- **Docker 권한**: `sudo chmod 666 /var/run/docker.sock` (NAS 재부팅 시 리셋됨)
+- **Tailscale**: NAS에서 로그아웃될 수 있음 → `sudo tailscale up`으로 재연결
diff --git a/docker-compose.yml b/docker-compose.yml
index df8c64b..80ae705 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -24,11 +24,6 @@ services:
       test: ["CMD", "mysqladmin", "ping", "-h", "localhost"]
       timeout: 20s
       retries: 10
-    deploy:
-      resources:
-        limits:
-          memory: 2G
-          cpus: "1.0"
     networks:
       - tk-network
 
@@ -51,11 +46,6 @@ services:
       test: ["CMD-SHELL", "pg_isready -U ${POSTGRES_USER:-mproject}"]
       timeout: 10s
       retries: 5
-    deploy:
-      resources:
-        limits:
-          memory: 1536M
-          cpus: "0.5"
     networks:
       - tk-network
 
@@ -69,11 +59,6 @@ services:
       interval: 10s
       timeout: 5s
       retries: 3
-    deploy:
-      resources:
-        limits:
-          memory: 256M
-          cpus: "0.25"
     networks:
       - tk-network
 
@@ -108,11 +93,6 @@ services:
         condition: service_healthy
       redis:
         condition: service_healthy
-    deploy:
-      resources:
-        limits:
-          memory: 256M
-          cpus: "0.25"
     networks:
       - tk-network
 
@@ -153,11 +133,6 @@ services:
         condition: service_healthy
       redis:
         condition: service_healthy
-    deploy:
-      resources:
-        limits:
-          memory: 512M
-          cpus: "0.5"
     networks:
       - tk-network
 
@@ -171,11 +146,6 @@ services:
       - "30080:80"
     depends_on:
       - system1-api
-    deploy:
-      resources:
-        limits:
-          memory: 128M
-          cpus: "0.25"
     networks:
       - tk-network
 
@@ -191,11 +161,6 @@ services:
       - API_BASE_URL=http://system1-api:3005
     depends_on:
       - system1-api
-    deploy:
-      resources:
-        limits:
-          memory: 256M
-          cpus: "0.25"
     networks:
       - tk-network
 
@@ -235,11 +200,6 @@ services:
         condition: service_healthy
       redis:
         condition: service_healthy
-    deploy:
-      resources:
-        limits:
-          memory: 384M
-          cpus: "0.5"
     networks:
       - tk-network
 
@@ -253,11 +213,6 @@ services:
       - "30180:80"
     depends_on:
       - system2-api
-    deploy:
-      resources:
-        limits:
-          memory: 128M
-          cpus: "0.25"
     networks:
       - tk-network
 
@@ -274,23 +229,22 @@ services:
     ports:
       - "30200:8000"
     environment:
-      - DATABASE_URL=${SYSTEM3_DATABASE_URL:-postgresql://mproject:mproject2024@postgres:5432/mproject}
+      - DB_HOST=mariadb
+      - DB_PORT=3306
+      - DB_USER=${MYSQL_USER:-hyungi_user}
+      - DB_PASSWORD=${MYSQL_PASSWORD}
+      - DB_NAME=${MYSQL_DATABASE:-hyungi}
       - SECRET_KEY=${SSO_JWT_SECRET}
       - ALGORITHM=HS256
       - ACCESS_TOKEN_EXPIRE_MINUTES=10080
       - ADMIN_USERNAME=${SYSTEM3_ADMIN_USERNAME:-hyungi}
-      - ADMIN_PASSWORD=${SYSTEM3_ADMIN_PASSWORD:-123456}
       - TZ=Asia/Seoul
+      - TKUSER_API_URL=http://tkuser-api:3000
     volumes:
       - system3_uploads:/app/uploads
     depends_on:
-      postgres:
+      mariadb:
         condition: service_healthy
-    deploy:
-      resources:
-        limits:
-          memory: 512M
-          cpus: "0.5"
     networks:
       - tk-network
 
@@ -302,13 +256,52 @@ services:
     restart: unless-stopped
     ports:
       - "30280:80"
+    volumes:
+      - system3_uploads:/usr/share/nginx/html/uploads
     depends_on:
       - system3-api
-    deploy:
-      resources:
-        limits:
-          memory: 128M
-          cpus: "0.25"
+    networks:
+      - tk-network
+
+  # =================================================================
+  # User Management (tkuser)
+  # =================================================================
+
+  tkuser-api:
+    build:
+      context: ./user-management/api
+      dockerfile: Dockerfile
+    container_name: tk-tkuser-api
+    restart: unless-stopped
+    ports:
+      - "30300:3000"
+    environment:
+      - NODE_ENV=production
+      - PORT=3000
+      - DB_HOST=mariadb
+      - DB_PORT=3306
+      - DB_USER=${MYSQL_USER:-hyungi_user}
+      - DB_PASSWORD=${MYSQL_PASSWORD}
+      - DB_NAME=${MYSQL_DATABASE:-hyungi}
+      - SSO_JWT_SECRET=${SSO_JWT_SECRET}
+    volumes:
+      - system1_uploads:/usr/src/app/uploads
+    depends_on:
+      mariadb:
+        condition: service_healthy
+    networks:
+      - tk-network
+
+  tkuser-web:
+    build:
+      context: ./user-management/web
+      dockerfile: Dockerfile
+    container_name: tk-tkuser-web
+    restart: unless-stopped
+    ports:
+      - "30380:80"
+    depends_on:
+      - tkuser-api
     networks:
       - tk-network
 
@@ -329,11 +322,6 @@ services:
       - system1-web
       - system2-web
       - system3-web
-    deploy:
-      resources:
-        limits:
-          memory: 128M
-          cpus: "0.25"
     networks:
       - tk-network
 
@@ -355,11 +343,6 @@ services:
     depends_on:
       mariadb:
         condition: service_healthy
-    deploy:
-      resources:
-        limits:
-          memory: 128M
-          cpus: "0.25"
     networks:
       - tk-network
 
@@ -378,23 +361,25 @@ services:
       - gateway
       - system2-web
       - system3-web
-    deploy:
-      resources:
-        limits:
-          memory: 128M
-          cpus: "0.25"
     networks:
       - tk-network
 
 volumes:
   mariadb_data:
+    external: true
+    name: tkfb-package_db_data
   postgres_data:
+    external: true
+    name: tkqc-package_postgres_data
   system1_uploads:
+    external: true
+    name: tkfb_api_uploads
   system1_logs:
   system2_uploads:
   system2_logs:
   system3_uploads:
-
+    external: true
+    name: tkqc-package_uploads
 networks:
   tk-network:
     driver: bridge
diff --git a/sso-auth-service/Dockerfile b/sso-auth-service/Dockerfile
index b27b305..7f8276e 100644
--- a/sso-auth-service/Dockerfile
+++ b/sso-auth-service/Dockerfile
@@ -3,7 +3,7 @@ FROM node:18-alpine
 WORKDIR /usr/src/app
 
 COPY package*.json ./
-RUN npm ci --only=production
+RUN npm install --omit=dev
 
 COPY . .
 
diff --git a/system1-factory/api/Dockerfile b/system1-factory/api/Dockerfile
index 5ce8317..7aa384c 100644
--- a/system1-factory/api/Dockerfile
+++ b/system1-factory/api/Dockerfile
@@ -8,7 +8,7 @@ WORKDIR /usr/src/app
 COPY package*.json ./
 
 # 프로덕션 의존성만 설치
-RUN npm ci --only=production
+RUN npm install --omit=dev
 
 # 앱 소스 복사
 COPY . .
diff --git a/system1-factory/api/config/cors.js b/system1-factory/api/config/cors.js
index a6ba58f..723664d 100644
--- a/system1-factory/api/config/cors.js
+++ b/system1-factory/api/config/cors.js
@@ -13,10 +13,14 @@ const logger = require('../utils/logger');
  * 허용된 Origin 목록
  */
 const allowedOrigins = [
-  'http://localhost:20000',   // 웹 UI
+  'https://tkfb.technicalkorea.net',    // Gateway (프로덕션)
+  'https://tkreport.technicalkorea.net', // System 2
+  'https://tkqc.technicalkorea.net',     // System 3
+  'http://localhost:20000',   // 웹 UI (로컬)
+  'http://localhost:30080',   // 웹 UI (Docker)
   'http://localhost:3005',    // API 서버
   'http://localhost:3000',    // 개발 포트
-  'http://127.0.0.1:20000',   // 로컬호스트 대체
+  'http://127.0.0.1:20000',
   'http://127.0.0.1:3005',
   'http://127.0.0.1:3000'
 ];
diff --git a/system1-factory/fastapi-bridge/config.py b/system1-factory/fastapi-bridge/config.py
index 65696b3..f8ac982 100644
--- a/system1-factory/fastapi-bridge/config.py
+++ b/system1-factory/fastapi-bridge/config.py
@@ -7,7 +7,7 @@ from typing import List
 class Settings:
     # 기본 설정
     FASTAPI_PORT: int = int(os.getenv("FASTAPI_PORT", "8000"))
-    EXPRESS_API_URL: str = os.getenv("EXPRESS_API_URL", "http://api:20005")
+    EXPRESS_API_URL: str = os.getenv("EXPRESS_API_URL", "http://system1-api:3005")
     REDIS_URL: str = os.getenv("REDIS_URL", "redis://localhost:6379")
     NODE_ENV: str = os.getenv("NODE_ENV", "development")
     
diff --git a/system1-factory/web/js/api-config.js b/system1-factory/web/js/api-config.js
index 206eba5..6106538 100644
--- a/system1-factory/web/js/api-config.js
+++ b/system1-factory/web/js/api-config.js
@@ -6,25 +6,29 @@ function getApiBaseUrl() {
   const hostname = window.location.hostname;
   const protocol = window.location.protocol;
   const port = window.location.port;
-  
+
   console.log('🌐 감지된 환경:', { hostname, protocol, port });
-  
-  // 🔗 nginx 프록시를 통한 접근 (권장)
-  // nginx가 /api/ 요청을 백엔드로 프록시하므로 포트 없이 접근
-  if (hostname.startsWith('192.168.') || hostname.startsWith('10.') || hostname.startsWith('172.') || 
-      hostname === 'localhost' || hostname === '127.0.0.1' || 
-      hostname.includes('.local') || hostname.includes('hyungi')) {
-    
-    // 현재 웹서버의 도메인/IP를 그대로 사용하되 API 포트(config.api.port)로 직접 연결
-    const baseUrl = `${protocol}//${hostname}:${config.api.port}${config.api.path}`;
-    
-    console.log('✅ nginx 프록시 사용:', baseUrl);
+
+  // 🔗 외부 도메인 (Cloudflare Tunnel) - Gateway nginx가 /api/를 프록시
+  if (hostname.includes('technicalkorea.net')) {
+    const baseUrl = `${protocol}//${hostname}${config.api.path}`;
+    console.log('✅ Gateway 프록시 사용:', baseUrl);
     return baseUrl;
   }
-  
-  // 🚨 백업: 직접 접근 (nginx 프록시 실패시에만)
-  console.warn('⚠️ 직접 API 접근 (백업 모드)');
-  return `${protocol}//${hostname}:${config.api.port}${config.api.path}`;
+
+  // 🔗 로컬/내부 네트워크 - API 포트 직접 접근
+  if (hostname.startsWith('192.168.') || hostname.startsWith('10.') || hostname.startsWith('172.') ||
+      hostname === 'localhost' || hostname === '127.0.0.1' ||
+      hostname.includes('.local') || hostname.includes('hyungi')) {
+    const baseUrl = `${protocol}//${hostname}:${config.api.port}${config.api.path}`;
+    console.log('✅ 로컬 직접 접근:', baseUrl);
+    return baseUrl;
+  }
+
+  // 🚨 기타: 포트 없이 상대 경로
+  const baseUrl = `${protocol}//${hostname}${config.api.path}`;
+  console.log('✅ 기본 프록시 사용:', baseUrl);
+  return baseUrl;
 }
 
 // API 설정
diff --git a/system1-factory/web/js/api-helper.js b/system1-factory/web/js/api-helper.js
index 6bc5c05..ce77e84 100644
--- a/system1-factory/web/js/api-helper.js
+++ b/system1-factory/web/js/api-helper.js
@@ -2,7 +2,7 @@
 // ES6 모듈 의존성 제거 - 브라우저 호환성 개선
 
 // API 설정 (window 객체에서 가져오기)
-const API_BASE_URL = window.API_BASE_URL || 'http://localhost:20005/api';
+const API_BASE_URL = window.API_BASE_URL || 'http://localhost:30005/api';
 
 // 인증 관련 함수들 (직접 구현)
 function getToken() {
diff --git a/system1-factory/web/js/config.js b/system1-factory/web/js/config.js
index 0b551a5..598e1cd 100644
--- a/system1-factory/web/js/config.js
+++ b/system1-factory/web/js/config.js
@@ -7,7 +7,7 @@ export const config = {
   // API 관련 설정
   api: {
     // 로컬 개발 및 Docker 환경에서 사용하는 API 서버 포트
-    port: 20005,
+    port: 30005,
     // API의 기본 경로
     path: '/api',
   },
diff --git a/system1-factory/web/js/daily-work-report.js b/system1-factory/web/js/daily-work-report.js
index 1fa7f1b..1abac42 100644
--- a/system1-factory/web/js/daily-work-report.js
+++ b/system1-factory/web/js/daily-work-report.js
@@ -1115,7 +1115,7 @@ async function loadWorkplaceMap(categoryId, layoutImagePath, workplaces) {
     mapCtx = mapCanvas.getContext('2d');
 
     // 이미지 URL 생성
-    const baseUrl = window.API_BASE_URL || 'http://localhost:20005';
+    const baseUrl = window.API_BASE_URL || 'http://localhost:30005';
     const apiBaseUrl = baseUrl.replace('/api', ''); // /api 제거
     const fullImageUrl = layoutImagePath.startsWith('http')
       ? layoutImagePath
diff --git a/system1-factory/web/js/nonconformity-list.js b/system1-factory/web/js/nonconformity-list.js
index 315b2ad..af119cc 100644
--- a/system1-factory/web/js/nonconformity-list.js
+++ b/system1-factory/web/js/nonconformity-list.js
@@ -3,7 +3,7 @@
  * category_type=nonconformity 고정 필터
  */
 
-const API_BASE = window.API_BASE_URL || 'http://localhost:20005/api';
+const API_BASE = window.API_BASE_URL || 'http://localhost:30005/api';
 const CATEGORY_TYPE = 'nonconformity';
 
 // 상태 한글 변환
@@ -110,7 +110,7 @@ function renderIssues(issues) {
     return;
   }
 
-  const baseUrl = (window.API_BASE_URL || 'http://localhost:20005').replace('/api', '');
+  const baseUrl = (window.API_BASE_URL || 'http://localhost:30005').replace('/api', '');
 
   issueList.innerHTML = issues.map(issue => {
     const reportDate = new Date(issue.report_date).toLocaleString('ko-KR', {
diff --git a/system1-factory/web/js/safety-report-list.js b/system1-factory/web/js/safety-report-list.js
index e721dd8..313a777 100644
--- a/system1-factory/web/js/safety-report-list.js
+++ b/system1-factory/web/js/safety-report-list.js
@@ -3,7 +3,7 @@
  * category_type=safety 고정 필터
  */
 
-const API_BASE = window.API_BASE_URL || 'http://localhost:20005/api';
+const API_BASE = window.API_BASE_URL || 'http://localhost:30005/api';
 const CATEGORY_TYPE = 'safety';
 
 // 상태 한글 변환
@@ -110,7 +110,7 @@ function renderIssues(issues) {
     return;
   }
 
-  const baseUrl = (window.API_BASE_URL || 'http://localhost:20005').replace('/api', '');
+  const baseUrl = (window.API_BASE_URL || 'http://localhost:30005').replace('/api', '');
 
   issueList.innerHTML = issues.map(issue => {
     const reportDate = new Date(issue.report_date).toLocaleString('ko-KR', {
diff --git a/system1-factory/web/js/tbm.js b/system1-factory/web/js/tbm.js
index c2fb7e3..9297dd2 100644
--- a/system1-factory/web/js/tbm.js
+++ b/system1-factory/web/js/tbm.js
@@ -1672,7 +1672,7 @@ async function loadWorkplaceMap(categoryId, layoutImagePath) {
     mapCtx = mapCanvas.getContext('2d');
 
     // 이미지 URL 생성
-    const baseUrl = window.API_BASE_URL || 'http://localhost:20005';
+    const baseUrl = window.API_BASE_URL || 'http://localhost:30005';
     const apiBaseUrl = baseUrl.replace('/api', ''); // /api 제거
     const fullImageUrl = layoutImagePath.startsWith('http')
       ? layoutImagePath
diff --git a/system1-factory/web/js/visit-request.js b/system1-factory/web/js/visit-request.js
index 22eadef..7a26e18 100644
--- a/system1-factory/web/js/visit-request.js
+++ b/system1-factory/web/js/visit-request.js
@@ -304,7 +304,7 @@ async function loadWorkplaceMap() {
     // 레이아웃 이미지가 있으면 표시
     if (selectedCategory && selectedCategory.layout_image) {
       // API_BASE_URL에서 /api 제거하고 이미지 경로 생성
-      const baseUrl = (window.API_BASE_URL || 'http://localhost:20005').replace('/api', '');
+      const baseUrl = (window.API_BASE_URL || 'http://localhost:30005').replace('/api', '');
       const fullImageUrl = selectedCategory.layout_image.startsWith('http')
         ? selectedCategory.layout_image
         : `${baseUrl}${selectedCategory.layout_image}`;
diff --git a/system1-factory/web/js/work-analysis/api-client.js b/system1-factory/web/js/work-analysis/api-client.js
index 9ede593..92ae821 100644
--- a/system1-factory/web/js/work-analysis/api-client.js
+++ b/system1-factory/web/js/work-analysis/api-client.js
@@ -5,7 +5,7 @@
 
 class WorkAnalysisAPIClient {
     constructor() {
-        this.baseURL = window.API_BASE_URL || 'http://localhost:20005/api';
+        this.baseURL = window.API_BASE_URL || 'http://localhost:30005/api';
     }
 
     /**
diff --git a/system1-factory/web/js/workplace-layout-map.js b/system1-factory/web/js/workplace-layout-map.js
index 049ff3c..c7c8252 100644
--- a/system1-factory/web/js/workplace-layout-map.js
+++ b/system1-factory/web/js/workplace-layout-map.js
@@ -88,7 +88,7 @@ async function loadLayoutMapData() {
       // 이미지 경로를 전체 URL로 변환
       const fullImageUrl = category.layout_image.startsWith('http')
         ? category.layout_image
-        : `${window.API_BASE_URL || 'http://localhost:20005/api'}${category.layout_image}`.replace('/api/', '/');
+        : `${window.API_BASE_URL || 'http://localhost:30005/api'}${category.layout_image}`.replace('/api/', '/');
 
       currentImageDiv.innerHTML = `
         <img src="${fullImageUrl}" style="max-width: 100%; max-height: 300px; border-radius: 4px;" alt="현재 레이아웃 이미지">
@@ -210,7 +210,7 @@ async function uploadLayoutImage() {
     formData.append('image', file);
 
     // 업로드 요청
-    const response = await fetch(`${window.API_BASE_URL || 'http://localhost:20005/api'}/workplaces/categories/${currentCategoryId}/layout-image`, {
+    const response = await fetch(`${window.API_BASE_URL || 'http://localhost:30005/api'}/workplaces/categories/${currentCategoryId}/layout-image`, {
       method: 'POST',
       headers: {
         'Authorization': `Bearer ${localStorage.getItem('sso_token')}`
@@ -224,7 +224,7 @@ async function uploadLayoutImage() {
       window.showToast('이미지가 성공적으로 업로드되었습니다.', 'success');
 
       // 이미지 경로를 전체 URL로 변환
-      const fullImageUrl = `${window.API_BASE_URL || 'http://localhost:20005/api'}${result.data.image_path}`.replace('/api/', '/');
+      const fullImageUrl = `${window.API_BASE_URL || 'http://localhost:30005/api'}${result.data.image_path}`.replace('/api/', '/');
 
       // 이미지를 캔버스에 로드
       loadImageToCanvas(fullImageUrl);
diff --git a/system1-factory/web/js/workplace-management.js b/system1-factory/web/js/workplace-management.js
index 9aff3c5..223c8a7 100644
--- a/system1-factory/web/js/workplace-management.js
+++ b/system1-factory/web/js/workplace-management.js
@@ -147,7 +147,7 @@ async function updateLayoutPreview(category) {
     // 이미지 경로를 전체 URL로 변환
     const fullImageUrl = category.layout_image.startsWith('http')
       ? category.layout_image
-      : `${window.API_BASE_URL || 'http://localhost:20005/api'}${category.layout_image}`.replace('/api/', '/');
+      : `${window.API_BASE_URL || 'http://localhost:30005/api'}${category.layout_image}`.replace('/api/', '/');
 
     // Canvas 컨테이너 생성
     previewDiv.innerHTML = `
@@ -267,7 +267,7 @@ async function loadWorkplaceMapThumbnail(workplace) {
   if (workplace.layout_image) {
     const fullImageUrl = workplace.layout_image.startsWith('http')
       ? workplace.layout_image
-      : `${window.API_BASE_URL || 'http://localhost:20005/api'}${workplace.layout_image}`.replace('/api/', '/');
+      : `${window.API_BASE_URL || 'http://localhost:30005/api'}${workplace.layout_image}`.replace('/api/', '/');
 
     // 설비 정보 로드
     let equipmentCount = 0;
@@ -327,7 +327,7 @@ async function loadWorkplaceMapThumbnail(workplace) {
 
     const fullImageUrl = category.layout_image.startsWith('http')
       ? category.layout_image
-      : `${window.API_BASE_URL || 'http://localhost:20005/api'}${category.layout_image}`.replace('/api/', '/');
+      : `${window.API_BASE_URL || 'http://localhost:30005/api'}${category.layout_image}`.replace('/api/', '/');
 
     // 캔버스 생성
     const canvasId = `thumbnail-canvas-${workplace.workplace_id}`;
@@ -1019,7 +1019,7 @@ async function openWorkplaceMapModal(workplaceId) {
   if (preview && workplace.layout_image) {
     const fullImageUrl = workplace.layout_image.startsWith('http')
       ? workplace.layout_image
-      : `${window.API_BASE_URL || 'http://localhost:20005/api'}${workplace.layout_image}`.replace('/api/', '/');
+      : `${window.API_BASE_URL || 'http://localhost:30005/api'}${workplace.layout_image}`.replace('/api/', '/');
     preview.innerHTML = `<img src="${fullImageUrl}" alt="작업장 레이아웃" style="max-width: 100%; border-radius: 4px;">`;
 
     // 캔버스 초기화
@@ -1126,7 +1126,7 @@ async function uploadWorkplaceLayout() {
   try {
     showToast('이미지 업로드 중...', 'info');
 
-    const response = await fetch(`${window.API_BASE_URL || 'http://localhost:20005/api'}/workplaces/${window.currentWorkplaceMapId}/layout-image`, {
+    const response = await fetch(`${window.API_BASE_URL || 'http://localhost:30005/api'}/workplaces/${window.currentWorkplaceMapId}/layout-image`, {
       method: 'POST',
       headers: {
         'Authorization': `Bearer ${localStorage.getItem('sso_token')}`
@@ -1148,7 +1148,7 @@ async function uploadWorkplaceLayout() {
       if (preview && result.data.image_path) {
         const fullImageUrl = result.data.image_path.startsWith('http')
           ? result.data.image_path
-          : `${window.API_BASE_URL || 'http://localhost:20005/api'}${result.data.image_path}`.replace('/api/', '/');
+          : `${window.API_BASE_URL || 'http://localhost:30005/api'}${result.data.image_path}`.replace('/api/', '/');
         preview.innerHTML = `<img src="${fullImageUrl}" alt="작업장 레이아웃" style="max-width: 100%; border-radius: 4px;">`;
 
         // 캔버스 초기화 (설비 영역 편집용)
@@ -1678,7 +1678,7 @@ async function openFullscreenEquipmentEditor() {
   // 이미지 URL 생성
   const fullImageUrl = workplace.layout_image.startsWith('http')
     ? workplace.layout_image
-    : `${window.API_BASE_URL || 'http://localhost:20005/api'}${workplace.layout_image}`.replace('/api/', '/');
+    : `${window.API_BASE_URL || 'http://localhost:30005/api'}${workplace.layout_image}`.replace('/api/', '/');
 
   // 캔버스 초기화
   initFullscreenCanvas(fullImageUrl);
diff --git a/system1-factory/web/js/workplace-management/utils.js b/system1-factory/web/js/workplace-management/utils.js
index 04de92e..49fa1be 100644
--- a/system1-factory/web/js/workplace-management/utils.js
+++ b/system1-factory/web/js/workplace-management/utils.js
@@ -25,7 +25,7 @@ class WorkplaceUtils {
    * API URL 생성
    */
   getApiBaseUrl() {
-    return window.API_BASE_URL || 'http://localhost:20005/api';
+    return window.API_BASE_URL || 'http://localhost:30005/api';
   }
 
   /**
diff --git a/system1-factory/web/js/workplace-status.js b/system1-factory/web/js/workplace-status.js
index 6e72dd7..d08cf75 100644
--- a/system1-factory/web/js/workplace-status.js
+++ b/system1-factory/web/js/workplace-status.js
@@ -129,7 +129,7 @@ async function loadMapImage() {
   return new Promise((resolve, reject) => {
     const img = new Image();
 
-    const baseUrl = (window.API_BASE_URL || 'http://localhost:20005').replace('/api', '');
+    const baseUrl = (window.API_BASE_URL || 'http://localhost:30005').replace('/api', '');
     const fullImageUrl = selectedCategory.layout_image.startsWith('http')
       ? selectedCategory.layout_image
       : `${baseUrl}${selectedCategory.layout_image}`;
@@ -563,7 +563,7 @@ async function initDetailMap(workplace) {
 
   // 작업장에 레이아웃 이미지가 있는지 확인
   if (workplace.layout_image) {
-    const baseUrl = (window.API_BASE_URL || 'http://localhost:20005').replace('/api', '');
+    const baseUrl = (window.API_BASE_URL || 'http://localhost:30005').replace('/api', '');
     const imageUrl = workplace.layout_image.startsWith('http')
       ? workplace.layout_image
       : `${baseUrl}${workplace.layout_image}`;
diff --git a/system1-factory/web/pages/dashboard.html b/system1-factory/web/pages/dashboard.html
index 598c987..d59b3da 100644
--- a/system1-factory/web/pages/dashboard.html
+++ b/system1-factory/web/pages/dashboard.html
@@ -7,7 +7,7 @@
   <title>작업 현황판 | 테크니컬코리아</title>
 
   <!-- 리소스 프리로딩 -->
-  <link rel="preconnect" href="http://localhost:20005" crossorigin>
+  <!-- preconnect는 Gateway 프록시 사용 시 불필요 -->
   <link rel="preload" href="/css/design-system.css" as="style">
   <link rel="preload" href="/js/api-base.js" as="script">
   <link rel="preload" href="/js/app-init.js?v=2" as="script">
diff --git a/system2-report/api/Dockerfile b/system2-report/api/Dockerfile
index b4927c9..cfe530e 100644
--- a/system2-report/api/Dockerfile
+++ b/system2-report/api/Dockerfile
@@ -3,7 +3,7 @@ FROM node:18-alpine
 WORKDIR /usr/src/app
 
 COPY package*.json ./
-RUN npm ci --only=production
+RUN npm install --omit=dev
 
 COPY . .
 
diff --git a/system2-report/api/controllers/workIssueController.js b/system2-report/api/controllers/workIssueController.js
index 0811be6..c090a11 100644
--- a/system2-report/api/controllers/workIssueController.js
+++ b/system2-report/api/controllers/workIssueController.js
@@ -4,6 +4,7 @@
 
 const workIssueModel = require('../models/workIssueModel');
 const imageUploadService = require('../services/imageUploadService');
+const mProjectService = require('../services/mProjectService');
 
 // ==================== 신고 카테고리 관리 ====================
 
@@ -26,7 +27,7 @@ exports.getAllCategories = (req, res) => {
 exports.getCategoriesByType = (req, res) => {
   const { type } = req.params;
 
-  if (!['nonconformity', 'safety'].includes(type)) {
+  if (!['nonconformity', 'safety', 'facility'].includes(type)) {
     return res.status(400).json({ success: false, error: '유효하지 않은 카테고리 타입입니다.' });
   }
 
@@ -283,16 +284,53 @@ exports.createReport = async (req, res) => {
       ...photoPaths
     };
 
-    workIssueModel.createReport(reportData, (err, reportId) => {
+    workIssueModel.createReport(reportData, async (err, reportId) => {
       if (err) {
         console.error('신고 생성 실패:', err);
         return res.status(500).json({ success: false, error: '신고 생성 실패' });
       }
+
+      // 응답 먼저 반환 (사용자 대기 X)
       res.status(201).json({
         success: true,
         message: '문제 신고가 등록되었습니다.',
         data: { report_id: reportId }
       });
+
+      // 부적합 유형이면 System 3(tkqc)으로 비동기 전달
+      try {
+        const categoryInfo = await new Promise((resolve, reject) => {
+          workIssueModel.getCategoryById(issue_category_id, (catErr, data) => {
+            if (catErr) reject(catErr); else resolve(data);
+          });
+        });
+
+        if (categoryInfo && categoryInfo.category_type === 'nonconformity') {
+          // 사진은 System 2에만 저장, URL 참조만 전달
+          const baseUrl = process.env.SYSTEM2_PUBLIC_URL || 'https://tkreport.technicalkorea.net';
+          const photoUrls = Object.values(photoPaths).filter(Boolean)
+            .map(p => `${baseUrl}/api/uploads/${p}`);
+
+          const descParts = [additional_description || categoryInfo.category_name];
+          if (photoUrls.length > 0) {
+            descParts.push('', '[첨부 사진]');
+            photoUrls.forEach((url, i) => descParts.push(`${i + 1}. ${url}`));
+          }
+
+          const result = await mProjectService.sendToMProject({
+            category: categoryInfo.category_name,
+            description: descParts.join('\n'),
+            reporter_name: req.user.name || req.user.username,
+            tk_issue_id: reportId,
+            photos: [] // 사진 복사 안 함 (URL 참조만)
+          });
+          if (result.success && result.mProjectId) {
+            workIssueModel.updateMProjectId(reportId, result.mProjectId, () => {});
+          }
+        }
+      } catch (e) {
+        console.error('System3 연동 실패 (신고는 정상 저장됨):', e.message);
+      }
     });
   } catch (error) {
     console.error('신고 생성 에러:', error);
diff --git a/system2-report/api/models/workIssueModel.js b/system2-report/api/models/workIssueModel.js
index 34ec5ef..4351f0f 100644
--- a/system2-report/api/models/workIssueModel.js
+++ b/system2-report/api/models/workIssueModel.js
@@ -198,6 +198,24 @@ const deleteItem = async (itemId, callback) => {
   }
 };
 
+/**
+ * 카테고리 ID로 단건 조회
+ */
+const getCategoryById = async (categoryId, callback) => {
+  try {
+    const db = await getDb();
+    const [rows] = await db.query(
+      `SELECT category_id, category_type, category_name, description
+       FROM issue_report_categories
+       WHERE category_id = ?`,
+      [categoryId]
+    );
+    callback(null, rows[0] || null);
+  } catch (err) {
+    callback(err);
+  }
+};
+
 // ==================== 문제 신고 관리 ====================
 
 // 한국 시간 유틸리티 import
@@ -736,6 +754,22 @@ const getStatusLogs = async (reportId, callback) => {
   }
 };
 
+/**
+ * m_project_id 업데이트 (System 3 연동 후)
+ */
+const updateMProjectId = async (reportId, mProjectId, callback) => {
+  try {
+    const db = await getDb();
+    await db.query(
+      `UPDATE work_issue_reports SET m_project_id = ? WHERE report_id = ?`,
+      [mProjectId, reportId]
+    );
+    callback(null);
+  } catch (err) {
+    callback(err);
+  }
+};
+
 // ==================== 통계 ====================
 
 /**
@@ -854,6 +888,7 @@ module.exports = {
   // 카테고리
   getAllCategories,
   getCategoriesByType,
+  getCategoryById,
   createCategory,
   updateCategory,
   deleteCategory,
@@ -872,6 +907,9 @@ module.exports = {
   updateReport,
   deleteReport,
 
+  // System 3 연동
+  updateMProjectId,
+
   // 상태 관리
   receiveReport,
   assignReport,
diff --git a/system2-report/api/package.json b/system2-report/api/package.json
index c354333..98a77ca 100644
--- a/system2-report/api/package.json
+++ b/system2-report/api/package.json
@@ -8,6 +8,7 @@
     "dev": "node --watch index.js"
   },
   "dependencies": {
+    "async-retry": "^1.3.3",
     "bcrypt": "^6.0.0",
     "cors": "^2.8.5",
     "dotenv": "^16.4.5",
diff --git a/system2-report/web/css/common.css b/system2-report/web/css/common.css
new file mode 100644
index 0000000..eb1a24c
--- /dev/null
+++ b/system2-report/web/css/common.css
@@ -0,0 +1,300 @@
+/* Common CSS - 공통 스타일 */
+
+/* ========== 통일된 헤더 스타일 ========== */
+.work-report-container {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.work-report-header {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  text-align: center;
+  padding: 2rem 1.5rem;
+  margin-bottom: 0;
+}
+
+.work-report-header h1 {
+  font-size: clamp(1.5rem, 4vw, 2.5rem);
+  font-weight: 700;
+  margin: 0 0 0.75rem 0;
+  text-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.3);
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+.work-report-header .subtitle {
+  font-size: clamp(0.875rem, 2vw, 1.1rem);
+  opacity: 0.9;
+  margin: 0;
+  font-weight: 300;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  max-width: 90%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.work-report-main {
+  background: #f8f9fa;
+  min-height: calc(100vh - 12rem);
+  padding-top: 2rem;
+}
+
+.back-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1.5rem;
+  background: rgba(255, 255, 255, 0.9);
+  color: #495057;
+  text-decoration: none;
+  border-radius: 0.5rem;
+  font-weight: 500;
+  margin: 0 1.5rem 1.5rem 1.5rem;
+  transition: all 0.3s ease;
+  box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.1);
+  white-space: nowrap;
+}
+
+.back-button:hover {
+  background: white;
+  color: #007bff;
+  transform: translateY(-0.0625rem);
+  box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.15);
+}
+
+/* 반응형 헤더 */
+@media (max-width: 768px) {
+  .work-report-header {
+    padding: 1.5rem 1rem;
+  }
+
+  .work-report-header h1 {
+    margin-bottom: 0.5rem;
+  }
+
+  .back-button {
+    margin: 0 1rem 1rem 1rem;
+    padding: 0.625rem 1.25rem;
+    font-size: 0.875rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .work-report-header {
+    padding: 1.25rem 0.75rem;
+  }
+
+  .work-report-header .subtitle {
+    font-size: 0.8125rem;
+  }
+
+  .back-button {
+    margin: 0 0.75rem 0.75rem 0.75rem;
+    padding: 0.5rem 1rem;
+    font-size: 0.8125rem;
+  }
+}
+
+/* Reset and Base Styles */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  line-height: 1.6;
+  color: #333;
+  background-color: #f8fafc;
+}
+
+/* Typography */
+h1, h2, h3, h4, h5, h6 {
+  font-weight: 600;
+  line-height: 1.25;
+  margin-bottom: 0.5rem;
+}
+
+h1 { font-size: 2rem; }
+h2 { font-size: 1.5rem; }
+h3 { font-size: 1.25rem; }
+h4 { font-size: 1.125rem; }
+h5 { font-size: 1rem; }
+h6 { font-size: 0.875rem; }
+
+/* ========== 헤더 액션 버튼 ========== */
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-right: 1rem;
+}
+
+.dashboard-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.6rem 1.2rem;
+  background: rgba(255, 255, 255, 0.15);
+  color: white;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 8px;
+  font-size: 0.9rem;
+  font-weight: 500;
+  text-decoration: none;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  backdrop-filter: blur(10px);
+}
+
+.dashboard-btn:hover {
+  background: rgba(255, 255, 255, 0.25);
+  border-color: rgba(255, 255, 255, 0.5);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+}
+
+.dashboard-btn .btn-icon {
+  font-size: 1rem;
+}
+
+/* Buttons */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem 1rem;
+  border: none;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  text-decoration: none;
+}
+
+.btn-primary {
+  background-color: #3b82f6;
+  color: white;
+}
+
+.btn-primary:hover {
+  background-color: #2563eb;
+}
+
+.btn-secondary {
+  background-color: #6b7280;
+  color: white;
+}
+
+.btn-secondary:hover {
+  background-color: #4b5563;
+}
+
+/* Utilities */
+.text-center { text-align: center; }
+.text-left { text-align: left; }
+.text-right { text-align: right; }
+
+.mb-1 { margin-bottom: 0.25rem; }
+.mb-2 { margin-bottom: 0.5rem; }
+.mb-3 { margin-bottom: 0.75rem; }
+.mb-4 { margin-bottom: 1rem; }
+.mb-5 { margin-bottom: 1.25rem; }
+.mb-6 { margin-bottom: 1.5rem; }
+
+.mt-1 { margin-top: 0.25rem; }
+.mt-2 { margin-top: 0.5rem; }
+.mt-3 { margin-top: 0.75rem; }
+.mt-4 { margin-top: 1rem; }
+.mt-5 { margin-top: 1.25rem; }
+.mt-6 { margin-top: 1.5rem; }
+
+.p-1 { padding: 0.25rem; }
+.p-2 { padding: 0.5rem; }
+.p-3 { padding: 0.75rem; }
+.p-4 { padding: 1rem; }
+.p-5 { padding: 1.25rem; }
+.p-6 { padding: 1.5rem; }
+
+/* Container */
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 1rem;
+}
+
+/* Cards */
+.card {
+  background: white;
+  border-radius: 0.5rem;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  border: 1px solid #e5e7eb;
+}
+
+.card-header {
+  padding: 1rem;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.card-body {
+  padding: 1rem;
+}
+
+/* Forms */
+.form-group {
+  margin-bottom: 1rem;
+}
+
+.form-label {
+  display: block;
+  font-weight: 500;
+  margin-bottom: 0.25rem;
+  color: #374151;
+}
+
+.form-control {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid #d1d5db;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  transition: border-color 0.2s ease;
+}
+
+.form-control:focus {
+  outline: none;
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+/* Loading */
+.loading {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  border: 3px solid #f3f3f3;
+  border-top: 3px solid #3b82f6;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .container {
+    padding: 0 0.5rem;
+  }
+  
+  h1 { font-size: 1.5rem; }
+  h2 { font-size: 1.25rem; }
+  h3 { font-size: 1.125rem; }
+}
diff --git a/system2-report/web/css/design-system.css b/system2-report/web/css/design-system.css
new file mode 100644
index 0000000..ee1b15c
--- /dev/null
+++ b/system2-report/web/css/design-system.css
@@ -0,0 +1,477 @@
+/* ✅ design-system.css - 한글 기반 모던 디자인 시스템 */
+
+/* ========== 색상 시스템 ========== */
+:root {
+  /* 주요 브랜드 색상 (하늘색 계열) */
+  --primary-50: #f0f9ff;
+  --primary-100: #e0f2fe;
+  --primary-200: #bae6fd;
+  --primary-300: #7dd3fc;
+  --primary-400: #38bdf8;
+  --primary-500: #0ea5e9;
+  --primary-600: #0284c7;
+  --primary-700: #0369a1;
+  --primary-800: #075985;
+  --primary-900: #0c4a6e;
+
+  /* 헤더 그라디언트 */
+  --header-gradient: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 50%, #7dd3fc 100%);
+
+  /* 보조 색상 */
+  --secondary-50: #f3e5f5;
+  --secondary-100: #e1bee7;
+  --secondary-200: #ce93d8;
+  --secondary-300: #ba68c8;
+  --secondary-400: #ab47bc;
+  --secondary-500: #9c27b0;
+  --secondary-600: #8e24aa;
+  --secondary-700: #7b1fa2;
+  --secondary-800: #6a1b9a;
+  --secondary-900: #4a148c;
+
+  /* 그레이 스케일 */
+  --gray-50: #fafafa;
+  --gray-100: #f5f5f5;
+  --gray-200: #eeeeee;
+  --gray-300: #e0e0e0;
+  --gray-400: #bdbdbd;
+  --gray-500: #9e9e9e;
+  --gray-600: #757575;
+  --gray-700: #616161;
+  --gray-800: #424242;
+  --gray-900: #212121;
+
+  /* 상태 색상 */
+  --success-50: #e8f5e8;
+  --success-500: #4caf50;
+  --success-700: #388e3c;
+  
+  --warning-50: #fff8e1;
+  --warning-500: #ff9800;
+  --warning-700: #f57c00;
+  
+  --error-50: #ffebee;
+  --error-500: #f44336;
+  --error-700: #d32f2f;
+  
+  --info-50: #e1f5fe;
+  --info-500: #03a9f4;
+  --info-700: #0288d1;
+
+  /* 따뜻한 중성 색상 (베이지/크림) */
+  --warm-50: #fafaf9;   /* 매우 밝은 크림 */
+  --warm-100: #f5f5f4;  /* 밝은 크림 */
+  --warm-200: #e7e5e4;  /* 베이지 */
+  --warm-300: #d6d3d1;  /* 중간 베이지 */
+  --warm-400: #a8a29e;  /* 진한 베이지 */
+  --warm-500: #78716c;  /* 그레이 베이지 */
+
+  /* 부드러운 작업 상태 색상 (눈이 편한 톤) */
+  --status-success-bg: #dcfce7;    /* 부드러운 초록 배경 */
+  --status-success-text: #16a34a;  /* 부드러운 초록 텍스트 */
+  --status-info-bg: #e0f2fe;       /* 부드러운 하늘색 배경 */
+  --status-info-text: #0284c7;     /* 부드러운 하늘색 텍스트 */
+  --status-warning-bg: #fef3c7;    /* 부드러운 노랑 배경 */
+  --status-warning-text: #ca8a04;  /* 부드러운 노랑 텍스트 */
+  --status-error-bg: #fee2e2;      /* 부드러운 빨강 배경 */
+  --status-error-text: #dc2626;    /* 부드러운 빨강 텍스트 */
+  --status-critical-bg: #fecaca;   /* 진한 빨강 배경 */
+  --status-critical-text: #b91c1c; /* 진한 빨강 텍스트 */
+  --status-vacation-bg: #fed7aa;   /* 부드러운 주황 배경 */
+  --status-vacation-text: #ea580c; /* 부드러운 주황 텍스트 */
+
+  /* 배경 색상 */
+  --bg-primary: #ffffff;
+  --bg-secondary: #f8fafc;
+  --bg-tertiary: #f1f5f9;
+  --bg-overlay: rgba(0, 0, 0, 0.5);
+
+  /* 텍스트 색상 */
+  --text-primary: #1a202c;
+  --text-secondary: #4a5568;
+  --text-tertiary: #718096;
+  --text-inverse: #ffffff;
+
+  /* 경계선 */
+  --border-light: #e2e8f0;
+  --border-medium: #cbd5e0;
+  --border-dark: #a0aec0;
+
+  /* 그림자 */
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+
+  /* 반경 */
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+  --radius-full: 9999px;
+
+  /* 간격 */
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --space-10: 40px;
+  --space-12: 48px;
+  --space-16: 64px;
+  --space-20: 80px;
+  --space-24: 96px;
+
+  /* 폰트 크기 */
+  --text-xs: 12px;
+  --text-sm: 14px;
+  --text-base: 16px;
+  --text-lg: 18px;
+  --text-xl: 20px;
+  --text-2xl: 24px;
+  --text-3xl: 30px;
+  --text-4xl: 36px;
+  --text-5xl: 48px;
+
+  /* 폰트 두께 */
+  --font-light: 300;
+  --font-normal: 400;
+  --font-medium: 500;
+  --font-semibold: 600;
+  --font-bold: 700;
+  --font-extrabold: 800;
+
+  /* 애니메이션 */
+  --transition-fast: 150ms ease-in-out;
+  --transition-normal: 250ms ease-in-out;
+  --transition-slow: 350ms ease-in-out;
+}
+
+/* ========== 기본 리셋 ========== */
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: 'Pretendard', 'Malgun Gothic', 'Apple SD Gothic Neo', system-ui, sans-serif;
+  font-size: var(--text-base);
+  line-height: 1.6;
+  color: var(--text-primary);
+  background-color: var(--bg-secondary);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* ========== 타이포그래피 ========== */
+.text-xs { font-size: var(--text-xs); }
+.text-sm { font-size: var(--text-sm); }
+.text-base { font-size: var(--text-base); }
+.text-lg { font-size: var(--text-lg); }
+.text-xl { font-size: var(--text-xl); }
+.text-2xl { font-size: var(--text-2xl); }
+.text-3xl { font-size: var(--text-3xl); }
+.text-4xl { font-size: var(--text-4xl); }
+.text-5xl { font-size: var(--text-5xl); }
+
+.font-light { font-weight: var(--font-light); }
+.font-normal { font-weight: var(--font-normal); }
+.font-medium { font-weight: var(--font-medium); }
+.font-semibold { font-weight: var(--font-semibold); }
+.font-bold { font-weight: var(--font-bold); }
+.font-extrabold { font-weight: var(--font-extrabold); }
+
+.text-primary { color: var(--text-primary); }
+.text-secondary { color: var(--text-secondary); }
+.text-tertiary { color: var(--text-tertiary); }
+.text-inverse { color: var(--text-inverse); }
+
+/* ========== 카드 컴포넌트 ========== */
+.card {
+  background: var(--bg-primary);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+  border: 1px solid var(--border-light);
+  transition: var(--transition-normal);
+}
+
+.card:hover {
+  box-shadow: var(--shadow-md);
+  transform: translateY(-1px);
+}
+
+.card-header {
+  padding: var(--space-6);
+  border-bottom: 1px solid var(--border-light);
+}
+
+.card-body {
+  padding: var(--space-6);
+}
+
+.card-footer {
+  padding: var(--space-6);
+  border-top: 1px solid var(--border-light);
+  background: var(--bg-tertiary);
+  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
+}
+
+/* ========== 버튼 컴포넌트 ========== */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  padding: var(--space-3) var(--space-4);
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  border-radius: var(--radius-md);
+  border: none;
+  cursor: pointer;
+  transition: var(--transition-fast);
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btn-primary {
+  background: var(--primary-500);
+  color: var(--text-inverse);
+}
+
+.btn-primary:hover:not(:disabled) {
+  background: var(--primary-600);
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-md);
+}
+
+.btn-secondary {
+  background: var(--gray-100);
+  color: var(--text-primary);
+  border: 1px solid var(--border-medium);
+}
+
+.btn-secondary:hover:not(:disabled) {
+  background: var(--gray-200);
+}
+
+.btn-success {
+  background: var(--success-500);
+  color: var(--text-inverse);
+}
+
+.btn-success:hover:not(:disabled) {
+  background: var(--success-700);
+}
+
+.btn-warning {
+  background: var(--warning-500);
+  color: var(--text-inverse);
+}
+
+.btn-warning:hover:not(:disabled) {
+  background: var(--warning-700);
+}
+
+.btn-error {
+  background: var(--error-500);
+  color: var(--text-inverse);
+}
+
+.btn-error:hover:not(:disabled) {
+  background: var(--error-700);
+}
+
+.btn-sm {
+  padding: var(--space-2) var(--space-3);
+  font-size: var(--text-xs);
+}
+
+.btn-lg {
+  padding: var(--space-4) var(--space-6);
+  font-size: var(--text-lg);
+}
+
+/* ========== 배지 컴포넌트 ========== */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  padding: var(--space-1) var(--space-2);
+  font-size: var(--text-xs);
+  font-weight: var(--font-medium);
+  border-radius: var(--radius-full);
+  white-space: nowrap;
+}
+
+.badge-primary {
+  background: var(--primary-100);
+  color: var(--primary-800);
+}
+
+.badge-success {
+  background: var(--success-50);
+  color: var(--success-700);
+}
+
+.badge-warning {
+  background: var(--warning-50);
+  color: var(--warning-700);
+}
+
+.badge-error {
+  background: var(--error-50);
+  color: var(--error-700);
+}
+
+.badge-gray {
+  background: var(--gray-100);
+  color: var(--gray-700);
+}
+
+/* ========== 상태 표시기 ========== */
+.status-dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: var(--radius-full);
+  margin-right: var(--space-2);
+}
+
+.status-dot.active {
+  background: var(--success-500);
+  box-shadow: 0 0 0 2px var(--success-100);
+}
+
+.status-dot.inactive {
+  background: var(--gray-400);
+}
+
+.status-dot.warning {
+  background: var(--warning-500);
+  box-shadow: 0 0 0 2px var(--warning-100);
+}
+
+.status-dot.error {
+  background: var(--error-500);
+  box-shadow: 0 0 0 2px var(--error-100);
+}
+
+/* ========== 그리드 시스템 ========== */
+.grid {
+  display: grid;
+  gap: var(--space-6);
+}
+
+.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
+.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
+.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
+.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
+
+@media (max-width: 768px) {
+  .grid-cols-2,
+  .grid-cols-3,
+  .grid-cols-4 {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* ========== 플렉스 유틸리티 ========== */
+.flex { display: flex; }
+.flex-col { flex-direction: column; }
+.items-center { align-items: center; }
+.items-start { align-items: flex-start; }
+.items-end { align-items: flex-end; }
+.justify-center { justify-content: center; }
+.justify-between { justify-content: space-between; }
+.justify-start { justify-content: flex-start; }
+.justify-end { justify-content: flex-end; }
+.gap-1 { gap: var(--space-1); }
+.gap-2 { gap: var(--space-2); }
+.gap-3 { gap: var(--space-3); }
+.gap-4 { gap: var(--space-4); }
+.gap-6 { gap: var(--space-6); }
+
+/* ========== 간격 유틸리티 ========== */
+.p-1 { padding: var(--space-1); }
+.p-2 { padding: var(--space-2); }
+.p-3 { padding: var(--space-3); }
+.p-4 { padding: var(--space-4); }
+.p-6 { padding: var(--space-6); }
+.p-8 { padding: var(--space-8); }
+
+.m-1 { margin: var(--space-1); }
+.m-2 { margin: var(--space-2); }
+.m-3 { margin: var(--space-3); }
+.m-4 { margin: var(--space-4); }
+.m-6 { margin: var(--space-6); }
+.m-8 { margin: var(--space-8); }
+
+.mb-2 { margin-bottom: var(--space-2); }
+.mb-4 { margin-bottom: var(--space-4); }
+.mb-6 { margin-bottom: var(--space-6); }
+.mt-4 { margin-top: var(--space-4); }
+.mt-6 { margin-top: var(--space-6); }
+
+/* ========== 반응형 유틸리티 ========== */
+@media (max-width: 640px) {
+  .sm\:hidden { display: none; }
+  .sm\:text-sm { font-size: var(--text-sm); }
+  .sm\:p-4 { padding: var(--space-4); }
+}
+
+@media (max-width: 768px) {
+  .md\:hidden { display: none; }
+  .md\:flex-col { flex-direction: column; }
+}
+
+@media (max-width: 1024px) {
+  .lg\:hidden { display: none; }
+}
+
+/* ========== 애니메이션 ========== */
+.fade-in {
+  animation: fadeIn var(--transition-normal) ease-in-out;
+}
+
+.slide-up {
+  animation: slideUp var(--transition-normal) ease-out;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes slideUp {
+  from { 
+    opacity: 0; 
+    transform: translateY(20px); 
+  }
+  to { 
+    opacity: 1; 
+    transform: translateY(0); 
+  }
+}
+
+/* ========== 로딩 스피너 ========== */
+.spinner {
+  width: 20px;
+  height: 20px;
+  border: 2px solid var(--gray-200);
+  border-top: 2px solid var(--primary-500);
+  border-radius: var(--radius-full);
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
diff --git a/system2-report/web/css/project-management.css b/system2-report/web/css/project-management.css
new file mode 100644
index 0000000..a0ee6a5
--- /dev/null
+++ b/system2-report/web/css/project-management.css
@@ -0,0 +1,1570 @@
+/* 프로젝트 관리 페이지 스타일 */
+
+/* 기본 레이아웃 */
+body {
+  margin: 0;
+  padding: 0;
+  font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  min-height: 100vh;
+}
+
+/* 헤더 스타일은 navbar 컴포넌트가 관리 */
+/* 필요한 경우 navbar.html에서 수정하세요 */
+
+.logo {
+  height: 40px;
+  width: auto;
+}
+
+.company-info {
+  display: flex;
+  flex-direction: column;
+}
+
+.company-name {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: #1f2937;
+  margin: 0;
+  line-height: 1.2;
+}
+
+.company-subtitle {
+  font-size: 0.875rem;
+  color: #6b7280;
+  font-weight: 500;
+}
+
+.header-center {
+  display: flex;
+  align-items: center;
+}
+
+.current-time {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0.5rem 1rem;
+  background: rgba(59, 130, 246, 0.1);
+  border-radius: 0.5rem;
+  border: 1px solid rgba(59, 130, 246, 0.2);
+}
+
+.time-label {
+  font-size: 0.75rem;
+  color: #6b7280;
+  margin-bottom: 0.125rem;
+}
+
+.time-value {
+  font-size: 1rem;
+  font-weight: 600;
+  color: #1f2937;
+  font-family: 'Courier New', monospace;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.back-btn, .dashboard-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  background: rgba(255, 255, 255, 0.15);
+  color: #374151;
+  text-decoration: none;
+  border-radius: 1.25rem;
+  font-size: 0.85rem;
+  font-weight: 500;
+  transition: all 0.3s ease;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  backdrop-filter: blur(10px);
+}
+
+.back-btn:hover, .dashboard-btn:hover {
+  background: rgba(255, 255, 255, 0.25);
+  transform: translateY(-1px);
+  text-decoration: none;
+  color: #1f2937;
+}
+
+.user-profile {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.5rem 1rem;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 2rem;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  position: relative;
+}
+
+.user-profile:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.user-avatar {
+  width: 2.5rem;
+  height: 2.5rem;
+  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-weight: 600;
+  font-size: 1rem;
+}
+
+.user-info {
+  display: flex;
+  flex-direction: column;
+}
+
+.user-name {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #1f2937;
+  line-height: 1.2;
+}
+
+.user-role {
+  font-size: 0.75rem;
+  color: #6b7280;
+}
+
+/* 메인 콘텐츠 */
+.dashboard-main {
+  flex: 1;
+  padding: 2rem;
+  min-height: calc(100vh - 80px);
+  max-width: 1600px;
+  margin: 0 auto;
+  width: 100%;
+}
+
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  margin-bottom: 2rem;
+}
+
+.page-title-section {
+  flex: 1;
+}
+
+.page-title {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  font-size: 2.5rem;
+  font-weight: 700;
+  color: white;
+  margin: 0 0 0.5rem 0;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.title-icon {
+  font-size: 2.5rem;
+}
+
+.page-description {
+  font-size: 1.125rem;
+  color: rgba(255, 255, 255, 0.9);
+  margin: 0;
+  font-weight: 400;
+}
+
+.page-actions {
+  display: flex;
+  gap: 1rem;
+}
+
+.btn {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1.5rem;
+  border: none;
+  border-radius: 0.75rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  text-decoration: none;
+}
+
+.btn-primary {
+  background: #3b82f6;
+  color: white;
+  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
+}
+
+.btn-primary:hover {
+  background: #2563eb;
+  transform: translateY(-2px);
+  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
+}
+
+.btn-secondary {
+  background: rgba(255, 255, 255, 0.9);
+  color: #374151;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+.btn-secondary:hover {
+  background: white;
+  transform: translateY(-2px);
+}
+
+.btn-danger {
+  background: #ef4444;
+  color: white;
+}
+
+.btn-danger:hover {
+  background: #dc2626;
+  transform: translateY(-2px);
+}
+
+/* 검색 및 필터 섹션 */
+.search-section {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(20px);
+  border-radius: 1rem;
+  padding: 1.5rem;
+  margin-bottom: 2rem;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+}
+
+.search-bar {
+  display: flex;
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
+
+.search-input {
+  flex: 1;
+  padding: 0.75rem 1rem;
+  border: 1px solid #d1d5db;
+  border-radius: 0.5rem;
+  font-size: 0.875rem;
+  transition: all 0.3s ease;
+}
+
+.search-input:focus {
+  outline: none;
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.search-btn {
+  padding: 0.75rem 1rem;
+  background: #3b82f6;
+  color: white;
+  border: none;
+  border-radius: 0.5rem;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.search-btn:hover {
+  background: #2563eb;
+}
+
+.filter-options {
+  display: flex;
+  gap: 1rem;
+}
+
+.filter-select {
+  padding: 0.5rem 1rem;
+  border: 1px solid #d1d5db;
+  border-radius: 0.5rem;
+  font-size: 0.875rem;
+  background: white;
+  cursor: pointer;
+}
+
+/* 프로젝트 섹션 */
+.projects-section {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(20px);
+  border-radius: 1rem;
+  padding: 1.5rem;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+}
+
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1.5rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.section-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #1f2937;
+  margin: 0;
+}
+
+.project-stats {
+  display: flex;
+  gap: 1.5rem;
+  font-size: 0.875rem;
+  align-items: center;
+}
+
+.stat-item {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.5rem;
+  font-weight: 500;
+  transition: all 0.3s ease;
+  cursor: pointer;
+  position: relative;
+}
+
+.stat-item:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.stat-item.active {
+  transform: scale(1.05);
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
+  z-index: 10;
+}
+
+.stat-item .stat-icon {
+  font-size: 1rem;
+}
+
+.stat-item span:not(.stat-icon) {
+  font-weight: 600;
+}
+
+/* 활성 프로젝트 통계 */
+.active-stat {
+  background: rgba(16, 185, 129, 0.1);
+  color: #065f46;
+  border: 1px solid rgba(16, 185, 129, 0.2);
+}
+
+.active-stat span:not(.stat-icon) {
+  color: #10b981;
+}
+
+.active-stat.active {
+  background: rgba(16, 185, 129, 0.2);
+  border: 2px solid #10b981;
+}
+
+.active-stat:hover {
+  background: rgba(16, 185, 129, 0.15);
+}
+
+/* 비활성 프로젝트 통계 */
+.inactive-stat {
+  background: rgba(239, 68, 68, 0.1);
+  color: #7f1d1d;
+  border: 1px solid rgba(239, 68, 68, 0.2);
+}
+
+.inactive-stat span:not(.stat-icon) {
+  color: #ef4444;
+}
+
+.inactive-stat.active {
+  background: rgba(239, 68, 68, 0.2);
+  border: 2px solid #ef4444;
+}
+
+.inactive-stat:hover {
+  background: rgba(239, 68, 68, 0.15);
+}
+
+/* 전체 프로젝트 통계 */
+.total-stat {
+  background: rgba(59, 130, 246, 0.1);
+  color: #1e3a8a;
+  border: 1px solid rgba(59, 130, 246, 0.2);
+}
+
+.total-stat span:not(.stat-icon) {
+  color: #3b82f6;
+}
+
+.total-stat.active {
+  background: rgba(59, 130, 246, 0.2);
+  border: 2px solid #3b82f6;
+}
+
+.total-stat:hover {
+  background: rgba(59, 130, 246, 0.15);
+}
+
+/* 프로젝트 그리드 */
+.projects-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+  gap: 1.5rem;
+  justify-content: center;
+}
+
+/* 작업자 카드 전용 스타일 */
+.worker-card .project-info {
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+}
+
+.worker-avatar {
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
+}
+
+.avatar-initial {
+  color: white;
+  font-size: 1.5rem;
+  font-weight: 700;
+}
+
+.worker-card .project-name {
+  margin-top: 0.25rem;
+}
+
+.worker-card .project-meta {
+  margin-top: 0.5rem;
+}
+
+.worker-card.inactive .worker-avatar {
+  background: linear-gradient(135deg, #9ca3af, #6b7280);
+  box-shadow: 0 4px 12px rgba(156, 163, 175, 0.3);
+}
+
+/* 작업 유형 트리 뷰 스타일 */
+.task-tree-container {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(20px);
+  border-radius: 1rem;
+  padding: 1.5rem;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+}
+
+.tree-header {
+  display: flex;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.btn-outline {
+  background: transparent;
+  border: 1px solid #d1d5db;
+  color: #374151;
+  padding: 0.5rem 1rem;
+  border-radius: 0.5rem;
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.btn-outline:hover {
+  background: #f3f4f6;
+  border-color: #9ca3af;
+}
+
+.task-tree {
+  max-height: 600px;
+  overflow-y: auto;
+}
+
+/* 카테고리 (대분류) 스타일 */
+.tree-category {
+  margin-bottom: 1rem;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.75rem;
+  overflow: hidden;
+}
+
+.category-header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 1rem 1.25rem;
+  background: linear-gradient(135deg, #f8fafc, #e2e8f0);
+  cursor: pointer;
+  transition: all 0.3s ease;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.category-header:hover {
+  background: linear-gradient(135deg, #f1f5f9, #cbd5e1);
+}
+
+.category-toggle {
+  font-size: 0.875rem;
+  color: #6b7280;
+  transition: transform 0.3s ease;
+}
+
+.category-icon {
+  font-size: 1.25rem;
+}
+
+.category-name {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: #1f2937;
+  flex: 1;
+}
+
+.category-count {
+  font-size: 0.875rem;
+  color: #6b7280;
+  background: rgba(107, 114, 128, 0.1);
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.375rem;
+}
+
+.category-actions {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.category-content {
+  background: #ffffff;
+}
+
+/* 서브카테고리 (중분류) 스타일 */
+.tree-subcategory {
+  border-bottom: 1px solid #f3f4f6;
+}
+
+.tree-subcategory:last-child {
+  border-bottom: none;
+}
+
+.subcategory-header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.875rem 1.25rem;
+  background: #f8fafc;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.subcategory-header:hover {
+  background: #f1f5f9;
+}
+
+.subcategory-toggle {
+  font-size: 0.75rem;
+  color: #6b7280;
+  margin-left: 1rem;
+}
+
+.subcategory-icon {
+  font-size: 1rem;
+}
+
+.subcategory-name {
+  font-size: 1rem;
+  font-weight: 500;
+  color: #374151;
+  flex: 1;
+}
+
+.subcategory-count {
+  font-size: 0.75rem;
+  color: #6b7280;
+  background: rgba(107, 114, 128, 0.1);
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.25rem;
+}
+
+.subcategory-actions {
+  display: flex;
+  gap: 0.25rem;
+}
+
+.subcategory-content {
+  background: #ffffff;
+}
+
+/* 작업 (상세) 스타일 */
+.tree-task {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1.25rem 0.75rem 2.5rem;
+  border-bottom: 1px solid #f9fafb;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.tree-task:hover {
+  background: #f9fafb;
+}
+
+.tree-task:last-child {
+  border-bottom: none;
+}
+
+.task-info {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  flex: 1;
+}
+
+.task-icon {
+  font-size: 0.875rem;
+  color: #6b7280;
+}
+
+.task-name {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #1f2937;
+}
+
+.task-description {
+  font-size: 0.75rem;
+  color: #6b7280;
+  margin-left: 0.5rem;
+  font-style: italic;
+}
+
+.task-actions {
+  display: flex;
+  gap: 0.25rem;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.tree-task:hover .task-actions {
+  opacity: 1;
+}
+
+/* 작은 버튼 스타일 */
+.btn-small {
+  padding: 0.25rem 0.5rem;
+  border: none;
+  border-radius: 0.25rem;
+  font-size: 0.75rem;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.btn-small.btn-primary {
+  background: #3b82f6;
+  color: white;
+}
+
+.btn-small.btn-primary:hover {
+  background: #2563eb;
+}
+
+.btn-small.btn-secondary {
+  background: #6b7280;
+  color: white;
+}
+
+.btn-small.btn-secondary:hover {
+  background: #4b5563;
+}
+
+.btn-small.btn-edit {
+  background: #f59e0b;
+  color: white;
+}
+
+.btn-small.btn-edit:hover {
+  background: #d97706;
+}
+
+.btn-small.btn-delete {
+  background: #ef4444;
+  color: white;
+}
+
+.btn-small.btn-delete:hover {
+  background: #dc2626;
+}
+
+/* 코드 관리 전용 스타일 */
+.code-tabs {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 2rem;
+  border-bottom: 3px solid #d1d5db;
+  padding-bottom: 0;
+  background: rgba(255, 255, 255, 0.9);
+  border-radius: 1rem 1rem 0 0;
+  padding: 0.5rem 0.5rem 0 0.5rem;
+}
+
+.tab-btn {
+  background: rgba(255, 255, 255, 0.7);
+  border: 2px solid #e5e7eb;
+  padding: 1rem 1.5rem;
+  border-radius: 0.75rem;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: #4b5563;
+  border-bottom: 3px solid transparent;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.tab-btn:hover {
+  background: rgba(59, 130, 246, 0.1);
+  color: #1e40af;
+  border-color: #3b82f6;
+  transform: translateY(-1px);
+}
+
+.tab-btn.active {
+  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
+  color: #ffffff;
+  border-color: #1d4ed8;
+  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
+  transform: translateY(-2px);
+}
+
+.tab-icon {
+  font-size: 1rem;
+}
+
+.code-tab-content {
+  display: none;
+}
+
+.code-tab-content.active {
+  display: block;
+}
+
+.code-section {
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.95));
+  backdrop-filter: blur(20px);
+  border-radius: 1rem;
+  padding: 2rem;
+  border: 2px solid rgba(59, 130, 246, 0.2);
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
+}
+
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1.5rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.section-title {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #1f2937;
+  margin: 0;
+}
+
+.section-icon {
+  font-size: 1.5rem;
+}
+
+.section-actions {
+  display: flex;
+  gap: 0.75rem;
+}
+
+.code-stats {
+  display: flex;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+  flex-wrap: wrap;
+}
+
+.code-stats .stat-item {
+  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.05));
+  border: 2px solid rgba(59, 130, 246, 0.3);
+  color: #1e40af;
+  padding: 0.75rem 1.25rem;
+  border-radius: 0.75rem;
+  font-size: 0.9rem;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
+}
+
+.code-stats .critical-stat {
+  background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(239, 68, 68, 0.1));
+  border-color: rgba(239, 68, 68, 0.4);
+  color: #dc2626;
+  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
+}
+
+.code-stats .high-stat {
+  background: linear-gradient(135deg, rgba(249, 115, 22, 0.2), rgba(249, 115, 22, 0.1));
+  border-color: rgba(249, 115, 22, 0.4);
+  color: #ea580c;
+  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
+}
+
+.code-stats .medium-stat {
+  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(245, 158, 11, 0.1));
+  border-color: rgba(245, 158, 11, 0.4);
+  color: #d97706;
+  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
+}
+
+.code-stats .low-stat {
+  background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(16, 185, 129, 0.1));
+  border-color: rgba(16, 185, 129, 0.4);
+  color: #059669;
+  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
+}
+
+.code-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 1.5rem;
+}
+
+.code-card {
+  background: linear-gradient(135deg, #ffffff, #f8fafc);
+  border: 2px solid #e5e7eb;
+  border-radius: 1rem;
+  padding: 1.5rem;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  position: relative;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.code-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2);
+  border-color: #3b82f6;
+  background: linear-gradient(135deg, #ffffff, #f0f9ff);
+}
+
+.code-card.normal-status {
+  border-left: 6px solid #10b981;
+  background: linear-gradient(135deg, #ffffff, #f0fdf4);
+}
+
+.code-card.normal-status:hover {
+  background: linear-gradient(135deg, #f0fdf4, #dcfce7);
+  box-shadow: 0 12px 35px rgba(16, 185, 129, 0.3);
+}
+
+.code-card.error-status {
+  border-left: 6px solid #ef4444;
+  background: linear-gradient(135deg, #ffffff, #fef2f2);
+}
+
+.code-card.error-status:hover {
+  background: linear-gradient(135deg, #fef2f2, #fee2e2);
+  box-shadow: 0 12px 35px rgba(239, 68, 68, 0.3);
+}
+
+.code-card.error-type-card.severity-low {
+  border-left: 6px solid #10b981;
+  background: linear-gradient(135deg, #ffffff, #f0fdf4);
+}
+
+.code-card.error-type-card.severity-low:hover {
+  background: linear-gradient(135deg, #f0fdf4, #dcfce7);
+  box-shadow: 0 12px 35px rgba(16, 185, 129, 0.3);
+}
+
+.code-card.error-type-card.severity-medium {
+  border-left: 6px solid #f59e0b;
+  background: linear-gradient(135deg, #ffffff, #fffbeb);
+}
+
+.code-card.error-type-card.severity-medium:hover {
+  background: linear-gradient(135deg, #fffbeb, #fef3c7);
+  box-shadow: 0 12px 35px rgba(245, 158, 11, 0.3);
+}
+
+.code-card.error-type-card.severity-high {
+  border-left: 6px solid #f97316;
+  background: linear-gradient(135deg, #ffffff, #fff7ed);
+}
+
+.code-card.error-type-card.severity-high:hover {
+  background: linear-gradient(135deg, #fff7ed, #fed7aa);
+  box-shadow: 0 12px 35px rgba(249, 115, 22, 0.3);
+}
+
+.code-card.error-type-card.severity-critical {
+  border-left: 6px solid #ef4444;
+  background: linear-gradient(135deg, #ffffff, #fef2f2);
+}
+
+.code-card.error-type-card.severity-critical:hover {
+  background: linear-gradient(135deg, #fef2f2, #fee2e2);
+  box-shadow: 0 12px 35px rgba(239, 68, 68, 0.3);
+}
+
+.code-card.work-type-card {
+  border-left: 6px solid #6366f1;
+  background: linear-gradient(135deg, #ffffff, #faf5ff);
+}
+
+.code-card.work-type-card:hover {
+  background: linear-gradient(135deg, #faf5ff, #f3e8ff);
+  box-shadow: 0 12px 35px rgba(99, 102, 241, 0.3);
+}
+
+.code-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  margin-bottom: 1rem;
+}
+
+.code-icon {
+  font-size: 1.5rem;
+  margin-right: 0.75rem;
+}
+
+.code-info {
+  flex: 1;
+}
+
+.code-name {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: #111827;
+  margin: 0 0 0.5rem 0;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.code-label {
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: #374151;
+  background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
+  padding: 0.25rem 0.75rem;
+  border-radius: 0.5rem;
+  border: 1px solid #d1d5db;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.code-description {
+  color: #6b7280;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  margin: 0 0 1rem 0;
+}
+
+.solution-guide {
+  background: #f0f9ff;
+  border: 1px solid #bae6fd;
+  border-radius: 0.5rem;
+  padding: 0.75rem;
+  margin: 1rem 0;
+  font-size: 0.875rem;
+  color: #0c4a6e;
+}
+
+.code-meta {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 0.75rem;
+  color: #9ca3af;
+  margin-top: 1rem;
+  padding-top: 0.75rem;
+  border-top: 1px solid #f3f4f6;
+}
+
+.code-date {
+  font-size: 0.75rem;
+  color: #9ca3af;
+}
+
+.code-actions {
+  display: flex;
+  gap: 0.25rem;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.code-card:hover .code-actions {
+  opacity: 1;
+}
+
+.form-checkbox {
+  margin-right: 0.5rem;
+}
+
+.form-help {
+  display: block;
+  margin-top: 0.25rem;
+  font-size: 0.75rem;
+  color: #6b7280;
+}
+
+/* 프로필 드롭다운 스타일 개선 */
+.profile-dropdown {
+  position: relative;
+}
+
+.profile-dropdown .dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  color: #374151;
+  text-decoration: none;
+  transition: all 0.3s ease;
+  border: none;
+  background: transparent;
+  width: 100%;
+  text-align: left;
+  font-size: 0.875rem;
+  cursor: pointer;
+  font-family: inherit;
+  border-radius: 0.5rem;
+  margin: 0.25rem;
+}
+
+.profile-dropdown .dropdown-item:hover {
+  background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
+  color: #1f2937;
+  transform: translateX(2px);
+}
+
+.profile-dropdown .dropdown-item.logout-btn {
+  color: #dc2626;
+  border-top: 1px solid #e5e7eb;
+  margin-top: 0.5rem;
+  padding-top: 0.75rem;
+}
+
+.profile-dropdown .dropdown-item.logout-btn:hover {
+  background: linear-gradient(135deg, #fef2f2, #fee2e2);
+  color: #b91c1c;
+}
+
+.profile-dropdown .dropdown-icon {
+  font-size: 1.1rem;
+  width: 1.5rem;
+  text-align: center;
+  opacity: 0.8;
+}
+
+.profile-dropdown .dropdown-item:hover .dropdown-icon {
+  opacity: 1;
+}
+
+/* 헤더 사용자 프로필 스타일 개선 */
+.user-profile {
+  position: relative;
+  cursor: pointer;
+}
+
+.user-profile .profile-dropdown {
+  position: absolute;
+  top: calc(100% + 0.5rem);
+  right: 0;
+  background: linear-gradient(135deg, #ffffff, #f8fafc);
+  border: 2px solid rgba(59, 130, 246, 0.2);
+  border-radius: 1rem;
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
+  min-width: 200px;
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(-10px);
+  transition: all 0.3s ease;
+  overflow: hidden;
+  z-index: 1000;
+  backdrop-filter: blur(20px);
+}
+
+.user-profile .profile-dropdown[style*="block"] {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+
+/* 반응형 디자인 */
+@media (max-width: 768px) {
+  .code-tabs {
+    flex-direction: column;
+    gap: 0;
+  }
+  
+  .tab-btn {
+    border-radius: 0;
+    border-bottom: 1px solid #e5e7eb;
+  }
+  
+  .tab-btn.active {
+    border-bottom-color: #3b82f6;
+  }
+  
+  .section-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1rem;
+  }
+  
+  .code-stats {
+    justify-content: center;
+  }
+  
+  .code-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .user-profile .profile-dropdown {
+    right: -1rem;
+    min-width: 180px;
+  }
+}
+
+.project-card {
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-radius: 0.75rem;
+  padding: 1.5rem;
+  transition: all 0.3s ease;
+  cursor: pointer;
+}
+
+.project-card:hover {
+  background: #f1f5f9;
+  border-color: #cbd5e1;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.project-card.inactive {
+  opacity: 0.8;
+  background: #f8f9fa;
+  border-color: #e9ecef;
+  border-left: 4px solid #ef4444;
+  position: relative;
+}
+
+.project-card.inactive:hover {
+  background: #f1f3f4;
+  border-color: #dee2e6;
+}
+
+/* 비활성화 오버레이 */
+.inactive-overlay {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 10;
+}
+
+.inactive-badge {
+  background: linear-gradient(135deg, #ef4444, #dc2626);
+  color: white;
+  padding: 0.25rem 0.75rem;
+  border-radius: 0 0.75rem 0 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
+}
+
+/* 비활성 라벨 */
+.inactive-label {
+  color: #ef4444;
+  font-size: 0.8rem;
+  font-weight: 600;
+  margin-left: 0.5rem;
+  background: rgba(239, 68, 68, 0.1);
+  padding: 0.125rem 0.5rem;
+  border-radius: 0.25rem;
+}
+
+/* 비활성 안내 */
+.inactive-notice {
+  color: #f59e0b;
+  font-size: 0.75rem;
+  font-weight: 500;
+  background: rgba(245, 158, 11, 0.1);
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  border: 1px solid rgba(245, 158, 11, 0.2);
+  display: inline-block;
+  margin-top: 0.25rem;
+}
+
+.project-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 1rem;
+}
+
+.project-info {
+  flex: 1;
+}
+
+.project-job-no {
+  font-size: 0.75rem;
+  color: #6b7280;
+  font-weight: 500;
+  margin-bottom: 0.25rem;
+}
+
+.project-name {
+  font-size: 1rem;
+  font-weight: 600;
+  color: #1f2937;
+  margin: 0 0 0.5rem 0;
+  line-height: 1.4;
+}
+
+.project-meta {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  font-size: 0.75rem;
+  color: #6b7280;
+}
+
+.project-actions {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.btn-edit, .btn-delete {
+  padding: 0.375rem 0.75rem;
+  border: none;
+  border-radius: 0.375rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.btn-edit {
+  background: #3b82f6;
+  color: white;
+}
+
+.btn-edit:hover {
+  background: #2563eb;
+}
+
+.btn-delete {
+  background: #ef4444;
+  color: white;
+}
+
+.btn-delete:hover {
+  background: #dc2626;
+}
+
+/* Empty State */
+.empty-state {
+  text-align: center;
+  padding: 3rem 2rem;
+  color: #6b7280;
+}
+
+.empty-state .empty-icon {
+  font-size: 4rem;
+  margin-bottom: 1rem;
+  opacity: 0.5;
+}
+
+.empty-state h3 {
+  margin: 0 0 0.5rem 0;
+  color: #374151;
+  font-size: 1.25rem;
+}
+
+.empty-state p {
+  margin: 0 0 1.5rem 0;
+  font-size: 0.875rem;
+}
+
+/* 모달 스타일 */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: 1rem;
+}
+
+.modal-container {
+  background: white;
+  border-radius: 1rem;
+  max-width: 600px;
+  width: 100%;
+  max-height: 90vh;
+  overflow-y: auto;
+  box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1);
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1.5rem;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.modal-header h2 {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #1f2937;
+}
+
+.modal-close-btn {
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  color: #6b7280;
+  cursor: pointer;
+  padding: 0.25rem;
+  border-radius: 0.25rem;
+  transition: all 0.3s ease;
+}
+
+.modal-close-btn:hover {
+  background: #f3f4f6;
+  color: #374151;
+}
+
+.modal-body {
+  padding: 1.5rem;
+}
+
+.modal-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1.5rem;
+  border-top: 1px solid #e5e7eb;
+  gap: 1rem;
+}
+
+/* 폼 스타일 */
+.form-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.form-label {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #374151;
+}
+
+.form-control {
+  padding: 0.75rem;
+  border: 1px solid #d1d5db;
+  border-radius: 0.5rem;
+  font-size: 0.875rem;
+  transition: all 0.3s ease;
+}
+
+.form-control:focus {
+  outline: none;
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+/* 반응형 디자인 */
+@media (max-width: 1024px) {
+  .dashboard-header {
+    padding: 1rem;
+  }
+  
+  .dashboard-main {
+    padding: 1.5rem;
+  }
+  
+  .page-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1rem;
+  }
+  
+  .projects-grid {
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  }
+}
+
+@media (max-width: 768px) {
+  .header-center {
+    display: none;
+  }
+  
+  .company-info {
+    display: none;
+  }
+  
+  .page-title {
+    font-size: 2rem;
+  }
+  
+  .page-actions {
+    flex-direction: column;
+  }
+  
+  .search-bar {
+    flex-direction: column;
+  }
+  
+  .filter-options {
+    flex-direction: column;
+  }
+  
+  .projects-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .form-row {
+    grid-template-columns: 1fr;
+  }
+  
+  .project-stats {
+    flex-direction: column;
+    gap: 0.75rem;
+    align-items: stretch;
+  }
+  
+  .stat-item {
+    justify-content: center;
+  }
+}
+
+@media (max-width: 480px) {
+  .dashboard-header {
+    padding: 0.75rem;
+  }
+  
+  .dashboard-main {
+    padding: 1rem;
+  }
+  
+  .page-title {
+    font-size: 1.75rem;
+  }
+  
+  .search-section,
+  .projects-section {
+    padding: 1rem;
+  }
+  
+  .modal-container {
+    margin: 0.5rem;
+    max-height: 95vh;
+  }
+}
+
+/* 작업자 상태 토글 버튼 스타일 */
+.btn-toggle {
+  background: none;
+  border: 2px solid;
+  border-radius: 50%;
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-size: 1rem;
+  transition: all 0.2s ease;
+  margin-right: 0.25rem;
+}
+
+.btn-deactivate {
+  border-color: #ef4444;
+  color: #ef4444;
+  background: rgba(239, 68, 68, 0.1);
+}
+
+.btn-deactivate:hover {
+  background: #ef4444;
+  color: white;
+  transform: scale(1.05);
+}
+
+.btn-activate {
+  border-color: #10b981;
+  color: #10b981;
+  background: rgba(16, 185, 129, 0.1);
+}
+
+.btn-activate:hover {
+  background: #10b981;
+  color: white;
+  transform: scale(1.05);
+}
diff --git a/system2-report/web/img/favicon.png b/system2-report/web/img/favicon.png
new file mode 100644
index 0000000..5bbd962
Binary files /dev/null and b/system2-report/web/img/favicon.png differ
diff --git a/system2-report/web/js/issue-detail.js b/system2-report/web/js/issue-detail.js
index 611fce2..4692a94 100644
--- a/system2-report/web/js/issue-detail.js
+++ b/system2-report/web/js/issue-detail.js
@@ -2,7 +2,7 @@
  * 신고 상세 페이지 JavaScript
  */
 
-const API_BASE = window.API_BASE_URL || 'http://localhost:20005/api';
+const API_BASE = window.API_BASE_URL || 'http://localhost:30005/api';
 
 let reportId = null;
 let reportData = null;
diff --git a/system2-report/web/js/issue-report.js b/system2-report/web/js/issue-report.js
index 31820be..383edc1 100644
--- a/system2-report/web/js/issue-report.js
+++ b/system2-report/web/js/issue-report.js
@@ -4,7 +4,7 @@
  */
 
 // API 설정
-const API_BASE = window.API_BASE_URL || 'http://localhost:20005/api';
+const API_BASE = window.API_BASE_URL || 'http://localhost:30005/api';
 
 // 상태 변수
 let selectedFactoryId = null;
@@ -175,7 +175,7 @@ async function loadMapImage() {
     if (data.success && data.data) {
       const selectedCategory = data.data.find(c => c.category_id == selectedFactoryId);
       if (selectedCategory && selectedCategory.layout_image) {
-        const baseUrl = (window.API_BASE_URL || 'http://localhost:20005').replace('/api', '');
+        const baseUrl = (window.API_BASE_URL || 'http://localhost:30005').replace('/api', '');
         const fullImageUrl = selectedCategory.layout_image.startsWith('http')
           ? selectedCategory.layout_image
           : `${baseUrl}${selectedCategory.layout_image}`;
diff --git a/system2-report/web/js/safety-report-list.js b/system2-report/web/js/safety-report-list.js
index f1c1a27..2093707 100644
--- a/system2-report/web/js/safety-report-list.js
+++ b/system2-report/web/js/safety-report-list.js
@@ -3,7 +3,7 @@
  * category_type=safety 고정 필터
  */
 
-const API_BASE = window.API_BASE_URL || 'http://localhost:20005/api';
+const API_BASE = window.API_BASE_URL || 'http://localhost:30005/api';
 const CATEGORY_TYPE = 'safety';
 
 // 상태 한글 변환
@@ -110,7 +110,7 @@ function renderIssues(issues) {
     return;
   }
 
-  const baseUrl = (window.API_BASE_URL || 'http://localhost:20005').replace('/api', '');
+  const baseUrl = (window.API_BASE_URL || 'http://localhost:30005').replace('/api', '');
 
   issueList.innerHTML = issues.map(issue => {
     const reportDate = new Date(issue.report_date).toLocaleString('ko-KR', {
diff --git a/system2-report/web/js/work-issue-report.js b/system2-report/web/js/work-issue-report.js
index 2349d46..3f3d8f7 100644
--- a/system2-report/web/js/work-issue-report.js
+++ b/system2-report/web/js/work-issue-report.js
@@ -3,16 +3,17 @@
  */
 
 // API 설정
-const API_BASE = window.API_BASE_URL || 'http://localhost:20005/api';
+const API_BASE = window.API_BASE_URL || 'http://localhost:30005/api';
 
 // 상태 변수
 let selectedFactoryId = null;
 let selectedWorkplaceId = null;
 let selectedWorkplaceName = null;
-let selectedType = null; // 'nonconformity' | 'safety'
+let selectedType = null; // 'nonconformity' | 'safety' | 'facility'
 let selectedCategoryId = null;
 let selectedCategoryName = null;
 let selectedItemId = null;
+let customItemName = null;
 let selectedTbmSessionId = null;
 let selectedVisitRequestId = null;
 let photos = [null, null, null, null, null];
@@ -166,10 +167,9 @@ async function loadMapImage() {
     if (data.success && data.data) {
       const selectedCategory = data.data.find(c => c.category_id == selectedFactoryId);
       if (selectedCategory && selectedCategory.layout_image) {
-        const baseUrl = (window.API_BASE_URL || 'http://localhost:20005').replace('/api', '');
         const fullImageUrl = selectedCategory.layout_image.startsWith('http')
           ? selectedCategory.layout_image
-          : `${baseUrl}${selectedCategory.layout_image}`;
+          : selectedCategory.layout_image;
 
         canvasImage = new Image();
         canvasImage.onload = () => renderMap();
@@ -251,7 +251,7 @@ function renderMap() {
   ctx.fillRect(0, 0, canvas.width, canvas.height);
 
   // 배치도 이미지
-  if (canvasImage && canvasImage.complete) {
+  if (canvasImage && canvasImage.complete && canvasImage.naturalWidth > 0) {
     const scale = Math.min(canvas.width / canvasImage.width, canvas.height / canvasImage.height);
     const x = (canvas.width - canvasImage.width * scale) / 2;
     const y = (canvas.height - canvasImage.height * scale) / 2;
@@ -587,6 +587,14 @@ function renderItems(items) {
     btn.onclick = () => onItemSelect(item, btn);
     grid.appendChild(btn);
   });
+
+  // 직접 입력 버튼 추가
+  const customBtn = document.createElement('button');
+  customBtn.type = 'button';
+  customBtn.className = 'item-btn custom-input-btn';
+  customBtn.textContent = '+ 직접 입력';
+  customBtn.onclick = () => showCustomItemInput(customBtn);
+  grid.appendChild(customBtn);
 }
 
 /**
@@ -598,6 +606,21 @@ function onItemSelect(item, btn) {
   btn.classList.add('selected');
 
   selectedItemId = item.item_id;
+  customItemName = null;
+
+  // 직접 입력 영역 숨기기
+  const customInput = document.getElementById('customItemInput');
+  if (customInput) {
+    customInput.style.display = 'none';
+    document.getElementById('customItemName').value = '';
+  }
+
+  // 직접 입력 버튼 텍스트 초기화
+  const customBtn = document.querySelector('.item-btn.custom-input-btn');
+  if (customBtn) {
+    customBtn.textContent = '+ 직접 입력';
+  }
+
   updateStepStatus();
 }
 
@@ -667,9 +690,9 @@ function updateStepStatus() {
   steps[2].classList.toggle('active', step2Complete);
 
   // Step 3: 항목
-  const step3Complete = selectedItemId;
-  steps[2].classList.toggle('completed', step3Complete);
-  steps[3].classList.toggle('active', step3Complete);
+  const step3Complete = selectedItemId || (selectedItemId === 'custom' && customItemName);
+  steps[2].classList.toggle('completed', !!step3Complete);
+  steps[3].classList.toggle('active', !!step3Complete);
 
   // 제출 버튼 활성화
   const submitBtn = document.getElementById('submitBtn');
@@ -697,7 +720,8 @@ async function submitReport() {
       tbm_session_id: selectedTbmSessionId,
       visit_request_id: selectedVisitRequestId,
       issue_category_id: selectedCategoryId,
-      issue_item_id: selectedItemId,
+      issue_item_id: selectedItemId === 'custom' ? null : selectedItemId,
+      custom_item_name: customItemName || null,
       additional_description: additionalDescription || null,
       photos: photos.filter(p => p !== null)
     };
@@ -728,6 +752,77 @@ async function submitReport() {
   }
 }
 
+/**
+ * 직접 입력 버튼 클릭
+ */
+function showCustomItemInput(btn) {
+  // 기존 항목 선택 해제
+  document.querySelectorAll('.item-btn').forEach(b => b.classList.remove('selected'));
+  btn.classList.add('selected');
+  selectedItemId = null;
+  customItemName = null;
+
+  const customInput = document.getElementById('customItemInput');
+  if (customInput) {
+    customInput.style.display = 'flex';
+    document.getElementById('customItemName').focus();
+  }
+  updateStepStatus();
+}
+
+/**
+ * 직접 입력 확인
+ */
+function confirmCustomItem() {
+  const input = document.getElementById('customItemName');
+  const name = input.value.trim();
+  if (!name) {
+    input.focus();
+    return;
+  }
+
+  customItemName = name;
+  selectedItemId = 'custom';
+  updateStepStatus();
+
+  // 직접 입력 UI 숨기되 값은 유지
+  const customInput = document.getElementById('customItemInput');
+  if (customInput) {
+    customInput.style.display = 'none';
+  }
+
+  // 직접 입력 버튼 텍스트 업데이트
+  const customBtn = document.querySelector('.item-btn.custom-input-btn');
+  if (customBtn) {
+    customBtn.textContent = `✓ ${name}`;
+    customBtn.classList.add('selected');
+  }
+}
+
+/**
+ * 직접 입력 취소
+ */
+function cancelCustomItem() {
+  const customInput = document.getElementById('customItemInput');
+  if (customInput) {
+    customInput.style.display = 'none';
+    document.getElementById('customItemName').value = '';
+  }
+
+  customItemName = null;
+  if (selectedItemId === 'custom') {
+    selectedItemId = null;
+  }
+
+  // 직접 입력 버튼 상태 초기화
+  const customBtn = document.querySelector('.item-btn.custom-input-btn');
+  if (customBtn) {
+    customBtn.textContent = '+ 직접 입력';
+    customBtn.classList.remove('selected');
+  }
+  updateStepStatus();
+}
+
 // 기타 위치 입력 시 위치 정보 업데이트
 document.addEventListener('DOMContentLoaded', () => {
   const customLocationInput = document.getElementById('customLocation');
diff --git a/system2-report/web/nginx.conf b/system2-report/web/nginx.conf
index 6866849..bdd14a9 100644
--- a/system2-report/web/nginx.conf
+++ b/system2-report/web/nginx.conf
@@ -17,7 +17,32 @@ server {
         add_header Cache-Control "no-store, no-cache, must-revalidate";
     }
 
-    # API 프록시 (시스템 2 API)
+    # System 1 API 프록시 (공장/작업장, TBM, 출입관리)
+    location /api/workplaces/ {
+        proxy_pass http://system1-api:3005;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+    }
+
+    location /api/tbm/ {
+        proxy_pass http://system1-api:3005;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+    }
+
+    location /api/workplace-visits/ {
+        proxy_pass http://system1-api:3005;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+    }
+
+    # System 2 API 프록시 (신고 관련)
     location /api/ {
         proxy_pass http://system2-api:3005;
         proxy_set_header Host $host;
@@ -26,9 +51,24 @@ server {
         proxy_set_header X-Forwarded-Proto $scheme;
     }
 
-    # 업로드 파일
-    location /uploads/ {
+    # System 2 API uploads (신고 사진 등)
+    # ^~ + 더 긴 prefix → /api/ 보다 우선 매칭
+    location ^~ /api/uploads/ {
         proxy_pass http://system2-api:3005/uploads/;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+    }
+
+    # System 1 uploads 프록시 (작업장 레이아웃 이미지 등)
+    # ^~ : 정적파일 캐시 regex보다 우선 매칭
+    location ^~ /uploads/ {
+        proxy_pass http://system1-api:3005/uploads/;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
     }
 
     location / {
diff --git a/system2-report/web/pages/safety/issue-report.html b/system2-report/web/pages/safety/issue-report.html
index ebe4725..1a52e74 100644
--- a/system2-report/web/pages/safety/issue-report.html
+++ b/system2-report/web/pages/safety/issue-report.html
@@ -3,128 +3,167 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>문제 신고 | (주)테크니컬코리아</title>
+    <title>신고 | (주)테크니컬코리아</title>
     <link rel="stylesheet" href="/css/design-system.css">
     <link rel="stylesheet" href="/css/common.css?v=2">
     <link rel="stylesheet" href="/css/project-management.css?v=3">
     <link rel="icon" type="image/png" href="/img/favicon.png">
     <script src="/js/api-base.js"></script>
     <script src="/js/app-init.js?v=2" defer></script>
-    <script src="https://instant.page/5.2.0" type="module"></script>
     <style>
-        .issue-form-container {
-            max-width: 900px;
-            margin: 0 auto;
-        }
-
+        /* 스텝 인디케이터 */
         .step-indicator {
             display: flex;
-            justify-content: space-between;
-            margin-bottom: 32px;
-            padding: 16px;
-            background: var(--gray-50);
-            border-radius: var(--radius-lg);
+            justify-content: center;
+            align-items: center;
+            gap: 0;
+            margin-bottom: 2rem;
+            padding: 1.5rem;
+            background: white;
+            border-radius: 0.75rem;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
         }
 
         .step {
             display: flex;
             align-items: center;
-            gap: 8px;
-            color: var(--gray-400);
-            font-size: var(--text-sm);
+            gap: 0.5rem;
+            color: #9ca3af;
+            font-size: 0.875rem;
+        }
+
+        .step-connector {
+            width: 60px;
+            height: 2px;
+            background: #e5e7eb;
+            margin: 0 1rem;
+        }
+
+        .step.active .step-connector,
+        .step.completed .step-connector {
+            background: #3b82f6;
         }
 
         .step.active {
-            color: var(--primary-600);
-            font-weight: 600;
+            color: #3b82f6;
         }
 
         .step.completed {
-            color: var(--green-600);
+            color: #10b981;
         }
 
         .step-number {
-            width: 28px;
-            height: 28px;
+            width: 32px;
+            height: 32px;
             border-radius: 50%;
-            background: var(--gray-200);
+            background: #f3f4f6;
+            border: 2px solid #e5e7eb;
             display: flex;
             align-items: center;
             justify-content: center;
             font-weight: 600;
+            font-size: 0.875rem;
         }
 
         .step.active .step-number {
-            background: var(--primary-500);
+            background: #3b82f6;
+            border-color: #3b82f6;
             color: white;
         }
 
         .step.completed .step-number {
-            background: var(--green-500);
+            background: #10b981;
+            border-color: #10b981;
             color: white;
         }
 
+        .step-text {
+            font-weight: 500;
+        }
+
+        /* 폼 섹션 */
         .form-section {
             background: white;
-            border-radius: var(--radius-lg);
-            padding: 24px;
-            margin-bottom: 24px;
-            box-shadow: var(--shadow-sm);
-            border: 1px solid var(--gray-200);
+            border-radius: 0.75rem;
+            padding: 1.5rem;
+            margin-bottom: 1.5rem;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
         }
 
         .form-section-title {
-            font-size: var(--text-lg);
+            font-size: 1rem;
             font-weight: 600;
-            margin-bottom: 20px;
-            padding-bottom: 12px;
-            border-bottom: 1px solid var(--gray-200);
+            color: #1f2937;
+            margin-bottom: 1.25rem;
+            padding-bottom: 0.75rem;
+            border-bottom: 1px solid #e5e7eb;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
         }
 
-        /* 지도 선택 영역 */
+        .form-section-title .section-number {
+            width: 24px;
+            height: 24px;
+            background: #3b82f6;
+            color: white;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 0.75rem;
+            font-weight: 700;
+        }
+
+        /* 지도 컨테이너 */
         .map-container {
             position: relative;
-            min-height: 400px;
-            background: var(--gray-100);
-            border-radius: var(--radius-md);
+            background: #f9fafb;
+            border: 1px solid #e5e7eb;
+            border-radius: 0.5rem;
             overflow: hidden;
         }
 
         #issueMapCanvas {
-            width: 100%;
-            height: 400px;
+            display: block;
             cursor: crosshair;
         }
 
         .selected-location-info {
-            margin-top: 16px;
-            padding: 16px;
-            background: var(--primary-50);
-            border-radius: var(--radius-md);
-            border-left: 4px solid var(--primary-500);
+            margin-top: 1rem;
+            padding: 1rem;
+            background: #eff6ff;
+            border: 1px solid #bfdbfe;
+            border-radius: 0.5rem;
+            color: #1e40af;
+            font-weight: 500;
         }
 
         .selected-location-info.empty {
-            background: var(--gray-50);
-            border-left-color: var(--gray-300);
-            color: var(--gray-500);
+            background: #f9fafb;
+            border-color: #e5e7eb;
+            color: #6b7280;
             text-align: center;
         }
 
         .custom-location-toggle {
-            margin-top: 16px;
+            margin-top: 1rem;
             display: flex;
             align-items: center;
-            gap: 12px;
+            gap: 0.75rem;
+            padding: 0.75rem;
+            background: #f9fafb;
+            border-radius: 0.5rem;
         }
 
         .custom-location-toggle input[type="checkbox"] {
-            width: 20px;
-            height: 20px;
+            width: 18px;
+            height: 18px;
+            accent-color: #3b82f6;
         }
 
         .custom-location-input {
-            margin-top: 12px;
+            margin-top: 0.75rem;
             display: none;
         }
 
@@ -132,161 +171,254 @@
             display: block;
         }
 
+        .custom-location-input input {
+            width: 100%;
+            padding: 0.75rem 1rem;
+            border: 1px solid #d1d5db;
+            border-radius: 0.5rem;
+            font-size: 0.875rem;
+        }
+
+        .custom-location-input input:focus {
+            outline: none;
+            border-color: #3b82f6;
+            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+        }
+
         /* 유형 선택 버튼 */
         .type-buttons {
             display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 16px;
-            margin-bottom: 24px;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 1rem;
         }
 
         .type-btn {
-            padding: 24px;
-            border: 2px solid var(--gray-200);
-            border-radius: var(--radius-lg);
+            padding: 1.5rem;
+            border: 2px solid #e5e7eb;
+            border-radius: 0.75rem;
             background: white;
             cursor: pointer;
-            transition: all var(--transition-fast);
+            transition: all 0.2s;
             text-align: center;
         }
 
         .type-btn:hover {
-            border-color: var(--primary-300);
-            background: var(--primary-50);
+            border-color: #d1d5db;
+            background: #f9fafb;
         }
 
         .type-btn.selected {
-            border-color: var(--primary-500);
-            background: var(--primary-50);
+            border-color: #3b82f6;
+            background: #eff6ff;
         }
 
         .type-btn.nonconformity.selected {
-            border-color: var(--orange-500);
-            background: var(--orange-50);
+            border-color: #f97316;
+            background: #fff7ed;
         }
 
         .type-btn.safety.selected {
-            border-color: var(--red-500);
-            background: var(--red-50);
+            border-color: #ef4444;
+            background: #fef2f2;
+        }
+
+        .type-btn.facility.selected {
+            border-color: #3b82f6;
+            background: #eff6ff;
+        }
+
+        .type-btn-icon {
+            font-size: 2rem;
+            margin-bottom: 0.5rem;
         }
 
         .type-btn-title {
-            font-size: var(--text-lg);
+            font-size: 1rem;
             font-weight: 600;
-            margin-bottom: 8px;
+            color: #1f2937;
+            margin-bottom: 0.25rem;
         }
 
         .type-btn-desc {
-            font-size: var(--text-sm);
-            color: var(--gray-500);
+            font-size: 0.8rem;
+            color: #6b7280;
         }
 
         /* 카테고리 선택 */
+        #categoryContainer {
+            margin-top: 1.5rem;
+            padding-top: 1.5rem;
+            border-top: 1px solid #e5e7eb;
+        }
+
         .category-grid {
             display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-            gap: 12px;
+            grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+            gap: 0.75rem;
         }
 
         .category-btn {
-            padding: 16px;
-            border: 1px solid var(--gray-200);
-            border-radius: var(--radius-md);
+            padding: 1rem;
+            border: 1px solid #e5e7eb;
+            border-radius: 0.5rem;
             background: white;
             cursor: pointer;
-            transition: all var(--transition-fast);
+            transition: all 0.2s;
             text-align: center;
-            font-size: var(--text-sm);
+            font-size: 0.875rem;
+            font-weight: 500;
         }
 
         .category-btn:hover {
-            border-color: var(--primary-300);
-            background: var(--gray-50);
+            border-color: #3b82f6;
+            background: #f9fafb;
         }
 
         .category-btn.selected {
-            border-color: var(--primary-500);
-            background: var(--primary-50);
-            font-weight: 600;
+            border-color: #3b82f6;
+            background: #eff6ff;
+            color: #1d4ed8;
         }
 
-        /* 사전 정의 항목 선택 */
+        /* 항목 선택 */
         .item-grid {
             display: flex;
             flex-wrap: wrap;
-            gap: 10px;
-            margin-top: 16px;
+            gap: 0.5rem;
         }
 
         .item-btn {
-            padding: 12px 20px;
-            border: 1px solid var(--gray-200);
+            padding: 0.625rem 1rem;
+            border: 1px solid #e5e7eb;
             border-radius: 9999px;
             background: white;
             cursor: pointer;
-            transition: all var(--transition-fast);
-            font-size: var(--text-sm);
+            transition: all 0.2s;
+            font-size: 0.875rem;
         }
 
         .item-btn:hover {
-            border-color: var(--primary-300);
-            background: var(--gray-50);
+            border-color: #3b82f6;
+            background: #f9fafb;
         }
 
         .item-btn.selected {
-            border-color: var(--primary-500);
-            background: var(--primary-500);
+            border-color: #3b82f6;
+            background: #3b82f6;
             color: white;
         }
 
-        .item-btn[data-severity="critical"] {
-            border-color: var(--red-300);
-        }
-
         .item-btn[data-severity="critical"].selected {
-            background: var(--red-500);
-            border-color: var(--red-500);
-        }
-
-        .item-btn[data-severity="high"] {
-            border-color: var(--orange-300);
+            background: #ef4444;
+            border-color: #ef4444;
         }
 
         .item-btn[data-severity="high"].selected {
-            background: var(--orange-500);
-            border-color: var(--orange-500);
+            background: #f97316;
+            border-color: #f97316;
+        }
+
+        .item-btn.custom-input-btn {
+            border-style: dashed;
+            color: #6b7280;
+        }
+
+        .item-btn.custom-input-btn:hover {
+            border-color: #3b82f6;
+            color: #3b82f6;
+        }
+
+        .item-btn.custom-input-btn.selected {
+            border-style: solid;
+            background: #dbeafe;
+            color: #1d4ed8;
+        }
+
+        /* 직접 입력 영역 */
+        .custom-item-input {
+            margin-top: 1rem;
+            padding: 1rem;
+            background: #f0f9ff;
+            border: 1px solid #bae6fd;
+            border-radius: 0.5rem;
+            display: flex;
+            gap: 0.5rem;
+            align-items: center;
+        }
+
+        .custom-item-input input {
+            flex: 1;
+            padding: 0.625rem 0.875rem;
+            border: 1px solid #d1d5db;
+            border-radius: 0.375rem;
+            font-size: 0.875rem;
+        }
+
+        .custom-item-input input:focus {
+            outline: none;
+            border-color: #3b82f6;
+            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+        }
+
+        .btn-confirm-custom {
+            padding: 0.625rem 1rem;
+            background: #3b82f6;
+            color: white;
+            border: none;
+            border-radius: 0.375rem;
+            font-size: 0.875rem;
+            font-weight: 500;
+            cursor: pointer;
+        }
+
+        .btn-confirm-custom:hover {
+            background: #2563eb;
+        }
+
+        .btn-cancel-custom {
+            padding: 0.625rem 1rem;
+            background: white;
+            color: #4b5563;
+            border: 1px solid #d1d5db;
+            border-radius: 0.375rem;
+            font-size: 0.875rem;
+            cursor: pointer;
+        }
+
+        .btn-cancel-custom:hover {
+            background: #f9fafb;
         }
 
         /* 사진 업로드 */
         .photo-upload-grid {
             display: grid;
             grid-template-columns: repeat(5, 1fr);
-            gap: 12px;
+            gap: 0.75rem;
         }
 
         .photo-slot {
             aspect-ratio: 1;
-            border: 2px dashed var(--gray-300);
-            border-radius: var(--radius-md);
+            border: 2px dashed #d1d5db;
+            border-radius: 0.5rem;
             display: flex;
             flex-direction: column;
             align-items: center;
             justify-content: center;
             cursor: pointer;
-            transition: all var(--transition-fast);
+            transition: all 0.2s;
             position: relative;
             overflow: hidden;
-            background: var(--gray-50);
+            background: #f9fafb;
         }
 
         .photo-slot:hover {
-            border-color: var(--primary-500);
-            background: var(--primary-50);
+            border-color: #3b82f6;
+            background: #eff6ff;
         }
 
         .photo-slot.has-photo {
             border-style: solid;
-            border-color: var(--green-500);
+            border-color: #10b981;
         }
 
         .photo-slot img {
@@ -296,8 +428,8 @@
         }
 
         .photo-slot .add-icon {
-            font-size: 24px;
-            color: var(--gray-400);
+            font-size: 1.5rem;
+            color: #9ca3af;
         }
 
         .photo-slot .remove-btn {
@@ -307,7 +439,7 @@
             width: 24px;
             height: 24px;
             border-radius: 50%;
-            background: var(--red-500);
+            background: #ef4444;
             color: white;
             border: none;
             cursor: pointer;
@@ -321,10 +453,6 @@
             display: flex;
         }
 
-        .photo-slot .add-icon {
-            display: block;
-        }
-
         .photo-slot.has-photo .add-icon {
             display: none;
         }
@@ -333,60 +461,62 @@
         .additional-textarea {
             width: 100%;
             min-height: 100px;
-            padding: 12px;
-            border: 1px solid var(--gray-300);
-            border-radius: var(--radius-md);
-            font-size: var(--text-base);
+            padding: 0.75rem 1rem;
+            border: 1px solid #d1d5db;
+            border-radius: 0.5rem;
+            font-size: 0.875rem;
             resize: vertical;
+            font-family: inherit;
         }
 
         .additional-textarea:focus {
             outline: none;
-            border-color: var(--primary-500);
-            box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
+            border-color: #3b82f6;
+            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
         }
 
         /* 제출 버튼 */
         .form-actions {
             display: flex;
             justify-content: flex-end;
-            gap: 16px;
-            margin-top: 32px;
+            gap: 0.75rem;
+            margin-top: 1.5rem;
         }
 
         .btn-submit {
-            padding: 16px 48px;
-            background: var(--primary-500);
+            padding: 0.875rem 2rem;
+            background: #3b82f6;
             color: white;
             border: none;
-            border-radius: var(--radius-md);
-            font-size: var(--text-base);
+            border-radius: 0.5rem;
+            font-size: 0.9375rem;
             font-weight: 600;
             cursor: pointer;
-            transition: all var(--transition-fast);
+            transition: all 0.2s;
         }
 
         .btn-submit:hover {
-            background: var(--primary-600);
+            background: #2563eb;
         }
 
         .btn-submit:disabled {
-            background: var(--gray-300);
+            background: #9ca3af;
             cursor: not-allowed;
         }
 
         .btn-cancel {
-            padding: 16px 32px;
+            padding: 0.875rem 1.5rem;
             background: white;
-            color: var(--gray-600);
-            border: 1px solid var(--gray-300);
-            border-radius: var(--radius-md);
-            font-size: var(--text-base);
+            color: #4b5563;
+            border: 1px solid #d1d5db;
+            border-radius: 0.5rem;
+            font-size: 0.9375rem;
+            font-weight: 500;
             cursor: pointer;
         }
 
         .btn-cancel:hover {
-            background: var(--gray-50);
+            background: #f9fafb;
         }
 
         /* 작업 선택 모달 */
@@ -409,40 +539,41 @@
 
         .work-selection-content {
             background: white;
-            padding: 24px;
-            border-radius: var(--radius-lg);
+            padding: 1.5rem;
+            border-radius: 0.75rem;
             max-width: 500px;
             width: 90%;
+            box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
         }
 
         .work-selection-title {
-            font-size: var(--text-lg);
+            font-size: 1.125rem;
             font-weight: 600;
-            margin-bottom: 16px;
+            margin-bottom: 1rem;
         }
 
         .work-option {
-            padding: 16px;
-            border: 1px solid var(--gray-200);
-            border-radius: var(--radius-md);
-            margin-bottom: 12px;
+            padding: 1rem;
+            border: 1px solid #e5e7eb;
+            border-radius: 0.5rem;
+            margin-bottom: 0.75rem;
             cursor: pointer;
-            transition: all var(--transition-fast);
+            transition: all 0.2s;
         }
 
         .work-option:hover {
-            border-color: var(--primary-500);
-            background: var(--primary-50);
+            border-color: #3b82f6;
+            background: #eff6ff;
         }
 
         .work-option-title {
             font-weight: 600;
-            margin-bottom: 4px;
+            margin-bottom: 0.25rem;
         }
 
         .work-option-desc {
-            font-size: var(--text-sm);
-            color: var(--gray-500);
+            font-size: 0.875rem;
+            color: #6b7280;
         }
 
         /* 반응형 */
@@ -457,7 +588,12 @@
 
             .step-indicator {
                 flex-wrap: wrap;
-                gap: 12px;
+                justify-content: center;
+                gap: 0.5rem;
+            }
+
+            .step-connector {
+                display: none;
             }
 
             .step-text {
@@ -467,152 +603,183 @@
     </style>
 </head>
 <body>
-    <div id="navbar-container"></div>
-
-    <main class="main-content">
-        <div class="page-header">
-            <h1 class="page-title">문제 신고</h1>
-            <p class="page-description">작업 중 발견된 부적합 사항 또는 안전 문제를 신고합니다.</p>
-        </div>
-
-        <div class="issue-form-container">
-            <!-- 단계 표시 -->
-            <div class="step-indicator">
-                <div class="step active" data-step="1">
-                    <span class="step-number">1</span>
-                    <span class="step-text">위치 선택</span>
-                </div>
-                <div class="step" data-step="2">
-                    <span class="step-number">2</span>
-                    <span class="step-text">유형 선택</span>
-                </div>
-                <div class="step" data-step="3">
-                    <span class="step-number">3</span>
-                    <span class="step-text">항목 선택</span>
-                </div>
-                <div class="step" data-step="4">
-                    <span class="step-number">4</span>
-                    <span class="step-text">사진/설명</span>
-                </div>
-            </div>
-
-            <!-- Step 1: 위치 선택 -->
-            <div class="form-section" id="step1Section">
-                <h2 class="form-section-title">1. 발생 위치 선택</h2>
-
-                <div class="form-group">
-                    <label for="factorySelect">공장 선택</label>
-                    <select id="factorySelect">
-                        <option value="">공장을 선택하세요</option>
-                    </select>
-                </div>
-
-                <div class="map-container">
-                    <canvas id="issueMapCanvas"></canvas>
-                </div>
-
-                <div class="selected-location-info empty" id="selectedLocationInfo">
-                    지도에서 작업장을 클릭하여 위치를 선택하세요
-                </div>
-
-                <div class="custom-location-toggle">
-                    <input type="checkbox" id="useCustomLocation">
-                    <label for="useCustomLocation">지도에 없는 위치 직접 입력</label>
-                </div>
-
-                <div class="custom-location-input" id="customLocationInput">
-                    <input type="text" id="customLocation" placeholder="위치를 입력하세요 (예: 야적장 입구, 주차장 등)">
-                </div>
-            </div>
-
-            <!-- Step 2: 문제 유형 선택 -->
-            <div class="form-section" id="step2Section">
-                <h2 class="form-section-title">2. 문제 유형 선택</h2>
-
-                <div class="type-buttons">
-                    <div class="type-btn nonconformity" data-type="nonconformity">
-                        <div class="type-btn-title">부적합 사항</div>
-                        <div class="type-btn-desc">자재, 설계, 검사 관련 문제</div>
-                    </div>
-                    <div class="type-btn safety" data-type="safety">
-                        <div class="type-btn-title">안전 관련</div>
-                        <div class="type-btn-desc">보호구, 위험구역, 안전수칙 관련</div>
+    <div class="work-report-container">
+        <main class="work-report-main">
+            <div class="dashboard-main">
+                <div class="page-header">
+                    <div class="page-title-section">
+                        <h1 class="page-title">신고</h1>
+                        <p class="page-description">작업 중 발견된 부적합 사항, 안전 문제 또는 시설설비 문제를 신고합니다.</p>
                     </div>
                 </div>
 
-                <div id="categoryContainer" style="display: none;">
-                    <label style="font-weight: 600; margin-bottom: 12px; display: block;">세부 카테고리</label>
-                    <div class="category-grid" id="categoryGrid"></div>
+                <!-- 단계 표시 -->
+                <div class="step-indicator">
+                    <div class="step active" data-step="1">
+                        <span class="step-number">1</span>
+                        <span class="step-text">위치 선택</span>
+                    </div>
+                    <div class="step-connector"></div>
+                    <div class="step" data-step="2">
+                        <span class="step-number">2</span>
+                        <span class="step-text">유형 선택</span>
+                    </div>
+                    <div class="step-connector"></div>
+                    <div class="step" data-step="3">
+                        <span class="step-number">3</span>
+                        <span class="step-text">항목 선택</span>
+                    </div>
+                    <div class="step-connector"></div>
+                    <div class="step" data-step="4">
+                        <span class="step-number">4</span>
+                        <span class="step-text">사진/설명</span>
+                    </div>
                 </div>
-            </div>
 
-            <!-- Step 3: 신고 항목 선택 -->
-            <div class="form-section" id="step3Section">
-                <h2 class="form-section-title">3. 신고 항목 선택</h2>
-                <p style="color: var(--gray-500); margin-bottom: 16px;">해당하는 항목을 선택하세요. 여러 개 선택 가능합니다.</p>
+                <!-- Step 1: 위치 선택 -->
+                <div class="form-section" id="step1Section">
+                    <h2 class="form-section-title">
+                        <span class="section-number">1</span>
+                        발생 위치 선택
+                    </h2>
 
-                <div class="item-grid" id="itemGrid">
-                    <p style="color: var(--gray-400);">먼저 카테고리를 선택하세요</p>
+                    <div class="form-group">
+                        <label class="form-label">공장 선택</label>
+                        <select id="factorySelect" class="form-control">
+                            <option value="">공장을 선택하세요</option>
+                        </select>
+                    </div>
+
+                    <div class="map-container">
+                        <canvas id="issueMapCanvas"></canvas>
+                    </div>
+
+                    <div class="selected-location-info empty" id="selectedLocationInfo">
+                        지도에서 작업장을 클릭하여 위치를 선택하세요
+                    </div>
+
+                    <div class="custom-location-toggle">
+                        <input type="checkbox" id="useCustomLocation">
+                        <label for="useCustomLocation">지도에 없는 위치 직접 입력</label>
+                    </div>
+
+                    <div class="custom-location-input" id="customLocationInput">
+                        <input type="text" id="customLocation" placeholder="위치를 입력하세요 (예: 야적장 입구, 주차장 등)">
+                    </div>
                 </div>
-            </div>
 
-            <!-- Step 4: 사진 및 추가 설명 -->
-            <div class="form-section" id="step4Section">
-                <h2 class="form-section-title">4. 사진 및 추가 설명</h2>
+                <!-- Step 2: 문제 유형 선택 -->
+                <div class="form-section" id="step2Section">
+                    <h2 class="form-section-title">
+                        <span class="section-number">2</span>
+                        문제 유형 선택
+                    </h2>
 
-                <div class="form-group">
-                    <label>사진 첨부 (최대 5장)</label>
-                    <div class="photo-upload-grid">
-                        <div class="photo-slot" data-index="0">
-                            <span class="add-icon">+</span>
-                            <button class="remove-btn" type="button">&times;</button>
+                    <div class="type-buttons">
+                        <div class="type-btn nonconformity" data-type="nonconformity">
+                            <div class="type-btn-icon">&#128203;</div>
+                            <div class="type-btn-title">부적합 사항</div>
+                            <div class="type-btn-desc">자재, 설계, 검사 관련</div>
                         </div>
-                        <div class="photo-slot" data-index="1">
-                            <span class="add-icon">+</span>
-                            <button class="remove-btn" type="button">&times;</button>
+                        <div class="type-btn safety" data-type="safety">
+                            <div class="type-btn-icon">&#9888;</div>
+                            <div class="type-btn-title">안전 관련</div>
+                            <div class="type-btn-desc">보호구, 위험구역, 안전수칙</div>
                         </div>
-                        <div class="photo-slot" data-index="2">
-                            <span class="add-icon">+</span>
-                            <button class="remove-btn" type="button">&times;</button>
-                        </div>
-                        <div class="photo-slot" data-index="3">
-                            <span class="add-icon">+</span>
-                            <button class="remove-btn" type="button">&times;</button>
-                        </div>
-                        <div class="photo-slot" data-index="4">
-                            <span class="add-icon">+</span>
-                            <button class="remove-btn" type="button">&times;</button>
+                        <div class="type-btn facility" data-type="facility">
+                            <div class="type-btn-icon">&#128295;</div>
+                            <div class="type-btn-title">시설설비 관련</div>
+                            <div class="type-btn-desc">설비 고장, 시설 파손</div>
                         </div>
                     </div>
-                    <input type="file" id="photoInput" accept="image/*" capture="environment" style="display: none;">
+
+                    <div id="categoryContainer" style="display: none;">
+                        <label class="form-label">세부 카테고리</label>
+                        <div class="category-grid" id="categoryGrid"></div>
+                    </div>
                 </div>
 
-                <div class="form-group">
-                    <label for="additionalDescription">추가 설명 (선택)</label>
-                    <textarea id="additionalDescription" class="additional-textarea" placeholder="추가로 설명이 필요한 내용을 입력하세요..."></textarea>
+                <!-- Step 3: 신고 항목 선택 -->
+                <div class="form-section" id="step3Section">
+                    <h2 class="form-section-title">
+                        <span class="section-number">3</span>
+                        신고 항목 선택
+                    </h2>
+                    <p style="color: #6b7280; margin-bottom: 1rem; font-size: 0.875rem;">해당하는 항목을 선택하거나 직접 입력하세요.</p>
+
+                    <div class="item-grid" id="itemGrid">
+                        <p style="color: #9ca3af;">먼저 카테고리를 선택하세요</p>
+                    </div>
+
+                    <!-- 직접 입력 영역 -->
+                    <div class="custom-item-input" id="customItemInput" style="display: none;">
+                        <input type="text" id="customItemName" placeholder="신고 항목을 직접 입력하세요..." maxlength="100">
+                        <button type="button" class="btn-confirm-custom" onclick="confirmCustomItem()">확인</button>
+                        <button type="button" class="btn-cancel-custom" onclick="cancelCustomItem()">취소</button>
+                    </div>
+                </div>
+
+                <!-- Step 4: 사진 및 추가 설명 -->
+                <div class="form-section" id="step4Section">
+                    <h2 class="form-section-title">
+                        <span class="section-number">4</span>
+                        사진 및 추가 설명
+                    </h2>
+
+                    <div class="form-group">
+                        <label class="form-label">사진 첨부 (최대 5장)</label>
+                        <div class="photo-upload-grid">
+                            <div class="photo-slot" data-index="0">
+                                <span class="add-icon">+</span>
+                                <button class="remove-btn" type="button">&times;</button>
+                            </div>
+                            <div class="photo-slot" data-index="1">
+                                <span class="add-icon">+</span>
+                                <button class="remove-btn" type="button">&times;</button>
+                            </div>
+                            <div class="photo-slot" data-index="2">
+                                <span class="add-icon">+</span>
+                                <button class="remove-btn" type="button">&times;</button>
+                            </div>
+                            <div class="photo-slot" data-index="3">
+                                <span class="add-icon">+</span>
+                                <button class="remove-btn" type="button">&times;</button>
+                            </div>
+                            <div class="photo-slot" data-index="4">
+                                <span class="add-icon">+</span>
+                                <button class="remove-btn" type="button">&times;</button>
+                            </div>
+                        </div>
+                        <input type="file" id="photoInput" accept="image/*" capture="environment" style="display: none;">
+                    </div>
+
+                    <div class="form-group">
+                        <label class="form-label" for="additionalDescription">추가 설명 (선택)</label>
+                        <textarea id="additionalDescription" class="additional-textarea" placeholder="추가로 설명이 필요한 내용을 입력하세요..."></textarea>
+                    </div>
+                </div>
+
+                <!-- 제출 버튼 -->
+                <div class="form-actions">
+                    <button type="button" class="btn-cancel" onclick="history.back()">취소</button>
+                    <button type="button" class="btn-submit" id="submitBtn" onclick="submitReport()">신고 제출</button>
                 </div>
             </div>
+        </main>
 
-            <!-- 제출 버튼 -->
-            <div class="form-actions">
-                <button type="button" class="btn-cancel" onclick="history.back()">취소</button>
-                <button type="button" class="btn-submit" id="submitBtn" onclick="submitReport()">신고 제출</button>
+        <!-- 작업 선택 모달 -->
+        <div class="work-selection-modal" id="workSelectionModal">
+            <div class="work-selection-content">
+                <h3 class="work-selection-title">작업 선택</h3>
+                <p style="margin-bottom: 1rem; color: #6b7280; font-size: 0.875rem;">이 위치에 등록된 작업이 있습니다. 연결할 작업을 선택하세요.</p>
+                <div id="workOptionsList"></div>
+                <button type="button" onclick="closeWorkModal()" style="width: 100%; padding: 0.75rem; margin-top: 0.5rem; background: #f3f4f6; border: none; border-radius: 0.5rem; cursor: pointer; font-size: 0.875rem;">
+                    작업 연결 없이 진행
+                </button>
             </div>
         </div>
-    </main>
-
-    <!-- 작업 선택 모달 -->
-    <div class="work-selection-modal" id="workSelectionModal">
-        <div class="work-selection-content">
-            <h3 class="work-selection-title">작업 선택</h3>
-            <p style="margin-bottom: 16px; color: var(--gray-600);">이 위치에 등록된 작업이 있습니다. 연결할 작업을 선택하세요.</p>
-            <div id="workOptionsList"></div>
-            <button type="button" onclick="closeWorkModal()" style="width: 100%; padding: 12px; margin-top: 8px; background: var(--gray-100); border: none; border-radius: var(--radius-md); cursor: pointer;">
-                작업 연결 없이 진행
-            </button>
-        </div>
     </div>
 
-    <script src="/js/work-issue-report.js?v=1"></script>
+    <script src="/js/work-issue-report.js?v=2"></script>
 </body>
 </html>
diff --git a/system3-nonconformance/api/database/database.py b/system3-nonconformance/api/database/database.py
index fbddc46..a647323 100644
--- a/system3-nonconformance/api/database/database.py
+++ b/system3-nonconformance/api/database/database.py
@@ -3,10 +3,18 @@ from sqlalchemy.orm import sessionmaker, Session
 from sqlalchemy.ext.declarative import declarative_base
 import os
 from typing import Generator
+from urllib.parse import quote_plus
 
-DATABASE_URL = os.getenv("DATABASE_URL", "postgresql://mproject:mproject2024@localhost:5432/mproject")
+# DB 설정 — 개별 환경변수에서 읽어서 URL 구성 (비밀번호 특수문자 처리)
+DB_HOST = os.getenv("DB_HOST", "mariadb")
+DB_PORT = os.getenv("DB_PORT", "3306")
+DB_USER = os.getenv("DB_USER", "hyungi_user")
+DB_PASSWORD = os.getenv("DB_PASSWORD", "password")
+DB_NAME = os.getenv("DB_NAME", "hyungi")
 
-engine = create_engine(DATABASE_URL)
+DATABASE_URL = f"mysql+pymysql://{DB_USER}:{quote_plus(DB_PASSWORD)}@{DB_HOST}:{DB_PORT}/{DB_NAME}?charset=utf8mb4"
+
+engine = create_engine(DATABASE_URL, pool_recycle=3600)
 SessionLocal = sessionmaker(autocommit=False, autoflush=False, bind=engine)
 
 Base = declarative_base()
diff --git a/system3-nonconformance/api/database/models.py b/system3-nonconformance/api/database/models.py
index 87a1f19..1c82d94 100644
--- a/system3-nonconformance/api/database/models.py
+++ b/system3-nonconformance/api/database/models.py
@@ -1,5 +1,4 @@
-from sqlalchemy import Column, Integer, BigInteger, String, DateTime, Float, Boolean, Text, ForeignKey, Enum, Index
-from sqlalchemy.dialects.postgresql import JSONB
+from sqlalchemy import Column, Integer, BigInteger, String, DateTime, Float, Boolean, Text, ForeignKey, Enum, Index, JSON
 from sqlalchemy.ext.declarative import declarative_base
 from sqlalchemy.orm import relationship
 from datetime import datetime, timezone, timedelta
@@ -15,8 +14,11 @@ def get_kst_now():
 Base = declarative_base()
 
 class UserRole(str, enum.Enum):
-    admin = "admin"  # 관리자
-    user = "user"    # 일반 사용자
+    system = "system"              # 시스템 관리자
+    admin = "admin"                # 관리자
+    support_team = "support_team"  # 지원팀
+    leader = "leader"              # 리더
+    user = "user"                  # 일반 사용자
 
 class IssueStatus(str, enum.Enum):
     new = "new"
@@ -51,77 +53,76 @@ class DepartmentType(str, enum.Enum):
     sales = "sales"                      # 영업
 
 class User(Base):
-    __tablename__ = "users"
-    
-    id = Column(Integer, primary_key=True, index=True)
-    username = Column(String, unique=True, index=True, nullable=False)
-    hashed_password = Column(String, nullable=False)
-    full_name = Column(String)
+    __tablename__ = "sso_users"
+
+    # Column mapping: Python attr → DB column
+    id = Column("user_id", Integer, primary_key=True, index=True)
+    username = Column(String(50), unique=True, index=True, nullable=False)
+    hashed_password = Column("password_hash", String(255), nullable=False)
+    full_name = Column("name", String(100))
     role = Column(Enum(UserRole), default=UserRole.user)
-    department = Column(Enum(DepartmentType))  # 부서 정보 추가
+    department = Column(String(50))
     is_active = Column(Boolean, default=True)
     created_at = Column(DateTime, default=get_kst_now)
-    
+
     # Relationships
     issues = relationship("Issue", back_populates="reporter", foreign_keys="Issue.reporter_id")
     reviewed_issues = relationship("Issue", foreign_keys="Issue.reviewed_by_id")
     daily_works = relationship("DailyWork", back_populates="created_by")
-    projects = relationship("Project", back_populates="created_by")
     page_permissions = relationship("UserPagePermission", back_populates="user", foreign_keys="UserPagePermission.user_id")
 
 class UserPagePermission(Base):
-    __tablename__ = "user_page_permissions"
-    
+    __tablename__ = "qc_user_page_permissions"
+
     id = Column(Integer, primary_key=True, index=True)
-    user_id = Column(Integer, ForeignKey("users.id", ondelete="CASCADE"), nullable=False)
+    user_id = Column(Integer, ForeignKey("sso_users.user_id", ondelete="CASCADE"), nullable=False)
     page_name = Column(String(50), nullable=False)
     can_access = Column(Boolean, default=False)
-    granted_by_id = Column(Integer, ForeignKey("users.id"))
+    granted_by_id = Column(Integer, ForeignKey("sso_users.user_id"))
     granted_at = Column(DateTime, default=get_kst_now)
     notes = Column(Text)
-    
+
     # Relationships
     user = relationship("User", back_populates="page_permissions", foreign_keys=[user_id])
     granted_by = relationship("User", foreign_keys=[granted_by_id], post_update=True)
-    
-    # Unique constraint
+
     __table_args__ = (
-        Index('idx_user_page_permissions_user_id', 'user_id'),
-        Index('idx_user_page_permissions_page_name', 'page_name'),
+        Index('idx_qc_user_page_perm_user_id', 'user_id'),
+        Index('idx_qc_user_page_perm_page_name', 'page_name'),
     )
 
 class Issue(Base):
-    __tablename__ = "issues"
-    
+    __tablename__ = "qc_issues"
+
     id = Column(Integer, primary_key=True, index=True)
-    photo_path = Column(String)
-    photo_path2 = Column(String)
-    photo_path3 = Column(String)
-    photo_path4 = Column(String)
-    photo_path5 = Column(String)
+    photo_path = Column(String(500))
+    photo_path2 = Column(String(500))
+    photo_path3 = Column(String(500))
+    photo_path4 = Column(String(500))
+    photo_path5 = Column(String(500))
     category = Column(Enum(IssueCategory), nullable=False)
     description = Column(Text, nullable=False)
     status = Column(Enum(IssueStatus), default=IssueStatus.new)
-    reporter_id = Column(Integer, ForeignKey("users.id"))
-    project_id = Column(BigInteger, ForeignKey("projects.id"))
+    reporter_id = Column(Integer, ForeignKey("sso_users.user_id"))
+    project_id = Column(Integer)  # FK 제거 — projects는 tkuser에서 관리
     report_date = Column(DateTime, default=get_kst_now)
     work_hours = Column(Float, default=0)
     detail_notes = Column(Text)
-    
+
     # 수신함 워크플로우 관련 컬럼들
     review_status = Column(Enum(ReviewStatus), default=ReviewStatus.pending_review)
     disposal_reason = Column(Enum(DisposalReasonType))
     custom_disposal_reason = Column(Text)
     disposed_at = Column(DateTime)
-    reviewed_by_id = Column(Integer, ForeignKey("users.id"))
+    reviewed_by_id = Column(Integer, ForeignKey("sso_users.user_id"))
     reviewed_at = Column(DateTime)
-    original_data = Column(JSONB)  # 원본 데이터 보존
-    modification_log = Column(JSONB, default=lambda: [])  # 수정 이력
-    
+    original_data = Column(JSON)
+    modification_log = Column(JSON, default=lambda: [])
+
     # 중복 신고 추적 시스템
-    duplicate_of_issue_id = Column(Integer, ForeignKey("issues.id"))  # 중복 대상 이슈 ID
-    duplicate_reporters = Column(JSONB, default=lambda: [])  # 중복 신고자 목록
-    
+    duplicate_of_issue_id = Column(Integer, ForeignKey("qc_issues.id"))
+    duplicate_reporters = Column(JSON, default=lambda: [])
+
     # 관리함에서 사용할 추가 필드들
     solution = Column(Text)  # 해결방안 (관리함에서 입력)
     responsible_department = Column(Enum(DepartmentType))  # 담당부서
@@ -133,16 +134,16 @@ class Issue(Base):
     project_sequence_no = Column(Integer)  # 프로젝트별 순번 (No)
     final_description = Column(Text)  # 최종 내용 (수정본 또는 원본)
     final_category = Column(Enum(IssueCategory))  # 최종 카테고리 (수정본 또는 원본)
-    
+
     # 추가 정보 필드들 (관리함에서 기록용)
     responsible_person_detail = Column(String(200))  # 해당자 상세 정보
     cause_detail = Column(Text)  # 원인 상세 정보
     additional_info_updated_at = Column(DateTime)  # 추가 정보 입력 시간
-    additional_info_updated_by_id = Column(Integer, ForeignKey("users.id"))  # 추가 정보 입력자
-    
+    additional_info_updated_by_id = Column(Integer, ForeignKey("sso_users.user_id"))  # 추가 정보 입력자
+
     # 완료 신청 관련 필드들
     completion_requested_at = Column(DateTime)  # 완료 신청 시간
-    completion_requested_by_id = Column(Integer, ForeignKey("users.id"))  # 완료 신청자
+    completion_requested_by_id = Column(Integer, ForeignKey("sso_users.user_id"))  # 완료 신청자
     completion_photo_path = Column(String(500))  # 완료 사진 1
     completion_photo_path2 = Column(String(500))  # 완료 사진 2
     completion_photo_path3 = Column(String(500))  # 완료 사진 3
@@ -152,7 +153,7 @@ class Issue(Base):
 
     # 완료 반려 관련 필드들
     completion_rejected_at = Column(DateTime)  # 완료 반려 시간
-    completion_rejected_by_id = Column(Integer, ForeignKey("users.id"))  # 완료 반려자
+    completion_rejected_by_id = Column(Integer, ForeignKey("sso_users.user_id"))  # 완료 반려자
     completion_rejection_reason = Column(Text)  # 완료 반려 사유
 
     # 일일보고서 추출 이력
@@ -162,26 +163,29 @@ class Issue(Base):
     # Relationships
     reporter = relationship("User", back_populates="issues", foreign_keys=[reporter_id])
     reviewer = relationship("User", foreign_keys=[reviewed_by_id], overlaps="reviewed_issues")
-    project = relationship("Project", back_populates="issues")
+    project = relationship("Project", back_populates="issues",
+                           primaryjoin="Issue.project_id == Project.id",
+                           foreign_keys=[project_id])
     duplicate_of = relationship("Issue", remote_side=[id], foreign_keys=[duplicate_of_issue_id])
 
 class Project(Base):
     __tablename__ = "projects"
-    
-    id = Column(BigInteger, primary_key=True, index=True)
-    job_no = Column(String, unique=True, nullable=False, index=True)
-    project_name = Column(String, nullable=False)
-    created_by_id = Column(Integer, ForeignKey("users.id"))
-    created_at = Column(DateTime, default=get_kst_now)
+
+    # Column mapping: Python attr id → DB column project_id
+    id = Column("project_id", Integer, primary_key=True, index=True)
+    job_no = Column(String(50), unique=True, nullable=False, index=True)
+    project_name = Column(String(255), nullable=False)
     is_active = Column(Boolean, default=True)
-    
+    created_at = Column(DateTime, default=get_kst_now)
+
     # Relationships
-    created_by = relationship("User", back_populates="projects")
-    issues = relationship("Issue", back_populates="project")
+    issues = relationship("Issue", back_populates="project",
+                          primaryjoin="Project.id == Issue.project_id",
+                          foreign_keys="[Issue.project_id]")
 
 class DailyWork(Base):
-    __tablename__ = "daily_works"
-    
+    __tablename__ = "qc_daily_works"
+
     id = Column(Integer, primary_key=True, index=True)
     date = Column(DateTime, nullable=False, index=True)
     worker_count = Column(Integer, nullable=False)
@@ -190,20 +194,20 @@ class DailyWork(Base):
     overtime_hours = Column(Float, default=0)
     overtime_total = Column(Float, default=0)
     total_hours = Column(Float, nullable=False)
-    created_by_id = Column(Integer, ForeignKey("users.id"))
+    created_by_id = Column(Integer, ForeignKey("sso_users.user_id"))
     created_at = Column(DateTime, default=get_kst_now)
-    
+
     # Relationships
     created_by = relationship("User", back_populates="daily_works")
 
 class ProjectDailyWork(Base):
-    __tablename__ = "project_daily_works"
+    __tablename__ = "qc_project_daily_works"
 
     id = Column(Integer, primary_key=True, index=True)
     date = Column(DateTime, nullable=False, index=True)
-    project_id = Column(BigInteger, ForeignKey("projects.id"), nullable=False)
+    project_id = Column(Integer, ForeignKey("projects.project_id"), nullable=False)
     hours = Column(Float, nullable=False)
-    created_by_id = Column(Integer, ForeignKey("users.id"))
+    created_by_id = Column(Integer, ForeignKey("sso_users.user_id"))
     created_at = Column(DateTime, default=get_kst_now)
 
     # Relationships
@@ -211,13 +215,13 @@ class ProjectDailyWork(Base):
     created_by = relationship("User")
 
 class DeletionLog(Base):
-    __tablename__ = "deletion_logs"
+    __tablename__ = "qc_deletion_logs"
 
     id = Column(Integer, primary_key=True, index=True)
     entity_type = Column(String(50), nullable=False)  # 'issue', 'project', 'daily_work' 등
     entity_id = Column(Integer, nullable=False)  # 삭제된 엔티티의 ID
-    entity_data = Column(JSONB, nullable=False)  # 삭제된 데이터 전체 (JSON)
-    deleted_by_id = Column(Integer, ForeignKey("users.id"), nullable=False)
+    entity_data = Column(JSON, nullable=False)  # 삭제된 데이터 전체 (JSON)
+    deleted_by_id = Column(Integer, ForeignKey("sso_users.user_id"), nullable=False)
     deleted_at = Column(DateTime, default=get_kst_now, nullable=False)
     reason = Column(Text)  # 삭제 사유 (선택사항)
 
diff --git a/system3-nonconformance/api/database/schemas.py b/system3-nonconformance/api/database/schemas.py
index ec1aa79..d466d49 100644
--- a/system3-nonconformance/api/database/schemas.py
+++ b/system3-nonconformance/api/database/schemas.py
@@ -4,7 +4,10 @@ from typing import Optional, List, Dict, Any
 from enum import Enum
 
 class UserRole(str, Enum):
+    system = "system"
     admin = "admin"
+    support_team = "support_team"
+    leader = "leader"
     user = "user"
 
 class IssueStatus(str, Enum):
@@ -285,12 +288,11 @@ class ProjectUpdate(BaseModel):
 
 class Project(ProjectBase):
     id: int
-    created_by_id: int
-    created_by: User
+    created_by_id: Optional[int] = None
+    created_by: Optional[User] = None
     created_at: datetime
     is_active: bool
-    # issues: Optional[List['Issue']] = None  # 순환 참조 방지를 위해 제거
-    
+
     class Config:
         from_attributes = True
 
diff --git a/system3-nonconformance/api/main.py b/system3-nonconformance/api/main.py
index 2aea158..5d1312f 100644
--- a/system3-nonconformance/api/main.py
+++ b/system3-nonconformance/api/main.py
@@ -8,10 +8,12 @@ from database.models import Base
 from routers import auth, issues, daily_work, reports, projects, page_permissions, inbox, management
 from services.auth_service import create_admin_user
 
-# 데이터베이스 테이블 생성
-# 메타데이터 캐시 클리어
-Base.metadata.clear()
-Base.metadata.create_all(bind=engine)
+# 데이터베이스 테이블 생성 (sso_users, projects는 이미 존재하므로 제외)
+tables_to_create = [
+    table for name, table in Base.metadata.tables.items()
+    if name not in ("sso_users", "projects")
+]
+Base.metadata.create_all(bind=engine, tables=tables_to_create)
 
 # FastAPI 앱 생성
 app = FastAPI(
diff --git a/system3-nonconformance/api/requirements.txt b/system3-nonconformance/api/requirements.txt
index 584e912..9f96cbb 100644
--- a/system3-nonconformance/api/requirements.txt
+++ b/system3-nonconformance/api/requirements.txt
@@ -5,7 +5,7 @@ python-jose[cryptography]==3.3.0
 passlib[bcrypt]==1.7.4
 bcrypt==4.1.2
 sqlalchemy==2.0.23
-psycopg2-binary==2.9.9
+pymysql==1.1.0
 alembic==1.12.1
 pydantic==2.5.0
 pydantic-settings==2.1.0
@@ -13,3 +13,4 @@ pillow==10.1.0
 pillow-heif==0.13.0
 reportlab==4.0.7
 openpyxl==3.1.2
+httpx==0.27.0
diff --git a/system3-nonconformance/api/routers/auth.py b/system3-nonconformance/api/routers/auth.py
index 40fc3d1..71d7cfe 100644
--- a/system3-nonconformance/api/routers/auth.py
+++ b/system3-nonconformance/api/routers/auth.py
@@ -35,7 +35,11 @@ async def get_current_user(token: str = Depends(oauth2_scheme), db: Session = De
     sso_role = payload.get("role", "user")
     role_map = {
         "Admin": UserRole.admin,
-        "System Admin": UserRole.admin,
+        "System Admin": UserRole.system,
+        "system": UserRole.system,
+        "admin": UserRole.admin,
+        "support_team": UserRole.support_team,
+        "leader": UserRole.leader,
     }
     mapped_role = role_map.get(sso_role, UserRole.user)
 
@@ -50,7 +54,7 @@ async def get_current_user(token: str = Depends(oauth2_scheme), db: Session = De
     return sso_user
 
 async def get_current_admin(current_user: User = Depends(get_current_user)):
-    if current_user.role != UserRole.admin:
+    if current_user.role not in [UserRole.admin, UserRole.system]:
         raise HTTPException(
             status_code=status.HTTP_403_FORBIDDEN,
             detail="Not enough permissions"
diff --git a/system3-nonconformance/api/routers/inbox.py b/system3-nonconformance/api/routers/inbox.py
index 17c5f78..01e58d3 100644
--- a/system3-nonconformance/api/routers/inbox.py
+++ b/system3-nonconformance/api/routers/inbox.py
@@ -1,10 +1,12 @@
-from fastapi import APIRouter, Depends, HTTPException, Query
+from fastapi import APIRouter, Depends, HTTPException, Query, Request
 from sqlalchemy.orm import Session
 from typing import List, Optional
 from datetime import datetime
 
 from database.database import get_db
-from database.models import Issue, User, Project, ReviewStatus, DisposalReasonType
+from database.models import Issue, User, ReviewStatus, DisposalReasonType
+from utils.tkuser_client import get_token_from_request
+import utils.tkuser_client as tkuser_client
 from database.schemas import (
     InboxIssue, IssueDisposalRequest, IssueReviewRequest, 
     IssueStatusUpdateRequest, ModificationLogEntry, ManagementUpdateRequest
@@ -123,6 +125,7 @@ async def dispose_issue(
 async def review_issue(
     issue_id: int,
     review_request: IssueReviewRequest,
+    request: Request,
     current_user: User = Depends(get_current_user),  # 수신함 권한이 있는 사용자
     db: Session = Depends(get_db)
 ):
@@ -157,9 +160,10 @@ async def review_issue(
     
     # 프로젝트 변경
     if review_request.project_id is not None and review_request.project_id != issue.project_id:
-        # 프로젝트 존재 확인
+        # 프로젝트 존재 확인 (tkuser API)
         if review_request.project_id != 0:  # 0은 프로젝트 없음을 의미
-            project = db.query(Project).filter(Project.id == review_request.project_id).first()
+            token = get_token_from_request(request)
+            project = await tkuser_client.get_project(token, review_request.project_id)
             if not project:
                 raise HTTPException(status_code=400, detail="존재하지 않는 프로젝트입니다.")
         
@@ -264,12 +268,11 @@ async def update_issue_status(
     # 진행 중 또는 완료 상태로 변경 시 프로젝트별 순번 자동 할당
     if status_request.review_status in [ReviewStatus.in_progress, ReviewStatus.completed]:
         if not issue.project_sequence_no:
-            from sqlalchemy import text
-            result = db.execute(
-                text("SELECT generate_project_sequence_no(:project_id)"), 
-                {"project_id": issue.project_id}
-            )
-            issue.project_sequence_no = result.scalar()
+            from sqlalchemy import func
+            max_seq = db.query(func.coalesce(func.max(Issue.project_sequence_no), 0)).filter(
+                Issue.project_id == issue.project_id
+            ).scalar()
+            issue.project_sequence_no = max_seq + 1
     
     # 완료 사진 업로드 처리
     if status_request.completion_photo and status_request.review_status == ReviewStatus.completed:
diff --git a/system3-nonconformance/api/routers/issues.py b/system3-nonconformance/api/routers/issues.py
index 8bdde62..cfc118a 100644
--- a/system3-nonconformance/api/routers/issues.py
+++ b/system3-nonconformance/api/routers/issues.py
@@ -259,9 +259,9 @@ async def get_issue_stats(
         query = query.filter(Issue.reporter_id == current_user.id)
     
     total = query.count()
-    new = query.filter(Issue.status == IssueStatus.NEW).count()
-    progress = query.filter(Issue.status == IssueStatus.PROGRESS).count()
-    complete = query.filter(Issue.status == IssueStatus.COMPLETE).count()
+    new = query.filter(Issue.status == IssueStatus.new).count()
+    progress = query.filter(Issue.status == IssueStatus.progress).count()
+    complete = query.filter(Issue.status == IssueStatus.complete).count()
     
     return {
         "total": total,
diff --git a/system3-nonconformance/api/routers/projects.py b/system3-nonconformance/api/routers/projects.py
index c14f066..81b6f1e 100644
--- a/system3-nonconformance/api/routers/projects.py
+++ b/system3-nonconformance/api/routers/projects.py
@@ -1,10 +1,9 @@
-from fastapi import APIRouter, Depends, HTTPException, status
-from sqlalchemy.orm import Session
-from typing import List
-from database.database import get_db
-from database.models import Project, User, UserRole
-from database.schemas import ProjectCreate, ProjectUpdate, Project as ProjectSchema
+from fastapi import APIRouter, Depends, HTTPException, Request, status
+from database.models import User, UserRole
+from database.schemas import ProjectCreate, ProjectUpdate
 from routers.auth import get_current_user
+from utils.tkuser_client import get_token_from_request
+import utils.tkuser_client as tkuser_client
 
 router = APIRouter(
     prefix="/api/projects",
@@ -25,57 +24,36 @@ async def projects_options():
     """OPTIONS preflight 요청 처리"""
     return {"message": "OK"}
 
-@router.post("/", response_model=ProjectSchema)
+@router.post("/")
 async def create_project(
     project: ProjectCreate,
-    db: Session = Depends(get_db),
+    request: Request,
     current_user: User = Depends(check_admin_permission)
 ):
-    """프로젝트 생성 (관리자만)"""
-    # Job No. 중복 확인
-    existing_project = db.query(Project).filter(Project.job_no == project.job_no).first()
-    if existing_project:
-        raise HTTPException(
-            status_code=status.HTTP_400_BAD_REQUEST,
-            detail="이미 존재하는 Job No.입니다."
-        )
-    
-    # 프로젝트 생성
-    db_project = Project(
-        job_no=project.job_no,
-        project_name=project.project_name,
-        created_by_id=current_user.id
-    )
-    
-    db.add(db_project)
-    db.commit()
-    db.refresh(db_project)
-    
-    return db_project
+    """프로젝트 생성 (관리자만) - tkuser API로 프록시"""
+    token = get_token_from_request(request)
+    return await tkuser_client.create_project(token, project.dict())
 
-@router.get("/", response_model=List[ProjectSchema])
+@router.get("/")
 async def get_projects(
+    request: Request,
     skip: int = 0,
     limit: int = 100,
     active_only: bool = True,
-    db: Session = Depends(get_db)
 ):
-    """프로젝트 목록 조회"""
-    query = db.query(Project)
-    
-    if active_only:
-        query = query.filter(Project.is_active == True)
-    
-    projects = query.offset(skip).limit(limit).all()
-    return projects
+    """프로젝트 목록 조회 - tkuser API로 프록시"""
+    token = get_token_from_request(request)
+    projects = await tkuser_client.get_projects(token, active_only=active_only)
+    return projects[skip:skip + limit]
 
-@router.get("/{project_id}", response_model=ProjectSchema)
+@router.get("/{project_id}")
 async def get_project(
     project_id: int,
-    db: Session = Depends(get_db)
+    request: Request,
 ):
-    """특정 프로젝트 조회"""
-    project = db.query(Project).filter(Project.id == project_id).first()
+    """특정 프로젝트 조회 - tkuser API로 프록시"""
+    token = get_token_from_request(request)
+    project = await tkuser_client.get_project(token, project_id)
     if not project:
         raise HTTPException(
             status_code=status.HTTP_404_NOT_FOUND,
@@ -83,47 +61,26 @@ async def get_project(
         )
     return project
 
-@router.put("/{project_id}", response_model=ProjectSchema)
+@router.put("/{project_id}")
 async def update_project(
     project_id: int,
     project_update: ProjectUpdate,
-    db: Session = Depends(get_db),
+    request: Request,
     current_user: User = Depends(check_admin_permission)
 ):
-    """프로젝트 수정 (관리자만)"""
-    project = db.query(Project).filter(Project.id == project_id).first()
-    if not project:
-        raise HTTPException(
-            status_code=status.HTTP_404_NOT_FOUND,
-            detail="프로젝트를 찾을 수 없습니다."
-        )
-    
-    # 업데이트할 필드만 수정
-    update_data = project_update.dict(exclude_unset=True)
-    for field, value in update_data.items():
-        setattr(project, field, value)
-    
-    db.commit()
-    db.refresh(project)
-    
-    return project
+    """프로젝트 수정 (관리자만) - tkuser API로 프록시"""
+    token = get_token_from_request(request)
+    return await tkuser_client.update_project(
+        token, project_id, project_update.dict(exclude_unset=True)
+    )
 
 @router.delete("/{project_id}")
 async def delete_project(
     project_id: int,
-    db: Session = Depends(get_db),
+    request: Request,
     current_user: User = Depends(check_admin_permission)
 ):
-    """프로젝트 삭제 (비활성화) (관리자만)"""
-    project = db.query(Project).filter(Project.id == project_id).first()
-    if not project:
-        raise HTTPException(
-            status_code=status.HTTP_404_NOT_FOUND,
-            detail="프로젝트를 찾을 수 없습니다."
-        )
-    
-    # 실제 삭제 대신 비활성화
-    project.is_active = False
-    db.commit()
-    
+    """프로젝트 삭제 (비활성화) (관리자만) - tkuser API로 프록시"""
+    token = get_token_from_request(request)
+    await tkuser_client.delete_project(token, project_id)
     return {"message": "프로젝트가 삭제되었습니다."}
diff --git a/system3-nonconformance/api/routers/reports.py b/system3-nonconformance/api/routers/reports.py
index 30a95e6..393af40 100644
--- a/system3-nonconformance/api/routers/reports.py
+++ b/system3-nonconformance/api/routers/reports.py
@@ -1,4 +1,4 @@
-from fastapi import APIRouter, Depends, HTTPException
+from fastapi import APIRouter, Depends, HTTPException, Request
 from fastapi.responses import StreamingResponse
 from sqlalchemy.orm import Session
 from sqlalchemy import func, and_, or_
@@ -13,9 +13,11 @@ from openpyxl.drawing.image import Image as XLImage
 import os
 
 from database.database import get_db
-from database.models import Issue, DailyWork, IssueStatus, IssueCategory, User, UserRole, Project, ReviewStatus
+from database.models import Issue, DailyWork, IssueStatus, IssueCategory, User, UserRole, ReviewStatus
 from database import schemas
 from routers.auth import get_current_user
+from utils.tkuser_client import get_token_from_request
+import utils.tkuser_client as tkuser_client
 
 router = APIRouter(prefix="/api/reports", tags=["reports"])
 
@@ -140,6 +142,7 @@ async def get_report_daily_works(
 @router.get("/daily-preview")
 async def preview_daily_report(
     project_id: int,
+    request: Request,
     current_user: User = Depends(get_current_user),
     db: Session = Depends(get_db)
 ):
@@ -149,8 +152,9 @@ async def preview_daily_report(
     if current_user.role != UserRole.admin:
         raise HTTPException(status_code=403, detail="품질팀만 접근 가능합니다")
 
-    # 프로젝트 확인
-    project = db.query(Project).filter(Project.id == project_id).first()
+    # 프로젝트 확인 (tkuser API)
+    token = get_token_from_request(request)
+    project = await tkuser_client.get_project(token, project_id)
     if not project:
         raise HTTPException(status_code=404, detail="프로젝트를 찾을 수 없습니다")
 
@@ -178,7 +182,7 @@ async def preview_daily_report(
     issues_data = [schemas.Issue.from_orm(issue) for issue in issues]
 
     return {
-        "project": schemas.Project.from_orm(project),
+        "project": project,
         "stats": stats,
         "issues": issues_data,
         "total_issues": len(issues)
@@ -186,31 +190,33 @@ async def preview_daily_report(
 
 @router.post("/daily-export")
 async def export_daily_report(
-    request: schemas.DailyReportRequest,
+    report_req: schemas.DailyReportRequest,
+    request: Request,
     current_user: User = Depends(get_current_user),
     db: Session = Depends(get_db)
 ):
     """품질팀용 일일보고서 엑셀 내보내기"""
-    
+
     # 권한 확인 (품질팀만 접근 가능)
     if current_user.role != UserRole.admin:
         raise HTTPException(status_code=403, detail="품질팀만 접근 가능합니다")
-    
-    # 프로젝트 확인
-    project = db.query(Project).filter(Project.id == request.project_id).first()
+
+    # 프로젝트 확인 (tkuser API)
+    token = get_token_from_request(request)
+    project = await tkuser_client.get_project(token, report_req.project_id)
     if not project:
         raise HTTPException(status_code=404, detail="프로젝트를 찾을 수 없습니다")
     
     # 관리함 데이터 조회
     # 1. 진행 중인 항목 (모두 포함)
     in_progress_only = db.query(Issue).filter(
-        Issue.project_id == request.project_id,
+        Issue.project_id == report_req.project_id,
         Issue.review_status == ReviewStatus.in_progress
     ).all()
 
     # 2. 완료된 항목 (모두 조회)
     all_completed = db.query(Issue).filter(
-        Issue.project_id == request.project_id,
+        Issue.project_id == report_req.project_id,
         Issue.review_status == ReviewStatus.completed
     ).all()
 
@@ -307,7 +313,7 @@ async def export_daily_report(
     for ws, sheet_issues, sheet_title in sheets_data:
         # 제목 및 기본 정보
         ws.merge_cells('A1:L1')
-        ws['A1'] = f"{project.project_name} - {sheet_title}"
+        ws['A1'] = f"{project['project_name']} - {sheet_title}"
         ws['A1'].font = Font(bold=True, size=16)
         ws['A1'].alignment = center_alignment
 
@@ -725,7 +731,7 @@ async def export_daily_report(
 
     # 파일명 생성
     today = date.today().strftime('%Y%m%d')
-    filename = f"{project.project_name}_일일보고서_{today}.xlsx"
+    filename = f"{project['project_name']}_일일보고서_{today}.xlsx"
 
     # 한글 파일명을 위한 URL 인코딩
     from urllib.parse import quote
diff --git a/system3-nonconformance/api/services/auth_service.py b/system3-nonconformance/api/services/auth_service.py
index 8f710cd..5c0d598 100644
--- a/system3-nonconformance/api/services/auth_service.py
+++ b/system3-nonconformance/api/services/auth_service.py
@@ -75,21 +75,11 @@ def authenticate_user(db: Session, username: str, password: str):
     return user
 
 def create_admin_user(db: Session):
-    """초기 관리자 계정 생성"""
+    """관리자 계정 확인 (SSO에서 관리, 여기서는 조회만)"""
     admin_username = os.getenv("ADMIN_USERNAME", "hyungi")
-    admin_password = os.getenv("ADMIN_PASSWORD", "djg3-jj34-X3Q3")
 
     existing_admin = db.query(User).filter(User.username == admin_username).first()
-    if not existing_admin:
-        admin_user = User(
-            username=admin_username,
-            hashed_password=get_password_hash(admin_password),
-            full_name="관리자",
-            role=UserRole.admin,
-            is_active=True
-        )
-        db.add(admin_user)
-        db.commit()
-        print(f"관리자 계정 생성됨: {admin_username}")
+    if existing_admin:
+        print(f"관리자 계정 확인됨: {admin_username} (role: {existing_admin.role.value})")
     else:
-        print(f"관리자 계정이 이미 존재함: {admin_username}")
+        print(f"경고: 관리자 계정이 sso_users에 없습니다: {admin_username}")
diff --git a/system3-nonconformance/api/utils/__init__.py b/system3-nonconformance/api/utils/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/system3-nonconformance/api/utils/tkuser_client.py b/system3-nonconformance/api/utils/tkuser_client.py
new file mode 100644
index 0000000..14d5779
--- /dev/null
+++ b/system3-nonconformance/api/utils/tkuser_client.py
@@ -0,0 +1,106 @@
+import httpx
+import os
+from fastapi import HTTPException, Request
+
+TKUSER_API_URL = os.getenv("TKUSER_API_URL", "http://tkuser-api:3000")
+
+
+def get_token_from_request(request: Request) -> str:
+    """Request 헤더에서 Bearer 토큰 추출"""
+    auth = request.headers.get("Authorization", "")
+    if auth.startswith("Bearer "):
+        return auth[7:]
+    return request.cookies.get("sso_token", "")
+
+
+def _headers(token: str) -> dict:
+    if not token:
+        raise HTTPException(status_code=401, detail="인증 토큰이 필요합니다.")
+    return {"Authorization": f"Bearer {token}"}
+
+
+def _map_project(data: dict) -> dict:
+    """tkuser API 응답을 S3 프론트엔드 형식으로 매핑 (project_id → id)"""
+    return {
+        "id": data.get("project_id"),
+        "job_no": data.get("job_no"),
+        "project_name": data.get("project_name"),
+        "is_active": data.get("is_active", True),
+        "created_at": data.get("created_at"),
+    }
+
+
+async def get_projects(token: str, active_only: bool = True) -> list:
+    """프로젝트 목록 조회"""
+    endpoint = "/api/projects/active" if active_only else "/api/projects"
+    async with httpx.AsyncClient(timeout=10.0) as client:
+        resp = await client.get(f"{TKUSER_API_URL}{endpoint}", headers=_headers(token))
+        if resp.status_code != 200:
+            raise HTTPException(status_code=resp.status_code, detail="프로젝트 목록 조회 실패")
+        body = resp.json()
+        if not body.get("success"):
+            raise HTTPException(status_code=500, detail=body.get("error", "알 수 없는 오류"))
+        return [_map_project(p) for p in body.get("data", [])]
+
+
+async def get_project(token: str, project_id: int) -> dict | None:
+    """특정 프로젝트 조회. 없으면 None 반환"""
+    async with httpx.AsyncClient(timeout=10.0) as client:
+        resp = await client.get(
+            f"{TKUSER_API_URL}/api/projects/{project_id}", headers=_headers(token)
+        )
+        if resp.status_code == 404:
+            return None
+        if resp.status_code != 200:
+            raise HTTPException(status_code=resp.status_code, detail="프로젝트 조회 실패")
+        body = resp.json()
+        if not body.get("success"):
+            raise HTTPException(status_code=500, detail=body.get("error", "알 수 없는 오류"))
+        return _map_project(body.get("data"))
+
+
+async def create_project(token: str, data: dict) -> dict:
+    """프로젝트 생성"""
+    async with httpx.AsyncClient(timeout=10.0) as client:
+        resp = await client.post(
+            f"{TKUSER_API_URL}/api/projects", headers=_headers(token), json=data
+        )
+        if resp.status_code == 409:
+            raise HTTPException(status_code=400, detail="이미 존재하는 Job No.입니다.")
+        if resp.status_code not in (200, 201):
+            raise HTTPException(status_code=resp.status_code, detail="프로젝트 생성 실패")
+        body = resp.json()
+        if not body.get("success"):
+            raise HTTPException(status_code=500, detail=body.get("error", "알 수 없는 오류"))
+        return _map_project(body.get("data"))
+
+
+async def update_project(token: str, project_id: int, data: dict) -> dict:
+    """프로젝트 수정"""
+    async with httpx.AsyncClient(timeout=10.0) as client:
+        resp = await client.put(
+            f"{TKUSER_API_URL}/api/projects/{project_id}",
+            headers=_headers(token),
+            json=data,
+        )
+        if resp.status_code == 404:
+            raise HTTPException(status_code=404, detail="프로젝트를 찾을 수 없습니다.")
+        if resp.status_code != 200:
+            raise HTTPException(status_code=resp.status_code, detail="프로젝트 수정 실패")
+        body = resp.json()
+        if not body.get("success"):
+            raise HTTPException(status_code=500, detail=body.get("error", "알 수 없는 오류"))
+        return _map_project(body.get("data"))
+
+
+async def delete_project(token: str, project_id: int) -> dict:
+    """프로젝트 삭제 (비활성화)"""
+    async with httpx.AsyncClient(timeout=10.0) as client:
+        resp = await client.delete(
+            f"{TKUSER_API_URL}/api/projects/{project_id}", headers=_headers(token)
+        )
+        if resp.status_code == 404:
+            raise HTTPException(status_code=404, detail="프로젝트를 찾을 수 없습니다.")
+        if resp.status_code != 200:
+            raise HTTPException(status_code=resp.status_code, detail="프로젝트 삭제 실패")
+        return resp.json()
diff --git a/system3-nonconformance/web/daily-work.html b/system3-nonconformance/web/daily-work.html
index 0b5d5e8..2602895 100644
--- a/system3-nonconformance/web/daily-work.html
+++ b/system3-nonconformance/web/daily-work.html
@@ -339,7 +339,7 @@
         async function loadProjects() {
             try {
                 // API에서 최신 프로젝트 데이터 가져오기
-                const apiUrl = window.API_BASE_URL || 'http://localhost:16080/api';
+                const apiUrl = window.API_BASE_URL || '/api';
                 const response = await fetch(`${apiUrl}/projects/`, {
                     headers: {
                         'Authorization': `Bearer ${TokenManager.getToken()}`,
diff --git a/system3-nonconformance/web/issues-archive.html b/system3-nonconformance/web/issues-archive.html
index d8cf057..e708223 100644
--- a/system3-nonconformance/web/issues-archive.html
+++ b/system3-nonconformance/web/issues-archive.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>폐기함 - 작업보고서</title>
+    <title>폐기함 - 부적합 관리</title>
     
     <!-- Tailwind CSS -->
     <script src="https://cdn.tailwindcss.com"></script>
@@ -91,39 +91,39 @@
             
             <!-- 아카이브 통계 -->
             <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
-                <div class="bg-green-50 p-4 rounded-lg">
+                <div class="bg-white p-4 rounded-lg border-l-4" style="border-left-color: #16a34a;">
                     <div class="flex items-center">
-                        <i class="fas fa-check-circle text-green-500 text-xl mr-3"></i>
+                        <i class="fas fa-check-circle text-green-400 text-xl mr-3"></i>
                         <div>
-                            <p class="text-sm text-green-600">완료</p>
-                            <p class="text-2xl font-bold text-green-700" id="completedCount">0</p>
+                            <p class="text-sm text-slate-500">완료</p>
+                            <p class="text-2xl font-bold text-slate-800" id="completedCount">0</p>
                         </div>
                     </div>
                 </div>
-                <div class="bg-gray-50 p-4 rounded-lg">
+                <div class="bg-white p-4 rounded-lg border-l-4" style="border-left-color: #475569;">
                     <div class="flex items-center">
-                        <i class="fas fa-archive text-gray-500 text-xl mr-3"></i>
+                        <i class="fas fa-archive text-slate-400 text-xl mr-3"></i>
                         <div>
-                            <p class="text-sm text-gray-600">보관</p>
-                            <p class="text-2xl font-bold text-gray-700" id="archivedCount">0</p>
+                            <p class="text-sm text-slate-500">보관</p>
+                            <p class="text-2xl font-bold text-slate-800" id="archivedCount">0</p>
                         </div>
                     </div>
                 </div>
-                <div class="bg-red-50 p-4 rounded-lg">
+                <div class="bg-white p-4 rounded-lg border-l-4" style="border-left-color: #dc2626;">
                     <div class="flex items-center">
-                        <i class="fas fa-times-circle text-red-500 text-xl mr-3"></i>
+                        <i class="fas fa-times-circle text-red-400 text-xl mr-3"></i>
                         <div>
-                            <p class="text-sm text-red-600">취소</p>
-                            <p class="text-2xl font-bold text-red-700" id="cancelledCount">0</p>
+                            <p class="text-sm text-slate-500">취소</p>
+                            <p class="text-2xl font-bold text-slate-800" id="cancelledCount">0</p>
                         </div>
                     </div>
                 </div>
-                <div class="bg-purple-50 p-4 rounded-lg">
+                <div class="bg-white p-4 rounded-lg border-l-4" style="border-left-color: #7c3aed;">
                     <div class="flex items-center">
-                        <i class="fas fa-calendar-alt text-purple-500 text-xl mr-3"></i>
+                        <i class="fas fa-calendar-alt text-purple-400 text-xl mr-3"></i>
                         <div>
-                            <p class="text-sm text-purple-600">이번 달</p>
-                            <p class="text-2xl font-bold text-purple-700" id="thisMonthCount">0</p>
+                            <p class="text-sm text-slate-500">이번 달</p>
+                            <p class="text-2xl font-bold text-slate-800" id="thisMonthCount">0</p>
                         </div>
                     </div>
                 </div>
@@ -287,7 +287,7 @@
         // 프로젝트 로드
         async function loadProjects() {
             try {
-                const apiUrl = window.API_BASE_URL || 'http://localhost:16080/api';
+                const apiUrl = window.API_BASE_URL || '/api';
                 const response = await fetch(`${apiUrl}/projects/`, {
                     headers: {
                         'Authorization': `Bearer ${TokenManager.getToken()}`,
diff --git a/system3-nonconformance/web/issues-dashboard.html b/system3-nonconformance/web/issues-dashboard.html
index d38c331..01ba01e 100644
--- a/system3-nonconformance/web/issues-dashboard.html
+++ b/system3-nonconformance/web/issues-dashboard.html
@@ -18,29 +18,27 @@
         
         /* 대시보드 카드 스타일 */
         .dashboard-card {
-            transition: all 0.3s ease;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            transition: all 0.2s ease;
+            background: #ffffff;
+            border-left: 4px solid #64748b;
         }
-        
+
         .dashboard-card:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
         }
         
-        /* 이슈 카드 스타일 (세련된 모던 스타일) */
+        /* 이슈 카드 스타일 */
         .issue-card {
-            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            transition: all 0.2s ease;
             border-left: 4px solid transparent;
-            background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
+            background: #ffffff;
         }
-        
+
         .issue-card:hover {
-            transform: translateY(-8px) scale(1.02);
-            border-left-color: #3b82f6;
-            box-shadow: 
-                0 25px 50px -12px rgba(0, 0, 0, 0.15),
-                0 0 0 1px rgba(59, 130, 246, 0.1),
-                0 0 20px rgba(59, 130, 246, 0.1);
+            transform: translateY(-2px);
+            border-left-color: #475569;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
         }
         
         .issue-card label {
@@ -92,7 +90,7 @@
         }
         
         .progress-bar {
-            background: linear-gradient(90deg, #10b981 0%, #059669 100%);
+            background: #475569;
             transition: width 0.8s ease;
         }
         
@@ -155,55 +153,43 @@
 
             <!-- 전체 통계 대시보드 -->
             <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
-                <div class="dashboard-card text-white p-6 rounded-xl">
+                <div class="dashboard-card p-6 rounded-xl shadow-sm" style="border-left-color: #475569;">
                     <div class="flex items-center justify-between">
                         <div>
-                            <p class="text-blue-100 text-sm flex items-center space-x-1">
-                                <span>전체 진행 중</span>
-                                <div class="w-1.5 h-1.5 bg-blue-200 rounded-full animate-pulse"></div>
-                            </p>
-                            <p class="text-3xl font-bold" id="totalInProgress">0</p>
+                            <p class="text-sm text-slate-500">전체 진행 중</p>
+                            <p class="text-3xl font-bold text-slate-800" id="totalInProgress">0</p>
                         </div>
-                        <i class="fas fa-tasks text-4xl text-blue-200"></i>
+                        <i class="fas fa-tasks text-3xl text-slate-300"></i>
                     </div>
                 </div>
-                
-                <div class="bg-gradient-to-br from-green-400 to-green-600 text-white p-6 rounded-xl dashboard-card">
+
+                <div class="dashboard-card p-6 rounded-xl shadow-sm" style="border-left-color: #16a34a;">
                     <div class="flex items-center justify-between">
                         <div>
-                            <p class="text-green-100 text-sm flex items-center space-x-1">
-                                <span>오늘 신규</span>
-                                <div class="w-1.5 h-1.5 bg-green-200 rounded-full animate-pulse"></div>
-                            </p>
-                            <p class="text-3xl font-bold" id="todayNew">0</p>
+                            <p class="text-sm text-slate-500">오늘 신규</p>
+                            <p class="text-3xl font-bold text-slate-800" id="todayNew">0</p>
                         </div>
-                        <i class="fas fa-plus-circle text-4xl text-green-200"></i>
+                        <i class="fas fa-plus-circle text-3xl text-green-300"></i>
                     </div>
                 </div>
-                
-                <div class="bg-gradient-to-br from-purple-400 to-purple-600 text-white p-6 rounded-xl dashboard-card">
+
+                <div class="dashboard-card p-6 rounded-xl shadow-sm" style="border-left-color: #7c3aed;">
                     <div class="flex items-center justify-between">
                         <div>
-                            <p class="text-purple-100 text-sm flex items-center space-x-1">
-                                <span>완료 대기</span>
-                                <div class="w-1.5 h-1.5 bg-purple-200 rounded-full animate-pulse"></div>
-                            </p>
-                            <p class="text-3xl font-bold" id="pendingCompletion">0</p>
+                            <p class="text-sm text-slate-500">완료 대기</p>
+                            <p class="text-3xl font-bold text-slate-800" id="pendingCompletion">0</p>
                         </div>
-                        <i class="fas fa-hourglass-half text-4xl text-purple-200"></i>
+                        <i class="fas fa-hourglass-half text-3xl text-purple-300"></i>
                     </div>
                 </div>
-                
-                <div class="bg-gradient-to-br from-red-400 to-red-600 text-white p-6 rounded-xl dashboard-card">
+
+                <div class="dashboard-card p-6 rounded-xl shadow-sm" style="border-left-color: #dc2626;">
                     <div class="flex items-center justify-between">
                         <div>
-                            <p class="text-red-100 text-sm flex items-center space-x-1">
-                                <span>지연 중</span>
-                                <div class="w-1.5 h-1.5 bg-red-200 rounded-full animate-pulse"></div>
-                            </p>
-                            <p class="text-3xl font-bold" id="overdue">0</p>
+                            <p class="text-sm text-slate-500">지연 중</p>
+                            <p class="text-3xl font-bold text-slate-800" id="overdue">0</p>
                         </div>
-                        <i class="fas fa-clock text-4xl text-red-200"></i>
+                        <i class="fas fa-clock text-3xl text-red-300"></i>
                     </div>
                 </div>
             </div>
@@ -323,7 +309,7 @@
         // 데이터 로드 함수들
         async function loadProjects() {
             try {
-                const apiUrl = window.API_BASE_URL || 'http://localhost:16080/api';
+                const apiUrl = window.API_BASE_URL || '/api';
                 const response = await fetch(`${apiUrl}/projects/`, {
                     headers: {
                         'Authorization': `Bearer ${TokenManager.getToken()}`,
diff --git a/system3-nonconformance/web/issues-inbox.html b/system3-nonconformance/web/issues-inbox.html
index ba97966..e2530a5 100644
--- a/system3-nonconformance/web/issues-inbox.html
+++ b/system3-nonconformance/web/issues-inbox.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>수신함 - 작업보고서</title>
+    <title>수신함 - 부적합 관리</title>
     
     <!-- Tailwind CSS -->
     <script src="https://cdn.tailwindcss.com"></script>
@@ -200,30 +200,30 @@
             
             <!-- 통계 카드 -->
             <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-                <div class="bg-yellow-50 p-4 rounded-lg">
+                <div class="bg-white p-4 rounded-lg border-l-4" style="border-left-color: #d97706;">
                     <div class="flex items-center">
-                        <i class="fas fa-plus-circle text-yellow-500 text-xl mr-3"></i>
+                        <i class="fas fa-plus-circle text-amber-400 text-xl mr-3"></i>
                         <div>
-                            <p class="text-sm text-yellow-600">금일 신규</p>
-                            <p class="text-2xl font-bold text-yellow-700" id="todayNewCount">0</p>
+                            <p class="text-sm text-slate-500">금일 신규</p>
+                            <p class="text-2xl font-bold text-slate-800" id="todayNewCount">0</p>
                         </div>
                     </div>
                 </div>
-                <div class="bg-green-50 p-4 rounded-lg">
+                <div class="bg-white p-4 rounded-lg border-l-4" style="border-left-color: #16a34a;">
                     <div class="flex items-center">
-                        <i class="fas fa-check-circle text-green-500 text-xl mr-3"></i>
+                        <i class="fas fa-check-circle text-green-400 text-xl mr-3"></i>
                         <div>
-                            <p class="text-sm text-green-600">금일 처리</p>
-                            <p class="text-2xl font-bold text-green-700" id="todayProcessedCount">0</p>
+                            <p class="text-sm text-slate-500">금일 처리</p>
+                            <p class="text-2xl font-bold text-slate-800" id="todayProcessedCount">0</p>
                         </div>
                     </div>
                 </div>
-                <div class="bg-red-50 p-4 rounded-lg">
+                <div class="bg-white p-4 rounded-lg border-l-4" style="border-left-color: #dc2626;">
                     <div class="flex items-center">
-                        <i class="fas fa-exclamation-triangle text-red-500 text-xl mr-3"></i>
+                        <i class="fas fa-exclamation-triangle text-red-400 text-xl mr-3"></i>
                         <div>
-                            <p class="text-sm text-red-600">미해결</p>
-                            <p class="text-2xl font-bold text-red-700" id="unresolvedCount">0</p>
+                            <p class="text-sm text-slate-500">미해결</p>
+                            <p class="text-2xl font-bold text-slate-800" id="unresolvedCount">0</p>
                         </div>
                     </div>
                 </div>
@@ -668,7 +668,7 @@
         async function loadProjects() {
             console.log('🔄 프로젝트 로드 시작');
             try {
-                const apiUrl = window.API_BASE_URL || 'http://localhost:16080/api';
+                const apiUrl = window.API_BASE_URL || '/api';
                 const response = await fetch(`${apiUrl}/projects/`, {
                     headers: {
                         'Authorization': `Bearer ${TokenManager.getToken()}`,
diff --git a/system3-nonconformance/web/issues-management.html b/system3-nonconformance/web/issues-management.html
index e3eb853..ceea6bb 100644
--- a/system3-nonconformance/web/issues-management.html
+++ b/system3-nonconformance/web/issues-management.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>관리함 - 작업보고서</title>
+    <title>관리함 - 부적합 관리</title>
     
     <!-- Tailwind CSS -->
     <script src="https://cdn.tailwindcss.com"></script>
@@ -273,39 +273,39 @@
                 
                 <!-- 프로젝트별 통계 -->
                 <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
-                    <div class="bg-gray-50 p-4 rounded-lg">
+                    <div class="bg-white p-4 rounded-lg border-l-4" style="border-left-color: #475569;">
                         <div class="flex items-center">
-                            <i class="fas fa-chart-bar text-gray-500 text-xl mr-3"></i>
+                            <i class="fas fa-chart-bar text-slate-400 text-xl mr-3"></i>
                             <div>
-                                <p class="text-sm text-gray-600">총 부적합</p>
-                                <p class="text-2xl font-bold text-gray-700" id="totalCount">0</p>
+                                <p class="text-sm text-slate-500">총 부적합</p>
+                                <p class="text-2xl font-bold text-slate-800" id="totalCount">0</p>
                             </div>
                         </div>
                     </div>
-                    <div class="bg-blue-50 p-4 rounded-lg">
+                    <div class="bg-white p-4 rounded-lg border-l-4" style="border-left-color: #2563eb;">
                         <div class="flex items-center">
-                            <i class="fas fa-cog text-blue-500 text-xl mr-3"></i>
+                            <i class="fas fa-cog text-blue-400 text-xl mr-3"></i>
                             <div>
-                                <p class="text-sm text-blue-600">진행 중</p>
-                                <p class="text-2xl font-bold text-blue-700" id="inProgressCount">0</p>
+                                <p class="text-sm text-slate-500">진행 중</p>
+                                <p class="text-2xl font-bold text-slate-800" id="inProgressCount">0</p>
                             </div>
                         </div>
                     </div>
-                    <div class="bg-purple-50 p-4 rounded-lg">
+                    <div class="bg-white p-4 rounded-lg border-l-4" style="border-left-color: #7c3aed;">
                         <div class="flex items-center">
-                            <i class="fas fa-hourglass-half text-purple-500 text-xl mr-3"></i>
+                            <i class="fas fa-hourglass-half text-purple-400 text-xl mr-3"></i>
                             <div>
-                                <p class="text-sm text-purple-600">완료 대기</p>
-                                <p class="text-2xl font-bold text-purple-700" id="pendingCompletionCount">0</p>
+                                <p class="text-sm text-slate-500">완료 대기</p>
+                                <p class="text-2xl font-bold text-slate-800" id="pendingCompletionCount">0</p>
                             </div>
                         </div>
                     </div>
-                    <div class="bg-green-50 p-4 rounded-lg">
+                    <div class="bg-white p-4 rounded-lg border-l-4" style="border-left-color: #16a34a;">
                         <div class="flex items-center">
-                            <i class="fas fa-check-circle text-green-500 text-xl mr-3"></i>
+                            <i class="fas fa-check-circle text-green-400 text-xl mr-3"></i>
                             <div>
-                                <p class="text-sm text-green-600">완료됨</p>
-                                <p class="text-2xl font-bold text-green-700" id="completedCount">0</p>
+                                <p class="text-sm text-slate-500">완료됨</p>
+                                <p class="text-2xl font-bold text-slate-800" id="completedCount">0</p>
                             </div>
                         </div>
                     </div>
@@ -472,7 +472,7 @@
         // 프로젝트 로드
         async function loadProjects() {
             try {
-                const apiUrl = window.API_BASE_URL || 'http://localhost:16080/api';
+                const apiUrl = window.API_BASE_URL || '/api';
                 const response = await fetch(`${apiUrl}/projects/`, {
                     headers: {
                         'Authorization': `Bearer ${TokenManager.getToken()}`,
diff --git a/system3-nonconformance/web/nginx.conf b/system3-nonconformance/web/nginx.conf
index 5ba6c08..a8a239f 100644
--- a/system3-nonconformance/web/nginx.conf
+++ b/system3-nonconformance/web/nginx.conf
@@ -5,7 +5,7 @@ server {
     client_max_body_size 10M;
 
     root /usr/share/nginx/html;
-    index index.html;
+    index issues-dashboard.html;
 
     # HTML 캐시 비활성화
     location ~* \.html$ {
@@ -46,6 +46,6 @@ server {
     }
 
     location / {
-        try_files $uri $uri/ /index.html;
+        try_files $uri $uri/ /issues-dashboard.html;
     }
 }
diff --git a/system3-nonconformance/web/reports-daily.html b/system3-nonconformance/web/reports-daily.html
index f1148df..8007d6e 100644
--- a/system3-nonconformance/web/reports-daily.html
+++ b/system3-nonconformance/web/reports-daily.html
@@ -234,7 +234,7 @@
         // 프로젝트 목록 로드
         async function loadProjects() {
             try {
-                const apiUrl = window.API_BASE_URL || 'http://localhost:16080/api';
+                const apiUrl = window.API_BASE_URL || '/api';
 
                 const response = await fetch(`${apiUrl}/projects/`, {
                     headers: {
@@ -302,7 +302,7 @@
             }
 
             try {
-                const apiUrl = window.API_BASE_URL || 'http://localhost:16080/api';
+                const apiUrl = window.API_BASE_URL || '/api';
                 const response = await fetch(`${apiUrl}/reports/daily-preview?project_id=${selectedProjectId}`, {
                     headers: {
                         'Authorization': `Bearer ${TokenManager.getToken()}`
@@ -427,7 +427,7 @@
                 button.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>생성 중...';
                 button.disabled = true;
 
-                const apiUrl = window.API_BASE_URL || 'http://localhost:16080/api';
+                const apiUrl = window.API_BASE_URL || '/api';
                 const response = await fetch(`${apiUrl}/reports/daily-export`, {
                     method: 'POST',
                     headers: {
diff --git a/system3-nonconformance/web/static/js/api.js b/system3-nonconformance/web/static/js/api.js
index f005b52..60afe72 100644
--- a/system3-nonconformance/web/static/js/api.js
+++ b/system3-nonconformance/web/static/js/api.js
@@ -41,6 +41,11 @@ const API_BASE_URL = (() => {
         return protocol + '//' + hostname + ':16080/api';
     }
 
+    // 통합 Docker 환경에서 직접 접근 (포트 30280)
+    if (port === '30280') {
+        return protocol + '//' + hostname + ':30200/api';
+    }
+
     // 기타 환경
     return '/api';
 })();
@@ -77,6 +82,10 @@ const TokenManager = {
     }
 };
 
+// 전역 노출 (permissions.js 등 다른 스크립트에서 접근)
+window.TokenManager = TokenManager;
+window.API_BASE_URL = API_BASE_URL;
+
 // API 요청 헬퍼
 async function apiRequest(endpoint, options = {}) {
     const token = TokenManager.getToken();
diff --git a/system3-nonconformance/web/static/js/components/common-header.js b/system3-nonconformance/web/static/js/components/common-header.js
index 7e9a111..2dc199e 100644
--- a/system3-nonconformance/web/static/js/components/common-header.js
+++ b/system3-nonconformance/web/static/js/components/common-header.js
@@ -10,81 +10,66 @@ class CommonHeader {
         this.menuItems = this.initMenuItems();
     }
 
+    /**
+     * 사용자 관리 URL (tkuser 서브도메인 또는 로컬 포트)
+     */
+    _getUserManageUrl() {
+        const hostname = window.location.hostname;
+        if (hostname.includes('technicalkorea.net')) {
+            return window.location.protocol + '//tkuser.technicalkorea.net';
+        }
+        return window.location.protocol + '//' + hostname + ':30380';
+    }
+
     /**
      * 메뉴 아이템 정의
      */
     initMenuItems() {
         return [
-            {
-                id: 'daily_work',
-                title: '일일 공수',
-                icon: 'fas fa-calendar-check',
-                url: '/daily-work.html',
-                pageName: 'daily_work',
-                color: 'text-blue-600',
-                bgColor: 'bg-blue-50 hover:bg-blue-100'
-            },
-            {
-                id: 'issues_create',
-                title: '부적합 등록',
-                icon: 'fas fa-plus-circle',
-                url: '/index.html',
-                pageName: 'issues_create',
-                color: 'text-green-600',
-                bgColor: 'bg-green-50 hover:bg-green-100'
-            },
-            {
-                id: 'issues_view',
-                title: '신고내용조회',
-                icon: 'fas fa-search',
-                url: '/issue-view.html',
-                pageName: 'issues_view',
-                color: 'text-purple-600',
-                bgColor: 'bg-purple-50 hover:bg-purple-100'
-            },
-            {
-                id: 'issues_manage',
-                title: '목록 관리',
-                icon: 'fas fa-tasks',
-                url: '/index.html#list',
-                pageName: 'issues_manage',
-                color: 'text-orange-600',
-                bgColor: 'bg-orange-50 hover:bg-orange-100',
-                subMenus: [
-                    {
-                        id: 'issues_inbox',
-                        title: '수신함',
-                        icon: 'fas fa-inbox',
-                        url: '/issues-inbox.html',
-                        pageName: 'issues_inbox',
-                        color: 'text-blue-600'
-                    },
-                    {
-                        id: 'issues_management',
-                        title: '관리함',
-                        icon: 'fas fa-cog',
-                        url: '/issues-management.html',
-                        pageName: 'issues_management',
-                        color: 'text-green-600'
-                    },
-                    {
-                        id: 'issues_archive',
-                        title: '폐기함',
-                        icon: 'fas fa-archive',
-                        url: '/issues-archive.html',
-                        pageName: 'issues_archive',
-                        color: 'text-gray-600'
-                    }
-                ]
-            },
             {
                 id: 'issues_dashboard',
                 title: '현황판',
                 icon: 'fas fa-chart-line',
                 url: '/issues-dashboard.html',
                 pageName: 'issues_dashboard',
-                color: 'text-purple-600',
-                bgColor: 'bg-purple-50 hover:bg-purple-100'
+                color: 'text-slate-600',
+                bgColor: 'text-slate-600 hover:bg-slate-100'
+            },
+            {
+                id: 'issues_inbox',
+                title: '수신함',
+                icon: 'fas fa-inbox',
+                url: '/issues-inbox.html',
+                pageName: 'issues_inbox',
+                color: 'text-slate-600',
+                bgColor: 'text-slate-600 hover:bg-slate-100'
+            },
+            {
+                id: 'issues_management',
+                title: '관리함',
+                icon: 'fas fa-cog',
+                url: '/issues-management.html',
+                pageName: 'issues_management',
+                color: 'text-slate-600',
+                bgColor: 'text-slate-600 hover:bg-slate-100'
+            },
+            {
+                id: 'issues_archive',
+                title: '폐기함',
+                icon: 'fas fa-archive',
+                url: '/issues-archive.html',
+                pageName: 'issues_archive',
+                color: 'text-slate-600',
+                bgColor: 'text-slate-600 hover:bg-slate-100'
+            },
+            {
+                id: 'daily_work',
+                title: '일일 공수',
+                icon: 'fas fa-calendar-check',
+                url: '/daily-work.html',
+                pageName: 'daily_work',
+                color: 'text-slate-600',
+                bgColor: 'text-slate-600 hover:bg-slate-100'
             },
             {
                 id: 'reports',
@@ -92,8 +77,8 @@ class CommonHeader {
                 icon: 'fas fa-chart-bar',
                 url: '/reports.html',
                 pageName: 'reports',
-                color: 'text-red-600',
-                bgColor: 'bg-red-50 hover:bg-red-100',
+                color: 'text-slate-600',
+                bgColor: 'text-slate-600 hover:bg-slate-100',
                 subMenus: [
                     {
                         id: 'reports_daily',
@@ -101,7 +86,7 @@ class CommonHeader {
                         icon: 'fas fa-file-excel',
                         url: '/reports-daily.html',
                         pageName: 'reports_daily',
-                        color: 'text-green-600'
+                        color: 'text-slate-600'
                     },
                     {
                         id: 'reports_weekly',
@@ -109,7 +94,7 @@ class CommonHeader {
                         icon: 'fas fa-calendar-week',
                         url: '/reports-weekly.html',
                         pageName: 'reports_weekly',
-                        color: 'text-blue-600'
+                        color: 'text-slate-600'
                     },
                     {
                         id: 'reports_monthly',
@@ -117,7 +102,7 @@ class CommonHeader {
                         icon: 'fas fa-calendar-alt',
                         url: '/reports-monthly.html',
                         pageName: 'reports_monthly',
-                        color: 'text-purple-600'
+                        color: 'text-slate-600'
                     }
                 ]
             },
@@ -127,17 +112,18 @@ class CommonHeader {
                 icon: 'fas fa-folder-open',
                 url: '/project-management.html',
                 pageName: 'projects_manage',
-                color: 'text-indigo-600',
-                bgColor: 'bg-indigo-50 hover:bg-indigo-100'
+                color: 'text-slate-600',
+                bgColor: 'text-slate-600 hover:bg-slate-100'
             },
             {
                 id: 'users_manage',
                 title: '사용자 관리',
                 icon: 'fas fa-users-cog',
-                url: '/admin.html',
+                url: this._getUserManageUrl(),
                 pageName: 'users_manage',
-                color: 'text-gray-600',
-                bgColor: 'bg-gray-50 hover:bg-gray-100'
+                color: 'text-slate-600',
+                bgColor: 'text-slate-600 hover:bg-slate-100',
+                external: true
             }
         ];
     }
@@ -225,8 +211,8 @@ class CommonHeader {
                         <!-- 로고 및 제목 -->
                         <div class="flex items-center">
                             <div class="flex-shrink-0 flex items-center">
-                                <i class="fas fa-clipboard-check text-2xl text-blue-600 mr-3"></i>
-                                <h1 class="text-xl font-bold text-gray-900">작업보고서</h1>
+                                <i class="fas fa-shield-halved text-2xl text-slate-700 mr-3"></i>
+                                <h1 class="text-xl font-bold text-gray-900">부적합 관리</h1>
                             </div>
                         </div>
 
@@ -243,7 +229,7 @@ class CommonHeader {
                                     <div class="text-sm font-medium text-gray-900">${userDisplayName}</div>
                                     <div class="text-xs text-gray-500">${userRole}</div>
                                 </div>
-                                <div class="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center">
+                                <div class="w-8 h-8 bg-slate-600 rounded-full flex items-center justify-center">
                                     <span class="text-white text-sm font-semibold">
                                         ${userDisplayName.charAt(0).toUpperCase()}
                                     </span>
@@ -299,7 +285,7 @@ class CommonHeader {
             
             // 권한 시스템이 로드되지 않았으면 기본 메뉴만
             if (!window.canAccessPage) {
-                return ['issues_create', 'issues_view'].includes(menu.id);
+                return ['issues_dashboard', 'issues_inbox'].includes(menu.id);
             }
             
             // 메인 메뉴 권한 체크
@@ -324,8 +310,8 @@ class CommonHeader {
      */
     generateMenuItemHTML(menu) {
         const isActive = this.currentPage === menu.id;
-        const activeClass = isActive ? 'bg-blue-100 text-blue-700' : `${menu.bgColor} ${menu.color}`;
-        
+        const activeClass = isActive ? 'bg-slate-700 text-white' : `${menu.bgColor} ${menu.color}`;
+
         // 하위 메뉴가 있는 경우 드롭다운 메뉴 생성
         if (menu.accessibleSubMenus && menu.accessibleSubMenus.length > 0) {
             return `
@@ -342,7 +328,7 @@ class CommonHeader {
                         <div class="py-1">
                             ${menu.accessibleSubMenus.map(subMenu => `
                                 <a href="${subMenu.url}" 
-                                   class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 ${this.currentPage === subMenu.id ? 'bg-blue-50 text-blue-700' : ''}"
+                                   class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-slate-100 ${this.currentPage === subMenu.id ? 'bg-slate-100 text-slate-800 font-medium' : ''}"
                                    data-page="${subMenu.id}"
                                    onclick="CommonHeader.navigateToPage(event, '${subMenu.url}', '${subMenu.id}')">
                                     <i class="${subMenu.icon} mr-3 ${subMenu.color}"></i>
@@ -355,9 +341,21 @@ class CommonHeader {
             `;
         }
         
+        // 외부 링크 (tkuser 등)
+        if (menu.external) {
+            return `
+                <a href="${menu.url}"
+                   class="nav-item flex items-center px-3 py-2 rounded-md text-sm font-medium transition-all duration-200 ${activeClass}"
+                   data-page="${menu.id}">
+                    <i class="${menu.icon} mr-2"></i>
+                    ${menu.title}
+                </a>
+            `;
+        }
+
         // 일반 메뉴 아이템
         return `
-            <a href="${menu.url}" 
+            <a href="${menu.url}"
                class="nav-item flex items-center px-3 py-2 rounded-md text-sm font-medium transition-all duration-200 ${activeClass}"
                data-page="${menu.id}"
                onclick="CommonHeader.navigateToPage(event, '${menu.url}', '${menu.id}')">
@@ -372,7 +370,7 @@ class CommonHeader {
      */
     generateMobileMenuItemHTML(menu) {
         const isActive = this.currentPage === menu.id;
-        const activeClass = isActive ? 'bg-blue-50 text-blue-700 border-blue-500' : 'text-gray-700 hover:bg-gray-50';
+        const activeClass = isActive ? 'bg-slate-100 text-slate-800 border-slate-600' : 'text-gray-700 hover:bg-gray-50';
         
         // 하위 메뉴가 있는 경우
         if (menu.accessibleSubMenus && menu.accessibleSubMenus.length > 0) {
@@ -392,7 +390,7 @@ class CommonHeader {
                     <div class="hidden ml-6 mt-1 space-y-1">
                         ${menu.accessibleSubMenus.map(subMenu => `
                             <a href="${subMenu.url}" 
-                               class="flex items-center px-3 py-2 rounded-md text-sm font-medium text-gray-600 hover:bg-gray-100 ${this.currentPage === subMenu.id ? 'bg-blue-50 text-blue-700' : ''}"
+                               class="flex items-center px-3 py-2 rounded-md text-sm font-medium text-gray-600 hover:bg-slate-100 ${this.currentPage === subMenu.id ? 'bg-slate-100 text-slate-800' : ''}"
                                data-page="${subMenu.id}"
                                onclick="CommonHeader.navigateToPage(event, '${subMenu.url}', '${subMenu.id}')">
                                 <i class="${subMenu.icon} mr-3 ${subMenu.color}"></i>
@@ -684,10 +682,11 @@ class CommonHeader {
         document.querySelectorAll('.nav-item').forEach(item => {
             const itemPageId = item.getAttribute('data-page');
             if (itemPageId === pageId) {
-                item.classList.add('bg-blue-100', 'text-blue-700');
-                item.classList.remove('bg-blue-50', 'hover:bg-blue-100');
+                item.classList.add('bg-slate-700', 'text-white');
+                item.classList.remove('text-slate-600', 'hover:bg-slate-100');
             } else {
-                item.classList.remove('bg-blue-100', 'text-blue-700');
+                item.classList.remove('bg-slate-700', 'text-white');
+                item.classList.add('text-slate-600');
             }
         });
     }
diff --git a/system3-nonconformance/web/static/js/core/page-manager.js b/system3-nonconformance/web/static/js/core/page-manager.js
index 2c6d2c1..0fc46e6 100644
--- a/system3-nonconformance/web/static/js/core/page-manager.js
+++ b/system3-nonconformance/web/static/js/core/page-manager.js
@@ -54,7 +54,7 @@ class PageManager {
     async checkAuthentication() {
         const token = localStorage.getItem('access_token');
         if (!token) {
-            window.location.href = '/index.html';
+            window.location.href = '/issues-dashboard.html';
             return null;
         }
 
@@ -69,7 +69,7 @@ class PageManager {
             console.error('인증 실패:', error);
             localStorage.removeItem('access_token');
             localStorage.removeItem('currentUser');
-            window.location.href = '/index.html';
+            window.location.href = '/issues-dashboard.html';
             return null;
         }
     }
@@ -117,7 +117,7 @@ class PageManager {
 
         // 권한 시스템이 로드되지 않았으면 기본 페이지만 허용
         if (!window.canAccessPage) {
-            return ['issues_create', 'issues_view'].includes(pageId);
+            return ['issues_dashboard', 'issues_inbox'].includes(pageId);
         }
 
         return window.canAccessPage(pageId);
@@ -130,11 +130,7 @@ class PageManager {
         alert('이 페이지에 접근할 권한이 없습니다.');
         
         // 기본적으로 접근 가능한 페이지로 이동
-        if (window.canAccessPage && window.canAccessPage('issues_view')) {
-            window.location.href = '/issue-view.html';
-        } else {
-            window.location.href = '/index.html';
-        }
+        window.location.href = '/issues-dashboard.html';
     }
 
     /**
@@ -250,7 +246,7 @@ class PageManager {
                             class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
                         다시 시도
                     </button>
-                    <button onclick="window.location.href='/index.html'" 
+                    <button onclick="window.location.href='/issues-dashboard.html'"
                             class="px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700">
                         홈으로
                     </button>
diff --git a/system3-nonconformance/web/static/js/core/permissions.js b/system3-nonconformance/web/static/js/core/permissions.js
index 663cb97..66a44ce 100644
--- a/system3-nonconformance/web/static/js/core/permissions.js
+++ b/system3-nonconformance/web/static/js/core/permissions.js
@@ -15,13 +15,11 @@ class PagePermissionManager {
      */
     initDefaultPages() {
         return {
-            'issues_create': { title: '부적합 등록', defaultAccess: true },
-            'issues_view': { title: '부적합 조회', defaultAccess: true },
+            'issues_dashboard': { title: '현황판', defaultAccess: true },
             'issues_manage': { title: '부적합 관리', defaultAccess: true },
             'issues_inbox': { title: '수신함', defaultAccess: true },
             'issues_management': { title: '관리함', defaultAccess: false },
             'issues_archive': { title: '폐기함', defaultAccess: false },
-            'issues_dashboard': { title: '현황판', defaultAccess: true },
             'projects_manage': { title: '프로젝트 관리', defaultAccess: false },
             'daily_work': { title: '일일 공수', defaultAccess: false },
             'reports': { title: '보고서', defaultAccess: false },
@@ -41,15 +39,32 @@ class PagePermissionManager {
     /**
      * 사용자별 페이지 권한 로드
      */
+    /**
+     * SSO 토큰 직접 읽기 (api.js 로딩 전에도 동작)
+     */
+    _getToken() {
+        // 1) window.TokenManager (api.js 로딩 완료 시)
+        if (window.TokenManager) return window.TokenManager.getToken();
+        // 2) SSO 쿠키 직접 읽기
+        const match = document.cookie.match(/(?:^|; )sso_token=([^;]*)/);
+        if (match) return decodeURIComponent(match[1]);
+        // 3) localStorage 폴백
+        return localStorage.getItem('sso_token') || localStorage.getItem('access_token');
+    }
+
     async loadPagePermissions() {
         if (!this.currentUser) return;
 
+        const userId = this.currentUser.id || this.currentUser.user_id;
+        if (!userId) return;
+
         try {
             // API에서 사용자별 페이지 권한 가져오기
-            const apiUrl = window.API_BASE_URL || 'http://localhost:16080/api';
-            const response = await fetch(`${apiUrl}/users/${this.currentUser.id}/page-permissions`, {
+            const apiUrl = window.API_BASE_URL || '/api';
+            const token = this._getToken();
+            const response = await fetch(`${apiUrl}/users/${userId}/page-permissions`, {
                 headers: {
-                    'Authorization': `Bearer ${localStorage.getItem('access_token')}`
+                    'Authorization': `Bearer ${token}`
                 }
             });
             
@@ -199,12 +214,12 @@ class PagePermissionManager {
         }
 
         try {
-            const apiUrl = window.API_BASE_URL || 'http://localhost:16080/api';
+            const apiUrl = window.API_BASE_URL || '/api';
             const response = await fetch(`${apiUrl}/page-permissions/grant`, {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
-                    'Authorization': `Bearer ${localStorage.getItem('access_token')}`
+                    'Authorization': `Bearer ${this._getToken()}`
                 },
                 body: JSON.stringify({
                     user_id: userId,
@@ -232,10 +247,10 @@ class PagePermissionManager {
      */
     async getUserPagePermissions(userId) {
         try {
-            const apiUrl = window.API_BASE_URL || 'http://localhost:16080/api';
+            const apiUrl = window.API_BASE_URL || '/api';
             const response = await fetch(`${apiUrl}/users/${userId}/page-permissions`, {
                 headers: {
-                    'Authorization': `Bearer ${localStorage.getItem('access_token')}`
+                    'Authorization': `Bearer ${this._getToken()}`
                 }
             });
 
diff --git a/system3-nonconformance/web/test_api.html b/system3-nonconformance/web/test_api.html
index 053f86a..b9c4ec6 100644
--- a/system3-nonconformance/web/test_api.html
+++ b/system3-nonconformance/web/test_api.html
@@ -18,7 +18,7 @@
                 formData.append('username', 'hyungi');
                 formData.append('password', '123456');
                 
-                const response = await fetch('http://localhost:16080/api/auth/login', {
+                const response = await fetch('/api/auth/login', {
                     method: 'POST',
                     headers: {
                         'Content-Type': 'application/x-www-form-urlencoded'
@@ -41,7 +41,7 @@
             }
 
             try {
-                const response = await fetch('http://localhost:16080/api/auth/users', {
+                const response = await fetch('/api/auth/users', {
                     headers: {
                         'Authorization': `Bearer ${token}`
                     }
diff --git a/user-management/api/Dockerfile b/user-management/api/Dockerfile
new file mode 100644
index 0000000..7f8276e
--- /dev/null
+++ b/user-management/api/Dockerfile
@@ -0,0 +1,18 @@
+FROM node:18-alpine
+
+WORKDIR /usr/src/app
+
+COPY package*.json ./
+RUN npm install --omit=dev
+
+COPY . .
+
+RUN chown -R node:node /usr/src/app
+USER node
+
+EXPOSE 3000
+
+HEALTHCHECK --interval=30s --timeout=3s --start-period=20s --retries=3 \
+  CMD node -e "require('http').get('http://localhost:3000/health', (res) => { process.exit(res.statusCode === 200 ? 0 : 1); })"
+
+CMD ["node", "index.js"]
diff --git a/user-management/api/controllers/departmentController.js b/user-management/api/controllers/departmentController.js
new file mode 100644
index 0000000..ebe7ad5
--- /dev/null
+++ b/user-management/api/controllers/departmentController.js
@@ -0,0 +1,66 @@
+/**
+ * Department Controller
+ *
+ * 부서 CRUD
+ */
+
+const departmentModel = require('../models/departmentModel');
+
+async function getAll(req, res, next) {
+  try {
+    const departments = await departmentModel.getAll();
+    res.json({ success: true, data: departments });
+  } catch (err) {
+    next(err);
+  }
+}
+
+async function getById(req, res, next) {
+  try {
+    const dept = await departmentModel.getById(parseInt(req.params.id));
+    if (!dept) {
+      return res.status(404).json({ success: false, error: '부서를 찾을 수 없습니다' });
+    }
+    res.json({ success: true, data: dept });
+  } catch (err) {
+    next(err);
+  }
+}
+
+async function create(req, res, next) {
+  try {
+    const { department_name } = req.body;
+    if (!department_name) {
+      return res.status(400).json({ success: false, error: '부서명은 필수입니다' });
+    }
+    const dept = await departmentModel.create(req.body);
+    res.status(201).json({ success: true, data: dept });
+  } catch (err) {
+    next(err);
+  }
+}
+
+async function update(req, res, next) {
+  try {
+    const id = parseInt(req.params.id);
+    const dept = await departmentModel.update(id, req.body);
+    if (!dept) {
+      return res.status(404).json({ success: false, error: '부서를 찾을 수 없습니다' });
+    }
+    res.json({ success: true, data: dept });
+  } catch (err) {
+    next(err);
+  }
+}
+
+async function remove(req, res, next) {
+  try {
+    const id = parseInt(req.params.id);
+    await departmentModel.deactivate(id);
+    res.json({ success: true, message: '부서가 비활성화되었습니다' });
+  } catch (err) {
+    next(err);
+  }
+}
+
+module.exports = { getAll, getById, create, update, remove };
diff --git a/user-management/api/controllers/equipmentController.js b/user-management/api/controllers/equipmentController.js
new file mode 100644
index 0000000..6cb71f2
--- /dev/null
+++ b/user-management/api/controllers/equipmentController.js
@@ -0,0 +1,141 @@
+/**
+ * Equipment Controller
+ *
+ * 설비 CRUD + 지도위치 + 사진
+ */
+
+const equipmentModel = require('../models/equipmentModel');
+const path = require('path');
+const fs = require('fs');
+
+// ==================== 기본 CRUD ====================
+
+async function getAll(req, res, next) {
+  try {
+    const filters = {};
+    if (req.query.workplace_id) filters.workplace_id = parseInt(req.query.workplace_id);
+    if (req.query.equipment_type) filters.equipment_type = req.query.equipment_type;
+    if (req.query.status) filters.status = req.query.status;
+    if (req.query.search) filters.search = req.query.search;
+    const equipments = await equipmentModel.getAll(filters);
+    res.json({ success: true, data: equipments });
+  } catch (err) { next(err); }
+}
+
+async function getById(req, res, next) {
+  try {
+    const eq = await equipmentModel.getById(parseInt(req.params.id));
+    if (!eq) return res.status(404).json({ success: false, error: '설비를 찾을 수 없습니다' });
+    res.json({ success: true, data: eq });
+  } catch (err) { next(err); }
+}
+
+async function getByWorkplace(req, res, next) {
+  try {
+    const equipments = await equipmentModel.getByWorkplace(parseInt(req.params.workplaceId));
+    res.json({ success: true, data: equipments });
+  } catch (err) { next(err); }
+}
+
+async function create(req, res, next) {
+  try {
+    const { equipment_code, equipment_name } = req.body;
+    if (!equipment_code || !equipment_name) return res.status(400).json({ success: false, error: '관리번호와 설비명은 필수입니다' });
+    const dup = await equipmentModel.checkDuplicateCode(equipment_code);
+    if (dup) return res.status(409).json({ success: false, error: '이미 존재하는 관리번호입니다' });
+    const eq = await equipmentModel.create(req.body);
+    res.status(201).json({ success: true, data: eq });
+  } catch (err) { next(err); }
+}
+
+async function update(req, res, next) {
+  try {
+    const id = parseInt(req.params.id);
+    if (req.body.equipment_code) {
+      const dup = await equipmentModel.checkDuplicateCode(req.body.equipment_code, id);
+      if (dup) return res.status(409).json({ success: false, error: '이미 존재하는 관리번호입니다' });
+    }
+    const eq = await equipmentModel.update(id, req.body);
+    if (!eq) return res.status(404).json({ success: false, error: '설비를 찾을 수 없습니다' });
+    res.json({ success: true, data: eq });
+  } catch (err) { next(err); }
+}
+
+async function remove(req, res, next) {
+  try {
+    await equipmentModel.remove(parseInt(req.params.id));
+    res.json({ success: true, message: '설비가 삭제되었습니다' });
+  } catch (err) { next(err); }
+}
+
+async function getTypes(req, res, next) {
+  try {
+    const types = await equipmentModel.getEquipmentTypes();
+    res.json({ success: true, data: types });
+  } catch (err) { next(err); }
+}
+
+async function getNextCode(req, res, next) {
+  try {
+    const code = await equipmentModel.getNextCode(req.query.prefix || 'TKP');
+    res.json({ success: true, data: code });
+  } catch (err) { next(err); }
+}
+
+// ==================== 지도 위치 ====================
+
+async function updateMapPosition(req, res, next) {
+  try {
+    const id = parseInt(req.params.id);
+    const positionData = {
+      map_x_percent: req.body.map_x_percent,
+      map_y_percent: req.body.map_y_percent,
+      map_width_percent: req.body.map_width_percent,
+      map_height_percent: req.body.map_height_percent
+    };
+    if (req.body.workplace_id !== undefined) positionData.workplace_id = req.body.workplace_id;
+    const eq = await equipmentModel.updateMapPosition(id, positionData);
+    res.json({ success: true, data: eq });
+  } catch (err) { next(err); }
+}
+
+// ==================== 사진 ====================
+
+async function addPhoto(req, res, next) {
+  try {
+    const equipmentId = parseInt(req.params.id);
+    if (!req.file) return res.status(400).json({ success: false, error: '사진 파일이 필요합니다' });
+    const photoData = {
+      photo_path: `/uploads/${req.file.filename}`,
+      description: req.body.description || null,
+      display_order: parseInt(req.body.display_order) || 0,
+      uploaded_by: req.user?.user_id || null
+    };
+    const result = await equipmentModel.addPhoto(equipmentId, photoData);
+    res.status(201).json({ success: true, data: result });
+  } catch (err) { next(err); }
+}
+
+async function getPhotos(req, res, next) {
+  try {
+    const results = await equipmentModel.getPhotos(parseInt(req.params.id));
+    res.json({ success: true, data: results });
+  } catch (err) { next(err); }
+}
+
+async function deletePhoto(req, res, next) {
+  try {
+    const result = await equipmentModel.deletePhoto(parseInt(req.params.photoId));
+    if (result.photo_path) {
+      const filePath = path.join(__dirname, '..', result.photo_path);
+      fs.unlink(filePath, () => {});
+    }
+    res.json({ success: true, message: '사진이 삭제되었습니다' });
+  } catch (err) { next(err); }
+}
+
+module.exports = {
+  getAll, getById, getByWorkplace, create, update, remove, getTypes, getNextCode,
+  updateMapPosition,
+  addPhoto, getPhotos, deletePhoto
+};
diff --git a/user-management/api/controllers/permissionController.js b/user-management/api/controllers/permissionController.js
new file mode 100644
index 0000000..e520980
--- /dev/null
+++ b/user-management/api/controllers/permissionController.js
@@ -0,0 +1,159 @@
+/**
+ * Permission Controller
+ *
+ * 페이지 권한 관리 (system3 page_permissions.py 포팅)
+ */
+
+const permissionModel = require('../models/permissionModel');
+const userModel = require('../models/userModel');
+
+/**
+ * GET /api/users/:id/page-permissions - 사용자 권한 조회
+ */
+async function getUserPermissions(req, res, next) {
+  try {
+    const userId = parseInt(req.params.id);
+    const requesterId = req.user.user_id || req.user.id;
+
+    // 관리자이거나 본인만 조회 가능
+    if (req.user.role !== 'admin' && requesterId !== userId) {
+      return res.status(403).json({ success: false, error: '권한이 없습니다' });
+    }
+
+    const user = await userModel.findById(userId);
+    if (!user) {
+      return res.status(404).json({ success: false, error: '사용자를 찾을 수 없습니다' });
+    }
+
+    const permissions = await permissionModel.getUserPermissions(userId);
+    res.json(permissions);
+  } catch (err) {
+    next(err);
+  }
+}
+
+/**
+ * POST /api/permissions/grant - 단건 권한 부여
+ */
+async function grantPermission(req, res, next) {
+  try {
+    const { user_id, page_name, can_access, notes } = req.body;
+    const grantedById = req.user.user_id || req.user.id;
+
+    // 대상 사용자 확인
+    const targetUser = await userModel.findById(user_id);
+    if (!targetUser) {
+      return res.status(404).json({ success: false, error: '사용자를 찾을 수 없습니다' });
+    }
+
+    // 유효한 페이지명 확인
+    if (!permissionModel.DEFAULT_PAGES[page_name]) {
+      return res.status(400).json({ success: false, error: '유효하지 않은 페이지명입니다' });
+    }
+
+    const result = await permissionModel.grantPermission({
+      user_id,
+      page_name,
+      can_access,
+      granted_by_id: grantedById,
+      notes
+    });
+
+    res.json({ success: true, message: '권한이 설정되었습니다', data: result });
+  } catch (err) {
+    next(err);
+  }
+}
+
+/**
+ * POST /api/permissions/bulk-grant - 일괄 권한 부여
+ */
+async function bulkGrant(req, res, next) {
+  try {
+    const { user_id, permissions } = req.body;
+    const grantedById = req.user.user_id || req.user.id;
+
+    // 대상 사용자 확인
+    const targetUser = await userModel.findById(user_id);
+    if (!targetUser) {
+      return res.status(404).json({ success: false, error: '사용자를 찾을 수 없습니다' });
+    }
+
+    const result = await permissionModel.bulkGrant({
+      user_id,
+      permissions,
+      granted_by_id: grantedById
+    });
+
+    res.json({
+      success: true,
+      message: `${result.updated_count}개의 권한이 설정되었습니다`,
+      updated_count: result.updated_count
+    });
+  } catch (err) {
+    next(err);
+  }
+}
+
+/**
+ * GET /api/permissions/check/:uid/:page - 접근 권한 확인
+ */
+async function checkAccess(req, res, next) {
+  try {
+    const userId = parseInt(req.params.uid);
+    const pageName = req.params.page;
+
+    // 사용자 확인
+    const user = await userModel.findById(userId);
+    if (!user) {
+      return res.status(404).json({ success: false, error: '사용자를 찾을 수 없습니다' });
+    }
+
+    // admin은 모든 페이지 접근 가능
+    if (user.role === 'admin') {
+      return res.json({ can_access: true, reason: 'admin_role' });
+    }
+
+    const result = await permissionModel.checkAccess(userId, pageName);
+    res.json(result);
+  } catch (err) {
+    next(err);
+  }
+}
+
+/**
+ * GET /api/permissions/available-pages - 설정 가능 페이지 목록
+ */
+async function getAvailablePages(req, res) {
+  res.json({
+    pages: permissionModel.DEFAULT_PAGES,
+    total_count: Object.keys(permissionModel.DEFAULT_PAGES).length
+  });
+}
+
+/**
+ * DELETE /api/permissions/:id - 권한 삭제
+ */
+async function deletePermission(req, res, next) {
+  try {
+    const permissionId = parseInt(req.params.id);
+    const deleted = await permissionModel.deletePermission(permissionId);
+
+    if (!deleted) {
+      return res.status(404).json({ success: false, error: '권한을 찾을 수 없습니다' });
+    }
+
+    res.json({ success: true, message: '권한이 삭제되었습니다. 기본값이 적용됩니다.' });
+  } catch (err) {
+    next(err);
+  }
+}
+
+module.exports = {
+  getUserPermissions,
+  grantPermission,
+  bulkGrant,
+  checkAccess,
+  getAvailablePages,
+  deletePermission
+};
diff --git a/user-management/api/controllers/projectController.js b/user-management/api/controllers/projectController.js
new file mode 100644
index 0000000..6a8d7b7
--- /dev/null
+++ b/user-management/api/controllers/projectController.js
@@ -0,0 +1,83 @@
+/**
+ * Project Controller
+ *
+ * 프로젝트 CRUD
+ */
+
+const projectModel = require('../models/projectModel');
+
+async function getAll(req, res, next) {
+  try {
+    const projects = await projectModel.getAll();
+    res.json({ success: true, data: projects });
+  } catch (err) {
+    next(err);
+  }
+}
+
+async function getActive(req, res, next) {
+  try {
+    const projects = await projectModel.getActive();
+    res.json({ success: true, data: projects });
+  } catch (err) {
+    next(err);
+  }
+}
+
+async function getById(req, res, next) {
+  try {
+    const project = await projectModel.getById(parseInt(req.params.id));
+    if (!project) {
+      return res.status(404).json({ success: false, error: '프로젝트를 찾을 수 없습니다' });
+    }
+    res.json({ success: true, data: project });
+  } catch (err) {
+    next(err);
+  }
+}
+
+async function create(req, res, next) {
+  try {
+    const { job_no, project_name } = req.body;
+
+    if (!job_no || !project_name) {
+      return res.status(400).json({ success: false, error: 'Job No와 프로젝트명은 필수입니다' });
+    }
+
+    const project = await projectModel.create(req.body);
+    res.status(201).json({ success: true, data: project });
+  } catch (err) {
+    if (err.code === 'ER_DUP_ENTRY') {
+      return res.status(409).json({ success: false, error: '이미 존재하는 Job No입니다' });
+    }
+    next(err);
+  }
+}
+
+async function update(req, res, next) {
+  try {
+    const id = parseInt(req.params.id);
+    const project = await projectModel.update(id, req.body);
+    if (!project) {
+      return res.status(404).json({ success: false, error: '프로젝트를 찾을 수 없습니다' });
+    }
+    res.json({ success: true, data: project });
+  } catch (err) {
+    if (err.code === 'ER_DUP_ENTRY') {
+      return res.status(409).json({ success: false, error: '이미 존재하는 Job No입니다' });
+    }
+    next(err);
+  }
+}
+
+async function remove(req, res, next) {
+  try {
+    const id = parseInt(req.params.id);
+    await projectModel.deactivate(id);
+    res.json({ success: true, message: '프로젝트가 비활성화되었습니다' });
+  } catch (err) {
+    next(err);
+  }
+}
+
+module.exports = { getAll, getActive, getById, create, update, remove };
diff --git a/user-management/api/controllers/taskController.js b/user-management/api/controllers/taskController.js
new file mode 100644
index 0000000..6a7d9e1
--- /dev/null
+++ b/user-management/api/controllers/taskController.js
@@ -0,0 +1,94 @@
+/**
+ * Task Controller
+ *
+ * 공정(work_types) + 작업(tasks) CRUD
+ */
+
+const taskModel = require('../models/taskModel');
+
+/* ===== Work Types ===== */
+
+async function getWorkTypes(req, res, next) {
+  try {
+    const data = await taskModel.getWorkTypes();
+    res.json({ success: true, data });
+  } catch (err) { next(err); }
+}
+
+async function createWorkType(req, res, next) {
+  try {
+    const { name } = req.body;
+    if (!name) return res.status(400).json({ success: false, error: '공정명은 필수입니다' });
+    const data = await taskModel.createWorkType(req.body);
+    res.status(201).json({ success: true, data });
+  } catch (err) { next(err); }
+}
+
+async function updateWorkType(req, res, next) {
+  try {
+    const data = await taskModel.updateWorkType(parseInt(req.params.id), req.body);
+    if (!data) return res.status(404).json({ success: false, error: '공정을 찾을 수 없습니다' });
+    res.json({ success: true, data });
+  } catch (err) { next(err); }
+}
+
+async function deleteWorkType(req, res, next) {
+  try {
+    await taskModel.deleteWorkType(parseInt(req.params.id));
+    res.json({ success: true, message: '공정이 삭제되었습니다' });
+  } catch (err) { next(err); }
+}
+
+/* ===== Tasks ===== */
+
+async function getTasks(req, res, next) {
+  try {
+    const workTypeId = req.query.work_type_id ? parseInt(req.query.work_type_id) : null;
+    const data = await taskModel.getTasks(workTypeId);
+    res.json({ success: true, data });
+  } catch (err) { next(err); }
+}
+
+async function getActiveTasks(req, res, next) {
+  try {
+    const data = await taskModel.getActiveTasks();
+    res.json({ success: true, data });
+  } catch (err) { next(err); }
+}
+
+async function getTaskById(req, res, next) {
+  try {
+    const data = await taskModel.getTaskById(parseInt(req.params.id));
+    if (!data) return res.status(404).json({ success: false, error: '작업을 찾을 수 없습니다' });
+    res.json({ success: true, data });
+  } catch (err) { next(err); }
+}
+
+async function createTask(req, res, next) {
+  try {
+    const { task_name } = req.body;
+    if (!task_name) return res.status(400).json({ success: false, error: '작업명은 필수입니다' });
+    const data = await taskModel.createTask(req.body);
+    res.status(201).json({ success: true, data });
+  } catch (err) { next(err); }
+}
+
+async function updateTask(req, res, next) {
+  try {
+    const data = await taskModel.updateTask(parseInt(req.params.id), req.body);
+    if (!data) return res.status(404).json({ success: false, error: '작업을 찾을 수 없습니다' });
+    res.json({ success: true, data });
+  } catch (err) { next(err); }
+}
+
+async function deleteTask(req, res, next) {
+  try {
+    await taskModel.deleteTask(parseInt(req.params.id));
+    res.json({ success: true, message: '작업이 삭제되었습니다' });
+  } catch (err) { next(err); }
+}
+
+module.exports = {
+  getWorkTypes, createWorkType, updateWorkType, deleteWorkType,
+  getTasks, getActiveTasks, getTaskById, createTask, updateTask, deleteTask
+};
diff --git a/user-management/api/controllers/userController.js b/user-management/api/controllers/userController.js
new file mode 100644
index 0000000..82f504e
--- /dev/null
+++ b/user-management/api/controllers/userController.js
@@ -0,0 +1,146 @@
+/**
+ * User Controller
+ *
+ * 사용자 CRUD + 비밀번호 관리
+ */
+
+const userModel = require('../models/userModel');
+
+/**
+ * GET /api/users - 전체 사용자 목록
+ */
+async function getUsers(req, res, next) {
+  try {
+    const users = await userModel.findAll();
+    res.json({ success: true, data: users });
+  } catch (err) {
+    next(err);
+  }
+}
+
+/**
+ * POST /api/users - 사용자 생성
+ */
+async function createUser(req, res, next) {
+  try {
+    const { username, password, name, full_name, department, role } = req.body;
+
+    if (!username || !password) {
+      return res.status(400).json({ success: false, error: '사용자명과 비밀번호는 필수입니다' });
+    }
+
+    const existing = await userModel.findByUsername(username);
+    if (existing) {
+      return res.status(409).json({ success: false, error: '이미 존재하는 사용자명입니다' });
+    }
+
+    const user = await userModel.create({
+      username,
+      password,
+      name: name || full_name,
+      department,
+      role
+    });
+    res.status(201).json({ success: true, data: user });
+  } catch (err) {
+    next(err);
+  }
+}
+
+/**
+ * PUT /api/users/:id - 사용자 수정
+ */
+async function updateUser(req, res, next) {
+  try {
+    const userId = parseInt(req.params.id);
+    const data = { ...req.body };
+
+    // full_name → name 매핑
+    if (data.full_name !== undefined && data.name === undefined) {
+      data.name = data.full_name;
+      delete data.full_name;
+    }
+
+    const user = await userModel.update(userId, data);
+    if (!user) {
+      return res.status(404).json({ success: false, error: '사용자를 찾을 수 없습니다' });
+    }
+    res.json({ success: true, data: user });
+  } catch (err) {
+    next(err);
+  }
+}
+
+/**
+ * DELETE /api/users/:id - 사용자 비활성화
+ */
+async function deleteUser(req, res, next) {
+  try {
+    const userId = parseInt(req.params.id);
+    await userModel.deleteUser(userId);
+    res.json({ success: true, message: '사용자가 비활성화되었습니다' });
+  } catch (err) {
+    next(err);
+  }
+}
+
+/**
+ * POST /api/users/:id/reset-password - 비밀번호 초기화 (admin)
+ */
+async function resetPassword(req, res, next) {
+  try {
+    const userId = parseInt(req.params.id);
+    const { new_password } = req.body;
+    const password = new_password || '000000';
+
+    const user = await userModel.update(userId, { password });
+    if (!user) {
+      return res.status(404).json({ success: false, error: '사용자를 찾을 수 없습니다' });
+    }
+    res.json({ success: true, message: '비밀번호가 초기화되었습니다' });
+  } catch (err) {
+    next(err);
+  }
+}
+
+/**
+ * POST /api/users/change-password - 본인 비밀번호 변경
+ */
+async function changePassword(req, res, next) {
+  try {
+    const { current_password, new_password } = req.body;
+    const userId = req.user.user_id || req.user.id;
+
+    if (!current_password || !new_password) {
+      return res.status(400).json({ success: false, error: '현재 비밀번호와 새 비밀번호를 입력하세요' });
+    }
+
+    if (new_password.length < 6) {
+      return res.status(400).json({ success: false, error: '새 비밀번호는 최소 6자 이상이어야 합니다' });
+    }
+
+    const user = await userModel.findById(userId);
+    if (!user) {
+      return res.status(404).json({ success: false, error: '사용자를 찾을 수 없습니다' });
+    }
+
+    const valid = await userModel.verifyPassword(current_password, user.password_hash);
+    if (!valid) {
+      return res.status(401).json({ success: false, error: '현재 비밀번호가 올바르지 않습니다' });
+    }
+
+    await userModel.update(userId, { password: new_password });
+    res.json({ success: true, message: '비밀번호가 변경되었습니다' });
+  } catch (err) {
+    next(err);
+  }
+}
+
+module.exports = {
+  getUsers,
+  createUser,
+  updateUser,
+  deleteUser,
+  resetPassword,
+  changePassword
+};
diff --git a/user-management/api/controllers/vacationController.js b/user-management/api/controllers/vacationController.js
new file mode 100644
index 0000000..590b5a5
--- /dev/null
+++ b/user-management/api/controllers/vacationController.js
@@ -0,0 +1,126 @@
+/**
+ * Vacation Controller
+ *
+ * 휴가 유형 + 연차 배정 관리
+ */
+
+const vacationModel = require('../models/vacationModel');
+
+/* ===== Vacation Types ===== */
+
+async function getVacationTypes(req, res, next) {
+  try {
+    const all = req.query.all === 'true';
+    const data = all ? await vacationModel.getAllVacationTypes() : await vacationModel.getVacationTypes();
+    res.json({ success: true, data });
+  } catch (err) { next(err); }
+}
+
+async function createVacationType(req, res, next) {
+  try {
+    const { type_code, type_name } = req.body;
+    if (!type_code || !type_name) return res.status(400).json({ success: false, error: '유형 코드와 이름은 필수입니다' });
+    const data = await vacationModel.createVacationType(req.body);
+    res.status(201).json({ success: true, data });
+  } catch (err) {
+    if (err.code === 'ER_DUP_ENTRY') return res.status(409).json({ success: false, error: '이미 존재하는 유형 코드입니다' });
+    next(err);
+  }
+}
+
+async function updateVacationType(req, res, next) {
+  try {
+    const data = await vacationModel.updateVacationType(parseInt(req.params.id), req.body);
+    if (!data) return res.status(404).json({ success: false, error: '휴가 유형을 찾을 수 없습니다' });
+    res.json({ success: true, data });
+  } catch (err) {
+    if (err.code === 'ER_DUP_ENTRY') return res.status(409).json({ success: false, error: '이미 존재하는 유형 코드입니다' });
+    next(err);
+  }
+}
+
+async function deleteVacationType(req, res, next) {
+  try {
+    await vacationModel.deleteVacationType(parseInt(req.params.id));
+    res.json({ success: true, message: '휴가 유형이 비활성화되었습니다' });
+  } catch (err) { next(err); }
+}
+
+async function updatePriorities(req, res, next) {
+  try {
+    const { items } = req.body;
+    if (!items || !Array.isArray(items)) return res.status(400).json({ success: false, error: 'items 배열이 필요합니다' });
+    await vacationModel.updatePriorities(items);
+    res.json({ success: true, message: '우선순위가 업데이트되었습니다' });
+  } catch (err) { next(err); }
+}
+
+/* ===== Vacation Balances ===== */
+
+async function getBalancesByYear(req, res, next) {
+  try {
+    const year = parseInt(req.params.year);
+    const data = await vacationModel.getBalancesByYear(year);
+    res.json({ success: true, data });
+  } catch (err) { next(err); }
+}
+
+async function getBalancesByWorkerYear(req, res, next) {
+  try {
+    const workerId = parseInt(req.params.workerId);
+    const year = parseInt(req.params.year);
+    const data = await vacationModel.getBalancesByWorkerYear(workerId, year);
+    res.json({ success: true, data });
+  } catch (err) { next(err); }
+}
+
+async function createBalance(req, res, next) {
+  try {
+    const { worker_id, vacation_type_id, year } = req.body;
+    if (!worker_id || !vacation_type_id || !year) {
+      return res.status(400).json({ success: false, error: '작업자, 휴가유형, 연도는 필수입니다' });
+    }
+    const data = await vacationModel.createBalance({ ...req.body, created_by: req.user.user_id });
+    res.status(201).json({ success: true, data });
+  } catch (err) { next(err); }
+}
+
+async function updateBalance(req, res, next) {
+  try {
+    const data = await vacationModel.updateBalance(parseInt(req.params.id), req.body);
+    if (!data) return res.status(404).json({ success: false, error: '배정 정보를 찾을 수 없습니다' });
+    res.json({ success: true, data });
+  } catch (err) { next(err); }
+}
+
+async function deleteBalance(req, res, next) {
+  try {
+    await vacationModel.deleteBalance(parseInt(req.params.id));
+    res.json({ success: true, message: '삭제되었습니다' });
+  } catch (err) { next(err); }
+}
+
+async function bulkUpsertBalances(req, res, next) {
+  try {
+    const { balances } = req.body;
+    if (!balances || !Array.isArray(balances)) return res.status(400).json({ success: false, error: 'balances 배열이 필요합니다' });
+    const items = balances.map(b => ({ ...b, created_by: req.user.user_id }));
+    const count = await vacationModel.bulkUpsertBalances(items);
+    res.json({ success: true, data: { count }, message: `${count}건 처리되었습니다` });
+  } catch (err) { next(err); }
+}
+
+async function autoCalculate(req, res, next) {
+  try {
+    const { year } = req.body;
+    if (!year) return res.status(400).json({ success: false, error: '연도는 필수입니다' });
+    const result = await vacationModel.autoCalculateForAllWorkers(year, req.user.user_id);
+    res.json({ success: true, data: result, message: `${result.count}명 자동 배정 완료` });
+  } catch (err) { next(err); }
+}
+
+module.exports = {
+  getVacationTypes, createVacationType, updateVacationType, deleteVacationType, updatePriorities,
+  getBalancesByYear, getBalancesByWorkerYear, createBalance, updateBalance, deleteBalance,
+  bulkUpsertBalances, autoCalculate
+};
diff --git a/user-management/api/controllers/workerController.js b/user-management/api/controllers/workerController.js
new file mode 100644
index 0000000..d362ba2
--- /dev/null
+++ b/user-management/api/controllers/workerController.js
@@ -0,0 +1,66 @@
+/**
+ * Worker Controller
+ *
+ * 작업자 CRUD
+ */
+
+const workerModel = require('../models/workerModel');
+
+async function getAll(req, res, next) {
+  try {
+    const workers = await workerModel.getAll();
+    res.json({ success: true, data: workers });
+  } catch (err) {
+    next(err);
+  }
+}
+
+async function getById(req, res, next) {
+  try {
+    const worker = await workerModel.getById(parseInt(req.params.id));
+    if (!worker) {
+      return res.status(404).json({ success: false, error: '작업자를 찾을 수 없습니다' });
+    }
+    res.json({ success: true, data: worker });
+  } catch (err) {
+    next(err);
+  }
+}
+
+async function create(req, res, next) {
+  try {
+    const { worker_name } = req.body;
+    if (!worker_name) {
+      return res.status(400).json({ success: false, error: '작업자 이름은 필수입니다' });
+    }
+    const worker = await workerModel.create(req.body);
+    res.status(201).json({ success: true, data: worker });
+  } catch (err) {
+    next(err);
+  }
+}
+
+async function update(req, res, next) {
+  try {
+    const id = parseInt(req.params.id);
+    const worker = await workerModel.update(id, req.body);
+    if (!worker) {
+      return res.status(404).json({ success: false, error: '작업자를 찾을 수 없습니다' });
+    }
+    res.json({ success: true, data: worker });
+  } catch (err) {
+    next(err);
+  }
+}
+
+async function remove(req, res, next) {
+  try {
+    const id = parseInt(req.params.id);
+    await workerModel.deactivate(id);
+    res.json({ success: true, message: '작업자가 비활성화되었습니다' });
+  } catch (err) {
+    next(err);
+  }
+}
+
+module.exports = { getAll, getById, create, update, remove };
diff --git a/user-management/api/controllers/workplaceController.js b/user-management/api/controllers/workplaceController.js
new file mode 100644
index 0000000..975ada2
--- /dev/null
+++ b/user-management/api/controllers/workplaceController.js
@@ -0,0 +1,155 @@
+/**
+ * Workplace Controller
+ *
+ * 작업장 CRUD + 카테고리 조회
+ */
+
+const workplaceModel = require('../models/workplaceModel');
+
+async function getAll(req, res, next) {
+  try {
+    const workplaces = await workplaceModel.getAll();
+    res.json({ success: true, data: workplaces });
+  } catch (err) {
+    next(err);
+  }
+}
+
+async function getById(req, res, next) {
+  try {
+    const wp = await workplaceModel.getById(parseInt(req.params.id));
+    if (!wp) {
+      return res.status(404).json({ success: false, error: '작업장을 찾을 수 없습니다' });
+    }
+    res.json({ success: true, data: wp });
+  } catch (err) {
+    next(err);
+  }
+}
+
+async function getCategories(req, res, next) {
+  try {
+    const categories = await workplaceModel.getCategories();
+    res.json({ success: true, data: categories });
+  } catch (err) {
+    next(err);
+  }
+}
+
+async function create(req, res, next) {
+  try {
+    const { workplace_name } = req.body;
+    if (!workplace_name) {
+      return res.status(400).json({ success: false, error: '작업장명은 필수입니다' });
+    }
+    const wp = await workplaceModel.create(req.body);
+    res.status(201).json({ success: true, data: wp });
+  } catch (err) {
+    next(err);
+  }
+}
+
+async function update(req, res, next) {
+  try {
+    const id = parseInt(req.params.id);
+    const wp = await workplaceModel.update(id, req.body);
+    if (!wp) {
+      return res.status(404).json({ success: false, error: '작업장을 찾을 수 없습니다' });
+    }
+    res.json({ success: true, data: wp });
+  } catch (err) {
+    next(err);
+  }
+}
+
+async function remove(req, res, next) {
+  try {
+    const id = parseInt(req.params.id);
+    await workplaceModel.deactivate(id);
+    res.json({ success: true, message: '작업장이 비활성화되었습니다' });
+  } catch (err) {
+    next(err);
+  }
+}
+
+// ==================== 구역지도 ====================
+
+async function uploadCategoryLayoutImage(req, res, next) {
+  try {
+    if (!req.file) {
+      return res.status(400).json({ success: false, error: '이미지 파일이 필요합니다' });
+    }
+    const id = parseInt(req.params.id);
+    const imagePath = `/uploads/${req.file.filename}`;
+    const category = await workplaceModel.updateCategoryLayoutImage(id, imagePath);
+    if (!category) {
+      return res.status(404).json({ success: false, error: '카테고리를 찾을 수 없습니다' });
+    }
+    res.json({ success: true, data: { image_path: imagePath, category } });
+  } catch (err) {
+    next(err);
+  }
+}
+
+async function createMapRegion(req, res, next) {
+  try {
+    const { workplace_id, category_id } = req.body;
+    if (!workplace_id || !category_id) {
+      return res.status(400).json({ success: false, error: 'workplace_id와 category_id는 필수입니다' });
+    }
+    const region = await workplaceModel.createMapRegion(req.body);
+    res.status(201).json({ success: true, data: region });
+  } catch (err) {
+    next(err);
+  }
+}
+
+async function getMapRegionsByCategory(req, res, next) {
+  try {
+    const categoryId = parseInt(req.params.categoryId);
+    const regions = await workplaceModel.getMapRegionsByCategory(categoryId);
+    res.json({ success: true, data: regions });
+  } catch (err) {
+    next(err);
+  }
+}
+
+async function updateMapRegion(req, res, next) {
+  try {
+    const regionId = parseInt(req.params.id);
+    const region = await workplaceModel.updateMapRegion(regionId, req.body);
+    if (!region) {
+      return res.status(404).json({ success: false, error: '영역을 찾을 수 없습니다' });
+    }
+    res.json({ success: true, data: region });
+  } catch (err) {
+    next(err);
+  }
+}
+
+async function deleteMapRegion(req, res, next) {
+  try {
+    const regionId = parseInt(req.params.id);
+    await workplaceModel.deleteMapRegion(regionId);
+    res.json({ success: true, message: '영역이 삭제되었습니다' });
+  } catch (err) {
+    next(err);
+  }
+}
+
+async function uploadWorkplaceLayoutImage(req, res, next) {
+  try {
+    if (!req.file) return res.status(400).json({ success: false, error: '이미지 파일이 필요합니다' });
+    const id = parseInt(req.params.id);
+    const imagePath = `/uploads/${req.file.filename}`;
+    const wp = await workplaceModel.updateWorkplaceLayoutImage(id, imagePath);
+    if (!wp) return res.status(404).json({ success: false, error: '작업장을 찾을 수 없습니다' });
+    res.json({ success: true, data: { image_path: imagePath, workplace: wp } });
+  } catch (err) { next(err); }
+}
+
+module.exports = {
+  getAll, getById, getCategories, create, update, remove,
+  uploadCategoryLayoutImage, uploadWorkplaceLayoutImage,
+  createMapRegion, getMapRegionsByCategory, updateMapRegion, deleteMapRegion
+};
diff --git a/user-management/api/index.js b/user-management/api/index.js
new file mode 100644
index 0000000..00f28ea
--- /dev/null
+++ b/user-management/api/index.js
@@ -0,0 +1,65 @@
+/**
+ * tkuser-api - 사용자 관리 서비스
+ *
+ * 사용자 CRUD + 페이지 권한 관리 통합 API
+ * MariaDB (sso_users + user_page_permissions) 직접 연결
+ */
+
+const express = require('express');
+const path = require('path');
+const cors = require('cors');
+const userRoutes = require('./routes/userRoutes');
+const permissionRoutes = require('./routes/permissionRoutes');
+const projectRoutes = require('./routes/projectRoutes');
+const workerRoutes = require('./routes/workerRoutes');
+const departmentRoutes = require('./routes/departmentRoutes');
+const workplaceRoutes = require('./routes/workplaceRoutes');
+const equipmentRoutes = require('./routes/equipmentRoutes');
+const taskRoutes = require('./routes/taskRoutes');
+const vacationRoutes = require('./routes/vacationRoutes');
+
+const app = express();
+const PORT = process.env.PORT || 3000;
+
+app.use(cors({
+  origin: true,
+  credentials: true
+}));
+app.use(express.json());
+app.use('/uploads', express.static(path.join(__dirname, 'uploads')));
+
+// Health check
+app.get('/health', (req, res) => {
+  res.json({ status: 'ok', service: 'tkuser-api', timestamp: new Date().toISOString() });
+});
+
+// Routes
+app.use('/api/users', userRoutes);
+app.use('/api/permissions', permissionRoutes);
+app.use('/api/projects', projectRoutes);
+app.use('/api/workers', workerRoutes);
+app.use('/api/departments', departmentRoutes);
+app.use('/api/workplaces', workplaceRoutes);
+app.use('/api/equipments', equipmentRoutes);
+app.use('/api/tasks', taskRoutes);
+app.use('/api/vacations', vacationRoutes);
+
+// 404
+app.use((req, res) => {
+  res.status(404).json({ success: false, error: 'Not Found' });
+});
+
+// Error handler
+app.use((err, req, res, next) => {
+  console.error('tkuser-api Error:', err.message);
+  res.status(err.status || 500).json({
+    success: false,
+    error: err.message || 'Internal Server Error'
+  });
+});
+
+app.listen(PORT, () => {
+  console.log(`tkuser-api running on port ${PORT}`);
+});
+
+module.exports = app;
diff --git a/user-management/api/middleware/auth.js b/user-management/api/middleware/auth.js
new file mode 100644
index 0000000..5170dde
--- /dev/null
+++ b/user-management/api/middleware/auth.js
@@ -0,0 +1,61 @@
+/**
+ * 인증 미들웨어
+ * JWT 검증 + admin 체크
+ */
+
+const jwt = require('jsonwebtoken');
+
+const JWT_SECRET = process.env.SSO_JWT_SECRET;
+
+/**
+ * Bearer 토큰 또는 쿠키에서 토큰 추출
+ */
+function extractToken(req) {
+  const authHeader = req.headers['authorization'];
+  if (authHeader && authHeader.startsWith('Bearer ')) {
+    return authHeader.split(' ')[1];
+  }
+  if (req.cookies && req.cookies.sso_token) {
+    return req.cookies.sso_token;
+  }
+  return null;
+}
+
+/**
+ * 인증 필수 미들웨어
+ */
+function requireAuth(req, res, next) {
+  const token = extractToken(req);
+  if (!token) {
+    return res.status(401).json({ success: false, error: '인증이 필요합니다' });
+  }
+  try {
+    const decoded = jwt.verify(token, JWT_SECRET);
+    req.user = decoded;
+    next();
+  } catch {
+    return res.status(401).json({ success: false, error: '유효하지 않은 토큰입니다' });
+  }
+}
+
+/**
+ * 관리자 권한 미들웨어
+ */
+function requireAdmin(req, res, next) {
+  const token = extractToken(req);
+  if (!token) {
+    return res.status(401).json({ success: false, error: '인증이 필요합니다' });
+  }
+  try {
+    const decoded = jwt.verify(token, JWT_SECRET);
+    if (!['admin', 'system'].includes(decoded.role)) {
+      return res.status(403).json({ success: false, error: '관리자 권한이 필요합니다' });
+    }
+    req.user = decoded;
+    next();
+  } catch {
+    return res.status(401).json({ success: false, error: '유효하지 않은 토큰입니다' });
+  }
+}
+
+module.exports = { extractToken, requireAuth, requireAdmin };
diff --git a/user-management/api/middleware/upload.js b/user-management/api/middleware/upload.js
new file mode 100644
index 0000000..d1f65c5
--- /dev/null
+++ b/user-management/api/middleware/upload.js
@@ -0,0 +1,35 @@
+/**
+ * 파일 업로드 미들웨어 (multer)
+ */
+
+const multer = require('multer');
+const path = require('path');
+const crypto = require('crypto');
+
+const storage = multer.diskStorage({
+  destination: (req, file, cb) => {
+    cb(null, path.join(__dirname, '..', 'uploads'));
+  },
+  filename: (req, file, cb) => {
+    const ext = path.extname(file.originalname).toLowerCase();
+    const uniqueName = `workplace-layout-${Date.now()}-${crypto.randomInt(100000000, 999999999)}${ext}`;
+    cb(null, uniqueName);
+  }
+});
+
+const fileFilter = (req, file, cb) => {
+  const allowed = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
+  if (allowed.includes(file.mimetype)) {
+    cb(null, true);
+  } else {
+    cb(new Error('허용되지 않는 파일 형식입니다. (JPEG, PNG, GIF, WebP만 가능)'), false);
+  }
+};
+
+const upload = multer({
+  storage,
+  fileFilter,
+  limits: { fileSize: 5 * 1024 * 1024 }
+});
+
+module.exports = upload;
diff --git a/user-management/api/models/departmentModel.js b/user-management/api/models/departmentModel.js
new file mode 100644
index 0000000..40c2a5b
--- /dev/null
+++ b/user-management/api/models/departmentModel.js
@@ -0,0 +1,71 @@
+/**
+ * Department Model
+ *
+ * departments 테이블 CRUD (MariaDB)
+ */
+
+const { getPool } = require('./userModel');
+
+async function getAll() {
+  const db = getPool();
+  const [rows] = await db.query(
+    `SELECT d.*, p.department_name AS parent_name
+     FROM departments d
+     LEFT JOIN departments p ON d.parent_id = p.department_id
+     ORDER BY d.display_order ASC, d.department_id ASC`
+  );
+  return rows;
+}
+
+async function getById(id) {
+  const db = getPool();
+  const [rows] = await db.query(
+    `SELECT d.*, p.department_name AS parent_name
+     FROM departments d
+     LEFT JOIN departments p ON d.parent_id = p.department_id
+     WHERE d.department_id = ?`,
+    [id]
+  );
+  return rows[0] || null;
+}
+
+async function create({ department_name, parent_id, description, display_order }) {
+  const db = getPool();
+  const [result] = await db.query(
+    `INSERT INTO departments (department_name, parent_id, description, display_order)
+     VALUES (?, ?, ?, ?)`,
+    [department_name, parent_id || null, description || null, display_order || 0]
+  );
+  return getById(result.insertId);
+}
+
+async function update(id, data) {
+  const db = getPool();
+  const fields = [];
+  const values = [];
+
+  if (data.department_name !== undefined) { fields.push('department_name = ?'); values.push(data.department_name); }
+  if (data.parent_id !== undefined) { fields.push('parent_id = ?'); values.push(data.parent_id || null); }
+  if (data.description !== undefined) { fields.push('description = ?'); values.push(data.description || null); }
+  if (data.is_active !== undefined) { fields.push('is_active = ?'); values.push(data.is_active); }
+  if (data.display_order !== undefined) { fields.push('display_order = ?'); values.push(data.display_order); }
+
+  if (fields.length === 0) return getById(id);
+
+  values.push(id);
+  await db.query(
+    `UPDATE departments SET ${fields.join(', ')} WHERE department_id = ?`,
+    values
+  );
+  return getById(id);
+}
+
+async function deactivate(id) {
+  const db = getPool();
+  await db.query(
+    'UPDATE departments SET is_active = FALSE WHERE department_id = ?',
+    [id]
+  );
+}
+
+module.exports = { getAll, getById, create, update, deactivate };
diff --git a/user-management/api/models/equipmentModel.js b/user-management/api/models/equipmentModel.js
new file mode 100644
index 0000000..34c9020
--- /dev/null
+++ b/user-management/api/models/equipmentModel.js
@@ -0,0 +1,192 @@
+/**
+ * Equipment Model
+ *
+ * equipments + equipment_photos CRUD (MariaDB)
+ */
+
+const { getPool } = require('./userModel');
+
+// ==================== 기본 CRUD ====================
+
+async function getAll(filters = {}) {
+  const db = getPool();
+  let sql = `SELECT e.*, w.workplace_name, c.category_name
+     FROM equipments e
+     LEFT JOIN workplaces w ON e.workplace_id = w.workplace_id
+     LEFT JOIN workplace_categories c ON w.category_id = c.category_id`;
+  const conditions = [];
+  const values = [];
+
+  if (filters.workplace_id) { conditions.push('e.workplace_id = ?'); values.push(filters.workplace_id); }
+  if (filters.equipment_type) { conditions.push('e.equipment_type = ?'); values.push(filters.equipment_type); }
+  if (filters.status) { conditions.push('e.status = ?'); values.push(filters.status); }
+  if (filters.search) {
+    conditions.push('(e.equipment_name LIKE ? OR e.equipment_code LIKE ?)');
+    const term = `%${filters.search}%`;
+    values.push(term, term);
+  }
+
+  if (conditions.length) sql += ' WHERE ' + conditions.join(' AND ');
+  sql += ' ORDER BY e.equipment_code ASC';
+
+  const [rows] = await db.query(sql, values);
+  return rows;
+}
+
+async function getById(id) {
+  const db = getPool();
+  const [rows] = await db.query(
+    `SELECT e.*, w.workplace_name, c.category_name
+     FROM equipments e
+     LEFT JOIN workplaces w ON e.workplace_id = w.workplace_id
+     LEFT JOIN workplace_categories c ON w.category_id = c.category_id
+     WHERE e.equipment_id = ?`,
+    [id]
+  );
+  return rows[0] || null;
+}
+
+async function getByWorkplace(workplaceId) {
+  const db = getPool();
+  const [rows] = await db.query(
+    `SELECT e.*, w.workplace_name
+     FROM equipments e
+     LEFT JOIN workplaces w ON e.workplace_id = w.workplace_id
+     WHERE e.workplace_id = ?
+     ORDER BY e.equipment_code ASC`,
+    [workplaceId]
+  );
+  return rows;
+}
+
+async function create(data) {
+  const db = getPool();
+  const [result] = await db.query(
+    `INSERT INTO equipments (equipment_code, equipment_name, equipment_type, model_name, manufacturer, supplier, purchase_price, installation_date, serial_number, specifications, status, notes, workplace_id, map_x_percent, map_y_percent, map_width_percent, map_height_percent)
+     VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`,
+    [
+      data.equipment_code, data.equipment_name,
+      data.equipment_type || null, data.model_name || null,
+      data.manufacturer || null, data.supplier || null,
+      data.purchase_price || null, data.installation_date || null,
+      data.serial_number || null, data.specifications || null,
+      data.status || 'active', data.notes || null,
+      data.workplace_id || null,
+      data.map_x_percent || null, data.map_y_percent || null,
+      data.map_width_percent || null, data.map_height_percent || null
+    ]
+  );
+  return getById(result.insertId);
+}
+
+async function update(id, data) {
+  const db = getPool();
+  const fields = [];
+  const values = [];
+
+  if (data.equipment_code !== undefined) { fields.push('equipment_code = ?'); values.push(data.equipment_code); }
+  if (data.equipment_name !== undefined) { fields.push('equipment_name = ?'); values.push(data.equipment_name); }
+  if (data.equipment_type !== undefined) { fields.push('equipment_type = ?'); values.push(data.equipment_type || null); }
+  if (data.model_name !== undefined) { fields.push('model_name = ?'); values.push(data.model_name || null); }
+  if (data.manufacturer !== undefined) { fields.push('manufacturer = ?'); values.push(data.manufacturer || null); }
+  if (data.supplier !== undefined) { fields.push('supplier = ?'); values.push(data.supplier || null); }
+  if (data.purchase_price !== undefined) { fields.push('purchase_price = ?'); values.push(data.purchase_price || null); }
+  if (data.installation_date !== undefined) { fields.push('installation_date = ?'); values.push(data.installation_date || null); }
+  if (data.serial_number !== undefined) { fields.push('serial_number = ?'); values.push(data.serial_number || null); }
+  if (data.specifications !== undefined) { fields.push('specifications = ?'); values.push(data.specifications || null); }
+  if (data.status !== undefined) { fields.push('status = ?'); values.push(data.status); }
+  if (data.notes !== undefined) { fields.push('notes = ?'); values.push(data.notes || null); }
+  if (data.workplace_id !== undefined) { fields.push('workplace_id = ?'); values.push(data.workplace_id || null); }
+  if (data.map_x_percent !== undefined) { fields.push('map_x_percent = ?'); values.push(data.map_x_percent); }
+  if (data.map_y_percent !== undefined) { fields.push('map_y_percent = ?'); values.push(data.map_y_percent); }
+  if (data.map_width_percent !== undefined) { fields.push('map_width_percent = ?'); values.push(data.map_width_percent); }
+  if (data.map_height_percent !== undefined) { fields.push('map_height_percent = ?'); values.push(data.map_height_percent); }
+
+  if (fields.length === 0) return getById(id);
+
+  values.push(id);
+  await db.query(`UPDATE equipments SET ${fields.join(', ')} WHERE equipment_id = ?`, values);
+  return getById(id);
+}
+
+async function remove(id) {
+  const db = getPool();
+  await db.query('DELETE FROM equipments WHERE equipment_id = ?', [id]);
+}
+
+async function getEquipmentTypes() {
+  const db = getPool();
+  const [rows] = await db.query(
+    'SELECT DISTINCT equipment_type FROM equipments WHERE equipment_type IS NOT NULL AND equipment_type != "" ORDER BY equipment_type ASC'
+  );
+  return rows.map(r => r.equipment_type);
+}
+
+async function getNextCode(prefix = 'TKP') {
+  const db = getPool();
+  const [rows] = await db.query(
+    'SELECT equipment_code FROM equipments WHERE equipment_code LIKE ? ORDER BY equipment_code DESC LIMIT 1',
+    [`${prefix}-%`]
+  );
+  if (!rows.length) return `${prefix}-001`;
+  const lastNum = parseInt(rows[0].equipment_code.replace(`${prefix}-`, ''), 10) || 0;
+  return `${prefix}-${String(lastNum + 1).padStart(3, '0')}`;
+}
+
+async function checkDuplicateCode(code, excludeId) {
+  const db = getPool();
+  let sql = 'SELECT equipment_id FROM equipments WHERE equipment_code = ?';
+  const values = [code];
+  if (excludeId) { sql += ' AND equipment_id != ?'; values.push(excludeId); }
+  const [rows] = await db.query(sql, values);
+  return rows.length > 0;
+}
+
+// ==================== 지도 위치 ====================
+
+async function updateMapPosition(id, positionData) {
+  const db = getPool();
+  const fields = ['map_x_percent = ?', 'map_y_percent = ?', 'map_width_percent = ?', 'map_height_percent = ?'];
+  const values = [positionData.map_x_percent, positionData.map_y_percent, positionData.map_width_percent, positionData.map_height_percent];
+  if (positionData.workplace_id !== undefined) {
+    fields.push('workplace_id = ?');
+    values.push(positionData.workplace_id);
+  }
+  values.push(id);
+  await db.query(`UPDATE equipments SET ${fields.join(', ')} WHERE equipment_id = ?`, values);
+  return getById(id);
+}
+
+// ==================== 사진 ====================
+
+async function addPhoto(equipmentId, photoData) {
+  const db = getPool();
+  const [result] = await db.query(
+    `INSERT INTO equipment_photos (equipment_id, photo_path, description, display_order, uploaded_by) VALUES (?, ?, ?, ?, ?)`,
+    [equipmentId, photoData.photo_path, photoData.description || null, photoData.display_order || 0, photoData.uploaded_by || null]
+  );
+  return { photo_id: result.insertId, equipment_id: equipmentId, ...photoData };
+}
+
+async function getPhotos(equipmentId) {
+  const db = getPool();
+  const [rows] = await db.query(
+    'SELECT * FROM equipment_photos WHERE equipment_id = ? ORDER BY display_order ASC, created_at ASC',
+    [equipmentId]
+  );
+  return rows;
+}
+
+async function deletePhoto(photoId) {
+  const db = getPool();
+  const [photo] = await db.query('SELECT photo_path FROM equipment_photos WHERE photo_id = ?', [photoId]);
+  await db.query('DELETE FROM equipment_photos WHERE photo_id = ?', [photoId]);
+  return { photo_id: photoId, photo_path: photo[0]?.photo_path };
+}
+
+module.exports = {
+  getAll, getById, getByWorkplace, create, update, remove,
+  getEquipmentTypes, getNextCode, checkDuplicateCode,
+  updateMapPosition,
+  addPhoto, getPhotos, deletePhoto
+};
diff --git a/user-management/api/models/permissionModel.js b/user-management/api/models/permissionModel.js
new file mode 100644
index 0000000..c879921
--- /dev/null
+++ b/user-management/api/models/permissionModel.js
@@ -0,0 +1,150 @@
+/**
+ * Permission Model
+ *
+ * MariaDB user_page_permissions 테이블 CRUD
+ */
+
+const { getPool } = require('./userModel');
+
+// 기본 페이지 목록 (시스템별 구분)
+const DEFAULT_PAGES = {
+  // ===== System 1 - 공장관리 =====
+  // 작업 관리
+  's1.dashboard':                { title: '대시보드', system: 'system1', group: '작업 관리', default_access: true },
+  's1.work.tbm':                 { title: 'TBM 관리', system: 'system1', group: '작업 관리', default_access: true },
+  's1.work.report_create':       { title: '작업보고서 작성', system: 'system1', group: '작업 관리', default_access: true },
+  's1.work.analysis':            { title: '작업 분석', system: 'system1', group: '작업 관리', default_access: false },
+  's1.work.nonconformity':       { title: '부적합 현황', system: 'system1', group: '작업 관리', default_access: true },
+  // 공장 관리
+  's1.factory.repair_management':{ title: '시설설비 관리', system: 'system1', group: '공장 관리', default_access: false },
+  's1.inspection.daily_patrol':  { title: '일일순회점검', system: 'system1', group: '공장 관리', default_access: false },
+  's1.inspection.checkin':       { title: '출근 체크', system: 'system1', group: '공장 관리', default_access: true },
+  's1.inspection.work_status':   { title: '근무 현황', system: 'system1', group: '공장 관리', default_access: false },
+  // 안전 관리
+  's1.safety.visit_request':     { title: '출입 신청', system: 'system1', group: '안전 관리', default_access: true },
+  's1.safety.management':        { title: '안전 관리', system: 'system1', group: '안전 관리', default_access: false },
+  's1.safety.checklist_manage':  { title: '체크리스트 관리', system: 'system1', group: '안전 관리', default_access: false },
+  // 근태 관리
+  's1.attendance.my_vacation_info':    { title: '내 연차 정보', system: 'system1', group: '근태 관리', default_access: true },
+  's1.attendance.monthly':             { title: '월간 근태', system: 'system1', group: '근태 관리', default_access: true },
+  's1.attendance.vacation_request':    { title: '휴가 신청', system: 'system1', group: '근태 관리', default_access: true },
+  's1.attendance.vacation_management': { title: '휴가 관리', system: 'system1', group: '근태 관리', default_access: false },
+  's1.attendance.vacation_allocation': { title: '휴가 발생 입력', system: 'system1', group: '근태 관리', default_access: false },
+  's1.attendance.annual_overview':     { title: '연간 휴가 현황', system: 'system1', group: '근태 관리', default_access: false },
+  // 시스템 관리
+  's1.admin.workers':            { title: '작업자 관리', system: 'system1', group: '시스템 관리', default_access: false },
+  's1.admin.projects':           { title: '프로젝트 관리', system: 'system1', group: '시스템 관리', default_access: false },
+  's1.admin.tasks':              { title: '작업 관리', system: 'system1', group: '시스템 관리', default_access: false },
+  's1.admin.workplaces':         { title: '작업장 관리', system: 'system1', group: '시스템 관리', default_access: false },
+  's1.admin.equipments':         { title: '설비 관리', system: 'system1', group: '시스템 관리', default_access: false },
+  's1.admin.issue_categories':   { title: '신고 카테고리 관리', system: 'system1', group: '시스템 관리', default_access: false },
+  's1.admin.attendance_report':  { title: '출퇴근-보고서 대조', system: 'system1', group: '시스템 관리', default_access: false },
+
+  // ===== System 3 - 부적합관리 =====
+  // 메인
+  'issues_dashboard':   { title: '현황판', system: 'system3', group: '메인', default_access: true },
+  'issues_inbox':       { title: '수신함', system: 'system3', group: '메인', default_access: true },
+  'issues_management':  { title: '관리함', system: 'system3', group: '메인', default_access: false },
+  'issues_archive':     { title: '폐기함', system: 'system3', group: '메인', default_access: false },
+  // 업무
+  'daily_work':         { title: '일일 공수', system: 'system3', group: '업무', default_access: false },
+  'projects_manage':    { title: '프로젝트 관리', system: 'system3', group: '업무', default_access: false },
+  // 보고서
+  'reports':            { title: '보고서', system: 'system3', group: '보고서', default_access: false },
+  'reports_daily':      { title: '일일보고서', system: 'system3', group: '보고서', default_access: false },
+  'reports_weekly':     { title: '주간보고서', system: 'system3', group: '보고서', default_access: false },
+  'reports_monthly':    { title: '월간보고서', system: 'system3', group: '보고서', default_access: false }
+};
+
+/**
+ * 사용자의 페이지 권한 목록 조회
+ */
+async function getUserPermissions(userId) {
+  const db = getPool();
+  const [rows] = await db.query(
+    'SELECT * FROM user_page_permissions WHERE user_id = ? ORDER BY page_name',
+    [userId]
+  );
+  return rows;
+}
+
+/**
+ * 단건 권한 부여/업데이트 (UPSERT)
+ */
+async function grantPermission({ user_id, page_name, can_access, granted_by_id, notes }) {
+  const db = getPool();
+  const [result] = await db.query(
+    `INSERT INTO user_page_permissions (user_id, page_name, can_access, granted_by_id, notes)
+     VALUES (?, ?, ?, ?, ?)
+     ON DUPLICATE KEY UPDATE can_access = VALUES(can_access), granted_by_id = VALUES(granted_by_id), notes = VALUES(notes), granted_at = CURRENT_TIMESTAMP`,
+    [user_id, page_name, can_access, granted_by_id, notes || null]
+  );
+  return { id: result.insertId, user_id, page_name, can_access };
+}
+
+/**
+ * 일괄 권한 부여
+ */
+async function bulkGrant({ user_id, permissions, granted_by_id }) {
+  const db = getPool();
+  let count = 0;
+
+  for (const perm of permissions) {
+    if (!DEFAULT_PAGES[perm.page_name]) continue;
+    await db.query(
+      `INSERT INTO user_page_permissions (user_id, page_name, can_access, granted_by_id)
+       VALUES (?, ?, ?, ?)
+       ON DUPLICATE KEY UPDATE can_access = VALUES(can_access), granted_by_id = VALUES(granted_by_id), granted_at = CURRENT_TIMESTAMP`,
+      [user_id, perm.page_name, perm.can_access, granted_by_id]
+    );
+    count++;
+  }
+
+  return { updated_count: count };
+}
+
+/**
+ * 접근 권한 확인
+ */
+async function checkAccess(userId, pageName) {
+  const db = getPool();
+  const [rows] = await db.query(
+    'SELECT can_access FROM user_page_permissions WHERE user_id = ? AND page_name = ?',
+    [userId, pageName]
+  );
+
+  if (rows.length > 0) {
+    return { can_access: rows[0].can_access, reason: 'explicit_permission' };
+  }
+
+  // 기본 권한
+  const pageConfig = DEFAULT_PAGES[pageName];
+  if (!pageConfig) {
+    return { can_access: false, reason: 'invalid_page' };
+  }
+  return { can_access: pageConfig.default_access, reason: 'default_permission' };
+}
+
+/**
+ * 권한 삭제 (기본값으로 되돌림)
+ */
+async function deletePermission(permissionId) {
+  const db = getPool();
+  const [rows] = await db.query(
+    'SELECT * FROM user_page_permissions WHERE id = ?',
+    [permissionId]
+  );
+  if (rows.length === 0) return null;
+
+  await db.query('DELETE FROM user_page_permissions WHERE id = ?', [permissionId]);
+  return rows[0];
+}
+
+module.exports = {
+  DEFAULT_PAGES,
+  getUserPermissions,
+  grantPermission,
+  bulkGrant,
+  checkAccess,
+  deletePermission
+};
diff --git a/user-management/api/models/projectModel.js b/user-management/api/models/projectModel.js
new file mode 100644
index 0000000..894295a
--- /dev/null
+++ b/user-management/api/models/projectModel.js
@@ -0,0 +1,79 @@
+/**
+ * Project Model
+ *
+ * projects 테이블 CRUD (MariaDB)
+ * System 1과 같은 DB를 공유
+ */
+
+const { getPool } = require('./userModel');
+
+async function getAll() {
+  const db = getPool();
+  const [rows] = await db.query(
+    'SELECT * FROM projects ORDER BY project_id DESC'
+  );
+  return rows;
+}
+
+async function getActive() {
+  const db = getPool();
+  const [rows] = await db.query(
+    'SELECT * FROM projects WHERE is_active = TRUE ORDER BY project_name ASC'
+  );
+  return rows;
+}
+
+async function getById(id) {
+  const db = getPool();
+  const [rows] = await db.query(
+    'SELECT * FROM projects WHERE project_id = ?',
+    [id]
+  );
+  return rows[0] || null;
+}
+
+async function create({ job_no, project_name, contract_date, due_date, delivery_method, site, pm }) {
+  const db = getPool();
+  const [result] = await db.query(
+    `INSERT INTO projects (job_no, project_name, contract_date, due_date, delivery_method, site, pm)
+     VALUES (?, ?, ?, ?, ?, ?, ?)`,
+    [job_no, project_name, contract_date || null, due_date || null, delivery_method || null, site || null, pm || null]
+  );
+  return getById(result.insertId);
+}
+
+async function update(id, data) {
+  const db = getPool();
+  const fields = [];
+  const values = [];
+
+  if (data.job_no !== undefined) { fields.push('job_no = ?'); values.push(data.job_no); }
+  if (data.project_name !== undefined) { fields.push('project_name = ?'); values.push(data.project_name); }
+  if (data.contract_date !== undefined) { fields.push('contract_date = ?'); values.push(data.contract_date || null); }
+  if (data.due_date !== undefined) { fields.push('due_date = ?'); values.push(data.due_date || null); }
+  if (data.delivery_method !== undefined) { fields.push('delivery_method = ?'); values.push(data.delivery_method); }
+  if (data.site !== undefined) { fields.push('site = ?'); values.push(data.site); }
+  if (data.pm !== undefined) { fields.push('pm = ?'); values.push(data.pm); }
+  if (data.is_active !== undefined) { fields.push('is_active = ?'); values.push(data.is_active); }
+  if (data.project_status !== undefined) { fields.push('project_status = ?'); values.push(data.project_status); }
+  if (data.completed_date !== undefined) { fields.push('completed_date = ?'); values.push(data.completed_date || null); }
+
+  if (fields.length === 0) return getById(id);
+
+  values.push(id);
+  await db.query(
+    `UPDATE projects SET ${fields.join(', ')} WHERE project_id = ?`,
+    values
+  );
+  return getById(id);
+}
+
+async function deactivate(id) {
+  const db = getPool();
+  await db.query(
+    'UPDATE projects SET is_active = FALSE, project_status = ? WHERE project_id = ?',
+    ['completed', id]
+  );
+}
+
+module.exports = { getAll, getActive, getById, create, update, deactivate };
diff --git a/user-management/api/models/taskModel.js b/user-management/api/models/taskModel.js
new file mode 100644
index 0000000..20b56e2
--- /dev/null
+++ b/user-management/api/models/taskModel.js
@@ -0,0 +1,127 @@
+/**
+ * Task Model
+ *
+ * work_types + tasks 테이블 CRUD (MariaDB)
+ * System 1과 같은 DB를 공유
+ */
+
+const { getPool } = require('./userModel');
+
+/* ===== Work Types (공정) ===== */
+
+async function getWorkTypes() {
+  const db = getPool();
+  const [rows] = await db.query(
+    'SELECT * FROM work_types ORDER BY category ASC, name ASC'
+  );
+  return rows;
+}
+
+async function getWorkTypeById(id) {
+  const db = getPool();
+  const [rows] = await db.query('SELECT * FROM work_types WHERE id = ?', [id]);
+  return rows[0] || null;
+}
+
+async function createWorkType({ name, category, description }) {
+  const db = getPool();
+  const [result] = await db.query(
+    'INSERT INTO work_types (name, category, description) VALUES (?, ?, ?)',
+    [name, category || null, description || null]
+  );
+  return getWorkTypeById(result.insertId);
+}
+
+async function updateWorkType(id, data) {
+  const db = getPool();
+  const fields = [];
+  const values = [];
+  if (data.name !== undefined) { fields.push('name = ?'); values.push(data.name); }
+  if (data.category !== undefined) { fields.push('category = ?'); values.push(data.category || null); }
+  if (data.description !== undefined) { fields.push('description = ?'); values.push(data.description || null); }
+  if (fields.length === 0) return getWorkTypeById(id);
+  values.push(id);
+  await db.query(`UPDATE work_types SET ${fields.join(', ')} WHERE id = ?`, values);
+  return getWorkTypeById(id);
+}
+
+async function deleteWorkType(id) {
+  const db = getPool();
+  // 연결된 tasks의 work_type_id를 NULL로 설정 (FK cascade가 처리하지만 명시적으로)
+  await db.query('UPDATE tasks SET work_type_id = NULL WHERE work_type_id = ?', [id]);
+  await db.query('DELETE FROM work_types WHERE id = ?', [id]);
+}
+
+/* ===== Tasks (작업) ===== */
+
+async function getTasks(workTypeId) {
+  const db = getPool();
+  let sql = `SELECT t.*, wt.name AS work_type_name, wt.category AS work_type_category
+             FROM tasks t
+             LEFT JOIN work_types wt ON t.work_type_id = wt.id`;
+  const params = [];
+  if (workTypeId) {
+    sql += ' WHERE t.work_type_id = ?';
+    params.push(workTypeId);
+  }
+  sql += ' ORDER BY wt.category ASC, t.task_id DESC';
+  const [rows] = await db.query(sql, params);
+  return rows;
+}
+
+async function getActiveTasks() {
+  const db = getPool();
+  const [rows] = await db.query(
+    `SELECT t.*, wt.name AS work_type_name, wt.category AS work_type_category
+     FROM tasks t
+     LEFT JOIN work_types wt ON t.work_type_id = wt.id
+     WHERE t.is_active = TRUE
+     ORDER BY wt.category ASC, t.task_name ASC`
+  );
+  return rows;
+}
+
+async function getTaskById(id) {
+  const db = getPool();
+  const [rows] = await db.query(
+    `SELECT t.*, wt.name AS work_type_name, wt.category AS work_type_category
+     FROM tasks t
+     LEFT JOIN work_types wt ON t.work_type_id = wt.id
+     WHERE t.task_id = ?`,
+    [id]
+  );
+  return rows[0] || null;
+}
+
+async function createTask({ work_type_id, task_name, description, is_active }) {
+  const db = getPool();
+  const [result] = await db.query(
+    'INSERT INTO tasks (work_type_id, task_name, description, is_active) VALUES (?, ?, ?, ?)',
+    [work_type_id || null, task_name, description || null, is_active !== undefined ? is_active : true]
+  );
+  return getTaskById(result.insertId);
+}
+
+async function updateTask(id, data) {
+  const db = getPool();
+  const fields = [];
+  const values = [];
+  if (data.work_type_id !== undefined) { fields.push('work_type_id = ?'); values.push(data.work_type_id || null); }
+  if (data.task_name !== undefined) { fields.push('task_name = ?'); values.push(data.task_name); }
+  if (data.description !== undefined) { fields.push('description = ?'); values.push(data.description || null); }
+  if (data.is_active !== undefined) { fields.push('is_active = ?'); values.push(data.is_active); }
+  if (fields.length === 0) return getTaskById(id);
+  values.push(id);
+  await db.query(`UPDATE tasks SET ${fields.join(', ')} WHERE task_id = ?`, values);
+  return getTaskById(id);
+}
+
+async function deleteTask(id) {
+  const db = getPool();
+  await db.query('DELETE FROM tasks WHERE task_id = ?', [id]);
+}
+
+module.exports = {
+  getWorkTypes, getWorkTypeById, createWorkType, updateWorkType, deleteWorkType,
+  getTasks, getActiveTasks, getTaskById, createTask, updateTask, deleteTask
+};
diff --git a/user-management/api/models/userModel.js b/user-management/api/models/userModel.js
new file mode 100644
index 0000000..5c5863e
--- /dev/null
+++ b/user-management/api/models/userModel.js
@@ -0,0 +1,158 @@
+/**
+ * User Model
+ *
+ * sso_users 테이블 CRUD 및 비밀번호 관리
+ * sso-auth-service/models/userModel.js 기반
+ */
+
+const mysql = require('mysql2/promise');
+const bcrypt = require('bcrypt');
+const crypto = require('crypto');
+
+let pool;
+
+function getPool() {
+  if (!pool) {
+    pool = mysql.createPool({
+      host: process.env.DB_HOST || 'mariadb',
+      port: parseInt(process.env.DB_PORT) || 3306,
+      user: process.env.DB_USER || 'hyungi_user',
+      password: process.env.DB_PASSWORD,
+      database: process.env.DB_NAME || 'hyungi',
+      waitForConnections: true,
+      connectionLimit: 10,
+      queueLimit: 0
+    });
+  }
+  return pool;
+}
+
+/**
+ * pbkdf2_sha256 해시 검증 (passlib 호환)
+ */
+function verifyPbkdf2(password, storedHash) {
+  try {
+    const parts = storedHash.split('$');
+    if (parts.length < 5) return false;
+
+    const rounds = parseInt(parts[2]);
+    const salt = parts[3].replace(/\./g, '+');
+    const hash = parts[4].replace(/\./g, '+');
+
+    const padded = (s) => s + '='.repeat((4 - s.length % 4) % 4);
+
+    const saltBuffer = Buffer.from(padded(salt), 'base64');
+    const expectedHash = Buffer.from(padded(hash), 'base64');
+
+    const derivedKey = crypto.pbkdf2Sync(password, saltBuffer, rounds, expectedHash.length, 'sha256');
+    return crypto.timingSafeEqual(derivedKey, expectedHash);
+  } catch (err) {
+    console.error('pbkdf2 verify error:', err.message);
+    return false;
+  }
+}
+
+/**
+ * 비밀번호 검증 (bcrypt 또는 pbkdf2_sha256 자동 감지)
+ */
+async function verifyPassword(password, storedHash) {
+  if (!password || !storedHash) return false;
+
+  if (storedHash.startsWith('$pbkdf2-sha256$')) {
+    return verifyPbkdf2(password, storedHash);
+  }
+
+  if (storedHash.startsWith('$2b$') || storedHash.startsWith('$2a$')) {
+    return bcrypt.compare(password, storedHash);
+  }
+
+  return false;
+}
+
+/**
+ * bcrypt로 비밀번호 해시 생성
+ */
+async function hashPassword(password) {
+  return bcrypt.hash(password, 10);
+}
+
+async function findByUsername(username) {
+  const db = getPool();
+  const [rows] = await db.query(
+    'SELECT * FROM sso_users WHERE username = ? AND is_active = TRUE',
+    [username]
+  );
+  return rows[0] || null;
+}
+
+async function findById(userId) {
+  const db = getPool();
+  const [rows] = await db.query(
+    'SELECT * FROM sso_users WHERE user_id = ?',
+    [userId]
+  );
+  return rows[0] || null;
+}
+
+async function findAll() {
+  const db = getPool();
+  const [rows] = await db.query(
+    'SELECT user_id, username, name, department, role, system1_access, system2_access, system3_access, is_active, last_login, created_at FROM sso_users ORDER BY user_id'
+  );
+  return rows;
+}
+
+async function create({ username, password, name, department, role }) {
+  const db = getPool();
+  const password_hash = await hashPassword(password);
+  const [result] = await db.query(
+    `INSERT INTO sso_users (username, password_hash, name, department, role)
+     VALUES (?, ?, ?, ?, ?)`,
+    [username, password_hash, name || null, department || null, role || 'user']
+  );
+  return findById(result.insertId);
+}
+
+async function update(userId, data) {
+  const db = getPool();
+  const fields = [];
+  const values = [];
+
+  if (data.name !== undefined) { fields.push('name = ?'); values.push(data.name); }
+  if (data.department !== undefined) { fields.push('department = ?'); values.push(data.department); }
+  if (data.role !== undefined) { fields.push('role = ?'); values.push(data.role); }
+  if (data.system1_access !== undefined) { fields.push('system1_access = ?'); values.push(data.system1_access); }
+  if (data.system2_access !== undefined) { fields.push('system2_access = ?'); values.push(data.system2_access); }
+  if (data.system3_access !== undefined) { fields.push('system3_access = ?'); values.push(data.system3_access); }
+  if (data.is_active !== undefined) { fields.push('is_active = ?'); values.push(data.is_active); }
+  if (data.password) {
+    fields.push('password_hash = ?');
+    values.push(await hashPassword(data.password));
+  }
+
+  if (fields.length === 0) return findById(userId);
+
+  values.push(userId);
+  await db.query(
+    `UPDATE sso_users SET ${fields.join(', ')} WHERE user_id = ?`,
+    values
+  );
+  return findById(userId);
+}
+
+async function deleteUser(userId) {
+  const db = getPool();
+  await db.query('UPDATE sso_users SET is_active = FALSE WHERE user_id = ?', [userId]);
+}
+
+module.exports = {
+  verifyPassword,
+  hashPassword,
+  findByUsername,
+  findById,
+  findAll,
+  create,
+  update,
+  deleteUser,
+  getPool
+};
diff --git a/user-management/api/models/vacationModel.js b/user-management/api/models/vacationModel.js
new file mode 100644
index 0000000..cc4ee74
--- /dev/null
+++ b/user-management/api/models/vacationModel.js
@@ -0,0 +1,219 @@
+/**
+ * Vacation Model
+ *
+ * vacation_types + vacation_balance_details CRUD (MariaDB)
+ * System 1과 같은 DB를 공유
+ */
+
+const { getPool } = require('./userModel');
+
+/* ===== Vacation Types (휴가 유형) ===== */
+
+async function getVacationTypes() {
+  const db = getPool();
+  const [rows] = await db.query(
+    'SELECT * FROM vacation_types WHERE is_active = TRUE ORDER BY priority ASC, id ASC'
+  );
+  return rows;
+}
+
+async function getAllVacationTypes() {
+  const db = getPool();
+  const [rows] = await db.query(
+    'SELECT * FROM vacation_types ORDER BY priority ASC, id ASC'
+  );
+  return rows;
+}
+
+async function getVacationTypeById(id) {
+  const db = getPool();
+  const [rows] = await db.query('SELECT * FROM vacation_types WHERE id = ?', [id]);
+  return rows[0] || null;
+}
+
+async function createVacationType({ type_code, type_name, deduct_days, is_special, priority, description }) {
+  const db = getPool();
+  const [result] = await db.query(
+    `INSERT INTO vacation_types (type_code, type_name, deduct_days, is_special, priority, description, is_system)
+     VALUES (?, ?, ?, ?, ?, ?, FALSE)`,
+    [type_code, type_name, deduct_days ?? 1.0, is_special ? 1 : 0, priority ?? 99, description || null]
+  );
+  return getVacationTypeById(result.insertId);
+}
+
+async function updateVacationType(id, data) {
+  const db = getPool();
+  const fields = [];
+  const values = [];
+  if (data.type_code !== undefined) { fields.push('type_code = ?'); values.push(data.type_code); }
+  if (data.type_name !== undefined) { fields.push('type_name = ?'); values.push(data.type_name); }
+  if (data.deduct_days !== undefined) { fields.push('deduct_days = ?'); values.push(data.deduct_days); }
+  if (data.is_special !== undefined) { fields.push('is_special = ?'); values.push(data.is_special ? 1 : 0); }
+  if (data.priority !== undefined) { fields.push('priority = ?'); values.push(data.priority); }
+  if (data.description !== undefined) { fields.push('description = ?'); values.push(data.description || null); }
+  if (data.is_active !== undefined) { fields.push('is_active = ?'); values.push(data.is_active ? 1 : 0); }
+  if (fields.length === 0) return getVacationTypeById(id);
+  values.push(id);
+  await db.query(`UPDATE vacation_types SET ${fields.join(', ')} WHERE id = ?`, values);
+  return getVacationTypeById(id);
+}
+
+async function deleteVacationType(id) {
+  const db = getPool();
+  // 시스템 유형은 비활성화만
+  const type = await getVacationTypeById(id);
+  if (type && type.is_system) {
+    await db.query('UPDATE vacation_types SET is_active = FALSE WHERE id = ?', [id]);
+  } else {
+    await db.query('UPDATE vacation_types SET is_active = FALSE WHERE id = ?', [id]);
+  }
+}
+
+async function updatePriorities(items) {
+  const db = getPool();
+  for (const { id, priority } of items) {
+    await db.query('UPDATE vacation_types SET priority = ? WHERE id = ?', [priority, id]);
+  }
+}
+
+/* ===== Vacation Balances (연차 배정) ===== */
+
+async function getBalancesByYear(year) {
+  const db = getPool();
+  const [rows] = await db.query(
+    `SELECT vbd.*, vt.type_code, vt.type_name, vt.deduct_days, vt.priority,
+            w.worker_name, w.hire_date
+     FROM vacation_balance_details vbd
+     JOIN vacation_types vt ON vbd.vacation_type_id = vt.id
+     JOIN workers w ON vbd.worker_id = w.worker_id
+     WHERE vbd.year = ?
+     ORDER BY w.worker_name ASC, vt.priority ASC`,
+    [year]
+  );
+  return rows;
+}
+
+async function getBalancesByWorkerYear(workerId, year) {
+  const db = getPool();
+  const [rows] = await db.query(
+    `SELECT vbd.*, vt.type_code, vt.type_name, vt.deduct_days, vt.priority
+     FROM vacation_balance_details vbd
+     JOIN vacation_types vt ON vbd.vacation_type_id = vt.id
+     WHERE vbd.worker_id = ? AND vbd.year = ?
+     ORDER BY vt.priority ASC`,
+    [workerId, year]
+  );
+  return rows;
+}
+
+async function getBalanceById(id) {
+  const db = getPool();
+  const [rows] = await db.query(
+    `SELECT vbd.*, vt.type_code, vt.type_name
+     FROM vacation_balance_details vbd
+     JOIN vacation_types vt ON vbd.vacation_type_id = vt.id
+     WHERE vbd.id = ?`,
+    [id]
+  );
+  return rows[0] || null;
+}
+
+async function createBalance({ worker_id, vacation_type_id, year, total_days, used_days, notes, created_by }) {
+  const db = getPool();
+  const [result] = await db.query(
+    `INSERT INTO vacation_balance_details (worker_id, vacation_type_id, year, total_days, used_days, notes, created_by)
+     VALUES (?, ?, ?, ?, ?, ?, ?)
+     ON DUPLICATE KEY UPDATE total_days = VALUES(total_days), used_days = VALUES(used_days), notes = VALUES(notes)`,
+    [worker_id, vacation_type_id, year, total_days ?? 0, used_days ?? 0, notes || null, created_by]
+  );
+  return result.insertId ? getBalanceById(result.insertId) : null;
+}
+
+async function updateBalance(id, data) {
+  const db = getPool();
+  const fields = [];
+  const values = [];
+  if (data.total_days !== undefined) { fields.push('total_days = ?'); values.push(data.total_days); }
+  if (data.used_days !== undefined) { fields.push('used_days = ?'); values.push(data.used_days); }
+  if (data.notes !== undefined) { fields.push('notes = ?'); values.push(data.notes || null); }
+  if (fields.length === 0) return getBalanceById(id);
+  values.push(id);
+  await db.query(`UPDATE vacation_balance_details SET ${fields.join(', ')} WHERE id = ?`, values);
+  return getBalanceById(id);
+}
+
+async function deleteBalance(id) {
+  const db = getPool();
+  await db.query('DELETE FROM vacation_balance_details WHERE id = ?', [id]);
+}
+
+async function bulkUpsertBalances(balances) {
+  const db = getPool();
+  let count = 0;
+  for (const b of balances) {
+    await db.query(
+      `INSERT INTO vacation_balance_details (worker_id, vacation_type_id, year, total_days, used_days, notes, created_by)
+       VALUES (?, ?, ?, ?, ?, ?, ?)
+       ON DUPLICATE KEY UPDATE total_days = VALUES(total_days), notes = VALUES(notes)`,
+      [b.worker_id, b.vacation_type_id, b.year, b.total_days ?? 0, b.used_days ?? 0, b.notes || null, b.created_by]
+    );
+    count++;
+  }
+  return count;
+}
+
+/* ===== 연차 자동 계산 (근로기준법) ===== */
+
+function calculateAnnualDays(hireDate, targetYear) {
+  if (!hireDate) return 0;
+  const hire = new Date(hireDate);
+  const yearStart = new Date(targetYear, 0, 1);
+  const monthsDiff = (yearStart.getFullYear() - hire.getFullYear()) * 12 + (yearStart.getMonth() - hire.getMonth());
+
+  if (monthsDiff < 0) return 0;
+  if (monthsDiff < 12) {
+    // 1년 미만: 근무 개월 수
+    return Math.max(0, Math.floor(monthsDiff));
+  }
+  // 1년 이상: 15일 + 2년마다 1일 추가 (최대 25일)
+  const yearsWorked = Math.floor(monthsDiff / 12);
+  const additional = Math.floor((yearsWorked - 1) / 2);
+  return Math.min(15 + additional, 25);
+}
+
+async function autoCalculateForAllWorkers(year, createdBy) {
+  const db = getPool();
+  const [workers] = await db.query(
+    'SELECT worker_id, worker_name, hire_date FROM workers WHERE status != ? ORDER BY worker_name',
+    ['inactive']
+  );
+  // 연차 유형 (ANNUAL_FULL) 찾기
+  const [types] = await db.query(
+    "SELECT id FROM vacation_types WHERE type_code = 'ANNUAL_FULL' AND is_active = TRUE LIMIT 1"
+  );
+  if (!types.length) return { count: 0, results: [] };
+  const annualTypeId = types[0].id;
+
+  const results = [];
+  for (const w of workers) {
+    const days = calculateAnnualDays(w.hire_date, year);
+    if (days > 0) {
+      await db.query(
+        `INSERT INTO vacation_balance_details (worker_id, vacation_type_id, year, total_days, used_days, notes, created_by)
+         VALUES (?, ?, ?, ?, 0, ?, ?)
+         ON DUPLICATE KEY UPDATE total_days = VALUES(total_days), notes = VALUES(notes)`,
+        [w.worker_id, annualTypeId, year, days, `자동계산 (입사: ${w.hire_date ? w.hire_date.toISOString().substring(0,10) : ''})`, createdBy]
+      );
+      results.push({ worker_id: w.worker_id, worker_name: w.worker_name, days, hire_date: w.hire_date });
+    }
+  }
+  return { count: results.length, results };
+}
+
+module.exports = {
+  getVacationTypes, getAllVacationTypes, getVacationTypeById,
+  createVacationType, updateVacationType, deleteVacationType, updatePriorities,
+  getBalancesByYear, getBalancesByWorkerYear, getBalanceById,
+  createBalance, updateBalance, deleteBalance, bulkUpsertBalances,
+  calculateAnnualDays, autoCalculateForAllWorkers
+};
diff --git a/user-management/api/models/workerModel.js b/user-management/api/models/workerModel.js
new file mode 100644
index 0000000..fe6dccf
--- /dev/null
+++ b/user-management/api/models/workerModel.js
@@ -0,0 +1,74 @@
+/**
+ * Worker Model
+ *
+ * workers 테이블 CRUD (MariaDB)
+ */
+
+const { getPool } = require('./userModel');
+
+async function getAll() {
+  const db = getPool();
+  const [rows] = await db.query(
+    `SELECT w.*, d.department_name
+     FROM workers w
+     LEFT JOIN departments d ON w.department_id = d.department_id
+     ORDER BY w.worker_id DESC`
+  );
+  return rows;
+}
+
+async function getById(id) {
+  const db = getPool();
+  const [rows] = await db.query(
+    `SELECT w.*, d.department_name
+     FROM workers w
+     LEFT JOIN departments d ON w.department_id = d.department_id
+     WHERE w.worker_id = ?`,
+    [id]
+  );
+  return rows[0] || null;
+}
+
+async function create({ worker_name, job_type, department_id, phone_number, hire_date, notes }) {
+  const db = getPool();
+  const [result] = await db.query(
+    `INSERT INTO workers (worker_name, job_type, department_id, phone_number, hire_date, notes)
+     VALUES (?, ?, ?, ?, ?, ?)`,
+    [worker_name, job_type || null, department_id || null, phone_number || null, hire_date || null, notes || null]
+  );
+  return getById(result.insertId);
+}
+
+async function update(id, data) {
+  const db = getPool();
+  const fields = [];
+  const values = [];
+
+  if (data.worker_name !== undefined) { fields.push('worker_name = ?'); values.push(data.worker_name); }
+  if (data.job_type !== undefined) { fields.push('job_type = ?'); values.push(data.job_type); }
+  if (data.status !== undefined) { fields.push('status = ?'); values.push(data.status); }
+  if (data.department_id !== undefined) { fields.push('department_id = ?'); values.push(data.department_id || null); }
+  if (data.employment_status !== undefined) { fields.push('employment_status = ?'); values.push(data.employment_status); }
+  if (data.phone_number !== undefined) { fields.push('phone_number = ?'); values.push(data.phone_number || null); }
+  if (data.hire_date !== undefined) { fields.push('hire_date = ?'); values.push(data.hire_date || null); }
+  if (data.notes !== undefined) { fields.push('notes = ?'); values.push(data.notes || null); }
+
+  if (fields.length === 0) return getById(id);
+
+  values.push(id);
+  await db.query(
+    `UPDATE workers SET ${fields.join(', ')} WHERE worker_id = ?`,
+    values
+  );
+  return getById(id);
+}
+
+async function deactivate(id) {
+  const db = getPool();
+  await db.query(
+    'UPDATE workers SET status = ? WHERE worker_id = ?',
+    ['inactive', id]
+  );
+}
+
+module.exports = { getAll, getById, create, update, deactivate };
diff --git a/user-management/api/models/workplaceModel.js b/user-management/api/models/workplaceModel.js
new file mode 100644
index 0000000..5f562f1
--- /dev/null
+++ b/user-management/api/models/workplaceModel.js
@@ -0,0 +1,158 @@
+/**
+ * Workplace Model
+ *
+ * workplaces + workplace_categories 테이블 CRUD (MariaDB)
+ */
+
+const { getPool } = require('./userModel');
+
+async function getAll() {
+  const db = getPool();
+  const [rows] = await db.query(
+    `SELECT w.*, c.category_name
+     FROM workplaces w
+     LEFT JOIN workplace_categories c ON w.category_id = c.category_id
+     ORDER BY w.display_priority ASC, w.workplace_id DESC`
+  );
+  return rows;
+}
+
+async function getById(id) {
+  const db = getPool();
+  const [rows] = await db.query(
+    `SELECT w.*, c.category_name
+     FROM workplaces w
+     LEFT JOIN workplace_categories c ON w.category_id = c.category_id
+     WHERE w.workplace_id = ?`,
+    [id]
+  );
+  return rows[0] || null;
+}
+
+async function getCategories() {
+  const db = getPool();
+  const [rows] = await db.query(
+    'SELECT * FROM workplace_categories WHERE is_active = TRUE ORDER BY display_order ASC'
+  );
+  return rows;
+}
+
+async function create({ workplace_name, category_id, workplace_purpose, description, display_priority }) {
+  const db = getPool();
+  const [result] = await db.query(
+    `INSERT INTO workplaces (workplace_name, category_id, workplace_purpose, description, display_priority)
+     VALUES (?, ?, ?, ?, ?)`,
+    [workplace_name, category_id || null, workplace_purpose || null, description || null, display_priority || 0]
+  );
+  return getById(result.insertId);
+}
+
+async function update(id, data) {
+  const db = getPool();
+  const fields = [];
+  const values = [];
+
+  if (data.workplace_name !== undefined) { fields.push('workplace_name = ?'); values.push(data.workplace_name); }
+  if (data.category_id !== undefined) { fields.push('category_id = ?'); values.push(data.category_id || null); }
+  if (data.workplace_purpose !== undefined) { fields.push('workplace_purpose = ?'); values.push(data.workplace_purpose); }
+  if (data.description !== undefined) { fields.push('description = ?'); values.push(data.description || null); }
+  if (data.is_active !== undefined) { fields.push('is_active = ?'); values.push(data.is_active); }
+  if (data.display_priority !== undefined) { fields.push('display_priority = ?'); values.push(data.display_priority); }
+
+  if (fields.length === 0) return getById(id);
+
+  values.push(id);
+  await db.query(
+    `UPDATE workplaces SET ${fields.join(', ')} WHERE workplace_id = ?`,
+    values
+  );
+  return getById(id);
+}
+
+async function deactivate(id) {
+  const db = getPool();
+  await db.query(
+    'UPDATE workplaces SET is_active = FALSE WHERE workplace_id = ?',
+    [id]
+  );
+}
+
+// ==================== 구역지도 ====================
+
+async function updateCategoryLayoutImage(id, imagePath) {
+  const db = getPool();
+  await db.query(
+    'UPDATE workplace_categories SET layout_image = ? WHERE category_id = ?',
+    [imagePath, id]
+  );
+  const [rows] = await db.query('SELECT * FROM workplace_categories WHERE category_id = ?', [id]);
+  return rows[0] || null;
+}
+
+async function createMapRegion({ workplace_id, category_id, x_start, y_start, x_end, y_end, shape, polygon_points }) {
+  const db = getPool();
+  const [result] = await db.query(
+    `INSERT INTO workplace_map_regions (workplace_id, category_id, x_start, y_start, x_end, y_end, shape, polygon_points)
+     VALUES (?, ?, ?, ?, ?, ?, ?, ?)`,
+    [workplace_id, category_id, x_start, y_start, x_end, y_end, shape || 'rect', polygon_points || null]
+  );
+  const [rows] = await db.query('SELECT * FROM workplace_map_regions WHERE region_id = ?', [result.insertId]);
+  return rows[0];
+}
+
+async function getMapRegionsByCategory(categoryId) {
+  const db = getPool();
+  const [rows] = await db.query(
+    `SELECT r.*, w.workplace_name
+     FROM workplace_map_regions r
+     LEFT JOIN workplaces w ON r.workplace_id = w.workplace_id
+     WHERE r.category_id = ?
+     ORDER BY r.region_id ASC`,
+    [categoryId]
+  );
+  return rows;
+}
+
+async function updateMapRegion(regionId, { x_start, y_start, x_end, y_end, workplace_id, shape, polygon_points }) {
+  const db = getPool();
+  const fields = [];
+  const values = [];
+
+  if (x_start !== undefined) { fields.push('x_start = ?'); values.push(x_start); }
+  if (y_start !== undefined) { fields.push('y_start = ?'); values.push(y_start); }
+  if (x_end !== undefined) { fields.push('x_end = ?'); values.push(x_end); }
+  if (y_end !== undefined) { fields.push('y_end = ?'); values.push(y_end); }
+  if (workplace_id !== undefined) { fields.push('workplace_id = ?'); values.push(workplace_id); }
+  if (shape !== undefined) { fields.push('shape = ?'); values.push(shape); }
+  if (polygon_points !== undefined) { fields.push('polygon_points = ?'); values.push(polygon_points); }
+
+  if (fields.length === 0) return null;
+
+  values.push(regionId);
+  await db.query(`UPDATE workplace_map_regions SET ${fields.join(', ')} WHERE region_id = ?`, values);
+  const [rows] = await db.query(
+    `SELECT r.*, w.workplace_name
+     FROM workplace_map_regions r
+     LEFT JOIN workplaces w ON r.workplace_id = w.workplace_id
+     WHERE r.region_id = ?`,
+    [regionId]
+  );
+  return rows[0] || null;
+}
+
+async function deleteMapRegion(regionId) {
+  const db = getPool();
+  await db.query('DELETE FROM workplace_map_regions WHERE region_id = ?', [regionId]);
+}
+
+async function updateWorkplaceLayoutImage(id, imagePath) {
+  const db = getPool();
+  await db.query('UPDATE workplaces SET layout_image = ? WHERE workplace_id = ?', [imagePath, id]);
+  return getById(id);
+}
+
+module.exports = {
+  getAll, getById, getCategories, create, update, deactivate,
+  updateCategoryLayoutImage, createMapRegion, getMapRegionsByCategory, updateMapRegion, deleteMapRegion,
+  updateWorkplaceLayoutImage
+};
diff --git a/user-management/api/package.json b/user-management/api/package.json
new file mode 100644
index 0000000..2c8a430
--- /dev/null
+++ b/user-management/api/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "tkuser-api",
+  "version": "1.0.0",
+  "description": "TK Factory Services - 사용자 관리 서비스",
+  "main": "index.js",
+  "scripts": {
+    "start": "node index.js",
+    "dev": "node --watch index.js"
+  },
+  "dependencies": {
+    "bcrypt": "^6.0.0",
+    "cors": "^2.8.5",
+    "express": "^4.18.2",
+    "jsonwebtoken": "^9.0.0",
+    "multer": "^1.4.5-lts.1",
+    "mysql2": "^3.14.1"
+  }
+}
diff --git a/user-management/api/routes/departmentRoutes.js b/user-management/api/routes/departmentRoutes.js
new file mode 100644
index 0000000..46073bb
--- /dev/null
+++ b/user-management/api/routes/departmentRoutes.js
@@ -0,0 +1,16 @@
+/**
+ * Department Routes
+ */
+
+const express = require('express');
+const router = express.Router();
+const departmentController = require('../controllers/departmentController');
+const { requireAuth, requireAdmin } = require('../middleware/auth');
+
+router.get('/', requireAuth, departmentController.getAll);
+router.get('/:id', requireAuth, departmentController.getById);
+router.post('/', requireAdmin, departmentController.create);
+router.put('/:id', requireAdmin, departmentController.update);
+router.delete('/:id', requireAdmin, departmentController.remove);
+
+module.exports = router;
diff --git a/user-management/api/routes/equipmentRoutes.js b/user-management/api/routes/equipmentRoutes.js
new file mode 100644
index 0000000..0eab077
--- /dev/null
+++ b/user-management/api/routes/equipmentRoutes.js
@@ -0,0 +1,32 @@
+/**
+ * Equipment Routes
+ */
+
+const express = require('express');
+const router = express.Router();
+const equipmentController = require('../controllers/equipmentController');
+const { requireAuth, requireAdmin } = require('../middleware/auth');
+const upload = require('../middleware/upload');
+
+// 고정 경로를 /:id 보다 먼저 등록
+router.get('/types', requireAuth, equipmentController.getTypes);
+router.get('/next-code', requireAuth, equipmentController.getNextCode);
+router.get('/workplace/:workplaceId', requireAuth, equipmentController.getByWorkplace);
+// 사진 삭제 (photo_id만으로)
+router.delete('/photos/:photoId', requireAdmin, equipmentController.deletePhoto);
+
+// 기본 CRUD
+router.get('/', requireAuth, equipmentController.getAll);
+router.get('/:id', requireAuth, equipmentController.getById);
+router.post('/', requireAdmin, equipmentController.create);
+router.put('/:id', requireAdmin, equipmentController.update);
+router.delete('/:id', requireAdmin, equipmentController.remove);
+
+// 지도 위치
+router.patch('/:id/map-position', requireAdmin, equipmentController.updateMapPosition);
+
+// 사진
+router.post('/:id/photos', requireAdmin, upload.single('photo'), equipmentController.addPhoto);
+router.get('/:id/photos', requireAuth, equipmentController.getPhotos);
+
+module.exports = router;
diff --git a/user-management/api/routes/permissionRoutes.js b/user-management/api/routes/permissionRoutes.js
new file mode 100644
index 0000000..c24d355
--- /dev/null
+++ b/user-management/api/routes/permissionRoutes.js
@@ -0,0 +1,23 @@
+/**
+ * Permission Routes
+ */
+
+const express = require('express');
+const router = express.Router();
+const permissionController = require('../controllers/permissionController');
+const { requireAuth, requireAdmin } = require('../middleware/auth');
+
+// 권한 부여 (admin)
+router.post('/grant', requireAdmin, permissionController.grantPermission);
+router.post('/bulk-grant', requireAdmin, permissionController.bulkGrant);
+
+// 접근 권한 확인 (auth)
+router.get('/check/:uid/:page', requireAuth, permissionController.checkAccess);
+
+// 설정 가능 페이지 목록 (auth)
+router.get('/available-pages', requireAuth, permissionController.getAvailablePages);
+
+// 권한 삭제 (admin)
+router.delete('/:id', requireAdmin, permissionController.deletePermission);
+
+module.exports = router;
diff --git a/user-management/api/routes/projectRoutes.js b/user-management/api/routes/projectRoutes.js
new file mode 100644
index 0000000..c55c890
--- /dev/null
+++ b/user-management/api/routes/projectRoutes.js
@@ -0,0 +1,17 @@
+/**
+ * Project Routes
+ */
+
+const express = require('express');
+const router = express.Router();
+const projectController = require('../controllers/projectController');
+const { requireAuth, requireAdmin } = require('../middleware/auth');
+
+router.get('/', requireAuth, projectController.getAll);
+router.get('/active', requireAuth, projectController.getActive);
+router.get('/:id', requireAuth, projectController.getById);
+router.post('/', requireAdmin, projectController.create);
+router.put('/:id', requireAdmin, projectController.update);
+router.delete('/:id', requireAdmin, projectController.remove);
+
+module.exports = router;
diff --git a/user-management/api/routes/taskRoutes.js b/user-management/api/routes/taskRoutes.js
new file mode 100644
index 0000000..bd0df25
--- /dev/null
+++ b/user-management/api/routes/taskRoutes.js
@@ -0,0 +1,26 @@
+/**
+ * Task Routes
+ *
+ * 공정(work-types) + 작업(tasks) 라우팅
+ */
+
+const express = require('express');
+const router = express.Router();
+const taskController = require('../controllers/taskController');
+const { requireAuth, requireAdmin } = require('../middleware/auth');
+
+// Work Types (공정)
+router.get('/work-types', requireAuth, taskController.getWorkTypes);
+router.post('/work-types', requireAdmin, taskController.createWorkType);
+router.put('/work-types/:id', requireAdmin, taskController.updateWorkType);
+router.delete('/work-types/:id', requireAdmin, taskController.deleteWorkType);
+
+// Tasks (작업)
+router.get('/', requireAuth, taskController.getTasks);
+router.get('/active', requireAuth, taskController.getActiveTasks);
+router.get('/:id', requireAuth, taskController.getTaskById);
+router.post('/', requireAdmin, taskController.createTask);
+router.put('/:id', requireAdmin, taskController.updateTask);
+router.delete('/:id', requireAdmin, taskController.deleteTask);
+
+module.exports = router;
diff --git a/user-management/api/routes/userRoutes.js b/user-management/api/routes/userRoutes.js
new file mode 100644
index 0000000..cb0ee95
--- /dev/null
+++ b/user-management/api/routes/userRoutes.js
@@ -0,0 +1,24 @@
+/**
+ * User Routes
+ */
+
+const express = require('express');
+const router = express.Router();
+const userController = require('../controllers/userController');
+const permissionController = require('../controllers/permissionController');
+const { requireAuth, requireAdmin } = require('../middleware/auth');
+
+// 사용자 CRUD (admin)
+router.get('/', requireAdmin, userController.getUsers);
+router.post('/', requireAdmin, userController.createUser);
+router.put('/:id', requireAdmin, userController.updateUser);
+router.delete('/:id', requireAdmin, userController.deleteUser);
+
+// 비밀번호 관리
+router.post('/:id/reset-password', requireAdmin, userController.resetPassword);
+router.post('/change-password', requireAuth, userController.changePassword);
+
+// 사용자별 페이지 권한 조회 (auth - /api/users/:id/page-permissions)
+router.get('/:id/page-permissions', requireAuth, permissionController.getUserPermissions);
+
+module.exports = router;
diff --git a/user-management/api/routes/vacationRoutes.js b/user-management/api/routes/vacationRoutes.js
new file mode 100644
index 0000000..94b6d76
--- /dev/null
+++ b/user-management/api/routes/vacationRoutes.js
@@ -0,0 +1,28 @@
+/**
+ * Vacation Routes
+ *
+ * 휴가 유형 + 연차 배정 라우팅
+ */
+
+const express = require('express');
+const router = express.Router();
+const vc = require('../controllers/vacationController');
+const { requireAuth, requireAdmin } = require('../middleware/auth');
+
+// Vacation Types (휴가 유형)
+router.get('/types', requireAuth, vc.getVacationTypes);
+router.post('/types', requireAdmin, vc.createVacationType);
+router.put('/types/priorities', requireAdmin, vc.updatePriorities);
+router.put('/types/:id', requireAdmin, vc.updateVacationType);
+router.delete('/types/:id', requireAdmin, vc.deleteVacationType);
+
+// Vacation Balances (연차 배정)
+router.get('/balances/year/:year', requireAdmin, vc.getBalancesByYear);
+router.get('/balances/worker/:workerId/year/:year', requireAuth, vc.getBalancesByWorkerYear);
+router.post('/balances', requireAdmin, vc.createBalance);
+router.post('/balances/bulk-upsert', requireAdmin, vc.bulkUpsertBalances);
+router.post('/balances/auto-calculate', requireAdmin, vc.autoCalculate);
+router.put('/balances/:id', requireAdmin, vc.updateBalance);
+router.delete('/balances/:id', requireAdmin, vc.deleteBalance);
+
+module.exports = router;
diff --git a/user-management/api/routes/workerRoutes.js b/user-management/api/routes/workerRoutes.js
new file mode 100644
index 0000000..aad996e
--- /dev/null
+++ b/user-management/api/routes/workerRoutes.js
@@ -0,0 +1,16 @@
+/**
+ * Worker Routes
+ */
+
+const express = require('express');
+const router = express.Router();
+const workerController = require('../controllers/workerController');
+const { requireAuth, requireAdmin } = require('../middleware/auth');
+
+router.get('/', requireAuth, workerController.getAll);
+router.get('/:id', requireAuth, workerController.getById);
+router.post('/', requireAdmin, workerController.create);
+router.put('/:id', requireAdmin, workerController.update);
+router.delete('/:id', requireAdmin, workerController.remove);
+
+module.exports = router;
diff --git a/user-management/api/routes/workplaceRoutes.js b/user-management/api/routes/workplaceRoutes.js
new file mode 100644
index 0000000..45ffb49
--- /dev/null
+++ b/user-management/api/routes/workplaceRoutes.js
@@ -0,0 +1,28 @@
+/**
+ * Workplace Routes
+ */
+
+const express = require('express');
+const router = express.Router();
+const workplaceController = require('../controllers/workplaceController');
+const { requireAuth, requireAdmin } = require('../middleware/auth');
+const upload = require('../middleware/upload');
+
+router.get('/categories', requireAuth, workplaceController.getCategories);
+
+// 구역지도 (/:id 보다 먼저 등록)
+router.post('/categories/:id/layout-image', requireAdmin, upload.single('image'), workplaceController.uploadCategoryLayoutImage);
+router.get('/categories/:categoryId/map-regions', requireAuth, workplaceController.getMapRegionsByCategory);
+router.post('/map-regions', requireAdmin, workplaceController.createMapRegion);
+router.put('/map-regions/:id', requireAdmin, workplaceController.updateMapRegion);
+router.delete('/map-regions/:id', requireAdmin, workplaceController.deleteMapRegion);
+
+router.post('/:id/layout-image', requireAdmin, upload.single('image'), workplaceController.uploadWorkplaceLayoutImage);
+
+router.get('/', requireAuth, workplaceController.getAll);
+router.get('/:id', requireAuth, workplaceController.getById);
+router.post('/', requireAdmin, workplaceController.create);
+router.put('/:id', requireAdmin, workplaceController.update);
+router.delete('/:id', requireAdmin, workplaceController.remove);
+
+module.exports = router;
diff --git a/user-management/migrations/001_page_permissions.sql b/user-management/migrations/001_page_permissions.sql
new file mode 100644
index 0000000..f17262a
--- /dev/null
+++ b/user-management/migrations/001_page_permissions.sql
@@ -0,0 +1,14 @@
+-- user_page_permissions 테이블 (MariaDB)
+-- 사용자별 페이지 접근 권한 관리
+
+CREATE TABLE IF NOT EXISTS user_page_permissions (
+    id INT AUTO_INCREMENT PRIMARY KEY,
+    user_id INT NOT NULL,
+    page_name VARCHAR(50) NOT NULL,
+    can_access BOOLEAN DEFAULT FALSE,
+    granted_by_id INT NULL,
+    granted_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+    notes TEXT NULL,
+    UNIQUE KEY unique_user_page (user_id, page_name),
+    FOREIGN KEY (user_id) REFERENCES sso_users(user_id) ON DELETE CASCADE
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
diff --git a/user-management/web/Dockerfile b/user-management/web/Dockerfile
new file mode 100644
index 0000000..636b17a
--- /dev/null
+++ b/user-management/web/Dockerfile
@@ -0,0 +1,8 @@
+FROM nginx:alpine
+
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+COPY index.html /usr/share/nginx/html/index.html
+
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]
diff --git a/user-management/web/index.html b/user-management/web/index.html
new file mode 100644
index 0000000..85dff27
--- /dev/null
+++ b/user-management/web/index.html
@@ -0,0 +1,3140 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>통합 관리 - TK Factory Services</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+        body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background: #f1f5f9; min-height: 100vh; }
+        .input-field { background: white; border: 1px solid #e2e8f0; transition: all 0.2s; }
+        .input-field:focus { outline: none; border-color: #64748b; box-shadow: 0 0 0 3px rgba(100,116,139,0.1); }
+        .tab-btn { transition: all 0.2s; }
+        .tab-btn.active { background: #334155; color: white; }
+        .tab-btn:not(.active) { color: #64748b; }
+        .tab-btn:not(.active):hover { background: #e2e8f0; }
+        .system-section { border-left: 4px solid; }
+        .system-section.system1 { border-color: #3b82f6; }
+        .system-section.system3 { border-color: #8b5cf6; }
+        .group-header { cursor: pointer; user-select: none; }
+        .group-header:hover { background: #f8fafc; }
+        .perm-item { transition: all 0.15s; }
+        .perm-item.checked { background: #f0f9ff; border-color: #93c5fd; }
+        .toast-message { transition: all 0.3s ease; }
+        .fade-in { opacity: 0; transform: translateY(10px); transition: opacity 0.4s, transform 0.4s; }
+        .fade-in.visible { opacity: 1; transform: translateY(0); }
+    </style>
+</head>
+<body>
+    <!-- Header -->
+    <header class="bg-slate-800 text-white sticky top-0 z-50">
+        <div id="headerInner" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex justify-between items-center h-14">
+                <div class="flex items-center gap-3">
+                    <i class="fas fa-cogs text-xl text-slate-300"></i>
+                    <h1 class="text-lg font-semibold">TK 통합 관리</h1>
+                </div>
+                <div class="flex items-center gap-4">
+                    <div class="text-right hidden sm:block">
+                        <div id="headerUserName" class="text-sm font-medium truncate max-w-[200px]">-</div>
+                        <div id="headerUserRole" class="text-xs text-slate-400">-</div>
+                    </div>
+                    <div id="headerUserAvatar" class="w-8 h-8 bg-slate-600 rounded-full flex items-center justify-center text-sm font-semibold flex-shrink-0">-</div>
+                    <button onclick="doLogout()" class="text-slate-400 hover:text-white flex-shrink-0" title="로그아웃"><i class="fas fa-sign-out-alt"></i></button>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <!-- Tab Navigation -->
+    <nav id="tabNav" class="bg-white border-b shadow-sm sticky top-14 z-40 hidden">
+        <div id="tabNavInner" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex gap-1 py-2 overflow-x-auto">
+                <button class="tab-btn active px-4 py-2 rounded-lg text-sm font-medium whitespace-nowrap" onclick="switchTab('users')">
+                    <i class="fas fa-users mr-2"></i>사용자
+                </button>
+                <button class="tab-btn px-4 py-2 rounded-lg text-sm font-medium whitespace-nowrap" onclick="switchTab('projects')">
+                    <i class="fas fa-folder-open mr-2"></i>프로젝트
+                </button>
+                <button class="tab-btn px-4 py-2 rounded-lg text-sm font-medium whitespace-nowrap" onclick="switchTab('workplaces')">
+                    <i class="fas fa-building mr-2"></i>작업장
+                </button>
+                <button class="tab-btn px-4 py-2 rounded-lg text-sm font-medium whitespace-nowrap" onclick="switchTab('departments')">
+                    <i class="fas fa-sitemap mr-2"></i>부서
+                </button>
+                <button class="tab-btn px-4 py-2 rounded-lg text-sm font-medium whitespace-nowrap" onclick="switchTab('workers')">
+                    <i class="fas fa-hard-hat mr-2"></i>작업자
+                </button>
+                <button class="tab-btn px-4 py-2 rounded-lg text-sm font-medium whitespace-nowrap" onclick="switchTab('tasks')">
+                    <i class="fas fa-tasks mr-2"></i>작업
+                </button>
+                <button class="tab-btn px-4 py-2 rounded-lg text-sm font-medium whitespace-nowrap" onclick="switchTab('vacations')">
+                    <i class="fas fa-umbrella-beach mr-2"></i>휴가
+                </button>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Main Content -->
+    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 fade-in">
+
+        <!-- ============ 사용자 탭 ============ -->
+        <div id="tab-users">
+            <!-- 사용자 추가 + 목록 -->
+            <div id="adminSection" class="hidden">
+                <div class="grid lg:grid-cols-5 gap-6">
+                    <!-- 사용자 추가 (좁게) -->
+                    <div class="lg:col-span-2 bg-white rounded-xl shadow-sm p-5">
+                        <h2 class="text-base font-semibold text-gray-800 mb-4"><i class="fas fa-user-plus text-slate-400 mr-2"></i>사용자 추가</h2>
+                        <form id="addUserForm" class="space-y-3">
+                            <div>
+                                <label class="block text-xs font-medium text-gray-600 mb-1">사용자 ID</label>
+                                <input type="text" id="newUsername" class="input-field w-full px-3 py-1.5 rounded-lg text-sm" placeholder="예: 홍길동" required>
+                            </div>
+                            <div>
+                                <label class="block text-xs font-medium text-gray-600 mb-1">이름</label>
+                                <input type="text" id="newFullName" class="input-field w-full px-3 py-1.5 rounded-lg text-sm" placeholder="실명" required>
+                            </div>
+                            <div>
+                                <label class="block text-xs font-medium text-gray-600 mb-1">비밀번호</label>
+                                <input type="password" id="newPassword" class="input-field w-full px-3 py-1.5 rounded-lg text-sm" placeholder="초기 비밀번호" required>
+                            </div>
+                            <div class="grid grid-cols-2 gap-3">
+                                <div>
+                                    <label class="block text-xs font-medium text-gray-600 mb-1">부서</label>
+                                    <select id="newDepartment" class="input-field w-full px-3 py-1.5 rounded-lg text-sm">
+                                        <option value="">선택</option>
+                                        <option value="production">생산</option>
+                                        <option value="quality">품질</option>
+                                        <option value="purchasing">구매</option>
+                                        <option value="design">설계</option>
+                                        <option value="sales">영업</option>
+                                    </select>
+                                </div>
+                                <div>
+                                    <label class="block text-xs font-medium text-gray-600 mb-1">권한</label>
+                                    <select id="newRole" class="input-field w-full px-3 py-1.5 rounded-lg text-sm">
+                                        <option value="user">사용자</option>
+                                        <option value="admin">관리자</option>
+                                    </select>
+                                </div>
+                            </div>
+                            <button type="submit" class="w-full px-4 py-2 bg-slate-700 text-white rounded-lg hover:bg-slate-800 text-sm font-medium">
+                                <i class="fas fa-plus mr-1"></i>추가
+                            </button>
+                        </form>
+                    </div>
+
+                    <!-- 사용자 목록 (넓게) -->
+                    <div class="lg:col-span-3 bg-white rounded-xl shadow-sm p-5">
+                        <h2 class="text-base font-semibold text-gray-800 mb-4"><i class="fas fa-users text-slate-400 mr-2"></i>사용자 목록</h2>
+                        <div id="userList" class="space-y-2 max-h-[420px] overflow-y-auto">
+                            <div class="text-gray-400 text-center py-8"><i class="fas fa-spinner fa-spin text-2xl"></i><p class="mt-2 text-sm">로딩 중...</p></div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- 페이지 권한 관리 -->
+                <div class="mt-6 bg-white rounded-xl shadow-sm p-5">
+                    <div class="flex items-center justify-between mb-5">
+                        <h2 class="text-base font-semibold text-gray-800"><i class="fas fa-shield-alt text-slate-400 mr-2"></i>페이지 접근 권한</h2>
+                        <select id="permissionUserSelect" class="input-field px-3 py-1.5 rounded-lg text-sm min-w-[200px]">
+                            <option value="">사용자 선택</option>
+                        </select>
+                    </div>
+
+                    <div id="permissionPanel" class="hidden">
+                        <!-- System 1 - 공장관리 -->
+                        <div class="system-section system1 rounded-lg mb-5 bg-white">
+                            <div class="flex items-center justify-between px-4 py-3 bg-blue-50 rounded-t-lg border border-blue-100">
+                                <div class="flex items-center gap-2">
+                                    <i class="fas fa-industry text-blue-500"></i>
+                                    <span class="font-semibold text-sm text-blue-900">공장관리</span>
+                                    <span class="text-xs text-blue-500 bg-blue-100 px-2 py-0.5 rounded-full">System 1</span>
+                                </div>
+                                <div class="flex gap-2">
+                                    <button onclick="toggleSystemAll('s1', true)" class="text-xs text-blue-600 hover:underline">전체 허용</button>
+                                    <span class="text-gray-300">|</span>
+                                    <button onclick="toggleSystemAll('s1', false)" class="text-xs text-blue-600 hover:underline">전체 해제</button>
+                                </div>
+                            </div>
+                            <div id="s1-perms" class="p-4 border border-t-0 border-blue-100 rounded-b-lg space-y-4"></div>
+                        </div>
+
+                        <!-- System 3 - 부적합관리 -->
+                        <div class="system-section system3 rounded-lg mb-5 bg-white">
+                            <div class="flex items-center justify-between px-4 py-3 bg-purple-50 rounded-t-lg border border-purple-100">
+                                <div class="flex items-center gap-2">
+                                    <i class="fas fa-shield-halved text-purple-500"></i>
+                                    <span class="font-semibold text-sm text-purple-900">부적합관리</span>
+                                    <span class="text-xs text-purple-500 bg-purple-100 px-2 py-0.5 rounded-full">System 3</span>
+                                </div>
+                                <div class="flex gap-2">
+                                    <button onclick="toggleSystemAll('s3', true)" class="text-xs text-purple-600 hover:underline">전체 허용</button>
+                                    <span class="text-gray-300">|</span>
+                                    <button onclick="toggleSystemAll('s3', false)" class="text-xs text-purple-600 hover:underline">전체 해제</button>
+                                </div>
+                            </div>
+                            <div id="s3-perms" class="p-4 border border-t-0 border-purple-100 rounded-b-lg space-y-4"></div>
+                        </div>
+
+                        <!-- 저장 버튼 -->
+                        <div class="flex items-center gap-3 pt-2">
+                            <button id="savePermissionsBtn" class="px-6 py-2.5 bg-slate-700 text-white rounded-lg hover:bg-slate-800 text-sm font-medium">
+                                <i class="fas fa-save mr-2"></i>권한 저장
+                            </button>
+                            <span id="permissionSaveStatus" class="text-sm"></span>
+                        </div>
+                    </div>
+
+                    <div id="permissionEmpty" class="text-center text-gray-400 py-8 text-sm">
+                        <i class="fas fa-hand-pointer text-2xl mb-2"></i>
+                        <p>사용자를 선택하면 권한을 설정할 수 있습니다</p>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 비밀번호 변경 (일반 사용자) -->
+            <div id="passwordChangeSection" class="hidden">
+                <div class="bg-white rounded-xl shadow-sm p-6 max-w-md mx-auto">
+                    <h2 class="text-base font-semibold text-gray-800 mb-4"><i class="fas fa-key text-slate-400 mr-2"></i>비밀번호 변경</h2>
+                    <form id="changePasswordForm" class="space-y-4">
+                        <div>
+                            <label class="block text-xs font-medium text-gray-600 mb-1">현재 비밀번호</label>
+                            <input type="password" id="currentPassword" class="input-field w-full px-3 py-2 rounded-lg text-sm" required>
+                        </div>
+                        <div>
+                            <label class="block text-xs font-medium text-gray-600 mb-1">새 비밀번호</label>
+                            <input type="password" id="newPasswordChange" class="input-field w-full px-3 py-2 rounded-lg text-sm" required minlength="6" placeholder="최소 6자">
+                        </div>
+                        <div>
+                            <label class="block text-xs font-medium text-gray-600 mb-1">새 비밀번호 확인</label>
+                            <input type="password" id="confirmPassword" class="input-field w-full px-3 py-2 rounded-lg text-sm" required>
+                        </div>
+                        <button type="submit" class="w-full px-4 py-2 bg-slate-700 text-white rounded-lg hover:bg-slate-800 text-sm font-medium">
+                            <i class="fas fa-save mr-1"></i>비밀번호 변경
+                        </button>
+                    </form>
+                </div>
+            </div>
+        </div>
+
+        <!-- ============ 준비 중 탭 (placeholder) ============ -->
+        <div id="tab-projects" class="hidden">
+            <div class="grid lg:grid-cols-5 gap-6">
+                <!-- 프로젝트 추가 (좁게) -->
+                <div class="lg:col-span-2 bg-white rounded-xl shadow-sm p-5">
+                    <h2 class="text-base font-semibold text-gray-800 mb-4"><i class="fas fa-folder-plus text-slate-400 mr-2"></i>프로젝트 추가</h2>
+                    <form id="addProjectForm" class="space-y-3">
+                        <div>
+                            <label class="block text-xs font-medium text-gray-600 mb-1">Job No <span class="text-red-400">*</span></label>
+                            <input type="text" id="newJobNo" class="input-field w-full px-3 py-1.5 rounded-lg text-sm" placeholder="예: JOB-2026-001" required>
+                        </div>
+                        <div>
+                            <label class="block text-xs font-medium text-gray-600 mb-1">프로젝트명 <span class="text-red-400">*</span></label>
+                            <input type="text" id="newProjectName" class="input-field w-full px-3 py-1.5 rounded-lg text-sm" placeholder="프로젝트 이름" required>
+                        </div>
+                        <div class="grid grid-cols-2 gap-3">
+                            <div>
+                                <label class="block text-xs font-medium text-gray-600 mb-1">계약일</label>
+                                <input type="date" id="newContractDate" class="input-field w-full px-3 py-1.5 rounded-lg text-sm">
+                            </div>
+                            <div>
+                                <label class="block text-xs font-medium text-gray-600 mb-1">납기일</label>
+                                <input type="date" id="newDueDate" class="input-field w-full px-3 py-1.5 rounded-lg text-sm">
+                            </div>
+                        </div>
+                        <div>
+                            <label class="block text-xs font-medium text-gray-600 mb-1">현장</label>
+                            <input type="text" id="newSite" class="input-field w-full px-3 py-1.5 rounded-lg text-sm" placeholder="설치 현장">
+                        </div>
+                        <div>
+                            <label class="block text-xs font-medium text-gray-600 mb-1">PM</label>
+                            <input type="text" id="newPm" class="input-field w-full px-3 py-1.5 rounded-lg text-sm" placeholder="담당 PM">
+                        </div>
+                        <button type="submit" class="w-full px-4 py-2 bg-slate-700 text-white rounded-lg hover:bg-slate-800 text-sm font-medium">
+                            <i class="fas fa-plus mr-1"></i>추가
+                        </button>
+                    </form>
+                </div>
+
+                <!-- 프로젝트 목록 (넓게) -->
+                <div class="lg:col-span-3 bg-white rounded-xl shadow-sm p-5">
+                    <h2 class="text-base font-semibold text-gray-800 mb-4"><i class="fas fa-folder-open text-slate-400 mr-2"></i>프로젝트 목록</h2>
+                    <div id="projectList" class="space-y-2 max-h-[520px] overflow-y-auto">
+                        <div class="text-gray-400 text-center py-8"><i class="fas fa-spinner fa-spin text-2xl"></i><p class="mt-2 text-sm">로딩 중...</p></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- ============ 작업자 탭 ============ -->
+        <div id="tab-workers" class="hidden">
+            <div class="grid lg:grid-cols-5 gap-6">
+                <div class="lg:col-span-2 bg-white rounded-xl shadow-sm p-5">
+                    <h2 class="text-base font-semibold text-gray-800 mb-4"><i class="fas fa-hard-hat text-slate-400 mr-2"></i>작업자 등록</h2>
+                    <form id="addWorkerForm" class="space-y-3">
+                        <div>
+                            <label class="block text-xs font-medium text-gray-600 mb-1">이름 <span class="text-red-400">*</span></label>
+                            <input type="text" id="newWorkerName" class="input-field w-full px-3 py-1.5 rounded-lg text-sm" placeholder="작업자 이름" required>
+                        </div>
+                        <div class="grid grid-cols-2 gap-3">
+                            <div>
+                                <label class="block text-xs font-medium text-gray-600 mb-1">직종</label>
+                                <select id="newJobType" class="input-field w-full px-3 py-1.5 rounded-lg text-sm">
+                                    <option value="">선택</option>
+                                    <option value="leader">반장</option>
+                                    <option value="worker">작업자</option>
+                                </select>
+                            </div>
+                            <div>
+                                <label class="block text-xs font-medium text-gray-600 mb-1">부서</label>
+                                <select id="newWorkerDept" class="input-field w-full px-3 py-1.5 rounded-lg text-sm">
+                                    <option value="">선택</option>
+                                </select>
+                            </div>
+                        </div>
+                        <div>
+                            <label class="block text-xs font-medium text-gray-600 mb-1">전화번호</label>
+                            <input type="text" id="newWorkerPhone" class="input-field w-full px-3 py-1.5 rounded-lg text-sm" placeholder="010-0000-0000">
+                        </div>
+                        <div>
+                            <label class="block text-xs font-medium text-gray-600 mb-1">입사일</label>
+                            <input type="date" id="newWorkerHireDate" class="input-field w-full px-3 py-1.5 rounded-lg text-sm">
+                        </div>
+                        <div>
+                            <label class="block text-xs font-medium text-gray-600 mb-1">비고</label>
+                            <input type="text" id="newWorkerNotes" class="input-field w-full px-3 py-1.5 rounded-lg text-sm" placeholder="메모">
+                        </div>
+                        <button type="submit" class="w-full px-4 py-2 bg-slate-700 text-white rounded-lg hover:bg-slate-800 text-sm font-medium">
+                            <i class="fas fa-plus mr-1"></i>추가
+                        </button>
+                    </form>
+                </div>
+                <div class="lg:col-span-3 bg-white rounded-xl shadow-sm p-5">
+                    <h2 class="text-base font-semibold text-gray-800 mb-4"><i class="fas fa-hard-hat text-slate-400 mr-2"></i>작업자 목록</h2>
+                    <div id="workerList" class="space-y-2 max-h-[520px] overflow-y-auto">
+                        <div class="text-gray-400 text-center py-8"><i class="fas fa-spinner fa-spin text-2xl"></i><p class="mt-2 text-sm">로딩 중...</p></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- ============ 부서 탭 ============ -->
+        <div id="tab-departments" class="hidden">
+            <div class="grid lg:grid-cols-5 gap-6">
+                <div class="lg:col-span-2 bg-white rounded-xl shadow-sm p-5">
+                    <h2 class="text-base font-semibold text-gray-800 mb-4"><i class="fas fa-sitemap text-slate-400 mr-2"></i>부서 등록</h2>
+                    <form id="addDepartmentForm" class="space-y-3">
+                        <div>
+                            <label class="block text-xs font-medium text-gray-600 mb-1">부서명 <span class="text-red-400">*</span></label>
+                            <input type="text" id="newDeptName" class="input-field w-full px-3 py-1.5 rounded-lg text-sm" placeholder="부서 이름" required>
+                        </div>
+                        <div>
+                            <label class="block text-xs font-medium text-gray-600 mb-1">상위부서</label>
+                            <select id="newDeptParent" class="input-field w-full px-3 py-1.5 rounded-lg text-sm">
+                                <option value="">없음 (최상위)</option>
+                            </select>
+                        </div>
+                        <div>
+                            <label class="block text-xs font-medium text-gray-600 mb-1">설명</label>
+                            <input type="text" id="newDeptDescription" class="input-field w-full px-3 py-1.5 rounded-lg text-sm" placeholder="부서 설명">
+                        </div>
+                        <div>
+                            <label class="block text-xs font-medium text-gray-600 mb-1">표시순서</label>
+                            <input type="number" id="newDeptOrder" class="input-field w-full px-3 py-1.5 rounded-lg text-sm" value="0" min="0">
+                        </div>
+                        <button type="submit" class="w-full px-4 py-2 bg-slate-700 text-white rounded-lg hover:bg-slate-800 text-sm font-medium">
+                            <i class="fas fa-plus mr-1"></i>추가
+                        </button>
+                    </form>
+                </div>
+                <div class="lg:col-span-3 bg-white rounded-xl shadow-sm p-5">
+                    <h2 class="text-base font-semibold text-gray-800 mb-4"><i class="fas fa-sitemap text-slate-400 mr-2"></i>부서 목록</h2>
+                    <div id="departmentList" class="space-y-2 max-h-[520px] overflow-y-auto">
+                        <div class="text-gray-400 text-center py-8"><i class="fas fa-spinner fa-spin text-2xl"></i><p class="mt-2 text-sm">로딩 중...</p></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- ============ 작업 탭 ============ -->
+        <div id="tab-tasks" class="hidden">
+            <div class="flex gap-6" style="height: calc(100vh - 9rem);">
+                <!-- 공정 사이드바 -->
+                <div class="w-64 flex-shrink-0 bg-white rounded-xl shadow-sm p-4 flex flex-col overflow-hidden">
+                    <div class="flex items-center justify-between mb-3">
+                        <div class="text-xs font-semibold text-gray-400 uppercase tracking-wider">공정</div>
+                        <button onclick="openWorkTypeModal()" class="text-xs text-slate-500 hover:text-slate-700 px-1.5 py-0.5 rounded hover:bg-gray-100" title="공정 추가"><i class="fas fa-plus"></i></button>
+                    </div>
+                    <div id="workTypeSidebar" class="space-y-1 flex-1 overflow-y-auto">
+                        <div class="text-gray-400 text-center py-8 text-sm"><i class="fas fa-spinner fa-spin"></i></div>
+                    </div>
+                </div>
+                <!-- 작업 목록 메인 -->
+                <div class="flex-1 overflow-hidden min-w-0 flex flex-col">
+                    <div class="bg-white rounded-xl shadow-sm p-5 flex flex-col flex-1 overflow-hidden">
+                        <div class="flex items-center justify-between mb-4 flex-wrap gap-2">
+                            <h2 class="text-base font-semibold text-gray-800">
+                                <i class="fas fa-tasks text-slate-400 mr-2"></i>작업 목록
+                                <span id="taskFilterLabel" class="text-sm font-normal text-gray-500 ml-1">- 전체</span>
+                            </h2>
+                            <div class="flex items-center gap-2">
+                                <span id="taskStats" class="text-xs text-gray-400"></span>
+                                <button onclick="openTaskModal()" class="px-3 py-1.5 bg-slate-700 text-white rounded-lg hover:bg-slate-800 text-xs font-medium">
+                                    <i class="fas fa-plus mr-1"></i>작업 추가
+                                </button>
+                            </div>
+                        </div>
+                        <div id="taskList" class="space-y-2 flex-1 overflow-y-auto">
+                            <div class="text-gray-400 text-center py-8"><i class="fas fa-spinner fa-spin text-2xl"></i><p class="mt-2 text-sm">로딩 중...</p></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- 공정 추가/편집 모달 -->
+        <div id="workTypeModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center p-4">
+            <div class="bg-white rounded-xl max-w-sm w-full p-6">
+                <div class="flex items-center justify-between mb-4">
+                    <h3 id="workTypeModalTitle" class="text-base font-semibold text-gray-900">공정 추가</h3>
+                    <button onclick="closeWorkTypeModal()" class="text-gray-400 hover:text-gray-600"><i class="fas fa-times"></i></button>
+                </div>
+                <form id="workTypeForm" class="space-y-3">
+                    <input type="hidden" id="wtEditId">
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 mb-1">공정명 <span class="text-red-400">*</span></label>
+                        <input type="text" id="wtName" class="input-field w-full px-3 py-1.5 rounded-lg text-sm" placeholder="예: 용접" required>
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 mb-1">카테고리</label>
+                        <input type="text" id="wtCategory" class="input-field w-full px-3 py-1.5 rounded-lg text-sm" placeholder="예: 제작">
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 mb-1">설명</label>
+                        <textarea id="wtDesc" class="input-field w-full px-3 py-1.5 rounded-lg text-sm" rows="2" placeholder="선택사항"></textarea>
+                    </div>
+                    <div class="flex gap-3 pt-2">
+                        <button type="button" onclick="closeWorkTypeModal()" class="flex-1 px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 text-sm">취소</button>
+                        <button type="submit" class="flex-1 px-4 py-2 bg-slate-700 text-white rounded-lg hover:bg-slate-800 text-sm font-medium"><i class="fas fa-save mr-1"></i>저장</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+
+        <!-- 작업 추가/편집 모달 -->
+        <div id="taskModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center p-4">
+            <div class="bg-white rounded-xl max-w-md w-full p-6">
+                <div class="flex items-center justify-between mb-4">
+                    <h3 id="taskModalTitle" class="text-base font-semibold text-gray-900">작업 추가</h3>
+                    <button onclick="closeTaskModal()" class="text-gray-400 hover:text-gray-600"><i class="fas fa-times"></i></button>
+                </div>
+                <form id="taskForm" class="space-y-3">
+                    <input type="hidden" id="taskEditId">
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 mb-1">작업명 <span class="text-red-400">*</span></label>
+                        <input type="text" id="taskName" class="input-field w-full px-3 py-1.5 rounded-lg text-sm" placeholder="예: 서스 용접" required>
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 mb-1">소속 공정</label>
+                        <select id="taskWorkType" class="input-field w-full px-3 py-1.5 rounded-lg text-sm">
+                            <option value="">미지정</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 mb-1">설명</label>
+                        <textarea id="taskDesc" class="input-field w-full px-3 py-1.5 rounded-lg text-sm" rows="3" placeholder="선택사항"></textarea>
+                    </div>
+                    <div class="flex items-center gap-2">
+                        <input type="checkbox" id="taskActive" checked class="rounded">
+                        <label for="taskActive" class="text-sm text-gray-600">활성화 <span class="text-xs text-gray-400">(비활성 시 TBM 입력에서 숨김)</span></label>
+                    </div>
+                    <div class="flex gap-3 pt-2">
+                        <button type="button" onclick="closeTaskModal()" class="flex-1 px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 text-sm">취소</button>
+                        <button type="submit" class="flex-1 px-4 py-2 bg-slate-700 text-white rounded-lg hover:bg-slate-800 text-sm font-medium"><i class="fas fa-save mr-1"></i>저장</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+
+        <!-- ============ 휴가 탭 ============ -->
+        <div id="tab-vacations" class="hidden">
+            <div class="flex gap-6" style="height: calc(100vh - 9rem);">
+                <!-- 휴가 유형 사이드바 -->
+                <div class="w-72 flex-shrink-0 bg-white rounded-xl shadow-sm p-4 flex flex-col overflow-hidden">
+                    <div class="flex items-center justify-between mb-3">
+                        <div class="text-xs font-semibold text-gray-400 uppercase tracking-wider">휴가 유형</div>
+                        <button onclick="openVacTypeModal()" class="text-xs text-slate-500 hover:text-slate-700 px-1.5 py-0.5 rounded hover:bg-gray-100" title="유형 추가"><i class="fas fa-plus"></i></button>
+                    </div>
+                    <div id="vacTypeSidebar" class="space-y-1 flex-1 overflow-y-auto">
+                        <div class="text-gray-400 text-center py-8 text-sm"><i class="fas fa-spinner fa-spin"></i></div>
+                    </div>
+                </div>
+                <!-- 연차 배정 메인 -->
+                <div class="flex-1 overflow-hidden min-w-0 flex flex-col">
+                    <div class="bg-white rounded-xl shadow-sm p-5 flex flex-col flex-1 overflow-hidden">
+                        <div class="flex items-center justify-between mb-4 flex-wrap gap-2">
+                            <h2 class="text-base font-semibold text-gray-800"><i class="fas fa-calendar-check text-slate-400 mr-2"></i>연차 배정</h2>
+                            <div class="flex items-center gap-2">
+                                <select id="vacYear" class="input-field px-3 py-1.5 rounded-lg text-sm" onchange="loadVacBalances()">
+                                </select>
+                                <button onclick="autoCalcVacation()" class="px-3 py-1.5 bg-emerald-600 text-white rounded-lg hover:bg-emerald-700 text-xs font-medium" title="입사일 기반 연차 자동 계산">
+                                    <i class="fas fa-calculator mr-1"></i>자동 계산
+                                </button>
+                                <button onclick="openVacBalanceModal()" class="px-3 py-1.5 bg-slate-700 text-white rounded-lg hover:bg-slate-800 text-xs font-medium">
+                                    <i class="fas fa-plus mr-1"></i>개별 배정
+                                </button>
+                            </div>
+                        </div>
+                        <div id="vacBalanceTable" class="flex-1 overflow-auto">
+                            <div class="text-gray-400 text-center py-8"><i class="fas fa-spinner fa-spin text-2xl"></i><p class="mt-2 text-sm">로딩 중...</p></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- 휴가 유형 모달 -->
+        <div id="vacTypeModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center p-4">
+            <div class="bg-white rounded-xl max-w-sm w-full p-6">
+                <div class="flex items-center justify-between mb-4">
+                    <h3 id="vacTypeModalTitle" class="text-base font-semibold text-gray-900">휴가 유형 추가</h3>
+                    <button onclick="closeVacTypeModal()" class="text-gray-400 hover:text-gray-600"><i class="fas fa-times"></i></button>
+                </div>
+                <form id="vacTypeForm" class="space-y-3">
+                    <input type="hidden" id="vtEditId">
+                    <div class="grid grid-cols-2 gap-3">
+                        <div>
+                            <label class="block text-xs font-medium text-gray-600 mb-1">유형 코드 <span class="text-red-400">*</span></label>
+                            <input type="text" id="vtCode" class="input-field w-full px-3 py-1.5 rounded-lg text-sm" placeholder="예: ANNUAL" required>
+                        </div>
+                        <div>
+                            <label class="block text-xs font-medium text-gray-600 mb-1">유형명 <span class="text-red-400">*</span></label>
+                            <input type="text" id="vtName" class="input-field w-full px-3 py-1.5 rounded-lg text-sm" placeholder="예: 연차" required>
+                        </div>
+                    </div>
+                    <div class="grid grid-cols-2 gap-3">
+                        <div>
+                            <label class="block text-xs font-medium text-gray-600 mb-1">차감 일수</label>
+                            <input type="number" id="vtDeductDays" class="input-field w-full px-3 py-1.5 rounded-lg text-sm" value="1.0" step="0.1" min="0">
+                        </div>
+                        <div>
+                            <label class="block text-xs font-medium text-gray-600 mb-1">우선순위</label>
+                            <input type="number" id="vtPriority" class="input-field w-full px-3 py-1.5 rounded-lg text-sm" value="99" min="0">
+                        </div>
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 mb-1">설명</label>
+                        <textarea id="vtDescription" class="input-field w-full px-3 py-1.5 rounded-lg text-sm" rows="2" placeholder="선택사항"></textarea>
+                    </div>
+                    <div class="flex items-center gap-3">
+                        <label class="flex items-center gap-1.5 text-sm text-gray-600"><input type="checkbox" id="vtSpecial" class="rounded">특별휴가</label>
+                    </div>
+                    <div class="flex gap-3 pt-2">
+                        <button type="button" onclick="closeVacTypeModal()" class="flex-1 px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 text-sm">취소</button>
+                        <button type="submit" class="flex-1 px-4 py-2 bg-slate-700 text-white rounded-lg hover:bg-slate-800 text-sm font-medium"><i class="fas fa-save mr-1"></i>저장</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+
+        <!-- 개별 배정 모달 -->
+        <div id="vacBalanceModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center p-4">
+            <div class="bg-white rounded-xl max-w-sm w-full p-6">
+                <div class="flex items-center justify-between mb-4">
+                    <h3 id="vacBalModalTitle" class="text-base font-semibold text-gray-900">연차 배정</h3>
+                    <button onclick="closeVacBalanceModal()" class="text-gray-400 hover:text-gray-600"><i class="fas fa-times"></i></button>
+                </div>
+                <form id="vacBalanceForm" class="space-y-3">
+                    <input type="hidden" id="vbEditId">
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 mb-1">작업자 <span class="text-red-400">*</span></label>
+                        <select id="vbWorker" class="input-field w-full px-3 py-1.5 rounded-lg text-sm" required>
+                            <option value="">선택</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 mb-1">휴가 유형 <span class="text-red-400">*</span></label>
+                        <select id="vbType" class="input-field w-full px-3 py-1.5 rounded-lg text-sm" required>
+                            <option value="">선택</option>
+                        </select>
+                    </div>
+                    <div class="grid grid-cols-2 gap-3">
+                        <div>
+                            <label class="block text-xs font-medium text-gray-600 mb-1">배정 일수</label>
+                            <input type="number" id="vbTotalDays" class="input-field w-full px-3 py-1.5 rounded-lg text-sm" value="0" step="0.5" min="0">
+                        </div>
+                        <div>
+                            <label class="block text-xs font-medium text-gray-600 mb-1">사용 일수</label>
+                            <input type="number" id="vbUsedDays" class="input-field w-full px-3 py-1.5 rounded-lg text-sm" value="0" step="0.5" min="0">
+                        </div>
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 mb-1">비고</label>
+                        <input type="text" id="vbNotes" class="input-field w-full px-3 py-1.5 rounded-lg text-sm" placeholder="메모">
+                    </div>
+                    <div class="flex gap-3 pt-2">
+                        <button type="button" onclick="closeVacBalanceModal()" class="flex-1 px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 text-sm">취소</button>
+                        <button type="submit" class="flex-1 px-4 py-2 bg-slate-700 text-white rounded-lg hover:bg-slate-800 text-sm font-medium"><i class="fas fa-save mr-1"></i>저장</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+
+        <!-- ============ 작업장 탭 ============ -->
+        <div id="tab-workplaces" class="hidden">
+            <div class="flex gap-6" style="height: calc(100vh - 9rem);">
+                <!-- 사이드바 -->
+                <div class="w-72 flex-shrink-0 bg-white rounded-xl shadow-sm p-4 flex flex-col overflow-hidden">
+                    <div id="wpSidebarContent" class="flex flex-col flex-1 overflow-hidden">
+                        <div class="text-gray-400 text-center py-8"><i class="fas fa-spinner fa-spin text-2xl"></i><p class="mt-2 text-sm">로딩 중...</p></div>
+                    </div>
+                </div>
+
+                <!-- 메인 영역 -->
+                <div class="flex-1 overflow-y-auto min-w-0">
+                    <!-- 작업장 미선택 안내 -->
+                    <div id="workplaceEmptyState" class="flex items-center justify-center h-full">
+                        <div class="text-center text-gray-400">
+                            <i class="fas fa-industry text-4xl mb-3"></i>
+                            <p class="text-sm">왼쪽 목록에서 공장을 선택하세요</p>
+                        </div>
+                    </div>
+
+                    <!-- 설비 섹션 -->
+                    <div id="equipmentSection" class="bg-white rounded-xl shadow-sm p-5 hidden">
+                        <div id="eqBackToCategory" class="mb-3 hidden">
+                            <button onclick="backToCategory()" class="flex items-center gap-1.5 text-sm text-slate-500 hover:text-slate-700 px-2 py-1 rounded hover:bg-gray-100 transition-colors">
+                                <i class="fas fa-arrow-left text-xs"></i><span id="eqBackLabel">구역지도로 돌아가기</span>
+                            </button>
+                        </div>
+                        <div class="flex items-center justify-between mb-4 flex-wrap gap-2">
+                            <h2 class="text-base font-semibold text-gray-800"><i class="fas fa-cog text-slate-400 mr-2"></i>설비 관리 - <span id="eqWorkplaceName">-</span></h2>
+                            <div class="flex items-center gap-2 flex-wrap">
+                                <select id="eqStatusFilter" class="input-field px-2 py-1 rounded-lg text-xs" onchange="filterEquipments()">
+                                    <option value="">전체 상태</option>
+                                    <option value="active">가동중</option>
+                                    <option value="maintenance">점검중</option>
+                                    <option value="inactive">비활성</option>
+                                </select>
+                                <select id="eqTypeFilter" class="input-field px-2 py-1 rounded-lg text-xs" onchange="filterEquipments()">
+                                    <option value="">전체 유형</option>
+                                </select>
+                                <button onclick="openEquipmentModal()" class="px-3 py-1 bg-slate-700 text-white rounded-lg hover:bg-slate-800 text-xs font-medium">
+                                    <i class="fas fa-plus mr-1"></i>설비 추가
+                                </button>
+                            </div>
+                        </div>
+
+                        <!-- 설비 배치도 -->
+                        <div class="mb-4 p-3 bg-gray-50 rounded-lg">
+                            <div class="flex items-center justify-between mb-2">
+                                <h3 class="text-sm font-semibold text-gray-700"><i class="fas fa-map-pin text-gray-400 mr-1"></i>설비 배치도</h3>
+                                <div class="flex gap-2">
+                                    <label class="px-2 py-1 bg-white border border-gray-200 rounded text-xs cursor-pointer hover:bg-gray-50">
+                                        <i class="fas fa-upload mr-1 text-gray-400"></i>이미지 변경
+                                        <input type="file" id="wpLayoutImageFile" accept="image/jpeg,image/png,image/gif,image/webp" onchange="uploadWorkplaceLayoutImage()" class="hidden">
+                                    </label>
+                                </div>
+                            </div>
+                            <div id="eqMapArea" class="text-center text-gray-400 py-4 text-sm">
+                                <i class="fas fa-image text-2xl mb-1"></i>
+                                <p>배치도 이미지를 업로드하세요</p>
+                            </div>
+                            <div id="eqMapCanvasWrap" class="hidden relative">
+                                <canvas id="eqMapCanvas" style="max-width:100%; border:1px solid #e2e8f0; border-radius:8px; cursor:crosshair;"></canvas>
+                                <p class="text-xs text-gray-400 mt-1">클릭하여 설비 위치 지정 | 설비 아이콘 위에서 드래그하여 이동</p>
+                            </div>
+                        </div>
+
+                        <!-- 설비 리스트 -->
+                        <div id="equipmentList" class="space-y-2 max-h-[400px] overflow-y-auto">
+                            <p class="text-gray-400 text-center py-4 text-sm">설비가 없습니다.</p>
+                        </div>
+                    </div>
+
+                    <!-- 구역지도 프리뷰 -->
+                    <div id="zoneMapSection" class="bg-white rounded-xl shadow-sm p-5 hidden">
+                        <div class="flex items-center justify-between mb-4">
+                            <h2 id="zoneMapTitle" class="text-base font-semibold text-gray-800"><i class="fas fa-map text-slate-400 mr-2"></i>구역지도</h2>
+                            <button onclick="openLayoutMapModal()" class="px-4 py-1.5 bg-slate-700 text-white rounded-lg hover:bg-slate-800 text-sm font-medium">
+                                <i class="fas fa-cog mr-1"></i>지도 설정
+                            </button>
+                        </div>
+                        <div id="layoutPreviewArea" class="text-center text-gray-400 py-8 text-sm">
+                            <i class="fas fa-image text-3xl mb-2"></i>
+                            <p>레이아웃 이미지가 없습니다. "지도 설정"에서 업로드하세요.</p>
+                        </div>
+                        <div id="layoutPreviewCanvas" class="hidden">
+                            <canvas id="previewCanvas" style="max-width:100%; border:1px solid #e2e8f0; border-radius:8px; cursor:pointer;"></canvas>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <!-- 사용자 편집 모달 -->
+    <div id="editUserModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center p-4">
+        <div class="bg-white rounded-xl max-w-md w-full p-6">
+            <div class="flex items-center justify-between mb-4">
+                <h3 class="text-base font-semibold text-gray-900">사용자 정보 수정</h3>
+                <button onclick="closeEditModal()" class="text-gray-400 hover:text-gray-600"><i class="fas fa-times"></i></button>
+            </div>
+            <form id="editUserForm" class="space-y-3">
+                <input type="hidden" id="editUserId">
+                <div>
+                    <label class="block text-xs font-medium text-gray-600 mb-1">사용자 ID</label>
+                    <input type="text" id="editUsername" class="input-field w-full px-3 py-1.5 rounded-lg text-sm bg-gray-50" readonly>
+                </div>
+                <div>
+                    <label class="block text-xs font-medium text-gray-600 mb-1">이름</label>
+                    <input type="text" id="editFullName" class="input-field w-full px-3 py-1.5 rounded-lg text-sm">
+                </div>
+                <div class="grid grid-cols-2 gap-3">
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 mb-1">부서</label>
+                        <select id="editDepartment" class="input-field w-full px-3 py-1.5 rounded-lg text-sm">
+                            <option value="">선택</option>
+                            <option value="production">생산</option>
+                            <option value="quality">품질</option>
+                            <option value="purchasing">구매</option>
+                            <option value="design">설계</option>
+                            <option value="sales">영업</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 mb-1">권한</label>
+                        <select id="editRole" class="input-field w-full px-3 py-1.5 rounded-lg text-sm">
+                            <option value="user">사용자</option>
+                            <option value="admin">관리자</option>
+                        </select>
+                    </div>
+                </div>
+                <div class="flex gap-3 pt-3">
+                    <button type="button" onclick="closeEditModal()" class="flex-1 px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 text-sm">취소</button>
+                    <button type="submit" class="flex-1 px-4 py-2 bg-slate-700 text-white rounded-lg hover:bg-slate-800 text-sm font-medium"><i class="fas fa-save mr-1"></i>저장</button>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <!-- 프로젝트 편집 모달 -->
+    <div id="editProjectModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center p-4">
+        <div class="bg-white rounded-xl max-w-md w-full p-6">
+            <div class="flex items-center justify-between mb-4">
+                <h3 class="text-base font-semibold text-gray-900">프로젝트 수정</h3>
+                <button onclick="closeProjectModal()" class="text-gray-400 hover:text-gray-600"><i class="fas fa-times"></i></button>
+            </div>
+            <form id="editProjectForm" class="space-y-3">
+                <input type="hidden" id="editProjectId">
+                <div>
+                    <label class="block text-xs font-medium text-gray-600 mb-1">Job No</label>
+                    <input type="text" id="editJobNo" class="input-field w-full px-3 py-1.5 rounded-lg text-sm" required>
+                </div>
+                <div>
+                    <label class="block text-xs font-medium text-gray-600 mb-1">프로젝트명</label>
+                    <input type="text" id="editProjectName" class="input-field w-full px-3 py-1.5 rounded-lg text-sm" required>
+                </div>
+                <div class="grid grid-cols-2 gap-3">
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 mb-1">계약일</label>
+                        <input type="date" id="editContractDate" class="input-field w-full px-3 py-1.5 rounded-lg text-sm">
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 mb-1">납기일</label>
+                        <input type="date" id="editDueDate" class="input-field w-full px-3 py-1.5 rounded-lg text-sm">
+                    </div>
+                </div>
+                <div>
+                    <label class="block text-xs font-medium text-gray-600 mb-1">현장</label>
+                    <input type="text" id="editSite" class="input-field w-full px-3 py-1.5 rounded-lg text-sm">
+                </div>
+                <div>
+                    <label class="block text-xs font-medium text-gray-600 mb-1">PM</label>
+                    <input type="text" id="editPm" class="input-field w-full px-3 py-1.5 rounded-lg text-sm">
+                </div>
+                <div class="grid grid-cols-2 gap-3">
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 mb-1">상태</label>
+                        <select id="editProjectStatus" class="input-field w-full px-3 py-1.5 rounded-lg text-sm">
+                            <option value="active">진행중</option>
+                            <option value="completed">완료</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 mb-1">활성</label>
+                        <select id="editIsActive" class="input-field w-full px-3 py-1.5 rounded-lg text-sm">
+                            <option value="1">활성</option>
+                            <option value="0">비활성</option>
+                        </select>
+                    </div>
+                </div>
+                <div class="flex gap-3 pt-3">
+                    <button type="button" onclick="closeProjectModal()" class="flex-1 px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 text-sm">취소</button>
+                    <button type="submit" class="flex-1 px-4 py-2 bg-slate-700 text-white rounded-lg hover:bg-slate-800 text-sm font-medium"><i class="fas fa-save mr-1"></i>저장</button>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <!-- 작업자 편집 모달 -->
+    <div id="editWorkerModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center p-4">
+        <div class="bg-white rounded-xl max-w-md w-full p-6">
+            <div class="flex items-center justify-between mb-4">
+                <h3 class="text-base font-semibold text-gray-900">작업자 수정</h3>
+                <button onclick="closeWorkerModal()" class="text-gray-400 hover:text-gray-600"><i class="fas fa-times"></i></button>
+            </div>
+            <form id="editWorkerForm" class="space-y-3">
+                <input type="hidden" id="editWorkerId">
+                <div>
+                    <label class="block text-xs font-medium text-gray-600 mb-1">이름</label>
+                    <input type="text" id="editWorkerName" class="input-field w-full px-3 py-1.5 rounded-lg text-sm" required>
+                </div>
+                <div class="grid grid-cols-2 gap-3">
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 mb-1">직종</label>
+                        <select id="editJobType" class="input-field w-full px-3 py-1.5 rounded-lg text-sm">
+                            <option value="">선택</option>
+                            <option value="leader">반장</option>
+                            <option value="worker">작업자</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 mb-1">부서</label>
+                        <select id="editWorkerDept" class="input-field w-full px-3 py-1.5 rounded-lg text-sm">
+                            <option value="">선택</option>
+                        </select>
+                    </div>
+                </div>
+                <div>
+                    <label class="block text-xs font-medium text-gray-600 mb-1">전화번호</label>
+                    <input type="text" id="editWorkerPhone" class="input-field w-full px-3 py-1.5 rounded-lg text-sm">
+                </div>
+                <div>
+                    <label class="block text-xs font-medium text-gray-600 mb-1">입사일</label>
+                    <input type="date" id="editWorkerHireDate" class="input-field w-full px-3 py-1.5 rounded-lg text-sm">
+                </div>
+                <div>
+                    <label class="block text-xs font-medium text-gray-600 mb-1">비고</label>
+                    <input type="text" id="editWorkerNotes" class="input-field w-full px-3 py-1.5 rounded-lg text-sm">
+                </div>
+                <div class="grid grid-cols-2 gap-3">
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 mb-1">상태</label>
+                        <select id="editWorkerStatus" class="input-field w-full px-3 py-1.5 rounded-lg text-sm">
+                            <option value="active">재직</option>
+                            <option value="inactive">비활성</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 mb-1">재직상태</label>
+                        <select id="editEmploymentStatus" class="input-field w-full px-3 py-1.5 rounded-lg text-sm">
+                            <option value="employed">재직</option>
+                            <option value="resigned">퇴직</option>
+                        </select>
+                    </div>
+                </div>
+                <div class="flex gap-3 pt-3">
+                    <button type="button" onclick="closeWorkerModal()" class="flex-1 px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 text-sm">취소</button>
+                    <button type="submit" class="flex-1 px-4 py-2 bg-slate-700 text-white rounded-lg hover:bg-slate-800 text-sm font-medium"><i class="fas fa-save mr-1"></i>저장</button>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <!-- 부서 편집 모달 -->
+    <div id="editDepartmentModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center p-4">
+        <div class="bg-white rounded-xl max-w-md w-full p-6">
+            <div class="flex items-center justify-between mb-4">
+                <h3 class="text-base font-semibold text-gray-900">부서 수정</h3>
+                <button onclick="closeDepartmentModal()" class="text-gray-400 hover:text-gray-600"><i class="fas fa-times"></i></button>
+            </div>
+            <form id="editDepartmentForm" class="space-y-3">
+                <input type="hidden" id="editDeptId">
+                <div>
+                    <label class="block text-xs font-medium text-gray-600 mb-1">부서명</label>
+                    <input type="text" id="editDeptName" class="input-field w-full px-3 py-1.5 rounded-lg text-sm" required>
+                </div>
+                <div>
+                    <label class="block text-xs font-medium text-gray-600 mb-1">상위부서</label>
+                    <select id="editDeptParent" class="input-field w-full px-3 py-1.5 rounded-lg text-sm">
+                        <option value="">없음 (최상위)</option>
+                    </select>
+                </div>
+                <div>
+                    <label class="block text-xs font-medium text-gray-600 mb-1">설명</label>
+                    <input type="text" id="editDeptDescription" class="input-field w-full px-3 py-1.5 rounded-lg text-sm">
+                </div>
+                <div class="grid grid-cols-2 gap-3">
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 mb-1">표시순서</label>
+                        <input type="number" id="editDeptOrder" class="input-field w-full px-3 py-1.5 rounded-lg text-sm" min="0">
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 mb-1">활성</label>
+                        <select id="editDeptActive" class="input-field w-full px-3 py-1.5 rounded-lg text-sm">
+                            <option value="1">활성</option>
+                            <option value="0">비활성</option>
+                        </select>
+                    </div>
+                </div>
+                <div class="flex gap-3 pt-3">
+                    <button type="button" onclick="closeDepartmentModal()" class="flex-1 px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 text-sm">취소</button>
+                    <button type="submit" class="flex-1 px-4 py-2 bg-slate-700 text-white rounded-lg hover:bg-slate-800 text-sm font-medium"><i class="fas fa-save mr-1"></i>저장</button>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <!-- 작업장 편집 모달 -->
+    <div id="editWorkplaceModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center p-4">
+        <div class="bg-white rounded-xl max-w-md w-full p-6">
+            <div class="flex items-center justify-between mb-4">
+                <h3 class="text-base font-semibold text-gray-900">작업장 수정</h3>
+                <button onclick="closeWorkplaceModal()" class="text-gray-400 hover:text-gray-600"><i class="fas fa-times"></i></button>
+            </div>
+            <form id="editWorkplaceForm" class="space-y-3">
+                <input type="hidden" id="editWorkplaceId">
+                <div>
+                    <label class="block text-xs font-medium text-gray-600 mb-1">작업장명</label>
+                    <input type="text" id="editWorkplaceName" class="input-field w-full px-3 py-1.5 rounded-lg text-sm" required>
+                </div>
+                <div class="grid grid-cols-2 gap-3">
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 mb-1">공장</label>
+                        <select id="editWorkplaceCategory" class="input-field w-full px-3 py-1.5 rounded-lg text-sm">
+                            <option value="">선택</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 mb-1">용도</label>
+                        <select id="editWorkplacePurpose" class="input-field w-full px-3 py-1.5 rounded-lg text-sm">
+                            <option value="">선택</option>
+                            <option value="작업구역">작업구역</option>
+                            <option value="창고">창고</option>
+                            <option value="설비">설비</option>
+                            <option value="휴게시설">휴게시설</option>
+                        </select>
+                    </div>
+                </div>
+                <div>
+                    <label class="block text-xs font-medium text-gray-600 mb-1">설명</label>
+                    <input type="text" id="editWorkplaceDesc" class="input-field w-full px-3 py-1.5 rounded-lg text-sm">
+                </div>
+                <div class="grid grid-cols-2 gap-3">
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 mb-1">우선순위</label>
+                        <input type="number" id="editWorkplacePriority" class="input-field w-full px-3 py-1.5 rounded-lg text-sm" min="0">
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 mb-1">활성</label>
+                        <select id="editWorkplaceActive" class="input-field w-full px-3 py-1.5 rounded-lg text-sm">
+                            <option value="1">활성</option>
+                            <option value="0">비활성</option>
+                        </select>
+                    </div>
+                </div>
+                <div class="flex gap-3 pt-3">
+                    <button type="button" onclick="closeWorkplaceModal()" class="flex-1 px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 text-sm">취소</button>
+                    <button type="submit" class="flex-1 px-4 py-2 bg-slate-700 text-white rounded-lg hover:bg-slate-800 text-sm font-medium"><i class="fas fa-save mr-1"></i>저장</button>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <!-- 작업장 추가 모달 -->
+    <div id="addWorkplaceModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center p-4">
+        <div class="bg-white rounded-xl max-w-md w-full p-6">
+            <div class="flex items-center justify-between mb-4">
+                <h3 class="text-base font-semibold text-gray-900"><i class="fas fa-building text-slate-400 mr-2"></i>작업장 등록</h3>
+                <button onclick="closeAddWorkplaceModal()" class="text-gray-400 hover:text-gray-600"><i class="fas fa-times"></i></button>
+            </div>
+            <form id="addWorkplaceForm" class="space-y-3">
+                <div>
+                    <label class="block text-xs font-medium text-gray-600 mb-1">작업장명 <span class="text-red-400">*</span></label>
+                    <input type="text" id="newWorkplaceName" class="input-field w-full px-3 py-1.5 rounded-lg text-sm" placeholder="작업장 이름" required>
+                </div>
+                <div class="grid grid-cols-2 gap-3">
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 mb-1">공장</label>
+                        <select id="newWorkplaceCategory" class="input-field w-full px-3 py-1.5 rounded-lg text-sm">
+                            <option value="">선택</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 mb-1">용도</label>
+                        <select id="newWorkplacePurpose" class="input-field w-full px-3 py-1.5 rounded-lg text-sm">
+                            <option value="">선택</option>
+                            <option value="작업구역">작업구역</option>
+                            <option value="창고">창고</option>
+                            <option value="설비">설비</option>
+                            <option value="휴게시설">휴게시설</option>
+                        </select>
+                    </div>
+                </div>
+                <div>
+                    <label class="block text-xs font-medium text-gray-600 mb-1">설명</label>
+                    <input type="text" id="newWorkplaceDesc" class="input-field w-full px-3 py-1.5 rounded-lg text-sm" placeholder="작업장 설명">
+                </div>
+                <div>
+                    <label class="block text-xs font-medium text-gray-600 mb-1">우선순위</label>
+                    <input type="number" id="newWorkplacePriority" class="input-field w-full px-3 py-1.5 rounded-lg text-sm" value="0" min="0">
+                </div>
+                <div class="flex gap-3 pt-3">
+                    <button type="button" onclick="closeAddWorkplaceModal()" class="flex-1 px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 text-sm">취소</button>
+                    <button type="submit" class="flex-1 px-4 py-2 bg-slate-700 text-white rounded-lg hover:bg-slate-800 text-sm font-medium"><i class="fas fa-plus mr-1"></i>추가</button>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <!-- 구역지도 설정 모달 -->
+    <div id="layoutMapModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center p-4" style="display:none;">
+        <div class="bg-white rounded-xl w-full max-w-4xl max-h-[90vh] overflow-y-auto p-6">
+            <div class="flex items-center justify-between mb-4">
+                <h3 class="text-base font-semibold text-gray-900"><i class="fas fa-map mr-2 text-slate-400"></i>구역지도 설정</h3>
+                <button onclick="closeLayoutMapModal()" class="text-gray-400 hover:text-gray-600"><i class="fas fa-times"></i></button>
+            </div>
+
+            <!-- 이미지 업로드 -->
+            <div class="mb-5 p-4 bg-gray-50 rounded-lg">
+                <h4 class="text-sm font-semibold text-gray-700 mb-3">레이아웃 이미지</h4>
+                <div id="currentLayoutImage" class="mb-3">
+                    <span class="text-sm text-gray-400">업로드된 이미지가 없습니다</span>
+                </div>
+                <div class="flex items-center gap-3">
+                    <input type="file" id="layoutImageFile" accept="image/jpeg,image/png,image/gif,image/webp" onchange="previewLayoutImage(event)" class="text-sm text-gray-500 file:mr-3 file:py-1.5 file:px-3 file:rounded-lg file:border-0 file:text-sm file:bg-slate-100 file:text-slate-700 hover:file:bg-slate-200">
+                    <button onclick="uploadLayoutImage()" class="px-4 py-1.5 bg-slate-700 text-white rounded-lg hover:bg-slate-800 text-sm font-medium whitespace-nowrap">
+                        <i class="fas fa-upload mr-1"></i>이미지 업로드
+                    </button>
+                </div>
+            </div>
+
+            <!-- 캔버스 영역 -->
+            <div class="mb-5">
+                <h4 class="text-sm font-semibold text-gray-700 mb-3">영역 그리기 <span class="text-xs text-gray-400 font-normal">(캔버스 위에서 드래그하여 사각형 영역을 그리세요)</span></h4>
+                <canvas id="regionCanvas" width="800" height="400" style="border:1px solid #e2e8f0; border-radius:8px; cursor:crosshair; max-width:100%;"></canvas>
+            </div>
+
+            <!-- 작업장 선택 + 저장 -->
+            <div class="mb-5 flex items-center gap-3 flex-wrap">
+                <select id="regionWorkplaceSelect" class="input-field px-3 py-1.5 rounded-lg text-sm min-w-[200px]">
+                    <option value="">작업장을 선택하세요</option>
+                </select>
+                <button onclick="saveRegion()" class="px-4 py-1.5 bg-emerald-600 text-white rounded-lg hover:bg-emerald-700 text-sm font-medium">
+                    <i class="fas fa-save mr-1"></i>영역 저장
+                </button>
+                <button onclick="clearCurrentRegion()" class="px-4 py-1.5 border border-gray-300 rounded-lg hover:bg-gray-50 text-sm">
+                    <i class="fas fa-eraser mr-1"></i>초기화
+                </button>
+            </div>
+
+            <!-- 등록된 영역 목록 -->
+            <div>
+                <h4 class="text-sm font-semibold text-gray-700 mb-3">등록된 영역</h4>
+                <div id="regionList">
+                    <p class="text-sm text-gray-400 text-center py-4">정의된 영역이 없습니다</p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- 설비 추가/편집 모달 -->
+    <div id="equipmentModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center p-4">
+        <div class="bg-white rounded-xl max-w-lg w-full p-6 max-h-[90vh] overflow-y-auto">
+            <div class="flex items-center justify-between mb-4">
+                <h3 id="eqModalTitle" class="text-base font-semibold text-gray-900">설비 추가</h3>
+                <button onclick="closeEquipmentModal()" class="text-gray-400 hover:text-gray-600"><i class="fas fa-times"></i></button>
+            </div>
+            <form id="equipmentForm" class="space-y-3">
+                <input type="hidden" id="eqEditId">
+                <div class="grid grid-cols-2 gap-3">
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 mb-1">관리번호 <span class="text-red-400">*</span></label>
+                        <div class="flex gap-1">
+                            <input type="text" id="eqCode" class="input-field w-full px-3 py-1.5 rounded-lg text-sm" placeholder="TKP-001" required>
+                            <button type="button" onclick="generateEquipmentCode()" class="px-2 py-1.5 bg-gray-100 hover:bg-gray-200 rounded-lg text-xs text-gray-600 whitespace-nowrap" title="자동생성"><i class="fas fa-magic"></i></button>
+                        </div>
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 mb-1">설비명 <span class="text-red-400">*</span></label>
+                        <input type="text" id="eqName" class="input-field w-full px-3 py-1.5 rounded-lg text-sm" placeholder="설비 이름" required>
+                    </div>
+                </div>
+                <div class="grid grid-cols-2 gap-3">
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 mb-1">유형</label>
+                        <input type="text" id="eqType" list="eqTypeDatalist" class="input-field w-full px-3 py-1.5 rounded-lg text-sm" placeholder="유형 선택/입력">
+                        <datalist id="eqTypeDatalist"></datalist>
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 mb-1">상태</label>
+                        <select id="eqStatus" class="input-field w-full px-3 py-1.5 rounded-lg text-sm">
+                            <option value="active">가동중</option>
+                            <option value="maintenance">점검중</option>
+                            <option value="inactive">비활성</option>
+                        </select>
+                    </div>
+                </div>
+                <div class="grid grid-cols-2 gap-3">
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 mb-1">제조사</label>
+                        <input type="text" id="eqManufacturer" class="input-field w-full px-3 py-1.5 rounded-lg text-sm" placeholder="제조사">
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 mb-1">모델명</label>
+                        <input type="text" id="eqModel" class="input-field w-full px-3 py-1.5 rounded-lg text-sm" placeholder="모델명">
+                    </div>
+                </div>
+                <div class="grid grid-cols-2 gap-3">
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 mb-1">공급업체</label>
+                        <input type="text" id="eqSupplier" class="input-field w-full px-3 py-1.5 rounded-lg text-sm" placeholder="공급업체">
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 mb-1">구매가격</label>
+                        <input type="number" id="eqPrice" class="input-field w-full px-3 py-1.5 rounded-lg text-sm" placeholder="0" min="0">
+                    </div>
+                </div>
+                <div class="grid grid-cols-2 gap-3">
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 mb-1">설치일</label>
+                        <input type="date" id="eqInstallDate" class="input-field w-full px-3 py-1.5 rounded-lg text-sm">
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-gray-600 mb-1">시리얼번호</label>
+                        <input type="text" id="eqSerial" class="input-field w-full px-3 py-1.5 rounded-lg text-sm" placeholder="시리얼번호">
+                    </div>
+                </div>
+                <div>
+                    <label class="block text-xs font-medium text-gray-600 mb-1">사양</label>
+                    <input type="text" id="eqSpecs" class="input-field w-full px-3 py-1.5 rounded-lg text-sm" placeholder="사양 정보">
+                </div>
+                <div>
+                    <label class="block text-xs font-medium text-gray-600 mb-1">비고</label>
+                    <input type="text" id="eqNotes" class="input-field w-full px-3 py-1.5 rounded-lg text-sm" placeholder="비고">
+                </div>
+                <div class="flex gap-3 pt-3">
+                    <button type="button" onclick="closeEquipmentModal()" class="flex-1 px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 text-sm">취소</button>
+                    <button type="submit" class="flex-1 px-4 py-2 bg-slate-700 text-white rounded-lg hover:bg-slate-800 text-sm font-medium"><i class="fas fa-save mr-1"></i>저장</button>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <!-- 설비 상세 모달 -->
+    <div id="eqDetailModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center p-4">
+        <div class="bg-white rounded-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto p-6">
+            <div class="flex items-center justify-between mb-4">
+                <h3 class="text-base font-semibold text-gray-900"><i class="fas fa-cog text-slate-400 mr-2"></i><span id="eqDetailTitle">설비 상세</span></h3>
+                <button onclick="closeEqDetailModal()" class="text-gray-400 hover:text-gray-600"><i class="fas fa-times"></i></button>
+            </div>
+            <div id="eqDetailContent"></div>
+            <!-- 사진 -->
+            <div class="mt-4 border-t pt-4">
+                <div class="flex items-center justify-between mb-2">
+                    <h4 class="text-sm font-semibold text-gray-700"><i class="fas fa-camera text-gray-400 mr-1"></i>설비 사진</h4>
+                    <label class="px-2 py-1 bg-gray-100 hover:bg-gray-200 rounded text-xs cursor-pointer">
+                        <i class="fas fa-plus mr-1"></i>사진 추가
+                        <input type="file" id="eqPhotoFile" accept="image/*" onchange="uploadEqPhoto()" class="hidden">
+                    </label>
+                </div>
+                <div id="eqPhotoGrid" class="grid grid-cols-4 gap-2">
+                    <p class="text-gray-400 text-xs col-span-4 text-center py-2">사진 없음</p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- 사진 확대 모달 -->
+    <div id="photoViewModal" class="fixed inset-0 bg-black bg-opacity-80 hidden z-[60] flex items-center justify-center p-4 cursor-pointer" onclick="this.classList.add('hidden')">
+        <img id="photoViewImage" class="max-w-full max-h-[90vh] rounded-lg shadow-2xl">
+    </div>
+
+    <script>
+    /* ===== Config ===== */
+    const API_BASE = '/api';
+
+    /* ===== Token ===== */
+    function _cookieGet(n) { const m = document.cookie.match(new RegExp('(?:^|; )' + n + '=([^;]*)')); return m ? decodeURIComponent(m[1]) : null; }
+    function _cookieRemove(n) { let c = n + '=; path=/; max-age=0'; if (location.hostname.includes('technicalkorea.net')) c += '; domain=.technicalkorea.net'; document.cookie = c; }
+    function getToken() { return _cookieGet('sso_token') || localStorage.getItem('sso_token') || localStorage.getItem('access_token'); }
+    function getLoginUrl() {
+        const h = location.hostname;
+        if (h.includes('technicalkorea.net')) return location.protocol + '//tkfb.technicalkorea.net/login?redirect=' + encodeURIComponent(location.href);
+        return location.protocol + '//' + h + ':30000/login?redirect=' + encodeURIComponent(location.href);
+    }
+    function decodeToken(t) { try { return JSON.parse(atob(t.split('.')[1].replace(/-/g,'+').replace(/_/g,'/'))); } catch { return null; } }
+
+    /* ===== API ===== */
+    async function api(path, opts = {}) {
+        const token = getToken();
+        const res = await fetch(API_BASE + path, { ...opts, headers: { 'Content-Type': 'application/json', 'Authorization': token ? `Bearer ${token}` : '', ...(opts.headers||{}) } });
+        if (res.status === 401) { location.href = getLoginUrl(); throw new Error('인증 만료'); }
+        const data = await res.json();
+        if (!res.ok) throw new Error(data.error || data.detail || '요청 실패');
+        return data;
+    }
+
+    /* ===== Toast ===== */
+    function showToast(msg, type = 'success') {
+        document.querySelector('.toast-message')?.remove();
+        const el = document.createElement('div');
+        el.className = `toast-message fixed bottom-4 right-4 px-4 py-3 rounded-lg text-white z-[10000] shadow-lg ${type==='success'?'bg-emerald-500':'bg-red-500'}`;
+        el.innerHTML = `<i class="fas ${type==='success'?'fa-check-circle':'fa-exclamation-circle'} mr-2"></i>${msg}`;
+        document.body.appendChild(el);
+        setTimeout(() => { el.classList.add('opacity-0'); setTimeout(() => el.remove(), 300); }, 3000);
+    }
+
+    /* ===== Helpers ===== */
+    const DEPT = { production:'생산', quality:'품질', purchasing:'구매', design:'설계', sales:'영업' };
+    function deptLabel(d) { return DEPT[d] || d || ''; }
+
+    /* ===== Tab ===== */
+    function switchTab(name) {
+        document.querySelectorAll('[id^="tab-"]').forEach(el => el.classList.add('hidden'));
+        document.getElementById('tab-' + name)?.classList.remove('hidden');
+        document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
+        event.currentTarget.classList.add('active');
+        // 사이드바 레이아웃 탭에서 main/nav/header 너비 확장
+        const mainEl = document.querySelector('main');
+        const navInner = document.getElementById('tabNavInner');
+        const headerInner = document.getElementById('headerInner');
+        const wideClass = 'max-w-[1600px]';
+        const defaultClass = 'max-w-7xl';
+        if (name === 'workplaces' || name === 'tasks' || name === 'vacations') {
+            [mainEl, navInner, headerInner].forEach(el => { el.classList.remove(defaultClass); el.classList.add(wideClass); });
+        } else {
+            [mainEl, navInner, headerInner].forEach(el => { el.classList.remove(wideClass); el.classList.add(defaultClass); });
+        }
+        if (name === 'projects' && !projectsLoaded) loadProjects();
+        if (name === 'workers' && !workersLoaded) loadWorkers();
+        if (name === 'departments' && !departmentsLoaded) loadDepartments();
+        if (name === 'workplaces' && !workplacesLoaded) loadWorkplaces();
+        if (name === 'tasks' && !tasksLoaded) loadTasksTab();
+        if (name === 'vacations' && !vacationsLoaded) loadVacationsTab();
+    }
+
+    /* ===== Projects CRUD ===== */
+    let projects = [], projectsLoaded = false;
+
+    function formatDate(d) { if (!d) return ''; return d.substring(0, 10); }
+    function statusBadge(status, isActive) {
+        if (!isActive || isActive === 0 || isActive === false) return '<span class="px-1.5 py-0.5 rounded text-xs bg-gray-100 text-gray-400">비활성</span>';
+        if (status === 'completed') return '<span class="px-1.5 py-0.5 rounded text-xs bg-blue-50 text-blue-600">완료</span>';
+        return '<span class="px-1.5 py-0.5 rounded text-xs bg-emerald-50 text-emerald-600">진행중</span>';
+    }
+
+    async function loadProjects() {
+        try {
+            const r = await api('/projects'); projects = r.data || r;
+            projectsLoaded = true;
+            displayProjects();
+        } catch (err) {
+            document.getElementById('projectList').innerHTML = `<div class="text-red-500 text-center py-6"><i class="fas fa-exclamation-triangle text-xl"></i><p class="text-sm mt-2">${err.message}</p></div>`;
+        }
+    }
+
+    function displayProjects() {
+        const c = document.getElementById('projectList');
+        if (!projects.length) { c.innerHTML = '<p class="text-gray-400 text-center py-4 text-sm">등록된 프로젝트가 없습니다.</p>'; return; }
+        c.innerHTML = projects.map(p => `
+            <div class="flex items-center justify-between p-2.5 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
+                <div class="flex-1 min-w-0">
+                    <div class="text-sm font-medium text-gray-800 truncate"><i class="fas fa-folder mr-1.5 text-gray-400 text-xs"></i>${p.project_name}</div>
+                    <div class="text-xs text-gray-500 flex items-center gap-1.5 mt-0.5 flex-wrap">
+                        <span class="font-mono">${p.job_no}</span>
+                        ${p.site?`<span class="px-1.5 py-0.5 rounded bg-amber-50 text-amber-600">${p.site}</span>`:''}
+                        ${p.pm?`<span class="px-1.5 py-0.5 rounded bg-slate-50 text-slate-500">${p.pm}</span>`:''}
+                        ${statusBadge(p.project_status, p.is_active)}
+                        ${p.due_date?`<span class="text-gray-400">${formatDate(p.due_date)}</span>`:''}
+                    </div>
+                </div>
+                <div class="flex gap-1 ml-2 flex-shrink-0">
+                    <button onclick="editProject(${p.project_id})" class="p-1.5 text-slate-500 hover:text-slate-700 hover:bg-slate-200 rounded" title="편집"><i class="fas fa-pen-to-square text-xs"></i></button>
+                    ${p.is_active?`<button onclick="deactivateProject(${p.project_id},'${p.project_name.replace(/'/g,"\\'")}')" class="p-1.5 text-red-400 hover:text-red-600 hover:bg-red-100 rounded" title="비활성화"><i class="fas fa-ban text-xs"></i></button>`:''}
+                </div>
+            </div>`).join('');
+    }
+
+    document.getElementById('addProjectForm').addEventListener('submit', async e => {
+        e.preventDefault();
+        try {
+            await api('/projects', { method: 'POST', body: JSON.stringify({
+                job_no: document.getElementById('newJobNo').value.trim(),
+                project_name: document.getElementById('newProjectName').value.trim(),
+                contract_date: document.getElementById('newContractDate').value || null,
+                due_date: document.getElementById('newDueDate').value || null,
+                site: document.getElementById('newSite').value.trim() || null,
+                pm: document.getElementById('newPm').value.trim() || null
+            })});
+            showToast('프로젝트가 추가되었습니다.'); document.getElementById('addProjectForm').reset(); await loadProjects();
+        } catch(e) { showToast(e.message, 'error'); }
+    });
+
+    function editProject(id) {
+        const p = projects.find(x => x.project_id === id); if (!p) return;
+        document.getElementById('editProjectId').value = p.project_id;
+        document.getElementById('editJobNo').value = p.job_no;
+        document.getElementById('editProjectName').value = p.project_name;
+        document.getElementById('editContractDate').value = formatDate(p.contract_date);
+        document.getElementById('editDueDate').value = formatDate(p.due_date);
+        document.getElementById('editSite').value = p.site || '';
+        document.getElementById('editPm').value = p.pm || '';
+        document.getElementById('editProjectStatus').value = p.project_status || 'active';
+        document.getElementById('editIsActive').value = p.is_active ? '1' : '0';
+        document.getElementById('editProjectModal').classList.remove('hidden');
+    }
+    function closeProjectModal() { document.getElementById('editProjectModal').classList.add('hidden'); }
+
+    document.getElementById('editProjectForm').addEventListener('submit', async e => {
+        e.preventDefault();
+        try {
+            await api(`/projects/${document.getElementById('editProjectId').value}`, { method: 'PUT', body: JSON.stringify({
+                job_no: document.getElementById('editJobNo').value.trim(),
+                project_name: document.getElementById('editProjectName').value.trim(),
+                contract_date: document.getElementById('editContractDate').value || null,
+                due_date: document.getElementById('editDueDate').value || null,
+                site: document.getElementById('editSite').value.trim() || null,
+                pm: document.getElementById('editPm').value.trim() || null,
+                project_status: document.getElementById('editProjectStatus').value,
+                is_active: document.getElementById('editIsActive').value === '1'
+            })});
+            showToast('수정되었습니다.'); closeProjectModal(); await loadProjects();
+        } catch(e) { showToast(e.message, 'error'); }
+    });
+
+    async function deactivateProject(id, name) {
+        if (!confirm(`"${name}" 프로젝트를 비활성화?`)) return;
+        try { await api(`/projects/${id}`, { method: 'DELETE' }); showToast('프로젝트 비활성화 완료'); await loadProjects(); } catch(e) { showToast(e.message, 'error'); }
+    }
+
+    /* ===== Permission Page Definitions ===== */
+    const SYSTEM1_PAGES = {
+        '작업 관리': [
+            { key: 's1.dashboard', title: '대시보드', icon: 'fa-chart-line', def: true },
+            { key: 's1.work.tbm', title: 'TBM 관리', icon: 'fa-hard-hat', def: true },
+            { key: 's1.work.report_create', title: '작업보고서 작성', icon: 'fa-file-pen', def: true },
+            { key: 's1.work.analysis', title: '작업 분석', icon: 'fa-magnifying-glass-chart', def: false },
+            { key: 's1.work.nonconformity', title: '부적합 현황', icon: 'fa-triangle-exclamation', def: true },
+        ],
+        '공장 관리': [
+            { key: 's1.factory.repair_management', title: '시설설비 관리', icon: 'fa-wrench', def: false },
+            { key: 's1.inspection.daily_patrol', title: '일일순회점검', icon: 'fa-clipboard-check', def: false },
+            { key: 's1.inspection.checkin', title: '출근 체크', icon: 'fa-fingerprint', def: true },
+            { key: 's1.inspection.work_status', title: '근무 현황', icon: 'fa-user-clock', def: false },
+        ],
+        '안전 관리': [
+            { key: 's1.safety.visit_request', title: '출입 신청', icon: 'fa-id-badge', def: true },
+            { key: 's1.safety.management', title: '안전 관리', icon: 'fa-fire-extinguisher', def: false },
+            { key: 's1.safety.checklist_manage', title: '체크리스트 관리', icon: 'fa-list-check', def: false },
+        ],
+        '근태 관리': [
+            { key: 's1.attendance.my_vacation_info', title: '내 연차 정보', icon: 'fa-umbrella-beach', def: true },
+            { key: 's1.attendance.monthly', title: '월간 근태', icon: 'fa-calendar-days', def: true },
+            { key: 's1.attendance.vacation_request', title: '휴가 신청', icon: 'fa-paper-plane', def: true },
+            { key: 's1.attendance.vacation_management', title: '휴가 관리', icon: 'fa-calendar-check', def: false },
+            { key: 's1.attendance.vacation_allocation', title: '휴가 발생 입력', icon: 'fa-calendar-plus', def: false },
+            { key: 's1.attendance.annual_overview', title: '연간 휴가 현황', icon: 'fa-chart-pie', def: false },
+        ],
+        '시스템 관리': [
+            { key: 's1.admin.workers', title: '작업자 관리', icon: 'fa-people-group', def: false },
+            { key: 's1.admin.projects', title: '프로젝트 관리', icon: 'fa-folder-open', def: false },
+            { key: 's1.admin.tasks', title: '작업 관리', icon: 'fa-list-check', def: false },
+            { key: 's1.admin.workplaces', title: '작업장 관리', icon: 'fa-warehouse', def: false },
+            { key: 's1.admin.equipments', title: '설비 관리', icon: 'fa-gears', def: false },
+            { key: 's1.admin.issue_categories', title: '신고 카테고리', icon: 'fa-tags', def: false },
+            { key: 's1.admin.attendance_report', title: '출퇴근-보고서 대조', icon: 'fa-scale-balanced', def: false },
+        ]
+    };
+
+    const SYSTEM3_PAGES = {
+        '메인': [
+            { key: 'issues_dashboard', title: '현황판', icon: 'fa-chart-line', def: true },
+            { key: 'issues_inbox', title: '수신함', icon: 'fa-inbox', def: true },
+            { key: 'issues_management', title: '관리함', icon: 'fa-cog', def: false },
+            { key: 'issues_archive', title: '폐기함', icon: 'fa-archive', def: false },
+        ],
+        '업무': [
+            { key: 'daily_work', title: '일일 공수', icon: 'fa-calendar-check', def: false },
+            { key: 'projects_manage', title: '프로젝트 관리', icon: 'fa-folder-open', def: false },
+        ],
+        '보고서': [
+            { key: 'reports', title: '보고서', icon: 'fa-chart-bar', def: false },
+            { key: 'reports_daily', title: '일일보고서', icon: 'fa-file-excel', def: false },
+            { key: 'reports_weekly', title: '주간보고서', icon: 'fa-calendar-week', def: false },
+            { key: 'reports_monthly', title: '월간보고서', icon: 'fa-calendar-alt', def: false },
+        ]
+    };
+
+    /* ===== State ===== */
+    let currentUser = null, users = [], selectedUserId = null, currentPermissions = {};
+
+    /* ===== Init ===== */
+    async function init() {
+        const token = getToken();
+        if (!token) { location.href = getLoginUrl(); return; }
+        const decoded = decodeToken(token);
+        if (!decoded) { location.href = getLoginUrl(); return; }
+
+        currentUser = { id: decoded.user_id||decoded.id, username: decoded.username||decoded.sub, name: decoded.name||decoded.full_name, role: decoded.role||decoded.access_level };
+        const dn = currentUser.name || currentUser.username;
+        document.getElementById('headerUserName').textContent = dn;
+        document.getElementById('headerUserRole').textContent = currentUser.role === 'admin' ? '관리자' : '사용자';
+        document.getElementById('headerUserAvatar').textContent = dn.charAt(0).toUpperCase();
+
+        if (currentUser.role === 'admin') {
+            document.getElementById('tabNav').classList.remove('hidden');
+            document.getElementById('adminSection').classList.remove('hidden');
+            await loadUsers();
+        } else {
+            document.getElementById('passwordChangeSection').classList.remove('hidden');
+        }
+        setTimeout(() => document.querySelector('.fade-in').classList.add('visible'), 50);
+    }
+
+    /* ===== Users CRUD ===== */
+    async function loadUsers() {
+        try {
+            const r = await api('/users'); users = r.data || r;
+            displayUsers(); updatePermissionUserSelect();
+        } catch (err) {
+            document.getElementById('userList').innerHTML = `<div class="text-red-500 text-center py-6"><i class="fas fa-exclamation-triangle text-xl"></i><p class="text-sm mt-2">${err.message}</p></div>`;
+        }
+    }
+    function displayUsers() {
+        const c = document.getElementById('userList');
+        if (!users.length) { c.innerHTML = '<p class="text-gray-400 text-center py-4 text-sm">등록된 사용자가 없습니다.</p>'; return; }
+        c.innerHTML = users.map(u => `
+            <div class="flex items-center justify-between p-2.5 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
+                <div class="flex-1 min-w-0">
+                    <div class="text-sm font-medium text-gray-800 truncate"><i class="fas fa-user mr-1.5 text-gray-400 text-xs"></i>${u.name||u.username}</div>
+                    <div class="text-xs text-gray-500 flex items-center gap-1.5 mt-0.5 flex-wrap">
+                        <span>${u.username}</span>
+                        ${u.department?`<span class="px-1.5 py-0.5 rounded bg-green-50 text-green-600">${deptLabel(u.department)}</span>`:''}
+                        <span class="px-1.5 py-0.5 rounded ${u.role==='admin'?'bg-red-50 text-red-600':'bg-slate-50 text-slate-500'}">${u.role==='admin'?'관리자':'사용자'}</span>
+                        ${u.is_active===0||u.is_active===false?'<span class="px-1.5 py-0.5 rounded bg-gray-100 text-gray-400">비활성</span>':''}
+                    </div>
+                </div>
+                <div class="flex gap-1 ml-2 flex-shrink-0">
+                    <button onclick="editUser(${u.user_id})" class="p-1.5 text-slate-500 hover:text-slate-700 hover:bg-slate-200 rounded" title="편집"><i class="fas fa-pen-to-square text-xs"></i></button>
+                    <button onclick="resetPassword(${u.user_id},'${u.username}')" class="p-1.5 text-amber-500 hover:text-amber-700 hover:bg-amber-100 rounded" title="비밀번호 초기화"><i class="fas fa-key text-xs"></i></button>
+                    ${u.username!=='hyungi'?`<button onclick="deleteUser(${u.user_id},'${u.username}')" class="p-1.5 text-red-400 hover:text-red-600 hover:bg-red-100 rounded" title="삭제"><i class="fas fa-trash text-xs"></i></button>`:''}
+                </div>
+            </div>`).join('');
+    }
+
+    document.getElementById('addUserForm').addEventListener('submit', async e => {
+        e.preventDefault();
+        try {
+            await api('/users', { method:'POST', body: JSON.stringify({ username: document.getElementById('newUsername').value.trim(), name: document.getElementById('newFullName').value.trim(), password: document.getElementById('newPassword').value, department: document.getElementById('newDepartment').value||null, role: document.getElementById('newRole').value }) });
+            showToast('사용자가 추가되었습니다.'); document.getElementById('addUserForm').reset(); await loadUsers();
+        } catch(e) { showToast(e.message,'error'); }
+    });
+
+    function editUser(id) {
+        const u = users.find(x=>x.user_id===id); if(!u) return;
+        document.getElementById('editUserId').value=u.user_id; document.getElementById('editUsername').value=u.username;
+        document.getElementById('editFullName').value=u.name||''; document.getElementById('editDepartment').value=u.department||''; document.getElementById('editRole').value=u.role;
+        document.getElementById('editUserModal').classList.remove('hidden');
+    }
+    function closeEditModal() { document.getElementById('editUserModal').classList.add('hidden'); }
+
+    document.getElementById('editUserForm').addEventListener('submit', async e => {
+        e.preventDefault();
+        try {
+            await api(`/users/${document.getElementById('editUserId').value}`, { method:'PUT', body: JSON.stringify({ name: document.getElementById('editFullName').value.trim()||null, department: document.getElementById('editDepartment').value||null, role: document.getElementById('editRole').value }) });
+            showToast('수정되었습니다.'); closeEditModal(); await loadUsers();
+        } catch(e) { showToast(e.message,'error'); }
+    });
+
+    async function resetPassword(id, name) {
+        if (!confirm(`${name}의 비밀번호를 "000000"으로 초기화?`)) return;
+        try { await api(`/users/${id}/reset-password`,{method:'POST',body:JSON.stringify({new_password:'000000'})}); showToast(`${name} 비밀번호 초기화 완료`); } catch(e) { showToast(e.message,'error'); }
+    }
+    async function deleteUser(id, name) {
+        if (!confirm(`${name}을(를) 비활성화?`)) return;
+        try { await api(`/users/${id}`,{method:'DELETE'}); showToast('비활성화 완료'); await loadUsers(); } catch(e) { showToast(e.message,'error'); }
+    }
+
+    document.getElementById('changePasswordForm').addEventListener('submit', async e => {
+        e.preventDefault();
+        const np = document.getElementById('newPasswordChange').value;
+        if (np !== document.getElementById('confirmPassword').value) { showToast('비밀번호 불일치','error'); return; }
+        try {
+            await api('/users/change-password',{method:'POST',body:JSON.stringify({current_password:document.getElementById('currentPassword').value,new_password:np})});
+            showToast('비밀번호 변경 완료'); document.getElementById('changePasswordForm').reset();
+        } catch(e) { showToast(e.message,'error'); }
+    });
+
+    /* ===== Permissions ===== */
+    function updatePermissionUserSelect() {
+        const sel = document.getElementById('permissionUserSelect');
+        sel.innerHTML = '<option value="">사용자 선택</option>';
+        users.filter(u=>u.role==='user').forEach(u => { const o=document.createElement('option'); o.value=u.user_id; o.textContent=`${u.name||u.username} (${u.username})`; sel.appendChild(o); });
+    }
+
+    document.getElementById('permissionUserSelect').addEventListener('change', async e => {
+        selectedUserId = e.target.value;
+        if (selectedUserId) {
+            await loadUserPermissions(selectedUserId);
+            renderPermissionGrid();
+            document.getElementById('permissionPanel').classList.remove('hidden');
+            document.getElementById('permissionEmpty').classList.add('hidden');
+        } else {
+            document.getElementById('permissionPanel').classList.add('hidden');
+            document.getElementById('permissionEmpty').classList.remove('hidden');
+        }
+    });
+
+    async function loadUserPermissions(userId) {
+        // 기본값 세팅
+        currentPermissions = {};
+        const allDefs = { ...SYSTEM1_PAGES, ...SYSTEM3_PAGES };
+        Object.values(allDefs).flat().forEach(p => { currentPermissions[p.key] = p.def; });
+        try {
+            const perms = await api(`/users/${userId}/page-permissions`);
+            (Array.isArray(perms)?perms:[]).forEach(p => { currentPermissions[p.page_name] = !!p.can_access; });
+        } catch(e) { console.warn('권한 로드 실패:', e); }
+    }
+
+    function renderPermissionGrid() {
+        renderSystemPerms('s1-perms', SYSTEM1_PAGES, 'blue');
+        renderSystemPerms('s3-perms', SYSTEM3_PAGES, 'purple');
+    }
+
+    function renderSystemPerms(containerId, pageDef, color) {
+        const container = document.getElementById(containerId);
+        let html = '';
+        Object.entries(pageDef).forEach(([groupName, pages]) => {
+            const groupId = containerId + '-' + groupName.replace(/\s/g,'');
+            const allChecked = pages.every(p => currentPermissions[p.key]);
+            html += `
+                <div>
+                    <div class="group-header flex items-center justify-between py-2 px-1 rounded" onclick="toggleGroup('${groupId}')">
+                        <div class="flex items-center gap-2">
+                            <i class="fas fa-chevron-down text-xs text-gray-400 transition-transform" id="arrow-${groupId}"></i>
+                            <span class="text-xs font-semibold text-gray-600 uppercase tracking-wide">${groupName}</span>
+                            <span class="text-xs text-gray-400">${pages.length}</span>
+                        </div>
+                        <label class="flex items-center gap-1.5 text-xs text-gray-500 cursor-pointer" onclick="event.stopPropagation()">
+                            <input type="checkbox" ${allChecked?'checked':''} onchange="toggleGroupAll('${groupId}', this.checked)"
+                                class="h-3.5 w-3.5 text-${color}-500 rounded border-gray-300">
+                            <span>전체</span>
+                        </label>
+                    </div>
+                    <div id="${groupId}" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2 mt-1">
+                        ${pages.map(p => {
+                            const checked = currentPermissions[p.key] || false;
+                            return `
+                            <label class="perm-item flex items-center gap-2.5 p-2.5 border rounded-lg cursor-pointer ${checked?'checked':'border-gray-200'}" data-group="${groupId}">
+                                <input type="checkbox" id="perm_${p.key}" ${checked?'checked':''} class="h-4 w-4 text-${color}-500 rounded border-gray-300 focus:ring-${color}-400"
+                                    onchange="onPermChange(this)">
+                                <i class="fas ${p.icon} text-sm ${checked?`text-${color}-500`:'text-gray-400'}" data-color="${color}"></i>
+                                <span class="text-sm text-gray-700">${p.title}</span>
+                            </label>`;
+                        }).join('')}
+                    </div>
+                </div>`;
+        });
+        container.innerHTML = html;
+    }
+
+    function onPermChange(cb) {
+        const item = cb.closest('.perm-item');
+        const icon = item.querySelector('i[data-color]');
+        const color = icon.dataset.color;
+        item.classList.toggle('checked', cb.checked);
+        icon.classList.toggle(`text-${color}-500`, cb.checked);
+        icon.classList.toggle('text-gray-400', !cb.checked);
+        // 그룹 전체 체크박스 동기화
+        const group = item.dataset.group;
+        const groupCbs = document.querySelectorAll(`[data-group="${group}"] input[type="checkbox"]`);
+        const allChecked = [...groupCbs].every(c => c.checked);
+        const groupHeader = document.getElementById(group)?.previousElementSibling;
+        if (groupHeader) { const gc = groupHeader.querySelector('input[type="checkbox"]'); if(gc) gc.checked = allChecked; }
+    }
+
+    function toggleGroup(groupId) {
+        const el = document.getElementById(groupId);
+        const arrow = document.getElementById('arrow-' + groupId);
+        el.classList.toggle('hidden');
+        arrow?.classList.toggle('-rotate-90');
+    }
+
+    function toggleGroupAll(groupId, checked) {
+        document.querySelectorAll(`#${groupId} input[type="checkbox"]`).forEach(cb => {
+            cb.checked = checked;
+            onPermChange(cb);
+        });
+    }
+
+    function toggleSystemAll(prefix, checked) {
+        const containerId = prefix === 's1' ? 's1-perms' : 's3-perms';
+        document.querySelectorAll(`#${containerId} input[type="checkbox"]`).forEach(cb => {
+            cb.checked = checked;
+            onPermChange(cb);
+        });
+        // 그룹 전체 체크박스도 동기화
+        document.querySelectorAll(`#${containerId} .group-header input[type="checkbox"]`).forEach(cb => cb.checked = checked);
+    }
+
+    // 저장
+    document.getElementById('savePermissionsBtn').addEventListener('click', async () => {
+        if (!selectedUserId) return;
+        const btn = document.getElementById('savePermissionsBtn');
+        const st = document.getElementById('permissionSaveStatus');
+        btn.disabled = true; btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>저장 중...';
+
+        try {
+            const allPages = [...Object.values(SYSTEM1_PAGES).flat(), ...Object.values(SYSTEM3_PAGES).flat()];
+            const permissions = allPages.map(p => {
+                const cb = document.getElementById('perm_' + p.key);
+                return { page_name: p.key, can_access: cb ? cb.checked : false };
+            });
+            await api('/permissions/bulk-grant', { method:'POST', body: JSON.stringify({ user_id: parseInt(selectedUserId), permissions }) });
+            st.textContent = '저장 완료'; st.className = 'text-sm text-emerald-600';
+            showToast('권한이 저장되었습니다.');
+            setTimeout(() => { st.textContent = ''; }, 3000);
+        } catch(e) {
+            st.textContent = e.message; st.className = 'text-sm text-red-500';
+            showToast('저장 실패: ' + e.message, 'error');
+        } finally { btn.disabled = false; btn.innerHTML = '<i class="fas fa-save mr-2"></i>권한 저장'; }
+    });
+
+    /* ===== Vacation CRUD ===== */
+    let vacTypes = [], vacBalances = [], vacationsLoaded = false, vacWorkers = [];
+
+    async function loadVacationsTab() {
+        // 연도 셀렉트 초기화
+        const sel = document.getElementById('vacYear');
+        if (sel && !sel.children.length) {
+            const curYear = new Date().getFullYear();
+            for (let y = curYear + 1; y >= curYear - 2; y--) {
+                const o = document.createElement('option');
+                o.value = y; o.textContent = y + '년';
+                if (y === curYear) o.selected = true;
+                sel.appendChild(o);
+            }
+        }
+        await loadVacTypes();
+        await loadVacWorkers();
+        await loadVacBalances();
+        vacationsLoaded = true;
+    }
+
+    async function loadVacTypes() {
+        try {
+            const r = await api('/vacations/types?all=true');
+            vacTypes = r.data || [];
+            renderVacTypeSidebar();
+        } catch(e) { console.warn('휴가 유형 로드 실패:', e); }
+    }
+
+    async function loadVacWorkers() {
+        try {
+            const r = await api('/workers');
+            vacWorkers = (r.data || []).filter(w => w.status !== 'inactive');
+        } catch(e) { console.warn('작업자 로드 실패:', e); }
+    }
+
+    function renderVacTypeSidebar() {
+        const c = document.getElementById('vacTypeSidebar');
+        if (!c) return;
+        if (!vacTypes.length) { c.innerHTML = '<p class="text-gray-400 text-center py-4 text-sm">등록된 유형이 없습니다.</p>'; return; }
+        c.innerHTML = vacTypes.map(vt => `
+            <div class="group flex items-center justify-between p-2 rounded-lg ${vt.is_active ? 'bg-gray-50' : 'bg-gray-50 opacity-50'} hover:bg-blue-50 transition-colors">
+                <div class="flex-1 min-w-0">
+                    <div class="text-sm font-medium text-gray-800 truncate flex items-center gap-1.5">
+                        ${vt.type_name}
+                        ${vt.is_system ? '<span class="text-[10px] px-1 py-0.5 rounded bg-blue-50 text-blue-500">시스템</span>' : ''}
+                        ${vt.is_special ? '<span class="text-[10px] px-1 py-0.5 rounded bg-purple-50 text-purple-500">특별</span>' : ''}
+                        ${!vt.is_active ? '<span class="text-[10px] px-1 py-0.5 rounded bg-gray-100 text-gray-400">비활성</span>' : ''}
+                    </div>
+                    <div class="text-xs text-gray-400 mt-0.5">
+                        ${vt.type_code} | 차감 ${vt.deduct_days}일 | 우선순위 ${vt.priority}
+                    </div>
+                </div>
+                <div class="flex gap-0.5 ml-1 flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity">
+                    <button onclick="editVacType(${vt.id})" class="p-1 text-slate-400 hover:text-slate-600 rounded" title="수정"><i class="fas fa-pen text-[10px]"></i></button>
+                    ${!vt.is_system ? `<button onclick="deleteVacType(${vt.id},'${(vt.type_name||'').replace(/'/g,"\\'")}')" class="p-1 text-red-300 hover:text-red-500 rounded" title="비활성화"><i class="fas fa-ban text-[10px]"></i></button>` : ''}
+                </div>
+            </div>`).join('');
+    }
+
+    // 유형 모달
+    function openVacTypeModal(editId) {
+        document.getElementById('vtEditId').value = '';
+        document.getElementById('vacTypeForm').reset();
+        document.getElementById('vtDeductDays').value = '1.0';
+        document.getElementById('vtPriority').value = '99';
+        document.getElementById('vacTypeModalTitle').textContent = '휴가 유형 추가';
+        document.getElementById('vtCode').readOnly = false;
+        if (editId) {
+            const vt = vacTypes.find(v => v.id === editId);
+            if (!vt) return;
+            document.getElementById('vacTypeModalTitle').textContent = '휴가 유형 수정';
+            document.getElementById('vtEditId').value = vt.id;
+            document.getElementById('vtCode').value = vt.type_code;
+            document.getElementById('vtCode').readOnly = !!vt.is_system;
+            document.getElementById('vtName').value = vt.type_name;
+            document.getElementById('vtDeductDays').value = vt.deduct_days;
+            document.getElementById('vtPriority').value = vt.priority;
+            document.getElementById('vtDescription').value = vt.description || '';
+            document.getElementById('vtSpecial').checked = !!vt.is_special;
+        }
+        document.getElementById('vacTypeModal').classList.remove('hidden');
+    }
+    function closeVacTypeModal() { document.getElementById('vacTypeModal').classList.add('hidden'); }
+    function editVacType(id) { openVacTypeModal(id); }
+
+    document.getElementById('vacTypeForm').addEventListener('submit', async e => {
+        e.preventDefault();
+        const editId = document.getElementById('vtEditId').value;
+        const body = {
+            type_code: document.getElementById('vtCode').value.trim().toUpperCase(),
+            type_name: document.getElementById('vtName').value.trim(),
+            deduct_days: parseFloat(document.getElementById('vtDeductDays').value) || 1.0,
+            priority: parseInt(document.getElementById('vtPriority').value) || 99,
+            description: document.getElementById('vtDescription').value.trim() || null,
+            is_special: document.getElementById('vtSpecial').checked
+        };
+        try {
+            if (editId) {
+                await api(`/vacations/types/${editId}`, { method: 'PUT', body: JSON.stringify(body) });
+                showToast('휴가 유형이 수정되었습니다.');
+            } else {
+                await api('/vacations/types', { method: 'POST', body: JSON.stringify(body) });
+                showToast('휴가 유형이 추가되었습니다.');
+            }
+            closeVacTypeModal(); await loadVacTypes();
+        } catch(e) { showToast(e.message, 'error'); }
+    });
+
+    async function deleteVacType(id, name) {
+        if (!confirm(`"${name}" 유형을 비활성화하시겠습니까?`)) return;
+        try { await api(`/vacations/types/${id}`, { method: 'DELETE' }); showToast('비활성화되었습니다.'); await loadVacTypes(); }
+        catch(e) { showToast(e.message, 'error'); }
+    }
+
+    // 연차 배정 테이블
+    async function loadVacBalances() {
+        const year = document.getElementById('vacYear')?.value || new Date().getFullYear();
+        try {
+            const r = await api(`/vacations/balances/year/${year}`);
+            vacBalances = r.data || [];
+            renderVacBalanceTable();
+        } catch(e) {
+            document.getElementById('vacBalanceTable').innerHTML = `<div class="text-red-500 text-center py-6"><p class="text-sm">${e.message}</p></div>`;
+        }
+    }
+
+    function renderVacBalanceTable() {
+        const c = document.getElementById('vacBalanceTable');
+        if (!vacBalances.length) {
+            c.innerHTML = '<div class="text-gray-400 text-center py-8 text-sm"><i class="fas fa-calendar-xmark text-3xl mb-2"></i><p>배정된 연차가 없습니다. "자동 계산" 또는 "개별 배정"을 이용하세요.</p></div>';
+            return;
+        }
+        // 작업자별 그룹핑
+        const grouped = {};
+        vacBalances.forEach(b => {
+            if (!grouped[b.worker_id]) grouped[b.worker_id] = { name: b.worker_name, hire_date: b.hire_date, items: [] };
+            grouped[b.worker_id].items.push(b);
+        });
+
+        let html = '<table class="w-full text-sm"><thead class="bg-gray-50 sticky top-0"><tr>';
+        html += '<th class="text-left px-3 py-2 text-xs font-semibold text-gray-500">작업자</th>';
+        html += '<th class="text-left px-3 py-2 text-xs font-semibold text-gray-500">입사일</th>';
+        html += '<th class="text-left px-3 py-2 text-xs font-semibold text-gray-500">휴가유형</th>';
+        html += '<th class="text-center px-3 py-2 text-xs font-semibold text-gray-500">배정</th>';
+        html += '<th class="text-center px-3 py-2 text-xs font-semibold text-gray-500">사용</th>';
+        html += '<th class="text-center px-3 py-2 text-xs font-semibold text-gray-500">잔여</th>';
+        html += '<th class="text-left px-3 py-2 text-xs font-semibold text-gray-500">비고</th>';
+        html += '<th class="px-3 py-2 text-xs font-semibold text-gray-500 w-16"></th>';
+        html += '</tr></thead><tbody>';
+
+        Object.values(grouped).forEach(g => {
+            const firstRow = true;
+            g.items.forEach((b, i) => {
+                const remaining = parseFloat(b.remaining_days || (b.total_days - b.used_days));
+                const remClass = remaining <= 0 ? 'text-red-500 font-semibold' : remaining <= 3 ? 'text-amber-500 font-medium' : 'text-emerald-600';
+                html += `<tr class="border-t border-gray-100 hover:bg-gray-50">`;
+                if (i === 0) {
+                    html += `<td class="px-3 py-2 font-medium text-gray-800" rowspan="${g.items.length}">${escHtml(g.name)}</td>`;
+                    html += `<td class="px-3 py-2 text-xs text-gray-400" rowspan="${g.items.length}">${g.hire_date ? new Date(g.hire_date).toISOString().substring(0,10) : '-'}</td>`;
+                }
+                html += `<td class="px-3 py-2"><span class="px-1.5 py-0.5 rounded text-xs bg-slate-50 text-slate-600">${escHtml(b.type_name)}</span></td>`;
+                html += `<td class="px-3 py-2 text-center">${b.total_days}</td>`;
+                html += `<td class="px-3 py-2 text-center">${b.used_days}</td>`;
+                html += `<td class="px-3 py-2 text-center ${remClass}">${remaining}</td>`;
+                html += `<td class="px-3 py-2 text-xs text-gray-400 truncate max-w-[150px]" title="${escHtml(b.notes||'')}">${escHtml(b.notes||'')}</td>`;
+                html += `<td class="px-3 py-2 text-center">
+                    <button onclick="editVacBalance(${b.id})" class="p-1 text-slate-400 hover:text-slate-600" title="수정"><i class="fas fa-pen text-xs"></i></button>
+                    <button onclick="deleteVacBalance(${b.id})" class="p-1 text-red-300 hover:text-red-500" title="삭제"><i class="fas fa-trash-alt text-xs"></i></button>
+                </td>`;
+                html += '</tr>';
+            });
+        });
+        html += '</tbody></table>';
+        c.innerHTML = html;
+    }
+
+    // 자동 계산
+    async function autoCalcVacation() {
+        const year = document.getElementById('vacYear')?.value || new Date().getFullYear();
+        if (!confirm(`${year}년 전체 작업자 연차를 입사일 기준으로 자동 계산합니다.\n기존 배정이 있으면 덮어씁니다. 진행하시겠습니까?`)) return;
+        try {
+            const r = await api('/vacations/balances/auto-calculate', { method: 'POST', body: JSON.stringify({ year: parseInt(year) }) });
+            showToast(`${r.data.count}명 자동 배정 완료`);
+            await loadVacBalances();
+        } catch(e) { showToast(e.message, 'error'); }
+    }
+
+    // 개별 배정 모달
+    function openVacBalanceModal(editId) {
+        document.getElementById('vbEditId').value = '';
+        document.getElementById('vacBalanceForm').reset();
+        document.getElementById('vbTotalDays').value = '0';
+        document.getElementById('vbUsedDays').value = '0';
+        document.getElementById('vacBalModalTitle').textContent = '연차 배정';
+        // 작업자 셀렉트
+        const wSel = document.getElementById('vbWorker');
+        wSel.innerHTML = '<option value="">선택</option>';
+        vacWorkers.forEach(w => { wSel.innerHTML += `<option value="${w.worker_id}">${w.worker_name}</option>`; });
+        // 유형 셀렉트
+        const tSel = document.getElementById('vbType');
+        tSel.innerHTML = '<option value="">선택</option>';
+        vacTypes.filter(t => t.is_active).forEach(t => { tSel.innerHTML += `<option value="${t.id}">${t.type_name} (${t.type_code})</option>`; });
+        if (editId) {
+            const b = vacBalances.find(x => x.id === editId);
+            if (!b) return;
+            document.getElementById('vacBalModalTitle').textContent = '배정 수정';
+            document.getElementById('vbEditId').value = b.id;
+            wSel.value = b.worker_id;
+            wSel.disabled = true;
+            tSel.value = b.vacation_type_id;
+            tSel.disabled = true;
+            document.getElementById('vbTotalDays').value = b.total_days;
+            document.getElementById('vbUsedDays').value = b.used_days;
+            document.getElementById('vbNotes').value = b.notes || '';
+        } else {
+            wSel.disabled = false;
+            tSel.disabled = false;
+        }
+        document.getElementById('vacBalanceModal').classList.remove('hidden');
+    }
+    function closeVacBalanceModal() {
+        document.getElementById('vacBalanceModal').classList.add('hidden');
+        document.getElementById('vbWorker').disabled = false;
+        document.getElementById('vbType').disabled = false;
+    }
+    function editVacBalance(id) { openVacBalanceModal(id); }
+
+    document.getElementById('vacBalanceForm').addEventListener('submit', async e => {
+        e.preventDefault();
+        const editId = document.getElementById('vbEditId').value;
+        try {
+            if (editId) {
+                await api(`/vacations/balances/${editId}`, { method: 'PUT', body: JSON.stringify({
+                    total_days: parseFloat(document.getElementById('vbTotalDays').value) || 0,
+                    used_days: parseFloat(document.getElementById('vbUsedDays').value) || 0,
+                    notes: document.getElementById('vbNotes').value.trim() || null
+                })});
+                showToast('수정되었습니다.');
+            } else {
+                const year = document.getElementById('vacYear')?.value || new Date().getFullYear();
+                await api('/vacations/balances', { method: 'POST', body: JSON.stringify({
+                    worker_id: parseInt(document.getElementById('vbWorker').value),
+                    vacation_type_id: parseInt(document.getElementById('vbType').value),
+                    year: parseInt(year),
+                    total_days: parseFloat(document.getElementById('vbTotalDays').value) || 0,
+                    used_days: parseFloat(document.getElementById('vbUsedDays').value) || 0,
+                    notes: document.getElementById('vbNotes').value.trim() || null
+                })});
+                showToast('배정되었습니다.');
+            }
+            closeVacBalanceModal(); await loadVacBalances();
+        } catch(e) { showToast(e.message, 'error'); }
+    });
+
+    async function deleteVacBalance(id) {
+        if (!confirm('이 배정을 삭제하시겠습니까?')) return;
+        try { await api(`/vacations/balances/${id}`, { method: 'DELETE' }); showToast('삭제되었습니다.'); await loadVacBalances(); }
+        catch(e) { showToast(e.message, 'error'); }
+    }
+
+    /* ===== Tasks CRUD ===== */
+    let taskWorkTypes = [], allTasks = [], tasksLoaded = false;
+    let selectedTaskWorkTypeFilter = null;
+
+    async function loadTasksTab() {
+        await loadWorkTypes();
+        await loadTasks();
+        tasksLoaded = true;
+    }
+
+    async function loadWorkTypes() {
+        try {
+            const r = await api('/tasks/work-types');
+            taskWorkTypes = r.data || [];
+            renderWorkTypeSidebar();
+            populateTaskWorkTypeSelect();
+        } catch(e) { console.warn('공정 로드 실패:', e); }
+    }
+
+    function renderWorkTypeSidebar() {
+        const c = document.getElementById('workTypeSidebar');
+        if (!c) return;
+        let html = `<div onclick="filterTasksByWorkType(null)" class="flex items-center justify-between p-2 rounded-lg cursor-pointer transition-colors ${selectedTaskWorkTypeFilter === null ? 'bg-blue-50 ring-1 ring-blue-200' : 'hover:bg-gray-50'}">
+            <span class="text-sm font-medium ${selectedTaskWorkTypeFilter === null ? 'text-blue-700' : 'text-gray-700'}">전체</span>
+            <span class="text-xs text-gray-400">${allTasks.length}</span>
+        </div>`;
+        // 카테고리별 그룹핑
+        const grouped = {};
+        taskWorkTypes.forEach(wt => {
+            const cat = wt.category || '미분류';
+            if (!grouped[cat]) grouped[cat] = [];
+            grouped[cat].push(wt);
+        });
+        Object.keys(grouped).sort().forEach(cat => {
+            html += `<div class="text-[10px] font-semibold text-gray-400 uppercase tracking-wider mt-3 mb-1 px-2">${cat}</div>`;
+            grouped[cat].forEach(wt => {
+                const count = allTasks.filter(t => t.work_type_id === wt.id).length;
+                const isActive = selectedTaskWorkTypeFilter === wt.id;
+                html += `<div onclick="filterTasksByWorkType(${wt.id})" class="group flex items-center justify-between p-2 rounded-lg cursor-pointer transition-colors ${isActive ? 'bg-blue-50 ring-1 ring-blue-200' : 'hover:bg-gray-50'}">
+                    <span class="text-sm ${isActive ? 'font-medium text-blue-700' : 'text-gray-700'} truncate">${wt.name}</span>
+                    <div class="flex items-center gap-1">
+                        <span class="text-xs text-gray-400">${count}</span>
+                        <button onclick="event.stopPropagation(); editWorkType(${wt.id})" class="p-0.5 text-gray-300 hover:text-slate-600 opacity-0 group-hover:opacity-100 transition-opacity" title="수정"><i class="fas fa-pen text-[10px]"></i></button>
+                    </div>
+                </div>`;
+            });
+        });
+        // 미지정 작업 수
+        const noType = allTasks.filter(t => !t.work_type_id).length;
+        if (noType > 0) {
+            html += `<div onclick="filterTasksByWorkType(0)" class="flex items-center justify-between p-2 rounded-lg cursor-pointer transition-colors mt-2 ${selectedTaskWorkTypeFilter === 0 ? 'bg-blue-50 ring-1 ring-blue-200' : 'hover:bg-gray-50'}">
+                <span class="text-sm text-gray-400 italic">미지정</span>
+                <span class="text-xs text-gray-400">${noType}</span>
+            </div>`;
+        }
+        c.innerHTML = html;
+    }
+
+    function populateTaskWorkTypeSelect() {
+        const sel = document.getElementById('taskWorkType');
+        if (!sel) return;
+        const val = sel.value;
+        sel.innerHTML = '<option value="">미지정</option>';
+        taskWorkTypes.forEach(wt => {
+            sel.innerHTML += `<option value="${wt.id}">${wt.category ? wt.category + ' > ' : ''}${wt.name}</option>`;
+        });
+        sel.value = val;
+    }
+
+    function filterTasksByWorkType(wtId) {
+        selectedTaskWorkTypeFilter = wtId;
+        renderWorkTypeSidebar();
+        displayTasks();
+    }
+
+    async function loadTasks() {
+        try {
+            const r = await api('/tasks');
+            allTasks = r.data || [];
+            renderWorkTypeSidebar();
+            displayTasks();
+        } catch(e) {
+            document.getElementById('taskList').innerHTML = `<div class="text-red-500 text-center py-6"><i class="fas fa-exclamation-triangle text-xl"></i><p class="text-sm mt-2">${e.message}</p></div>`;
+        }
+    }
+
+    function displayTasks() {
+        const c = document.getElementById('taskList');
+        let filtered = allTasks;
+        let label = '전체';
+        if (selectedTaskWorkTypeFilter === 0) {
+            filtered = allTasks.filter(t => !t.work_type_id);
+            label = '미지정';
+        } else if (selectedTaskWorkTypeFilter) {
+            filtered = allTasks.filter(t => t.work_type_id === selectedTaskWorkTypeFilter);
+            const wt = taskWorkTypes.find(w => w.id === selectedTaskWorkTypeFilter);
+            label = wt ? wt.name : '';
+        }
+        document.getElementById('taskFilterLabel').textContent = `- ${label}`;
+        const active = filtered.filter(t => t.is_active).length;
+        const inactive = filtered.length - active;
+        document.getElementById('taskStats').textContent = `활성 ${active} / 비활성 ${inactive}`;
+
+        if (!filtered.length) { c.innerHTML = '<p class="text-gray-400 text-center py-8 text-sm">등록된 작업이 없습니다.</p>'; return; }
+        c.innerHTML = filtered.map(t => `
+            <div class="flex items-center justify-between p-2.5 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
+                <div class="flex-1 min-w-0">
+                    <div class="text-sm font-medium text-gray-800 truncate">${escHtml(t.task_name)}</div>
+                    <div class="text-xs text-gray-500 flex items-center gap-1.5 mt-0.5 flex-wrap">
+                        ${t.work_type_name ? `<span class="px-1.5 py-0.5 rounded bg-slate-50 text-slate-600">${escHtml(t.work_type_name)}</span>` : '<span class="text-gray-300 italic">미지정</span>'}
+                        ${t.description ? `<span class="text-gray-400 truncate max-w-[200px]" title="${escHtml(t.description)}">${escHtml(t.description)}</span>` : ''}
+                        ${t.is_active ? '<span class="px-1.5 py-0.5 rounded bg-emerald-50 text-emerald-600">활성</span>' : '<span class="px-1.5 py-0.5 rounded bg-gray-100 text-gray-400">비활성</span>'}
+                    </div>
+                </div>
+                <div class="flex gap-1 ml-2 flex-shrink-0">
+                    <button onclick="editTask(${t.task_id})" class="p-1.5 text-slate-500 hover:text-slate-700 hover:bg-slate-200 rounded" title="편집"><i class="fas fa-pen-to-square text-xs"></i></button>
+                    <button onclick="deleteTask(${t.task_id},'${escHtml(t.task_name).replace(/'/g,"\\'")}')" class="p-1.5 text-red-400 hover:text-red-600 hover:bg-red-100 rounded" title="삭제"><i class="fas fa-trash-alt text-xs"></i></button>
+                </div>
+            </div>`).join('');
+    }
+
+    function escHtml(s) { if (!s) return ''; const d = document.createElement('div'); d.textContent = s; return d.innerHTML; }
+
+    // 공정 모달
+    function openWorkTypeModal(editId) {
+        document.getElementById('wtEditId').value = '';
+        document.getElementById('workTypeForm').reset();
+        document.getElementById('workTypeModalTitle').textContent = '공정 추가';
+        if (editId) {
+            const wt = taskWorkTypes.find(w => w.id === editId);
+            if (!wt) return;
+            document.getElementById('workTypeModalTitle').textContent = '공정 수정';
+            document.getElementById('wtEditId').value = wt.id;
+            document.getElementById('wtName').value = wt.name || '';
+            document.getElementById('wtCategory').value = wt.category || '';
+            document.getElementById('wtDesc').value = wt.description || '';
+        }
+        document.getElementById('workTypeModal').classList.remove('hidden');
+    }
+    function closeWorkTypeModal() { document.getElementById('workTypeModal').classList.add('hidden'); }
+    function editWorkType(id) { openWorkTypeModal(id); }
+
+    document.getElementById('workTypeForm').addEventListener('submit', async e => {
+        e.preventDefault();
+        const editId = document.getElementById('wtEditId').value;
+        const body = {
+            name: document.getElementById('wtName').value.trim(),
+            category: document.getElementById('wtCategory').value.trim() || null,
+            description: document.getElementById('wtDesc').value.trim() || null
+        };
+        try {
+            if (editId) {
+                await api(`/tasks/work-types/${editId}`, { method: 'PUT', body: JSON.stringify(body) });
+                showToast('공정이 수정되었습니다.');
+            } else {
+                await api('/tasks/work-types', { method: 'POST', body: JSON.stringify(body) });
+                showToast('공정이 추가되었습니다.');
+            }
+            closeWorkTypeModal();
+            await loadWorkTypes();
+            await loadTasks();
+        } catch(e) { showToast(e.message, 'error'); }
+    });
+
+    // 작업 모달
+    function openTaskModal(editId) {
+        document.getElementById('taskEditId').value = '';
+        document.getElementById('taskForm').reset();
+        document.getElementById('taskActive').checked = true;
+        document.getElementById('taskModalTitle').textContent = '작업 추가';
+        populateTaskWorkTypeSelect();
+        // 사이드바 필터 선택된 공정 자동 선택
+        if (!editId && selectedTaskWorkTypeFilter && selectedTaskWorkTypeFilter !== 0) {
+            document.getElementById('taskWorkType').value = selectedTaskWorkTypeFilter;
+        }
+        if (editId) {
+            const t = allTasks.find(x => x.task_id === editId);
+            if (!t) return;
+            document.getElementById('taskModalTitle').textContent = '작업 수정';
+            document.getElementById('taskEditId').value = t.task_id;
+            document.getElementById('taskName').value = t.task_name || '';
+            document.getElementById('taskWorkType').value = t.work_type_id || '';
+            document.getElementById('taskDesc').value = t.description || '';
+            document.getElementById('taskActive').checked = !!t.is_active;
+        }
+        document.getElementById('taskModal').classList.remove('hidden');
+    }
+    function closeTaskModal() { document.getElementById('taskModal').classList.add('hidden'); }
+    function editTask(id) { openTaskModal(id); }
+
+    document.getElementById('taskForm').addEventListener('submit', async e => {
+        e.preventDefault();
+        const editId = document.getElementById('taskEditId').value;
+        const body = {
+            task_name: document.getElementById('taskName').value.trim(),
+            work_type_id: document.getElementById('taskWorkType').value ? parseInt(document.getElementById('taskWorkType').value) : null,
+            description: document.getElementById('taskDesc').value.trim() || null,
+            is_active: document.getElementById('taskActive').checked ? 1 : 0
+        };
+        try {
+            if (editId) {
+                await api(`/tasks/${editId}`, { method: 'PUT', body: JSON.stringify(body) });
+                showToast('작업이 수정되었습니다.');
+            } else {
+                await api('/tasks', { method: 'POST', body: JSON.stringify(body) });
+                showToast('작업이 추가되었습니다.');
+            }
+            closeTaskModal();
+            await loadTasks();
+        } catch(e) { showToast(e.message, 'error'); }
+    });
+
+    async function deleteTask(id, name) {
+        if (!confirm(`"${name}" 작업을 삭제하시겠습니까?`)) return;
+        try {
+            await api(`/tasks/${id}`, { method: 'DELETE' });
+            showToast('작업이 삭제되었습니다.');
+            await loadTasks();
+        } catch(e) { showToast(e.message, 'error'); }
+    }
+
+    /* ===== Workers CRUD ===== */
+    let workers = [], workersLoaded = false, departmentsForSelect = [];
+
+    const JOB_TYPE = { leader: '반장', worker: '작업자' };
+    function jobTypeBadge(t) {
+        if (t === 'leader') return '<span class="px-1.5 py-0.5 rounded text-xs bg-amber-50 text-amber-600">반장</span>';
+        if (t === 'worker') return '<span class="px-1.5 py-0.5 rounded text-xs bg-blue-50 text-blue-600">작업자</span>';
+        return t ? `<span class="px-1.5 py-0.5 rounded text-xs bg-gray-50 text-gray-500">${t}</span>` : '';
+    }
+    function workerStatusBadge(s) {
+        if (s === 'inactive') return '<span class="px-1.5 py-0.5 rounded text-xs bg-gray-100 text-gray-400">비활성</span>';
+        return '<span class="px-1.5 py-0.5 rounded text-xs bg-emerald-50 text-emerald-600">재직</span>';
+    }
+
+    async function loadDepartmentsForSelect() {
+        try {
+            const r = await api('/departments'); departmentsForSelect = (r.data || r).filter(d => d.is_active !== 0 && d.is_active !== false);
+            populateDeptSelects();
+        } catch(e) { console.warn('부서 로드 실패:', e); }
+    }
+    function populateDeptSelects() {
+        ['newWorkerDept','editWorkerDept'].forEach(id => {
+            const sel = document.getElementById(id); if (!sel) return;
+            const val = sel.value;
+            sel.innerHTML = '<option value="">선택</option>';
+            departmentsForSelect.forEach(d => { const o = document.createElement('option'); o.value = d.department_id; o.textContent = d.department_name; sel.appendChild(o); });
+            sel.value = val;
+        });
+    }
+
+    async function loadWorkers() {
+        await loadDepartmentsForSelect();
+        try {
+            const r = await api('/workers'); workers = r.data || r;
+            workersLoaded = true;
+            displayWorkers();
+        } catch (err) {
+            document.getElementById('workerList').innerHTML = `<div class="text-red-500 text-center py-6"><i class="fas fa-exclamation-triangle text-xl"></i><p class="text-sm mt-2">${err.message}</p></div>`;
+        }
+    }
+
+    function displayWorkers() {
+        const c = document.getElementById('workerList');
+        if (!workers.length) { c.innerHTML = '<p class="text-gray-400 text-center py-4 text-sm">등록된 작업자가 없습니다.</p>'; return; }
+        c.innerHTML = workers.map(w => `
+            <div class="flex items-center justify-between p-2.5 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
+                <div class="flex-1 min-w-0">
+                    <div class="text-sm font-medium text-gray-800 truncate"><i class="fas fa-hard-hat mr-1.5 text-gray-400 text-xs"></i>${w.worker_name}</div>
+                    <div class="text-xs text-gray-500 flex items-center gap-1.5 mt-0.5 flex-wrap">
+                        ${jobTypeBadge(w.job_type)}
+                        ${w.department_name ? `<span class="px-1.5 py-0.5 rounded bg-green-50 text-green-600">${w.department_name}</span>` : ''}
+                        ${workerStatusBadge(w.status)}
+                        ${w.phone_number ? `<span class="text-gray-400">${w.phone_number}</span>` : ''}
+                    </div>
+                </div>
+                <div class="flex gap-1 ml-2 flex-shrink-0">
+                    <button onclick="editWorker(${w.worker_id})" class="p-1.5 text-slate-500 hover:text-slate-700 hover:bg-slate-200 rounded" title="편집"><i class="fas fa-pen-to-square text-xs"></i></button>
+                    ${w.status !== 'inactive' ? `<button onclick="deactivateWorker(${w.worker_id},'${(w.worker_name||'').replace(/'/g,"\\'")}')" class="p-1.5 text-red-400 hover:text-red-600 hover:bg-red-100 rounded" title="비활성화"><i class="fas fa-ban text-xs"></i></button>` : ''}
+                </div>
+            </div>`).join('');
+    }
+
+    document.getElementById('addWorkerForm').addEventListener('submit', async e => {
+        e.preventDefault();
+        try {
+            await api('/workers', { method: 'POST', body: JSON.stringify({
+                worker_name: document.getElementById('newWorkerName').value.trim(),
+                job_type: document.getElementById('newJobType').value || null,
+                department_id: document.getElementById('newWorkerDept').value ? parseInt(document.getElementById('newWorkerDept').value) : null,
+                phone_number: document.getElementById('newWorkerPhone').value.trim() || null,
+                hire_date: document.getElementById('newWorkerHireDate').value || null,
+                notes: document.getElementById('newWorkerNotes').value.trim() || null
+            })});
+            showToast('작업자가 추가되었습니다.'); document.getElementById('addWorkerForm').reset(); await loadWorkers();
+        } catch(e) { showToast(e.message, 'error'); }
+    });
+
+    function editWorker(id) {
+        const w = workers.find(x => x.worker_id === id); if (!w) return;
+        document.getElementById('editWorkerId').value = w.worker_id;
+        document.getElementById('editWorkerName').value = w.worker_name;
+        document.getElementById('editJobType').value = w.job_type || '';
+        document.getElementById('editWorkerDept').value = w.department_id || '';
+        document.getElementById('editWorkerPhone').value = w.phone_number || '';
+        document.getElementById('editWorkerHireDate').value = formatDate(w.hire_date);
+        document.getElementById('editWorkerNotes').value = w.notes || '';
+        document.getElementById('editWorkerStatus').value = w.status || 'active';
+        document.getElementById('editEmploymentStatus').value = w.employment_status || 'employed';
+        populateDeptSelects();
+        document.getElementById('editWorkerDept').value = w.department_id || '';
+        document.getElementById('editWorkerModal').classList.remove('hidden');
+    }
+    function closeWorkerModal() { document.getElementById('editWorkerModal').classList.add('hidden'); }
+
+    document.getElementById('editWorkerForm').addEventListener('submit', async e => {
+        e.preventDefault();
+        try {
+            await api(`/workers/${document.getElementById('editWorkerId').value}`, { method: 'PUT', body: JSON.stringify({
+                worker_name: document.getElementById('editWorkerName').value.trim(),
+                job_type: document.getElementById('editJobType').value || null,
+                department_id: document.getElementById('editWorkerDept').value ? parseInt(document.getElementById('editWorkerDept').value) : null,
+                phone_number: document.getElementById('editWorkerPhone').value.trim() || null,
+                hire_date: document.getElementById('editWorkerHireDate').value || null,
+                notes: document.getElementById('editWorkerNotes').value.trim() || null,
+                status: document.getElementById('editWorkerStatus').value,
+                employment_status: document.getElementById('editEmploymentStatus').value
+            })});
+            showToast('수정되었습니다.'); closeWorkerModal(); await loadWorkers();
+        } catch(e) { showToast(e.message, 'error'); }
+    });
+
+    async function deactivateWorker(id, name) {
+        if (!confirm(`"${name}" 작업자를 비활성화?`)) return;
+        try { await api(`/workers/${id}`, { method: 'DELETE' }); showToast('작업자 비활성화 완료'); await loadWorkers(); } catch(e) { showToast(e.message, 'error'); }
+    }
+
+    /* ===== Departments CRUD ===== */
+    let departments = [], departmentsLoaded = false;
+
+    async function loadDepartments() {
+        try {
+            const r = await api('/departments'); departments = r.data || r;
+            departmentsLoaded = true;
+            populateParentDeptSelects();
+            displayDepartments();
+        } catch (err) {
+            document.getElementById('departmentList').innerHTML = `<div class="text-red-500 text-center py-6"><i class="fas fa-exclamation-triangle text-xl"></i><p class="text-sm mt-2">${err.message}</p></div>`;
+        }
+    }
+
+    function populateParentDeptSelects() {
+        ['newDeptParent','editDeptParent'].forEach(id => {
+            const sel = document.getElementById(id); if (!sel) return;
+            const val = sel.value;
+            sel.innerHTML = '<option value="">없음 (최상위)</option>';
+            departments.filter(d => d.is_active !== 0 && d.is_active !== false).forEach(d => {
+                const o = document.createElement('option'); o.value = d.department_id; o.textContent = d.department_name; sel.appendChild(o);
+            });
+            sel.value = val;
+        });
+    }
+
+    function displayDepartments() {
+        const c = document.getElementById('departmentList');
+        if (!departments.length) { c.innerHTML = '<p class="text-gray-400 text-center py-4 text-sm">등록된 부서가 없습니다.</p>'; return; }
+        c.innerHTML = departments.map(d => `
+            <div class="flex items-center justify-between p-2.5 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
+                <div class="flex-1 min-w-0">
+                    <div class="text-sm font-medium text-gray-800 truncate"><i class="fas fa-sitemap mr-1.5 text-gray-400 text-xs"></i>${d.department_name}</div>
+                    <div class="text-xs text-gray-500 flex items-center gap-1.5 mt-0.5 flex-wrap">
+                        ${d.parent_name ? `<span class="px-1.5 py-0.5 rounded bg-slate-50 text-slate-500">상위: ${d.parent_name}</span>` : '<span class="px-1.5 py-0.5 rounded bg-indigo-50 text-indigo-500">최상위</span>'}
+                        <span class="text-gray-400">순서: ${d.display_order || 0}</span>
+                        ${d.is_active === 0 || d.is_active === false ? '<span class="px-1.5 py-0.5 rounded bg-gray-100 text-gray-400">비활성</span>' : '<span class="px-1.5 py-0.5 rounded bg-emerald-50 text-emerald-600">활성</span>'}
+                    </div>
+                </div>
+                <div class="flex gap-1 ml-2 flex-shrink-0">
+                    <button onclick="editDepartment(${d.department_id})" class="p-1.5 text-slate-500 hover:text-slate-700 hover:bg-slate-200 rounded" title="편집"><i class="fas fa-pen-to-square text-xs"></i></button>
+                    ${d.is_active !== 0 && d.is_active !== false ? `<button onclick="deactivateDepartment(${d.department_id},'${(d.department_name||'').replace(/'/g,"\\'")}')" class="p-1.5 text-red-400 hover:text-red-600 hover:bg-red-100 rounded" title="비활성화"><i class="fas fa-ban text-xs"></i></button>` : ''}
+                </div>
+            </div>`).join('');
+    }
+
+    document.getElementById('addDepartmentForm').addEventListener('submit', async e => {
+        e.preventDefault();
+        try {
+            await api('/departments', { method: 'POST', body: JSON.stringify({
+                department_name: document.getElementById('newDeptName').value.trim(),
+                parent_id: document.getElementById('newDeptParent').value ? parseInt(document.getElementById('newDeptParent').value) : null,
+                description: document.getElementById('newDeptDescription').value.trim() || null,
+                display_order: parseInt(document.getElementById('newDeptOrder').value) || 0
+            })});
+            showToast('부서가 추가되었습니다.'); document.getElementById('addDepartmentForm').reset(); await loadDepartments();
+        } catch(e) { showToast(e.message, 'error'); }
+    });
+
+    function editDepartment(id) {
+        const d = departments.find(x => x.department_id === id); if (!d) return;
+        document.getElementById('editDeptId').value = d.department_id;
+        document.getElementById('editDeptName').value = d.department_name;
+        document.getElementById('editDeptDescription').value = d.description || '';
+        document.getElementById('editDeptOrder').value = d.display_order || 0;
+        document.getElementById('editDeptActive').value = (d.is_active === 0 || d.is_active === false) ? '0' : '1';
+        populateParentDeptSelects();
+        document.getElementById('editDeptParent').value = d.parent_id || '';
+        document.getElementById('editDepartmentModal').classList.remove('hidden');
+    }
+    function closeDepartmentModal() { document.getElementById('editDepartmentModal').classList.add('hidden'); }
+
+    document.getElementById('editDepartmentForm').addEventListener('submit', async e => {
+        e.preventDefault();
+        try {
+            await api(`/departments/${document.getElementById('editDeptId').value}`, { method: 'PUT', body: JSON.stringify({
+                department_name: document.getElementById('editDeptName').value.trim(),
+                parent_id: document.getElementById('editDeptParent').value ? parseInt(document.getElementById('editDeptParent').value) : null,
+                description: document.getElementById('editDeptDescription').value.trim() || null,
+                display_order: parseInt(document.getElementById('editDeptOrder').value) || 0,
+                is_active: document.getElementById('editDeptActive').value === '1'
+            })});
+            showToast('수정되었습니다.'); closeDepartmentModal(); await loadDepartments();
+            await loadDepartmentsForSelect();
+        } catch(e) { showToast(e.message, 'error'); }
+    });
+
+    async function deactivateDepartment(id, name) {
+        if (!confirm(`"${name}" 부서를 비활성화?`)) return;
+        try { await api(`/departments/${id}`, { method: 'DELETE' }); showToast('부서 비활성화 완료'); await loadDepartments(); } catch(e) { showToast(e.message, 'error'); }
+    }
+
+    /* ===== Workplaces CRUD ===== */
+    let workplaces = [], workplacesLoaded = false, workplaceCategories = [];
+    let selectedWorkplaceId = null, selectedWorkplaceName = '';
+    let equipments = [], equipmentTypes = [];
+    let wpNavLevel = 'categories';   // 'categories' | 'workplaces'
+    let wpNavCategoryId = null;
+    let wpNavCategoryName = '';
+    let previewMapRegions = [];
+
+    function purposeBadge(p) {
+        const colors = { '작업구역': 'bg-blue-50 text-blue-600', '창고': 'bg-amber-50 text-amber-600', '설비': 'bg-purple-50 text-purple-600', '휴게시설': 'bg-green-50 text-green-600' };
+        return p ? `<span class="px-1.5 py-0.5 rounded text-xs ${colors[p] || 'bg-gray-50 text-gray-500'}">${p}</span>` : '';
+    }
+
+    async function loadWorkplaceCategories() {
+        try {
+            const r = await api('/workplaces/categories'); workplaceCategories = r.data || r;
+            populateCategorySelects();
+            renderSidebar();
+        } catch(e) { console.warn('카테고리 로드 실패:', e); }
+    }
+    function populateCategorySelects() {
+        ['newWorkplaceCategory','editWorkplaceCategory'].forEach(id => {
+            const sel = document.getElementById(id); if (!sel) return;
+            const val = sel.value;
+            sel.innerHTML = '<option value="">선택</option>';
+            workplaceCategories.forEach(c => { const o = document.createElement('option'); o.value = c.category_id; o.textContent = c.category_name; sel.appendChild(o); });
+            sel.value = val;
+        });
+    }
+
+    async function loadWorkplaces() {
+        await loadWorkplaceCategories();
+        try {
+            const r = await api('/workplaces'); workplaces = r.data || r;
+            workplacesLoaded = true;
+            renderSidebar();
+        } catch (err) {
+            document.getElementById('wpSidebarContent').innerHTML = `<div class="text-red-500 text-center py-6"><i class="fas fa-exclamation-triangle text-xl"></i><p class="text-sm mt-2">${err.message}</p></div>`;
+        }
+    }
+
+    function renderSidebar() {
+        const c = document.getElementById('wpSidebarContent');
+        if (!c) return;
+        let html = '';
+        if (wpNavLevel === 'categories') {
+            // 공장 목록 레벨
+            html += '<div class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">공장 선택</div>';
+            html += `<button onclick="openAddWorkplaceModal()" class="w-full px-3 py-2 mb-3 bg-slate-700 text-white rounded-lg hover:bg-slate-800 text-sm font-medium flex items-center justify-center gap-1.5"><i class="fas fa-plus text-xs"></i>작업장 추가</button>`;
+            if (!workplaceCategories.length) {
+                html += '<p class="text-gray-400 text-center py-4 text-sm">등록된 공장이 없습니다.</p>';
+            } else {
+                html += '<div class="space-y-1.5 flex-1 overflow-y-auto">';
+                workplaceCategories.forEach(cat => {
+                    const count = workplaces.filter(w => w.category_id == cat.category_id).length;
+                    html += `<div onclick="drillIntoCategory(${cat.category_id},'${(cat.category_name||'').replace(/'/g,"\\'")}')" class="flex items-center justify-between p-2.5 rounded-lg hover:bg-blue-50 transition-colors cursor-pointer bg-gray-50">
+                        <div class="flex items-center gap-2 min-w-0">
+                            <i class="fas fa-industry text-gray-400 text-sm"></i>
+                            <span class="text-sm font-medium text-gray-800 truncate">${cat.category_name}</span>
+                        </div>
+                        <div class="flex items-center gap-1.5 flex-shrink-0">
+                            <span class="text-xs text-gray-400">${count}</span>
+                            <i class="fas fa-chevron-right text-gray-300 text-xs"></i>
+                        </div>
+                    </div>`;
+                });
+                // 미분류 작업장
+                const uncategorized = workplaces.filter(w => !w.category_id);
+                if (uncategorized.length) {
+                    html += `<div onclick="drillIntoCategory(0,'미분류')" class="flex items-center justify-between p-2.5 rounded-lg hover:bg-blue-50 transition-colors cursor-pointer bg-gray-50">
+                        <div class="flex items-center gap-2 min-w-0">
+                            <i class="fas fa-folder-open text-gray-300 text-sm"></i>
+                            <span class="text-sm font-medium text-gray-500 truncate">미분류</span>
+                        </div>
+                        <div class="flex items-center gap-1.5 flex-shrink-0">
+                            <span class="text-xs text-gray-400">${uncategorized.length}</span>
+                            <i class="fas fa-chevron-right text-gray-300 text-xs"></i>
+                        </div>
+                    </div>`;
+                }
+                html += '</div>';
+            }
+        } else {
+            // 작업장 목록 레벨 (특정 공장 내)
+            html += `<button onclick="backToCategories()" class="flex items-center gap-1.5 text-sm text-slate-600 hover:text-slate-800 mb-2 px-1 py-1 rounded hover:bg-gray-100 transition-colors"><i class="fas fa-arrow-left text-xs"></i>전체 공장</button>`;
+            html += `<div class="text-sm font-semibold text-gray-800 mb-2 px-1"><i class="fas fa-industry text-gray-400 mr-1.5"></i>${wpNavCategoryName}</div>`;
+            html += `<button onclick="openAddWorkplaceModal()" class="w-full px-3 py-2 mb-3 bg-slate-700 text-white rounded-lg hover:bg-slate-800 text-sm font-medium flex items-center justify-center gap-1.5"><i class="fas fa-plus text-xs"></i>작업장 추가</button>`;
+            const filtered = wpNavCategoryId === 0
+                ? workplaces.filter(w => !w.category_id)
+                : workplaces.filter(w => w.category_id == wpNavCategoryId);
+            if (!filtered.length) {
+                html += '<p class="text-gray-400 text-center py-4 text-sm">등록된 작업장이 없습니다.</p>';
+            } else {
+                html += '<div class="space-y-1.5 flex-1 overflow-y-auto">';
+                filtered.forEach(w => {
+                    html += `<div class="flex items-center justify-between p-2.5 rounded-lg hover:bg-blue-50 transition-colors cursor-pointer ${selectedWorkplaceId === w.workplace_id ? 'bg-blue-50 ring-1 ring-blue-200' : 'bg-gray-50'}" onclick="selectWorkplaceForEquipments(${w.workplace_id},'${(w.workplace_name||'').replace(/'/g,"\\'")}')">
+                        <div class="flex-1 min-w-0">
+                            <div class="text-sm font-medium text-gray-800 truncate"><i class="fas fa-building mr-1.5 text-gray-400 text-xs"></i>${w.workplace_name}</div>
+                            <div class="text-xs text-gray-500 flex items-center gap-1.5 mt-0.5 flex-wrap">
+                                ${purposeBadge(w.workplace_purpose)}
+                                ${w.is_active === 0 || w.is_active === false ? '<span class="px-1.5 py-0.5 rounded bg-gray-100 text-gray-400">비활성</span>' : ''}
+                            </div>
+                        </div>
+                        <div class="flex gap-1 ml-2 flex-shrink-0">
+                            <button onclick="event.stopPropagation(); editWorkplace(${w.workplace_id})" class="p-1.5 text-slate-500 hover:text-slate-700 hover:bg-slate-200 rounded" title="편집"><i class="fas fa-pen-to-square text-xs"></i></button>
+                            ${w.is_active !== 0 && w.is_active !== false ? `<button onclick="event.stopPropagation(); deactivateWorkplace(${w.workplace_id},'${(w.workplace_name||'').replace(/'/g,"\\'")}')" class="p-1.5 text-red-400 hover:text-red-600 hover:bg-red-100 rounded" title="비활성화"><i class="fas fa-ban text-xs"></i></button>` : ''}
+                        </div>
+                    </div>`;
+                });
+                html += '</div>';
+            }
+        }
+        c.innerHTML = html;
+    }
+
+    function drillIntoCategory(categoryId, categoryName) {
+        wpNavLevel = 'workplaces';
+        wpNavCategoryId = categoryId;
+        wpNavCategoryName = categoryName;
+        selectedWorkplaceId = null;
+        renderSidebar();
+        showZoneMapForCategory(categoryId);
+    }
+
+    function backToCategories() {
+        wpNavLevel = 'categories';
+        wpNavCategoryId = null;
+        wpNavCategoryName = '';
+        selectedWorkplaceId = null;
+        renderSidebar();
+        showEmptyState();
+    }
+
+    function showEmptyState() {
+        document.getElementById('workplaceEmptyState')?.classList.remove('hidden');
+        document.getElementById('equipmentSection')?.classList.add('hidden');
+        document.getElementById('zoneMapSection')?.classList.add('hidden');
+    }
+
+    function showZoneMapForCategory(categoryId) {
+        document.getElementById('workplaceEmptyState')?.classList.add('hidden');
+        document.getElementById('equipmentSection')?.classList.add('hidden');
+        document.getElementById('zoneMapSection')?.classList.remove('hidden');
+        const catName = categoryId === 0 ? '미분류' : (workplaceCategories.find(c => c.category_id == categoryId)?.category_name || '');
+        document.getElementById('zoneMapTitle').innerHTML = `<i class="fas fa-map text-slate-400 mr-2"></i>${catName} - 구역지도`;
+        selectedMapCategoryId = categoryId;
+        if (categoryId === 0) {
+            document.getElementById('layoutPreviewArea').classList.remove('hidden');
+            document.getElementById('layoutPreviewCanvas').classList.add('hidden');
+            document.getElementById('layoutPreviewArea').innerHTML = '<i class="fas fa-info-circle text-2xl mb-2"></i><p>미분류 작업장에는 구역지도가 없습니다.</p>';
+            return;
+        }
+        loadLayoutPreview(categoryId);
+    }
+
+    function backToCategory() {
+        if (!wpNavCategoryId && wpNavCategoryId !== 0) { backToCategories(); return; }
+        selectedWorkplaceId = null;
+        renderSidebar();
+        showZoneMapForCategory(wpNavCategoryId);
+    }
+
+    function openAddWorkplaceModal() {
+        populateCategorySelects();
+        document.getElementById('addWorkplaceForm').reset();
+        // 공장 드릴다운 상태이면 카테고리 자동 선택
+        if (wpNavLevel === 'workplaces' && wpNavCategoryId && wpNavCategoryId !== 0) {
+            document.getElementById('newWorkplaceCategory').value = wpNavCategoryId;
+        }
+        document.getElementById('addWorkplaceModal').classList.remove('hidden');
+    }
+    function closeAddWorkplaceModal() { document.getElementById('addWorkplaceModal').classList.add('hidden'); }
+
+    document.getElementById('addWorkplaceForm').addEventListener('submit', async e => {
+        e.preventDefault();
+        try {
+            await api('/workplaces', { method: 'POST', body: JSON.stringify({
+                workplace_name: document.getElementById('newWorkplaceName').value.trim(),
+                category_id: document.getElementById('newWorkplaceCategory').value ? parseInt(document.getElementById('newWorkplaceCategory').value) : null,
+                workplace_purpose: document.getElementById('newWorkplacePurpose').value || null,
+                description: document.getElementById('newWorkplaceDesc').value.trim() || null,
+                display_priority: parseInt(document.getElementById('newWorkplacePriority').value) || 0
+            })});
+            showToast('작업장이 추가되었습니다.'); document.getElementById('addWorkplaceForm').reset(); closeAddWorkplaceModal(); await loadWorkplaces();
+        } catch(e) { showToast(e.message, 'error'); }
+    });
+
+    function editWorkplace(id) {
+        const w = workplaces.find(x => x.workplace_id === id); if (!w) return;
+        document.getElementById('editWorkplaceId').value = w.workplace_id;
+        document.getElementById('editWorkplaceName').value = w.workplace_name;
+        document.getElementById('editWorkplaceDesc').value = w.description || '';
+        document.getElementById('editWorkplacePriority').value = w.display_priority || 0;
+        document.getElementById('editWorkplaceActive').value = (w.is_active === 0 || w.is_active === false) ? '0' : '1';
+        document.getElementById('editWorkplacePurpose').value = w.workplace_purpose || '';
+        populateCategorySelects();
+        document.getElementById('editWorkplaceCategory').value = w.category_id || '';
+        document.getElementById('editWorkplaceModal').classList.remove('hidden');
+    }
+    function closeWorkplaceModal() { document.getElementById('editWorkplaceModal').classList.add('hidden'); }
+
+    document.getElementById('editWorkplaceForm').addEventListener('submit', async e => {
+        e.preventDefault();
+        try {
+            await api(`/workplaces/${document.getElementById('editWorkplaceId').value}`, { method: 'PUT', body: JSON.stringify({
+                workplace_name: document.getElementById('editWorkplaceName').value.trim(),
+                category_id: document.getElementById('editWorkplaceCategory').value ? parseInt(document.getElementById('editWorkplaceCategory').value) : null,
+                workplace_purpose: document.getElementById('editWorkplacePurpose').value || null,
+                description: document.getElementById('editWorkplaceDesc').value.trim() || null,
+                display_priority: parseInt(document.getElementById('editWorkplacePriority').value) || 0,
+                is_active: document.getElementById('editWorkplaceActive').value === '1'
+            })});
+            showToast('수정되었습니다.'); closeWorkplaceModal(); await loadWorkplaces();
+        } catch(e) { showToast(e.message, 'error'); }
+    });
+
+    async function deactivateWorkplace(id, name) {
+        if (!confirm(`"${name}" 작업장을 비활성화?`)) return;
+        try { await api(`/workplaces/${id}`, { method: 'DELETE' }); showToast('작업장 비활성화 완료'); await loadWorkplaces(); } catch(e) { showToast(e.message, 'error'); }
+    }
+
+    /* ===== Equipment CRUD ===== */
+    let eqMapImg = null, eqMapCanvas = null, eqMapCtx = null, eqDetailEqId = null;
+
+    function eqStatusBadge(status) {
+        const map = { active:'bg-emerald-50 text-emerald-600', maintenance:'bg-amber-50 text-amber-600', inactive:'bg-gray-100 text-gray-500', external:'bg-blue-50 text-blue-600', repair_external:'bg-blue-50 text-blue-600', repair_needed:'bg-red-50 text-red-600' };
+        const labels = { active:'가동중', maintenance:'점검중', inactive:'비활성', external:'외부반출', repair_external:'수리외주', repair_needed:'수리필요' };
+        return `<span class="px-1.5 py-0.5 rounded text-xs ${map[status] || 'bg-gray-100 text-gray-500'}">${labels[status] || status || ''}</span>`;
+    }
+
+    function selectWorkplaceForEquipments(id, name) {
+        selectedWorkplaceId = id;
+        selectedWorkplaceName = name;
+        // 카테고리 레벨에서 직접 호출된 경우, 해당 카테고리로 드릴인
+        if (wpNavLevel === 'categories') {
+            const wp = workplaces.find(w => w.workplace_id === id);
+            if (wp && wp.category_id) {
+                wpNavLevel = 'workplaces';
+                wpNavCategoryId = wp.category_id;
+                wpNavCategoryName = wp.category_name || '';
+            }
+        }
+        renderSidebar();
+        document.getElementById('workplaceEmptyState')?.classList.add('hidden');
+        document.getElementById('zoneMapSection')?.classList.add('hidden');
+        document.getElementById('equipmentSection').classList.remove('hidden');
+        document.getElementById('eqWorkplaceName').textContent = name;
+        // 뒤로가기 버튼 표시 (공장 구역지도로 돌아가기)
+        const backBtn = document.getElementById('eqBackToCategory');
+        if (backBtn && wpNavCategoryId !== null) {
+            document.getElementById('eqBackLabel').textContent = `${wpNavCategoryName} 구역지도`;
+            backBtn.classList.remove('hidden');
+        } else if (backBtn) {
+            backBtn.classList.add('hidden');
+        }
+        loadEquipments();
+        loadEquipmentTypes();
+        loadEqMap();
+    }
+
+    async function loadEquipments() {
+        try {
+            const r = await api(`/equipments/workplace/${selectedWorkplaceId}`);
+            equipments = r.data || [];
+            displayEquipments();
+            drawEqMapEquipments();
+        } catch(e) {
+            document.getElementById('equipmentList').innerHTML = `<div class="text-red-500 text-center py-4"><p class="text-sm">${e.message}</p></div>`;
+        }
+    }
+
+    function displayEquipments() {
+        const statusFilter = document.getElementById('eqStatusFilter').value;
+        const typeFilter = document.getElementById('eqTypeFilter').value;
+        let filtered = equipments;
+        if (statusFilter) filtered = filtered.filter(e => e.status === statusFilter);
+        if (typeFilter) filtered = filtered.filter(e => e.equipment_type === typeFilter);
+        const c = document.getElementById('equipmentList');
+        if (!filtered.length) { c.innerHTML = '<p class="text-gray-400 text-center py-4 text-sm">설비가 없습니다.</p>'; return; }
+        c.innerHTML = filtered.map(e => `
+            <div class="flex items-center justify-between p-2.5 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors cursor-pointer" onclick="openEqDetailModal(${e.equipment_id})">
+                <div class="flex-1 min-w-0">
+                    <div class="text-sm font-medium text-gray-800 truncate">
+                        <span class="text-xs text-gray-400 font-mono mr-1.5">${e.equipment_code || ''}</span>${e.equipment_name}
+                        ${e.is_temporarily_moved ? '<i class="fas fa-arrows-alt text-blue-400 ml-1" title="임시이동중"></i>' : ''}
+                    </div>
+                    <div class="text-xs text-gray-500 flex items-center gap-1.5 mt-0.5 flex-wrap">
+                        ${e.equipment_type ? `<span class="px-1.5 py-0.5 rounded bg-slate-50 text-slate-600">${e.equipment_type}</span>` : ''}
+                        ${e.manufacturer ? `<span class="text-gray-400">${e.manufacturer}</span>` : ''}
+                        ${eqStatusBadge(e.status)}
+                    </div>
+                </div>
+                <div class="flex gap-1 ml-2 flex-shrink-0">
+                    <button onclick="event.stopPropagation(); editEquipment(${e.equipment_id})" class="p-1.5 text-slate-500 hover:text-slate-700 hover:bg-slate-200 rounded" title="편집"><i class="fas fa-pen-to-square text-xs"></i></button>
+                    <button onclick="event.stopPropagation(); deleteEquipment(${e.equipment_id},'${(e.equipment_name||'').replace(/'/g,"\\'")}')" class="p-1.5 text-red-400 hover:text-red-600 hover:bg-red-100 rounded" title="삭제"><i class="fas fa-trash-alt text-xs"></i></button>
+                </div>
+            </div>`).join('');
+    }
+
+    function filterEquipments() { displayEquipments(); }
+
+    async function loadEquipmentTypes() {
+        try {
+            const r = await api('/equipments/types'); equipmentTypes = r.data || [];
+            const sel = document.getElementById('eqTypeFilter'); const val = sel.value;
+            sel.innerHTML = '<option value="">전체 유형</option>';
+            equipmentTypes.forEach(t => { const o = document.createElement('option'); o.value = t; o.textContent = t; sel.appendChild(o); });
+            sel.value = val;
+            const dl = document.getElementById('eqTypeDatalist');
+            if (dl) { dl.innerHTML = ''; equipmentTypes.forEach(t => { const o = document.createElement('option'); o.value = t; dl.appendChild(o); }); }
+        } catch(e) { console.warn('설비 유형 로드 실패:', e); }
+    }
+
+    async function openEquipmentModal(editId) {
+        document.getElementById('eqEditId').value = '';
+        document.getElementById('equipmentForm').reset();
+        if (editId) {
+            document.getElementById('eqModalTitle').textContent = '설비 수정';
+            const eq = equipments.find(e => e.equipment_id === editId);
+            if (!eq) return;
+            document.getElementById('eqEditId').value = eq.equipment_id;
+            document.getElementById('eqCode').value = eq.equipment_code || '';
+            document.getElementById('eqName').value = eq.equipment_name || '';
+            document.getElementById('eqType').value = eq.equipment_type || '';
+            document.getElementById('eqStatus').value = eq.status || 'active';
+            document.getElementById('eqManufacturer').value = eq.manufacturer || '';
+            document.getElementById('eqModel').value = eq.model_name || '';
+            document.getElementById('eqSupplier').value = eq.supplier || '';
+            document.getElementById('eqPrice').value = eq.purchase_price || '';
+            document.getElementById('eqInstallDate').value = eq.installation_date ? eq.installation_date.substring(0, 10) : '';
+            document.getElementById('eqSerial').value = eq.serial_number || '';
+            document.getElementById('eqSpecs').value = eq.specifications || '';
+            document.getElementById('eqNotes').value = eq.notes || '';
+        } else {
+            document.getElementById('eqModalTitle').textContent = '설비 추가';
+            generateEquipmentCode();
+        }
+        document.getElementById('equipmentModal').classList.remove('hidden');
+    }
+    function closeEquipmentModal() { document.getElementById('equipmentModal').classList.add('hidden'); }
+    async function generateEquipmentCode() { try { const r = await api('/equipments/next-code?prefix=TKP'); document.getElementById('eqCode').value = r.data || ''; } catch(e) {} }
+    function editEquipment(id) { openEquipmentModal(id); }
+    async function deleteEquipment(id, name) {
+        if (!confirm(`"${name}" 설비를 삭제하시겠습니까?`)) return;
+        try { await api(`/equipments/${id}`, { method: 'DELETE' }); showToast('설비가 삭제되었습니다.'); await loadEquipments(); } catch(e) { showToast(e.message, 'error'); }
+    }
+
+    document.getElementById('equipmentForm').addEventListener('submit', async e => {
+        e.preventDefault();
+        const editId = document.getElementById('eqEditId').value;
+        const body = {
+            equipment_code: document.getElementById('eqCode').value.trim(),
+            equipment_name: document.getElementById('eqName').value.trim(),
+            equipment_type: document.getElementById('eqType').value.trim() || null,
+            status: document.getElementById('eqStatus').value,
+            manufacturer: document.getElementById('eqManufacturer').value.trim() || null,
+            model_name: document.getElementById('eqModel').value.trim() || null,
+            supplier: document.getElementById('eqSupplier').value.trim() || null,
+            purchase_price: document.getElementById('eqPrice').value ? parseFloat(document.getElementById('eqPrice').value) : null,
+            installation_date: document.getElementById('eqInstallDate').value || null,
+            serial_number: document.getElementById('eqSerial').value.trim() || null,
+            specifications: document.getElementById('eqSpecs').value.trim() || null,
+            notes: document.getElementById('eqNotes').value.trim() || null,
+            workplace_id: selectedWorkplaceId
+        };
+        try {
+            if (editId) { await api(`/equipments/${editId}`, { method: 'PUT', body: JSON.stringify(body) }); showToast('설비가 수정되었습니다.'); }
+            else { await api('/equipments', { method: 'POST', body: JSON.stringify(body) }); showToast('설비가 추가되었습니다.'); }
+            closeEquipmentModal(); await loadEquipments(); loadEquipmentTypes();
+        } catch(e) { showToast(e.message, 'error'); }
+    });
+
+    /* ===== Equipment Map (설비 배치도) ===== */
+    function loadEqMap() {
+        const wp = workplaces.find(w => w.workplace_id === selectedWorkplaceId);
+        if (!wp || !wp.layout_image) {
+            document.getElementById('eqMapArea').classList.remove('hidden');
+            document.getElementById('eqMapCanvasWrap').classList.add('hidden');
+            return;
+        }
+        document.getElementById('eqMapArea').classList.add('hidden');
+        document.getElementById('eqMapCanvasWrap').classList.remove('hidden');
+        eqMapCanvas = document.getElementById('eqMapCanvas');
+        eqMapCtx = eqMapCanvas.getContext('2d');
+        const imgUrl = wp.layout_image.startsWith('/') ? '/uploads/' + wp.layout_image.replace(/^\/uploads\//, '') : wp.layout_image;
+        const img = new Image();
+        img.onload = function() {
+            const maxW = 780; const scale = img.width > maxW ? maxW / img.width : 1;
+            eqMapCanvas.width = img.width * scale; eqMapCanvas.height = img.height * scale;
+            eqMapCtx.drawImage(img, 0, 0, eqMapCanvas.width, eqMapCanvas.height);
+            eqMapImg = img;
+            drawEqMapEquipments();
+            eqMapCanvas.onclick = onEqMapClick;
+        };
+        img.src = imgUrl;
+    }
+
+    function drawEqMapEquipments() {
+        if (!eqMapCanvas || !eqMapCtx || !eqMapImg) return;
+        eqMapCtx.clearRect(0, 0, eqMapCanvas.width, eqMapCanvas.height);
+        eqMapCtx.drawImage(eqMapImg, 0, 0, eqMapCanvas.width, eqMapCanvas.height);
+        equipments.forEach(eq => {
+            if (eq.map_x_percent == null || eq.map_y_percent == null) return;
+            const x = (eq.map_x_percent / 100) * eqMapCanvas.width;
+            const y = (eq.map_y_percent / 100) * eqMapCanvas.height;
+            const w = ((eq.map_width_percent || 3) / 100) * eqMapCanvas.width;
+            const h = ((eq.map_height_percent || 3) / 100) * eqMapCanvas.height;
+            const colors = { active:'#10b981', maintenance:'#f59e0b', inactive:'#94a3b8', external:'#3b82f6', repair_external:'#3b82f6', repair_needed:'#ef4444' };
+            const color = colors[eq.status] || '#64748b';
+            eqMapCtx.fillStyle = color + '33'; eqMapCtx.fillRect(x - w/2, y - h/2, w, h);
+            eqMapCtx.strokeStyle = color; eqMapCtx.lineWidth = 2; eqMapCtx.strokeRect(x - w/2, y - h/2, w, h);
+            eqMapCtx.fillStyle = color; eqMapCtx.font = 'bold 10px sans-serif'; eqMapCtx.textAlign = 'center';
+            eqMapCtx.fillText(eq.equipment_code || eq.equipment_name, x, y - h/2 - 3);
+            eqMapCtx.textAlign = 'start';
+        });
+    }
+
+    let eqMapPlacingId = null;
+    function onEqMapClick(e) {
+        if (!eqMapPlacingId) return;
+        const r = eqMapCanvas.getBoundingClientRect();
+        const scaleX = eqMapCanvas.width / r.width; const scaleY = eqMapCanvas.height / r.height;
+        const px = (e.clientX - r.left) * scaleX; const py = (e.clientY - r.top) * scaleY;
+        const xPct = (px / eqMapCanvas.width * 100).toFixed(2); const yPct = (py / eqMapCanvas.height * 100).toFixed(2);
+        saveEqMapPosition(eqMapPlacingId, xPct, yPct);
+        eqMapPlacingId = null; eqMapCanvas.style.cursor = 'default';
+    }
+
+    async function saveEqMapPosition(eqId, x, y) {
+        try {
+            await api(`/equipments/${eqId}/map-position`, { method: 'PATCH', body: JSON.stringify({ map_x_percent: parseFloat(x), map_y_percent: parseFloat(y), map_width_percent: 3, map_height_percent: 3 }) });
+            showToast('설비 위치가 저장되었습니다.'); await loadEquipments();
+        } catch(e) { showToast(e.message, 'error'); }
+    }
+
+    function startPlaceEquipment(eqId) {
+        eqMapPlacingId = eqId; if(eqMapCanvas) eqMapCanvas.style.cursor = 'crosshair';
+        showToast('배치도에서 위치를 클릭하세요');
+    }
+
+    async function uploadWorkplaceLayoutImage() {
+        const file = document.getElementById('wpLayoutImageFile').files[0];
+        if (!file) return;
+        try {
+            const fd = new FormData(); fd.append('image', file); const token = getToken();
+            const res = await fetch(`${API_BASE}/workplaces/${selectedWorkplaceId}/layout-image`, { method: 'POST', headers: { 'Authorization': token ? `Bearer ${token}` : '' }, body: fd });
+            const result = await res.json(); if (!res.ok) throw new Error(result.error || '업로드 실패');
+            showToast('배치도 이미지가 업로드되었습니다.');
+            const wp = workplaces.find(w => w.workplace_id === selectedWorkplaceId);
+            if (wp) wp.layout_image = result.data.image_path;
+            loadEqMap();
+        } catch(e) { showToast(e.message || '업로드 실패', 'error'); }
+    }
+
+    /* ===== Equipment Detail Modal ===== */
+    async function openEqDetailModal(eqId) {
+        eqDetailEqId = eqId;
+        const eq = equipments.find(e => e.equipment_id === eqId);
+        if (!eq) return;
+        document.getElementById('eqDetailTitle').textContent = `${eq.equipment_code} - ${eq.equipment_name}`;
+        document.getElementById('eqReturnBtn').classList.toggle('hidden', !eq.is_temporarily_moved);
+        const fmt = v => v || '-';
+        const fmtDate = v => v ? v.substring(0, 10) : '-';
+        const fmtPrice = v => v ? Number(v).toLocaleString() + '원' : '-';
+        document.getElementById('eqDetailContent').innerHTML = `
+            <div class="grid grid-cols-2 gap-x-4 gap-y-2 text-sm">
+                <div><span class="text-gray-400">유형:</span> ${fmt(eq.equipment_type)}</div>
+                <div><span class="text-gray-400">상태:</span> ${eqStatusBadge(eq.status)}</div>
+                <div><span class="text-gray-400">제조사:</span> ${fmt(eq.manufacturer)}</div>
+                <div><span class="text-gray-400">모델:</span> ${fmt(eq.model_name)}</div>
+                <div><span class="text-gray-400">공급업체:</span> ${fmt(eq.supplier)}</div>
+                <div><span class="text-gray-400">구매가격:</span> ${fmtPrice(eq.purchase_price)}</div>
+                <div><span class="text-gray-400">설치일:</span> ${fmtDate(eq.installation_date)}</div>
+                <div><span class="text-gray-400">시리얼:</span> ${fmt(eq.serial_number)}</div>
+                <div class="col-span-2"><span class="text-gray-400">사양:</span> ${fmt(eq.specifications)}</div>
+                <div class="col-span-2"><span class="text-gray-400">비고:</span> ${fmt(eq.notes)}</div>
+            </div>
+            <div class="mt-2"><button onclick="startPlaceEquipment(${eq.equipment_id}); closeEqDetailModal();" class="text-xs text-blue-600 hover:underline"><i class="fas fa-map-pin mr-1"></i>배치도에 위치 지정</button></div>`;
+        loadEqPhotos(eqId);
+        document.getElementById('eqDetailModal').classList.remove('hidden');
+    }
+    function closeEqDetailModal() { document.getElementById('eqDetailModal').classList.add('hidden'); }
+
+    async function loadEqPhotos(eqId) {
+        const c = document.getElementById('eqPhotoGrid');
+        try {
+            const r = await api(`/equipments/${eqId}/photos`); const photos = r.data || [];
+            if (!photos.length) { c.innerHTML = '<p class="text-gray-400 text-xs col-span-4 text-center py-2">사진 없음</p>'; return; }
+            c.innerHTML = photos.map(p => {
+                const fname = (p.photo_path||'').replace(/^\/uploads\//, '');
+                return `
+                <div class="relative group cursor-pointer" onclick="document.getElementById('photoViewImage').src='/uploads/${fname}'; document.getElementById('photoViewModal').classList.remove('hidden');">
+                    <img src="/uploads/${fname}" class="w-full h-20 object-cover rounded">
+                    <button onclick="event.stopPropagation(); deleteEqPhoto(${p.photo_id})" class="absolute top-0.5 right-0.5 bg-red-500 text-white rounded-full w-4 h-4 text-[10px] leading-4 text-center opacity-0 group-hover:opacity-100">&times;</button>
+                </div>`; }).join('');
+        } catch(e) { c.innerHTML = '<p class="text-red-400 text-xs col-span-4">로드 실패</p>'; }
+    }
+
+    async function uploadEqPhoto() {
+        const file = document.getElementById('eqPhotoFile').files[0]; if (!file || !eqDetailEqId) return;
+        try {
+            const fd = new FormData(); fd.append('photo', file); const token = getToken();
+            const res = await fetch(`${API_BASE}/equipments/${eqDetailEqId}/photos`, { method: 'POST', headers: { 'Authorization': token ? `Bearer ${token}` : '' }, body: fd });
+            const result = await res.json(); if (!res.ok) throw new Error(result.error || '업로드 실패');
+            showToast('사진이 추가되었습니다.'); loadEqPhotos(eqDetailEqId);
+        } catch(e) { showToast(e.message, 'error'); }
+        document.getElementById('eqPhotoFile').value = '';
+    }
+
+    async function deleteEqPhoto(photoId) {
+        if (!confirm('사진을 삭제하시겠습니까?')) return;
+        try { await api(`/equipments/photos/${photoId}`, { method: 'DELETE' }); showToast('삭제됨'); loadEqPhotos(eqDetailEqId); } catch(e) { showToast(e.message, 'error'); }
+    }
+
+    /* ===== Layout Map (구역지도) ===== */
+    let layoutMapImage = null;
+    let mapRegions = [];
+    let mapCanvas = null;
+    let mapCtx = null;
+    let isDrawing = false;
+    let drawStartX = 0;
+    let drawStartY = 0;
+    let currentRect = null;
+    let selectedMapCategoryId = null;
+
+    // 구역지도 프리뷰 캔버스 클릭 → 해당 영역의 작업장으로 드릴다운
+    document.getElementById('previewCanvas')?.addEventListener('click', function(e) {
+        if (!previewMapRegions.length) return;
+        const rect = this.getBoundingClientRect();
+        const xPct = ((e.clientX - rect.left) / rect.width) * 100;
+        const yPct = ((e.clientY - rect.top) / rect.height) * 100;
+        for (const region of previewMapRegions) {
+            if (xPct >= region.x_start && xPct <= region.x_end && yPct >= region.y_start && yPct <= region.y_end) {
+                const wp = workplaces.find(w => w.workplace_id === region.workplace_id);
+                if (wp) {
+                    selectWorkplaceForEquipments(wp.workplace_id, wp.workplace_name);
+                }
+                return;
+            }
+        }
+    });
+
+    async function loadLayoutPreview(categoryId) {
+        const cat = workplaceCategories.find(c => c.category_id == categoryId);
+        if (!cat || !cat.layout_image) {
+            document.getElementById('layoutPreviewArea').classList.remove('hidden');
+            document.getElementById('layoutPreviewCanvas').classList.add('hidden');
+            document.getElementById('layoutPreviewArea').innerHTML = '<i class="fas fa-image text-3xl mb-2"></i><p>레이아웃 이미지가 없습니다. "지도 설정"에서 업로드하세요.</p>';
+            return;
+        }
+
+        document.getElementById('layoutPreviewArea').classList.add('hidden');
+        document.getElementById('layoutPreviewCanvas').classList.remove('hidden');
+
+        const pCanvas = document.getElementById('previewCanvas');
+        const pCtx = pCanvas.getContext('2d');
+
+        const imgUrl = cat.layout_image.startsWith('http') ? cat.layout_image : '/uploads/' + cat.layout_image.replace(/^\/uploads\//, '');
+
+        const img = new Image();
+        img.onload = async function() {
+            const maxW = 800;
+            const scale = img.width > maxW ? maxW / img.width : 1;
+            pCanvas.width = img.width * scale;
+            pCanvas.height = img.height * scale;
+            pCtx.drawImage(img, 0, 0, pCanvas.width, pCanvas.height);
+
+            try {
+                const r = await api(`/workplaces/categories/${categoryId}/map-regions`);
+                const regions = r.data || [];
+                previewMapRegions = regions;
+                regions.forEach(region => {
+                    const x1 = (region.x_start / 100) * pCanvas.width;
+                    const y1 = (region.y_start / 100) * pCanvas.height;
+                    const x2 = (region.x_end / 100) * pCanvas.width;
+                    const y2 = (region.y_end / 100) * pCanvas.height;
+                    pCtx.strokeStyle = '#10b981';
+                    pCtx.lineWidth = 2;
+                    pCtx.strokeRect(x1, y1, x2 - x1, y2 - y1);
+                    pCtx.fillStyle = 'rgba(16, 185, 129, 0.15)';
+                    pCtx.fillRect(x1, y1, x2 - x1, y2 - y1);
+                    pCtx.fillStyle = '#10b981';
+                    pCtx.font = '14px sans-serif';
+                    pCtx.fillText(region.workplace_name || '', x1 + 5, y1 + 20);
+                });
+            } catch(e) { console.warn('영역 로드 실패:', e); }
+        };
+        img.src = imgUrl;
+    }
+
+    // 구역지도 모달
+    function openLayoutMapModal() {
+        if (!selectedMapCategoryId) {
+            showToast('공장을 먼저 선택해주세요.', 'error');
+            return;
+        }
+        const modal = document.getElementById('layoutMapModal');
+        mapCanvas = document.getElementById('regionCanvas');
+        mapCtx = mapCanvas.getContext('2d');
+        modal.style.display = 'flex';
+        document.body.style.overflow = 'hidden';
+        loadLayoutMapData();
+        updateRegionWorkplaceSelect();
+    }
+
+    function closeLayoutMapModal() {
+        const modal = document.getElementById('layoutMapModal');
+        modal.style.display = 'none';
+        document.body.style.overflow = '';
+        if (mapCanvas) {
+            mapCanvas.removeEventListener('mousedown', onCanvasMouseDown);
+            mapCanvas.removeEventListener('mousemove', onCanvasMouseMove);
+            mapCanvas.removeEventListener('mouseup', onCanvasMouseUp);
+            mapCanvas.removeEventListener('mouseleave', onCanvasMouseUp);
+        }
+        currentRect = null;
+        if (selectedMapCategoryId) loadLayoutPreview(selectedMapCategoryId);
+    }
+
+    async function loadLayoutMapData() {
+        try {
+            const cat = workplaceCategories.find(c => c.category_id == selectedMapCategoryId);
+            if (!cat) return;
+
+            const imgDiv = document.getElementById('currentLayoutImage');
+            if (cat.layout_image) {
+                const imgUrl = cat.layout_image.startsWith('http') ? cat.layout_image : '/uploads/' + cat.layout_image.replace(/^\/uploads\//, '');
+                imgDiv.innerHTML = `<img src="${imgUrl}" style="max-width:100%;max-height:300px;border-radius:4px;" alt="레이아웃">`;
+                loadImageToCanvas(imgUrl);
+            } else {
+                imgDiv.innerHTML = '<span class="text-sm text-gray-400">업로드된 이미지가 없습니다</span>';
+            }
+
+            const r = await api(`/workplaces/categories/${selectedMapCategoryId}/map-regions`);
+            mapRegions = r.data || [];
+            renderRegionList();
+        } catch(e) {
+            console.error('레이아웃 데이터 로딩 오류:', e);
+        }
+    }
+
+    function loadImageToCanvas(imgUrl) {
+        const img = new Image();
+        img.onload = function() {
+            const maxW = 800;
+            const scale = img.width > maxW ? maxW / img.width : 1;
+            mapCanvas.width = img.width * scale;
+            mapCanvas.height = img.height * scale;
+            mapCtx.drawImage(img, 0, 0, mapCanvas.width, mapCanvas.height);
+            layoutMapImage = img;
+            drawExistingRegions();
+            setupCanvasEvents();
+        };
+        img.src = imgUrl;
+    }
+
+    function updateRegionWorkplaceSelect() {
+        const sel = document.getElementById('regionWorkplaceSelect');
+        if (!sel) return;
+        const catWps = workplaces.filter(w => w.category_id == selectedMapCategoryId);
+        let html = '<option value="">작업장을 선택하세요</option>';
+        catWps.forEach(wp => {
+            const hasRegion = mapRegions.some(r => r.workplace_id === wp.workplace_id);
+            html += `<option value="${wp.workplace_id}">${wp.workplace_name}${hasRegion ? ' (영역 정의됨)' : ''}</option>`;
+        });
+        sel.innerHTML = html;
+    }
+
+    function previewLayoutImage(event) {
+        const file = event.target.files[0];
+        if (!file) return;
+        const reader = new FileReader();
+        reader.onload = function(e) {
+            document.getElementById('currentLayoutImage').innerHTML = `
+                <img src="${e.target.result}" style="max-width:100%;max-height:300px;border-radius:4px;" alt="미리보기">
+                <p class="text-xs text-gray-400 mt-1">미리보기 (저장하려면 "이미지 업로드" 버튼 클릭)</p>`;
+        };
+        reader.readAsDataURL(file);
+    }
+
+    async function uploadLayoutImage() {
+        const file = document.getElementById('layoutImageFile').files[0];
+        if (!file) { showToast('이미지를 선택해주세요.', 'error'); return; }
+        if (!selectedMapCategoryId) { showToast('공장을 먼저 선택해주세요.', 'error'); return; }
+
+        try {
+            const fd = new FormData();
+            fd.append('image', file);
+            const token = getToken();
+            const res = await fetch(`${API_BASE}/workplaces/categories/${selectedMapCategoryId}/layout-image`, {
+                method: 'POST',
+                headers: { 'Authorization': token ? `Bearer ${token}` : '' },
+                body: fd
+            });
+            const result = await res.json();
+            if (!res.ok) throw new Error(result.error || '업로드 실패');
+
+            showToast('이미지가 업로드되었습니다.');
+            const imgUrl = '/uploads/' + result.data.image_path.replace(/^\/uploads\//, '');
+            document.getElementById('currentLayoutImage').innerHTML = `<img src="${imgUrl}" style="max-width:100%;max-height:300px;border-radius:4px;" alt="레이아웃">`;
+            loadImageToCanvas(imgUrl);
+
+            // 카테고리 데이터 갱신
+            await loadWorkplaceCategories();
+        } catch(e) {
+            showToast(e.message || '업로드 실패', 'error');
+        }
+    }
+
+    // 캔버스 드로잉
+    function setupCanvasEvents() {
+        mapCanvas.removeEventListener('mousedown', onCanvasMouseDown);
+        mapCanvas.removeEventListener('mousemove', onCanvasMouseMove);
+        mapCanvas.removeEventListener('mouseup', onCanvasMouseUp);
+        mapCanvas.removeEventListener('mouseleave', onCanvasMouseUp);
+        mapCanvas.addEventListener('mousedown', onCanvasMouseDown);
+        mapCanvas.addEventListener('mousemove', onCanvasMouseMove);
+        mapCanvas.addEventListener('mouseup', onCanvasMouseUp);
+        mapCanvas.addEventListener('mouseleave', onCanvasMouseUp);
+    }
+
+    function onCanvasMouseDown(e) {
+        const r = mapCanvas.getBoundingClientRect();
+        const scaleX = mapCanvas.width / r.width;
+        const scaleY = mapCanvas.height / r.height;
+        drawStartX = (e.clientX - r.left) * scaleX;
+        drawStartY = (e.clientY - r.top) * scaleY;
+        isDrawing = true;
+    }
+
+    function onCanvasMouseMove(e) {
+        if (!isDrawing) return;
+        const r = mapCanvas.getBoundingClientRect();
+        const scaleX = mapCanvas.width / r.width;
+        const scaleY = mapCanvas.height / r.height;
+        const curX = (e.clientX - r.left) * scaleX;
+        const curY = (e.clientY - r.top) * scaleY;
+
+        mapCtx.clearRect(0, 0, mapCanvas.width, mapCanvas.height);
+        if (layoutMapImage) mapCtx.drawImage(layoutMapImage, 0, 0, mapCanvas.width, mapCanvas.height);
+        drawExistingRegions();
+
+        const w = curX - drawStartX;
+        const h = curY - drawStartY;
+        mapCtx.strokeStyle = '#3b82f6';
+        mapCtx.lineWidth = 3;
+        mapCtx.strokeRect(drawStartX, drawStartY, w, h);
+        mapCtx.fillStyle = 'rgba(59, 130, 246, 0.2)';
+        mapCtx.fillRect(drawStartX, drawStartY, w, h);
+
+        currentRect = { startX: drawStartX, startY: drawStartY, endX: curX, endY: curY };
+    }
+
+    function onCanvasMouseUp() { isDrawing = false; }
+
+    function drawExistingRegions() {
+        mapRegions.forEach(region => {
+            const x1 = (region.x_start / 100) * mapCanvas.width;
+            const y1 = (region.y_start / 100) * mapCanvas.height;
+            const x2 = (region.x_end / 100) * mapCanvas.width;
+            const y2 = (region.y_end / 100) * mapCanvas.height;
+            mapCtx.strokeStyle = '#10b981';
+            mapCtx.lineWidth = 2;
+            mapCtx.strokeRect(x1, y1, x2 - x1, y2 - y1);
+            mapCtx.fillStyle = 'rgba(16, 185, 129, 0.15)';
+            mapCtx.fillRect(x1, y1, x2 - x1, y2 - y1);
+            mapCtx.fillStyle = '#10b981';
+            mapCtx.font = '14px sans-serif';
+            mapCtx.fillText(region.workplace_name || '', x1 + 5, y1 + 20);
+        });
+    }
+
+    function clearCurrentRegion() {
+        currentRect = null;
+        mapCtx.clearRect(0, 0, mapCanvas.width, mapCanvas.height);
+        if (layoutMapImage) mapCtx.drawImage(layoutMapImage, 0, 0, mapCanvas.width, mapCanvas.height);
+        drawExistingRegions();
+    }
+
+    async function saveRegion() {
+        const wpId = document.getElementById('regionWorkplaceSelect').value;
+        if (!wpId) { showToast('작업장을 선택해주세요.', 'error'); return; }
+        if (!currentRect) { showToast('영역을 그려주세요.', 'error'); return; }
+
+        try {
+            const xStart = (Math.min(currentRect.startX, currentRect.endX) / mapCanvas.width * 100).toFixed(2);
+            const yStart = (Math.min(currentRect.startY, currentRect.endY) / mapCanvas.height * 100).toFixed(2);
+            const xEnd = (Math.max(currentRect.startX, currentRect.endX) / mapCanvas.width * 100).toFixed(2);
+            const yEnd = (Math.max(currentRect.startY, currentRect.endY) / mapCanvas.height * 100).toFixed(2);
+
+            const existing = mapRegions.find(r => r.workplace_id == wpId);
+            const body = { workplace_id: parseInt(wpId), category_id: selectedMapCategoryId, x_start: xStart, y_start: yStart, x_end: xEnd, y_end: yEnd, shape: 'rect' };
+
+            if (existing) {
+                await api(`/workplaces/map-regions/${existing.region_id}`, { method: 'PUT', body: JSON.stringify(body) });
+            } else {
+                await api('/workplaces/map-regions', { method: 'POST', body: JSON.stringify(body) });
+            }
+
+            showToast('영역이 저장되었습니다.');
+            await loadLayoutMapData();
+            updateRegionWorkplaceSelect();
+            clearCurrentRegion();
+            document.getElementById('regionWorkplaceSelect').value = '';
+        } catch(e) { showToast(e.message || '저장 실패', 'error'); }
+    }
+
+    function renderRegionList() {
+        const div = document.getElementById('regionList');
+        if (!mapRegions.length) { div.innerHTML = '<p class="text-sm text-gray-400 text-center py-4">정의된 영역이 없습니다</p>'; return; }
+        div.innerHTML = '<div class="space-y-2">' + mapRegions.map(r => `
+            <div class="flex items-center justify-between p-2.5 bg-gray-50 rounded-lg">
+                <div>
+                    <span class="text-sm font-semibold text-gray-800">${r.workplace_name || ''}</span>
+                    <span class="text-xs text-gray-400 ml-2">(${Number(r.x_start).toFixed(1)}%, ${Number(r.y_start).toFixed(1)}%) ~ (${Number(r.x_end).toFixed(1)}%, ${Number(r.y_end).toFixed(1)}%)</span>
+                </div>
+                <button onclick="deleteRegion(${r.region_id})" class="p-1.5 text-red-400 hover:text-red-600 hover:bg-red-100 rounded text-xs"><i class="fas fa-trash-alt"></i> 삭제</button>
+            </div>`).join('') + '</div>';
+    }
+
+    async function deleteRegion(regionId) {
+        if (!confirm('이 영역을 삭제하시겠습니까?')) return;
+        try {
+            await api(`/workplaces/map-regions/${regionId}`, { method: 'DELETE' });
+            showToast('영역이 삭제되었습니다.');
+            await loadLayoutMapData();
+            updateRegionWorkplaceSelect();
+        } catch(e) { showToast(e.message || '삭제 실패', 'error'); }
+    }
+
+    /* ===== Logout ===== */
+    function doLogout() {
+        if (!confirm('로그아웃?')) return;
+        _cookieRemove('sso_token'); localStorage.removeItem('sso_token'); localStorage.removeItem('access_token'); localStorage.removeItem('currentUser');
+        location.href = getLoginUrl();
+    }
+
+    /* ===== Boot ===== */
+    init();
+    </script>
+</body>
+</html>
diff --git a/user-management/web/nginx.conf b/user-management/web/nginx.conf
new file mode 100644
index 0000000..528d695
--- /dev/null
+++ b/user-management/web/nginx.conf
@@ -0,0 +1,40 @@
+server {
+    listen 80;
+    server_name _;
+
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # 정적 파일
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    # 업로드 파일 프록시
+    location /uploads/ {
+        proxy_pass http://tkuser-api:3000/uploads/;
+        proxy_http_version 1.1;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+    }
+
+    # API 프록시 → tkuser-api
+    location /api/ {
+        proxy_pass http://tkuser-api:3000;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection 'upgrade';
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        proxy_cache_bypass $http_upgrade;
+    }
+
+    # Health check
+    location /health {
+        access_log off;
+        return 200 'ok';
+        add_header Content-Type text/plain;
+    }
+}