diff --git a/CLAUDE.md b/CLAUDE.md
index 348f5b3..3cbe76c 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -127,6 +127,28 @@ wing/
 
 ## 진행 중 작업 (완료 후 삭제)
 
+### 폰트 크기 업스케일 작업 (진행 중)
+
+반드시 `memory/font-upscale-plan.md`를 읽고 Phase 진행 상황을 확인할 것.
+
+**토큰 변경 매핑 (이름 유지, 값만 변경):**
+- `caption`/`label-2`/`title-6`: 11px → **12px** (0.75rem)
+- `label-1`/`title-5`: 12px → **13px** (0.8125rem)
+- `body-2`/`title-4`: 13px → **14px** (0.875rem)
+- `body-1`/`title-3`: 14px → **16px** (1rem)
+
+**네비게이션 클래스 교체:**
+- TopBar 메인탭: `text-title-4` → `text-title-2` (16px)
+- SubMenuBar 서브탭: `text-title-5` → `text-title-4` (14px)
+
+**작업 범위:**
+- Phase 1: tailwind.config.js + base.css 토큰 값 수정
+- Phase 2: components.css 하드코딩(27곳) + wing.css `.wing-tab` text-xs→text-caption
+- Phase 3: TopBar.tsx + SubMenuBar.tsx 클래스 교체
+- Phase 4: text-xs→text-caption, text-sm→text-body-2 스크립트 교체 (design 페이지 제외, 608건)
+- Phase 5: prediction 탭 인라인 fontSize 수정
+- Phase 6 (보류): wing-header-bar 패딩 — 폰트 변경 후 유저 확인 후 진행
+
 ### 디자인 시스템 폰트+색상 통일 작업
 
 compact 후 반드시 `memory/design-system-work.md`를 읽고 작업 상태(완료/미완료 컴포넌트)를 확인할 것.
diff --git a/database/migration/016_rescue.sql b/database/migration/016_rescue.sql
index 5e8bd3c..9a2c9a1 100644
--- a/database/migration/016_rescue.sql
+++ b/database/migration/016_rescue.sql
@@ -128,55 +128,125 @@ INSERT INTO RESCUE_OPS (
 );
 
 -- ============================================================
--- 4. RESCUE_SCENARIO 시드 데이터 (5건, RESCUE_OPS_SN=1 기준)
+-- 4. RESCUE_SCENARIO 시드 데이터 (10건, RESCUE_OPS_SN=1 기준)
+--    긴급구난 모델 이론 기반 시간 단계별 시나리오
+--    - 손상복원성(Damage Stability): GM, 횡경사, 트림 진행
+--    - 종강도(Longitudinal Strength): BM 비율 모니터링
+--    - 유출 모델링: 파공부 유출률 변화
+--    - 부력 잔여량: 침수 구획 확대에 따른 부력 변화
 -- ============================================================
 INSERT INTO RESCUE_SCENARIO (
   RESCUE_OPS_SN, TIME_STEP, SCENARIO_DTM, SVRT_CD,
   GM_M, LIST_DEG, TRIM_M, BUOYANCY_PCT, OIL_RATE_LPM, BM_RATIO_PCT,
   DESCRIPTION, COMPARTMENTS, ASSESSMENT, ACTIONS, SORT_ORD
 ) VALUES
+-- S-01: 사고 발생 (Initial Impact)
+-- 충돌 직후 초기 손상 상태. 손상복원성 이론에 따라 파공부 침수 시작, GM 급락
 (
   1, 'T+0h', '2024-10-27 10:30:00+09', 'CRITICAL',
   0.8, 15.0, 2.5, 30.0, 100.0, 92.0,
-  '좌현 35° 충돌로 No.1P 화물탱크 파공, 벙커C유 유출 개시. 좌현 경사 15°, GM 위험수준.',
+  '좌현 35° 충돌로 No.1P 화물탱크 파공. 벙커C유 유출 개시. 손상복원성 분석: 초기 GM 0.8m으로 IMO 기준(1.0m) 미달, 복원력 위험 판정.',
   '[{"name":"#1 FP Tank","status":"FLOODED","color":"var(--red)"},{"name":"#1 Port Tank","status":"BREACHED","color":"var(--red)"},{"name":"#2 Port Tank","status":"RISK","color":"var(--orange)"},{"name":"Engine Room","status":"INTACT","color":"var(--green)"},{"name":"#3 Stbd Tank","status":"INTACT","color":"var(--green)"}]',
-  '[{"label":"복원력","value":"위험 (GM < 1.0m)","color":"var(--red)"},{"label":"유출 위험","value":"활발 유출중","color":"var(--red)"},{"label":"선체 강도","value":"BM 92% (경계)","color":"var(--orange)"},{"label":"승선인원","value":"15/20 확인, 5명 수색중","color":"var(--red)"}]',
-  '[{"time":"10:30","text":"충돌 발생, VHF Ch.16 조난 통보","color":"var(--red)"},{"time":"10:35","text":"해경 3009함 출동 지시","color":"var(--orange)"},{"time":"10:42","text":"인근 선박 구조 활동 개시","color":"var(--cyan)"},{"time":"10:50","text":"유출유 방제선 배치 요청","color":"var(--orange)"}]',
+  '[{"label":"복원력","value":"위험 (GM 0.8m < IMO 1.0m)","color":"var(--red)"},{"label":"유출 위험","value":"활발 유출중 (100 L/min)","color":"var(--red)"},{"label":"선체 강도","value":"BM 92% (경계)","color":"var(--orange)"},{"label":"승선인원","value":"15/20 확인, 5명 수색중","color":"var(--red)"}]',
+  '[{"time":"10:30","text":"충돌 발생, VHF Ch.16 조난 통보 (GMDSS DSC Alert)","color":"var(--red)"},{"time":"10:32","text":"EPIRB 자동 발신 확인","color":"var(--red)"},{"time":"10:35","text":"해경 3009함 출동 지시","color":"var(--orange)"},{"time":"10:42","text":"인근 선박 구조 활동 개시","color":"var(--cyan)"}]',
   1
 ),
+-- S-02: 초동 손상 평가 (Emergency Damage Assessment)
+-- 잠수사 투입, 파공부 규모 확인. 침수 진행 모델링: 파공면적 A, 수두차 h 기반 유입률 Q=Cd·A·√(2gh)
 (
-  1, 'T+2h', '2024-10-27 12:30:00+09', 'HIGH',
-  0.6, 18.0, 3.2, 25.0, 150.0, 88.0,
-  '침수 확대로 경사 증가, 유출량 증가 추세. 긴급 이초 작업 검토 필요.',
-  '[{"name":"#1 FP Tank","status":"FLOODED","color":"var(--red)"},{"name":"#1 Port Tank","status":"FLOODED","color":"var(--red)"},{"name":"#2 Port Tank","status":"FLOODED","color":"var(--red)"},{"name":"Engine Room","status":"RISK","color":"var(--orange)"},{"name":"#3 Stbd Tank","status":"INTACT","color":"var(--green)"}]',
-  '[{"label":"복원력","value":"위험 (GM 0.6m)","color":"var(--red)"},{"label":"유출 위험","value":"증가 추세","color":"var(--red)"},{"label":"선체 강도","value":"BM 88%","color":"var(--orange)"},{"label":"승선인원","value":"전원 퇴선 완료","color":"var(--green)"}]',
-  '[{"time":"12:00","text":"2차 침수 확인 (#2 PT)","color":"var(--red)"},{"time":"12:15","text":"긴급 이초 작업 개시","color":"var(--orange)"},{"time":"12:20","text":"오일펜스 1차 전개 완료","color":"var(--cyan)"},{"time":"12:30","text":"항공기 유출유 촬영 요청","color":"var(--cyan)"}]',
+  1, 'T+30m', '2024-10-27 11:00:00+09', 'CRITICAL',
+  0.7, 17.0, 2.8, 28.0, 120.0, 90.0,
+  '잠수사 수중 조사 결과 좌현 No.1P 파공 크기 1.2m×0.8m 확인. Bernoulli 유입률 모델 적용: 수두차 4.5m 기준 유입률 약 2.1㎥/min. 30분 경과 침수량 추정 63㎥.',
+  '[{"name":"#1 FP Tank","status":"FLOODED","color":"var(--red)"},{"name":"#1 Port Tank","status":"BREACHED","color":"var(--red)"},{"name":"#2 Port Tank","status":"RISK","color":"var(--orange)"},{"name":"Engine Room","status":"INTACT","color":"var(--green)"},{"name":"#3 Stbd Tank","status":"INTACT","color":"var(--green)"}]',
+  '[{"label":"복원력","value":"악화 (GM 0.7m, GZ 커브 감소)","color":"var(--red)"},{"label":"유출 위험","value":"증가 (120 L/min)","color":"var(--red)"},{"label":"선체 강도","value":"BM 90% — 종강도 모니터링 개시","color":"var(--orange)"},{"label":"승선인원","value":"15명 퇴선, 5명 수색중","color":"var(--red)"}]',
+  '[{"time":"10:50","text":"잠수사 투입, 수중 손상 조사 개시","color":"var(--cyan)"},{"time":"10:55","text":"파공 규모 확인: 1.2m×0.8m, 수선 하 2.5m","color":"var(--red)"},{"time":"11:00","text":"손상복원성 재계산 — IMO Res.A.749 기준 위험","color":"var(--red)"},{"time":"11:00","text":"유출유 방제선 배치 요청","color":"var(--orange)"}]',
   2
 ),
+-- S-03: 구조 작전 개시 (SAR Operations Initiated)
+-- 해경 함정 현장 도착, 인명 구조 우선. GM 지속 하락, 복원력 한계 접근
 (
-  1, 'T+6h', '2024-10-27 16:30:00+09', 'HIGH',
-  0.4, 12.0, 2.8, 35.0, 80.0, 90.0,
-  '평형수 이동으로 경사 일부 복원. 유출률 감소 추세.',
-  '[{"name":"#1 FP Tank","status":"FLOODED","color":"var(--red)"},{"name":"#1 Port Tank","status":"FLOODED","color":"var(--red)"},{"name":"#2 Port Tank","status":"FLOODED","color":"var(--red)"},{"name":"Engine Room","status":"RISK","color":"var(--orange)"},{"name":"#3 Stbd Tank","status":"RISK","color":"var(--orange)"}]',
-  '[{"label":"복원력","value":"개선 추세 (GM 0.4m)","color":"var(--orange)"},{"label":"유출 위험","value":"감소 추세","color":"var(--orange)"},{"label":"선체 강도","value":"BM 90%","color":"var(--orange)"},{"label":"구조 상황","value":"구조 작전 진행중","color":"var(--cyan)"}]',
-  '[{"time":"14:00","text":"평형수 이동 작업 개시","color":"var(--cyan)"},{"time":"15:00","text":"해상크레인 도착","color":"var(--cyan)"},{"time":"15:30","text":"잔류유 이적 작업 개시","color":"var(--orange)"},{"time":"16:30","text":"예인준비 완료","color":"var(--green)"}]',
+  1, 'T+1h', '2024-10-27 11:30:00+09', 'CRITICAL',
+  0.65, 18.5, 3.0, 26.0, 135.0, 89.0,
+  '해경 3009함 현장 도착, SAR 작전 개시. 표류 예측 모델(Leeway Model) 적용: 풍속 8m/s, 해류 2.5kn NE 조건에서 실종자 표류 반경 1.2nm 산정. GZ 커브 분석: 최대 복원력 각도 25°로 감소.',
+  '[{"name":"#1 FP Tank","status":"FLOODED","color":"var(--red)"},{"name":"#1 Port Tank","status":"FLOODED","color":"var(--red)"},{"name":"#2 Port Tank","status":"FLOODING","color":"var(--red)"},{"name":"Engine Room","status":"INTACT","color":"var(--green)"},{"name":"#3 Stbd Tank","status":"INTACT","color":"var(--green)"}]',
+  '[{"label":"복원력","value":"한계 접근 (GM 0.65m, GZ_max 25°)","color":"var(--red)"},{"label":"유출 위험","value":"파공 확대 우려 (135 L/min)","color":"var(--red)"},{"label":"선체 강도","value":"BM 89% — Hogging 모멘트 증가","color":"var(--orange)"},{"label":"인명구조","value":"실종 5명 수색중, 표류 반경 1.2nm","color":"var(--red)"}]',
+  '[{"time":"11:10","text":"해경 3009함 현장 도착, SAR 구역 설정","color":"var(--cyan)"},{"time":"11:15","text":"실종자 Leeway 표류 예측 모델 적용","color":"var(--cyan)"},{"time":"11:20","text":"회전익 항공기 수색 개시 (R=1.2nm)","color":"var(--cyan)"},{"time":"11:30","text":"#2 Port Tank 2차 침수 징후 감지","color":"var(--red)"}]',
   3
 ),
+-- S-04: 침수 확대 및 복원력 위기 (Flooding Progression & Stability Crisis)
+-- 2차 구획 침수, 자유표면효과(Free Surface Effect) 반영 GM 급락
 (
-  1, 'T+12h', '2024-10-27 22:30:00+09', 'MEDIUM',
-  0.6, 8.0, 1.5, 50.0, 30.0, 94.0,
-  '예인 작업 진행중, 선체 안정화 확인. 유출 대부분 차단.',
-  '[{"name":"#1 FP Tank","status":"FLOODED","color":"var(--red)"},{"name":"#1 Port Tank","status":"FLOODED","color":"var(--red)"},{"name":"#2 Port Tank","status":"SEALED","color":"var(--orange)"},{"name":"Engine Room","status":"INTACT","color":"var(--green)"},{"name":"#3 Stbd Tank","status":"INTACT","color":"var(--green)"}]',
-  '[{"label":"복원력","value":"안정 (GM 0.6m)","color":"var(--orange)"},{"label":"유출 위험","value":"대부분 차단","color":"var(--green)"},{"label":"선체 강도","value":"BM 94%","color":"var(--green)"},{"label":"예인 상태","value":"목포항 예인 진행중","color":"var(--cyan)"}]',
-  '[{"time":"18:00","text":"예인 개시 (목포항 방향)","color":"var(--cyan)"},{"time":"19:00","text":"유출유 차단 확인","color":"var(--green)"},{"time":"20:00","text":"야간 감시 체제 전환","color":"var(--orange)"},{"time":"22:30","text":"예인 50% 진행","color":"var(--cyan)"}]',
+  1, 'T+2h', '2024-10-27 12:30:00+09', 'CRITICAL',
+  0.5, 20.0, 3.5, 22.0, 160.0, 86.0,
+  '격벽 관통으로 #2 Port Tank 침수 확대. 자유표면효과(FSE) 보정: GM_fluid = GM_solid - Σ(i/∇) = 0.5m. 종강도 분석: 중앙부 Sagging 모멘트 허용치 86% 도달. 침몰 위험 단계 진입.',
+  '[{"name":"#1 FP Tank","status":"FLOODED","color":"var(--red)"},{"name":"#1 Port Tank","status":"FLOODED","color":"var(--red)"},{"name":"#2 Port Tank","status":"FLOODED","color":"var(--red)"},{"name":"Engine Room","status":"RISK","color":"var(--orange)"},{"name":"#3 Stbd Tank","status":"INTACT","color":"var(--green)"}]',
+  '[{"label":"복원력","value":"위기 (GM 0.5m, FSE 보정 후)","color":"var(--red)"},{"label":"유출 위험","value":"최대치 접근 (160 L/min)","color":"var(--red)"},{"label":"선체 강도","value":"BM 86% — Sagging 허용치 경고","color":"var(--red)"},{"label":"승선인원","value":"실종 3명 발견, 2명 수색 지속","color":"var(--orange)"}]',
+  '[{"time":"12:00","text":"#2 Port Tank 격벽 관통 침수 확인","color":"var(--red)"},{"time":"12:10","text":"자유표면효과(FSE) 보정 재계산","color":"var(--red)"},{"time":"12:15","text":"긴급 Counter-Flooding 검토","color":"var(--orange)"},{"time":"12:30","text":"실종자 3명 추가 발견 구조","color":"var(--green)"}]',
   4
 ),
+-- S-05: 응급 복원 작업 (Emergency Counter-Flooding)
+-- Counter-Flooding 이론: 반대편 구획 의도적 침수로 횡경사 교정
+(
+  1, 'T+3h', '2024-10-27 13:30:00+09', 'HIGH',
+  0.55, 16.0, 3.2, 25.0, 140.0, 87.0,
+  'Counter-Flooding 실시: #3 Stbd Tank에 평형수 280톤 주입하여 횡경사 20°→16° 교정. 복원력 일시적 개선. 종강도: Counter-Flooding으로 중량 재배분, BM 87% 유지. 유출률 감소 추세.',
+  '[{"name":"#1 FP Tank","status":"FLOODED","color":"var(--red)"},{"name":"#1 Port Tank","status":"FLOODED","color":"var(--red)"},{"name":"#2 Port Tank","status":"FLOODED","color":"var(--red)"},{"name":"Engine Room","status":"RISK","color":"var(--orange)"},{"name":"#3 Stbd Tank","status":"BALLASTED","color":"var(--orange)"}]',
+  '[{"label":"복원력","value":"개선 중 (GM 0.55m, 경사 16°)","color":"var(--orange)"},{"label":"유출 위험","value":"감소 추세 (140 L/min)","color":"var(--orange)"},{"label":"선체 강도","value":"BM 87% — Counter-Flooding 영향 평가","color":"var(--orange)"},{"label":"구조 상황","value":"실종 2명 수색 지속, 헬기 투입","color":"var(--orange)"}]',
+  '[{"time":"12:45","text":"Counter-Flooding 결정 — #3 Stbd 평형수 주입 개시","color":"var(--orange)"},{"time":"13:00","text":"평형수 280톤 주입, 횡경사 20°→18° 교정 진행","color":"var(--cyan)"},{"time":"13:15","text":"종강도 재계산 — 허용 범위 내 확인","color":"var(--cyan)"},{"time":"13:30","text":"횡경사 16° 안정화, 유출률 감소 확인","color":"var(--green)"}]',
+  5
+),
+-- S-06: 선체 안정화 및 잔류유 이적 (Hull Stabilization & Oil Transfer)
+-- 평형수 조정 완료, 임시 보강. Trim/Stability Booklet 기준 안정 범위 진입
+(
+  1, 'T+6h', '2024-10-27 16:30:00+09', 'HIGH',
+  0.7, 12.0, 2.5, 32.0, 80.0, 90.0,
+  '임시 수중패치 설치, 유입률 감소. 평형수 재조정으로 GM 0.7m 회복. Trim/Stability Booklet 기준 예인 가능 최소 조건(GM≥0.5m, List≤15°) 충족. 잔류유 이적선(M/T) 배치.',
+  '[{"name":"#1 FP Tank","status":"FLOODED","color":"var(--red)"},{"name":"#1 Port Tank","status":"PATCHED","color":"var(--orange)"},{"name":"#2 Port Tank","status":"FLOODED","color":"var(--red)"},{"name":"Engine Room","status":"INTACT","color":"var(--green)"},{"name":"#3 Stbd Tank","status":"BALLASTED","color":"var(--orange)"}]',
+  '[{"label":"복원력","value":"개선 (GM 0.7m, 예인 가능 조건 충족)","color":"var(--orange)"},{"label":"유출 위험","value":"수중패치 효과 (80 L/min)","color":"var(--orange)"},{"label":"선체 강도","value":"BM 90% — 안정 범위","color":"var(--green)"},{"label":"구조 상황","value":"전원 구조 완료 (실종 2명 발견)","color":"var(--green)"}]',
+  '[{"time":"14:00","text":"수중패치 설치 작업 개시","color":"var(--cyan)"},{"time":"14:30","text":"잠수사 수중패치 설치 완료","color":"var(--green)"},{"time":"15:00","text":"해상크레인 도착, 잔류유 이적 준비","color":"var(--cyan)"},{"time":"16:30","text":"잔류유 1차 이적 완료 (약 45kL), 예인 준비 개시","color":"var(--green)"}]',
+  6
+),
+-- S-07: 오일 방제 전개 (Oil Boom Deployment & Containment)
+-- 방제 이론: 오일붐 2중 전개, 유회수기 배치, 확산 모델 기반 방제 구역 설정
+(
+  1, 'T+8h', '2024-10-27 18:30:00+09', 'MEDIUM',
+  0.8, 10.0, 2.0, 38.0, 55.0, 91.0,
+  '오일붐 2중 전개 완료, 유회수기 3대 가동. 유출유 확산 예측 모델(GNOME) 적용: 풍향 NE 8m/s, 해류 2.5kn 조건에서 12시간 후 확산 면적 2.3km² 예측. 기계적 회수율 35% 달성.',
+  '[{"name":"#1 FP Tank","status":"FLOODED","color":"var(--red)"},{"name":"#1 Port Tank","status":"PATCHED","color":"var(--orange)"},{"name":"#2 Port Tank","status":"SEALED","color":"var(--orange)"},{"name":"Engine Room","status":"INTACT","color":"var(--green)"},{"name":"#3 Stbd Tank","status":"BALLASTED","color":"var(--orange)"}]',
+  '[{"label":"복원력","value":"안정 (GM 0.8m)","color":"var(--orange)"},{"label":"유출 위험","value":"방제 진행 (55 L/min, 회수율 35%)","color":"var(--orange)"},{"label":"선체 강도","value":"BM 91%","color":"var(--green)"},{"label":"방제 현황","value":"오일붐 2중, 유회수기 3대 가동","color":"var(--cyan)"}]',
+  '[{"time":"17:00","text":"오일붐 1차 전개 (500m)","color":"var(--cyan)"},{"time":"17:30","text":"오일붐 2차 전개 (300m, 이중 방어선)","color":"var(--cyan)"},{"time":"17:45","text":"유회수기 3대 배치·가동 개시","color":"var(--cyan)"},{"time":"18:30","text":"GNOME 확산 예측 갱신 — 방제 구역 재설정","color":"var(--orange)"}]',
+  7
+),
+-- S-08: 예인 작업 개시 (Towing Operation Commenced)
+-- 예인 이론: 예인 저항 계산, 기상·해상 조건 판단, 예인 경로 최적화
+(
+  1, 'T+12h', '2024-10-27 22:30:00+09', 'MEDIUM',
+  0.9, 8.0, 1.5, 45.0, 30.0, 94.0,
+  '예인 개시. 예인 저항 계산: Rt = 1/2·ρ·Cd·A·V² 기반 예인선 4,000HP급 배정. 예인 경로: 현 위치→목포항 직선 42nm, 예인 속도 3kn 기준 ETA 14시간. 야간 감시 체제 전환.',
+  '[{"name":"#1 FP Tank","status":"FLOODED","color":"var(--red)"},{"name":"#1 Port Tank","status":"PATCHED","color":"var(--orange)"},{"name":"#2 Port Tank","status":"SEALED","color":"var(--orange)"},{"name":"Engine Room","status":"INTACT","color":"var(--green)"},{"name":"#3 Stbd Tank","status":"BALLASTED","color":"var(--orange)"}]',
+  '[{"label":"복원력","value":"안정 (GM 0.9m)","color":"var(--orange)"},{"label":"유출 위험","value":"억제 중 (30 L/min)","color":"var(--green)"},{"label":"선체 강도","value":"BM 94% — 예인 하중 반영","color":"var(--green)"},{"label":"예인 상태","value":"목포항 방향, ETA 14h, 3kn","color":"var(--cyan)"}]',
+  '[{"time":"18:00","text":"예인 접속 완료, 예인삭 250m 전개","color":"var(--cyan)"},{"time":"18:30","text":"예인 개시 (목포항 방향, 3kn)","color":"var(--cyan)"},{"time":"20:00","text":"야간 감시 체제 전환 (2시간 교대)","color":"var(--orange)"},{"time":"22:30","text":"예인 진행률 30%, 선체 상태 안정","color":"var(--green)"}]',
+  8
+),
+-- S-09: 이동 중 감시 및 안정성 유지 (Transit Monitoring)
+-- 예인 중 동적 안정성 모니터링: 파랑 응답(RAO) 기반 횡동요 예측
+(
+  1, 'T+18h', '2024-10-28 04:30:00+09', 'MEDIUM',
+  1.0, 5.0, 1.0, 55.0, 15.0, 96.0,
+  '예인 진행률 65%. 파랑 응답 분석(RAO): 유의파고 1.2m, 주기 6s 조건에서 횡동요 진폭 ±3° 예측 — 안전 범위 내. 잔류 유출률 15 L/min으로 대폭 감소. 선체 안정성 지속 개선.',
+  '[{"name":"#1 FP Tank","status":"FLOODED","color":"var(--red)"},{"name":"#1 Port Tank","status":"PATCHED","color":"var(--orange)"},{"name":"#2 Port Tank","status":"SEALED","color":"var(--orange)"},{"name":"Engine Room","status":"INTACT","color":"var(--green)"},{"name":"#3 Stbd Tank","status":"STABLE","color":"var(--green)"}]',
+  '[{"label":"복원력","value":"양호 (GM 1.0m, IMO 기준 충족)","color":"var(--green)"},{"label":"유출 위험","value":"미량 유출 (15 L/min)","color":"var(--green)"},{"label":"선체 강도","value":"BM 96% — 정상 범위","color":"var(--green)"},{"label":"예인 상태","value":"진행률 65%, ETA 5.5h","color":"var(--cyan)"}]',
+  '[{"time":"00:00","text":"야간 예인 정상 진행, 기상 양호","color":"var(--green)"},{"time":"02:00","text":"파랑 응답 분석 — 안전 범위 확인","color":"var(--green)"},{"time":"03:00","text":"잔류유 유출률 15 L/min 확인","color":"var(--green)"},{"time":"04:30","text":"목포항 VTS 통보, 입항 예정 협의","color":"var(--cyan)"}]',
+  9
+),
+-- S-10: 상황 종료 및 사후 평가 (Resolution & Post-Assessment)
+-- 접안 완료, 잔류유 이적, 사후 안정성 평가
 (
   1, 'T+24h', '2024-10-28 10:30:00+09', 'RESOLVED',
   1.2, 3.0, 0.5, 75.0, 5.0, 98.0,
-  '목포항 도착, 선체 안정. 잔류유 이적 완료.',
-  '[{"name":"#1 FP Tank","status":"SEALED","color":"var(--orange)"},{"name":"#1 Port Tank","status":"SEALED","color":"var(--orange)"},{"name":"#2 Port Tank","status":"SEALED","color":"var(--orange)"},{"name":"Engine Room","status":"INTACT","color":"var(--green)"},{"name":"#3 Stbd Tank","status":"INTACT","color":"var(--green)"}]',
-  '[{"label":"복원력","value":"안전 (GM 1.2m)","color":"var(--green)"},{"label":"유출 위험","value":"차단 완료","color":"var(--green)"},{"label":"선체 강도","value":"BM 98% 정상","color":"var(--green)"},{"label":"예인 상태","value":"목포항 접안 완료","color":"var(--green)"}]',
-  '[{"time":"06:00","text":"목포항 접근","color":"var(--cyan)"},{"time":"08:00","text":"도선사 승선, 접안 개시","color":"var(--cyan)"},{"time":"09:30","text":"접안 완료","color":"var(--green)"},{"time":"10:30","text":"잔류유 이적 완료, 상황 종료","color":"var(--green)"}]',
-  5
+  '목포항 접안 완료. 잔류유 전량 이적(총 120kL). 최종 손상복원성 평가: GM 1.2m으로 IMO 기준 충족, 횡경사 3° 잔류. 종강도 BM 98% 정상. 방제 총 회수량 85kL (회수율 71%). 상황 종료 선포.',
+  '[{"name":"#1 FP Tank","status":"SEALED","color":"var(--orange)"},{"name":"#1 Port Tank","status":"SEALED","color":"var(--orange)"},{"name":"#2 Port Tank","status":"SEALED","color":"var(--orange)"},{"name":"Engine Room","status":"INTACT","color":"var(--green)"},{"name":"#3 Stbd Tank","status":"STABLE","color":"var(--green)"}]',
+  '[{"label":"복원력","value":"안전 (GM 1.2m, IMO 기준 초과)","color":"var(--green)"},{"label":"유출 위험","value":"차단 완료 (잔류 5 L/min)","color":"var(--green)"},{"label":"선체 강도","value":"BM 98% 정상","color":"var(--green)"},{"label":"최종 상태","value":"접안 완료, 잔류유 이적 완료","color":"var(--green)"}]',
+  '[{"time":"06:00","text":"목포항 접근, 도선사 대기","color":"var(--cyan)"},{"time":"08:00","text":"도선사 승선, 접안 개시","color":"var(--cyan)"},{"time":"09:30","text":"접안 완료, 잔류유 이적선 접현","color":"var(--green)"},{"time":"10:30","text":"잔류유 전량 이적 완료, 상황 종료 선포","color":"var(--green)"}]',
+  10
 );
diff --git a/docs/RELEASE-NOTES.md b/docs/RELEASE-NOTES.md
index 5c127bb..7415bfa 100644
--- a/docs/RELEASE-NOTES.md
+++ b/docs/RELEASE-NOTES.md
@@ -4,6 +4,16 @@
 
 ## [Unreleased]
 
+## [2026-04-14]
+
+### 추가
+- 디자인 시스템: HNS·사건사고·확산예측·SCAT·기상 탭 디자인 시스템 토큰 전면 적용
+- 관리자: 비식별화조치 메뉴 및 패널 추가
+- 긴급구난/예측도 OSM 지도 적용 및 관리자 패널 추가
+
+### 변경
+- 디자인 시스템: 폰트 업스케일 토큰 값 변경 및 전체 탭 색상·폰트 통일
+
 ## [2026-04-13]
 
 ### 추가
diff --git a/frontend/src/common/components/auth/LoginPage.tsx b/frontend/src/common/components/auth/LoginPage.tsx
index 6413cf1..717c7ec 100644
--- a/frontend/src/common/components/auth/LoginPage.tsx
+++ b/frontend/src/common/components/auth/LoginPage.tsx
@@ -120,7 +120,7 @@ export function LoginPage() {
                 </label>
                 <div className="relative">
                   <span
-                    className="absolute text-sm text-fg-disabled pointer-events-none"
+                    className="absolute text-body-2 text-fg-disabled pointer-events-none"
                     style={{ left: 12, top: '50%', transform: 'translateY(-50%)' }}
                   >
                     <svg
@@ -174,7 +174,7 @@ export function LoginPage() {
                 </label>
                 <div className="relative">
                   <span
-                    className="absolute text-sm text-fg-disabled pointer-events-none"
+                    className="absolute text-body-2 text-fg-disabled pointer-events-none"
                     style={{ left: 12, top: '50%', transform: 'translateY(-50%)' }}
                   >
                     <svg
@@ -249,7 +249,7 @@ export function LoginPage() {
                     color: '#67e8f9',
                   }}
                 >
-                  <span className="text-sm shrink-0 mt-px">
+                  <span className="text-body-2 shrink-0 mt-px">
                     <svg
                       width="14"
                       height="14"
@@ -303,7 +303,7 @@ export function LoginPage() {
               <button
                 type="submit"
                 disabled={isLoading}
-                className="w-full text-color-accent text-sm font-bold rounded-md border"
+                className="w-full text-color-accent text-body-2 font-bold rounded-md border"
                 style={{
                   padding: '12px',
                   background: isLoading
diff --git a/frontend/src/common/components/layout/SubMenuBar.tsx b/frontend/src/common/components/layout/SubMenuBar.tsx
index 5ad7fcf..666fdfd 100755
--- a/frontend/src/common/components/layout/SubMenuBar.tsx
+++ b/frontend/src/common/components/layout/SubMenuBar.tsx
@@ -21,7 +21,7 @@ export function SubMenuBar({ activeMainTab }: SubMenuBarProps) {
             key={item.id}
             onClick={() => setActiveSubTab(item.id)}
             className={`
-              px-4 py-2.5 text-title-5 font-medium transition-all duration-200
+              px-4 py-2.5 text-title-4 font-medium transition-all duration-200
               font-korean tracking-navigation
               ${activeSubTab === item.id ? 'text-color-accent' : 'text-fg-sub hover:text-fg'}
             `}
diff --git a/frontend/src/common/components/layout/TopBar.tsx b/frontend/src/common/components/layout/TopBar.tsx
index ca22afd..2168bfd 100755
--- a/frontend/src/common/components/layout/TopBar.tsx
+++ b/frontend/src/common/components/layout/TopBar.tsx
@@ -56,11 +56,7 @@ export function TopBar({ activeTab, onTabChange }: TopBarProps) {
           className="flex items-center hover:opacity-80 transition-opacity cursor-pointer"
           title="홈으로 이동"
         >
-          <img
-            src="/wing_logo_white.svg"
-            alt="WING 해양환경 위기대응"
-            className="h-3.5 wing-logo"
-          />
+          <img src="/wing_logo_white.svg" alt="WING 해양환경 위기대응" className="h-5 wing-logo" />
         </button>
 
         {/* Divider */}
@@ -87,7 +83,7 @@ export function TopBar({ activeTab, onTabChange }: TopBarProps) {
                 onClick={handleClick}
                 title={tab.label}
                 className={`
-                px-2.5 xl:px-4 py-2 text-title-4 font-bold transition-all duration-200
+                px-2.5 xl:px-4 py-2 text-title-2 font-bold transition-all duration-200
                 font-korean tracking-navigation border-b-2 border-transparent
                 ${isIncident ? 'ml-1' : ''}
                 ${isMonitor ? 'ml-1 flex items-center gap-1.5' : ''}
@@ -127,7 +123,7 @@ export function TopBar({ activeTab, onTabChange }: TopBarProps) {
       {/* Right Section */}
       <div className="flex items-center gap-3">
         {/* Status Badge */}
-        {/* <div className="flex items-center gap-2 px-3 py-1.5 bg-[rgba(239,68,68,0.1)] border border-[rgba(239,68,68,0.2)] rounded-sm text-xs font-medium text-color-danger animate-pulse">
+        {/* <div className="flex items-center gap-2 px-3 py-1.5 bg-[rgba(239,68,68,0.1)] border border-[rgba(239,68,68,0.2)] rounded-sm text-caption font-medium text-color-danger animate-pulse">
           <div className="w-1.5 h-1.5 rounded-full bg-color-danger animate-pulse" />
           사고 진행중
         </div> */}
diff --git a/frontend/src/common/components/map/BacktrackReplayBar.tsx b/frontend/src/common/components/map/BacktrackReplayBar.tsx
index 246fa18..dfe63cc 100755
--- a/frontend/src/common/components/map/BacktrackReplayBar.tsx
+++ b/frontend/src/common/components/map/BacktrackReplayBar.tsx
@@ -141,7 +141,7 @@ export function BacktrackReplayBar({
             className="w-2 h-2 rounded-full bg-color-tertiary"
             style={{ boxShadow: '0 0 8px rgba(168,85,247,0.5)' }}
           />
-          <span className="text-xs font-bold">역추적 리플레이</span>
+          <span className="text-caption font-bold">역추적 리플레이</span>
         </div>
 
         <div className="flex items-center gap-1.5">
@@ -180,7 +180,7 @@ export function BacktrackReplayBar({
         {/* Play/Pause */}
         <button
           onClick={handlePlayClick}
-          className="shrink-0 w-9 h-9 rounded-full flex items-center justify-center text-sm cursor-pointer"
+          className="shrink-0 w-9 h-9 rounded-full flex items-center justify-center text-body-2 cursor-pointer"
           style={{
             background: isPlaying ? 'var(--color-tertiary)' : 'rgba(168,85,247,0.15)',
             border: `2px solid ${isPlaying ? 'var(--color-tertiary)' : 'rgba(168,85,247,0.4)'}`,
diff --git a/frontend/src/common/components/map/MapView.tsx b/frontend/src/common/components/map/MapView.tsx
index 9ab297a..02619bf 100755
--- a/frontend/src/common/components/map/MapView.tsx
+++ b/frontend/src/common/components/map/MapView.tsx
@@ -414,7 +414,10 @@ export function MapView({
           longitude: lng,
           latitude: lat,
           content: (
-            <div className="text-xs font-korean" style={{ minWidth: '180px', maxWidth: '260px' }}>
+            <div
+              className="text-caption font-korean"
+              style={{ minWidth: '180px', maxWidth: '260px' }}
+            >
               <div className="font-semibold mb-1.5 pb-1 border-b border-[rgba(0,0,0,0.12)]">
                 {String(category ?? '민감자원')}
               </div>
@@ -535,7 +538,7 @@ export function MapView({
                 longitude: d.lon,
                 latitude: d.lat,
                 content: (
-                  <div className="text-xs">
+                  <div className="text-caption">
                     <strong>
                       {modelKey} 입자 #{(d.particle ?? 0) + 1}
                     </strong>
@@ -604,7 +607,7 @@ export function MapView({
                 longitude: info.coordinate?.[0] ?? 0,
                 latitude: info.coordinate?.[1] ?? 0,
                 content: (
-                  <div className="text-xs" style={{ minWidth: '140px' }}>
+                  <div className="text-caption" style={{ minWidth: '140px' }}>
                     <strong style={{ color: PRIORITY_COLORS[d.priority] }}>{d.name}</strong>
                     <br />
                     우선순위: {PRIORITY_LABELS[d.priority] || d.priority}
@@ -919,7 +922,7 @@ export function MapView({
                 longitude: info.coordinate[0],
                 latitude: info.coordinate[1],
                 content: (
-                  <div className="text-xs leading-relaxed" style={{ minWidth: 180 }}>
+                  <div className="text-caption leading-relaxed" style={{ minWidth: 180 }}>
                     <strong className="text-color-warning">
                       {dispersionResult.substance} 대기확산 면적
                     </strong>
@@ -1009,7 +1012,7 @@ export function MapView({
                 longitude: d.lon,
                 latitude: d.lat,
                 content: (
-                  <div className="text-xs" style={{ minWidth: '130px' }}>
+                  <div className="text-caption" style={{ minWidth: '130px' }}>
                     <div className="flex items-center gap-1 mb-1">
                       <span>{SENSITIVE_ICONS[d.type]}</span>
                       <strong style={{ color: SENSITIVE_COLORS[d.type] }}>{d.name}</strong>
@@ -1458,19 +1461,19 @@ function MapControls({ center, zoom }: { center: [number, number]; zoom: number
       <div className="flex flex-col gap-1">
         <button
           onClick={() => map?.zoomIn()}
-          className="w-[28px] h-[28px] bg-[rgba(18,25,41,0.65)] backdrop-blur-sm border border-[rgba(30,42,66,0.5)] rounded-sm text-fg-sub flex items-center justify-center hover:bg-bg-surface-hover hover:text-fg transition-all text-xs"
+          className="w-[28px] h-[28px] bg-[color-mix(in_srgb,var(--bg-elevated)_85%,transparent)] backdrop-blur-sm border border-stroke rounded-sm text-fg-sub flex items-center justify-center hover:bg-bg-surface-hover hover:text-fg transition-all text-caption"
         >
           +
         </button>
         <button
           onClick={() => map?.zoomOut()}
-          className="w-[28px] h-[28px] bg-[rgba(18,25,41,0.65)] backdrop-blur-sm border border-[rgba(30,42,66,0.5)] rounded-sm text-fg-sub flex items-center justify-center hover:bg-bg-surface-hover hover:text-fg transition-all text-xs"
+          className="w-[28px] h-[28px] bg-[color-mix(in_srgb,var(--bg-elevated)_85%,transparent)] backdrop-blur-sm border border-stroke rounded-sm text-fg-sub flex items-center justify-center hover:bg-bg-surface-hover hover:text-fg transition-all text-caption"
         >
           −
         </button>
         <button
           onClick={() => map?.flyTo({ center: [center[1], center[0]], zoom, duration: 1000 })}
-          className="w-[28px] h-[28px] bg-[rgba(18,25,41,0.65)] backdrop-blur-sm border border-[rgba(30,42,66,0.5)] rounded-sm text-fg-sub flex items-center justify-center hover:text-fg transition-all text-caption"
+          className="w-[28px] h-[28px] bg-[color-mix(in_srgb,var(--bg-elevated)_85%,transparent)] backdrop-blur-sm border border-stroke rounded-sm text-fg-sub flex items-center justify-center hover:text-fg transition-all text-caption"
         >
           &#x1F3AF;
         </button>
@@ -1575,7 +1578,7 @@ function MapLegend({
               className="flex items-center gap-1.5 mt-2 rounded"
               style={{ padding: '6px', background: 'rgba(168,85,247,0.08)' }}
             >
-              <div className="text-xs">🧭</div>
+              <div className="text-caption">🧭</div>
               <span className="text-caption text-fg-disabled">풍향 (방사형)</span>
             </div>
           </div>
@@ -1888,7 +1891,9 @@ function BacktrackReplayBar({
         minWidth: '340px',
       }}
     >
-      <div className="text-sm text-color-tertiary font-mono font-bold">{progress.toFixed(0)}%</div>
+      <div className="text-body-2 text-color-tertiary font-mono font-bold">
+        {progress.toFixed(0)}%
+      </div>
       <div className="flex-1 h-1 bg-border relative rounded-[2px]">
         <div
           className="h-full rounded-[2px]"
diff --git a/frontend/src/common/styles/base.css b/frontend/src/common/styles/base.css
index 127a0a7..b87c5a5 100644
--- a/frontend/src/common/styles/base.css
+++ b/frontend/src/common/styles/base.css
@@ -79,15 +79,15 @@
     --font-size-title-1: 1.125rem;
     --font-size-subtitle: 0.9375rem;
     --font-size-title-2: 1rem;
-    --font-size-title-3: 0.875rem;
-    --font-size-title-4: 0.8125rem;
-    --font-size-title-5: 0.75rem;
-    --font-size-title-6: 0.6875rem;
-    --font-size-body-1: 0.875rem;
-    --font-size-body-2: 0.8125rem;
-    --font-size-label-1: 0.75rem;
-    --font-size-label-2: 0.6875rem;
-    --font-size-caption: 0.6875rem;
+    --font-size-title-3: 1rem;
+    --font-size-title-4: 0.875rem;
+    --font-size-title-5: 0.8125rem;
+    --font-size-title-6: 0.75rem;
+    --font-size-body-1: 1rem;
+    --font-size-body-2: 0.875rem;
+    --font-size-label-1: 0.8125rem;
+    --font-size-label-2: 0.75rem;
+    --font-size-caption: 0.75rem;
     /* typography — font-weight */
     --font-weight-thin: 300;
     --font-weight-regular: 400;
diff --git a/frontend/src/common/styles/components.css b/frontend/src/common/styles/components.css
index f0be483..15aabeb 100644
--- a/frontend/src/common/styles/components.css
+++ b/frontend/src/common/styles/components.css
@@ -45,6 +45,22 @@
     background: transparent;
   }
 
+  /* ═══ Incidents 사고 팝업 ✕ 버튼 — 라이트 지도 기준 검은색 고정 ═══ */
+  .incident-popup .maplibregl-popup-close-button {
+    color: #1a1d21;
+    background: transparent;
+    width: 16px;
+    height: 16px;
+    font-size: 16px;
+    line-height: 16px;
+    top: 6px;
+    right: 6px;
+  }
+  .incident-popup .maplibregl-popup-close-button:hover {
+    color: #000;
+    background: transparent;
+  }
+
   /* ═══ Scrollbar ═══ */
   .scrollbar-thin {
     scrollbar-width: thin;
@@ -78,7 +94,7 @@
     border-radius: 6px;
     color: var(--fg-default);
     font-family: var(--font-korean);
-    font-size: 11px;
+    font-size: 0.75rem;
     outline: none;
   }
 
@@ -103,7 +119,7 @@
 
   .prd-date-input,
   .prd-time-input {
-    font-size: 10px;
+    font-size: 0.75rem;
     color-scheme: dark;
   }
 
@@ -111,7 +127,7 @@
   .prd-time-input::-webkit-datetime-edit {
     color: var(--fg-sub);
     font-family: var(--font-mono);
-    font-size: 10px;
+    font-size: 0.75rem;
     letter-spacing: 0.3px;
   }
 
@@ -191,7 +207,7 @@
     background: #1a1f2e;
     color: var(--fg-default);
     padding: 10px;
-    font-size: 11px;
+    font-size: 0.75rem;
     font-family: var(--font-korean);
   }
 
@@ -278,7 +294,7 @@
 
   .combo-item {
     padding: 7px 10px;
-    font-size: 11px;
+    font-size: 0.75rem;
     font-family: var(--font-korean);
     color: var(--fg-sub);
     cursor: pointer;
@@ -309,7 +325,7 @@
     gap: 4px;
     padding: 5px 4px;
     border-radius: 5px;
-    font-size: 9px;
+    font-size: 0.6875rem;
     font-weight: 600;
     font-family: var(--font-korean);
     cursor: pointer;
@@ -328,7 +344,7 @@
 
   /* .prd-mc.on::before {
     content: '✓ ';
-    font-size: 9px;
+    font-size: 0.6875rem;
     color: var(--color-accent);
   } */
 
@@ -370,7 +386,7 @@
     border: 1px solid rgba(6, 182, 212, 0.2);
     border-radius: 6px;
     color: var(--color-accent);
-    font-size: 9px;
+    font-size: 0.6875rem;
     font-weight: 600;
     cursor: pointer;
     white-space: nowrap;
@@ -551,7 +567,7 @@
   }
 
   .tll {
-    font-size: 10px;
+    font-size: 0.75rem;
     color: var(--fg-disabled);
     font-family: var(--font-mono);
   }
@@ -620,7 +636,7 @@
     border: 1px solid var(--color-boom);
     border-radius: 4px;
     padding: 4px 8px;
-    font-size: 10px;
+    font-size: 0.75rem;
     color: var(--color-boom);
     white-space: nowrap;
     font-family: var(--font-korean);
@@ -671,7 +687,7 @@
     display: flex;
     align-items: center;
     gap: 5px;
-    font-size: 11px;
+    font-size: 0.75rem;
   }
 
   .tlsl {
@@ -699,7 +715,7 @@
     border: 1px solid var(--stroke-default);
     background: var(--bg-card);
     color: var(--fg-sub);
-    font-size: 11px;
+    font-size: 0.75rem;
     font-weight: 600;
     cursor: pointer;
     font-family: var(--font-korean);
@@ -750,7 +766,7 @@
     padding: 6px 8px;
     cursor: pointer;
     transition: background 0.15s;
-    font-size: 11px;
+    font-size: 0.75rem;
     color: var(--fg-sub);
     font-family: var(--font-korean);
   }
@@ -835,7 +851,7 @@
   }
 
   .layer-count {
-    font-size: 10px;
+    font-size: 0.75rem;
     color: var(--fg-disabled);
     font-family: var(--font-mono);
   }
@@ -856,7 +872,7 @@
     border: 1px solid rgba(245, 158, 11, 0.4);
     border-radius: 8px;
     padding: 8px 16px;
-    font-size: 11px;
+    font-size: 0.75rem;
     font-weight: 600;
     color: var(--color-boom);
     font-family: var(--font-korean);
@@ -889,7 +905,7 @@
     border-radius: 4px;
     color: var(--color-accent);
     font-family: var(--font-mono);
-    font-size: 11px;
+    font-size: 0.75rem;
     font-weight: 600;
     text-align: right;
     outline: none;
@@ -926,7 +942,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 11px;
+    font-size: 0.75rem;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
   }
 
@@ -936,7 +952,7 @@
     border: 1px solid var(--stroke-default);
     background: var(--bg-card);
     color: var(--fg-disabled);
-    font-size: 10px;
+    font-size: 0.75rem;
     font-weight: 700;
     cursor: pointer;
     font-family: var(--font-mono);
@@ -1123,7 +1139,7 @@
 
   .lyr-h1-cnt {
     margin-left: auto;
-    font-size: 10px;
+    font-size: 0.75rem;
     font-weight: 500;
     color: var(--fg-disabled);
     font-family: var(--font-mono);
@@ -1152,7 +1168,7 @@
     cursor: pointer;
     border-radius: 3px;
     transition: background 0.15s;
-    font-size: 11px;
+    font-size: 0.75rem;
     font-weight: 600;
     color: var(--fg-sub);
     font-family: var(--font-korean);
@@ -1176,7 +1192,7 @@
 
   .lyr-h2-cnt {
     margin-left: auto;
-    font-size: 10px;
+    font-size: 0.75rem;
     font-weight: 500;
     color: var(--fg-disabled);
     font-family: var(--font-mono);
@@ -1199,7 +1215,7 @@
     gap: 8px;
     padding: 4px 8px;
     cursor: pointer;
-    font-size: 11px;
+    font-size: 0.75rem;
     color: var(--fg-sub);
     transition:
       color 0.15s,
@@ -1215,7 +1231,7 @@
 
   .lyr-cnt {
     margin-left: auto;
-    font-size: 10px;
+    font-size: 0.75rem;
     font-weight: 400;
     color: var(--fg-disabled);
     font-family: var(--font-mono);
@@ -1329,7 +1345,7 @@
   }
 
   .lyr-ccustom label {
-    font-size: 9px;
+    font-size: 0.6875rem;
     color: var(--fg-disabled);
     font-family: var(--font-korean);
   }
@@ -1353,7 +1369,7 @@
     border-radius: var(--radius-sm);
   }
   .lyr-style-label {
-    font-size: 9px;
+    font-size: 0.6875rem;
     font-weight: 700;
     color: var(--fg-disabled);
     font-family: var(--font-korean);
@@ -1370,7 +1386,7 @@
     margin-top: 6px;
   }
   .lyr-style-name {
-    font-size: 10px;
+    font-size: 0.75rem;
     color: var(--fg-disabled);
     font-family: var(--font-korean);
     min-width: 32px;
@@ -1395,7 +1411,7 @@
     cursor: pointer;
   }
   .lyr-style-val {
-    font-size: 9px;
+    font-size: 0.6875rem;
     color: var(--fg-disabled);
     font-family: var(--font-mono);
     min-width: 28px;
diff --git a/frontend/src/common/styles/wing.css b/frontend/src/common/styles/wing.css
index c480347..96e4acd 100644
--- a/frontend/src/common/styles/wing.css
+++ b/frontend/src/common/styles/wing.css
@@ -181,7 +181,7 @@
   }
 
   .wing-tab {
-    @apply flex-1 py-2 px-1 text-xs font-semibold rounded-md text-center cursor-pointer font-korean;
+    @apply flex-1 py-2 px-1 text-caption font-semibold rounded-md text-center cursor-pointer font-korean;
     transition: all 0.15s;
     color: var(--fg-disabled);
     background: transparent;
diff --git a/frontend/src/pages/design/ButtonContent.tsx b/frontend/src/pages/design/ButtonContent.tsx
index 209d3a2..cbc8558 100644
--- a/frontend/src/pages/design/ButtonContent.tsx
+++ b/frontend/src/pages/design/ButtonContent.tsx
@@ -148,7 +148,7 @@ export const ButtonContent = ({ theme }: ButtonContentProps) => {
         {/* ── 섹션 1: 헤더 ── */}
         <div className="pb-10 mb-12 border-b border-solid" style={{ borderColor: dividerColor }}>
           <p
-            className="font-mono text-sm uppercase tracking-widest mb-3"
+            className="font-mono text-body-2 uppercase tracking-widest mb-3"
             style={{ color: t.textAccent }}
           >
             Components
@@ -244,7 +244,7 @@ export const ButtonContent = ({ theme }: ButtonContentProps) => {
                     </span>
                   </div>
                 </div>
-                <span className="text-xs font-mono" style={{ color: t.textMuted }}>
+                <span className="text-caption font-mono" style={{ color: t.textMuted }}>
                   텍스트 + 아이콘 버튼
                 </span>
               </div>
@@ -298,7 +298,7 @@ export const ButtonContent = ({ theme }: ButtonContentProps) => {
                     </span>
                   </div>
                 </div>
-                <span className="text-xs font-mono" style={{ color: t.textMuted }}>
+                <span className="text-caption font-mono" style={{ color: t.textMuted }}>
                   아이콘 전용 버튼
                 </span>
               </div>
@@ -339,7 +339,7 @@ export const ButtonContent = ({ theme }: ButtonContentProps) => {
                   <div key={size.label} className="flex items-center justify-between gap-8">
                     {/* 라벨 */}
                     <span
-                      className="font-mono text-sm w-36 shrink-0"
+                      className="font-mono text-body-2 w-36 shrink-0"
                       style={{ color: t.textSecondary }}
                     >
                       {size.label}
@@ -349,7 +349,7 @@ export const ButtonContent = ({ theme }: ButtonContentProps) => {
                     <div className="flex-1 flex items-center">
                       <button
                         type="button"
-                        className="rounded-md font-semibold text-sm"
+                        className="rounded-md font-semibold text-body-2"
                         style={{
                           height: `${size.heightPx}px`,
                           paddingLeft: `${size.px}px`,
@@ -380,7 +380,10 @@ export const ButtonContent = ({ theme }: ButtonContentProps) => {
               <div className="flex flex-col gap-8">
                 {/* Flexible */}
                 <div className="flex flex-col gap-3">
-                  <span className="font-mono text-sm font-bold" style={{ color: t.textPrimary }}>
+                  <span
+                    className="font-mono text-body-2 font-bold"
+                    style={{ color: t.textPrimary }}
+                  >
                     Flexible
                   </span>
                   <div className="flex items-center gap-4">
@@ -461,7 +464,7 @@ export const ButtonContent = ({ theme }: ButtonContentProps) => {
                         </span>
                       </div>
                     </div>
-                    <span className="font-mono text-xs" style={{ color: t.textSecondary }}>
+                    <span className="font-mono text-caption" style={{ color: t.textSecondary }}>
                       콘텐츠에 맞게 너비가 자동으로 조정됩니다.
                     </span>
                   </div>
@@ -469,7 +472,10 @@ export const ButtonContent = ({ theme }: ButtonContentProps) => {
 
                 {/* Fixed */}
                 <div className="flex flex-col gap-3">
-                  <span className="font-mono text-sm font-bold" style={{ color: t.textPrimary }}>
+                  <span
+                    className="font-mono text-body-2 font-bold"
+                    style={{ color: t.textPrimary }}
+                  >
                     Fixed
                   </span>
                   <div className="flex items-center gap-4">
@@ -511,7 +517,10 @@ export const ButtonContent = ({ theme }: ButtonContentProps) => {
                         <div style={{ height: '1px', flex: 1, backgroundColor: annotationColor }} />
                       </div>
                     </div>
-                    <span className="font-mono text-xs ml-4" style={{ color: t.textSecondary }}>
+                    <span
+                      className="font-mono text-caption ml-4"
+                      style={{ color: t.textSecondary }}
+                    >
                       너비가 고정된 버튼입니다.
                     </span>
                   </div>
@@ -533,7 +542,7 @@ export const ButtonContent = ({ theme }: ButtonContentProps) => {
                   { resolution: '해상도 320', width: '248px', maxWidth: '248px', padding: 16 },
                 ].map((item) => (
                   <div key={item.resolution} className="flex flex-col gap-3">
-                    <span className="font-mono text-sm" style={{ color: t.textSecondary }}>
+                    <span className="font-mono text-body-2" style={{ color: t.textSecondary }}>
                       {item.resolution}
                     </span>
                     <div className="flex items-center gap-6">
@@ -597,7 +606,7 @@ export const ButtonContent = ({ theme }: ButtonContentProps) => {
                   {VARIANTS.map((variant) => (
                     <th
                       key={variant}
-                      className="font-mono text-xs font-semibold text-center pb-4"
+                      className="font-mono text-caption font-semibold text-center pb-4"
                       style={{
                         color: t.textSecondary,
                         padding: '8px 12px',
@@ -615,7 +624,7 @@ export const ButtonContent = ({ theme }: ButtonContentProps) => {
                   <tr key={row.state}>
                     {/* 상태 라벨 */}
                     <td
-                      className="font-mono text-xs font-medium"
+                      className="font-mono text-caption font-medium"
                       style={{
                         color: t.textSecondary,
                         padding: rowIdx === 0 ? '8px 12px 8px 0' : '8px 12px 8px 0',
diff --git a/frontend/src/pages/design/ColorPaletteContent.tsx b/frontend/src/pages/design/ColorPaletteContent.tsx
index c99a2fe..0243f47 100644
--- a/frontend/src/pages/design/ColorPaletteContent.tsx
+++ b/frontend/src/pages/design/ColorPaletteContent.tsx
@@ -347,7 +347,7 @@ const TransparencyRow = ({
 
   return (
     <div className="flex flex-col gap-2">
-      <span className="font-bold text-sm" style={{ color: isDark ? '#dfe2f3' : '#0f172a' }}>
+      <span className="font-bold text-body-2" style={{ color: isDark ? '#dfe2f3' : '#0f172a' }}>
         {label}
       </span>
       <div className="rounded-xl p-4" style={{ backgroundColor: sectionCardBg }}>
@@ -453,7 +453,7 @@ export const ColorPaletteContent = ({ theme }: ColorPaletteContentProps) => {
         {/* ── 섹션 1: 헤더 ── */}
         <div className="pb-10 mb-12 border-b border-solid" style={{ borderColor: dividerColor }}>
           <p
-            className="font-mono text-sm uppercase tracking-widest mb-3"
+            className="font-mono text-body-2 uppercase tracking-widest mb-3"
             style={{ color: t.textAccent }}
           >
             Foundations
@@ -476,7 +476,7 @@ export const ColorPaletteContent = ({ theme }: ColorPaletteContentProps) => {
               <button
                 key={tab}
                 onClick={() => setActiveColorTab(tab)}
-                className="px-5 py-2.5 text-sm font-semibold border-none cursor-pointer bg-transparent"
+                className="px-5 py-2.5 text-body-2 font-semibold border-none cursor-pointer bg-transparent"
                 style={{
                   color: isActive ? t.textAccent : t.textMuted,
                   borderBottom: isActive ? `2px solid ${t.textAccent}` : '2px solid transparent',
@@ -505,7 +505,7 @@ export const ColorPaletteContent = ({ theme }: ColorPaletteContentProps) => {
               >
                 --{'{property}'}-{'{role}'}[-{'{variant}'}]
               </div>
-              <p className="text-sm leading-relaxed" style={{ color: t.textSecondary }}>
+              <p className="text-body-2 leading-relaxed" style={{ color: t.textSecondary }}>
                 모든 컬러 토큰은{' '}
                 <strong style={{ color: t.textPrimary }}>Property-Role-Variant</strong> 3계층 구조를
                 따릅니다. Property는 색상이 적용되는 CSS 속성, Role은 의미 기반 역할, Variant는 상태
@@ -551,17 +551,17 @@ export const ColorPaletteContent = ({ theme }: ColorPaletteContentProps) => {
                     }}
                   >
                     <span
-                      className="font-mono text-sm font-bold shrink-0 w-16"
+                      className="font-mono text-body-2 font-bold shrink-0 w-16"
                       style={{ color: t.textAccent }}
                     >
                       {row.prop}
                     </span>
                     <div className="flex-1">
-                      <div className="text-sm" style={{ color: t.textSecondary }}>
+                      <div className="text-body-2" style={{ color: t.textSecondary }}>
                         {row.desc}
                       </div>
                     </div>
-                    <span className="font-mono text-xs" style={{ color: t.textMuted }}>
+                    <span className="font-mono text-caption" style={{ color: t.textMuted }}>
                       {row.example}
                     </span>
                   </div>
@@ -581,7 +581,7 @@ export const ColorPaletteContent = ({ theme }: ColorPaletteContentProps) => {
                   style={{ border: `1px solid ${dividerColor}` }}
                 >
                   <div
-                    className="px-5 py-3 text-xs font-bold uppercase tracking-wider"
+                    className="px-5 py-3 text-caption font-bold uppercase tracking-wider"
                     style={{
                       backgroundColor: isDark ? 'rgba(255,255,255,0.04)' : '#f1f5f9',
                       color: t.textMuted,
@@ -608,12 +608,12 @@ export const ColorPaletteContent = ({ theme }: ColorPaletteContentProps) => {
                       }}
                     >
                       <span
-                        className="font-mono text-sm font-semibold"
+                        className="font-mono text-body-2 font-semibold"
                         style={{ color: t.textPrimary }}
                       >
                         {row.name}
                       </span>
-                      <span className="text-xs" style={{ color: t.textMuted }}>
+                      <span className="text-caption" style={{ color: t.textMuted }}>
                         {row.desc}
                       </span>
                     </div>
@@ -626,7 +626,7 @@ export const ColorPaletteContent = ({ theme }: ColorPaletteContentProps) => {
                   style={{ border: `1px solid ${dividerColor}` }}
                 >
                   <div
-                    className="px-5 py-3 text-xs font-bold uppercase tracking-wider"
+                    className="px-5 py-3 text-caption font-bold uppercase tracking-wider"
                     style={{
                       backgroundColor: isDark ? 'rgba(255,255,255,0.04)' : '#f1f5f9',
                       color: t.textMuted,
@@ -650,12 +650,12 @@ export const ColorPaletteContent = ({ theme }: ColorPaletteContentProps) => {
                       }}
                     >
                       <span
-                        className="font-mono text-sm font-semibold"
+                        className="font-mono text-body-2 font-semibold"
                         style={{ color: t.textPrimary }}
                       >
                         {row.name}
                       </span>
-                      <span className="text-xs" style={{ color: t.textMuted }}>
+                      <span className="text-caption" style={{ color: t.textMuted }}>
                         {row.desc}
                       </span>
                     </div>
@@ -672,7 +672,7 @@ export const ColorPaletteContent = ({ theme }: ColorPaletteContentProps) => {
               <h2 className="text-xl font-bold mb-2" style={{ color: t.textPrimary }}>
                 Semantic Tokens
               </h2>
-              <p className="text-sm mb-6" style={{ color: t.textSecondary }}>
+              <p className="text-body-2 mb-6" style={{ color: t.textSecondary }}>
                 용도에 따라 의미를 부여한 토큰. 테마 전환 시 값이 변경됩니다.
               </p>
 
@@ -745,7 +745,7 @@ export const ColorPaletteContent = ({ theme }: ColorPaletteContentProps) => {
                 },
               ].map((group) => (
                 <div key={group.title} className="mb-8">
-                  <h3 className="text-sm font-bold mb-3" style={{ color: t.textAccent }}>
+                  <h3 className="text-body-2 font-bold mb-3" style={{ color: t.textAccent }}>
                     {group.title}
                   </h3>
                   <div
@@ -754,7 +754,7 @@ export const ColorPaletteContent = ({ theme }: ColorPaletteContentProps) => {
                   >
                     {/* 헤더 */}
                     <div
-                      className="grid grid-cols-[80px_1fr_1fr_80px_1fr] gap-2 px-4 py-2.5 text-xs font-bold uppercase tracking-wider"
+                      className="grid grid-cols-[80px_1fr_1fr_80px_1fr] gap-2 px-4 py-2.5 text-caption font-bold uppercase tracking-wider"
                       style={{
                         backgroundColor: isDark ? 'rgba(255,255,255,0.04)' : '#f1f5f9',
                         color: t.textMuted,
@@ -776,21 +776,21 @@ export const ColorPaletteContent = ({ theme }: ColorPaletteContentProps) => {
                         }}
                       >
                         <span
-                          className="font-mono text-xs line-through"
+                          className="font-mono text-caption line-through"
                           style={{ color: t.textMuted }}
                         >
                           {tk.legacy}
                         </span>
                         <span
-                          className="font-mono text-xs font-semibold"
+                          className="font-mono text-caption font-semibold"
                           style={{ color: t.textPrimary }}
                         >
                           {tk.name}
                         </span>
-                        <span className="text-xs" style={{ color: t.textMuted }}>
+                        <span className="text-caption" style={{ color: t.textMuted }}>
                           {tk.desc}
                         </span>
-                        <span className="font-mono text-xs" style={{ color: t.textSecondary }}>
+                        <span className="font-mono text-caption" style={{ color: t.textSecondary }}>
                           {tk.value}
                         </span>
                         <div className="flex items-center gap-2">
@@ -804,7 +804,7 @@ export const ColorPaletteContent = ({ theme }: ColorPaletteContentProps) => {
                               flexShrink: 0,
                             }}
                           />
-                          <span className="font-mono text-xs" style={{ color: t.textMuted }}>
+                          <span className="font-mono text-caption" style={{ color: t.textMuted }}>
                             {hexToRgb(tk.value)}
                           </span>
                         </div>
@@ -823,7 +823,7 @@ export const ColorPaletteContent = ({ theme }: ColorPaletteContentProps) => {
               <h2 className="text-xl font-bold mb-2" style={{ color: t.textPrimary }}>
                 Palette Tokens
               </h2>
-              <p className="text-sm mb-6" style={{ color: t.textSecondary }}>
+              <p className="text-body-2 mb-6" style={{ color: t.textSecondary }}>
                 fg · bg · stroke 모든 맥락에서 사용되는 색상 원본. Property 접두사 없이{' '}
                 <code className="font-mono" style={{ color: t.textAccent }}>
                   --color-*
@@ -836,7 +836,7 @@ export const ColorPaletteContent = ({ theme }: ColorPaletteContentProps) => {
                 style={{ border: `1px solid ${dividerColor}` }}
               >
                 <div
-                  className="grid grid-cols-[80px_1fr_80px_1fr_1fr] gap-2 px-4 py-2.5 text-xs font-bold uppercase tracking-wider"
+                  className="grid grid-cols-[80px_1fr_80px_1fr_1fr] gap-2 px-4 py-2.5 text-caption font-bold uppercase tracking-wider"
                   style={{
                     backgroundColor: isDark ? 'rgba(255,255,255,0.04)' : '#f1f5f9',
                     color: t.textMuted,
@@ -882,16 +882,19 @@ export const ColorPaletteContent = ({ theme }: ColorPaletteContentProps) => {
                       backgroundColor: isDark ? 'rgba(255,255,255,0.02)' : '#fafafa',
                     }}
                   >
-                    <span className="font-mono text-xs line-through" style={{ color: t.textMuted }}>
+                    <span
+                      className="font-mono text-caption line-through"
+                      style={{ color: t.textMuted }}
+                    >
                       {tk.legacy}
                     </span>
                     <span
-                      className="font-mono text-xs font-semibold"
+                      className="font-mono text-caption font-semibold"
                       style={{ color: t.textPrimary }}
                     >
                       {tk.name}
                     </span>
-                    <span className="font-mono text-xs" style={{ color: t.textSecondary }}>
+                    <span className="font-mono text-caption" style={{ color: t.textSecondary }}>
                       {tk.value}
                     </span>
                     <div className="flex items-center gap-2">
@@ -905,11 +908,11 @@ export const ColorPaletteContent = ({ theme }: ColorPaletteContentProps) => {
                           flexShrink: 0,
                         }}
                       />
-                      <span className="font-mono text-xs" style={{ color: t.textMuted }}>
+                      <span className="font-mono text-caption" style={{ color: t.textMuted }}>
                         {hexToRgb(tk.value)}
                       </span>
                     </div>
-                    <span className="text-xs" style={{ color: t.textMuted }}>
+                    <span className="text-caption" style={{ color: t.textMuted }}>
                       {tk.desc}
                     </span>
                   </div>
@@ -925,7 +928,7 @@ export const ColorPaletteContent = ({ theme }: ColorPaletteContentProps) => {
               <h2 className="text-xl font-bold mb-2" style={{ color: t.textPrimary }}>
                 Non-color Tokens
               </h2>
-              <p className="text-sm mb-6" style={{ color: t.textSecondary }}>
+              <p className="text-body-2 mb-6" style={{ color: t.textSecondary }}>
                 타이포그래피, 라운딩 등 색상 외 토큰.
               </p>
 
@@ -934,7 +937,7 @@ export const ColorPaletteContent = ({ theme }: ColorPaletteContentProps) => {
                 style={{ border: `1px solid ${dividerColor}` }}
               >
                 <div
-                  className="grid grid-cols-[80px_1fr_1fr_1fr] gap-2 px-4 py-2.5 text-xs font-bold uppercase tracking-wider"
+                  className="grid grid-cols-[80px_1fr_1fr_1fr] gap-2 px-4 py-2.5 text-caption font-bold uppercase tracking-wider"
                   style={{
                     backgroundColor: isDark ? 'rgba(255,255,255,0.04)' : '#f1f5f9',
                     color: t.textMuted,
@@ -979,17 +982,20 @@ export const ColorPaletteContent = ({ theme }: ColorPaletteContentProps) => {
                       backgroundColor: isDark ? 'rgba(255,255,255,0.02)' : '#fafafa',
                     }}
                   >
-                    <span className="font-mono text-xs line-through" style={{ color: t.textMuted }}>
+                    <span
+                      className="font-mono text-caption line-through"
+                      style={{ color: t.textMuted }}
+                    >
                       {tk.legacy}
                     </span>
                     <span
-                      className="font-mono text-xs font-semibold"
+                      className="font-mono text-caption font-semibold"
                       style={{ color: t.textPrimary }}
                     >
                       {tk.name}
                     </span>
                     <span
-                      className="text-xs font-mono px-2 py-0.5 rounded"
+                      className="text-caption font-mono px-2 py-0.5 rounded"
                       style={{
                         color: t.textAccent,
                         backgroundColor: isDark ? 'rgba(6,182,212,0.05)' : 'rgba(6,182,212,0.08)',
@@ -997,7 +1003,7 @@ export const ColorPaletteContent = ({ theme }: ColorPaletteContentProps) => {
                     >
                       {tk.category}
                     </span>
-                    <span className="text-xs" style={{ color: t.textMuted }}>
+                    <span className="text-caption" style={{ color: t.textMuted }}>
                       {tk.desc}
                     </span>
                   </div>
@@ -1015,7 +1021,7 @@ export const ColorPaletteContent = ({ theme }: ColorPaletteContentProps) => {
               <h2 className="text-xl font-bold mb-3" style={{ color: t.textPrimary }}>
                 프라이머리 색상(primary color)
               </h2>
-              <p className="mb-8 text-sm" style={{ color: t.textSecondary }}>
+              <p className="mb-8 text-body-2" style={{ color: t.textSecondary }}>
                 Primary 색상은 해양 방제 시스템의 핵심 인터랙션 요소에 사용됩니다. Cyan~Blue
                 그라디언트가 주요 액션 버튼과 강조 요소에 적용됩니다.
               </p>
@@ -1023,7 +1029,7 @@ export const ColorPaletteContent = ({ theme }: ColorPaletteContentProps) => {
               <div className="flex flex-col gap-6">
                 {/* Light Mode */}
                 <div className="rounded-xl p-6" style={{ backgroundColor: '#f5f5f5' }}>
-                  <p className="font-bold text-sm mb-4" style={{ color: '#1e293b' }}>
+                  <p className="font-bold text-body-2 mb-4" style={{ color: '#1e293b' }}>
                     Light Mode
                   </p>
                   <ColorScaleBar
@@ -1041,7 +1047,7 @@ export const ColorPaletteContent = ({ theme }: ColorPaletteContentProps) => {
 
                 {/* Dark Mode */}
                 <div className="rounded-xl p-6" style={{ backgroundColor: '#1a1a2e' }}>
-                  <p className="font-bold text-sm mb-4" style={{ color: '#fff' }}>
+                  <p className="font-bold text-body-2 mb-4" style={{ color: '#fff' }}>
                     Dark Mode
                   </p>
                   <ColorScaleBar
@@ -1067,7 +1073,7 @@ export const ColorPaletteContent = ({ theme }: ColorPaletteContentProps) => {
               <h2 className="text-xl font-bold mb-3" style={{ color: t.textPrimary }}>
                 세컨더리 색상(secondary color)
               </h2>
-              <p className="mb-8 text-sm" style={{ color: t.textSecondary }}>
+              <p className="mb-8 text-body-2" style={{ color: t.textSecondary }}>
                 Secondary 색상은 UI의 배경과 구조적 요소에 사용됩니다. Navy 계열로 다크 모드의
                 깊이감과 계층 구조를 표현합니다.
               </p>
@@ -1075,7 +1081,7 @@ export const ColorPaletteContent = ({ theme }: ColorPaletteContentProps) => {
               <div className="flex flex-col gap-6">
                 {/* Light Mode */}
                 <div className="rounded-xl p-6" style={{ backgroundColor: '#f5f5f5' }}>
-                  <p className="font-bold text-sm mb-4" style={{ color: '#1e293b' }}>
+                  <p className="font-bold text-body-2 mb-4" style={{ color: '#1e293b' }}>
                     Light Mode
                   </p>
                   <ColorScaleBar
@@ -1093,7 +1099,7 @@ export const ColorPaletteContent = ({ theme }: ColorPaletteContentProps) => {
 
                 {/* Dark Mode */}
                 <div className="rounded-xl p-6" style={{ backgroundColor: '#1a1a2e' }}>
-                  <p className="font-bold text-sm mb-4" style={{ color: '#fff' }}>
+                  <p className="font-bold text-body-2 mb-4" style={{ color: '#fff' }}>
                     Dark Mode
                   </p>
                   <ColorScaleBar
@@ -1119,11 +1125,11 @@ export const ColorPaletteContent = ({ theme }: ColorPaletteContentProps) => {
               <h2 className="text-xl font-bold mb-3" style={{ color: t.textPrimary }}>
                 그레이 색상(gray color) / 네추럴, 중립 색상
               </h2>
-              <p className="mb-2 text-sm" style={{ color: t.textSecondary }}>
+              <p className="mb-2 text-body-2" style={{ color: t.textSecondary }}>
                 Gray 색상은 주로 배경, 텍스트, 구분 선에 사용되며, 시각적 집중을 방해하지 않고
                 콘텐츠에 초점을 맞추도록 도와주는 중립적인 색상이다.
               </p>
-              <p className="mb-8 text-sm" style={{ color: t.textSecondary }}>
+              <p className="mb-8 text-body-2" style={{ color: t.textSecondary }}>
                 표준형 스타일의 그레이 색상은 주요 색상과 선명한 모드에서의 조화를 고려해 블루
                 그레이 계열을 사용한다.
               </p>
@@ -1141,7 +1147,7 @@ export const ColorPaletteContent = ({ theme }: ColorPaletteContentProps) => {
               <h2 className="text-2xl font-bold mb-2" style={{ color: t.textPrimary }}>
                 Transparent
               </h2>
-              <p className="mb-8 text-sm" style={{ color: t.textSecondary }}>
+              <p className="mb-8 text-body-2" style={{ color: t.textSecondary }}>
                 투명도와 음영을 활용하여 정보의 집중도를 조절합니다. 배경의 음영 처리는 투명도 65%를
                 사용합니다.
               </p>
@@ -1174,12 +1180,12 @@ export const ColorPaletteContent = ({ theme }: ColorPaletteContentProps) => {
           <div className="mb-16">
             <div className="mb-6">
               <p
-                className="font-mono text-sm uppercase tracking-widest mb-1"
+                className="font-mono text-body-2 uppercase tracking-widest mb-1"
                 style={{ color: t.textAccent }}
               >
                 Primitive
               </p>
-              <p className="text-sm" style={{ color: t.textMuted }}>
+              <p className="text-body-2" style={{ color: t.textMuted }}>
                 UI 전반에서 사용하는 기본 색조 팔레트. 테마와 무관하게 고정된 값입니다.
               </p>
             </div>
@@ -1214,17 +1220,17 @@ export const ColorPaletteContent = ({ theme }: ColorPaletteContentProps) => {
                       />
                       {/* 토큰명 */}
                       <span
-                        className="font-mono text-sm font-semibold ml-4"
+                        className="font-mono text-body-2 font-semibold ml-4"
                         style={{ color: t.textPrimary }}
                       >
                         {token.name}
                       </span>
                       {/* HEX + RGB */}
                       <div className="ml-auto text-right">
-                        <div className="font-mono text-sm" style={{ color: t.textPrimary }}>
+                        <div className="font-mono text-body-2" style={{ color: t.textPrimary }}>
                           {token.hex}
                         </div>
-                        <div className="font-mono text-xs" style={{ color: t.textMuted }}>
+                        <div className="font-mono text-caption" style={{ color: t.textMuted }}>
                           {hexToRgb(token.hex)}
                         </div>
                       </div>
diff --git a/frontend/src/pages/design/ComponentsContent.tsx b/frontend/src/pages/design/ComponentsContent.tsx
index 663231e..efa2d6c 100644
--- a/frontend/src/pages/design/ComponentsContent.tsx
+++ b/frontend/src/pages/design/ComponentsContent.tsx
@@ -13,7 +13,7 @@ export const ComponentsContent = () => {
         >
           시스템 컴포넌트 카탈로그
         </h1>
-        <p className="text-[#bcc9cd] font-korean text-sm leading-5 font-medium max-w-2xl">
+        <p className="text-[#bcc9cd] font-korean text-body-2 leading-5 font-medium max-w-2xl">
           WING-OPS 해상 물류를 위한 시각적 아이덴티티 시스템입니다. 정밀도와 미션 크리티컬한 운영을
           위해 설계된 고밀도 산업용 인터페이스입니다.
         </p>
diff --git a/frontend/src/pages/design/ComponentsOverview.tsx b/frontend/src/pages/design/ComponentsOverview.tsx
index 731664a..ce1a119 100644
--- a/frontend/src/pages/design/ComponentsOverview.tsx
+++ b/frontend/src/pages/design/ComponentsOverview.tsx
@@ -256,7 +256,7 @@ const ComponentsOverview = ({ theme, onNavigate }: ComponentsOverviewProps) => {
       {/* ── 헤더 영역 ── */}
       <div className="flex flex-col gap-3">
         <span
-          className="font-mono text-xs font-semibold uppercase"
+          className="font-mono text-caption font-semibold uppercase"
           style={{ letterSpacing: '1.4px', color: t.textAccent }}
         >
           Components
@@ -264,7 +264,7 @@ const ComponentsOverview = ({ theme, onNavigate }: ComponentsOverviewProps) => {
         <h1 className="font-sans text-4xl font-bold leading-tight" style={{ color: t.textPrimary }}>
           Overview
         </h1>
-        <p className="font-korean text-sm leading-6" style={{ color: t.textSecondary }}>
+        <p className="font-korean text-body-2 leading-6" style={{ color: t.textSecondary }}>
           재사용 가능한 UI 컴포넌트 카탈로그입니다.
         </p>
       </div>
@@ -307,7 +307,10 @@ const ComponentsOverview = ({ theme, onNavigate }: ComponentsOverviewProps) => {
 
             {/* 카드 라벨 */}
             <div className="px-5 py-4">
-              <span className="font-sans text-sm font-semibold" style={{ color: t.textPrimary }}>
+              <span
+                className="font-sans text-body-2 font-semibold"
+                style={{ color: t.textPrimary }}
+              >
                 {card.label}
               </span>
             </div>
diff --git a/frontend/src/pages/design/DesignContent.tsx b/frontend/src/pages/design/DesignContent.tsx
index 69c9b36..007c8a8 100644
--- a/frontend/src/pages/design/DesignContent.tsx
+++ b/frontend/src/pages/design/DesignContent.tsx
@@ -154,7 +154,7 @@ export const DesignContent = ({ theme }: DesignContentProps) => {
             style={{ backgroundColor: t.textAccent, boxShadow: t.systemActiveShadow }}
           />
           <span
-            className="font-mono text-xs leading-4 uppercase"
+            className="font-mono text-caption leading-4 uppercase"
             style={{ letterSpacing: '1.2px', color: t.textAccent }}
           >
             System Active
@@ -192,11 +192,14 @@ export const DesignContent = ({ theme }: DesignContentProps) => {
                 />
                 {/* 정보 */}
                 <div className="flex flex-col gap-1">
-                  <span className="font-mono text-xs leading-4" style={{ color: t.textAccent }}>
+                  <span
+                    className="font-mono text-caption leading-4"
+                    style={{ color: t.textAccent }}
+                  >
                     {item.token}
                   </span>
                   <span
-                    className="font-korean text-sm leading-5 font-bold"
+                    className="font-korean text-body-2 leading-5 font-bold"
                     style={{ color: t.textPrimary }}
                   >
                     {item.hex}
@@ -233,7 +236,7 @@ export const DesignContent = ({ theme }: DesignContentProps) => {
                     {item.token}
                   </span>
                   <span
-                    className="font-korean text-sm font-bold pb-2"
+                    className="font-korean text-body-2 font-bold pb-2"
                     style={{ color: t.textPrimary }}
                   >
                     {item.hex}
@@ -263,7 +266,7 @@ export const DesignContent = ({ theme }: DesignContentProps) => {
                     {item.token}
                   </span>
                   <span className={item.sampleClass}>{item.sampleText}</span>
-                  <span className="font-korean text-xs" style={{ color: item.descColor }}>
+                  <span className="font-korean text-caption" style={{ color: item.descColor }}>
                     {item.desc}
                   </span>
                 </div>
@@ -297,7 +300,7 @@ export const DesignContent = ({ theme }: DesignContentProps) => {
                   />
                   <div className="flex flex-col gap-1">
                     <span
-                      className="font-korean text-sm font-bold"
+                      className="font-korean text-body-2 font-bold"
                       style={{ color: t.textPrimary }}
                     >
                       {item.name}
@@ -435,7 +438,7 @@ export const DesignContent = ({ theme }: DesignContentProps) => {
           <div className="grid grid-cols-2 gap-8">
             {/* radius-sm */}
             <div className="flex flex-col gap-2">
-              <span className="font-mono text-xs leading-4" style={{ color: t.textMuted }}>
+              <span className="font-mono text-caption leading-4" style={{ color: t.textMuted }}>
                 {t.radiusSmLabel}
               </span>
               <div
@@ -453,7 +456,7 @@ export const DesignContent = ({ theme }: DesignContentProps) => {
                   Small Elements
                 </span>
                 <p
-                  className="font-korean text-xs leading-[19.5px] mt-1"
+                  className="font-korean text-caption leading-[19.5px] mt-1"
                   style={{ color: t.radiusDescText }}
                 >
                   Applied to tactical buttons, search inputs, and micro-cards for a precise, sharp
@@ -463,7 +466,7 @@ export const DesignContent = ({ theme }: DesignContentProps) => {
             </div>
             {/* radius-md */}
             <div className="flex flex-col gap-2">
-              <span className="font-mono text-xs leading-4" style={{ color: t.textMuted }}>
+              <span className="font-mono text-caption leading-4" style={{ color: t.textMuted }}>
                 {t.radiusMdLabel}
               </span>
               <div
@@ -481,7 +484,7 @@ export const DesignContent = ({ theme }: DesignContentProps) => {
                   Structural Panels
                 </span>
                 <p
-                  className="font-korean text-xs leading-[19.5px] mt-1"
+                  className="font-korean text-caption leading-[19.5px] mt-1"
                   style={{ color: t.radiusDescText }}
                 >
                   Applied to telemetry cards, floating modals, and primary operational panels to
diff --git a/frontend/src/pages/design/FloatContent.tsx b/frontend/src/pages/design/FloatContent.tsx
index 020fac6..bfca117 100644
--- a/frontend/src/pages/design/FloatContent.tsx
+++ b/frontend/src/pages/design/FloatContent.tsx
@@ -50,7 +50,10 @@ export const FloatContent = ({ theme }: FloatContentProps) => {
             <h1 className="font-sans text-2xl leading-8 font-bold" style={{ color: t.textPrimary }}>
               Float
             </h1>
-            <p className="font-korean text-sm leading-5 mt-1" style={{ color: t.textSecondary }}>
+            <p
+              className="font-korean text-body-2 leading-5 mt-1"
+              style={{ color: t.textSecondary }}
+            >
               화면 위에 떠서 표시되는 UI 패턴 카탈로그 — Modal, Dropdown, Overlay, Toast
             </p>
           </div>
@@ -70,7 +73,7 @@ export const FloatContent = ({ theme }: FloatContentProps) => {
                   }}
                 >
                   <span
-                    className="font-sans text-sm font-bold leading-5"
+                    className="font-sans text-body-2 font-bold leading-5"
                     style={{ color: isActive ? t.textAccent : t.textMuted }}
                   >
                     {label}
diff --git a/frontend/src/pages/design/FoundationsOverview.tsx b/frontend/src/pages/design/FoundationsOverview.tsx
index 1837f0b..ef03049 100644
--- a/frontend/src/pages/design/FoundationsOverview.tsx
+++ b/frontend/src/pages/design/FoundationsOverview.tsx
@@ -174,7 +174,7 @@ const FoundationsOverview = ({ theme, onNavigate }: FoundationsOverviewProps) =>
       {/* ── 헤더 영역 ── */}
       <div className="flex flex-col gap-3">
         <span
-          className="font-mono text-xs font-semibold uppercase"
+          className="font-mono text-caption font-semibold uppercase"
           style={{ letterSpacing: '1.4px', color: t.textAccent }}
         >
           Foundations
@@ -182,7 +182,7 @@ const FoundationsOverview = ({ theme, onNavigate }: FoundationsOverviewProps) =>
         <h1 className="font-sans text-4xl font-bold leading-tight" style={{ color: t.textPrimary }}>
           Overview
         </h1>
-        <p className="font-korean text-sm leading-6" style={{ color: t.textSecondary }}>
+        <p className="font-korean text-body-2 leading-6" style={{ color: t.textSecondary }}>
           디자인의 기반이 되는 핵심 요소 사용 기준입니다.
         </p>
       </div>
@@ -225,7 +225,10 @@ const FoundationsOverview = ({ theme, onNavigate }: FoundationsOverviewProps) =>
 
             {/* 카드 라벨 */}
             <div className="px-5 py-4">
-              <span className="font-sans text-sm font-semibold" style={{ color: t.textPrimary }}>
+              <span
+                className="font-sans text-body-2 font-semibold"
+                style={{ color: t.textPrimary }}
+              >
                 {card.label}
               </span>
             </div>
diff --git a/frontend/src/pages/design/LayoutContent.tsx b/frontend/src/pages/design/LayoutContent.tsx
index 82035d8..0a180f1 100644
--- a/frontend/src/pages/design/LayoutContent.tsx
+++ b/frontend/src/pages/design/LayoutContent.tsx
@@ -324,7 +324,7 @@ export const LayoutContent = ({ theme }: LayoutContentProps) => {
           <h1 className="font-sans text-3xl leading-9 font-bold" style={{ color: t.textPrimary }}>
             Layout
           </h1>
-          <p className="font-korean text-sm leading-6" style={{ color: t.textSecondary }}>
+          <p className="font-korean text-body-2 leading-6" style={{ color: t.textSecondary }}>
             WING-OPS는 데스크톱 전용 고정 뷰포트 애플리케이션입니다. 화면 전체를 채우는 고정
             레이아웃(100vh)으로, flex 기반의 패널 구조를 사용합니다. KRDS 가이드라인을 기반으로
             xlarge / xxlarge 구간에 최적화되어 있습니다.
@@ -364,7 +364,7 @@ export const LayoutContent = ({ theme }: LayoutContentProps) => {
           <h2 className="font-sans text-2xl leading-8 font-bold" style={{ color: t.textPrimary }}>
             Breakpoint
           </h2>
-          <p className="font-korean text-sm leading-5" style={{ color: t.textSecondary }}>
+          <p className="font-korean text-body-2 leading-5" style={{ color: t.textSecondary }}>
             화면 크기에 따라 반응형 레이아웃을 사용하여 환경에 최적화된 구조로 표시됩니다. WING-OPS
             사용 구간(xl, 2xl)은 cyan으로 강조되어 있습니다.
           </p>
@@ -499,7 +499,7 @@ export const LayoutContent = ({ theme }: LayoutContentProps) => {
                   borderColor: isDark ? 'rgba(76,215,246,0.45)' : 'rgba(6,182,212,0.40)',
                 }}
               />
-              <span className="font-korean text-xs" style={{ color: t.textSecondary }}>
+              <span className="font-korean text-caption" style={{ color: t.textSecondary }}>
                 WING-OPS 사용 중
               </span>
             </div>
@@ -511,7 +511,7 @@ export const LayoutContent = ({ theme }: LayoutContentProps) => {
                   borderColor: isDark ? 'rgba(140,144,159,0.25)' : 'rgba(148,163,184,0.30)',
                 }}
               />
-              <span className="font-korean text-xs" style={{ color: t.textSecondary }}>
+              <span className="font-korean text-caption" style={{ color: t.textSecondary }}>
                 미지원 (1280px 미만)
               </span>
             </div>
@@ -525,7 +525,7 @@ export const LayoutContent = ({ theme }: LayoutContentProps) => {
           <h2 className="font-sans text-2xl leading-8 font-bold" style={{ color: t.textPrimary }}>
             Grid
           </h2>
-          <p className="font-korean text-sm leading-5" style={{ color: t.textSecondary }}>
+          <p className="font-korean text-body-2 leading-5" style={{ color: t.textSecondary }}>
             컬럼, 마진, 거터로 구성된 그리드 시스템입니다. 데스크톱 전용으로 xl / 2xl 두 구간만
             지원합니다.
           </p>
@@ -548,7 +548,7 @@ export const LayoutContent = ({ theme }: LayoutContentProps) => {
                 style={{ borderColor: isDark ? 'rgba(66,71,84,0.20)' : '#e2e8f0' }}
               >
                 <div className="flex items-center gap-2">
-                  <span className="font-korean text-xs" style={{ color: t.textMuted }}>
+                  <span className="font-korean text-caption" style={{ color: t.textMuted }}>
                     Breakpoint
                   </span>
                   <span
@@ -562,10 +562,10 @@ export const LayoutContent = ({ theme }: LayoutContentProps) => {
                   </span>
                 </div>
                 <div className="flex items-center gap-2">
-                  <span className="font-korean text-xs" style={{ color: t.textMuted }}>
+                  <span className="font-korean text-caption" style={{ color: t.textMuted }}>
                     Width
                   </span>
-                  <span className="font-mono text-sm" style={{ color: t.textPrimary }}>
+                  <span className="font-mono text-body-2" style={{ color: t.textPrimary }}>
                     {spec.width}
                   </span>
                 </div>
@@ -683,7 +683,7 @@ export const LayoutContent = ({ theme }: LayoutContentProps) => {
           <span className="font-mono text-base" style={{ color: '#f97316' }}>
             ⚠
           </span>
-          <span className="font-korean text-xs" style={{ color: t.textSecondary }}>
+          <span className="font-korean text-caption" style={{ color: t.textSecondary }}>
             <strong style={{ color: '#f97316' }}>1280px 미만 미지원</strong> — Mobile / Tablet
             구간(xs / s / md / lg)은 데스크톱 전용 운영 정책에 따라 지원하지 않습니다.
           </span>
@@ -696,7 +696,7 @@ export const LayoutContent = ({ theme }: LayoutContentProps) => {
           <h2 className="font-sans text-2xl leading-8 font-bold" style={{ color: t.textPrimary }}>
             App Shell
           </h2>
-          <p className="font-korean text-sm leading-5" style={{ color: t.textSecondary }}>
+          <p className="font-korean text-body-2 leading-5" style={{ color: t.textSecondary }}>
             WING-OPS 애플리케이션의 기본 레이아웃 구조와 KRDS Sub-page 영역 매핑입니다.
           </p>
         </div>
@@ -720,7 +720,7 @@ export const LayoutContent = ({ theme }: LayoutContentProps) => {
             }}
           >
             <div className="flex items-center gap-3">
-              <span className="font-mono text-sm font-bold" style={{ color: '#3b82f6' }}>
+              <span className="font-mono text-body-2 font-bold" style={{ color: '#3b82f6' }}>
                 TopBar
               </span>
               <span
@@ -932,7 +932,7 @@ export const LayoutContent = ({ theme }: LayoutContentProps) => {
           <h2 className="font-sans text-2xl leading-8 font-bold" style={{ color: t.textPrimary }}>
             Spacing
           </h2>
-          <p className="font-korean text-sm leading-5" style={{ color: t.textSecondary }}>
+          <p className="font-korean text-body-2 leading-5" style={{ color: t.textSecondary }}>
             UI 요소 간의 간격과 여백을 정의하여 콘텐츠의 위계와 가독성을 조율합니다. Tailwind
             spacing 토큰과 직결되며, 막대 길이는 실제 px 비율입니다.
           </p>
@@ -1000,7 +1000,7 @@ export const LayoutContent = ({ theme }: LayoutContentProps) => {
           <h2 className="font-sans text-2xl leading-8 font-bold" style={{ color: t.textPrimary }}>
             4pt Grid
           </h2>
-          <p className="font-korean text-sm leading-5" style={{ color: t.textSecondary }}>
+          <p className="font-korean text-body-2 leading-5" style={{ color: t.textSecondary }}>
             모든 여백과 간격을 4point 단위로 설정해 규칙성을 확보합니다. 컴팩트한 컴포넌트의 경우,
             2의 배수 단위를 제한적으로 사용합니다.
           </p>
@@ -1048,7 +1048,7 @@ export const LayoutContent = ({ theme }: LayoutContentProps) => {
                     >
                       {item.label}
                     </span>
-                    <span className="font-korean text-xs" style={{ color: t.textPrimary }}>
+                    <span className="font-korean text-caption" style={{ color: t.textPrimary }}>
                       {item.text}
                     </span>
                   </div>
@@ -1145,7 +1145,10 @@ export const LayoutContent = ({ theme }: LayoutContentProps) => {
                   minWidth: '180px',
                 }}
               >
-                <span className="font-korean text-xs font-bold" style={{ color: t.textPrimary }}>
+                <span
+                  className="font-korean text-caption font-bold"
+                  style={{ color: t.textPrimary }}
+                >
                   카드 타이틀
                 </span>
                 <span className="font-korean text-caption" style={{ color: t.textSecondary }}>
@@ -1185,7 +1188,7 @@ export const LayoutContent = ({ theme }: LayoutContentProps) => {
               디자인 시스템 진실 소스
             </span>
           </div>
-          <p className="font-korean text-sm leading-5" style={{ color: t.textSecondary }}>
+          <p className="font-korean text-body-2 leading-5" style={{ color: t.textSecondary }}>
             UI 요소의 레이어 스택 순서입니다. 높은 z-index가 위에 표시되며, 이 값은 디자인 시스템의
             이상적 설계 값으로 실제 코드는 이 값에 맞춰 정정되어야 합니다.
           </p>
@@ -1216,7 +1219,7 @@ export const LayoutContent = ({ theme }: LayoutContentProps) => {
                   className="w-2 h-2 rounded-full shrink-0"
                   style={{ backgroundColor: layer.color }}
                 />
-                <span className="font-mono text-xs font-bold" style={{ color: layer.color }}>
+                <span className="font-mono text-caption font-bold" style={{ color: layer.color }}>
                   {layer.name}
                 </span>
                 <span className="font-korean text-caption" style={{ color: t.textSecondary }}>
@@ -1234,7 +1237,7 @@ export const LayoutContent = ({ theme }: LayoutContentProps) => {
           <h2 className="font-sans text-2xl leading-8 font-bold" style={{ color: t.textPrimary }}>
             Reference
           </h2>
-          <p className="font-korean text-sm leading-5" style={{ color: t.textSecondary }}>
+          <p className="font-korean text-body-2 leading-5" style={{ color: t.textSecondary }}>
             App Shell CSS 클래스와 KRDS Grid 규칙 비교 — 코드 작성 시 참조용입니다.
           </p>
         </div>
diff --git a/frontend/src/pages/design/RadiusContent.tsx b/frontend/src/pages/design/RadiusContent.tsx
index 0f34e49..04d3e89 100644
--- a/frontend/src/pages/design/RadiusContent.tsx
+++ b/frontend/src/pages/design/RadiusContent.tsx
@@ -70,17 +70,17 @@ export const RadiusContent = ({ theme }: RadiusContentProps) => {
           <h1 className="font-sans text-3xl leading-9 font-bold" style={{ color: t.textPrimary }}>
             Radius
           </h1>
-          <p className="font-korean text-sm leading-5" style={{ color: t.textSecondary }}>
+          <p className="font-korean text-body-2 leading-5" style={{ color: t.textSecondary }}>
             Radius는 컴포넌트 혹은 콘텐츠 모서리의 둥글기를 표현합니다.
           </p>
         </div>
-        <p className="font-korean text-sm leading-6" style={{ color: t.textSecondary }}>
+        <p className="font-korean text-body-2 leading-6" style={{ color: t.textSecondary }}>
           Radius는 UI 구성 요소의 모서리를 둥글게 처리하여 부드럽고 현대적인 느낌을 제공합니다.
           일관된 Radius 값은 브랜드 아이덴티티를 강화하고, 사용자 경험을 향상시키며, 다양한 화면과
           컨텍스트에서 시각적 일관성을 유지하는 데 중요한 역할을 합니다.
         </p>
         <ul
-          className="flex flex-col gap-1 list-disc list-inside font-korean text-sm"
+          className="flex flex-col gap-1 list-disc list-inside font-korean text-body-2"
           style={{ color: t.textSecondary }}
         >
           <li>
@@ -203,7 +203,7 @@ export const RadiusContent = ({ theme }: RadiusContentProps) => {
           <h2 className="font-sans text-2xl leading-8 font-bold" style={{ color: t.textPrimary }}>
             컴포넌트 매핑
           </h2>
-          <p className="font-korean text-sm leading-5" style={{ color: t.textSecondary }}>
+          <p className="font-korean text-body-2 leading-5" style={{ color: t.textSecondary }}>
             wing.css 컴포넌트 클래스에 적용된 Radius 토큰입니다.
           </p>
         </div>
@@ -233,7 +233,7 @@ export const RadiusContent = ({ theme }: RadiusContentProps) => {
 
               {/* 정보 */}
               <div className="flex flex-col gap-1.5 flex-1">
-                <span className="font-mono text-xs font-bold" style={{ color: t.textPrimary }}>
+                <span className="font-mono text-caption font-bold" style={{ color: t.textPrimary }}>
                   {item.className}
                 </span>
                 <div className="flex flex-row flex-wrap gap-2">
diff --git a/frontend/src/pages/design/TextFieldContent.tsx b/frontend/src/pages/design/TextFieldContent.tsx
index 9ec4386..2891f0a 100644
--- a/frontend/src/pages/design/TextFieldContent.tsx
+++ b/frontend/src/pages/design/TextFieldContent.tsx
@@ -207,7 +207,7 @@ export const TextFieldContent = ({ theme }: TextFieldContentProps) => {
         {/* ── 섹션 1: 헤더 ── */}
         <div className="pb-10 mb-12 border-b border-solid" style={{ borderColor: dividerColor }}>
           <p
-            className="font-mono text-sm uppercase tracking-widest mb-3"
+            className="font-mono text-body-2 uppercase tracking-widest mb-3"
             style={{ color: t.textAccent }}
           >
             Components
@@ -225,7 +225,7 @@ export const TextFieldContent = ({ theme }: TextFieldContentProps) => {
           <h2 className="text-2xl font-bold mb-2" style={{ color: t.textPrimary }}>
             Input Field
           </h2>
-          <p className="text-sm" style={{ color: t.textSecondary }}>
+          <p className="text-body-2" style={{ color: t.textSecondary }}>
             단일 행 텍스트를 입력받는 필드입니다.
           </p>
         </div>
@@ -246,7 +246,7 @@ export const TextFieldContent = ({ theme }: TextFieldContentProps) => {
                   {/* Prefix label */}
                   <div className="flex flex-col items-center gap-0.5" style={{ width: '70px' }}>
                     <span
-                      className="font-mono text-xs font-semibold"
+                      className="font-mono text-caption font-semibold"
                       style={{ color: annotationColor }}
                     >
                       Prefix
@@ -272,7 +272,7 @@ export const TextFieldContent = ({ theme }: TextFieldContentProps) => {
                   {/* Input label */}
                   <div className="flex flex-col items-center gap-0.5">
                     <span
-                      className="font-mono text-xs font-semibold"
+                      className="font-mono text-caption font-semibold"
                       style={{ color: annotationColor }}
                     >
                       Input
@@ -295,7 +295,7 @@ export const TextFieldContent = ({ theme }: TextFieldContentProps) => {
                   {/* Suffix label */}
                   <div className="flex flex-col items-center gap-0.5" style={{ width: '70px' }}>
                     <span
-                      className="font-mono text-xs font-semibold"
+                      className="font-mono text-caption font-semibold"
                       style={{ color: annotationColor }}
                     >
                       Suffix
@@ -377,7 +377,7 @@ export const TextFieldContent = ({ theme }: TextFieldContentProps) => {
 
                   {/* Suffix 텍스트 */}
                   <span
-                    className="shrink-0 ml-2 font-mono text-sm"
+                    className="shrink-0 ml-2 font-mono text-body-2"
                     style={{ color: fieldPlaceholder }}
                   >
                     원
@@ -402,7 +402,7 @@ export const TextFieldContent = ({ theme }: TextFieldContentProps) => {
                   }}
                 >
                   <span
-                    className="font-mono text-xs font-semibold"
+                    className="font-mono text-caption font-semibold"
                     style={{ color: annotationColor }}
                   >
                     Container
@@ -437,7 +437,7 @@ export const TextFieldContent = ({ theme }: TextFieldContentProps) => {
                       style={{ width: '1px', height: '10px', backgroundColor: annotationColor }}
                     />
                     <span
-                      className="font-mono text-xs font-semibold"
+                      className="font-mono text-caption font-semibold"
                       style={{ color: annotationColor }}
                     >
                       Clear Button
@@ -468,7 +468,7 @@ export const TextFieldContent = ({ theme }: TextFieldContentProps) => {
                 Container
               </h3>
             </div>
-            <p className="mb-5 text-sm" style={{ color: t.textSecondary }}>
+            <p className="mb-5 text-body-2" style={{ color: t.textSecondary }}>
               입력 필드의 외곽 영역입니다. 테두리, 곡률, 내부 여백을 정의합니다.
             </p>
             <div className="rounded-xl p-8" style={{ backgroundColor: sectionCardBg }}>
@@ -519,13 +519,13 @@ export const TextFieldContent = ({ theme }: TextFieldContentProps) => {
                 </div>
 
                 <div>
-                  <p className="font-mono text-xs" style={{ color: t.textSecondary }}>
+                  <p className="font-mono text-caption" style={{ color: t.textSecondary }}>
                     height: 44px (Medium)
                   </p>
-                  <p className="font-mono text-xs mt-1" style={{ color: t.textSecondary }}>
+                  <p className="font-mono text-caption mt-1" style={{ color: t.textSecondary }}>
                     padding: 12px (좌우)
                   </p>
-                  <p className="font-mono text-xs mt-1" style={{ color: t.textSecondary }}>
+                  <p className="font-mono text-caption mt-1" style={{ color: t.textSecondary }}>
                     border-radius: 6px
                   </p>
                 </div>
@@ -543,14 +543,14 @@ export const TextFieldContent = ({ theme }: TextFieldContentProps) => {
                 Placeholder
               </h3>
             </div>
-            <p className="mb-5 text-sm" style={{ color: t.textSecondary }}>
+            <p className="mb-5 text-body-2" style={{ color: t.textSecondary }}>
               값이 입력되지 않았을 때 표시되는 안내 텍스트입니다. 입력 시 사라집니다.
             </p>
             <div className="rounded-xl p-8" style={{ backgroundColor: sectionCardBg }}>
               <div className="flex gap-6">
                 {/* 플레이스홀더 있는 필드 */}
                 <div className="flex flex-col gap-2">
-                  <span className="text-xs font-mono" style={{ color: t.textSecondary }}>
+                  <span className="text-caption font-mono" style={{ color: t.textSecondary }}>
                     플레이스홀더 있음
                   </span>
                   <div
@@ -570,7 +570,7 @@ export const TextFieldContent = ({ theme }: TextFieldContentProps) => {
 
                 {/* 빈 필드 (플레이스홀더 없음) */}
                 <div className="flex flex-col gap-2">
-                  <span className="text-xs font-mono" style={{ color: t.textSecondary }}>
+                  <span className="text-caption font-mono" style={{ color: t.textSecondary }}>
                     플레이스홀더 없음
                   </span>
                   <div
@@ -597,14 +597,17 @@ export const TextFieldContent = ({ theme }: TextFieldContentProps) => {
                 Label
               </h3>
             </div>
-            <p className="mb-5 text-sm" style={{ color: t.textSecondary }}>
+            <p className="mb-5 text-body-2" style={{ color: t.textSecondary }}>
               입력 필드의 용도를 설명하는 텍스트입니다. 필수 항목은 * 표시로 구분합니다.
             </p>
             <div className="rounded-xl p-8" style={{ backgroundColor: sectionCardBg }}>
               <div className="flex gap-8">
                 {/* 일반 라벨 */}
                 <div className="flex flex-col gap-1">
-                  <span className="text-sm font-semibold mb-1.5" style={{ color: t.textPrimary }}>
+                  <span
+                    className="text-body-2 font-semibold mb-1.5"
+                    style={{ color: t.textPrimary }}
+                  >
                     이름
                   </span>
                   <div
@@ -624,7 +627,10 @@ export const TextFieldContent = ({ theme }: TextFieldContentProps) => {
 
                 {/* 필수 라벨 */}
                 <div className="flex flex-col gap-1">
-                  <span className="text-sm font-semibold mb-1.5" style={{ color: t.textPrimary }}>
+                  <span
+                    className="text-body-2 font-semibold mb-1.5"
+                    style={{ color: t.textPrimary }}
+                  >
                     이메일 <span style={{ color: '#ef4444' }}>*</span>
                   </span>
                   <div
@@ -655,7 +661,7 @@ export const TextFieldContent = ({ theme }: TextFieldContentProps) => {
                 Input Text
               </h3>
             </div>
-            <p className="mb-5 text-sm" style={{ color: t.textSecondary }}>
+            <p className="mb-5 text-body-2" style={{ color: t.textSecondary }}>
               사용자가 실제로 입력한 텍스트입니다. 플레이스홀더보다 진한 색상으로 표시됩니다.
             </p>
             <div className="rounded-xl p-8" style={{ backgroundColor: sectionCardBg }}>
@@ -673,7 +679,10 @@ export const TextFieldContent = ({ theme }: TextFieldContentProps) => {
                 >
                   홍길동
                 </div>
-                <div className="flex gap-6 text-xs font-mono" style={{ color: t.textSecondary }}>
+                <div
+                  className="flex gap-6 text-caption font-mono"
+                  style={{ color: t.textSecondary }}
+                >
                   <span>font-size: 14px</span>
                   <span>color: textPrimary</span>
                   <span>font-weight: 400</span>
@@ -692,14 +701,14 @@ export const TextFieldContent = ({ theme }: TextFieldContentProps) => {
                 Clear Icon
               </h3>
             </div>
-            <p className="mb-5 text-sm" style={{ color: t.textSecondary }}>
+            <p className="mb-5 text-body-2" style={{ color: t.textSecondary }}>
               입력값이 있을 때 표시되는 초기화 버튼입니다. 클릭 시 입력값을 삭제합니다.
             </p>
             <div className="rounded-xl p-8" style={{ backgroundColor: sectionCardBg }}>
               <div className="flex gap-6">
                 {/* 텍스트 입력 + Clear 아이콘 표시 */}
                 <div className="flex flex-col gap-2">
-                  <span className="text-xs font-mono" style={{ color: t.textSecondary }}>
+                  <span className="text-caption font-mono" style={{ color: t.textSecondary }}>
                     입력값 있음 (Clear 표시)
                   </span>
                   <div
@@ -736,7 +745,7 @@ export const TextFieldContent = ({ theme }: TextFieldContentProps) => {
 
                 {/* 빈 상태 (Clear 미표시) */}
                 <div className="flex flex-col gap-2">
-                  <span className="text-xs font-mono" style={{ color: t.textSecondary }}>
+                  <span className="text-caption font-mono" style={{ color: t.textSecondary }}>
                     입력값 없음 (Clear 미표시)
                   </span>
                   <div
@@ -767,7 +776,7 @@ export const TextFieldContent = ({ theme }: TextFieldContentProps) => {
                 Helper Text
               </h3>
             </div>
-            <p className="mb-5 text-sm" style={{ color: t.textSecondary }}>
+            <p className="mb-5 text-body-2" style={{ color: t.textSecondary }}>
               입력 필드 하단에 표시되는 보조 텍스트입니다. 안내 또는 에러 메시지로 사용됩니다.
             </p>
             <div className="rounded-xl p-8" style={{ backgroundColor: sectionCardBg }}>
@@ -787,7 +796,7 @@ export const TextFieldContent = ({ theme }: TextFieldContentProps) => {
                   >
                     비밀번호
                   </div>
-                  <span className="text-xs" style={{ color: t.textMuted }}>
+                  <span className="text-caption" style={{ color: t.textMuted }}>
                     영문, 숫자 포함 8자 이상
                   </span>
                 </div>
@@ -807,7 +816,7 @@ export const TextFieldContent = ({ theme }: TextFieldContentProps) => {
                   >
                     비밀번호
                   </div>
-                  <span className="text-xs" style={{ color: '#ef4444' }}>
+                  <span className="text-caption" style={{ color: '#ef4444' }}>
                     필수 입력 항목입니다.
                   </span>
                 </div>
@@ -828,7 +837,7 @@ export const TextFieldContent = ({ theme }: TextFieldContentProps) => {
                 <div key={row.state} className="flex items-center gap-8">
                   {/* 왼쪽: State 라벨 + 뱃지 */}
                   <div className="flex items-center gap-2 shrink-0" style={{ width: '200px' }}>
-                    <span className="font-mono text-xs" style={{ color: t.textSecondary }}>
+                    <span className="font-mono text-caption" style={{ color: t.textSecondary }}>
                       State
                     </span>
                     <span
@@ -891,7 +900,7 @@ export const TextFieldContent = ({ theme }: TextFieldContentProps) => {
           <h2 className="text-2xl font-bold mb-2" style={{ color: t.textPrimary }}>
             Text Area
           </h2>
-          <p className="text-sm" style={{ color: t.textSecondary }}>
+          <p className="text-body-2" style={{ color: t.textSecondary }}>
             여러 줄의 텍스트를 입력받는 필드입니다.
           </p>
         </div>
@@ -911,7 +920,7 @@ export const TextFieldContent = ({ theme }: TextFieldContentProps) => {
                   {/* Input Area label */}
                   <div className="flex flex-col items-center gap-0.5" style={{ width: '80px' }}>
                     <span
-                      className="font-mono text-xs font-semibold"
+                      className="font-mono text-caption font-semibold"
                       style={{ color: annotationColor }}
                     >
                       Input Area
@@ -933,7 +942,7 @@ export const TextFieldContent = ({ theme }: TextFieldContentProps) => {
                   {/* Placeholder label */}
                   <div className="flex flex-col items-center gap-0.5">
                     <span
-                      className="font-mono text-xs font-semibold"
+                      className="font-mono text-caption font-semibold"
                       style={{ color: annotationColor }}
                     >
                       Placeholder
@@ -955,7 +964,7 @@ export const TextFieldContent = ({ theme }: TextFieldContentProps) => {
                   {/* Character Counter label */}
                   <div className="flex flex-col items-center gap-0.5" style={{ width: '110px' }}>
                     <span
-                      className="font-mono text-xs font-semibold"
+                      className="font-mono text-caption font-semibold"
                       style={{ color: annotationColor }}
                     >
                       Character Counter
@@ -1042,7 +1051,7 @@ export const TextFieldContent = ({ theme }: TextFieldContentProps) => {
                   }}
                 >
                   <span
-                    className="font-mono text-xs font-semibold"
+                    className="font-mono text-caption font-semibold"
                     style={{ color: annotationColor }}
                   >
                     Container
@@ -1075,7 +1084,7 @@ export const TextFieldContent = ({ theme }: TextFieldContentProps) => {
                       style={{ width: '1px', height: '10px', backgroundColor: annotationColor }}
                     />
                     <span
-                      className="font-mono text-xs font-semibold"
+                      className="font-mono text-caption font-semibold"
                       style={{ color: annotationColor }}
                     >
                       Resize Handle
@@ -1103,7 +1112,7 @@ export const TextFieldContent = ({ theme }: TextFieldContentProps) => {
                 Container
               </h3>
             </div>
-            <p className="mb-5 text-sm" style={{ color: t.textSecondary }}>
+            <p className="mb-5 text-body-2" style={{ color: t.textSecondary }}>
               텍스트 영역의 외곽 컨테이너입니다. 기본 높이 112px이며 사용자가 리사이즈할 수
               있습니다.
             </p>
@@ -1154,16 +1163,16 @@ export const TextFieldContent = ({ theme }: TextFieldContentProps) => {
                 </div>
 
                 <div className="pt-2">
-                  <p className="font-mono text-xs" style={{ color: t.textSecondary }}>
+                  <p className="font-mono text-caption" style={{ color: t.textSecondary }}>
                     height: 112px (default)
                   </p>
-                  <p className="font-mono text-xs mt-1" style={{ color: t.textSecondary }}>
+                  <p className="font-mono text-caption mt-1" style={{ color: t.textSecondary }}>
                     padding: 12px
                   </p>
-                  <p className="font-mono text-xs mt-1" style={{ color: t.textSecondary }}>
+                  <p className="font-mono text-caption mt-1" style={{ color: t.textSecondary }}>
                     border-radius: 6px
                   </p>
-                  <p className="font-mono text-xs mt-1" style={{ color: t.textSecondary }}>
+                  <p className="font-mono text-caption mt-1" style={{ color: t.textSecondary }}>
                     resize: vertical
                   </p>
                 </div>
@@ -1181,14 +1190,14 @@ export const TextFieldContent = ({ theme }: TextFieldContentProps) => {
                 Placeholder
               </h3>
             </div>
-            <p className="mb-5 text-sm" style={{ color: t.textSecondary }}>
+            <p className="mb-5 text-body-2" style={{ color: t.textSecondary }}>
               값이 입력되지 않았을 때 표시되는 안내 텍스트입니다.
             </p>
             <div className="rounded-xl p-8" style={{ backgroundColor: sectionCardBg }}>
               <div className="flex gap-6">
                 {/* 플레이스홀더 있는 TextArea */}
                 <div className="flex flex-col gap-2">
-                  <span className="text-xs font-mono" style={{ color: t.textSecondary }}>
+                  <span className="text-caption font-mono" style={{ color: t.textSecondary }}>
                     플레이스홀더 있음
                   </span>
                   <div
@@ -1209,7 +1218,7 @@ export const TextFieldContent = ({ theme }: TextFieldContentProps) => {
 
                 {/* 빈 TextArea */}
                 <div className="flex flex-col gap-2">
-                  <span className="text-xs font-mono" style={{ color: t.textSecondary }}>
+                  <span className="text-caption font-mono" style={{ color: t.textSecondary }}>
                     플레이스홀더 없음
                   </span>
                   <div
@@ -1236,14 +1245,17 @@ export const TextFieldContent = ({ theme }: TextFieldContentProps) => {
                 Label
               </h3>
             </div>
-            <p className="mb-5 text-sm" style={{ color: t.textSecondary }}>
+            <p className="mb-5 text-body-2" style={{ color: t.textSecondary }}>
               텍스트 영역의 용도를 설명하는 라벨입니다.
             </p>
             <div className="rounded-xl p-8" style={{ backgroundColor: sectionCardBg }}>
               <div className="flex gap-8">
                 {/* 기본 라벨 */}
                 <div className="flex flex-col gap-1">
-                  <span className="text-sm font-semibold mb-1.5" style={{ color: t.textPrimary }}>
+                  <span
+                    className="text-body-2 font-semibold mb-1.5"
+                    style={{ color: t.textPrimary }}
+                  >
                     내용
                   </span>
                   <div
@@ -1264,7 +1276,10 @@ export const TextFieldContent = ({ theme }: TextFieldContentProps) => {
 
                 {/* 필수(*) 라벨 */}
                 <div className="flex flex-col gap-1">
-                  <span className="text-sm font-semibold mb-1.5" style={{ color: t.textPrimary }}>
+                  <span
+                    className="text-body-2 font-semibold mb-1.5"
+                    style={{ color: t.textPrimary }}
+                  >
                     비고 <span style={{ color: '#ef4444' }}>*</span>
                   </span>
                   <div
@@ -1296,7 +1311,7 @@ export const TextFieldContent = ({ theme }: TextFieldContentProps) => {
                 Input Text
               </h3>
             </div>
-            <p className="mb-5 text-sm" style={{ color: t.textSecondary }}>
+            <p className="mb-5 text-body-2" style={{ color: t.textSecondary }}>
               사용자가 입력한 여러 줄의 텍스트입니다.
             </p>
             <div className="rounded-xl p-8" style={{ backgroundColor: sectionCardBg }}>
@@ -1316,7 +1331,10 @@ export const TextFieldContent = ({ theme }: TextFieldContentProps) => {
                 >
                   {'오늘 점검 내용을 기록합니다.\n상세 내용은 아래와 같습니다.'}
                 </div>
-                <div className="flex gap-6 text-xs font-mono" style={{ color: t.textSecondary }}>
+                <div
+                  className="flex gap-6 text-caption font-mono"
+                  style={{ color: t.textSecondary }}
+                >
                   <span>font-size: 14px</span>
                   <span>color: textPrimary</span>
                   <span>line-height: 1.6</span>
@@ -1335,14 +1353,14 @@ export const TextFieldContent = ({ theme }: TextFieldContentProps) => {
                 Clear Icon
               </h3>
             </div>
-            <p className="mb-5 text-sm" style={{ color: t.textSecondary }}>
+            <p className="mb-5 text-body-2" style={{ color: t.textSecondary }}>
               입력값 초기화 버튼입니다. 텍스트 영역 우상단에 표시됩니다.
             </p>
             <div className="rounded-xl p-8" style={{ backgroundColor: sectionCardBg }}>
               <div className="flex gap-6">
                 {/* 텍스트 있는 상태 (Clear 표시) */}
                 <div className="flex flex-col gap-2">
-                  <span className="text-xs font-mono" style={{ color: t.textSecondary }}>
+                  <span className="text-caption font-mono" style={{ color: t.textSecondary }}>
                     입력값 있음 (Clear 표시)
                   </span>
                   <div
@@ -1380,7 +1398,7 @@ export const TextFieldContent = ({ theme }: TextFieldContentProps) => {
 
                 {/* 빈 상태 (Clear 미표시) */}
                 <div className="flex flex-col gap-2">
-                  <span className="text-xs font-mono" style={{ color: t.textSecondary }}>
+                  <span className="text-caption font-mono" style={{ color: t.textSecondary }}>
                     입력값 없음 (Clear 미표시)
                   </span>
                   <div
@@ -1412,7 +1430,7 @@ export const TextFieldContent = ({ theme }: TextFieldContentProps) => {
                 Helper Text
               </h3>
             </div>
-            <p className="mb-5 text-sm" style={{ color: t.textSecondary }}>
+            <p className="mb-5 text-body-2" style={{ color: t.textSecondary }}>
               텍스트 영역 하단의 도움말 또는 에러 메시지입니다.
             </p>
             <div className="rounded-xl p-8" style={{ backgroundColor: sectionCardBg }}>
@@ -1434,10 +1452,10 @@ export const TextFieldContent = ({ theme }: TextFieldContentProps) => {
                     내용을 입력하세요
                   </div>
                   <div className="flex items-center justify-between" style={{ width: '240px' }}>
-                    <span className="text-xs" style={{ color: t.textMuted }}>
+                    <span className="text-caption" style={{ color: t.textMuted }}>
                       상세 내용을 입력해 주세요
                     </span>
-                    <span className="text-xs font-mono" style={{ color: t.textMuted }}>
+                    <span className="text-caption font-mono" style={{ color: t.textMuted }}>
                       0/500
                     </span>
                   </div>
@@ -1459,7 +1477,7 @@ export const TextFieldContent = ({ theme }: TextFieldContentProps) => {
                   >
                     내용을 입력하세요
                   </div>
-                  <span className="text-xs" style={{ color: '#ef4444' }}>
+                  <span className="text-caption" style={{ color: '#ef4444' }}>
                     필수 입력 항목입니다.
                   </span>
                 </div>
@@ -1480,7 +1498,7 @@ export const TextFieldContent = ({ theme }: TextFieldContentProps) => {
                 <div key={`ta-${row.state}`} className="flex items-start gap-8">
                   {/* 왼쪽: State 라벨 + 뱃지 */}
                   <div className="flex items-center gap-2 shrink-0 pt-3" style={{ width: '200px' }}>
-                    <span className="font-mono text-xs" style={{ color: t.textSecondary }}>
+                    <span className="font-mono text-caption" style={{ color: t.textSecondary }}>
                       State
                     </span>
                     <span
diff --git a/frontend/src/pages/design/TypographyContent.tsx b/frontend/src/pages/design/TypographyContent.tsx
index f91e7e3..906764e 100644
--- a/frontend/src/pages/design/TypographyContent.tsx
+++ b/frontend/src/pages/design/TypographyContent.tsx
@@ -307,18 +307,18 @@ export const TypographyContent = ({ theme }: TypographyContentProps) => {
           <h1 className="font-sans text-3xl leading-9 font-bold" style={{ color: t.textPrimary }}>
             Typography
           </h1>
-          <p className="font-korean text-sm leading-5" style={{ color: t.textSecondary }}>
+          <p className="font-korean text-body-2 leading-5" style={{ color: t.textSecondary }}>
             WING-OPS 인터페이스에서 사용되는 타이포그래피 체계입니다. 폰트 패밀리, 크기, 두께를
             토큰과 컴포넌트 클래스로 정의하여 시각적 계층 구조와 일관성을 유지합니다.
           </p>
         </div>
 
         <div className="flex flex-col gap-2">
-          <h3 className="font-korean text-sm font-bold" style={{ color: t.textPrimary }}>
+          <h3 className="font-korean text-body-2 font-bold" style={{ color: t.textPrimary }}>
             개요
           </h3>
           <ul
-            className="flex flex-col gap-1 list-disc list-inside font-korean text-sm"
+            className="flex flex-col gap-1 list-disc list-inside font-korean text-body-2"
             style={{ color: t.textSecondary }}
           >
             <li>
@@ -337,7 +337,7 @@ export const TypographyContent = ({ theme }: TypographyContentProps) => {
           <h2 className="font-sans text-2xl leading-8 font-bold" style={{ color: t.textPrimary }}>
             글꼴
           </h2>
-          <p className="font-korean text-sm leading-5" style={{ color: t.textSecondary }}>
+          <p className="font-korean text-body-2 leading-5" style={{ color: t.textSecondary }}>
             사용자의 디바이스 환경을 고려하여, 시스템 폰트와 웹 폰트를 조합하여 사용합니다. 한국어
             UI에 최적화된 폰트 스택으로 다양한 기기에서 일관된 가독성을 보장합니다.
           </p>
@@ -352,7 +352,7 @@ export const TypographyContent = ({ theme }: TypographyContentProps) => {
           }}
         >
           <pre
-            className="font-mono text-sm leading-6"
+            className="font-mono text-body-2 leading-6"
             style={{ color: isDark ? '#c0c8dc' : '#475569' }}
           >
             <span style={{ color: t.textAccent }}>font-family</span>
@@ -390,7 +390,7 @@ export const TypographyContent = ({ theme }: TypographyContentProps) => {
                   </div>
                   <div className="px-5 py-5 flex flex-col gap-4">
                     <div
-                      className="font-mono text-xs leading-5 rounded px-3 py-2"
+                      className="font-mono text-caption leading-5 rounded px-3 py-2"
                       style={{
                         color: isDark ? '#9ba3b8' : '#64748b',
                         backgroundColor: isDark ? 'rgba(255,255,255,0.02)' : 'rgba(0,0,0,0.02)',
@@ -398,7 +398,7 @@ export const TypographyContent = ({ theme }: TypographyContentProps) => {
                     >
                       {font.stack}
                     </div>
-                    <p className="font-korean text-xs leading-5" style={{ color: t.textSecondary }}>{font.usage}</p>
+                    <p className="font-korean text-caption leading-5" style={{ color: t.textSecondary }}>{font.usage}</p>
                     <div className="flex flex-col gap-3 pt-2">
                       <div className="flex flex-col gap-1">
                         <span className="font-mono text-caption uppercase" style={{ letterSpacing: '1px', color: t.textMuted }}>Regular</span>
@@ -421,7 +421,7 @@ export const TypographyContent = ({ theme }: TypographyContentProps) => {
           <h2 className="font-sans text-2xl leading-8 font-bold" style={{ color: t.textPrimary }}>
             타입 스케일
           </h2>
-          <p className="font-korean text-sm leading-5" style={{ color: t.textSecondary }}>
+          <p className="font-korean text-body-2 leading-5" style={{ color: t.textSecondary }}>
             Display, Heading, Body, Navigation, Label의 5가지 용도 카테고리에 맞게 조합하여
             사용합니다.
           </p>
@@ -434,7 +434,7 @@ export const TypographyContent = ({ theme }: TypographyContentProps) => {
               <h3 className="font-sans text-lg font-bold" style={{ color: t.textPrimary }}>
                 {category.name}
               </h3>
-              <p className="font-korean text-xs leading-5" style={{ color: t.textSecondary }}>
+              <p className="font-korean text-caption leading-5" style={{ color: t.textSecondary }}>
                 {category.description}
               </p>
             </div>
@@ -445,7 +445,7 @@ export const TypographyContent = ({ theme }: TypographyContentProps) => {
               style={{ border: `1px solid ${isDark ? 'rgba(66,71,84,0.20)' : '#e2e8f0'}` }}
             >
               <div
-                className="grid grid-cols-[1fr_80px_80px_80px_90px_140px] gap-2 px-4 py-2.5 text-xs font-bold uppercase tracking-wider"
+                className="grid grid-cols-[1fr_80px_80px_80px_90px_140px] gap-2 px-4 py-2.5 text-caption font-bold uppercase tracking-wider"
                 style={{
                   backgroundColor: isDark ? 'rgba(255,255,255,0.04)' : '#f1f5f9',
                   color: t.textMuted,
@@ -467,20 +467,23 @@ export const TypographyContent = ({ theme }: TypographyContentProps) => {
                     backgroundColor: isDark ? 'rgba(255,255,255,0.02)' : '#fafafa',
                   }}
                 >
-                  <span className="font-mono text-xs font-semibold" style={{ color: t.textAccent }}>
+                  <span
+                    className="font-mono text-caption font-semibold"
+                    style={{ color: t.textAccent }}
+                  >
                     {row.token}
                   </span>
-                  <span className="font-mono text-xs" style={{ color: t.textPrimary }}>
+                  <span className="font-mono text-caption" style={{ color: t.textPrimary }}>
                     {row.px}
                   </span>
-                  <span className="font-mono text-xs" style={{ color: t.textPrimary }}>
+                  <span className="font-mono text-caption" style={{ color: t.textPrimary }}>
                     {row.weight}
                   </span>
                   <span
-                    className="font-mono text-xs"
+                    className="font-mono text-caption"
                     style={{ color: t.textMuted }}
                   >{`${(row.lineHeight * 100).toFixed(0)}%`}</span>
-                  <span className="font-mono text-xs" style={{ color: t.textMuted }}>
+                  <span className="font-mono text-caption" style={{ color: t.textMuted }}>
                     {row.letterSpacing}
                   </span>
                   <span
@@ -510,7 +513,7 @@ export const TypographyContent = ({ theme }: TypographyContentProps) => {
                 >
                   <div className="shrink-0 w-[100px]">
                     <div
-                      className="font-mono text-xs font-semibold"
+                      className="font-mono text-caption font-semibold"
                       style={{ color: t.textAccent }}
                     >
                       {row.token}
@@ -533,7 +536,7 @@ export const TypographyContent = ({ theme }: TypographyContentProps) => {
                       {row.sample}
                     </span>
                   </div>
-                  <div className="shrink-0 text-xs font-korean" style={{ color: t.textMuted }}>
+                  <div className="shrink-0 text-caption font-korean" style={{ color: t.textMuted }}>
                     {row.role}
                   </div>
                 </div>
@@ -551,7 +554,7 @@ export const TypographyContent = ({ theme }: TypographyContentProps) => {
             <h2 className="text-xl font-bold mb-2" style={{ color: t.textPrimary }}>
               폰트 두께 토큰
             </h2>
-            <p className="text-sm" style={{ color: t.textSecondary }}>
+            <p className="text-body-2" style={{ color: t.textSecondary }}>
               기본 두께 Regular(400), 강조 Bold(700). Medium(500)은 레이블과 소제목, Thin(300)은
               장식적 대형 텍스트에 사용합니다.
             </p>
@@ -561,7 +564,7 @@ export const TypographyContent = ({ theme }: TypographyContentProps) => {
             style={{ border: `1px solid ${isDark ? 'rgba(66,71,84,0.20)' : '#e2e8f0'}` }}
           >
             <div
-              className="grid grid-cols-[1fr_80px_1fr_1fr] gap-2 px-4 py-2.5 text-xs font-bold uppercase tracking-wider"
+              className="grid grid-cols-[1fr_80px_1fr_1fr] gap-2 px-4 py-2.5 text-caption font-bold uppercase tracking-wider"
               style={{
                 backgroundColor: isDark ? 'rgba(255,255,255,0.04)' : '#f1f5f9',
                 color: t.textMuted,
@@ -606,17 +609,20 @@ export const TypographyContent = ({ theme }: TypographyContentProps) => {
                   backgroundColor: isDark ? 'rgba(255,255,255,0.02)' : '#fafafa',
                 }}
               >
-                <span className="font-mono text-xs font-semibold" style={{ color: t.textAccent }}>
+                <span
+                  className="font-mono text-caption font-semibold"
+                  style={{ color: t.textAccent }}
+                >
                   {row.token}
                 </span>
-                <span className="font-mono text-xs" style={{ color: t.textPrimary }}>
+                <span className="font-mono text-caption" style={{ color: t.textPrimary }}>
                   {row.value}
                 </span>
-                <span className="text-xs" style={{ color: t.textSecondary }}>
+                <span className="text-caption" style={{ color: t.textSecondary }}>
                   {row.name}
                 </span>
                 <span
-                  className="font-korean text-sm"
+                  className="font-korean text-body-2"
                   style={{ color: t.textPrimary, fontWeight: Number(row.value) }}
                 >
                   {row.preview}
@@ -632,7 +638,7 @@ export const TypographyContent = ({ theme }: TypographyContentProps) => {
             <h2 className="text-xl font-bold mb-2" style={{ color: t.textPrimary }}>
               줄 높이 토큰
             </h2>
-            <p className="text-sm" style={{ color: t.textSecondary }}>
+            <p className="text-body-2" style={{ color: t.textSecondary }}>
               대형 텍스트는 타이트하게(1.3), 본문은 여유롭게(1.6). 가독성과 공간 효율의 균형을
               맞춥니다.
             </p>
@@ -642,7 +648,7 @@ export const TypographyContent = ({ theme }: TypographyContentProps) => {
             style={{ border: `1px solid ${isDark ? 'rgba(66,71,84,0.20)' : '#e2e8f0'}` }}
           >
             <div
-              className="grid grid-cols-[1fr_80px_100px_1fr] gap-2 px-4 py-2.5 text-xs font-bold uppercase tracking-wider"
+              className="grid grid-cols-[1fr_80px_100px_1fr] gap-2 px-4 py-2.5 text-caption font-bold uppercase tracking-wider"
               style={{
                 backgroundColor: isDark ? 'rgba(255,255,255,0.04)' : '#f1f5f9',
                 color: t.textMuted,
@@ -677,16 +683,19 @@ export const TypographyContent = ({ theme }: TypographyContentProps) => {
                   backgroundColor: isDark ? 'rgba(255,255,255,0.02)' : '#fafafa',
                 }}
               >
-                <span className="font-mono text-xs font-semibold" style={{ color: t.textAccent }}>
+                <span
+                  className="font-mono text-caption font-semibold"
+                  style={{ color: t.textAccent }}
+                >
                   {row.token}
                 </span>
-                <span className="font-mono text-xs" style={{ color: t.textPrimary }}>
+                <span className="font-mono text-caption" style={{ color: t.textPrimary }}>
                   {row.value}
                 </span>
-                <span className="font-mono text-xs" style={{ color: t.textMuted }}>
+                <span className="font-mono text-caption" style={{ color: t.textMuted }}>
                   {row.pct}
                 </span>
-                <span className="text-xs" style={{ color: t.textSecondary }}>
+                <span className="text-caption" style={{ color: t.textSecondary }}>
                   {row.desc}
                 </span>
               </div>
@@ -700,7 +709,7 @@ export const TypographyContent = ({ theme }: TypographyContentProps) => {
             <h2 className="text-xl font-bold mb-2" style={{ color: t.textPrimary }}>
               자간 토큰
             </h2>
-            <p className="text-sm" style={{ color: t.textSecondary }}>
+            <p className="text-body-2" style={{ color: t.textSecondary }}>
               카테고리별로 자간을 정의합니다. Display는 넓게, Body는 기본값을 사용합니다.
             </p>
           </div>
@@ -709,7 +718,7 @@ export const TypographyContent = ({ theme }: TypographyContentProps) => {
             style={{ border: `1px solid ${isDark ? 'rgba(66,71,84,0.20)' : '#e2e8f0'}` }}
           >
             <div
-              className="grid grid-cols-[1fr_80px_140px_1fr] gap-2 px-4 py-2.5 text-xs font-bold uppercase tracking-wider"
+              className="grid grid-cols-[1fr_80px_140px_1fr] gap-2 px-4 py-2.5 text-caption font-bold uppercase tracking-wider"
               style={{
                 backgroundColor: isDark ? 'rgba(255,255,255,0.04)' : '#f1f5f9',
                 color: t.textMuted,
@@ -760,10 +769,13 @@ export const TypographyContent = ({ theme }: TypographyContentProps) => {
                   backgroundColor: isDark ? 'rgba(255,255,255,0.02)' : '#fafafa',
                 }}
               >
-                <span className="font-mono text-xs font-semibold" style={{ color: t.textAccent }}>
+                <span
+                  className="font-mono text-caption font-semibold"
+                  style={{ color: t.textAccent }}
+                >
                   {row.token}
                 </span>
-                <span className="font-mono text-xs" style={{ color: t.textPrimary }}>
+                <span className="font-mono text-caption" style={{ color: t.textPrimary }}>
                   {row.value}
                 </span>
                 <span
@@ -776,7 +788,7 @@ export const TypographyContent = ({ theme }: TypographyContentProps) => {
                 >
                   {row.tw}
                 </span>
-                <span className="text-xs" style={{ color: t.textSecondary }}>
+                <span className="text-caption" style={{ color: t.textSecondary }}>
                   {row.category}
                 </span>
               </div>
diff --git a/frontend/src/pages/design/components/ButtonCatalogSection.tsx b/frontend/src/pages/design/components/ButtonCatalogSection.tsx
index bd8fe8d..f4ef9e4 100644
--- a/frontend/src/pages/design/components/ButtonCatalogSection.tsx
+++ b/frontend/src/pages/design/components/ButtonCatalogSection.tsx
@@ -167,7 +167,7 @@ export const ButtonCatalogSection = () => {
       <div className="border-b border-solid border-[#1e2a42] pt-4 pr-6 pb-4 pl-6 flex flex-row gap-3 items-center justify-start self-stretch shrink-0 relative">
         <div className="bg-[#06b6d4] rounded-xl shrink-0 w-1 h-4 relative" />
         <div
-          className="text-[#22d3ee] text-left font-korean text-xs leading-4 font-medium uppercase relative flex items-center justify-start"
+          className="text-[#22d3ee] text-left font-korean text-caption leading-4 font-medium uppercase relative flex items-center justify-start"
           style={{ letterSpacing: '1.2px' }}
         >
           제어 인터페이스: 버튼
@@ -185,7 +185,7 @@ export const ButtonCatalogSection = () => {
                 className="pt-px pr-2 pb-[17.5px] pl-2 flex flex-col gap-0 items-start justify-start flex-1 min-w-0 relative"
               >
                 <div
-                  className="text-[#64748b] text-left font-korean text-xs font-medium uppercase relative flex items-center justify-start"
+                  className="text-[#64748b] text-left font-korean text-caption font-medium uppercase relative flex items-center justify-start"
                   style={{ letterSpacing: '-0.55px' }}
                 >
                   {header}
@@ -207,7 +207,7 @@ export const ButtonCatalogSection = () => {
               >
                 {/* 버튼 유형 레이블 */}
                 <div className="pt-[31.5px] pr-2 pb-[31.5px] pl-2 flex flex-col gap-0 items-start justify-start flex-1 min-w-0 relative">
-                  <div className="text-[#bcc9cd] text-left font-korean text-xs font-medium relative flex items-center justify-start">
+                  <div className="text-[#bcc9cd] text-left font-korean text-caption font-medium relative flex items-center justify-start">
                     {row.label}
                   </div>
                 </div>
diff --git a/frontend/src/pages/design/components/CardSection.tsx b/frontend/src/pages/design/components/CardSection.tsx
index 4d6118c..17d1627 100644
--- a/frontend/src/pages/design/components/CardSection.tsx
+++ b/frontend/src/pages/design/components/CardSection.tsx
@@ -129,7 +129,7 @@ export const CardSection = () => {
             <div className="text-white text-left font-sans font-bold text-4xl leading-10 relative flex items-center justify-start">
               24.8
             </div>
-            <div className="text-[#64748b] text-left font-sans font-semibold text-sm leading-5 relative flex items-center justify-start">
+            <div className="text-[#64748b] text-left font-sans font-semibold text-body-2 leading-5 relative flex items-center justify-start">
               노트 (knots)
             </div>
           </div>
diff --git a/frontend/src/pages/design/components/IconBadgeSection.tsx b/frontend/src/pages/design/components/IconBadgeSection.tsx
index 87c1953..bb947a9 100644
--- a/frontend/src/pages/design/components/IconBadgeSection.tsx
+++ b/frontend/src/pages/design/components/IconBadgeSection.tsx
@@ -61,7 +61,7 @@ export const IconBadgeSection = () => {
           <div className="bg-[#e89337] rounded-xl shrink-0 w-1 h-4 relative"></div>
           <div className="flex flex-col gap-0 items-start justify-start shrink-0 relative">
             <div
-              className="text-[#22d3ee] text-left font-korean text-xs leading-4 font-medium uppercase relative flex items-center justify-start"
+              className="text-[#22d3ee] text-left font-korean text-caption leading-4 font-medium uppercase relative flex items-center justify-start"
               style={{ letterSpacing: '1.2px' }}
             >
               마이크로 컨트롤: 아이콘 버튼
@@ -113,7 +113,7 @@ export const IconBadgeSection = () => {
           <div className="bg-[#93000a] rounded-xl shrink-0 w-1 h-4 relative"></div>
           <div className="flex flex-col gap-0 items-start justify-start shrink-0 relative">
             <div
-              className="text-[#22d3ee] text-left font-korean text-xs leading-4 font-medium uppercase relative flex items-center justify-start"
+              className="text-[#22d3ee] text-left font-korean text-caption leading-4 font-medium uppercase relative flex items-center justify-start"
               style={{ letterSpacing: '1.2px' }}
             >
               마이크로 컨트롤: 아이콘 버튼
diff --git a/frontend/src/pages/design/float/FloatDropdownContent.tsx b/frontend/src/pages/design/float/FloatDropdownContent.tsx
index 9a3792e..2391c4d 100644
--- a/frontend/src/pages/design/float/FloatDropdownContent.tsx
+++ b/frontend/src/pages/design/float/FloatDropdownContent.tsx
@@ -36,10 +36,10 @@ export const FloatDropdownContent = ({ theme }: FloatDropdownContentProps) => {
         <h2 className="font-sans text-xl font-bold" style={{ color: t.textPrimary }}>
           Dropdown
         </h2>
-        <p className="font-korean text-sm leading-6" style={{ color: t.textSecondary }}>
+        <p className="font-korean text-body-2 leading-6" style={{ color: t.textSecondary }}>
           트리거 요소에{' '}
           <code
-            className="font-mono text-xs px-1.5 py-0.5 rounded"
+            className="font-mono text-caption px-1.5 py-0.5 rounded"
             style={{
               backgroundColor: isDark ? 'rgba(76,215,246,0.08)' : 'rgba(6,182,212,0.06)',
               color: t.textAccent,
@@ -50,7 +50,7 @@ export const FloatDropdownContent = ({ theme }: FloatDropdownContentProps) => {
           로 부착되는 선택 목록. 5개 이상의 선택지가 있는 단일 선택에 사용한다. 프로젝트 공통
           컴포넌트는{' '}
           <code
-            className="font-mono text-xs px-1.5 py-0.5 rounded"
+            className="font-mono text-caption px-1.5 py-0.5 rounded"
             style={{
               backgroundColor: isDark ? 'rgba(76,215,246,0.08)' : 'rgba(6,182,212,0.06)',
               color: t.textAccent,
@@ -84,7 +84,7 @@ export const FloatDropdownContent = ({ theme }: FloatDropdownContentProps) => {
         >
           <div className="grid grid-cols-2 gap-6">
             <div className="flex flex-col gap-2">
-              <span className="font-korean text-xs" style={{ color: t.textMuted }}>
+              <span className="font-korean text-caption" style={{ color: t.textMuted }}>
                 유출 유형
               </span>
               <ComboBox
@@ -98,7 +98,7 @@ export const FloatDropdownContent = ({ theme }: FloatDropdownContentProps) => {
               </span>
             </div>
             <div className="flex flex-col gap-2">
-              <span className="font-korean text-xs" style={{ color: t.textMuted }}>
+              <span className="font-korean text-caption" style={{ color: t.textMuted }}>
                 예측 알고리즘
               </span>
               <ComboBox
@@ -112,7 +112,7 @@ export const FloatDropdownContent = ({ theme }: FloatDropdownContentProps) => {
               </span>
             </div>
           </div>
-          <p className="font-korean text-xs" style={{ color: t.textMuted }}>
+          <p className="font-korean text-caption" style={{ color: t.textMuted }}>
             위 컴포넌트는{' '}
             <code className="font-mono" style={{ color: t.textAccent }}>
               @common/components/ui/ComboBox
@@ -373,7 +373,7 @@ export const FloatDropdownContent = ({ theme }: FloatDropdownContentProps) => {
                 </span>
               </div>
               <div className="py-2.5 px-4">
-                <span className="font-korean text-xs" style={{ color: t.textSecondary }}>
+                <span className="font-korean text-caption" style={{ color: t.textSecondary }}>
                   {row.desc}
                 </span>
               </div>
@@ -423,10 +423,16 @@ export const FloatDropdownContent = ({ theme }: FloatDropdownContentProps) => {
                     : t.cardBorder,
               }}
             >
-              <span className="font-korean text-sm font-medium" style={{ color: t.textPrimary }}>
+              <span
+                className="font-korean text-body-2 font-medium"
+                style={{ color: t.textPrimary }}
+              >
                 {item.title}
               </span>
-              <span className="font-korean text-xs leading-5" style={{ color: t.textSecondary }}>
+              <span
+                className="font-korean text-caption leading-5"
+                style={{ color: t.textSecondary }}
+              >
                 {item.desc}
               </span>
             </div>
diff --git a/frontend/src/pages/design/float/FloatModalContent.tsx b/frontend/src/pages/design/float/FloatModalContent.tsx
index 5eed471..0557b78 100644
--- a/frontend/src/pages/design/float/FloatModalContent.tsx
+++ b/frontend/src/pages/design/float/FloatModalContent.tsx
@@ -88,9 +88,9 @@ export const FloatModalContent = ({ theme }: FloatModalContentProps) => {
         <h2 className="font-sans text-xl font-bold" style={{ color: t.textPrimary }}>
           Modal
         </h2>
-        <p className="font-korean text-sm leading-6" style={{ color: t.textSecondary }}>
+        <p className="font-korean text-body-2 leading-6" style={{ color: t.textSecondary }}>
           <code
-            className="font-mono text-xs px-1.5 py-0.5 rounded"
+            className="font-mono text-caption px-1.5 py-0.5 rounded"
             style={{
               backgroundColor: isDark ? 'rgba(76,215,246,0.08)' : 'rgba(6,182,212,0.06)',
               color: t.textAccent,
@@ -156,7 +156,7 @@ export const FloatModalContent = ({ theme }: FloatModalContentProps) => {
                 </button>
               ))}
             </div>
-            <span className="font-korean text-xs" style={{ color: t.textMuted }}>
+            <span className="font-korean text-caption" style={{ color: t.textMuted }}>
               {SIZE_CONFIG[activeSize].desc}
             </span>
           </div>
@@ -166,7 +166,7 @@ export const FloatModalContent = ({ theme }: FloatModalContentProps) => {
             <button
               type="button"
               onClick={() => setIsModalOpen(true)}
-              className="px-4 py-2 rounded border border-solid font-korean text-sm font-medium transition-opacity hover:opacity-80"
+              className="px-4 py-2 rounded border border-solid font-korean text-body-2 font-medium transition-opacity hover:opacity-80"
               style={{
                 backgroundColor: isDark ? 'rgba(76,215,246,0.15)' : 'rgba(6,182,212,0.12)',
                 borderColor: t.textAccent,
@@ -178,7 +178,7 @@ export const FloatModalContent = ({ theme }: FloatModalContentProps) => {
             <button
               type="button"
               onClick={() => setIsConfirmOpen(true)}
-              className="px-4 py-2 rounded border border-solid font-korean text-sm font-medium transition-opacity hover:opacity-80"
+              className="px-4 py-2 rounded border border-solid font-korean text-body-2 font-medium transition-opacity hover:opacity-80"
               style={{
                 backgroundColor: isDark ? 'rgba(239,68,68,0.10)' : 'rgba(239,68,68,0.06)',
                 borderColor: 'rgba(239,68,68,0.40)',
@@ -200,7 +200,7 @@ export const FloatModalContent = ({ theme }: FloatModalContentProps) => {
           className="rounded-lg border border-solid p-5 flex flex-col gap-3"
           style={{ backgroundColor: t.cardBg, borderColor: t.cardBorder }}
         >
-          <p className="font-korean text-sm leading-6" style={{ color: t.textSecondary }}>
+          <p className="font-korean text-body-2 leading-6" style={{ color: t.textSecondary }}>
             Confirm은 독립 컴포넌트가 아닌 <strong>Modal의 variant</strong>다. 타이틀 + 단문 메시지
             + 취소/확인 2버튼 구성. 파괴적 작업(삭제, 초기화) 전 사용자 의도를 확인한다.
           </p>
@@ -423,7 +423,7 @@ export const FloatModalContent = ({ theme }: FloatModalContentProps) => {
               style={{ backgroundColor: t.cardBg, borderColor: t.cardBorder }}
             >
               <span
-                className="font-mono text-sm rounded border border-solid px-2 py-0.5 shrink-0"
+                className="font-mono text-body-2 rounded border border-solid px-2 py-0.5 shrink-0"
                 style={{ color: t.textAccent, borderColor: t.cardBorder }}
               >
                 {row.range}
@@ -434,7 +434,10 @@ export const FloatModalContent = ({ theme }: FloatModalContentProps) => {
               >
                 {row.status}
               </span>
-              <span className="font-korean text-xs leading-5" style={{ color: t.textSecondary }}>
+              <span
+                className="font-korean text-caption leading-5"
+                style={{ color: t.textSecondary }}
+              >
                 {row.desc}
               </span>
             </div>
@@ -480,7 +483,7 @@ export const FloatModalContent = ({ theme }: FloatModalContentProps) => {
               }}
             >
               <div className="py-2.5 px-4">
-                <span className="font-mono text-xs" style={{ color: t.textPrimary }}>
+                <span className="font-mono text-caption" style={{ color: t.textPrimary }}>
                   {item.component}
                 </span>
               </div>
@@ -496,7 +499,7 @@ export const FloatModalContent = ({ theme }: FloatModalContentProps) => {
                 </span>
               </div>
               <div className="py-2.5 px-4">
-                <span className="font-korean text-xs" style={{ color: t.textSecondary }}>
+                <span className="font-korean text-caption" style={{ color: t.textSecondary }}>
                   {item.trigger}
                 </span>
               </div>
@@ -533,7 +536,10 @@ export const FloatModalContent = ({ theme }: FloatModalContentProps) => {
               className="flex items-center justify-between px-5 py-4 border-b border-solid shrink-0"
               style={{ borderColor: modalBorder }}
             >
-              <span className="font-korean text-sm font-medium" style={{ color: t.textPrimary }}>
+              <span
+                className="font-korean text-body-2 font-medium"
+                style={{ color: t.textPrimary }}
+              >
                 Modal Preview — {SIZE_CONFIG[activeSize].label} ({SIZE_CONFIG[activeSize].width})
               </span>
               <button
@@ -542,16 +548,16 @@ export const FloatModalContent = ({ theme }: FloatModalContentProps) => {
                 className="w-7 h-7 rounded flex items-center justify-center hover:opacity-70 transition-opacity"
                 style={{ backgroundColor: isDark ? 'rgba(66,71,84,0.25)' : '#f1f5f9' }}
               >
-                <span className="font-mono text-sm" style={{ color: t.textMuted }}>
+                <span className="font-mono text-body-2" style={{ color: t.textMuted }}>
                   ✕
                 </span>
               </button>
             </div>
             <div className="px-5 py-5 flex flex-col gap-3 overflow-y-auto">
-              <p className="font-korean text-sm leading-6" style={{ color: t.textSecondary }}>
+              <p className="font-korean text-body-2 leading-6" style={{ color: t.textSecondary }}>
                 이 모달은{' '}
                 <code
-                  className="font-mono text-xs px-1 rounded"
+                  className="font-mono text-caption px-1 rounded"
                   style={{
                     backgroundColor: isDark ? 'rgba(76,215,246,0.08)' : 'rgba(6,182,212,0.06)',
                     color: t.textAccent,
@@ -568,7 +574,7 @@ export const FloatModalContent = ({ theme }: FloatModalContentProps) => {
                     className="rounded border border-solid px-3 py-2.5"
                     style={{ borderColor: t.cardBorder }}
                   >
-                    <span className="font-korean text-xs" style={{ color: t.textMuted }}>
+                    <span className="font-korean text-caption" style={{ color: t.textMuted }}>
                       {label}
                     </span>
                   </div>
@@ -582,7 +588,7 @@ export const FloatModalContent = ({ theme }: FloatModalContentProps) => {
               <button
                 type="button"
                 onClick={() => setIsModalOpen(false)}
-                className="px-4 py-2 rounded border border-solid font-korean text-sm transition-opacity hover:opacity-70"
+                className="px-4 py-2 rounded border border-solid font-korean text-body-2 transition-opacity hover:opacity-70"
                 style={{ borderColor: t.cardBorder, color: t.textMuted }}
               >
                 취소
@@ -590,7 +596,7 @@ export const FloatModalContent = ({ theme }: FloatModalContentProps) => {
               <button
                 type="button"
                 onClick={() => setIsModalOpen(false)}
-                className="px-4 py-2 rounded font-korean text-sm font-medium transition-opacity hover:opacity-80"
+                className="px-4 py-2 rounded font-korean text-body-2 font-medium transition-opacity hover:opacity-80"
                 style={{
                   backgroundColor: isDark ? 'rgba(76,215,246,0.18)' : 'rgba(6,182,212,0.14)',
                   color: t.textAccent,
@@ -624,13 +630,16 @@ export const FloatModalContent = ({ theme }: FloatModalContentProps) => {
             >
               <div className="flex items-center gap-2">
                 <span style={{ color: '#ef4444', fontSize: '16px' }}>⚠</span>
-                <span className="font-korean text-sm font-medium" style={{ color: t.textPrimary }}>
+                <span
+                  className="font-korean text-body-2 font-medium"
+                  style={{ color: t.textPrimary }}
+                >
                   항목을 삭제하시겠습니까?
                 </span>
               </div>
             </div>
             <div className="px-5 py-4">
-              <p className="font-korean text-sm leading-6" style={{ color: t.textSecondary }}>
+              <p className="font-korean text-body-2 leading-6" style={{ color: t.textSecondary }}>
                 삭제된 데이터는 복구할 수 없습니다. 계속 진행하시겠습니까?
               </p>
             </div>
@@ -641,7 +650,7 @@ export const FloatModalContent = ({ theme }: FloatModalContentProps) => {
               <button
                 type="button"
                 onClick={() => setIsConfirmOpen(false)}
-                className="px-4 py-2 rounded border border-solid font-korean text-sm transition-opacity hover:opacity-70"
+                className="px-4 py-2 rounded border border-solid font-korean text-body-2 transition-opacity hover:opacity-70"
                 style={{ borderColor: t.cardBorder, color: t.textMuted }}
               >
                 취소
@@ -649,7 +658,7 @@ export const FloatModalContent = ({ theme }: FloatModalContentProps) => {
               <button
                 type="button"
                 onClick={() => setIsConfirmOpen(false)}
-                className="px-4 py-2 rounded font-korean text-sm font-medium transition-opacity hover:opacity-80"
+                className="px-4 py-2 rounded font-korean text-body-2 font-medium transition-opacity hover:opacity-80"
                 style={{
                   backgroundColor: isDark ? 'rgba(239,68,68,0.18)' : 'rgba(239,68,68,0.12)',
                   color: '#ef4444',
diff --git a/frontend/src/pages/design/float/FloatOverlayContent.tsx b/frontend/src/pages/design/float/FloatOverlayContent.tsx
index 5bc40ea..8d58cc8 100644
--- a/frontend/src/pages/design/float/FloatOverlayContent.tsx
+++ b/frontend/src/pages/design/float/FloatOverlayContent.tsx
@@ -63,10 +63,10 @@ export const FloatOverlayContent = ({ theme }: FloatOverlayContentProps) => {
         <h2 className="font-sans text-xl font-bold" style={{ color: t.textPrimary }}>
           Overlay
         </h2>
-        <p className="font-korean text-sm leading-6" style={{ color: t.textSecondary }}>
+        <p className="font-korean text-body-2 leading-6" style={{ color: t.textSecondary }}>
           지도 컨테이너 위에
           <code
-            className="font-mono text-xs px-1.5 py-0.5 mx-1 rounded"
+            className="font-mono text-caption px-1.5 py-0.5 mx-1 rounded"
             style={{
               backgroundColor: isDark ? 'rgba(76,215,246,0.08)' : 'rgba(6,182,212,0.06)',
               color: t.textAccent,
@@ -133,12 +133,12 @@ export const FloatOverlayContent = ({ theme }: FloatOverlayContentProps) => {
                 </span>
               </div>
               <div className="py-2.5 px-4">
-                <span className="font-korean text-xs" style={{ color: t.textSecondary }}>
+                <span className="font-korean text-caption" style={{ color: t.textSecondary }}>
                   {row.overlay}
                 </span>
               </div>
               <div className="py-2.5 px-4">
-                <span className="font-korean text-xs" style={{ color: t.textSecondary }}>
+                <span className="font-korean text-caption" style={{ color: t.textSecondary }}>
                   {row.modal}
                 </span>
               </div>
@@ -284,7 +284,7 @@ export const FloatOverlayContent = ({ theme }: FloatOverlayContentProps) => {
           className="rounded-lg border border-solid p-5 flex flex-col gap-4"
           style={{ backgroundColor: t.cardBg, borderColor: t.cardBorder }}
         >
-          <p className="font-korean text-sm leading-6" style={{ color: t.textSecondary }}>
+          <p className="font-korean text-body-2 leading-6" style={{ color: t.textSecondary }}>
             <strong>ScatPopup</strong>은 지도 마커에 앵커된 컨텍스트 팝업이다. Modal(fixed 뷰포트
             중앙)과 달리 마커 위치에서 동적으로 좌표를 계산하며, 지도 패닝·줌 시 위치가 함께
             업데이트된다.
@@ -307,7 +307,7 @@ export const FloatOverlayContent = ({ theme }: FloatOverlayContentProps) => {
                 <span className="font-mono text-caption" style={{ color: t.textMuted }}>
                   {item.label}
                 </span>
-                <span className="font-mono text-xs" style={{ color: t.textAccent }}>
+                <span className="font-mono text-caption" style={{ color: t.textAccent }}>
                   {item.value}
                 </span>
                 <span className="font-korean text-caption" style={{ color: t.textSecondary }}>
@@ -323,7 +323,7 @@ export const FloatOverlayContent = ({ theme }: FloatOverlayContentProps) => {
               borderColor: 'rgba(234,179,8,0.25)',
             }}
           >
-            <span className="font-korean text-xs" style={{ color: '#eab308' }}>
+            <span className="font-korean text-caption" style={{ color: '#eab308' }}>
               주의: ScatPopup은 MapLibre GL JS의 Popup/Marker 컴포넌트가 아닌 React DOM으로 구현됨.
               지도 컨테이너 내부에 position: absolute로 렌더링된다.
             </span>
@@ -377,7 +377,7 @@ export const FloatOverlayContent = ({ theme }: FloatOverlayContentProps) => {
               }}
             >
               <div className="py-2.5 px-3">
-                <span className="font-mono text-xs" style={{ color: t.textPrimary }}>
+                <span className="font-mono text-caption" style={{ color: t.textPrimary }}>
                   {item.component}
                 </span>
               </div>
@@ -413,7 +413,10 @@ export const FloatOverlayContent = ({ theme }: FloatOverlayContentProps) => {
                 </span>
               </div>
               <div className="py-2.5 px-3">
-                <span className="font-korean text-xs leading-5" style={{ color: t.textSecondary }}>
+                <span
+                  className="font-korean text-caption leading-5"
+                  style={{ color: t.textSecondary }}
+                >
                   {item.desc}
                 </span>
               </div>
diff --git a/frontend/src/pages/design/float/FloatToastContent.tsx b/frontend/src/pages/design/float/FloatToastContent.tsx
index 05aea63..1f14fb1 100644
--- a/frontend/src/pages/design/float/FloatToastContent.tsx
+++ b/frontend/src/pages/design/float/FloatToastContent.tsx
@@ -84,10 +84,10 @@ export const FloatToastContent = ({ theme }: FloatToastContentProps) => {
             미구현 — 설계 사양
           </span>
         </div>
-        <p className="font-korean text-sm leading-6" style={{ color: t.textSecondary }}>
+        <p className="font-korean text-body-2 leading-6" style={{ color: t.textSecondary }}>
           화면을 차단하지 않는 비파괴적 알림.
           <code
-            className="font-mono text-xs px-1.5 py-0.5 mx-1 rounded"
+            className="font-mono text-caption px-1.5 py-0.5 mx-1 rounded"
             style={{
               backgroundColor: isDark ? 'rgba(76,215,246,0.08)' : 'rgba(6,182,212,0.06)',
               color: t.textAccent,
@@ -97,7 +97,7 @@ export const FloatToastContent = ({ theme }: FloatToastContentProps) => {
           </code>
           에 위치하며 일정 시간 후 자동으로 사라진다. 현재 프로젝트에서는{' '}
           <code
-            className="font-mono text-xs px-1.5 py-0.5 mx-1 rounded"
+            className="font-mono text-caption px-1.5 py-0.5 mx-1 rounded"
             style={{
               backgroundColor: isDark ? 'rgba(239,68,68,0.08)' : 'rgba(239,68,68,0.05)',
               color: '#ef4444',
@@ -129,7 +129,7 @@ export const FloatToastContent = ({ theme }: FloatToastContentProps) => {
           className="rounded-lg border border-solid p-5 flex flex-col gap-4"
           style={{ backgroundColor: t.cardBg, borderColor: t.cardBorder }}
         >
-          <p className="font-korean text-xs" style={{ color: t.textMuted }}>
+          <p className="font-korean text-caption" style={{ color: t.textMuted }}>
             버튼 클릭 시 화면 우하단에 Toast가 표시됩니다. 3초 후 자동으로 사라집니다.
           </p>
           <div className="flex gap-2 flex-wrap">
@@ -280,7 +280,7 @@ export const FloatToastContent = ({ theme }: FloatToastContentProps) => {
                   <span className="font-mono text-lg" style={{ color: cfg.color }}>
                     {cfg.icon}
                   </span>
-                  <span className="font-mono text-sm font-bold" style={{ color: cfg.color }}>
+                  <span className="font-mono text-body-2 font-bold" style={{ color: cfg.color }}>
                     {cfg.label}
                   </span>
                 </div>
@@ -311,7 +311,7 @@ export const FloatToastContent = ({ theme }: FloatToastContentProps) => {
           className="rounded-lg border border-solid p-5 flex flex-col gap-4"
           style={{ backgroundColor: t.cardBg, borderColor: t.cardBorder }}
         >
-          <p className="font-korean text-sm leading-6" style={{ color: t.textSecondary }}>
+          <p className="font-korean text-body-2 leading-6" style={{ color: t.textSecondary }}>
             Toast는 앱 어디서든 호출해야 하므로 <strong>Zustand store + useToast hook</strong>{' '}
             패턴을 권장한다. ToastContainer는 App.tsx 최상위에 한 번만 렌더링한다.
           </p>
@@ -387,7 +387,7 @@ export const FloatToastContent = ({ theme }: FloatToastContentProps) => {
                   <span className="font-mono text-base shrink-0" style={{ color: cfg.color }}>
                     {cfg.icon}
                   </span>
-                  <span className="font-korean text-sm flex-1" style={{ color: t.textPrimary }}>
+                  <span className="font-korean text-body-2 flex-1" style={{ color: t.textPrimary }}>
                     {toast.message}
                   </span>
                   <button
diff --git a/frontend/src/tabs/admin/components/AdminPlaceholder.tsx b/frontend/src/tabs/admin/components/AdminPlaceholder.tsx
index 72b9797..f668406 100644
--- a/frontend/src/tabs/admin/components/AdminPlaceholder.tsx
+++ b/frontend/src/tabs/admin/components/AdminPlaceholder.tsx
@@ -6,7 +6,7 @@ interface AdminPlaceholderProps {
 const AdminPlaceholder = ({ label }: AdminPlaceholderProps) => (
   <div className="flex flex-col items-center justify-center h-full gap-3">
     <div className="text-4xl opacity-20">🚧</div>
-    <div className="text-sm font-korean text-fg-sub font-semibold">{label}</div>
+    <div className="text-body-2 font-korean text-fg-sub font-semibold">{label}</div>
     <div className="text-label-2 font-korean text-fg-disabled">해당 기능은 준비 중입니다.</div>
   </div>
 );
diff --git a/frontend/src/tabs/admin/components/AdminSidebar.tsx b/frontend/src/tabs/admin/components/AdminSidebar.tsx
index 8c69a62..bb9877f 100644
--- a/frontend/src/tabs/admin/components/AdminSidebar.tsx
+++ b/frontend/src/tabs/admin/components/AdminSidebar.tsx
@@ -107,7 +107,7 @@ const AdminSidebar = ({ activeMenu, onSelect }: AdminSidebarProps) => {
     >
       {/* 헤더 */}
       <div className="px-4 py-3 border-b border-stroke bg-bg-elevated shrink-0">
-        <div className="text-xs font-bold text-fg font-korean flex items-center gap-1.5">
+        <div className="text-caption font-bold text-fg font-korean flex items-center gap-1.5">
           <span>⚙️</span> 관리자 설정
         </div>
       </div>
@@ -129,7 +129,7 @@ const AdminSidebar = ({ activeMenu, onSelect }: AdminSidebarProps) => {
                   color: hasActiveChild ? 'var(--color-accent)' : 'var(--fg-default)',
                 }}
               >
-                <span className="text-sm">{section.icon}</span>
+                <span className="text-body-2">{section.icon}</span>
                 <span className="flex-1 text-left">{section.label}</span>
                 <span
                   className="text-caption text-fg-disabled transition-transform"
diff --git a/frontend/src/tabs/admin/components/AdminView.tsx b/frontend/src/tabs/admin/components/AdminView.tsx
index 420b648..574dd66 100755
--- a/frontend/src/tabs/admin/components/AdminView.tsx
+++ b/frontend/src/tabs/admin/components/AdminView.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 import AdminSidebar from './AdminSidebar';
 import AdminPlaceholder from './AdminPlaceholder';
 import { findMenuLabel } from './adminMenuConfig';
@@ -19,9 +19,15 @@ import MonitorVesselPanel from './MonitorVesselPanel';
 import CollectHrPanel from './CollectHrPanel';
 import MonitorForecastPanel from './MonitorForecastPanel';
 import VesselMaterialsPanel from './VesselMaterialsPanel';
+import DeidentifyPanel from './DeidentifyPanel';
+import RndPoseidonPanel from './RndPoseidonPanel';
+import RndKospsPanel from './RndKospsPanel';
+import RndHnsAtmosPanel from './RndHnsAtmosPanel';
+import RndRescuePanel from './RndRescuePanel';
+import SystemArchPanel from './SystemArchPanel';
 
 /** 기존 패널이 있는 메뉴 ID 매핑 */
-const PANEL_MAP: Record<string, () => JSX.Element> = {
+const PANEL_MAP: Record<string, () => React.JSX.Element> = {
   users: () => <UsersPanel />,
   permissions: () => <PermissionsPanel />,
   menus: () => <MenusPanel />,
@@ -42,6 +48,12 @@ const PANEL_MAP: Record<string, () => JSX.Element> = {
   'monitor-vessel': () => <MonitorVesselPanel />,
   'collect-hr': () => <CollectHrPanel />,
   'monitor-forecast': () => <MonitorForecastPanel />,
+  deidentify: () => <DeidentifyPanel />,
+  'rnd-poseidon': () => <RndPoseidonPanel />,
+  'rnd-kosps': () => <RndKospsPanel />,
+  'rnd-hns-atmos': () => <RndHnsAtmosPanel />,
+  'rnd-rescue': () => <RndRescuePanel />,
+  'system-arch': () => <SystemArchPanel />,
 };
 
 export function AdminView() {
diff --git a/frontend/src/tabs/admin/components/AssetUploadPanel.tsx b/frontend/src/tabs/admin/components/AssetUploadPanel.tsx
index 6de8a45..0112a4c 100644
--- a/frontend/src/tabs/admin/components/AssetUploadPanel.tsx
+++ b/frontend/src/tabs/admin/components/AssetUploadPanel.tsx
@@ -103,7 +103,7 @@ function AssetUploadPanel() {
       {/* 헤더 */}
       <div className="px-6 py-4 border-b border-stroke flex-shrink-0">
         <h1 className="text-lg font-bold text-fg font-korean">자산 현행화</h1>
-        <p className="text-xs text-fg-disabled mt-1 font-korean">
+        <p className="text-caption text-fg-disabled mt-1 font-korean">
           자산 데이터를 업로드하여 현행화합니다
         </p>
       </div>
@@ -115,7 +115,7 @@ function AssetUploadPanel() {
           <div className="flex-1 max-w-[560px] space-y-4">
             <div className="rounded-lg border border-stroke bg-bg-surface overflow-hidden">
               <div className="px-5 py-3 border-b border-stroke">
-                <h2 className="text-sm font-bold text-fg font-korean">파일 업로드</h2>
+                <h2 className="text-body-2 font-bold text-fg font-korean">파일 업로드</h2>
               </div>
               <div className="px-5 py-4 space-y-4">
                 {/* 드롭존 */}
@@ -135,12 +135,12 @@ function AssetUploadPanel() {
                 >
                   <div className="text-3xl mb-2 opacity-40">📁</div>
                   {selectedFile ? (
-                    <div className="text-xs font-semibold text-color-accent font-korean mb-1">
+                    <div className="text-caption font-semibold text-color-accent font-korean mb-1">
                       {selectedFile.name}
                     </div>
                   ) : (
                     <>
-                      <div className="text-xs font-semibold text-fg-sub font-korean mb-1">
+                      <div className="text-caption font-semibold text-fg-sub font-korean mb-1">
                         파일을 드래그하거나 클릭하여 업로드
                       </div>
                       <div className="text-caption text-fg-disabled font-korean mb-3">
@@ -148,7 +148,7 @@ function AssetUploadPanel() {
                       </div>
                       <button
                         type="button"
-                        className="px-4 py-1.5 text-xs font-semibold rounded-md bg-color-accent text-bg-0
+                        className="px-4 py-1.5 text-caption font-semibold rounded-md bg-color-accent text-bg-0
                           hover:shadow-[0_0_12px_rgba(6,182,212,0.3)] transition-all font-korean"
                         onClick={(e) => {
                           e.stopPropagation();
@@ -176,7 +176,7 @@ function AssetUploadPanel() {
                   <select
                     value={assetCategory}
                     onChange={(e) => setAssetCategory(e.target.value)}
-                    className="w-full px-3 py-2 text-xs bg-bg-elevated border border-stroke rounded-md
+                    className="w-full px-3 py-2 text-caption bg-bg-elevated border border-stroke rounded-md
                       text-fg focus:border-color-accent focus:outline-none font-korean"
                   >
                     {ASSET_CATEGORIES.map((c) => (
@@ -195,7 +195,7 @@ function AssetUploadPanel() {
                   <select
                     value={jurisdiction}
                     onChange={(e) => setJurisdiction(e.target.value)}
-                    className="w-full px-3 py-2 text-xs bg-bg-elevated border border-stroke rounded-md
+                    className="w-full px-3 py-2 text-caption bg-bg-elevated border border-stroke rounded-md
                       text-fg focus:border-color-accent focus:outline-none font-korean"
                   >
                     {JURISDICTIONS.map((j) => (
@@ -212,7 +212,7 @@ function AssetUploadPanel() {
                     업로드 방식
                   </label>
                   <div className="flex gap-4">
-                    <label className="flex items-center gap-1.5 cursor-pointer text-xs text-fg-sub font-korean">
+                    <label className="flex items-center gap-1.5 cursor-pointer text-caption text-fg-sub font-korean">
                       <input
                         type="radio"
                         checked={uploadMode === 'add'}
@@ -221,7 +221,7 @@ function AssetUploadPanel() {
                       />
                       추가 (기존 + 신규)
                     </label>
-                    <label className="flex items-center gap-1.5 cursor-pointer text-xs text-fg-sub font-korean">
+                    <label className="flex items-center gap-1.5 cursor-pointer text-caption text-fg-sub font-korean">
                       <input
                         type="radio"
                         checked={uploadMode === 'replace'}
@@ -238,7 +238,7 @@ function AssetUploadPanel() {
                   type="button"
                   onClick={handleUpload}
                   disabled={!selectedFile || uploaded}
-                  className={`w-full py-2.5 text-xs font-semibold rounded-md transition-all font-korean disabled:opacity-50 ${
+                  className={`w-full py-2.5 text-caption font-semibold rounded-md transition-all font-korean disabled:opacity-50 ${
                     uploaded
                       ? 'bg-[rgba(34,197,94,0.15)] text-color-success border border-status-green/30'
                       : 'bg-color-accent text-bg-0 hover:shadow-[0_0_12px_rgba(6,182,212,0.3)]'
@@ -255,7 +255,7 @@ function AssetUploadPanel() {
             {/* 수정 권한 체계 */}
             <div className="rounded-lg border border-stroke bg-bg-surface overflow-hidden">
               <div className="px-5 py-3 border-b border-stroke">
-                <h2 className="text-sm font-bold text-fg font-korean">수정 권한 체계</h2>
+                <h2 className="text-body-2 font-bold text-fg font-korean">수정 권한 체계</h2>
               </div>
               <div className="px-5 py-4 space-y-2">
                 {PERM_ITEMS.map((p) => (
@@ -264,13 +264,15 @@ function AssetUploadPanel() {
                     className="flex items-center gap-3 px-4 py-3 bg-bg-elevated border border-stroke rounded-md"
                   >
                     <div
-                      className="w-8 h-8 rounded-full flex items-center justify-center text-sm flex-shrink-0"
+                      className="w-8 h-8 rounded-full flex items-center justify-center text-body-2 flex-shrink-0"
                       style={{ background: p.bg }}
                     >
                       {p.icon}
                     </div>
                     <div>
-                      <div className={`text-xs font-bold font-korean ${p.color}`}>{p.role}</div>
+                      <div className={`text-caption font-bold font-korean ${p.color}`}>
+                        {p.role}
+                      </div>
                       <div className="text-caption text-fg-disabled font-korean mt-0.5">
                         {p.desc}
                       </div>
@@ -283,7 +285,7 @@ function AssetUploadPanel() {
             {/* 최근 업로드 이력 */}
             <div className="rounded-lg border border-stroke bg-bg-surface overflow-hidden">
               <div className="px-5 py-3 border-b border-stroke">
-                <h2 className="text-sm font-bold text-fg font-korean">최근 업로드 이력</h2>
+                <h2 className="text-body-2 font-bold text-fg font-korean">최근 업로드 이력</h2>
               </div>
               <div className="px-5 py-4 space-y-2">
                 {uploadHistory.length === 0 ? (
@@ -297,7 +299,9 @@ function AssetUploadPanel() {
                       className="flex justify-between items-center px-4 py-3 bg-bg-elevated border border-stroke rounded-md"
                     >
                       <div>
-                        <div className="text-xs font-semibold text-fg font-korean">{h.fileNm}</div>
+                        <div className="text-caption font-semibold text-fg font-korean">
+                          {h.fileNm}
+                        </div>
                         <div className="text-caption text-fg-disabled mt-0.5 font-korean">
                           {formatDate(h.regDtm)} · {h.uploaderNm} · {h.uploadCnt.toLocaleString()}건
                         </div>
diff --git a/frontend/src/tabs/admin/components/BoardMgmtPanel.tsx b/frontend/src/tabs/admin/components/BoardMgmtPanel.tsx
index a5ce0c7..7a77c9a 100644
--- a/frontend/src/tabs/admin/components/BoardMgmtPanel.tsx
+++ b/frontend/src/tabs/admin/components/BoardMgmtPanel.tsx
@@ -119,8 +119,8 @@ export default function BoardMgmtPanel({ initialCategory = '' }: BoardMgmtPanelP
     <div className="flex flex-col h-full overflow-hidden">
       {/* 헤더 */}
       <div className="flex items-center justify-between px-5 py-3 border-b border-stroke-1">
-        <h2 className="text-sm font-semibold text-fg">게시판 관리</h2>
-        <span className="text-xs text-fg-disabled">총 {data?.totalCount ?? 0}건</span>
+        <h2 className="text-body-2 font-semibold text-fg">게시판 관리</h2>
+        <span className="text-caption text-fg-disabled">총 {data?.totalCount ?? 0}건</span>
       </div>
 
       {/* 카테고리 탭 + 검색 */}
@@ -130,7 +130,7 @@ export default function BoardMgmtPanel({ initialCategory = '' }: BoardMgmtPanelP
             <button
               key={tab.code}
               onClick={() => handleCategoryChange(tab.code)}
-              className={`px-3 py-1 text-xs rounded-full transition-colors ${
+              className={`px-3 py-1 text-caption rounded-full transition-colors ${
                 activeCategory === tab.code
                   ? 'bg-blue-500/20 text-blue-400 font-medium'
                   : 'text-fg-disabled hover:text-fg-sub hover:bg-bg-elevated'
@@ -146,11 +146,11 @@ export default function BoardMgmtPanel({ initialCategory = '' }: BoardMgmtPanelP
             value={searchInput}
             onChange={(e) => setSearchInput(e.target.value)}
             placeholder="제목/작성자 검색"
-            className="px-2 py-1 text-xs rounded bg-bg-elevated border border-stroke-1 text-fg placeholder:text-text-4 w-48"
+            className="px-2 py-1 text-caption rounded bg-bg-elevated border border-stroke-1 text-fg placeholder:text-text-4 w-48"
           />
           <button
             type="submit"
-            className="px-2 py-1 text-xs rounded bg-bg-elevated border border-stroke-1 text-fg-sub hover:bg-bg-card"
+            className="px-2 py-1 text-caption rounded bg-bg-elevated border border-stroke-1 text-fg-sub hover:bg-bg-card"
           >
             검색
           </button>
@@ -162,7 +162,7 @@ export default function BoardMgmtPanel({ initialCategory = '' }: BoardMgmtPanelP
         <button
           onClick={handleDelete}
           disabled={selected.size === 0 || deleting}
-          className="px-3 py-1 text-xs rounded bg-red-500/20 text-red-400 hover:bg-red-500/30 disabled:opacity-40 disabled:cursor-not-allowed"
+          className="px-3 py-1 text-caption rounded bg-red-500/20 text-red-400 hover:bg-red-500/30 disabled:opacity-40 disabled:cursor-not-allowed"
         >
           {deleting ? '삭제 중...' : `선택 삭제 (${selected.size})`}
         </button>
@@ -170,7 +170,7 @@ export default function BoardMgmtPanel({ initialCategory = '' }: BoardMgmtPanelP
 
       {/* 테이블 */}
       <div className="flex-1 overflow-auto">
-        <table className="w-full text-xs">
+        <table className="w-full text-caption">
           <thead className="sticky top-0 bg-bg-surface z-10">
             <tr className="border-b border-stroke-1 text-fg-disabled">
               <th className="w-8 py-2 text-center">
@@ -222,7 +222,7 @@ export default function BoardMgmtPanel({ initialCategory = '' }: BoardMgmtPanelP
           <button
             onClick={() => setPage((p) => Math.max(1, p - 1))}
             disabled={page <= 1}
-            className="px-2 py-1 text-xs rounded text-fg-disabled hover:bg-bg-elevated disabled:opacity-30"
+            className="px-2 py-1 text-caption rounded text-fg-disabled hover:bg-bg-elevated disabled:opacity-30"
           >
             &lt;
           </button>
@@ -234,7 +234,7 @@ export default function BoardMgmtPanel({ initialCategory = '' }: BoardMgmtPanelP
               <button
                 key={p}
                 onClick={() => setPage(p)}
-                className={`w-7 h-7 text-xs rounded ${
+                className={`w-7 h-7 text-caption rounded ${
                   p === page
                     ? 'bg-blue-500/20 text-blue-400 font-medium'
                     : 'text-fg-disabled hover:bg-bg-elevated'
@@ -247,7 +247,7 @@ export default function BoardMgmtPanel({ initialCategory = '' }: BoardMgmtPanelP
           <button
             onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
             disabled={page >= totalPages}
-            className="px-2 py-1 text-xs rounded text-fg-disabled hover:bg-bg-elevated disabled:opacity-30"
+            className="px-2 py-1 text-caption rounded text-fg-disabled hover:bg-bg-elevated disabled:opacity-30"
           >
             &gt;
           </button>
diff --git a/frontend/src/tabs/admin/components/CleanupEquipPanel.tsx b/frontend/src/tabs/admin/components/CleanupEquipPanel.tsx
index ba1793a..0f60686 100644
--- a/frontend/src/tabs/admin/components/CleanupEquipPanel.tsx
+++ b/frontend/src/tabs/admin/components/CleanupEquipPanel.tsx
@@ -99,13 +99,15 @@ function CleanupEquipPanel() {
       <div className="flex items-center justify-between px-6 py-4 border-b border-stroke">
         <div>
           <h1 className="text-lg font-bold text-fg font-korean">방제장비 현황</h1>
-          <p className="text-xs text-fg-disabled mt-1 font-korean">총 {filtered.length}개 기관</p>
+          <p className="text-caption text-fg-disabled mt-1 font-korean">
+            총 {filtered.length}개 기관
+          </p>
         </div>
         <div className="flex items-center gap-3">
           <select
             value={regionFilter}
             onChange={handleFilterChange(setRegionFilter)}
-            className="px-3 py-2 text-xs bg-bg-elevated border border-stroke rounded-md text-fg focus:border-color-accent focus:outline-none font-korean"
+            className="px-3 py-2 text-caption bg-bg-elevated border border-stroke rounded-md text-fg focus:border-color-accent focus:outline-none font-korean"
           >
             <option value="전체">전체 관할청</option>
             <option value="남해">남해청</option>
@@ -117,7 +119,7 @@ function CleanupEquipPanel() {
           <select
             value={typeFilter}
             onChange={handleFilterChange(setTypeFilter)}
-            className="px-3 py-2 text-xs bg-bg-elevated border border-stroke rounded-md text-fg focus:border-color-accent focus:outline-none font-korean"
+            className="px-3 py-2 text-caption bg-bg-elevated border border-stroke rounded-md text-fg focus:border-color-accent focus:outline-none font-korean"
           >
             <option value="전체">전체 유형</option>
             {typeOptions.map((t) => (
@@ -129,7 +131,7 @@ function CleanupEquipPanel() {
           <select
             value={equipFilter}
             onChange={handleFilterChange(setEquipFilter)}
-            className="px-3 py-2 text-xs bg-bg-elevated border border-stroke rounded-md text-fg focus:border-color-accent focus:outline-none font-korean"
+            className="px-3 py-2 text-caption bg-bg-elevated border border-stroke rounded-md text-fg focus:border-color-accent focus:outline-none font-korean"
           >
             <option value="전체">전체 장비</option>
             <option value="방제선">방제선</option>
@@ -146,11 +148,11 @@ function CleanupEquipPanel() {
               setSearchTerm(e.target.value);
               setCurrentPage(1);
             }}
-            className="w-56 px-3 py-2 text-xs bg-bg-elevated border border-stroke rounded-md text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none font-korean"
+            className="w-56 px-3 py-2 text-caption bg-bg-elevated border border-stroke rounded-md text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none font-korean"
           />
           <button
             onClick={load}
-            className="px-4 py-2 text-xs font-semibold rounded-md bg-bg-elevated border border-stroke text-fg-sub hover:border-color-accent hover:text-color-accent transition-all font-korean"
+            className="px-4 py-2 text-caption font-semibold rounded-md bg-bg-elevated border border-stroke text-fg-sub hover:border-color-accent hover:text-color-accent transition-all font-korean"
           >
             새로고침
           </button>
@@ -160,7 +162,7 @@ function CleanupEquipPanel() {
       {/* 테이블 */}
       <div className="flex-1 overflow-auto">
         {loading ? (
-          <div className="flex items-center justify-center h-32 text-fg-disabled text-sm font-korean">
+          <div className="flex items-center justify-center h-32 text-fg-disabled text-body-2 font-korean">
             불러오는 중...
           </div>
         ) : (
@@ -217,7 +219,7 @@ function CleanupEquipPanel() {
                 <tr>
                   <td
                     colSpan={11}
-                    className="px-6 py-10 text-center text-xs text-fg-disabled font-korean"
+                    className="px-6 py-10 text-center text-caption text-fg-disabled font-korean"
                   >
                     조회된 기관이 없습니다.
                   </td>
diff --git a/frontend/src/tabs/admin/components/CollectHrPanel.tsx b/frontend/src/tabs/admin/components/CollectHrPanel.tsx
index b943d1d..5cd324e 100644
--- a/frontend/src/tabs/admin/components/CollectHrPanel.tsx
+++ b/frontend/src/tabs/admin/components/CollectHrPanel.tsx
@@ -211,7 +211,7 @@ const HEADERS = [
 function HrTable({ rows, loading }: { rows: HrCollectItem[]; loading: boolean }) {
   return (
     <div className="overflow-auto">
-      <table className="w-full text-xs border-collapse">
+      <table className="w-full text-caption border-collapse">
         <thead>
           <tr className="bg-bg-elevated text-t3 uppercase tracking-wide">
             {HEADERS.map((h) => (
@@ -317,10 +317,10 @@ export default function CollectHrPanel() {
     <div className="flex flex-col h-full overflow-hidden">
       {/* 헤더 */}
       <div className="flex items-center justify-between px-5 py-3 border-b border-stroke-1 shrink-0">
-        <h2 className="text-sm font-semibold text-t1">인사정보 수집 현황</h2>
+        <h2 className="text-body-2 font-semibold text-t1">인사정보 수집 현황</h2>
         <div className="flex items-center gap-3">
           {lastUpdate && (
-            <span className="text-xs text-t3">
+            <span className="text-caption text-t3">
               갱신:{' '}
               {lastUpdate.toLocaleTimeString('ko-KR', {
                 hour: '2-digit',
@@ -332,7 +332,7 @@ export default function CollectHrPanel() {
           <button
             onClick={fetchData}
             disabled={loading}
-            className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded bg-bg-elevated hover:bg-bg-card text-t2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+            className="flex items-center gap-1.5 px-3 py-1.5 text-caption rounded bg-bg-elevated hover:bg-bg-card text-t2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
           >
             <svg
               className={`w-3.5 h-3.5 ${loading ? 'animate-spin' : ''}`}
@@ -354,11 +354,11 @@ export default function CollectHrPanel() {
 
       {/* 상태 표시줄 */}
       <div className="flex items-center gap-3 px-5 py-2 shrink-0 border-b border-stroke-1 bg-bg-base">
-        <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-emerald-500/10 text-emerald-400">
+        <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-caption bg-emerald-500/10 text-emerald-400">
           <span className="w-1.5 h-1.5 rounded-full bg-emerald-400" />
           수집 완료 {completedCount}건
         </span>
-        <span className="text-xs text-t3">
+        <span className="text-caption text-t3">
           전체 {rows.length}건 (활성: {activeCount} / 비활성: {rows.length - activeCount})
         </span>
       </div>
diff --git a/frontend/src/tabs/admin/components/DeidentifyPanel.tsx b/frontend/src/tabs/admin/components/DeidentifyPanel.tsx
new file mode 100644
index 0000000..e5a579f
--- /dev/null
+++ b/frontend/src/tabs/admin/components/DeidentifyPanel.tsx
@@ -0,0 +1,1241 @@
+import { useState, useEffect, useCallback } from 'react';
+
+// ─── 타입 ──────────────────────────────────────────────────
+
+type TaskStatus = '완료' | '진행중' | '대기' | '오류';
+
+interface AuditLogEntry {
+  id: string;
+  time: string;
+  operator: string;
+  operatorId: string;
+  action: string;
+  targetData: string;
+  result: string;
+  resultType: '성공' | '실패' | '거부' | '진행중';
+  ip: string;
+  browser: string;
+  detail: {
+    dataCount: number;
+    rulesApplied: string;
+    processedCount: number;
+    errorCount: number;
+  };
+}
+
+interface DeidentifyTask {
+  id: string;
+  name: string;
+  target: string;
+  status: TaskStatus;
+  startTime: string;
+  progress: number;
+  createdBy: string;
+}
+
+type SourceType = 'db' | 'file' | 'api';
+type ProcessMode = 'immediate' | 'scheduled' | 'oneshot';
+type RepeatType = 'daily' | 'weekly' | 'monthly';
+type DeidentifyTechnique =
+  | '마스킹'
+  | '삭제'
+  | '범주화'
+  | '암호화'
+  | '샘플링'
+  | '가명처리'
+  | '유지';
+
+interface FieldConfig {
+  name: string;
+  dataType: string;
+  technique: DeidentifyTechnique;
+  configValue: string;
+  selected: boolean;
+}
+
+interface DbConfig {
+  host: string;
+  port: string;
+  database: string;
+  tableName: string;
+}
+
+interface ApiConfig {
+  url: string;
+  method: 'GET' | 'POST';
+}
+
+interface ScheduleConfig {
+  hour: string;
+  repeatType: RepeatType;
+  weekday: string;
+  startDate: string;
+  notifyOnComplete: boolean;
+  notifyOnError: boolean;
+}
+
+interface OneshotConfig {
+  date: string;
+  hour: string;
+}
+
+interface WizardState {
+  step: number;
+  taskName: string;
+  sourceType: SourceType;
+  dbConfig: DbConfig;
+  apiConfig: ApiConfig;
+  fields: FieldConfig[];
+  processMode: ProcessMode;
+  scheduleConfig: ScheduleConfig;
+  oneshotConfig: OneshotConfig;
+  saveAsTemplate: boolean;
+  applyTemplate: string;
+  confirmed: boolean;
+}
+
+// ─── Mock 데이터 ────────────────────────────────────────────
+
+const MOCK_TASKS: DeidentifyTask[] = [
+  { id: '001', name: 'customer_2024', target: '선박/운항 - 선장·선원 성명', status: '완료', startTime: '2026-04-10 14:30', progress: 100, createdBy: '관리자' },
+  { id: '002', name: 'transaction_04', target: '사고 현장 - 현장사진, 영상내 인물', status: '진행중', startTime: '2026-04-10 14:15', progress: 82, createdBy: '김담당' },
+  { id: '003', name: 'employee_info', target: '인사정보 - 계정, 로그인 정보', status: '대기', startTime: '2026-04-10 22:00', progress: 0, createdBy: '이담당' },
+  { id: '004', name: 'vendor_data', target: 'HNS 대응 - 화학물질 취급자, 방제업체 연락처', status: '오류', startTime: '2026-04-09 13:45', progress: 45, createdBy: '관리자' },
+  { id: '005', name: 'partner_contacts', target: '시스템 운영 - 관리자, 운영자 접속로그', status: '완료', startTime: '2026-04-08 09:00', progress: 100, createdBy: '박담당' },
+];
+
+const DEFAULT_FIELDS: FieldConfig[] = [
+  { name: '고객ID', dataType: '문자열', technique: '삭제', configValue: '-', selected: true },
+  { name: '이름', dataType: '문자열', technique: '마스킹', configValue: '*로 치환', selected: true },
+  { name: '휴대폰', dataType: '문자열', technique: '마스킹', configValue: '010-****-****', selected: true },
+  { name: '주소', dataType: '문자열', technique: '범주화', configValue: '시/도만 표시', selected: true },
+  { name: '이메일', dataType: '문자열', technique: '가명처리', configValue: '키: random_001', selected: true },
+  { name: '생년월일', dataType: '날짜', technique: '범주화', configValue: '연도만 표시', selected: true },
+  { name: '회사', dataType: '문자열', technique: '유지', configValue: '변경 없음', selected: true },
+];
+
+const TECHNIQUES: DeidentifyTechnique[] = ['마스킹', '삭제', '범주화', '암호화', '샘플링', '가명처리', '유지'];
+
+const HOURS = Array.from({ length: 24 }, (_, i) => `${String(i).padStart(2, '0')}:00`);
+
+const WEEKDAYS = ['월', '화', '수', '목', '금', '토', '일'];
+
+const TEMPLATES = ['기본 개인정보', '금융데이터', '의료데이터'];
+
+const MOCK_AUDIT_LOGS: Record<string, AuditLogEntry[]> = {
+  '001': [
+    { id: 'LOG_20260410_001', time: '2026-04-10 14:30:45', operator: '김철수', operatorId: 'user_12345', action: '처리완료', targetData: 'customer_2024', result: '성공 (100%)', resultType: '성공', ip: '192.168.1.100', browser: 'Chrome 123.0', detail: { dataCount: 15240, rulesApplied: '마스킹 3, 범주화 2, 삭제 2', processedCount: 15240, errorCount: 0 } },
+    { id: 'LOG_20260410_002', time: '2026-04-10 14:15:10', operator: '김철수', operatorId: 'user_12345', action: '처리시작', targetData: 'customer_2024', result: '성공', resultType: '성공', ip: '192.168.1.100', browser: 'Chrome 123.0', detail: { dataCount: 15240, rulesApplied: '마스킹 3, 범주화 2, 삭제 2', processedCount: 0, errorCount: 0 } },
+    { id: 'LOG_20260410_003', time: '2026-04-10 14:10:30', operator: '김철수', operatorId: 'user_12345', action: '규칙설정', targetData: 'customer_2024', result: '성공', resultType: '성공', ip: '192.168.1.100', browser: 'Chrome 123.0', detail: { dataCount: 15240, rulesApplied: '7개 규칙 적용', processedCount: 0, errorCount: 0 } },
+  ],
+  '002': [
+    { id: 'LOG_20260410_004', time: '2026-04-10 14:15:22', operator: '이영희', operatorId: 'user_23456', action: '처리시작', targetData: 'transaction_04', result: '진행중 (82%)', resultType: '진행중', ip: '192.168.1.101', browser: 'Firefox 124.0', detail: { dataCount: 8920, rulesApplied: '마스킹 2, 암호화 1, 삭제 3', processedCount: 7314, errorCount: 0 } },
+  ],
+  '003': [
+    { id: 'LOG_20260410_005', time: '2026-04-10 13:45:30', operator: '박민준', operatorId: 'user_34567', action: '규칙수정', targetData: 'employee_info', result: '성공', resultType: '성공', ip: '192.168.1.102', browser: 'Chrome 123.0', detail: { dataCount: 3200, rulesApplied: '마스킹 4, 가명처리 1', processedCount: 0, errorCount: 0 } },
+  ],
+  '004': [
+    { id: 'LOG_20260409_001', time: '2026-04-09 13:45:30', operator: '관리자', operatorId: 'user_admin', action: '처리오류', targetData: 'vendor_data', result: '오류 (45%)', resultType: '실패', ip: '192.168.1.100', browser: 'Chrome 123.0', detail: { dataCount: 5100, rulesApplied: '마스킹 2, 범주화 1, 삭제 1', processedCount: 2295, errorCount: 12 } },
+    { id: 'LOG_20260409_002', time: '2026-04-09 13:40:15', operator: '김철수', operatorId: 'user_12345', action: '규칙조회', targetData: 'vendor_data', result: '성공', resultType: '성공', ip: '192.168.1.100', browser: 'Chrome 123.0', detail: { dataCount: 5100, rulesApplied: '4개 규칙', processedCount: 0, errorCount: 0 } },
+    { id: 'LOG_20260409_003', time: '2026-04-09 09:25:00', operator: '이영희', operatorId: 'user_23456', action: '삭제시도', targetData: 'vendor_data', result: '거부 (권한부족)', resultType: '거부', ip: '192.168.1.101', browser: 'Firefox 124.0', detail: { dataCount: 5100, rulesApplied: '-', processedCount: 0, errorCount: 0 } },
+  ],
+  '005': [
+    { id: 'LOG_20260408_001', time: '2026-04-08 09:15:00', operator: '박담당', operatorId: 'user_45678', action: '처리완료', targetData: 'partner_contacts', result: '성공 (100%)', resultType: '성공', ip: '192.168.1.103', browser: 'Edge 122.0', detail: { dataCount: 1850, rulesApplied: '마스킹 2, 유지 3', processedCount: 1850, errorCount: 0 } },
+  ],
+};
+
+function fetchTasks(): Promise<DeidentifyTask[]> {
+  return new Promise((resolve) => {
+    setTimeout(() => resolve(MOCK_TASKS), 300);
+  });
+}
+
+// ─── 상태 뱃지 ─────────────────────────────────────────────
+
+function getStatusBadgeClass(status: TaskStatus): string {
+  switch (status) {
+    case '완료': return 'text-emerald-400 bg-emerald-500/10';
+    case '진행중': return 'text-cyan-400 bg-cyan-500/10';
+    case '대기': return 'text-yellow-400 bg-yellow-500/10';
+    case '오류': return 'text-red-400 bg-red-500/10';
+  }
+}
+
+// ─── 진행률 바 ─────────────────────────────────────────────
+
+function ProgressBar({ value }: { value: number }) {
+  const colorClass =
+    value === 100 ? 'bg-emerald-500' : value > 0 ? 'bg-cyan-500' : 'bg-bg-elevated';
+  return (
+    <div className="flex items-center gap-2">
+      <div className="flex-1 h-1.5 bg-bg-elevated rounded-full overflow-hidden">
+        <div className={`h-full rounded-full transition-all ${colorClass}`} style={{ width: `${value}%` }} />
+      </div>
+      <span className="text-t3 w-8 text-right">{value}%</span>
+    </div>
+  );
+}
+
+// ─── 작업 테이블 ────────────────────────────────────────────
+
+const TABLE_HEADERS = ['작업ID', '작업명', '대상', '상태', '시작시간', '진행률', '등록자', '액션'];
+
+interface TaskTableProps {
+  rows: DeidentifyTask[];
+  loading: boolean;
+  onAction: (action: string, task: DeidentifyTask) => void;
+}
+
+function TaskTable({ rows, loading, onAction }: TaskTableProps) {
+  return (
+    <div className="overflow-auto">
+      <table className="w-full text-xs border-collapse">
+        <thead>
+          <tr className="bg-bg-elevated text-t3 uppercase tracking-wide">
+            {TABLE_HEADERS.map((h) => (
+              <th
+                key={h}
+                className="px-3 py-2 text-left font-medium border-b border-stroke-1 whitespace-nowrap"
+              >
+                {h}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {loading && rows.length === 0
+            ? Array.from({ length: 5 }).map((_, i) => (
+                <tr key={i} className="border-b border-stroke-1 animate-pulse">
+                  {TABLE_HEADERS.map((_, j) => (
+                    <td key={j} className="px-3 py-2">
+                      <div className="h-3 bg-bg-elevated rounded w-14" />
+                    </td>
+                  ))}
+                </tr>
+              ))
+            : rows.map((row) => (
+                <tr key={row.id} className="border-b border-stroke-1 hover:bg-bg-surface/50">
+                  <td className="px-3 py-2 text-t3 font-mono">{row.id}</td>
+                  <td className="px-3 py-2 font-medium text-t1 whitespace-nowrap">{row.name}</td>
+                  <td className="px-3 py-2 text-t2 whitespace-nowrap max-w-[240px] truncate" title={row.target}>{row.target}</td>
+                  <td className="px-3 py-2">
+                    <span className={`inline-block px-2 py-0.5 rounded text-label-2 font-medium ${getStatusBadgeClass(row.status)}`}>
+                      {row.status}
+                    </span>
+                  </td>
+                  <td className="px-3 py-2 text-t2 whitespace-nowrap">{row.startTime}</td>
+                  <td className="px-3 py-2 min-w-[120px]">
+                    <ProgressBar value={row.progress} />
+                  </td>
+                  <td className="px-3 py-2 text-t2">{row.createdBy}</td>
+                  <td className="px-3 py-2">
+                    <div className="flex items-center gap-1 flex-wrap">
+                      <button
+                        onClick={() => onAction('detail', row)}
+                        className="px-2 py-0.5 text-label-2 rounded bg-bg-elevated hover:bg-bg-card text-t2 transition-colors whitespace-nowrap"
+                      >
+                        상세보기
+                      </button>
+                      <button
+                        onClick={() => onAction('download', row)}
+                        className="px-2 py-0.5 text-label-2 rounded bg-bg-elevated hover:bg-bg-card text-t2 transition-colors whitespace-nowrap"
+                      >
+                        결과다운로드
+                      </button>
+                      <button
+                        onClick={() => onAction('retry', row)}
+                        className="px-2 py-0.5 text-label-2 rounded bg-bg-elevated hover:bg-bg-card text-t2 transition-colors whitespace-nowrap"
+                      >
+                        재실행
+                      </button>
+                      <button
+                        onClick={() => onAction('delete', row)}
+                        className="px-2 py-0.5 text-label-2 rounded bg-bg-elevated hover:bg-bg-card text-red-400 transition-colors whitespace-nowrap"
+                      >
+                        삭제
+                      </button>
+                      <button
+                        onClick={() => onAction('audit', row)}
+                        className="px-2 py-0.5 text-label-2 rounded bg-bg-elevated hover:bg-bg-card text-t2 transition-colors whitespace-nowrap"
+                      >
+                        감사로그
+                      </button>
+                    </div>
+                  </td>
+                </tr>
+              ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+// ─── 마법사: 단계 표시기 ────────────────────────────────────
+
+const STEP_LABELS = ['소스선택', '데이터검증', '비식별화규칙', '처리방식', '최종확인'];
+
+function StepIndicator({ current }: { current: number }) {
+  return (
+    <div className="flex items-center justify-center gap-0 px-6 py-4 border-b border-stroke-1">
+      {STEP_LABELS.map((label, i) => {
+        const stepNum = i + 1;
+        const isDone = stepNum < current;
+        const isActive = stepNum === current;
+        return (
+          <div key={label} className="flex items-center">
+            <div className="flex flex-col items-center">
+              <div
+                className={`w-7 h-7 rounded-full flex items-center justify-center text-xs font-semibold transition-colors ${
+                  isDone
+                    ? 'bg-emerald-500 text-white'
+                    : isActive
+                    ? 'bg-cyan-500 text-white'
+                    : 'bg-bg-elevated text-t3'
+                }`}
+              >
+                {isDone ? (
+                  <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" />
+                  </svg>
+                ) : (
+                  stepNum
+                )}
+              </div>
+              <span
+                className={`mt-1 text-label-2 whitespace-nowrap ${
+                  isActive ? 'text-cyan-400' : isDone ? 'text-emerald-400' : 'text-t3'
+                }`}
+              >
+                {stepNum}.{label}
+              </span>
+            </div>
+            {i < STEP_LABELS.length - 1 && (
+              <div
+                className={`w-10 h-px mx-1 mb-4 ${i + 1 < current ? 'bg-emerald-500' : 'bg-stroke-1'}`}
+              />
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+// ─── 마법사: Step 1 ─────────────────────────────────────────
+
+interface Step1Props {
+  wizard: WizardState;
+  onChange: (patch: Partial<WizardState>) => void;
+}
+
+function Step1({ wizard, onChange }: Step1Props) {
+  const handleDbChange = (key: keyof DbConfig, value: string) => {
+    onChange({ dbConfig: { ...wizard.dbConfig, [key]: value } });
+  };
+  const handleApiChange = (key: keyof ApiConfig, value: string) => {
+    onChange({ apiConfig: { ...wizard.apiConfig, [key]: value } });
+  };
+
+  return (
+    <div className="space-y-5">
+      <div>
+        <label className="block text-xs font-medium text-t2 mb-1">작업명 *</label>
+        <input
+          type="text"
+          value={wizard.taskName}
+          onChange={(e) => onChange({ taskName: e.target.value })}
+          placeholder="작업 이름을 입력하세요"
+          className="w-full px-3 py-2 text-xs rounded bg-bg-elevated border border-stroke-1 text-t1 placeholder:text-t3 focus:outline-none focus:border-cyan-500"
+        />
+      </div>
+
+      <div>
+        <label className="block text-xs font-medium text-t2 mb-2">소스 유형 *</label>
+        <div className="flex flex-col gap-2">
+          {([
+            ['db', '데이터베이스 연결'],
+            ['file', '파일 업로드'],
+            ['api', 'API 호출'],
+          ] as [SourceType, string][]).map(([val, label]) => (
+            <label key={val} className="flex items-center gap-2 cursor-pointer">
+              <input
+                type="radio"
+                name="sourceType"
+                value={val}
+                checked={wizard.sourceType === val}
+                onChange={() => onChange({ sourceType: val })}
+                className="accent-cyan-500"
+              />
+              <span className="text-xs text-t1">{label}</span>
+            </label>
+          ))}
+        </div>
+      </div>
+
+      {wizard.sourceType === 'db' && (
+        <div className="grid grid-cols-2 gap-3 p-4 rounded bg-bg-surface border border-stroke-1">
+          {(
+            [
+              ['host', '호스트', 'localhost'],
+              ['port', '포트', '5432'],
+              ['database', '데이터베이스', 'wing'],
+              ['tableName', '테이블명', 'public.customers'],
+            ] as [keyof DbConfig, string, string][]
+          ).map(([key, labelText, placeholder]) => (
+            <div key={key}>
+              <label className="block text-label-2 text-t3 mb-1">{labelText}</label>
+              <input
+                type="text"
+                value={wizard.dbConfig[key]}
+                onChange={(e) => handleDbChange(key, e.target.value)}
+                placeholder={placeholder}
+                className="w-full px-2.5 py-1.5 text-xs rounded bg-bg-elevated border border-stroke-1 text-t1 placeholder:text-t3 focus:outline-none focus:border-cyan-500"
+              />
+            </div>
+          ))}
+        </div>
+      )}
+
+      {wizard.sourceType === 'file' && (
+        <div className="p-8 rounded border-2 border-dashed border-stroke-1 bg-bg-surface flex flex-col items-center gap-2 text-center">
+          <svg className="w-8 h-8 text-t3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
+          </svg>
+          <p className="text-xs text-t2">파일을 드래그하거나 클릭하여 업로드</p>
+          <p className="text-label-2 text-t3">CSV, XLSX, JSON 지원 (최대 500MB)</p>
+        </div>
+      )}
+
+      {wizard.sourceType === 'api' && (
+        <div className="p-4 rounded bg-bg-surface border border-stroke-1 space-y-3">
+          <div>
+            <label className="block text-label-2 text-t3 mb-1">API URL</label>
+            <input
+              type="text"
+              value={wizard.apiConfig.url}
+              onChange={(e) => handleApiChange('url', e.target.value)}
+              placeholder="https://api.example.com/data"
+              className="w-full px-2.5 py-1.5 text-xs rounded bg-bg-elevated border border-stroke-1 text-t1 placeholder:text-t3 focus:outline-none focus:border-cyan-500"
+            />
+          </div>
+          <div>
+            <label className="block text-label-2 text-t3 mb-1">메서드</label>
+            <select
+              value={wizard.apiConfig.method}
+              onChange={(e) => handleApiChange('method', e.target.value)}
+              className="px-2.5 py-1.5 text-xs rounded bg-bg-elevated border border-stroke-1 text-t1 focus:outline-none focus:border-cyan-500"
+            >
+              <option value="GET">GET</option>
+              <option value="POST">POST</option>
+            </select>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── 마법사: Step 2 ─────────────────────────────────────────
+
+interface Step2Props {
+  wizard: WizardState;
+  onChange: (patch: Partial<WizardState>) => void;
+}
+
+function Step2({ wizard, onChange }: Step2Props) {
+  const toggleField = (idx: number) => {
+    const updated = wizard.fields.map((f, i) =>
+      i === idx ? { ...f, selected: !f.selected } : f,
+    );
+    onChange({ fields: updated });
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="grid grid-cols-3 gap-3">
+        {[
+          { label: '총 데이터 건수', value: '15,240건', color: 'text-t1' },
+          { label: '중복', value: '0건', color: 'text-emerald-400' },
+          { label: '누락값', value: '23건', color: 'text-yellow-400' },
+        ].map((stat) => (
+          <div key={stat.label} className="p-3 rounded bg-bg-surface border border-stroke-1">
+            <p className="text-label-2 text-t3 mb-1">{stat.label}</p>
+            <p className={`text-sm font-semibold ${stat.color}`}>{stat.value}</p>
+          </div>
+        ))}
+      </div>
+
+      <div>
+        <h4 className="text-xs font-medium text-t2 mb-2">스키마 분석 결과 — 포함 필드 선택</h4>
+        <div className="rounded border border-stroke-1 overflow-hidden">
+          <table className="w-full text-xs border-collapse">
+            <thead>
+              <tr className="bg-bg-elevated text-t3">
+                <th className="px-3 py-2 text-left font-medium border-b border-stroke-1 w-8">
+                  <input
+                    type="checkbox"
+                    checked={wizard.fields.every((f) => f.selected)}
+                    onChange={(e) =>
+                      onChange({ fields: wizard.fields.map((f) => ({ ...f, selected: e.target.checked })) })
+                    }
+                    className="accent-cyan-500"
+                  />
+                </th>
+                <th className="px-3 py-2 text-left font-medium border-b border-stroke-1">필드명</th>
+                <th className="px-3 py-2 text-left font-medium border-b border-stroke-1">데이터 타입</th>
+              </tr>
+            </thead>
+            <tbody>
+              {wizard.fields.map((field, idx) => (
+                <tr key={field.name} className="border-b border-stroke-1 hover:bg-bg-surface/50">
+                  <td className="px-3 py-2">
+                    <input
+                      type="checkbox"
+                      checked={field.selected}
+                      onChange={() => toggleField(idx)}
+                      className="accent-cyan-500"
+                    />
+                  </td>
+                  <td className="px-3 py-2 font-medium text-t1">{field.name}</td>
+                  <td className="px-3 py-2 text-t3">{field.dataType}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+        <p className="mt-1.5 text-label-2 text-t3">
+          {wizard.fields.filter((f) => f.selected).length}개 선택됨 (전체 {wizard.fields.length}개)
+        </p>
+      </div>
+    </div>
+  );
+}
+
+// ─── 마법사: Step 3 ─────────────────────────────────────────
+
+interface Step3Props {
+  wizard: WizardState;
+  onChange: (patch: Partial<WizardState>) => void;
+}
+
+function Step3({ wizard, onChange }: Step3Props) {
+  const updateField = (idx: number, key: keyof FieldConfig, value: string | boolean) => {
+    const updated = wizard.fields.map((f, i) =>
+      i === idx ? { ...f, [key]: value } : f,
+    );
+    onChange({ fields: updated });
+  };
+
+  const selectedFields = wizard.fields.filter((f) => f.selected);
+
+  return (
+    <div className="space-y-4">
+      <div className="rounded border border-stroke-1 overflow-hidden">
+        <table className="w-full text-xs border-collapse">
+          <thead>
+            <tr className="bg-bg-elevated text-t3">
+              <th className="px-3 py-2 text-left font-medium border-b border-stroke-1">필드명</th>
+              <th className="px-3 py-2 text-left font-medium border-b border-stroke-1">데이터타입</th>
+              <th className="px-3 py-2 text-left font-medium border-b border-stroke-1">선택된 기법</th>
+              <th className="px-3 py-2 text-left font-medium border-b border-stroke-1">설정값</th>
+            </tr>
+          </thead>
+          <tbody>
+            {selectedFields.map((field) => {
+              const globalIdx = wizard.fields.findIndex((f) => f.name === field.name);
+              return (
+                <tr key={field.name} className="border-b border-stroke-1 hover:bg-bg-surface/50">
+                  <td className="px-3 py-2 font-medium text-t1">{field.name}</td>
+                  <td className="px-3 py-2 text-t3">{field.dataType}</td>
+                  <td className="px-3 py-2">
+                    <select
+                      value={field.technique}
+                      onChange={(e) => updateField(globalIdx, 'technique', e.target.value)}
+                      className="px-2 py-1 text-xs rounded bg-bg-elevated border border-stroke-1 text-t1 focus:outline-none focus:border-cyan-500"
+                    >
+                      {TECHNIQUES.map((t) => (
+                        <option key={t} value={t}>{t}</option>
+                      ))}
+                    </select>
+                  </td>
+                  <td className="px-3 py-2">
+                    <input
+                      type="text"
+                      value={field.configValue}
+                      onChange={(e) => updateField(globalIdx, 'configValue', e.target.value)}
+                      className="w-full px-2 py-1 text-xs rounded bg-bg-elevated border border-stroke-1 text-t1 focus:outline-none focus:border-cyan-500"
+                    />
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+
+      <div className="flex flex-wrap items-center gap-4 pt-1">
+        <label className="flex items-center gap-2 cursor-pointer">
+          <input
+            type="checkbox"
+            checked={wizard.saveAsTemplate}
+            onChange={(e) => onChange({ saveAsTemplate: e.target.checked })}
+            className="accent-cyan-500"
+          />
+          <span className="text-xs text-t2">템플릿으로 저장</span>
+        </label>
+
+        <div className="flex items-center gap-2">
+          <span className="text-xs text-t3">이전 템플릿 적용:</span>
+          <select
+            value={wizard.applyTemplate}
+            onChange={(e) => onChange({ applyTemplate: e.target.value })}
+            className="px-2.5 py-1 text-xs rounded bg-bg-elevated border border-stroke-1 text-t1 focus:outline-none focus:border-cyan-500"
+          >
+            <option value="">선택 안 함</option>
+            {TEMPLATES.map((t) => (
+              <option key={t} value={t}>{t}</option>
+            ))}
+          </select>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ─── 마법사: Step 4 ─────────────────────────────────────────
+
+interface Step4Props {
+  wizard: WizardState;
+  onChange: (patch: Partial<WizardState>) => void;
+}
+
+function Step4({ wizard, onChange }: Step4Props) {
+  const handleScheduleChange = (key: keyof ScheduleConfig, value: string | boolean) => {
+    onChange({ scheduleConfig: { ...wizard.scheduleConfig, [key]: value } });
+  };
+  const handleOneshotChange = (key: keyof OneshotConfig, value: string) => {
+    onChange({ oneshotConfig: { ...wizard.oneshotConfig, [key]: value } });
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="space-y-3">
+        {(
+          [
+            ['immediate', '즉시 처리', '지금 바로 데이터를 비식별화합니다.'],
+            ['scheduled', '배치 처리 - 정기 스케줄링', '반복 일정에 따라 자동으로 처리합니다.'],
+            ['oneshot', '배치 처리 - 일회성', '지정한 날짜/시간에 한 번 처리합니다.'],
+          ] as [ProcessMode, string, string][]
+        ).map(([val, label, desc]) => (
+          <div key={val}>
+            <label className="flex items-start gap-2.5 cursor-pointer">
+              <input
+                type="radio"
+                name="processMode"
+                value={val}
+                checked={wizard.processMode === val}
+                onChange={() => onChange({ processMode: val })}
+                className="mt-0.5 accent-cyan-500"
+              />
+              <div>
+                <span className="text-xs font-medium text-t1">{label}</span>
+                <p className="text-label-2 text-t3 mt-0.5">{desc}</p>
+              </div>
+            </label>
+
+            {val === 'scheduled' && wizard.processMode === 'scheduled' && (
+              <div className="mt-3 ml-5 p-4 rounded bg-bg-surface border border-stroke-1 space-y-3">
+                <div className="flex items-center gap-3">
+                  <label className="text-xs text-t3 w-16 shrink-0">실행 시간</label>
+                  <select
+                    value={wizard.scheduleConfig.hour}
+                    onChange={(e) => handleScheduleChange('hour', e.target.value)}
+                    className="px-2.5 py-1.5 text-xs rounded bg-bg-elevated border border-stroke-1 text-t1 focus:outline-none focus:border-cyan-500"
+                  >
+                    {HOURS.map((h) => <option key={h} value={h}>{h}</option>)}
+                  </select>
+                </div>
+                <div className="flex items-start gap-3">
+                  <label className="text-xs text-t3 w-16 shrink-0 mt-1">반복</label>
+                  <div className="flex flex-col gap-2">
+                    {(
+                      [
+                        ['daily', '매일'],
+                        ['weekly', '주 1회'],
+                        ['monthly', '월 1회'],
+                      ] as [RepeatType, string][]
+                    ).map(([rt, rl]) => (
+                      <div key={rt} className="flex items-center gap-2">
+                        <input
+                          type="radio"
+                          name="repeatType"
+                          value={rt}
+                          checked={wizard.scheduleConfig.repeatType === rt}
+                          onChange={() => handleScheduleChange('repeatType', rt)}
+                          className="accent-cyan-500"
+                        />
+                        <span className="text-xs text-t1">{rl}</span>
+                        {rt === 'weekly' && wizard.scheduleConfig.repeatType === 'weekly' && (
+                          <select
+                            value={wizard.scheduleConfig.weekday}
+                            onChange={(e) => handleScheduleChange('weekday', e.target.value)}
+                            className="ml-1 px-2 py-0.5 text-xs rounded bg-bg-elevated border border-stroke-1 text-t1 focus:outline-none focus:border-cyan-500"
+                          >
+                            {WEEKDAYS.map((d) => <option key={d} value={d}>{d}요일</option>)}
+                          </select>
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                </div>
+                <div className="flex items-center gap-3">
+                  <label className="text-xs text-t3 w-16 shrink-0">시작일</label>
+                  <input
+                    type="date"
+                    value={wizard.scheduleConfig.startDate}
+                    onChange={(e) => handleScheduleChange('startDate', e.target.value)}
+                    className="px-2.5 py-1.5 text-xs rounded bg-bg-elevated border border-stroke-1 text-t1 focus:outline-none focus:border-cyan-500"
+                  />
+                </div>
+                <div className="flex flex-col gap-1.5 mt-1">
+                  <label className="flex items-center gap-2 cursor-pointer">
+                    <input
+                      type="checkbox"
+                      checked={wizard.scheduleConfig.notifyOnComplete}
+                      onChange={(e) => handleScheduleChange('notifyOnComplete', e.target.checked)}
+                      className="accent-cyan-500"
+                    />
+                    <span className="text-xs text-t2">처리 완료 시 이메일 알림</span>
+                  </label>
+                  <label className="flex items-center gap-2 cursor-pointer">
+                    <input
+                      type="checkbox"
+                      checked={wizard.scheduleConfig.notifyOnError}
+                      onChange={(e) => handleScheduleChange('notifyOnError', e.target.checked)}
+                      className="accent-cyan-500"
+                    />
+                    <span className="text-xs text-t2">오류 발생 시 즉시 알림</span>
+                  </label>
+                </div>
+              </div>
+            )}
+
+            {val === 'oneshot' && wizard.processMode === 'oneshot' && (
+              <div className="mt-3 ml-5 p-4 rounded bg-bg-surface border border-stroke-1 space-y-3">
+                <div className="flex items-center gap-3">
+                  <label className="text-xs text-t3 w-16 shrink-0">실행 날짜</label>
+                  <input
+                    type="date"
+                    value={wizard.oneshotConfig.date}
+                    onChange={(e) => handleOneshotChange('date', e.target.value)}
+                    className="px-2.5 py-1.5 text-xs rounded bg-bg-elevated border border-stroke-1 text-t1 focus:outline-none focus:border-cyan-500"
+                  />
+                </div>
+                <div className="flex items-center gap-3">
+                  <label className="text-xs text-t3 w-16 shrink-0">실행 시간</label>
+                  <select
+                    value={wizard.oneshotConfig.hour}
+                    onChange={(e) => handleOneshotChange('hour', e.target.value)}
+                    className="px-2.5 py-1.5 text-xs rounded bg-bg-elevated border border-stroke-1 text-t1 focus:outline-none focus:border-cyan-500"
+                  >
+                    {HOURS.map((h) => <option key={h} value={h}>{h}</option>)}
+                  </select>
+                </div>
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+// ─── 마법사: Step 5 ─────────────────────────────────────────
+
+interface Step5Props {
+  wizard: WizardState;
+  onChange: (patch: Partial<WizardState>) => void;
+}
+
+function Step5({ wizard, onChange }: Step5Props) {
+  const selectedCount = wizard.fields.filter((f) => f.selected).length;
+  const ruleCount = wizard.fields.filter((f) => f.selected && f.technique !== '유지').length;
+
+  const processModeLabel: Record<ProcessMode, string> = {
+    immediate: '즉시 처리',
+    scheduled: `배치 - 정기 (${wizard.scheduleConfig.hour} / ${wizard.scheduleConfig.repeatType === 'daily' ? '매일' : wizard.scheduleConfig.repeatType === 'weekly' ? `주1회 ${wizard.scheduleConfig.weekday}요일` : '월1회'})`,
+    oneshot: `배치 - 일회성 (${wizard.oneshotConfig.date} ${wizard.oneshotConfig.hour})`,
+  };
+
+  const summaryRows = [
+    { label: '작업명', value: wizard.taskName || '(미입력)' },
+    { label: '소스', value: wizard.sourceType === 'db' ? `DB: ${wizard.dbConfig.database}.${wizard.dbConfig.tableName}` : wizard.sourceType === 'file' ? '파일 업로드' : `API: ${wizard.apiConfig.url}` },
+    { label: '데이터 건수', value: '15,240건' },
+    { label: '선택 필드 수', value: `${selectedCount}개` },
+    { label: '비식별화 규칙 수', value: `${ruleCount}개` },
+    { label: '처리 방식', value: processModeLabel[wizard.processMode] },
+    { label: '예상 처리시간', value: '약 3~5분' },
+  ];
+
+  return (
+    <div className="space-y-4">
+      <div className="rounded border border-stroke-1 overflow-hidden">
+        <table className="w-full text-xs border-collapse">
+          <tbody>
+            {summaryRows.map(({ label, value }) => (
+              <tr key={label} className="border-b border-stroke-1 last:border-b-0">
+                <td className="px-4 py-2.5 text-t3 bg-bg-elevated w-36 font-medium">{label}</td>
+                <td className="px-4 py-2.5 text-t1">{value}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      <label className="flex items-center gap-2 cursor-pointer p-3 rounded border border-stroke-1 bg-bg-surface">
+        <input
+          type="checkbox"
+          checked={wizard.confirmed}
+          onChange={(e) => onChange({ confirmed: e.target.checked })}
+          className="accent-cyan-500"
+        />
+        <span className="text-xs text-t1 font-medium">위 정보를 확인했습니다.</span>
+      </label>
+    </div>
+  );
+}
+
+// ─── 마법사 모달 ─────────────────────────────────────────────
+
+const INITIAL_WIZARD: WizardState = {
+  step: 1,
+  taskName: '',
+  sourceType: 'db',
+  dbConfig: { host: '', port: '5432', database: '', tableName: '' },
+  apiConfig: { url: '', method: 'GET' },
+  fields: DEFAULT_FIELDS,
+  processMode: 'immediate',
+  scheduleConfig: {
+    hour: '02:00',
+    repeatType: 'daily',
+    weekday: '월',
+    startDate: '',
+    notifyOnComplete: true,
+    notifyOnError: true,
+  },
+  oneshotConfig: { date: '', hour: '02:00' },
+  saveAsTemplate: false,
+  applyTemplate: '',
+  confirmed: false,
+};
+
+// ─── 감사로그 모달 ─────────────────────────────────────────
+
+function getAuditResultClass(type: AuditLogEntry['resultType']): string {
+  switch (type) {
+    case '성공': return 'text-emerald-400 bg-emerald-500/10';
+    case '진행중': return 'text-cyan-400 bg-cyan-500/10';
+    case '실패': return 'text-red-400 bg-red-500/10';
+    case '거부': return 'text-yellow-400 bg-yellow-500/10';
+  }
+}
+
+interface AuditLogModalProps {
+  task: DeidentifyTask;
+  onClose: () => void;
+}
+
+function AuditLogModal({ task, onClose }: AuditLogModalProps) {
+  const logs = MOCK_AUDIT_LOGS[task.id] ?? [];
+  const [selectedLog, setSelectedLog] = useState<AuditLogEntry | null>(null);
+  const [filterOperator, setFilterOperator] = useState('모두');
+  const [startDate, setStartDate] = useState('2026-04-01');
+  const [endDate, setEndDate] = useState('2026-04-11');
+
+  const operators = ['모두', ...Array.from(new Set(logs.map((l) => l.operator)))];
+  const filteredLogs = logs.filter((l) => {
+    if (filterOperator !== '모두' && l.operator !== filterOperator) return false;
+    return true;
+  });
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60">
+      <div className="bg-bg-card border border-stroke-1 rounded-lg shadow-2xl w-full max-w-5xl max-h-[85vh] flex flex-col">
+        {/* 헤더 */}
+        <div className="flex items-center justify-between px-5 py-3 border-b border-stroke-1 shrink-0">
+          <h3 className="text-sm font-semibold text-t1">
+            감시 감독 (감사로그) — {task.name}
+          </h3>
+          <button onClick={onClose} className="text-t3 hover:text-t1 transition-colors text-lg leading-none">
+            ✕
+          </button>
+        </div>
+
+        {/* 필터 바 */}
+        <div className="flex items-center gap-3 px-5 py-2.5 border-b border-stroke-1 shrink-0 bg-bg-base">
+          <span className="text-xs text-t3">기간:</span>
+          <input
+            type="date"
+            value={startDate}
+            onChange={(e) => setStartDate(e.target.value)}
+            className="px-2 py-1 text-xs rounded bg-bg-elevated border border-stroke-1 text-t1 focus:outline-none focus:border-cyan-500"
+          />
+          <span className="text-xs text-t3">~</span>
+          <input
+            type="date"
+            value={endDate}
+            onChange={(e) => setEndDate(e.target.value)}
+            className="px-2 py-1 text-xs rounded bg-bg-elevated border border-stroke-1 text-t1 focus:outline-none focus:border-cyan-500"
+          />
+          <span className="text-xs text-t3 ml-2">작업자:</span>
+          <select
+            value={filterOperator}
+            onChange={(e) => setFilterOperator(e.target.value)}
+            className="px-2 py-1 text-xs rounded bg-bg-elevated border border-stroke-1 text-t1 focus:outline-none focus:border-cyan-500"
+          >
+            {operators.map((op) => (
+              <option key={op} value={op}>{op}</option>
+            ))}
+          </select>
+        </div>
+
+        {/* 로그 테이블 */}
+        <div className="flex-1 overflow-auto px-5 py-3">
+          <table className="w-full text-xs border-collapse">
+            <thead>
+              <tr className="bg-bg-elevated text-t3 uppercase tracking-wide">
+                {['시간', '작업자', '작업', '대상 데이터', '결과', '상세'].map((h) => (
+                  <th key={h} className="px-3 py-2 text-left font-medium border-b border-stroke-1 whitespace-nowrap">
+                    {h}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {filteredLogs.length === 0 ? (
+                <tr>
+                  <td colSpan={6} className="px-3 py-8 text-center text-t3">
+                    감사로그가 없습니다.
+                  </td>
+                </tr>
+              ) : (
+                filteredLogs.map((log) => (
+                  <tr
+                    key={log.id}
+                    className={`border-b border-stroke-1 hover:bg-bg-surface/50 cursor-pointer ${selectedLog?.id === log.id ? 'bg-bg-surface/70' : ''}`}
+                    onClick={() => setSelectedLog(log)}
+                  >
+                    <td className="px-3 py-2 text-t2 whitespace-nowrap font-mono">{log.time.split(' ')[1]}</td>
+                    <td className="px-3 py-2 text-t1 whitespace-nowrap">{log.operator}</td>
+                    <td className="px-3 py-2 text-t2 whitespace-nowrap">{log.action}</td>
+                    <td className="px-3 py-2 text-t2 whitespace-nowrap font-mono">{log.targetData}</td>
+                    <td className="px-3 py-2">
+                      <span className={`inline-block px-2 py-0.5 rounded text-label-2 font-medium ${getAuditResultClass(log.resultType)}`}>
+                        {log.result}
+                      </span>
+                    </td>
+                    <td className="px-3 py-2">
+                      <button
+                        onClick={(e) => { e.stopPropagation(); setSelectedLog(log); }}
+                        className="px-2 py-0.5 text-label-2 rounded bg-bg-elevated hover:bg-bg-card text-cyan-400 transition-colors whitespace-nowrap"
+                      >
+                        보기
+                      </button>
+                    </td>
+                  </tr>
+                ))
+              )}
+            </tbody>
+          </table>
+        </div>
+
+        {/* 로그 상세 정보 */}
+        {selectedLog && (
+          <div className="px-5 py-3 border-t border-stroke-1 shrink-0 bg-bg-base">
+            <h4 className="text-xs font-semibold text-t1 mb-2">로그 상세 정보</h4>
+            <div className="bg-bg-elevated border border-stroke-1 rounded p-3 text-xs grid grid-cols-2 gap-x-6 gap-y-1.5">
+              <div><span className="text-t3">로그ID:</span> <span className="text-t1 font-mono">{selectedLog.id}</span></div>
+              <div><span className="text-t3">타임스탬프:</span> <span className="text-t1 font-mono">{selectedLog.time}</span></div>
+              <div><span className="text-t3">작업자:</span> <span className="text-t1">{selectedLog.operator} ({selectedLog.operatorId})</span></div>
+              <div><span className="text-t3">작업 유형:</span> <span className="text-t1">{selectedLog.action}</span></div>
+              <div><span className="text-t3">대상:</span> <span className="text-t1">{selectedLog.targetData} ({selectedLog.detail.dataCount.toLocaleString()}건)</span></div>
+              <div><span className="text-t3">적용 규칙:</span> <span className="text-t1">{selectedLog.detail.rulesApplied}</span></div>
+              <div><span className="text-t3">결과:</span> <span className="text-t1">{selectedLog.result} (처리: {selectedLog.detail.processedCount.toLocaleString()}, 오류: {selectedLog.detail.errorCount})</span></div>
+              <div><span className="text-t3">IP 주소:</span> <span className="text-t1 font-mono">{selectedLog.ip}</span></div>
+              <div><span className="text-t3">브라우저:</span> <span className="text-t1">{selectedLog.browser}</span></div>
+            </div>
+          </div>
+        )}
+
+        {/* 하단 버튼 */}
+        <div className="flex items-center justify-end gap-2 px-5 py-3 border-t border-stroke-1 shrink-0">
+          <button className="px-3 py-1.5 text-xs rounded bg-bg-elevated hover:bg-bg-card text-t2 transition-colors">
+            상세내용 다운로드 (암호화됨)
+          </button>
+          <button className="px-3 py-1.5 text-xs rounded bg-bg-elevated hover:bg-bg-card text-t2 transition-colors">
+            기간별 보고서 생성
+          </button>
+          <button
+            onClick={onClose}
+            className="px-3 py-1.5 text-xs rounded bg-bg-elevated hover:bg-bg-card text-t2 transition-colors"
+          >
+            닫기
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ─── 마법사 모달 ───────────────────────────────────────────
+
+interface WizardModalProps {
+  onClose: () => void;
+  onSubmit: (wizard: WizardState) => void;
+}
+
+function WizardModal({ onClose, onSubmit }: WizardModalProps) {
+  const [wizard, setWizard] = useState<WizardState>(INITIAL_WIZARD);
+
+  const patch = useCallback((update: Partial<WizardState>) => {
+    setWizard((prev) => ({ ...prev, ...update }));
+  }, []);
+
+  const handleNext = () => {
+    if (wizard.step < 5) patch({ step: wizard.step + 1 });
+  };
+  const handlePrev = () => {
+    if (wizard.step > 1) patch({ step: wizard.step - 1 });
+  };
+  const handleSubmit = () => {
+    onSubmit(wizard);
+    onClose();
+  };
+
+  const canProceed = () => {
+    if (wizard.step === 1) return wizard.taskName.trim().length > 0;
+    if (wizard.step === 2) return wizard.fields.some((f) => f.selected);
+    if (wizard.step === 5) return wizard.confirmed;
+    return true;
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60">
+      <div className="bg-bg-card border border-stroke-1 rounded-lg shadow-2xl w-full max-w-4xl mx-4 flex flex-col max-h-[90vh]">
+        {/* 모달 헤더 */}
+        <div className="flex items-center justify-between px-6 py-4 border-b border-stroke-1 shrink-0">
+          <h3 className="text-sm font-semibold text-t1">새 비식별화 작업</h3>
+          <button
+            onClick={onClose}
+            className="p-1 rounded text-t3 hover:text-t1 hover:bg-bg-elevated transition-colors"
+          >
+            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+
+        {/* 단계 표시기 */}
+        <StepIndicator current={wizard.step} />
+
+        {/* 단계 내용 */}
+        <div className="flex-1 overflow-auto px-6 py-5">
+          {wizard.step === 1 && <Step1 wizard={wizard} onChange={patch} />}
+          {wizard.step === 2 && <Step2 wizard={wizard} onChange={patch} />}
+          {wizard.step === 3 && <Step3 wizard={wizard} onChange={patch} />}
+          {wizard.step === 4 && <Step4 wizard={wizard} onChange={patch} />}
+          {wizard.step === 5 && <Step5 wizard={wizard} onChange={patch} />}
+        </div>
+
+        {/* 푸터 버튼 */}
+        <div className="flex items-center justify-between px-6 py-4 border-t border-stroke-1 shrink-0">
+          <button
+            onClick={handlePrev}
+            disabled={wizard.step === 1}
+            className="px-3 py-1.5 text-xs rounded bg-bg-elevated hover:bg-bg-card text-t2 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+          >
+            이전
+          </button>
+          <div className="flex items-center gap-2">
+            <button
+              onClick={onClose}
+              className="px-3 py-1.5 text-xs rounded bg-bg-elevated hover:bg-bg-card text-t2 transition-colors"
+            >
+              취소
+            </button>
+            {wizard.step < 5 ? (
+              <button
+                onClick={handleNext}
+                disabled={!canProceed()}
+                className="px-3 py-1.5 text-xs rounded bg-cyan-600 hover:bg-cyan-700 text-white disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+              >
+                다음
+              </button>
+            ) : (
+              <button
+                onClick={handleSubmit}
+                disabled={!canProceed()}
+                className="px-3 py-1.5 text-xs rounded bg-cyan-600 hover:bg-cyan-700 text-white disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+              >
+                처리 시작
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ─── 메인 패널 ──────────────────────────────────────────────
+
+type FilterStatus = '모두' | TaskStatus;
+
+export default function DeidentifyPanel() {
+  const [tasks, setTasks] = useState<DeidentifyTask[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [showWizard, setShowWizard] = useState(false);
+  const [auditTask, setAuditTask] = useState<DeidentifyTask | null>(null);
+  const [searchName, setSearchName] = useState('');
+  const [filterStatus, setFilterStatus] = useState<FilterStatus>('모두');
+  const [filterPeriod, setFilterPeriod] = useState<'7' | '30' | '90'>('30');
+
+  const loadTasks = useCallback(async () => {
+    setLoading(true);
+    const data = await fetchTasks();
+    setTasks(data);
+    setLoading(false);
+  }, []);
+
+  useEffect(() => {
+    let isMounted = true;
+    if (tasks.length === 0) {
+      void Promise.resolve().then(() => {
+        if (isMounted) void loadTasks();
+      });
+    }
+    return () => {
+      isMounted = false;
+    };
+  }, [tasks.length, loadTasks]);
+
+  const handleAction = useCallback((action: string, task: DeidentifyTask) => {
+    // TODO: 실제 API 연동 시 각 액션에 맞는 API 호출로 교체
+    if (action === 'delete') {
+      setTasks((prev) => prev.filter((t) => t.id !== task.id));
+    } else if (action === 'audit') {
+      setAuditTask(task);
+    }
+  }, []);
+
+  const handleWizardSubmit = useCallback((wizard: WizardState) => {
+    const selectedFields = wizard.fields.filter((f) => f.selected).map((f) => f.name);
+    const newTask: DeidentifyTask = {
+      id: String(tasks.length + 1).padStart(3, '0'),
+      name: wizard.taskName,
+      target: selectedFields.join(', ') || '-',
+      status: wizard.processMode === 'immediate' ? '진행중' : '대기',
+      startTime: new Date().toLocaleString('ko-KR', {
+        year: 'numeric', month: '2-digit', day: '2-digit',
+        hour: '2-digit', minute: '2-digit', hour12: false,
+      }).replace(/\. /g, '-').replace('.', ''),
+      progress: 0,
+      createdBy: '관리자',
+    };
+    setTasks((prev) => [newTask, ...prev]);
+  }, [tasks.length]);
+
+  const filteredTasks = tasks.filter((t) => {
+    if (searchName && !t.name.includes(searchName)) return false;
+    if (filterStatus !== '모두' && t.status !== filterStatus) return false;
+    return true;
+  });
+
+  const completedCount = tasks.filter((t) => t.status === '완료').length;
+  const inProgressCount = tasks.filter((t) => t.status === '진행중').length;
+  const errorCount = tasks.filter((t) => t.status === '오류').length;
+
+  return (
+    <div className="flex flex-col h-full overflow-hidden">
+      {/* 헤더 */}
+      <div className="flex items-center justify-between px-5 py-3 border-b border-stroke-1 shrink-0">
+        <h2 className="text-sm font-semibold text-t1">비식별화조치</h2>
+        <button
+          onClick={() => setShowWizard(true)}
+          className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded bg-cyan-600 hover:bg-cyan-700 text-white transition-colors"
+        >
+          <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+          </svg>
+          새 작업
+        </button>
+      </div>
+
+      {/* 상태 요약 */}
+      <div className="flex items-center gap-3 px-5 py-2 shrink-0 border-b border-stroke-1 bg-bg-base">
+        <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-emerald-500/10 text-emerald-400">
+          <span className="w-1.5 h-1.5 rounded-full bg-emerald-400" />
+          완료 {completedCount}건
+        </span>
+        <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-cyan-500/10 text-cyan-400">
+          <span className="w-1.5 h-1.5 rounded-full bg-cyan-400" />
+          진행중 {inProgressCount}건
+        </span>
+        {errorCount > 0 && (
+          <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-red-500/10 text-red-400">
+            <span className="w-1.5 h-1.5 rounded-full bg-red-400" />
+            오류 {errorCount}건
+          </span>
+        )}
+        <span className="text-xs text-t3">전체 {tasks.length}건</span>
+      </div>
+
+      {/* 검색/필터 */}
+      <div className="flex items-center gap-2 px-5 py-2.5 shrink-0 border-b border-stroke-1">
+        <input
+          type="text"
+          value={searchName}
+          onChange={(e) => setSearchName(e.target.value)}
+          placeholder="작업명 검색"
+          className="px-2.5 py-1.5 text-xs rounded bg-bg-elevated border border-stroke-1 text-t1 placeholder:text-t3 focus:outline-none focus:border-cyan-500 w-40"
+        />
+        <select
+          value={filterStatus}
+          onChange={(e) => setFilterStatus(e.target.value as FilterStatus)}
+          className="px-2.5 py-1.5 text-xs rounded bg-bg-elevated border border-stroke-1 text-t1 focus:outline-none focus:border-cyan-500"
+        >
+          {(['모두', '완료', '진행중', '대기', '오류'] as FilterStatus[]).map((s) => (
+            <option key={s} value={s}>{s}</option>
+          ))}
+        </select>
+        <select
+          value={filterPeriod}
+          onChange={(e) => setFilterPeriod(e.target.value as '7' | '30' | '90')}
+          className="px-2.5 py-1.5 text-xs rounded bg-bg-elevated border border-stroke-1 text-t1 focus:outline-none focus:border-cyan-500"
+        >
+          <option value="7">최근 7일</option>
+          <option value="30">최근 30일</option>
+          <option value="90">최근 90일</option>
+        </select>
+      </div>
+
+      {/* 테이블 */}
+      <div className="flex-1 overflow-auto p-5">
+        <TaskTable rows={filteredTasks} loading={loading} onAction={handleAction} />
+      </div>
+
+      {/* 감사로그 모달 */}
+      {auditTask && (
+        <AuditLogModal task={auditTask} onClose={() => setAuditTask(null)} />
+      )}
+
+      {/* 마법사 모달 */}
+      {showWizard && (
+        <WizardModal
+          onClose={() => setShowWizard(false)}
+          onSubmit={handleWizardSubmit}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/frontend/src/tabs/admin/components/DispersingZonePanel.tsx b/frontend/src/tabs/admin/components/DispersingZonePanel.tsx
index 4f07252..884bd7b 100644
--- a/frontend/src/tabs/admin/components/DispersingZonePanel.tsx
+++ b/frontend/src/tabs/admin/components/DispersingZonePanel.tsx
@@ -130,7 +130,9 @@ const DispersingZonePanel = () => {
           onClick={() => handleToggleExpand(zone)}
         >
           <span className={`w-3 h-3 rounded-sm shrink-0 ${swatchColor}`} />
-          <span className="flex-1 text-xs font-semibold text-fg font-korean">{info.label}</span>
+          <span className="flex-1 text-caption font-semibold text-fg font-korean">
+            {info.label}
+          </span>
           {/* 토글 스위치 */}
           <button
             onClick={(e) => {
@@ -209,7 +211,7 @@ const DispersingZonePanel = () => {
       <div className="w-[280px] bg-bg-surface border-l border-stroke flex flex-col overflow-hidden shrink-0">
         {/* 헤더 */}
         <div className="px-4 py-4 border-b border-stroke shrink-0">
-          <h1 className="text-sm font-bold text-fg font-korean">유처리제 제한구역</h1>
+          <h1 className="text-body-2 font-bold text-fg font-korean">유처리제 제한구역</h1>
           <p className="text-label-2 text-fg-disabled mt-0.5 font-korean">해양환경관리법 기준</p>
         </div>
 
diff --git a/frontend/src/tabs/admin/components/LayerPanel.tsx b/frontend/src/tabs/admin/components/LayerPanel.tsx
index cb6c322..533d81f 100644
--- a/frontend/src/tabs/admin/components/LayerPanel.tsx
+++ b/frontend/src/tabs/admin/components/LayerPanel.tsx
@@ -186,7 +186,7 @@ const LayerFormModal = ({ mode, initialData, onClose, onSaved }: LayerFormModalP
   };
 
   const inputCls =
-    'w-full px-3 py-2 text-xs bg-bg-elevated border border-stroke rounded-md text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none';
+    'w-full px-3 py-2 text-caption bg-bg-elevated border border-stroke rounded-md text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none';
   const labelCls = 'block text-label-2 font-semibold text-fg-sub font-korean mb-1.5';
 
   return (
@@ -194,7 +194,7 @@ const LayerFormModal = ({ mode, initialData, onClose, onSaved }: LayerFormModalP
       <div className="bg-bg-surface border border-stroke rounded-lg shadow-lg w-[480px] max-h-[90vh] flex flex-col">
         {/* 헤더 */}
         <div className="flex items-center justify-between px-6 py-4 border-b border-stroke shrink-0">
-          <h2 className="text-sm font-bold text-fg font-korean">
+          <h2 className="text-body-2 font-bold text-fg font-korean">
             {mode === 'create' ? '레이어 등록' : '레이어 수정'}
           </h2>
           <button onClick={onClose} className="text-fg-disabled hover:text-fg transition-colors">
@@ -214,7 +214,7 @@ const LayerFormModal = ({ mode, initialData, onClose, onSaved }: LayerFormModalP
                     ? handleParentChange(e.target.value)
                     : handleField('upLayerCd', e.target.value)
                 }
-                className="w-full px-3 py-2 text-xs bg-bg-elevated border border-stroke rounded-md text-fg focus:border-color-accent focus:outline-none"
+                className="w-full px-3 py-2 text-caption bg-bg-elevated border border-stroke rounded-md text-fg focus:border-color-accent focus:outline-none"
               >
                 <option value="">(없음)</option>
                 {options
@@ -311,7 +311,7 @@ const LayerFormModal = ({ mode, initialData, onClose, onSaved }: LayerFormModalP
               <select
                 value={form.useYn}
                 onChange={(e) => handleField('useYn', e.target.value)}
-                className="w-full px-3 py-2 text-xs bg-bg-elevated border border-stroke rounded-md text-fg focus:border-color-accent focus:outline-none"
+                className="w-full px-3 py-2 text-caption bg-bg-elevated border border-stroke rounded-md text-fg focus:border-color-accent focus:outline-none"
               >
                 <option value="Y">사용</option>
                 <option value="N">미사용</option>
@@ -329,14 +329,14 @@ const LayerFormModal = ({ mode, initialData, onClose, onSaved }: LayerFormModalP
             <button
               type="button"
               onClick={onClose}
-              className="px-3 py-1.5 text-xs border border-stroke text-fg-disabled rounded hover:bg-[rgba(255,255,255,0.04)] transition-all font-korean"
+              className="px-3 py-1.5 text-caption border border-stroke text-fg-disabled rounded hover:bg-[rgba(255,255,255,0.04)] transition-all font-korean"
             >
               취소
             </button>
             <button
               type="submit"
               disabled={saving}
-              className="px-3 py-1.5 text-xs bg-color-accent text-bg-0 rounded hover:opacity-90 disabled:opacity-50 transition-all font-korean"
+              className="px-3 py-1.5 text-caption bg-color-accent text-bg-0 rounded hover:opacity-90 disabled:opacity-50 transition-all font-korean"
             >
               {saving ? '저장 중...' : mode === 'create' ? '등록' : '저장'}
             </button>
@@ -449,11 +449,11 @@ const LayerPanel = () => {
         <div className="flex items-center justify-between mb-3">
           <div>
             <h1 className="text-lg font-bold text-fg font-korean">레이어 관리</h1>
-            <p className="text-xs text-fg-disabled mt-1 font-korean">총 {total}개</p>
+            <p className="text-caption text-fg-disabled mt-1 font-korean">총 {total}개</p>
           </div>
           <button
             onClick={() => setModal({ mode: 'create' })}
-            className="px-3 py-1.5 text-xs font-semibold bg-color-accent text-bg-0 rounded hover:opacity-90 transition-opacity font-korean"
+            className="px-3 py-1.5 text-caption font-semibold bg-color-accent text-bg-0 rounded hover:opacity-90 transition-opacity font-korean"
           >
             신규 등록
           </button>
@@ -465,12 +465,12 @@ const LayerPanel = () => {
             onChange={(e) => setSearchInput(e.target.value)}
             onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
             placeholder="레이어코드 / 레이어명 검색"
-            className="flex-1 px-3 py-1.5 text-xs bg-bg-elevated border border-stroke rounded text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none font-korean"
+            className="flex-1 px-3 py-1.5 text-caption bg-bg-elevated border border-stroke rounded text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none font-korean"
           />
           <select
             value={filterUseYn}
             onChange={(e) => setFilterUseYn(e.target.value)}
-            className="px-2 py-1.5 text-xs bg-bg-elevated border border-stroke rounded text-fg focus:border-color-accent focus:outline-none font-korean"
+            className="px-2 py-1.5 text-caption bg-bg-elevated border border-stroke rounded text-fg focus:border-color-accent focus:outline-none font-korean"
           >
             <option value="">전체</option>
             <option value="Y">사용</option>
@@ -478,7 +478,7 @@ const LayerPanel = () => {
           </select>
           <button
             onClick={handleSearch}
-            className="px-3 py-1.5 text-xs border border-stroke text-fg-sub rounded hover:bg-[rgba(255,255,255,0.04)] transition-all font-korean"
+            className="px-3 py-1.5 text-caption border border-stroke text-fg-sub rounded hover:bg-[rgba(255,255,255,0.04)] transition-all font-korean"
           >
             검색
           </button>
@@ -487,7 +487,7 @@ const LayerPanel = () => {
 
       {/* 오류 메시지 */}
       {error && (
-        <div className="px-6 py-2 text-xs text-red-400 bg-[rgba(239,68,68,0.05)] border-b border-stroke shrink-0 font-korean">
+        <div className="px-6 py-2 text-caption text-red-400 bg-[rgba(239,68,68,0.05)] border-b border-stroke shrink-0 font-korean">
           {error}
         </div>
       )}
@@ -495,7 +495,7 @@ const LayerPanel = () => {
       {/* 테이블 영역 */}
       <div className="flex-1 overflow-auto">
         {loading ? (
-          <div className="flex items-center justify-center h-full text-fg-disabled text-sm font-korean">
+          <div className="flex items-center justify-center h-full text-fg-disabled text-body-2 font-korean">
             불러오는 중...
           </div>
         ) : (
@@ -539,7 +539,7 @@ const LayerPanel = () => {
                 <tr>
                   <td
                     colSpan={10}
-                    className="px-4 py-12 text-center text-fg-disabled text-sm font-korean"
+                    className="px-4 py-12 text-center text-fg-disabled text-body-2 font-korean"
                   >
                     데이터가 없습니다.
                   </td>
@@ -551,15 +551,15 @@ const LayerPanel = () => {
                     className="border-b border-stroke hover:bg-[rgba(255,255,255,0.02)] transition-colors"
                   >
                     {/* 번호 */}
-                    <td className="px-4 py-3 text-xs text-fg-disabled font-mono">
+                    <td className="px-4 py-3 text-caption text-fg-disabled font-mono">
                       {(page - 1) * PAGE_SIZE + idx + 1}
                     </td>
                     {/* 레이어코드 */}
                     <td className="px-4 py-3 text-label-2 text-fg-sub font-mono">{item.layerCd}</td>
                     {/* 레이어명 */}
-                    <td className="px-4 py-3 text-xs text-fg font-korean">{item.layerNm}</td>
+                    <td className="px-4 py-3 text-caption text-fg font-korean">{item.layerNm}</td>
                     {/* 레이어전체명 */}
-                    <td className="px-4 py-3 text-xs text-fg-sub font-korean max-w-[200px]">
+                    <td className="px-4 py-3 text-caption text-fg-sub font-korean max-w-[200px]">
                       <span className="block truncate" title={item.layerFullNm}>
                         {item.layerFullNm}
                       </span>
@@ -575,7 +575,7 @@ const LayerPanel = () => {
                       {item.wmsLayerNm ?? <span className="text-fg-disabled">-</span>}
                     </td>
                     {/* 정렬순서 */}
-                    <td className="px-4 py-3 text-xs text-fg-disabled text-center font-mono">
+                    <td className="px-4 py-3 text-caption text-fg-disabled text-center font-mono">
                       {item.sortOrd}
                     </td>
                     {/* 등록일시 */}
@@ -614,13 +614,13 @@ const LayerPanel = () => {
                       <div className="flex items-center justify-center gap-1.5 flex-nowrap">
                         <button
                           onClick={() => setModal({ mode: 'edit', data: item })}
-                          className="px-3 py-1 text-xs rounded bg-[rgba(6,182,212,0.15)] text-color-accent hover:bg-[rgba(6,182,212,0.25)] font-korean whitespace-nowrap"
+                          className="px-3 py-1 text-caption rounded bg-[rgba(6,182,212,0.15)] text-color-accent hover:bg-[rgba(6,182,212,0.25)] font-korean whitespace-nowrap"
                         >
                           수정
                         </button>
                         <button
                           onClick={() => handleDelete(item.layerCd)}
-                          className="px-3 py-1 text-xs rounded bg-red-500/20 text-red-400 hover:bg-red-500/30 font-korean whitespace-nowrap"
+                          className="px-3 py-1 text-caption rounded bg-red-500/20 text-red-400 hover:bg-red-500/30 font-korean whitespace-nowrap"
                         >
                           삭제
                         </button>
diff --git a/frontend/src/tabs/admin/components/MapBasePanel.tsx b/frontend/src/tabs/admin/components/MapBasePanel.tsx
index 50efd74..539f26f 100644
--- a/frontend/src/tabs/admin/components/MapBasePanel.tsx
+++ b/frontend/src/tabs/admin/components/MapBasePanel.tsx
@@ -78,7 +78,7 @@ function MapBaseModal({
       <div className="bg-bg-surface border border-stroke rounded-lg shadow-lg w-[520px] max-h-[90vh] flex flex-col">
         {/* 모달 헤더 */}
         <div className="flex items-center justify-between px-6 py-4 border-b border-stroke">
-          <h2 className="text-sm font-bold text-fg font-korean">
+          <h2 className="text-body-2 font-bold text-fg font-korean">
             {isEdit ? '지도 수정' : '지도 등록'}
           </h2>
           <button onClick={onClose} className="text-fg-disabled hover:text-fg transition-colors">
@@ -108,7 +108,7 @@ function MapBaseModal({
                 value={form.mapNm}
                 onChange={(e) => setField('mapNm', e.target.value)}
                 placeholder="지도 이름을 입력하세요"
-                className="w-full px-3 py-2 text-xs bg-bg-elevated border border-stroke rounded-md text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none font-korean"
+                className="w-full px-3 py-2 text-caption bg-bg-elevated border border-stroke rounded-md text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none font-korean"
               />
             </div>
 
@@ -123,7 +123,7 @@ function MapBaseModal({
                 onChange={(e) => setField('mapKey', e.target.value)}
                 placeholder="고유 식별 키 (영문/숫자)"
                 disabled={isEdit}
-                className="w-full px-3 py-2 text-xs bg-bg-elevated border border-stroke rounded-md text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none font-mono disabled:opacity-50 disabled:cursor-not-allowed"
+                className="w-full px-3 py-2 text-caption bg-bg-elevated border border-stroke rounded-md text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none font-mono disabled:opacity-50 disabled:cursor-not-allowed"
               />
             </div>
 
@@ -135,7 +135,7 @@ function MapBaseModal({
               <select
                 value={form.mapLevelCd}
                 onChange={(e) => setField('mapLevelCd', e.target.value)}
-                className="w-full px-3 py-2 text-xs bg-bg-elevated border border-stroke rounded-md text-fg focus:border-color-accent focus:outline-none font-korean"
+                className="w-full px-3 py-2 text-caption bg-bg-elevated border border-stroke rounded-md text-fg focus:border-color-accent focus:outline-none font-korean"
               >
                 <option value="">선택</option>
                 {MAP_LEVEL_OPTIONS.map((opt) => (
@@ -156,7 +156,7 @@ function MapBaseModal({
                 value={form.mapSrc}
                 onChange={(e) => setField('mapSrc', e.target.value)}
                 placeholder="타일 URL 또는 파일 경로"
-                className="w-full px-3 py-2 text-xs bg-bg-elevated border border-stroke rounded-md text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none font-mono"
+                className="w-full px-3 py-2 text-caption bg-bg-elevated border border-stroke rounded-md text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none font-mono"
               />
             </div>
 
@@ -170,7 +170,7 @@ function MapBaseModal({
                 value={form.mapDc}
                 onChange={(e) => setField('mapDc', e.target.value)}
                 placeholder="지도에 대한 설명을 입력하세요"
-                className="w-full px-3 py-2 text-xs bg-bg-elevated border border-stroke rounded-md text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none font-korean resize-none"
+                className="w-full px-3 py-2 text-caption bg-bg-elevated border border-stroke rounded-md text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none font-korean resize-none"
               />
             </div>
 
@@ -193,7 +193,7 @@ function MapBaseModal({
                     }`}
                   />
                 </button>
-                <span className="text-xs text-fg-sub font-korean">
+                <span className="text-caption text-fg-sub font-korean">
                   {form.useYn === 'Y' ? '사용' : '미사용'}
                 </span>
               </div>
@@ -208,14 +208,14 @@ function MapBaseModal({
             <button
               type="button"
               onClick={onClose}
-              className="px-4 py-2 text-xs border border-stroke text-fg-sub rounded-md hover:bg-[rgba(255,255,255,0.04)] transition-all font-korean"
+              className="px-4 py-2 text-caption border border-stroke text-fg-sub rounded-md hover:bg-[rgba(255,255,255,0.04)] transition-all font-korean"
             >
               취소
             </button>
             <button
               type="submit"
               disabled={saving}
-              className="px-4 py-2 text-xs font-semibold rounded-md bg-color-accent text-bg-0 hover:shadow-[0_0_12px_rgba(6,182,212,0.3)] transition-all disabled:opacity-50 font-korean"
+              className="px-4 py-2 text-caption font-semibold rounded-md bg-color-accent text-bg-0 hover:shadow-[0_0_12px_rgba(6,182,212,0.3)] transition-all disabled:opacity-50 font-korean"
             >
               {saving ? '저장 중...' : isEdit ? '수정' : '등록'}
             </button>
@@ -350,11 +350,11 @@ function MapBasePanel() {
       <div className="flex items-center justify-between px-6 py-4 border-b border-stroke">
         <div>
           <h1 className="text-lg font-bold text-fg font-korean">지도 관리</h1>
-          <p className="text-xs text-fg-disabled mt-1 font-korean">총 {total}건</p>
+          <p className="text-caption text-fg-disabled mt-1 font-korean">총 {total}건</p>
         </div>
         <button
           onClick={() => openModal(null)}
-          className="px-4 py-2 text-xs font-semibold rounded-md bg-color-accent text-bg-0 hover:shadow-[0_0_12px_rgba(6,182,212,0.3)] transition-all font-korean"
+          className="px-4 py-2 text-caption font-semibold rounded-md bg-color-accent text-bg-0 hover:shadow-[0_0_12px_rgba(6,182,212,0.3)] transition-all font-korean"
         >
           + 등록
         </button>
@@ -375,7 +375,7 @@ function MapBasePanel() {
 
       {/* 테이블 영역 */}
       <div className="flex-1 overflow-auto">
-        <table className="w-full text-xs">
+        <table className="w-full text-caption">
           <thead className="sticky top-0 bg-bg-surface z-10">
             <tr className="border-b border-stroke text-fg-disabled">
               <th className="w-12 py-3 text-center">번호</th>
@@ -433,7 +433,7 @@ function MapBasePanel() {
                   <td className="py-3 text-center">
                     <button
                       onClick={() => openModal(item)}
-                      className="px-3 py-1 text-xs rounded bg-[rgba(6,182,212,0.15)] text-color-accent hover:bg-[rgba(6,182,212,0.25)]"
+                      className="px-3 py-1 text-caption rounded bg-[rgba(6,182,212,0.15)] text-color-accent hover:bg-[rgba(6,182,212,0.25)]"
                     >
                       수정
                     </button>
@@ -441,7 +441,7 @@ function MapBasePanel() {
                   <td className="py-3 text-center">
                     <button
                       onClick={() => handleDelete(item)}
-                      className="px-3 py-1 text-xs rounded bg-red-500/20 text-red-400 hover:bg-red-500/30"
+                      className="px-3 py-1 text-caption rounded bg-red-500/20 text-red-400 hover:bg-red-500/30"
                     >
                       삭제
                     </button>
@@ -452,7 +452,7 @@ function MapBasePanel() {
           </tbody>
         </table>
         {!loading && items.length === 0 && (
-          <div className="flex items-center justify-center h-32 text-xs text-fg-disabled font-korean">
+          <div className="flex items-center justify-center h-32 text-caption text-fg-disabled font-korean">
             등록된 지도가 없습니다.
           </div>
         )}
@@ -464,7 +464,7 @@ function MapBasePanel() {
           <button
             onClick={() => setPage((p) => Math.max(1, p - 1))}
             disabled={page <= 1}
-            className="px-2 py-1 text-xs rounded text-fg-disabled hover:bg-bg-elevated disabled:opacity-30"
+            className="px-2 py-1 text-caption rounded text-fg-disabled hover:bg-bg-elevated disabled:opacity-30"
           >
             &lt;
           </button>
@@ -476,7 +476,7 @@ function MapBasePanel() {
               <button
                 key={p}
                 onClick={() => setPage(p)}
-                className={`w-7 h-7 text-xs rounded ${
+                className={`w-7 h-7 text-caption rounded ${
                   p === page
                     ? 'bg-blue-500/20 text-blue-400 font-medium'
                     : 'text-fg-disabled hover:bg-bg-elevated'
@@ -489,7 +489,7 @@ function MapBasePanel() {
           <button
             onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
             disabled={page >= totalPages}
-            className="px-2 py-1 text-xs rounded text-fg-disabled hover:bg-bg-elevated disabled:opacity-30"
+            className="px-2 py-1 text-caption rounded text-fg-disabled hover:bg-bg-elevated disabled:opacity-30"
           >
             &gt;
           </button>
diff --git a/frontend/src/tabs/admin/components/MenusPanel.tsx b/frontend/src/tabs/admin/components/MenusPanel.tsx
index dc9786c..d9e603b 100644
--- a/frontend/src/tabs/admin/components/MenusPanel.tsx
+++ b/frontend/src/tabs/admin/components/MenusPanel.tsx
@@ -124,7 +124,7 @@ function MenusPanel() {
   if (loading) {
     return (
       <div className="flex items-center justify-center h-full">
-        <div className="text-fg-disabled text-sm font-korean">메뉴 설정을 불러오는 중...</div>
+        <div className="text-fg-disabled text-body-2 font-korean">메뉴 설정을 불러오는 중...</div>
       </div>
     );
   }
@@ -136,14 +136,14 @@ function MenusPanel() {
       <div className="flex items-center justify-between px-6 py-4 border-b border-stroke">
         <div>
           <h1 className="text-lg font-bold text-fg font-korean">메뉴 관리</h1>
-          <p className="text-xs text-fg-disabled mt-1 font-korean">
+          <p className="text-caption text-fg-disabled mt-1 font-korean">
             메뉴 표시 여부, 순서, 라벨, 아이콘을 관리합니다
           </p>
         </div>
         <button
           onClick={handleSave}
           disabled={!hasChanges || saving}
-          className={`px-4 py-2 text-xs font-semibold rounded-md transition-all font-korean ${
+          className={`px-4 py-2 text-caption font-semibold rounded-md transition-all font-korean ${
             hasChanges && !saving
               ? 'bg-color-accent text-bg-0 hover:shadow-[0_0_12px_rgba(6,182,212,0.3)]'
               : 'bg-bg-card text-fg-disabled cursor-not-allowed'
@@ -188,7 +188,7 @@ function MenusPanel() {
           <DragOverlay>
             {activeMenu ? (
               <div className="flex items-center gap-3 px-4 py-3 rounded-md border border-color-accent bg-bg-surface shadow-lg opacity-90 max-w-[700px]">
-                <span className="text-fg-disabled text-xs">⠿</span>
+                <span className="text-fg-disabled text-caption">⠿</span>
                 <span className="text-title-2">{activeMenu.icon}</span>
                 <span className="text-title-4 font-semibold text-fg font-korean">
                   {activeMenu.label}
diff --git a/frontend/src/tabs/admin/components/MonitorForecastPanel.tsx b/frontend/src/tabs/admin/components/MonitorForecastPanel.tsx
index 830fe16..79388d8 100644
--- a/frontend/src/tabs/admin/components/MonitorForecastPanel.tsx
+++ b/frontend/src/tabs/admin/components/MonitorForecastPanel.tsx
@@ -45,24 +45,24 @@ function formatTime(iso: string | null): string {
 
 function StatusCell({ row }: { row: NumericalDataStatus }) {
   if (row.lastStatus === 'COMPLETED') {
-    return <span className="text-emerald-400 text-xs">정상</span>;
+    return <span className="text-emerald-400 text-caption">정상</span>;
   }
   if (row.lastStatus === 'FAILED') {
     return (
-      <span className="text-red-400 text-xs">
+      <span className="text-red-400 text-caption">
         오류{row.consecutiveFailures > 0 ? ` (${row.consecutiveFailures}회 연속)` : ''}
       </span>
     );
   }
   if (row.lastStatus === 'STARTED') {
     return (
-      <span className="inline-flex items-center gap-1 text-cyan-400 text-xs">
+      <span className="inline-flex items-center gap-1 text-cyan-400 text-caption">
         <span className="w-1.5 h-1.5 rounded-full bg-cyan-400 animate-pulse" />
         실행 중
       </span>
     );
   }
-  return <span className="text-t3 text-xs">-</span>;
+  return <span className="text-t3 text-caption">-</span>;
 }
 
 function StatusBadge({
@@ -76,7 +76,7 @@ function StatusBadge({
 }) {
   if (loading) {
     return (
-      <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-bg-elevated text-t2">
+      <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-caption bg-bg-elevated text-t2">
         <span className="w-1.5 h-1.5 rounded-full bg-cyan-400 animate-pulse" />
         조회 중...
       </span>
@@ -84,7 +84,7 @@ function StatusBadge({
   }
   if (errorCount === total && total > 0) {
     return (
-      <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-red-500/10 text-red-400">
+      <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-caption bg-red-500/10 text-red-400">
         <span className="w-1.5 h-1.5 rounded-full bg-red-400" />
         연계 오류
       </span>
@@ -92,14 +92,14 @@ function StatusBadge({
   }
   if (errorCount > 0) {
     return (
-      <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-yellow-500/10 text-yellow-400">
+      <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-caption bg-yellow-500/10 text-yellow-400">
         <span className="w-1.5 h-1.5 rounded-full bg-yellow-400" />
         일부 오류 ({errorCount}/{total})
       </span>
     );
   }
   return (
-    <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-emerald-500/10 text-emerald-400">
+    <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-caption bg-emerald-500/10 text-emerald-400">
       <span className="w-1.5 h-1.5 rounded-full bg-emerald-400" />
       정상
     </span>
@@ -118,7 +118,7 @@ const TABLE_HEADERS = [
 function ForecastTable({ rows, loading }: { rows: NumericalDataStatus[]; loading: boolean }) {
   return (
     <div className="overflow-auto">
-      <table className="w-full text-xs border-collapse">
+      <table className="w-full text-caption border-collapse">
         <thead>
           <tr className="bg-bg-elevated text-t3 uppercase tracking-wide">
             {TABLE_HEADERS.map((h) => (
@@ -193,10 +193,10 @@ export default function MonitorForecastPanel() {
     <div className="flex flex-col h-full overflow-hidden">
       {/* 헤더 */}
       <div className="flex items-center justify-between px-5 py-3 border-b border-stroke-1 shrink-0">
-        <h2 className="text-sm font-semibold text-t1">수치예측자료 모니터링</h2>
+        <h2 className="text-body-2 font-semibold text-t1">수치예측자료 모니터링</h2>
         <div className="flex items-center gap-3">
           {lastUpdate && (
-            <span className="text-xs text-t3">
+            <span className="text-caption text-t3">
               갱신:{' '}
               {lastUpdate.toLocaleTimeString('ko-KR', {
                 hour: '2-digit',
@@ -208,7 +208,7 @@ export default function MonitorForecastPanel() {
           <button
             onClick={() => void fetchData()}
             disabled={loading}
-            className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded bg-bg-elevated hover:bg-bg-card text-t2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+            className="flex items-center gap-1.5 px-3 py-1.5 text-caption rounded bg-bg-elevated hover:bg-bg-card text-t2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
           >
             <svg
               className={`w-3.5 h-3.5 ${loading ? 'animate-spin' : ''}`}
@@ -234,7 +234,7 @@ export default function MonitorForecastPanel() {
           <button
             key={tab.id}
             onClick={() => setActiveTab(tab.id)}
-            className={`px-4 py-2.5 text-xs font-medium border-b-2 transition-colors ${
+            className={`px-4 py-2.5 text-caption font-medium border-b-2 transition-colors ${
               activeTab === tab.id
                 ? 'border-cyan-400 text-cyan-400'
                 : 'border-transparent text-t3 hover:text-t2'
@@ -248,7 +248,9 @@ export default function MonitorForecastPanel() {
       {/* 상태 표시줄 */}
       <div className="flex items-center gap-3 px-5 py-2 shrink-0 border-b border-stroke-1 bg-bg-base">
         <StatusBadge loading={loading} errorCount={errorCount} total={totalCount} />
-        {!loading && totalCount > 0 && <span className="text-xs text-t3">모델 {totalCount}개</span>}
+        {!loading && totalCount > 0 && (
+          <span className="text-caption text-t3">모델 {totalCount}개</span>
+        )}
       </div>
 
       {/* 테이블 */}
diff --git a/frontend/src/tabs/admin/components/MonitorRealtimePanel.tsx b/frontend/src/tabs/admin/components/MonitorRealtimePanel.tsx
index 4ebbc2d..28d99f1 100644
--- a/frontend/src/tabs/admin/components/MonitorRealtimePanel.tsx
+++ b/frontend/src/tabs/admin/components/MonitorRealtimePanel.tsx
@@ -84,7 +84,7 @@ function StatusBadge({
 }) {
   if (loading) {
     return (
-      <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-bg-elevated text-t2">
+      <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-caption bg-bg-elevated text-t2">
         <span className="w-1.5 h-1.5 rounded-full bg-cyan-400 animate-pulse" />
         조회 중...
       </span>
@@ -92,7 +92,7 @@ function StatusBadge({
   }
   if (errorCount === total) {
     return (
-      <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-red-500/10 text-red-400">
+      <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-caption bg-red-500/10 text-red-400">
         <span className="w-1.5 h-1.5 rounded-full bg-red-400" />
         연계 오류
       </span>
@@ -100,14 +100,14 @@ function StatusBadge({
   }
   if (errorCount > 0) {
     return (
-      <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-yellow-500/10 text-yellow-400">
+      <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-caption bg-yellow-500/10 text-yellow-400">
         <span className="w-1.5 h-1.5 rounded-full bg-yellow-400" />
         일부 오류 ({errorCount}/{total})
       </span>
     );
   }
   return (
-    <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-emerald-500/10 text-emerald-400">
+    <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-caption bg-emerald-500/10 text-emerald-400">
       <span className="w-1.5 h-1.5 rounded-full bg-emerald-400" />
       정상
     </span>
@@ -130,7 +130,7 @@ function KhoaTable({ rows, loading }: { rows: KhoaRow[]; loading: boolean }) {
 
   return (
     <div className="overflow-auto">
-      <table className="w-full text-xs border-collapse">
+      <table className="w-full text-caption border-collapse">
         <thead>
           <tr className="bg-bg-elevated text-t3 uppercase tracking-wide">
             {headers.map((h) => (
@@ -172,11 +172,11 @@ function KhoaTable({ rows, loading }: { rows: KhoaRow[]; loading: boolean }) {
                   <td className="px-3 py-2 text-t2">{fmt(row.data?.tide_level, 0)}</td>
                   <td className="px-3 py-2">
                     {row.error ? (
-                      <span className="text-red-400 text-xs">오류</span>
+                      <span className="text-red-400 text-caption">오류</span>
                     ) : row.data ? (
-                      <span className="text-emerald-400 text-xs">정상</span>
+                      <span className="text-emerald-400 text-caption">정상</span>
                     ) : (
-                      <span className="text-t3 text-xs">-</span>
+                      <span className="text-t3 text-caption">-</span>
                     )}
                   </td>
                 </tr>
@@ -201,7 +201,7 @@ function KmaUltraTable({ rows, loading }: { rows: KmaUltraRow[]; loading: boolea
 
   return (
     <div className="overflow-auto">
-      <table className="w-full text-xs border-collapse">
+      <table className="w-full text-caption border-collapse">
         <thead>
           <tr className="bg-bg-elevated text-t3 uppercase tracking-wide">
             {headers.map((h) => (
@@ -241,11 +241,11 @@ function KmaUltraTable({ rows, loading }: { rows: KmaUltraRow[]; loading: boolea
                   <td className="px-3 py-2 text-t2">{fmt(row.data?.humidity, 0)}</td>
                   <td className="px-3 py-2">
                     {row.error ? (
-                      <span className="text-red-400 text-xs">오류</span>
+                      <span className="text-red-400 text-caption">오류</span>
                     ) : row.data ? (
-                      <span className="text-emerald-400 text-xs">정상</span>
+                      <span className="text-emerald-400 text-caption">정상</span>
                     ) : (
-                      <span className="text-t3 text-xs">-</span>
+                      <span className="text-t3 text-caption">-</span>
                     )}
                   </td>
                 </tr>
@@ -261,7 +261,7 @@ function MarineTable({ rows, loading }: { rows: MarineRow[]; loading: boolean })
 
   return (
     <div className="overflow-auto">
-      <table className="w-full text-xs border-collapse">
+      <table className="w-full text-caption border-collapse">
         <thead>
           <tr className="bg-bg-elevated text-t3 uppercase tracking-wide">
             {headers.map((h) => (
@@ -294,11 +294,11 @@ function MarineTable({ rows, loading }: { rows: MarineRow[]; loading: boolean })
                   <td className="px-3 py-2 text-t2">{fmt(row.data?.temperature)}</td>
                   <td className="px-3 py-2">
                     {row.error ? (
-                      <span className="text-red-400 text-xs">오류</span>
+                      <span className="text-red-400 text-caption">오류</span>
                     ) : row.data ? (
-                      <span className="text-emerald-400 text-xs">정상</span>
+                      <span className="text-emerald-400 text-caption">정상</span>
                     ) : (
-                      <span className="text-t3 text-xs">-</span>
+                      <span className="text-t3 text-caption">-</span>
                     )}
                   </td>
                 </tr>
@@ -441,10 +441,10 @@ export default function MonitorRealtimePanel() {
     <div className="flex flex-col h-full overflow-hidden">
       {/* 헤더 */}
       <div className="flex items-center justify-between px-5 py-3 border-b border-stroke-1 shrink-0">
-        <h2 className="text-sm font-semibold text-t1">실시간 관측자료 모니터링</h2>
+        <h2 className="text-body-2 font-semibold text-t1">실시간 관측자료 모니터링</h2>
         <div className="flex items-center gap-3">
           {lastUpdate && (
-            <span className="text-xs text-t3">
+            <span className="text-caption text-t3">
               갱신:{' '}
               {lastUpdate.toLocaleTimeString('ko-KR', {
                 hour: '2-digit',
@@ -456,7 +456,7 @@ export default function MonitorRealtimePanel() {
           <button
             onClick={handleRefresh}
             disabled={isLoading}
-            className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded bg-bg-elevated hover:bg-bg-card text-t2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+            className="flex items-center gap-1.5 px-3 py-1.5 text-caption rounded bg-bg-elevated hover:bg-bg-card text-t2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
           >
             <svg
               className={`w-3.5 h-3.5 ${isLoading ? 'animate-spin' : ''}`}
@@ -482,7 +482,7 @@ export default function MonitorRealtimePanel() {
           <button
             key={tab.id}
             onClick={() => setActiveTab(tab.id)}
-            className={`px-4 py-2.5 text-xs font-medium border-b-2 transition-colors ${
+            className={`px-4 py-2.5 text-caption font-medium border-b-2 transition-colors ${
               activeTab === tab.id
                 ? 'border-cyan-400 text-cyan-400'
                 : 'border-transparent text-t3 hover:text-t2'
@@ -496,7 +496,7 @@ export default function MonitorRealtimePanel() {
       {/* 상태 표시줄 */}
       <div className="flex items-center gap-3 px-5 py-2 shrink-0 border-b border-stroke-1 bg-bg-base">
         <StatusBadge loading={isLoading} errorCount={errorCount} total={totalCount} />
-        <span className="text-xs text-t3">
+        <span className="text-caption text-t3">
           {activeTab === 'khoa' && `관측소 ${totalCount}개`}
           {activeTab === 'kma-ultra' && `지점 ${totalCount}개`}
           {activeTab === 'kma-marine' && `해역 ${totalCount}개`}
diff --git a/frontend/src/tabs/admin/components/MonitorVesselPanel.tsx b/frontend/src/tabs/admin/components/MonitorVesselPanel.tsx
index 3b51f97..aecfd69 100644
--- a/frontend/src/tabs/admin/components/MonitorVesselPanel.tsx
+++ b/frontend/src/tabs/admin/components/MonitorVesselPanel.tsx
@@ -300,7 +300,7 @@ function StatusBadge({
 }) {
   if (loading) {
     return (
-      <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-bg-elevated text-t2">
+      <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-caption bg-bg-elevated text-t2">
         <span className="w-1.5 h-1.5 rounded-full bg-cyan-400 animate-pulse" />
         조회 중...
       </span>
@@ -309,7 +309,7 @@ function StatusBadge({
   const offCount = total - onCount;
   if (offCount === total) {
     return (
-      <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-red-500/10 text-red-400">
+      <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-caption bg-red-500/10 text-red-400">
         <span className="w-1.5 h-1.5 rounded-full bg-red-400" />
         전체 OFF
       </span>
@@ -317,14 +317,14 @@ function StatusBadge({
   }
   if (offCount > 0) {
     return (
-      <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-yellow-500/10 text-yellow-400">
+      <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-caption bg-yellow-500/10 text-yellow-400">
         <span className="w-1.5 h-1.5 rounded-full bg-yellow-400" />
         일부 OFF ({offCount}/{total})
       </span>
     );
   }
   return (
-    <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-emerald-500/10 text-emerald-400">
+    <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-caption bg-emerald-500/10 text-emerald-400">
       <span className="w-1.5 h-1.5 rounded-full bg-emerald-400" />
       전체 정상
     </span>
@@ -376,7 +376,7 @@ const HEADERS = [
 function VesselTable({ rows, loading }: { rows: VesselMonitorRow[]; loading: boolean }) {
   return (
     <div className="overflow-auto">
-      <table className="w-full text-xs border-collapse">
+      <table className="w-full text-caption border-collapse">
         <thead>
           <tr className="bg-bg-elevated text-t3 uppercase tracking-wide">
             {HEADERS.map((h) => (
@@ -462,10 +462,10 @@ export default function MonitorVesselPanel() {
     <div className="flex flex-col h-full overflow-hidden">
       {/* 헤더 */}
       <div className="flex items-center justify-between px-5 py-3 border-b border-stroke-1 shrink-0">
-        <h2 className="text-sm font-semibold text-t1">선박위치정보 모니터링</h2>
+        <h2 className="text-body-2 font-semibold text-t1">선박위치정보 모니터링</h2>
         <div className="flex items-center gap-3">
           {lastUpdate && (
-            <span className="text-xs text-t3">
+            <span className="text-caption text-t3">
               갱신:{' '}
               {lastUpdate.toLocaleTimeString('ko-KR', {
                 hour: '2-digit',
@@ -477,7 +477,7 @@ export default function MonitorVesselPanel() {
           <button
             onClick={fetchData}
             disabled={loading}
-            className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded bg-bg-elevated hover:bg-bg-card text-t2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+            className="flex items-center gap-1.5 px-3 py-1.5 text-caption rounded bg-bg-elevated hover:bg-bg-card text-t2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
           >
             <svg
               className={`w-3.5 h-3.5 ${loading ? 'animate-spin' : ''}`}
@@ -500,7 +500,7 @@ export default function MonitorVesselPanel() {
       {/* 상태 표시줄 */}
       <div className="flex items-center gap-3 px-5 py-2 shrink-0 border-b border-stroke-1 bg-bg-base">
         <StatusBadge loading={loading} onCount={onCount} total={rows.length} />
-        <span className="text-xs text-t3">
+        <span className="text-caption text-t3">
           연계 채널 {rows.length}개 (ON: {onCount} / OFF: {rows.length - onCount})
         </span>
       </div>
diff --git a/frontend/src/tabs/admin/components/PermissionsPanel.tsx b/frontend/src/tabs/admin/components/PermissionsPanel.tsx
index 48250ed..9d01556 100644
--- a/frontend/src/tabs/admin/components/PermissionsPanel.tsx
+++ b/frontend/src/tabs/admin/components/PermissionsPanel.tsx
@@ -557,7 +557,7 @@ function RolePermTab({
           </table>
         </div>
       ) : (
-        <div className="flex-1 flex items-center justify-center text-fg-disabled text-sm font-korean">
+        <div className="flex-1 flex items-center justify-center text-fg-disabled text-body-2 font-korean">
           역할을 선택하세요
         </div>
       )}
@@ -567,7 +567,7 @@ function RolePermTab({
         <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
           <div className="w-[400px] bg-bg-surface rounded-lg border border-stroke shadow-2xl">
             <div className="px-5 py-4 border-b border-stroke">
-              <h3 className="text-sm font-bold text-fg font-korean">새 역할 추가</h3>
+              <h3 className="text-body-2 font-bold text-fg font-korean">새 역할 추가</h3>
             </div>
             <div className="px-5 py-4 flex flex-col gap-3">
               <div>
@@ -581,7 +581,7 @@ function RolePermTab({
                     setNewRoleCode(e.target.value.toUpperCase().replace(/[^A-Z0-9_]/g, ''))
                   }
                   placeholder="CUSTOM_ROLE"
-                  className="w-full px-3 py-2 text-xs bg-bg-elevated border border-stroke rounded-md text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none font-mono"
+                  className="w-full px-3 py-2 text-caption bg-bg-elevated border border-stroke rounded-md text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none font-mono"
                 />
                 <p className="text-caption text-fg-disabled mt-1 font-korean">
                   영문 대문자, 숫자, 언더스코어만 허용 (생성 후 변경 불가)
@@ -596,7 +596,7 @@ function RolePermTab({
                   value={newRoleName}
                   onChange={(e) => setNewRoleName(e.target.value)}
                   placeholder="사용자 정의 역할"
-                  className="w-full px-3 py-2 text-xs bg-bg-elevated border border-stroke rounded-md text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none font-korean"
+                  className="w-full px-3 py-2 text-caption bg-bg-elevated border border-stroke rounded-md text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none font-korean"
                 />
               </div>
               <div>
@@ -608,7 +608,7 @@ function RolePermTab({
                   value={newRoleDesc}
                   onChange={(e) => setNewRoleDesc(e.target.value)}
                   placeholder="역할에 대한 설명"
-                  className="w-full px-3 py-2 text-xs bg-bg-elevated border border-stroke rounded-md text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none font-korean"
+                  className="w-full px-3 py-2 text-caption bg-bg-elevated border border-stroke rounded-md text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none font-korean"
                 />
               </div>
               {createError && (
@@ -620,14 +620,14 @@ function RolePermTab({
             <div className="px-5 py-3 border-t border-stroke flex justify-end gap-2">
               <button
                 onClick={() => setShowCreateForm(false)}
-                className="px-4 py-2 text-xs text-fg-disabled border border-stroke rounded-md hover:bg-bg-surface-hover font-korean"
+                className="px-4 py-2 text-caption text-fg-disabled border border-stroke rounded-md hover:bg-bg-surface-hover font-korean"
               >
                 취소
               </button>
               <button
                 onClick={handleCreateRole}
                 disabled={!newRoleCode || !newRoleName || creating}
-                className="px-4 py-2 text-xs font-semibold rounded-md bg-color-accent text-bg-0 hover:shadow-[0_0_12px_rgba(6,182,212,0.3)] transition-all font-korean disabled:opacity-50"
+                className="px-4 py-2 text-caption font-semibold rounded-md bg-color-accent text-bg-0 hover:shadow-[0_0_12px_rgba(6,182,212,0.3)] transition-all font-korean disabled:opacity-50"
               >
                 {creating ? '생성 중...' : '생성'}
               </button>
@@ -815,7 +815,7 @@ function UserPermTab({ roles, permTree, rolePerms }: UserPermTabProps) {
             onFocus={() => setShowDropdown(true)}
             placeholder={loadingUsers ? '불러오는 중...' : '이름, 계정, 조직으로 검색...'}
             disabled={loadingUsers}
-            className="w-full max-w-sm px-3 py-2 text-xs bg-bg-elevated border border-stroke rounded-md text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none font-korean disabled:opacity-50"
+            className="w-full max-w-sm px-3 py-2 text-caption bg-bg-elevated border border-stroke rounded-md text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none font-korean disabled:opacity-50"
           />
           {showDropdown && filteredUsers.length > 0 && (
             <div className="absolute left-0 top-full mt-1 w-full max-w-sm bg-bg-surface border border-stroke rounded-md shadow-xl z-20 overflow-auto max-h-52">
@@ -826,7 +826,7 @@ function UserPermTab({ roles, permTree, rolePerms }: UserPermTabProps) {
                   className="w-full px-3 py-2 text-left hover:bg-bg-surface-hover transition-colors flex items-center gap-2"
                 >
                   <div className="min-w-0 flex-1">
-                    <div className="text-xs font-semibold text-fg font-korean truncate">
+                    <div className="text-caption font-semibold text-fg font-korean truncate">
                       {user.name}
                       {user.rank && (
                         <span className="ml-1 text-caption text-fg-disabled font-korean">
@@ -848,7 +848,7 @@ function UserPermTab({ roles, permTree, rolePerms }: UserPermTabProps) {
             </div>
           )}
           {showDropdown && !loadingUsers && filteredUsers.length === 0 && searchQuery && (
-            <div className="absolute left-0 top-full mt-1 w-full max-w-sm bg-bg-surface border border-stroke rounded-md shadow-xl z-20 px-3 py-2 text-xs text-fg-disabled font-korean">
+            <div className="absolute left-0 top-full mt-1 w-full max-w-sm bg-bg-surface border border-stroke rounded-md shadow-xl z-20 px-3 py-2 text-caption text-fg-disabled font-korean">
               검색 결과 없음
             </div>
           )}
@@ -954,13 +954,13 @@ function UserPermTab({ roles, permTree, rolePerms }: UserPermTabProps) {
               </table>
             </div>
           ) : (
-            <div className="flex-1 flex items-center justify-center text-fg-disabled text-sm font-korean">
+            <div className="flex-1 flex items-center justify-center text-fg-disabled text-body-2 font-korean">
               역할을 하나 이상 할당하면 유효 권한이 표시됩니다
             </div>
           )}
         </>
       ) : (
-        <div className="flex-1 flex items-center justify-center text-fg-disabled text-sm font-korean">
+        <div className="flex-1 flex items-center justify-center text-fg-disabled text-body-2 font-korean">
           사용자를 선택하세요
         </div>
       )}
@@ -1180,7 +1180,7 @@ function PermissionsPanel() {
 
   if (loading) {
     return (
-      <div className="flex items-center justify-center h-32 text-fg-disabled text-sm font-korean">
+      <div className="flex items-center justify-center h-32 text-fg-disabled text-body-2 font-korean">
         불러오는 중...
       </div>
     );
@@ -1194,7 +1194,7 @@ function PermissionsPanel() {
         style={{ flexShrink: 0 }}
       >
         <div>
-          <h1 className="text-sm font-bold text-fg font-korean">권한 관리</h1>
+          <h1 className="text-body-2 font-bold text-fg font-korean">권한 관리</h1>
           <p className="text-caption text-fg-disabled mt-0.5 font-korean">
             역할별 리소스 × CRUD 권한 설정
           </p>
@@ -1203,7 +1203,7 @@ function PermissionsPanel() {
         <div className="flex items-center gap-1 p-1 bg-bg-elevated rounded-lg border border-stroke">
           <button
             onClick={() => setActiveTab('role')}
-            className={`px-4 py-1.5 text-xs font-semibold rounded-md transition-all font-korean ${
+            className={`px-4 py-1.5 text-caption font-semibold rounded-md transition-all font-korean ${
               activeTab === 'role'
                 ? 'bg-color-accent text-bg-0 shadow-[0_0_8px_rgba(6,182,212,0.25)]'
                 : 'text-fg-disabled hover:text-fg-sub'
@@ -1213,7 +1213,7 @@ function PermissionsPanel() {
           </button>
           <button
             onClick={() => setActiveTab('user')}
-            className={`px-4 py-1.5 text-xs font-semibold rounded-md transition-all font-korean ${
+            className={`px-4 py-1.5 text-caption font-semibold rounded-md transition-all font-korean ${
               activeTab === 'user'
                 ? 'bg-color-accent text-bg-0 shadow-[0_0_8px_rgba(6,182,212,0.25)]'
                 : 'text-fg-disabled hover:text-fg-sub'
diff --git a/frontend/src/tabs/admin/components/RndHnsAtmosPanel.tsx b/frontend/src/tabs/admin/components/RndHnsAtmosPanel.tsx
new file mode 100644
index 0000000..4f006e1
--- /dev/null
+++ b/frontend/src/tabs/admin/components/RndHnsAtmosPanel.tsx
@@ -0,0 +1,638 @@
+import { useState, useEffect, useCallback } from 'react';
+
+// ─── 타입 ──────────────────────────────────────────────────────────────────────
+
+type PipelineStatus = '정상' | '지연' | '중단';
+type ReceiveStatus = '수신완료' | '수신대기' | '수신실패' | '시간초과';
+type ProcessStatus = '처리완료' | '처리중' | '대기' | '오류';
+type DataSource = 'HYCOM' | '기상청' | '충북대 API';
+type AlertLevel = '경고' | '주의' | '정보';
+
+interface PipelineNode {
+  id: string;
+  name: string;
+  status: PipelineStatus;
+  lastReceived: string;
+  cycle: string;
+}
+
+interface DataLogRow {
+  id: string;
+  timestamp: string;
+  source: DataSource;
+  dataType: string;
+  size: string;
+  receiveStatus: ReceiveStatus;
+  processStatus: ProcessStatus;
+}
+
+interface AlertItem {
+  id: string;
+  level: AlertLevel;
+  message: string;
+  timestamp: string;
+}
+
+// ─── Mock 데이터 ────────────────────────────────────────────────────────────────
+
+const MOCK_PIPELINE: PipelineNode[] = [
+  {
+    id: 'hycom',
+    name: 'HYCOM 해양순환모델',
+    status: '정상',
+    lastReceived: '2026-04-11 06:00',
+    cycle: '6시간 주기',
+  },
+  {
+    id: 'kma',
+    name: '기상청 수치모델',
+    status: '정상',
+    lastReceived: '2026-04-11 06:00',
+    cycle: '3시간 주기',
+  },
+  {
+    id: 'chungbuk-api',
+    name: '충북대 API 서버',
+    status: '정상',
+    lastReceived: '2026-04-11 06:05',
+    cycle: 'API 호출',
+  },
+  {
+    id: 'atmos-compute',
+    name: 'HNS 대기확산 연산',
+    status: '정상',
+    lastReceived: '2026-04-11 06:10',
+    cycle: '예측 시작 즉시',
+  },
+  {
+    id: 'result-receive',
+    name: '결과 수신',
+    status: '지연',
+    lastReceived: '2026-04-11 06:00',
+    cycle: '연산 완료 즉시',
+  },
+];
+
+const MOCK_LOGS: DataLogRow[] = [
+  {
+    id: 'log-01',
+    timestamp: '2026-04-11 06:10',
+    source: 'HYCOM',
+    dataType: 'SST',
+    size: '98 MB',
+    receiveStatus: '수신완료',
+    processStatus: '처리완료',
+  },
+  {
+    id: 'log-02',
+    timestamp: '2026-04-11 06:10',
+    source: 'HYCOM',
+    dataType: '해류',
+    size: '142 MB',
+    receiveStatus: '수신완료',
+    processStatus: '처리완료',
+  },
+  {
+    id: 'log-03',
+    timestamp: '2026-04-11 06:05',
+    source: '기상청',
+    dataType: '풍향/풍속',
+    size: '38 MB',
+    receiveStatus: '수신완료',
+    processStatus: '처리완료',
+  },
+  {
+    id: 'log-04',
+    timestamp: '2026-04-11 06:05',
+    source: '기상청',
+    dataType: '기압',
+    size: '22 MB',
+    receiveStatus: '수신완료',
+    processStatus: '처리완료',
+  },
+  {
+    id: 'log-05',
+    timestamp: '2026-04-11 06:05',
+    source: '기상청',
+    dataType: '기온',
+    size: '19 MB',
+    receiveStatus: '수신완료',
+    processStatus: '처리완료',
+  },
+  {
+    id: 'log-06',
+    timestamp: '2026-04-11 06:05',
+    source: '기상청',
+    dataType: '대기안정도',
+    size: '14 MB',
+    receiveStatus: '수신완료',
+    processStatus: '처리완료',
+  },
+  {
+    id: 'log-07',
+    timestamp: '2026-04-11 06:07',
+    source: '충북대 API',
+    dataType: 'API 호출 요청',
+    size: '0.2 MB',
+    receiveStatus: '수신완료',
+    processStatus: '처리완료',
+  },
+  {
+    id: 'log-08',
+    timestamp: '2026-04-11 06:15',
+    source: '충북대 API',
+    dataType: 'HNS 확산 결과',
+    size: '-',
+    receiveStatus: '수신대기',
+    processStatus: '대기',
+  },
+  {
+    id: 'log-09',
+    timestamp: '2026-04-11 06:00',
+    source: 'HYCOM',
+    dataType: 'SSH',
+    size: '54 MB',
+    receiveStatus: '수신완료',
+    processStatus: '처리완료',
+  },
+  {
+    id: 'log-10',
+    timestamp: '2026-04-11 03:05',
+    source: '기상청',
+    dataType: '풍향/풍속',
+    size: '37 MB',
+    receiveStatus: '수신완료',
+    processStatus: '처리완료',
+  },
+  {
+    id: 'log-11',
+    timestamp: '2026-04-11 03:07',
+    source: '충북대 API',
+    dataType: 'API 호출 요청',
+    size: '0.2 MB',
+    receiveStatus: '수신완료',
+    processStatus: '처리완료',
+  },
+  {
+    id: 'log-12',
+    timestamp: '2026-04-11 03:20',
+    source: '충북대 API',
+    dataType: 'HNS 확산 결과',
+    size: '12 MB',
+    receiveStatus: '수신완료',
+    processStatus: '처리완료',
+  },
+  {
+    id: 'log-13',
+    timestamp: '2026-04-11 03:20',
+    source: '충북대 API',
+    dataType: '피해범위 데이터',
+    size: '4 MB',
+    receiveStatus: '수신완료',
+    processStatus: '처리완료',
+  },
+  {
+    id: 'log-14',
+    timestamp: '2026-04-11 00:05',
+    source: '기상청',
+    dataType: '기압',
+    size: '23 MB',
+    receiveStatus: '수신완료',
+    processStatus: '처리완료',
+  },
+  {
+    id: 'log-15',
+    timestamp: '2026-04-11 00:00',
+    source: 'HYCOM',
+    dataType: 'SST',
+    size: '97 MB',
+    receiveStatus: '시간초과',
+    processStatus: '오류',
+  },
+];
+
+const MOCK_ALERTS: AlertItem[] = [
+  {
+    id: 'alert-01',
+    level: '주의',
+    message: '충북대 API 결과 수신 지연 — 최근 응답 15분 지연 (2026-04-11 06:15)',
+    timestamp: '2026-04-11 06:30',
+  },
+  {
+    id: 'alert-02',
+    level: '정보',
+    message: 'HYCOM 데이터 정상 수신 완료 (2026-04-11 06:00)',
+    timestamp: '2026-04-11 06:00',
+  },
+  {
+    id: 'alert-03',
+    level: '정보',
+    message: '금일 HNS 대기확산 예측 완료: 2회/4회',
+    timestamp: '2026-04-11 06:12',
+  },
+];
+
+// ─── Mock fetch ─────────────────────────────────────────────────────────────────
+
+interface HnsAtmosData {
+  pipeline: PipelineNode[];
+  logs: DataLogRow[];
+  alerts: AlertItem[];
+}
+
+function fetchHnsAtmosData(): Promise<HnsAtmosData> {
+  return new Promise((resolve) => {
+    setTimeout(
+      () =>
+        resolve({
+          pipeline: MOCK_PIPELINE,
+          logs: MOCK_LOGS,
+          alerts: MOCK_ALERTS,
+        }),
+      300,
+    );
+  });
+}
+
+// ─── 유틸 ───────────────────────────────────────────────────────────────────────
+
+function getPipelineStatusStyle(status: PipelineStatus): string {
+  if (status === '정상') return 'text-emerald-400 bg-emerald-500/10';
+  if (status === '지연') return 'text-yellow-400 bg-yellow-500/10';
+  return 'text-red-400 bg-red-500/10';
+}
+
+function getPipelineBorderStyle(status: PipelineStatus): string {
+  if (status === '정상') return 'border-l-emerald-500';
+  if (status === '지연') return 'border-l-yellow-500';
+  return 'border-l-red-500';
+}
+
+function getReceiveStatusStyle(status: ReceiveStatus): string {
+  if (status === '수신완료') return 'text-emerald-400 bg-emerald-500/10';
+  if (status === '수신대기') return 'text-yellow-400 bg-yellow-500/10';
+  return 'text-red-400 bg-red-500/10';
+}
+
+function getProcessStatusStyle(status: ProcessStatus): string {
+  if (status === '처리완료') return 'text-emerald-400 bg-emerald-500/10';
+  if (status === '처리중') return 'text-cyan-400 bg-cyan-500/10';
+  if (status === '대기') return 'text-yellow-400 bg-yellow-500/10';
+  return 'text-red-400 bg-red-500/10';
+}
+
+function getAlertStyle(level: AlertLevel): string {
+  if (level === '경고') return 'text-red-400 bg-red-500/10 border-red-500/30';
+  if (level === '주의') return 'text-yellow-400 bg-yellow-500/10 border-yellow-500/30';
+  return 'text-cyan-400 bg-cyan-500/10 border-cyan-500/30';
+}
+
+// ─── 파이프라인 카드 ─────────────────────────────────────────────────────────────
+
+function PipelineCard({ node }: { node: PipelineNode }) {
+  const badgeStyle = getPipelineStatusStyle(node.status);
+  const borderStyle = getPipelineBorderStyle(node.status);
+
+  return (
+    <div
+      className={`flex-1 min-w-0 bg-bg-card rounded border border-stroke-1 border-l-2 ${borderStyle} p-3 flex flex-col gap-1.5`}
+    >
+      <div className="text-xs font-medium text-t1 leading-snug">{node.name}</div>
+      <span
+        className={`self-start inline-block px-1.5 py-0.5 rounded text-label-2 font-medium ${badgeStyle}`}
+      >
+        {node.status}
+      </span>
+      <div className="text-label-2 text-t3 mt-0.5">최근 수신: {node.lastReceived}</div>
+      <div className="text-label-2 text-t3">{node.cycle}</div>
+    </div>
+  );
+}
+
+function PipelineFlow({ nodes, loading }: { nodes: PipelineNode[]; loading: boolean }) {
+  if (loading && nodes.length === 0) {
+    return (
+      <div className="flex items-center gap-1 animate-pulse">
+        {Array.from({ length: 5 }).map((_, i) => (
+          <div key={i} className="flex items-center gap-1">
+            <div className="flex-1 h-16 bg-bg-elevated rounded w-28" />
+            {i < 4 && <span className="text-t3 text-sm px-0.5">→</span>}
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex items-stretch gap-1">
+      {nodes.map((node, idx) => (
+        <div key={node.id} className="flex items-center gap-1 flex-1 min-w-0">
+          <PipelineCard node={node} />
+          {idx < nodes.length - 1 && (
+            <span className="text-t3 text-sm shrink-0 px-0.5">→</span>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// ─── 수신 이력 테이블 ────────────────────────────────────────────────────────────
+
+type FilterSource = 'all' | DataSource;
+type FilterReceive = 'all' | ReceiveStatus;
+type FilterPeriod = '6h' | '12h' | '24h';
+
+const PERIOD_HOURS: Record<FilterPeriod, number> = { '6h': 6, '12h': 12, '24h': 24 };
+
+function filterLogs(
+  rows: DataLogRow[],
+  source: FilterSource,
+  receive: FilterReceive,
+  period: FilterPeriod,
+): DataLogRow[] {
+  const cutoff = new Date('2026-04-11T06:30:00');
+  const hours = PERIOD_HOURS[period];
+  const from = new Date(cutoff.getTime() - hours * 60 * 60 * 1000);
+
+  return rows.filter((r) => {
+    if (source !== 'all' && r.source !== source) return false;
+    if (receive !== 'all' && r.receiveStatus !== receive) return false;
+    const ts = new Date(r.timestamp.replace(' ', 'T'));
+    if (ts < from) return false;
+    return true;
+  });
+}
+
+const LOG_HEADERS = ['시간', '데이터소스', '데이터종류', '크기', '수신상태', '처리상태'];
+
+function DataLogTable({ rows, loading }: { rows: DataLogRow[]; loading: boolean }) {
+  return (
+    <div className="overflow-auto">
+      <table className="w-full text-xs border-collapse">
+        <thead>
+          <tr className="bg-bg-elevated text-t3 uppercase tracking-wide">
+            {LOG_HEADERS.map((h) => (
+              <th
+                key={h}
+                className="px-3 py-2 text-left font-medium border-b border-stroke-1 whitespace-nowrap"
+              >
+                {h}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {loading && rows.length === 0
+            ? Array.from({ length: 8 }).map((_, i) => (
+                <tr key={i} className="border-b border-stroke-1 animate-pulse">
+                  {LOG_HEADERS.map((_, j) => (
+                    <td key={j} className="px-3 py-2">
+                      <div className="h-3 bg-bg-elevated rounded w-16" />
+                    </td>
+                  ))}
+                </tr>
+              ))
+            : rows.map((row) => (
+                <tr key={row.id} className="border-b border-stroke-1 hover:bg-bg-surface/50">
+                  <td className="px-3 py-2 text-t2 whitespace-nowrap font-mono">
+                    {row.timestamp}
+                  </td>
+                  <td className="px-3 py-2 font-medium text-t1 whitespace-nowrap">{row.source}</td>
+                  <td className="px-3 py-2 text-t2 whitespace-nowrap">{row.dataType}</td>
+                  <td className="px-3 py-2 text-t2 whitespace-nowrap font-mono">{row.size}</td>
+                  <td className="px-3 py-2">
+                    <span
+                      className={`inline-block px-1.5 py-0.5 rounded text-label-2 font-medium ${getReceiveStatusStyle(row.receiveStatus)}`}
+                    >
+                      {row.receiveStatus}
+                    </span>
+                  </td>
+                  <td className="px-3 py-2">
+                    <span
+                      className={`inline-block px-1.5 py-0.5 rounded text-label-2 font-medium ${getProcessStatusStyle(row.processStatus)}`}
+                    >
+                      {row.processStatus}
+                    </span>
+                  </td>
+                </tr>
+              ))}
+          {!loading && rows.length === 0 && (
+            <tr>
+              <td colSpan={6} className="px-3 py-8 text-center text-t3">
+                조회된 데이터가 없습니다.
+              </td>
+            </tr>
+          )}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+// ─── 알림 목록 ───────────────────────────────────────────────────────────────────
+
+function AlertList({ alerts, loading }: { alerts: AlertItem[]; loading: boolean }) {
+  if (loading && alerts.length === 0) {
+    return (
+      <div className="flex flex-col gap-2 animate-pulse">
+        {Array.from({ length: 3 }).map((_, i) => (
+          <div key={i} className="h-8 bg-bg-elevated rounded" />
+        ))}
+      </div>
+    );
+  }
+
+  if (alerts.length === 0) {
+    return <p className="text-xs text-t3 py-2">활성 알림이 없습니다.</p>;
+  }
+
+  return (
+    <div className="flex flex-col gap-1.5">
+      {alerts.map((alert) => (
+        <div
+          key={alert.id}
+          className={`flex items-start gap-2 px-3 py-2 rounded border text-xs ${getAlertStyle(alert.level)}`}
+        >
+          <span className="font-semibold shrink-0">[{alert.level}]</span>
+          <span className="flex-1">{alert.message}</span>
+          <span className="shrink-0 opacity-70 font-mono">{alert.timestamp}</span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// ─── 메인 패널 ───────────────────────────────────────────────────────────────────
+
+export default function RndHnsAtmosPanel() {
+  const [pipeline, setPipeline] = useState<PipelineNode[]>([]);
+  const [logs, setLogs] = useState<DataLogRow[]>([]);
+  const [alerts, setAlerts] = useState<AlertItem[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [lastUpdate, setLastUpdate] = useState<Date | null>(null);
+
+  // 필터
+  const [filterSource, setFilterSource] = useState<FilterSource>('all');
+  const [filterReceive, setFilterReceive] = useState<FilterReceive>('all');
+  const [filterPeriod, setFilterPeriod] = useState<FilterPeriod>('24h');
+
+  const fetchData = useCallback(async () => {
+    setLoading(true);
+    try {
+      const data = await fetchHnsAtmosData();
+      setPipeline(data.pipeline);
+      setLogs(data.logs);
+      setAlerts(data.alerts);
+      setLastUpdate(new Date());
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    let isMounted = true;
+    void Promise.resolve().then(() => {
+      if (isMounted) void fetchData();
+    });
+    return () => {
+      isMounted = false;
+    };
+  }, [fetchData]);
+
+  const filteredLogs = filterLogs(logs, filterSource, filterReceive, filterPeriod);
+
+  const totalReceived = logs.filter((r) => r.receiveStatus === '수신완료').length;
+  const totalDelayed = logs.filter((r) => r.receiveStatus === '수신대기').length;
+  const totalFailed = logs.filter(
+    (r) => r.receiveStatus === '수신실패' || r.receiveStatus === '시간초과',
+  ).length;
+
+  return (
+    <div className="flex flex-col h-full overflow-hidden">
+      {/* ── 헤더 ── */}
+      <div className="shrink-0 border-b border-stroke-1">
+        <div className="flex items-center justify-between px-5 py-3">
+          <h2 className="text-sm font-semibold text-t1">HNS 대기확산 (충북대) 연계 모니터링</h2>
+          <div className="flex items-center gap-3">
+            {lastUpdate && (
+              <span className="text-xs text-t3">
+                갱신:{' '}
+                {lastUpdate.toLocaleTimeString('ko-KR', {
+                  hour: '2-digit',
+                  minute: '2-digit',
+                  second: '2-digit',
+                })}
+              </span>
+            )}
+            <button
+              onClick={() => void fetchData()}
+              disabled={loading}
+              className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded bg-bg-elevated hover:bg-bg-card text-t2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+            >
+              <svg
+                className={`w-3.5 h-3.5 ${loading ? 'animate-spin' : ''}`}
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+                />
+              </svg>
+              새로고침
+            </button>
+          </div>
+        </div>
+        {/* 요약 통계 바 */}
+        <div className="flex items-center gap-4 px-5 py-2 bg-bg-base text-xs text-t3 border-t border-stroke-1">
+          <span>
+            정상 수신:{' '}
+            <span className="text-emerald-400 font-medium">{totalReceived}건</span>
+          </span>
+          <span className="text-stroke-1">|</span>
+          <span>
+            지연: <span className="text-yellow-400 font-medium">{totalDelayed}건</span>
+          </span>
+          <span className="text-stroke-1">|</span>
+          <span>
+            실패: <span className="text-red-400 font-medium">{totalFailed}건</span>
+          </span>
+          <span className="text-stroke-1">|</span>
+          <span>
+            금일 예측 완료:{' '}
+            <span className="text-cyan-400 font-medium">2 / 4회</span>
+          </span>
+        </div>
+      </div>
+
+      {/* ── 스크롤 영역 ── */}
+      <div className="flex-1 overflow-auto">
+        {/* 파이프라인 현황 */}
+        <section className="px-5 pt-4 pb-3 border-b border-stroke-1">
+          <h3 className="text-xs font-semibold text-t2 mb-3 uppercase tracking-wide">
+            데이터 파이프라인 현황
+          </h3>
+          <PipelineFlow nodes={pipeline} loading={loading} />
+        </section>
+
+        {/* 필터 바 + 수신 이력 테이블 */}
+        <section className="px-5 pt-4 pb-3 border-b border-stroke-1">
+          <div className="flex items-center justify-between mb-3 gap-3 flex-wrap">
+            <h3 className="text-xs font-semibold text-t2 uppercase tracking-wide shrink-0">
+              데이터 수신 이력
+            </h3>
+            <div className="flex items-center gap-2 flex-wrap">
+              {/* 데이터소스 필터 */}
+              <select
+                value={filterSource}
+                onChange={(e) => setFilterSource(e.target.value as FilterSource)}
+                className="px-2 py-1 text-xs rounded bg-bg-elevated border border-stroke-1 text-t2 focus:outline-none focus:border-cyan-500 transition-colors"
+              >
+                <option value="all">모두 (소스)</option>
+                <option value="HYCOM">HYCOM</option>
+                <option value="기상청">기상청</option>
+                <option value="충북대 API">충북대 API</option>
+              </select>
+              {/* 수신상태 필터 */}
+              <select
+                value={filterReceive}
+                onChange={(e) => setFilterReceive(e.target.value as FilterReceive)}
+                className="px-2 py-1 text-xs rounded bg-bg-elevated border border-stroke-1 text-t2 focus:outline-none focus:border-cyan-500 transition-colors"
+              >
+                <option value="all">모두 (상태)</option>
+                <option value="수신완료">수신완료</option>
+                <option value="수신대기">수신대기</option>
+                <option value="수신실패">수신실패</option>
+                <option value="시간초과">시간초과</option>
+              </select>
+              {/* 기간 필터 */}
+              <select
+                value={filterPeriod}
+                onChange={(e) => setFilterPeriod(e.target.value as FilterPeriod)}
+                className="px-2 py-1 text-xs rounded bg-bg-elevated border border-stroke-1 text-t2 focus:outline-none focus:border-cyan-500 transition-colors"
+              >
+                <option value="6h">최근 6시간</option>
+                <option value="12h">최근 12시간</option>
+                <option value="24h">최근 24시간</option>
+              </select>
+              <span className="text-xs text-t3">{filteredLogs.length}건</span>
+            </div>
+          </div>
+          <DataLogTable rows={filteredLogs} loading={loading} />
+        </section>
+
+        {/* 알림 현황 */}
+        <section className="px-5 pt-4 pb-5">
+          <h3 className="text-xs font-semibold text-t2 uppercase tracking-wide mb-3">
+            알림 현황
+          </h3>
+          <AlertList alerts={alerts} loading={loading} />
+        </section>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/tabs/admin/components/RndKospsPanel.tsx b/frontend/src/tabs/admin/components/RndKospsPanel.tsx
new file mode 100644
index 0000000..7e38abb
--- /dev/null
+++ b/frontend/src/tabs/admin/components/RndKospsPanel.tsx
@@ -0,0 +1,638 @@
+import { useState, useEffect, useCallback } from 'react';
+
+// ─── 타입 ──────────────────────────────────────────────────────────────────────
+
+type PipelineStatus = '정상' | '지연' | '중단';
+type ReceiveStatus = '수신완료' | '수신대기' | '수신실패' | '시간초과';
+type ProcessStatus = '처리완료' | '처리중' | '대기' | '오류';
+type DataSource = 'HYCOM' | '기상청' | 'KOSPS DLL';
+type AlertLevel = '경고' | '주의' | '정보';
+
+interface PipelineNode {
+  id: string;
+  name: string;
+  status: PipelineStatus;
+  lastReceived: string;
+  cycle: string;
+}
+
+interface DataLogRow {
+  id: string;
+  timestamp: string;
+  source: DataSource;
+  dataType: string;
+  size: string;
+  receiveStatus: ReceiveStatus;
+  processStatus: ProcessStatus;
+}
+
+interface AlertItem {
+  id: string;
+  level: AlertLevel;
+  message: string;
+  timestamp: string;
+}
+
+// ─── Mock 데이터 ────────────────────────────────────────────────────────────────
+
+const MOCK_PIPELINE: PipelineNode[] = [
+  {
+    id: 'hycom',
+    name: 'HYCOM 해양순환모델',
+    status: '정상',
+    lastReceived: '2026-04-11 06:00',
+    cycle: '6시간 주기',
+  },
+  {
+    id: 'kma',
+    name: '기상청 수치모델',
+    status: '정상',
+    lastReceived: '2026-04-11 06:00',
+    cycle: '3시간 주기',
+  },
+  {
+    id: 'kosps-server',
+    name: '광주 KOSPS 서버',
+    status: '정상',
+    lastReceived: '2026-04-11 06:05',
+    cycle: '수신 즉시',
+  },
+  {
+    id: 'fortran-dll',
+    name: 'KOSPS Fortran DLL 연산',
+    status: '지연',
+    lastReceived: '2026-04-11 05:45',
+    cycle: '예측 시작 즉시',
+  },
+  {
+    id: 'result-api',
+    name: '결과 수신 API',
+    status: '정상',
+    lastReceived: '2026-04-11 06:10',
+    cycle: '예측 완료 즉시',
+  },
+];
+
+const MOCK_LOGS: DataLogRow[] = [
+  {
+    id: 'log-01',
+    timestamp: '2026-04-11 06:10',
+    source: 'KOSPS DLL',
+    dataType: 'DLL 응답 결과',
+    size: '28 MB',
+    receiveStatus: '수신완료',
+    processStatus: '처리완료',
+  },
+  {
+    id: 'log-02',
+    timestamp: '2026-04-11 06:05',
+    source: '기상청',
+    dataType: '풍향/풍속',
+    size: '38 MB',
+    receiveStatus: '수신완료',
+    processStatus: '처리완료',
+  },
+  {
+    id: 'log-03',
+    timestamp: '2026-04-11 06:05',
+    source: '기상청',
+    dataType: '기압',
+    size: '22 MB',
+    receiveStatus: '수신완료',
+    processStatus: '처리완료',
+  },
+  {
+    id: 'log-04',
+    timestamp: '2026-04-11 06:00',
+    source: 'HYCOM',
+    dataType: '해수면온도(SST)',
+    size: '98 MB',
+    receiveStatus: '수신완료',
+    processStatus: '처리완료',
+  },
+  {
+    id: 'log-05',
+    timestamp: '2026-04-11 06:00',
+    source: 'HYCOM',
+    dataType: '해류(U/V)',
+    size: '142 MB',
+    receiveStatus: '수신완료',
+    processStatus: '처리완료',
+  },
+  {
+    id: 'log-06',
+    timestamp: '2026-04-11 06:00',
+    source: '기상청',
+    dataType: '기온',
+    size: '19 MB',
+    receiveStatus: '수신완료',
+    processStatus: '처리완료',
+  },
+  {
+    id: 'log-07',
+    timestamp: '2026-04-11 05:55',
+    source: 'KOSPS DLL',
+    dataType: 'DLL 호출 요청',
+    size: '3 MB',
+    receiveStatus: '수신완료',
+    processStatus: '처리중',
+  },
+  {
+    id: 'log-08',
+    timestamp: '2026-04-11 05:45',
+    source: 'KOSPS DLL',
+    dataType: 'DLL 응답 결과',
+    size: '-',
+    receiveStatus: '수신대기',
+    processStatus: '대기',
+  },
+  {
+    id: 'log-09',
+    timestamp: '2026-04-11 03:10',
+    source: 'HYCOM',
+    dataType: '해류(U/V)',
+    size: '140 MB',
+    receiveStatus: '수신완료',
+    processStatus: '처리완료',
+  },
+  {
+    id: 'log-10',
+    timestamp: '2026-04-11 03:05',
+    source: '기상청',
+    dataType: '풍향/풍속',
+    size: '37 MB',
+    receiveStatus: '수신완료',
+    processStatus: '처리완료',
+  },
+  {
+    id: 'log-11',
+    timestamp: '2026-04-11 03:00',
+    source: 'HYCOM',
+    dataType: '해수면높이(SSH)',
+    size: '54 MB',
+    receiveStatus: '수신완료',
+    processStatus: '처리완료',
+  },
+  {
+    id: 'log-12',
+    timestamp: '2026-04-11 03:00',
+    source: 'KOSPS DLL',
+    dataType: 'DLL 응답 결과',
+    size: '27 MB',
+    receiveStatus: '수신완료',
+    processStatus: '처리완료',
+  },
+  {
+    id: 'log-13',
+    timestamp: '2026-04-11 00:05',
+    source: '기상청',
+    dataType: '기압',
+    size: '23 MB',
+    receiveStatus: '수신완료',
+    processStatus: '처리완료',
+  },
+  {
+    id: 'log-14',
+    timestamp: '2026-04-11 00:00',
+    source: 'HYCOM',
+    dataType: '해수면높이(SSH)',
+    size: '53 MB',
+    receiveStatus: '시간초과',
+    processStatus: '오류',
+  },
+  {
+    id: 'log-15',
+    timestamp: '2026-04-11 00:00',
+    source: 'KOSPS DLL',
+    dataType: 'DLL 호출 요청',
+    size: '-',
+    receiveStatus: '수신실패',
+    processStatus: '오류',
+  },
+];
+
+const MOCK_ALERTS: AlertItem[] = [
+  {
+    id: 'alert-01',
+    level: '경고',
+    message: 'KOSPS Fortran DLL 응답 지연 — 평균 응답시간 초과',
+    timestamp: '2026-04-11 05:45',
+  },
+  {
+    id: 'alert-02',
+    level: '주의',
+    message: 'HYCOM SSH 데이터 다음 수신 예정: 09:00',
+    timestamp: '2026-04-11 06:00',
+  },
+  {
+    id: 'alert-03',
+    level: '정보',
+    message: '금일 KOSPS 예측 완료: 3회 / 6회',
+    timestamp: '2026-04-11 06:12',
+  },
+];
+
+// ─── Mock fetch ─────────────────────────────────────────────────────────────────
+
+interface KospsData {
+  pipeline: PipelineNode[];
+  logs: DataLogRow[];
+  alerts: AlertItem[];
+}
+
+function fetchKospsData(): Promise<KospsData> {
+  return new Promise((resolve) => {
+    setTimeout(
+      () =>
+        resolve({
+          pipeline: MOCK_PIPELINE,
+          logs: MOCK_LOGS,
+          alerts: MOCK_ALERTS,
+        }),
+      300,
+    );
+  });
+}
+
+// ─── 유틸 ───────────────────────────────────────────────────────────────────────
+
+function getPipelineStatusStyle(status: PipelineStatus): string {
+  if (status === '정상') return 'text-emerald-400 bg-emerald-500/10';
+  if (status === '지연') return 'text-yellow-400 bg-yellow-500/10';
+  return 'text-red-400 bg-red-500/10';
+}
+
+function getPipelineBorderStyle(status: PipelineStatus): string {
+  if (status === '정상') return 'border-l-emerald-500';
+  if (status === '지연') return 'border-l-yellow-500';
+  return 'border-l-red-500';
+}
+
+function getReceiveStatusStyle(status: ReceiveStatus): string {
+  if (status === '수신완료') return 'text-emerald-400 bg-emerald-500/10';
+  if (status === '수신대기') return 'text-yellow-400 bg-yellow-500/10';
+  return 'text-red-400 bg-red-500/10';
+}
+
+function getProcessStatusStyle(status: ProcessStatus): string {
+  if (status === '처리완료') return 'text-emerald-400 bg-emerald-500/10';
+  if (status === '처리중') return 'text-cyan-400 bg-cyan-500/10';
+  if (status === '대기') return 'text-yellow-400 bg-yellow-500/10';
+  return 'text-red-400 bg-red-500/10';
+}
+
+function getAlertStyle(level: AlertLevel): string {
+  if (level === '경고') return 'text-red-400 bg-red-500/10 border-red-500/30';
+  if (level === '주의') return 'text-yellow-400 bg-yellow-500/10 border-yellow-500/30';
+  return 'text-cyan-400 bg-cyan-500/10 border-cyan-500/30';
+}
+
+// ─── 파이프라인 카드 ─────────────────────────────────────────────────────────────
+
+function PipelineCard({ node }: { node: PipelineNode }) {
+  const badgeStyle = getPipelineStatusStyle(node.status);
+  const borderStyle = getPipelineBorderStyle(node.status);
+
+  return (
+    <div
+      className={`flex-1 min-w-0 bg-bg-card rounded border border-stroke-1 border-l-2 ${borderStyle} p-3 flex flex-col gap-1.5`}
+    >
+      <div className="text-xs font-medium text-t1 leading-snug">{node.name}</div>
+      <span
+        className={`self-start inline-block px-1.5 py-0.5 rounded text-label-2 font-medium ${badgeStyle}`}
+      >
+        {node.status}
+      </span>
+      <div className="text-label-2 text-t3 mt-0.5">최근 수신: {node.lastReceived}</div>
+      <div className="text-label-2 text-t3">{node.cycle}</div>
+    </div>
+  );
+}
+
+function PipelineFlow({ nodes, loading }: { nodes: PipelineNode[]; loading: boolean }) {
+  if (loading && nodes.length === 0) {
+    return (
+      <div className="flex items-center gap-1 animate-pulse">
+        {Array.from({ length: 5 }).map((_, i) => (
+          <div key={i} className="flex items-center gap-1">
+            <div className="flex-1 h-16 bg-bg-elevated rounded w-28" />
+            {i < 4 && <span className="text-t3 text-sm px-0.5">→</span>}
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex items-stretch gap-1">
+      {nodes.map((node, idx) => (
+        <div key={node.id} className="flex items-center gap-1 flex-1 min-w-0">
+          <PipelineCard node={node} />
+          {idx < nodes.length - 1 && (
+            <span className="text-t3 text-sm shrink-0 px-0.5">→</span>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// ─── 수신 이력 테이블 ────────────────────────────────────────────────────────────
+
+type FilterSource = 'all' | DataSource;
+type FilterReceive = 'all' | ReceiveStatus;
+type FilterPeriod = '6h' | '12h' | '24h';
+
+const PERIOD_HOURS: Record<FilterPeriod, number> = { '6h': 6, '12h': 12, '24h': 24 };
+
+function filterLogs(
+  rows: DataLogRow[],
+  source: FilterSource,
+  receive: FilterReceive,
+  period: FilterPeriod,
+): DataLogRow[] {
+  const cutoff = new Date('2026-04-11T06:30:00');
+  const hours = PERIOD_HOURS[period];
+  const from = new Date(cutoff.getTime() - hours * 60 * 60 * 1000);
+
+  return rows.filter((r) => {
+    if (source !== 'all' && r.source !== source) return false;
+    if (receive !== 'all' && r.receiveStatus !== receive) return false;
+    const ts = new Date(r.timestamp.replace(' ', 'T'));
+    if (ts < from) return false;
+    return true;
+  });
+}
+
+const LOG_HEADERS = ['시간', '데이터소스', '데이터종류', '크기', '수신상태', '처리상태'];
+
+function DataLogTable({ rows, loading }: { rows: DataLogRow[]; loading: boolean }) {
+  return (
+    <div className="overflow-auto">
+      <table className="w-full text-xs border-collapse">
+        <thead>
+          <tr className="bg-bg-elevated text-t3 uppercase tracking-wide">
+            {LOG_HEADERS.map((h) => (
+              <th
+                key={h}
+                className="px-3 py-2 text-left font-medium border-b border-stroke-1 whitespace-nowrap"
+              >
+                {h}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {loading && rows.length === 0
+            ? Array.from({ length: 8 }).map((_, i) => (
+                <tr key={i} className="border-b border-stroke-1 animate-pulse">
+                  {LOG_HEADERS.map((_, j) => (
+                    <td key={j} className="px-3 py-2">
+                      <div className="h-3 bg-bg-elevated rounded w-16" />
+                    </td>
+                  ))}
+                </tr>
+              ))
+            : rows.map((row) => (
+                <tr key={row.id} className="border-b border-stroke-1 hover:bg-bg-surface/50">
+                  <td className="px-3 py-2 text-t2 whitespace-nowrap font-mono">
+                    {row.timestamp}
+                  </td>
+                  <td className="px-3 py-2 font-medium text-t1 whitespace-nowrap">{row.source}</td>
+                  <td className="px-3 py-2 text-t2 whitespace-nowrap">{row.dataType}</td>
+                  <td className="px-3 py-2 text-t2 whitespace-nowrap font-mono">{row.size}</td>
+                  <td className="px-3 py-2">
+                    <span
+                      className={`inline-block px-1.5 py-0.5 rounded text-label-2 font-medium ${getReceiveStatusStyle(row.receiveStatus)}`}
+                    >
+                      {row.receiveStatus}
+                    </span>
+                  </td>
+                  <td className="px-3 py-2">
+                    <span
+                      className={`inline-block px-1.5 py-0.5 rounded text-label-2 font-medium ${getProcessStatusStyle(row.processStatus)}`}
+                    >
+                      {row.processStatus}
+                    </span>
+                  </td>
+                </tr>
+              ))}
+          {!loading && rows.length === 0 && (
+            <tr>
+              <td colSpan={6} className="px-3 py-8 text-center text-t3">
+                조회된 데이터가 없습니다.
+              </td>
+            </tr>
+          )}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+// ─── 알림 목록 ───────────────────────────────────────────────────────────────────
+
+function AlertList({ alerts, loading }: { alerts: AlertItem[]; loading: boolean }) {
+  if (loading && alerts.length === 0) {
+    return (
+      <div className="flex flex-col gap-2 animate-pulse">
+        {Array.from({ length: 3 }).map((_, i) => (
+          <div key={i} className="h-8 bg-bg-elevated rounded" />
+        ))}
+      </div>
+    );
+  }
+
+  if (alerts.length === 0) {
+    return <p className="text-xs text-t3 py-2">활성 알림이 없습니다.</p>;
+  }
+
+  return (
+    <div className="flex flex-col gap-1.5">
+      {alerts.map((alert) => (
+        <div
+          key={alert.id}
+          className={`flex items-start gap-2 px-3 py-2 rounded border text-xs ${getAlertStyle(alert.level)}`}
+        >
+          <span className="font-semibold shrink-0">[{alert.level}]</span>
+          <span className="flex-1">{alert.message}</span>
+          <span className="shrink-0 opacity-70 font-mono">{alert.timestamp}</span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// ─── 메인 패널 ───────────────────────────────────────────────────────────────────
+
+export default function RndKospsPanel() {
+  const [pipeline, setPipeline] = useState<PipelineNode[]>([]);
+  const [logs, setLogs] = useState<DataLogRow[]>([]);
+  const [alerts, setAlerts] = useState<AlertItem[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [lastUpdate, setLastUpdate] = useState<Date | null>(null);
+
+  // 필터
+  const [filterSource, setFilterSource] = useState<FilterSource>('all');
+  const [filterReceive, setFilterReceive] = useState<FilterReceive>('all');
+  const [filterPeriod, setFilterPeriod] = useState<FilterPeriod>('24h');
+
+  const fetchData = useCallback(async () => {
+    setLoading(true);
+    try {
+      const data = await fetchKospsData();
+      setPipeline(data.pipeline);
+      setLogs(data.logs);
+      setAlerts(data.alerts);
+      setLastUpdate(new Date());
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    let isMounted = true;
+    void Promise.resolve().then(() => {
+      if (isMounted) void fetchData();
+    });
+    return () => {
+      isMounted = false;
+    };
+  }, [fetchData]);
+
+  const filteredLogs = filterLogs(logs, filterSource, filterReceive, filterPeriod);
+
+  const totalReceived = logs.filter((r) => r.receiveStatus === '수신완료').length;
+  const totalDelayed = logs.filter((r) => r.receiveStatus === '수신대기').length;
+  const totalFailed = logs.filter(
+    (r) => r.receiveStatus === '수신실패' || r.receiveStatus === '시간초과',
+  ).length;
+
+  return (
+    <div className="flex flex-col h-full overflow-hidden">
+      {/* ── 헤더 ── */}
+      <div className="shrink-0 border-b border-stroke-1">
+        <div className="flex items-center justify-between px-5 py-3">
+          <h2 className="text-sm font-semibold text-t1">유출유확산예측 (KOSPS) 연계 모니터링</h2>
+          <div className="flex items-center gap-3">
+            {lastUpdate && (
+              <span className="text-xs text-t3">
+                갱신:{' '}
+                {lastUpdate.toLocaleTimeString('ko-KR', {
+                  hour: '2-digit',
+                  minute: '2-digit',
+                  second: '2-digit',
+                })}
+              </span>
+            )}
+            <button
+              onClick={() => void fetchData()}
+              disabled={loading}
+              className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded bg-bg-elevated hover:bg-bg-card text-t2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+            >
+              <svg
+                className={`w-3.5 h-3.5 ${loading ? 'animate-spin' : ''}`}
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+                />
+              </svg>
+              새로고침
+            </button>
+          </div>
+        </div>
+        {/* 요약 통계 바 */}
+        <div className="flex items-center gap-4 px-5 py-2 bg-bg-base text-xs text-t3 border-t border-stroke-1">
+          <span>
+            정상 수신:{' '}
+            <span className="text-emerald-400 font-medium">{totalReceived}건</span>
+          </span>
+          <span className="text-stroke-1">|</span>
+          <span>
+            지연: <span className="text-yellow-400 font-medium">{totalDelayed}건</span>
+          </span>
+          <span className="text-stroke-1">|</span>
+          <span>
+            실패: <span className="text-red-400 font-medium">{totalFailed}건</span>
+          </span>
+          <span className="text-stroke-1">|</span>
+          <span>
+            금일 예측 완료:{' '}
+            <span className="text-cyan-400 font-medium">3 / 6회</span>
+          </span>
+        </div>
+      </div>
+
+      {/* ── 스크롤 영역 ── */}
+      <div className="flex-1 overflow-auto">
+        {/* 파이프라인 현황 */}
+        <section className="px-5 pt-4 pb-3 border-b border-stroke-1">
+          <h3 className="text-xs font-semibold text-t2 mb-3 uppercase tracking-wide">
+            데이터 파이프라인 현황
+          </h3>
+          <PipelineFlow nodes={pipeline} loading={loading} />
+        </section>
+
+        {/* 필터 바 + 수신 이력 테이블 */}
+        <section className="px-5 pt-4 pb-3 border-b border-stroke-1">
+          <div className="flex items-center justify-between mb-3 gap-3 flex-wrap">
+            <h3 className="text-xs font-semibold text-t2 uppercase tracking-wide shrink-0">
+              데이터 수신 이력
+            </h3>
+            <div className="flex items-center gap-2 flex-wrap">
+              {/* 데이터소스 필터 */}
+              <select
+                value={filterSource}
+                onChange={(e) => setFilterSource(e.target.value as FilterSource)}
+                className="px-2 py-1 text-xs rounded bg-bg-elevated border border-stroke-1 text-t2 focus:outline-none focus:border-cyan-500 transition-colors"
+              >
+                <option value="all">모두 (소스)</option>
+                <option value="HYCOM">HYCOM</option>
+                <option value="기상청">기상청</option>
+                <option value="KOSPS DLL">KOSPS DLL</option>
+              </select>
+              {/* 수신상태 필터 */}
+              <select
+                value={filterReceive}
+                onChange={(e) => setFilterReceive(e.target.value as FilterReceive)}
+                className="px-2 py-1 text-xs rounded bg-bg-elevated border border-stroke-1 text-t2 focus:outline-none focus:border-cyan-500 transition-colors"
+              >
+                <option value="all">모두 (상태)</option>
+                <option value="수신완료">수신완료</option>
+                <option value="수신대기">수신대기</option>
+                <option value="수신실패">수신실패</option>
+                <option value="시간초과">시간초과</option>
+              </select>
+              {/* 기간 필터 */}
+              <select
+                value={filterPeriod}
+                onChange={(e) => setFilterPeriod(e.target.value as FilterPeriod)}
+                className="px-2 py-1 text-xs rounded bg-bg-elevated border border-stroke-1 text-t2 focus:outline-none focus:border-cyan-500 transition-colors"
+              >
+                <option value="6h">최근 6시간</option>
+                <option value="12h">최근 12시간</option>
+                <option value="24h">최근 24시간</option>
+              </select>
+              <span className="text-xs text-t3">{filteredLogs.length}건</span>
+            </div>
+          </div>
+          <DataLogTable rows={filteredLogs} loading={loading} />
+        </section>
+
+        {/* 알림 현황 */}
+        <section className="px-5 pt-4 pb-5">
+          <h3 className="text-xs font-semibold text-t2 uppercase tracking-wide mb-3">
+            알림 현황
+          </h3>
+          <AlertList alerts={alerts} loading={loading} />
+        </section>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/tabs/admin/components/RndPoseidonPanel.tsx b/frontend/src/tabs/admin/components/RndPoseidonPanel.tsx
new file mode 100644
index 0000000..8d1bece
--- /dev/null
+++ b/frontend/src/tabs/admin/components/RndPoseidonPanel.tsx
@@ -0,0 +1,665 @@
+import { useState, useEffect, useCallback } from 'react';
+
+// ─── 타입 ──────────────────────────────────────────────────────────────────────
+
+type PipelineStatus = '정상' | '지연' | '중단';
+type ReceiveStatus = '수신완료' | '수신대기' | '수신실패' | '시간초과';
+type ProcessStatus = '처리완료' | '처리중' | '대기' | '오류';
+type DataSource = 'HYCOM' | '기상수치모델' | '기상기술';
+type AlertLevel = '경고' | '주의' | '정보';
+
+interface PipelineNode {
+  id: string;
+  name: string;
+  status: PipelineStatus;
+  lastReceived: string;
+  cycle: string;
+}
+
+interface DataLogRow {
+  id: string;
+  timestamp: string;
+  source: DataSource;
+  dataType: string;
+  size: string;
+  receiveStatus: ReceiveStatus;
+  processStatus: ProcessStatus;
+}
+
+interface AlertItem {
+  id: string;
+  level: AlertLevel;
+  message: string;
+  timestamp: string;
+}
+
+// ─── Mock 데이터 ────────────────────────────────────────────────────────────────
+
+const MOCK_PIPELINE: PipelineNode[] = [
+  {
+    id: 'hycom',
+    name: 'HYCOM 해양순환모델',
+    status: '정상',
+    lastReceived: '2026-04-11 06:00',
+    cycle: '6시간 주기',
+  },
+  {
+    id: 'kma',
+    name: '기상수치모델(KMA)',
+    status: '정상',
+    lastReceived: '2026-04-11 06:00',
+    cycle: '3시간 주기',
+  },
+  {
+    id: 'relay',
+    name: '기상기술 중계서버',
+    status: '지연',
+    lastReceived: '2026-04-11 05:30',
+    cycle: '3시간 주기',
+  },
+  {
+    id: 'api',
+    name: '해경 9층 API서버',
+    status: '정상',
+    lastReceived: '2026-04-11 06:05',
+    cycle: '수신 즉시',
+  },
+  {
+    id: 'gpu',
+    name: 'GPU 연산서버',
+    status: '정상',
+    lastReceived: '2026-04-11 06:10',
+    cycle: '예측 시작 즉시',
+  },
+];
+
+const MOCK_LOGS: DataLogRow[] = [
+  {
+    id: 'log-01',
+    timestamp: '2026-04-11 06:10',
+    source: 'HYCOM',
+    dataType: '해류(U/V)',
+    size: '142 MB',
+    receiveStatus: '수신완료',
+    processStatus: '처리완료',
+  },
+  {
+    id: 'log-02',
+    timestamp: '2026-04-11 06:05',
+    source: '기상수치모델',
+    dataType: '풍향/풍속',
+    size: '38 MB',
+    receiveStatus: '수신완료',
+    processStatus: '처리완료',
+  },
+  {
+    id: 'log-03',
+    timestamp: '2026-04-11 06:05',
+    source: '기상수치모델',
+    dataType: '기압',
+    size: '22 MB',
+    receiveStatus: '수신완료',
+    processStatus: '처리완료',
+  },
+  {
+    id: 'log-04',
+    timestamp: '2026-04-11 06:00',
+    source: 'HYCOM',
+    dataType: '해수면온도(SST)',
+    size: '98 MB',
+    receiveStatus: '수신완료',
+    processStatus: '처리완료',
+  },
+  {
+    id: 'log-05',
+    timestamp: '2026-04-11 06:00',
+    source: 'HYCOM',
+    dataType: '해수면높이(SSH)',
+    size: '54 MB',
+    receiveStatus: '수신완료',
+    processStatus: '처리완료',
+  },
+  {
+    id: 'log-06',
+    timestamp: '2026-04-11 06:00',
+    source: '기상수치모델',
+    dataType: '기온',
+    size: '19 MB',
+    receiveStatus: '수신완료',
+    processStatus: '처리완료',
+  },
+  {
+    id: 'log-07',
+    timestamp: '2026-04-11 06:00',
+    source: '기상수치모델',
+    dataType: '강수량',
+    size: '11 MB',
+    receiveStatus: '수신완료',
+    processStatus: '처리완료',
+  },
+  {
+    id: 'log-08',
+    timestamp: '2026-04-11 06:00',
+    source: '기상기술',
+    dataType: '전처리 완료 데이터',
+    size: '310 MB',
+    receiveStatus: '수신대기',
+    processStatus: '대기',
+  },
+  {
+    id: 'log-09',
+    timestamp: '2026-04-11 03:10',
+    source: 'HYCOM',
+    dataType: '해류(U/V)',
+    size: '140 MB',
+    receiveStatus: '수신완료',
+    processStatus: '처리완료',
+  },
+  {
+    id: 'log-10',
+    timestamp: '2026-04-11 03:05',
+    source: '기상수치모델',
+    dataType: '풍향/풍속',
+    size: '37 MB',
+    receiveStatus: '수신완료',
+    processStatus: '처리완료',
+  },
+  {
+    id: 'log-11',
+    timestamp: '2026-04-11 03:00',
+    source: 'HYCOM',
+    dataType: '해수면온도(SST)',
+    size: '97 MB',
+    receiveStatus: '수신완료',
+    processStatus: '처리완료',
+  },
+  {
+    id: 'log-12',
+    timestamp: '2026-04-11 03:00',
+    source: '기상기술',
+    dataType: '전처리 완료 데이터',
+    size: '305 MB',
+    receiveStatus: '수신완료',
+    processStatus: '처리완료',
+  },
+  {
+    id: 'log-13',
+    timestamp: '2026-04-11 00:05',
+    source: '기상수치모델',
+    dataType: '기압',
+    size: '23 MB',
+    receiveStatus: '수신완료',
+    processStatus: '처리완료',
+  },
+  {
+    id: 'log-14',
+    timestamp: '2026-04-11 00:00',
+    source: 'HYCOM',
+    dataType: '해수면높이(SSH)',
+    size: '53 MB',
+    receiveStatus: '시간초과',
+    processStatus: '오류',
+  },
+  {
+    id: 'log-15',
+    timestamp: '2026-04-11 00:00',
+    source: '기상기술',
+    dataType: '전처리 완료 데이터',
+    size: '-',
+    receiveStatus: '수신실패',
+    processStatus: '오류',
+  },
+  {
+    id: 'log-16',
+    timestamp: '2026-04-10 21:05',
+    source: '기상수치모델',
+    dataType: '풍향/풍속',
+    size: '36 MB',
+    receiveStatus: '수신완료',
+    processStatus: '처리완료',
+  },
+  {
+    id: 'log-17',
+    timestamp: '2026-04-10 21:00',
+    source: 'HYCOM',
+    dataType: '해류(U/V)',
+    size: '139 MB',
+    receiveStatus: '수신완료',
+    processStatus: '처리완료',
+  },
+  {
+    id: 'log-18',
+    timestamp: '2026-04-10 21:00',
+    source: '기상기술',
+    dataType: '전처리 완료 데이터',
+    size: '302 MB',
+    receiveStatus: '수신완료',
+    processStatus: '처리완료',
+  },
+];
+
+const MOCK_ALERTS: AlertItem[] = [
+  {
+    id: 'alert-01',
+    level: '경고',
+    message: '기상기술 중계서버 데이터 30분 지연 — 06:00 배치 전처리 미완료',
+    timestamp: '2026-04-11 06:30',
+  },
+  {
+    id: 'alert-02',
+    level: '주의',
+    message: 'HYCOM SSH 데이터 다음 수신 예정: 09:00',
+    timestamp: '2026-04-11 06:00',
+  },
+  {
+    id: 'alert-03',
+    level: '정보',
+    message: 'GPU 연산서버 금일 처리 완료: 4회 / 8회',
+    timestamp: '2026-04-11 06:12',
+  },
+];
+
+// ─── Mock fetch ─────────────────────────────────────────────────────────────────
+
+interface PoseidonData {
+  pipeline: PipelineNode[];
+  logs: DataLogRow[];
+  alerts: AlertItem[];
+}
+
+function fetchPoseidonData(): Promise<PoseidonData> {
+  return new Promise((resolve) => {
+    setTimeout(
+      () =>
+        resolve({
+          pipeline: MOCK_PIPELINE,
+          logs: MOCK_LOGS,
+          alerts: MOCK_ALERTS,
+        }),
+      300,
+    );
+  });
+}
+
+// ─── 유틸 ───────────────────────────────────────────────────────────────────────
+
+function getPipelineStatusStyle(status: PipelineStatus): string {
+  if (status === '정상') return 'text-emerald-400 bg-emerald-500/10';
+  if (status === '지연') return 'text-yellow-400 bg-yellow-500/10';
+  return 'text-red-400 bg-red-500/10';
+}
+
+function getPipelineBorderStyle(status: PipelineStatus): string {
+  if (status === '정상') return 'border-l-emerald-500';
+  if (status === '지연') return 'border-l-yellow-500';
+  return 'border-l-red-500';
+}
+
+function getReceiveStatusStyle(status: ReceiveStatus): string {
+  if (status === '수신완료') return 'text-emerald-400 bg-emerald-500/10';
+  if (status === '수신대기') return 'text-yellow-400 bg-yellow-500/10';
+  return 'text-red-400 bg-red-500/10';
+}
+
+function getProcessStatusStyle(status: ProcessStatus): string {
+  if (status === '처리완료') return 'text-emerald-400 bg-emerald-500/10';
+  if (status === '처리중') return 'text-cyan-400 bg-cyan-500/10';
+  if (status === '대기') return 'text-yellow-400 bg-yellow-500/10';
+  return 'text-red-400 bg-red-500/10';
+}
+
+function getAlertStyle(level: AlertLevel): string {
+  if (level === '경고') return 'text-red-400 bg-red-500/10 border-red-500/30';
+  if (level === '주의') return 'text-yellow-400 bg-yellow-500/10 border-yellow-500/30';
+  return 'text-cyan-400 bg-cyan-500/10 border-cyan-500/30';
+}
+
+// ─── 파이프라인 카드 ─────────────────────────────────────────────────────────────
+
+function PipelineCard({ node }: { node: PipelineNode }) {
+  const badgeStyle = getPipelineStatusStyle(node.status);
+  const borderStyle = getPipelineBorderStyle(node.status);
+
+  return (
+    <div
+      className={`flex-1 min-w-0 bg-bg-card rounded border border-stroke-1 border-l-2 ${borderStyle} p-3 flex flex-col gap-1.5`}
+    >
+      <div className="text-xs font-medium text-t1 leading-snug">{node.name}</div>
+      <span
+        className={`self-start inline-block px-1.5 py-0.5 rounded text-label-2 font-medium ${badgeStyle}`}
+      >
+        {node.status}
+      </span>
+      <div className="text-label-2 text-t3 mt-0.5">최근 수신: {node.lastReceived}</div>
+      <div className="text-label-2 text-t3">{node.cycle}</div>
+    </div>
+  );
+}
+
+function PipelineFlow({ nodes, loading }: { nodes: PipelineNode[]; loading: boolean }) {
+  if (loading && nodes.length === 0) {
+    return (
+      <div className="flex items-center gap-1 animate-pulse">
+        {Array.from({ length: 5 }).map((_, i) => (
+          <div key={i} className="flex items-center gap-1">
+            <div className="flex-1 h-16 bg-bg-elevated rounded w-28" />
+            {i < 4 && <span className="text-t3 text-sm px-0.5">→</span>}
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex items-stretch gap-1">
+      {nodes.map((node, idx) => (
+        <div key={node.id} className="flex items-center gap-1 flex-1 min-w-0">
+          <PipelineCard node={node} />
+          {idx < nodes.length - 1 && (
+            <span className="text-t3 text-sm shrink-0 px-0.5">→</span>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// ─── 수신 이력 테이블 ────────────────────────────────────────────────────────────
+
+type FilterSource = 'all' | DataSource;
+type FilterReceive = 'all' | ReceiveStatus;
+type FilterPeriod = '6h' | '12h' | '24h';
+
+const PERIOD_HOURS: Record<FilterPeriod, number> = { '6h': 6, '12h': 12, '24h': 24 };
+
+function filterLogs(
+  rows: DataLogRow[],
+  source: FilterSource,
+  receive: FilterReceive,
+  period: FilterPeriod,
+): DataLogRow[] {
+  const cutoff = new Date('2026-04-11T06:30:00');
+  const hours = PERIOD_HOURS[period];
+  const from = new Date(cutoff.getTime() - hours * 60 * 60 * 1000);
+
+  return rows.filter((r) => {
+    if (source !== 'all' && r.source !== source) return false;
+    if (receive !== 'all' && r.receiveStatus !== receive) return false;
+    const ts = new Date(r.timestamp.replace(' ', 'T'));
+    if (ts < from) return false;
+    return true;
+  });
+}
+
+const LOG_HEADERS = ['시간', '데이터소스', '데이터종류', '크기', '수신상태', '처리상태'];
+
+function DataLogTable({ rows, loading }: { rows: DataLogRow[]; loading: boolean }) {
+  return (
+    <div className="overflow-auto">
+      <table className="w-full text-xs border-collapse">
+        <thead>
+          <tr className="bg-bg-elevated text-t3 uppercase tracking-wide">
+            {LOG_HEADERS.map((h) => (
+              <th
+                key={h}
+                className="px-3 py-2 text-left font-medium border-b border-stroke-1 whitespace-nowrap"
+              >
+                {h}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {loading && rows.length === 0
+            ? Array.from({ length: 8 }).map((_, i) => (
+                <tr key={i} className="border-b border-stroke-1 animate-pulse">
+                  {LOG_HEADERS.map((_, j) => (
+                    <td key={j} className="px-3 py-2">
+                      <div className="h-3 bg-bg-elevated rounded w-16" />
+                    </td>
+                  ))}
+                </tr>
+              ))
+            : rows.map((row) => (
+                <tr key={row.id} className="border-b border-stroke-1 hover:bg-bg-surface/50">
+                  <td className="px-3 py-2 text-t2 whitespace-nowrap font-mono">
+                    {row.timestamp}
+                  </td>
+                  <td className="px-3 py-2 font-medium text-t1 whitespace-nowrap">{row.source}</td>
+                  <td className="px-3 py-2 text-t2 whitespace-nowrap">{row.dataType}</td>
+                  <td className="px-3 py-2 text-t2 whitespace-nowrap font-mono">{row.size}</td>
+                  <td className="px-3 py-2">
+                    <span
+                      className={`inline-block px-1.5 py-0.5 rounded text-label-2 font-medium ${getReceiveStatusStyle(row.receiveStatus)}`}
+                    >
+                      {row.receiveStatus}
+                    </span>
+                  </td>
+                  <td className="px-3 py-2">
+                    <span
+                      className={`inline-block px-1.5 py-0.5 rounded text-label-2 font-medium ${getProcessStatusStyle(row.processStatus)}`}
+                    >
+                      {row.processStatus}
+                    </span>
+                  </td>
+                </tr>
+              ))}
+          {!loading && rows.length === 0 && (
+            <tr>
+              <td colSpan={6} className="px-3 py-8 text-center text-t3">
+                조회된 데이터가 없습니다.
+              </td>
+            </tr>
+          )}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+// ─── 알림 목록 ───────────────────────────────────────────────────────────────────
+
+function AlertList({ alerts, loading }: { alerts: AlertItem[]; loading: boolean }) {
+  if (loading && alerts.length === 0) {
+    return (
+      <div className="flex flex-col gap-2 animate-pulse">
+        {Array.from({ length: 3 }).map((_, i) => (
+          <div key={i} className="h-8 bg-bg-elevated rounded" />
+        ))}
+      </div>
+    );
+  }
+
+  if (alerts.length === 0) {
+    return <p className="text-xs text-t3 py-2">활성 알림이 없습니다.</p>;
+  }
+
+  return (
+    <div className="flex flex-col gap-1.5">
+      {alerts.map((alert) => (
+        <div
+          key={alert.id}
+          className={`flex items-start gap-2 px-3 py-2 rounded border text-xs ${getAlertStyle(alert.level)}`}
+        >
+          <span className="font-semibold shrink-0">[{alert.level}]</span>
+          <span className="flex-1">{alert.message}</span>
+          <span className="shrink-0 opacity-70 font-mono">{alert.timestamp}</span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// ─── 메인 패널 ───────────────────────────────────────────────────────────────────
+
+export default function RndPoseidonPanel() {
+  const [pipeline, setPipeline] = useState<PipelineNode[]>([]);
+  const [logs, setLogs] = useState<DataLogRow[]>([]);
+  const [alerts, setAlerts] = useState<AlertItem[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [lastUpdate, setLastUpdate] = useState<Date | null>(null);
+
+  // 필터
+  const [filterSource, setFilterSource] = useState<FilterSource>('all');
+  const [filterReceive, setFilterReceive] = useState<FilterReceive>('all');
+  const [filterPeriod, setFilterPeriod] = useState<FilterPeriod>('24h');
+
+  const fetchData = useCallback(async () => {
+    setLoading(true);
+    try {
+      const data = await fetchPoseidonData();
+      setPipeline(data.pipeline);
+      setLogs(data.logs);
+      setAlerts(data.alerts);
+      setLastUpdate(new Date());
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    let isMounted = true;
+    void Promise.resolve().then(() => {
+      if (isMounted) void fetchData();
+    });
+    return () => {
+      isMounted = false;
+    };
+  }, [fetchData]);
+
+  const filteredLogs = filterLogs(logs, filterSource, filterReceive, filterPeriod);
+
+  const totalReceived = logs.filter((r) => r.receiveStatus === '수신완료').length;
+  const totalDelayed = logs.filter((r) => r.receiveStatus === '수신대기').length;
+  const totalFailed = logs.filter(
+    (r) => r.receiveStatus === '수신실패' || r.receiveStatus === '시간초과',
+  ).length;
+
+  return (
+    <div className="flex flex-col h-full overflow-hidden">
+      {/* ── 헤더 ── */}
+      <div className="shrink-0 border-b border-stroke-1">
+        <div className="flex items-center justify-between px-5 py-3">
+          <h2 className="text-sm font-semibold text-t1">유출유확산예측 (포세이돈) 연계 모니터링</h2>
+          <div className="flex items-center gap-3">
+            {lastUpdate && (
+              <span className="text-xs text-t3">
+                갱신:{' '}
+                {lastUpdate.toLocaleTimeString('ko-KR', {
+                  hour: '2-digit',
+                  minute: '2-digit',
+                  second: '2-digit',
+                })}
+              </span>
+            )}
+            <button
+              onClick={() => void fetchData()}
+              disabled={loading}
+              className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded bg-bg-elevated hover:bg-bg-card text-t2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+            >
+              <svg
+                className={`w-3.5 h-3.5 ${loading ? 'animate-spin' : ''}`}
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+                />
+              </svg>
+              새로고침
+            </button>
+          </div>
+        </div>
+        {/* 요약 통계 바 */}
+        <div className="flex items-center gap-4 px-5 py-2 bg-bg-base text-xs text-t3 border-t border-stroke-1">
+          <span>
+            정상 수신:{' '}
+            <span className="text-emerald-400 font-medium">{totalReceived}건</span>
+          </span>
+          <span className="text-stroke-1">|</span>
+          <span>
+            지연: <span className="text-yellow-400 font-medium">{totalDelayed}건</span>
+          </span>
+          <span className="text-stroke-1">|</span>
+          <span>
+            실패: <span className="text-red-400 font-medium">{totalFailed}건</span>
+          </span>
+          <span className="text-stroke-1">|</span>
+          <span>
+            금일 예측 완료:{' '}
+            <span className="text-cyan-400 font-medium">4 / 8회</span>
+          </span>
+        </div>
+      </div>
+
+      {/* ── 스크롤 영역 ── */}
+      <div className="flex-1 overflow-auto">
+        {/* 파이프라인 현황 */}
+        <section className="px-5 pt-4 pb-3 border-b border-stroke-1">
+          <h3 className="text-xs font-semibold text-t2 mb-3 uppercase tracking-wide">
+            데이터 파이프라인 현황
+          </h3>
+          <PipelineFlow nodes={pipeline} loading={loading} />
+        </section>
+
+        {/* 필터 바 + 수신 이력 테이블 */}
+        <section className="px-5 pt-4 pb-3 border-b border-stroke-1">
+          <div className="flex items-center justify-between mb-3 gap-3 flex-wrap">
+            <h3 className="text-xs font-semibold text-t2 uppercase tracking-wide shrink-0">
+              데이터 수신 이력
+            </h3>
+            <div className="flex items-center gap-2 flex-wrap">
+              {/* 데이터소스 필터 */}
+              <select
+                value={filterSource}
+                onChange={(e) => setFilterSource(e.target.value as FilterSource)}
+                className="px-2 py-1 text-xs rounded bg-bg-elevated border border-stroke-1 text-t2 focus:outline-none focus:border-cyan-500 transition-colors"
+              >
+                <option value="all">모두 (소스)</option>
+                <option value="HYCOM">HYCOM</option>
+                <option value="기상수치모델">기상수치모델</option>
+                <option value="기상기술">기상기술</option>
+              </select>
+              {/* 수신상태 필터 */}
+              <select
+                value={filterReceive}
+                onChange={(e) => setFilterReceive(e.target.value as FilterReceive)}
+                className="px-2 py-1 text-xs rounded bg-bg-elevated border border-stroke-1 text-t2 focus:outline-none focus:border-cyan-500 transition-colors"
+              >
+                <option value="all">모두 (상태)</option>
+                <option value="수신완료">수신완료</option>
+                <option value="수신대기">수신대기</option>
+                <option value="수신실패">수신실패</option>
+                <option value="시간초과">시간초과</option>
+              </select>
+              {/* 기간 필터 */}
+              <select
+                value={filterPeriod}
+                onChange={(e) => setFilterPeriod(e.target.value as FilterPeriod)}
+                className="px-2 py-1 text-xs rounded bg-bg-elevated border border-stroke-1 text-t2 focus:outline-none focus:border-cyan-500 transition-colors"
+              >
+                <option value="6h">최근 6시간</option>
+                <option value="12h">최근 12시간</option>
+                <option value="24h">최근 24시간</option>
+              </select>
+              <span className="text-xs text-t3">{filteredLogs.length}건</span>
+            </div>
+          </div>
+          <DataLogTable rows={filteredLogs} loading={loading} />
+        </section>
+
+        {/* 알림 현황 */}
+        <section className="px-5 pt-4 pb-5">
+          <h3 className="text-xs font-semibold text-t2 uppercase tracking-wide mb-3">
+            알림 현황
+          </h3>
+          <AlertList alerts={alerts} loading={loading} />
+        </section>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/tabs/admin/components/RndRescuePanel.tsx b/frontend/src/tabs/admin/components/RndRescuePanel.tsx
new file mode 100644
index 0000000..231b9dc
--- /dev/null
+++ b/frontend/src/tabs/admin/components/RndRescuePanel.tsx
@@ -0,0 +1,638 @@
+import { useState, useEffect, useCallback } from 'react';
+
+// ─── 타입 ──────────────────────────────────────────────────────────────────────
+
+type PipelineStatus = '정상' | '지연' | '중단';
+type ReceiveStatus = '수신완료' | '수신대기' | '수신실패' | '시간초과';
+type ProcessStatus = '처리완료' | '처리중' | '대기' | '오류';
+type DataSource = 'HYCOM' | '기상청' | '긴급구난시스템';
+type AlertLevel = '경고' | '주의' | '정보';
+
+interface PipelineNode {
+  id: string;
+  name: string;
+  status: PipelineStatus;
+  lastReceived: string;
+  cycle: string;
+}
+
+interface DataLogRow {
+  id: string;
+  timestamp: string;
+  source: DataSource;
+  dataType: string;
+  size: string;
+  receiveStatus: ReceiveStatus;
+  processStatus: ProcessStatus;
+}
+
+interface AlertItem {
+  id: string;
+  level: AlertLevel;
+  message: string;
+  timestamp: string;
+}
+
+// ─── Mock 데이터 ────────────────────────────────────────────────────────────────
+
+const MOCK_PIPELINE: PipelineNode[] = [
+  {
+    id: 'hycom',
+    name: 'HYCOM 해양순환모델',
+    status: '정상',
+    lastReceived: '2026-04-11 06:00',
+    cycle: '6시간 주기',
+  },
+  {
+    id: 'kma',
+    name: '기상청 수치모델',
+    status: '정상',
+    lastReceived: '2026-04-11 06:00',
+    cycle: '3시간 주기',
+  },
+  {
+    id: 'rescue',
+    name: '해경 긴급구난 시스템',
+    status: '정상',
+    lastReceived: '2026-04-11 06:30',
+    cycle: '내부 연계',
+  },
+  {
+    id: 'analysis',
+    name: '구난 분석 연산',
+    status: '정상',
+    lastReceived: '2026-04-11 06:35',
+    cycle: '연계 시작 즉시',
+  },
+  {
+    id: 'result',
+    name: '결과 연계 수신',
+    status: '정상',
+    lastReceived: '2026-04-11 06:40',
+    cycle: '분석 완료 즉시',
+  },
+];
+
+const MOCK_LOGS: DataLogRow[] = [
+  {
+    id: 'log-01',
+    timestamp: '2026-04-11 06:40',
+    source: '긴급구난시스템',
+    dataType: '구난 가능성 판단',
+    size: '1.2 MB',
+    receiveStatus: '수신완료',
+    processStatus: '처리완료',
+  },
+  {
+    id: 'log-02',
+    timestamp: '2026-04-11 06:35',
+    source: '긴급구난시스템',
+    dataType: '선체상태 분석',
+    size: '3.4 MB',
+    receiveStatus: '수신완료',
+    processStatus: '처리완료',
+  },
+  {
+    id: 'log-03',
+    timestamp: '2026-04-11 06:30',
+    source: '긴급구난시스템',
+    dataType: '사고선 위치정보',
+    size: '0.8 MB',
+    receiveStatus: '수신완료',
+    processStatus: '처리완료',
+  },
+  {
+    id: 'log-04',
+    timestamp: '2026-04-11 06:30',
+    source: '긴급구난시스템',
+    dataType: '비상배인력 정보',
+    size: '0.5 MB',
+    receiveStatus: '수신완료',
+    processStatus: '처리완료',
+  },
+  {
+    id: 'log-05',
+    timestamp: '2026-04-11 06:00',
+    source: 'HYCOM',
+    dataType: '해수면온도(SST)',
+    size: '98 MB',
+    receiveStatus: '수신완료',
+    processStatus: '처리완료',
+  },
+  {
+    id: 'log-06',
+    timestamp: '2026-04-11 06:00',
+    source: 'HYCOM',
+    dataType: '해류(U/V)',
+    size: '142 MB',
+    receiveStatus: '수신완료',
+    processStatus: '처리완료',
+  },
+  {
+    id: 'log-07',
+    timestamp: '2026-04-11 06:00',
+    source: 'HYCOM',
+    dataType: '해수면높이(SSH)',
+    size: '54 MB',
+    receiveStatus: '수신완료',
+    processStatus: '처리완료',
+  },
+  {
+    id: 'log-08',
+    timestamp: '2026-04-11 06:00',
+    source: '기상청',
+    dataType: '풍향/풍속',
+    size: '38 MB',
+    receiveStatus: '수신완료',
+    processStatus: '처리완료',
+  },
+  {
+    id: 'log-09',
+    timestamp: '2026-04-11 06:00',
+    source: '기상청',
+    dataType: '기압',
+    size: '22 MB',
+    receiveStatus: '수신완료',
+    processStatus: '처리완료',
+  },
+  {
+    id: 'log-10',
+    timestamp: '2026-04-11 06:00',
+    source: '기상청',
+    dataType: '기온',
+    size: '19 MB',
+    receiveStatus: '수신완료',
+    processStatus: '처리완료',
+  },
+  {
+    id: 'log-11',
+    timestamp: '2026-04-11 03:30',
+    source: '긴급구난시스템',
+    dataType: '선체상태 분석',
+    size: '3.1 MB',
+    receiveStatus: '수신완료',
+    processStatus: '처리완료',
+  },
+  {
+    id: 'log-12',
+    timestamp: '2026-04-11 03:30',
+    source: '긴급구난시스템',
+    dataType: '구난 가능성 판단',
+    size: '1.1 MB',
+    receiveStatus: '수신완료',
+    processStatus: '처리완료',
+  },
+  {
+    id: 'log-13',
+    timestamp: '2026-04-11 00:30',
+    source: '긴급구난시스템',
+    dataType: '사고선 위치정보',
+    size: '0.8 MB',
+    receiveStatus: '수신완료',
+    processStatus: '처리완료',
+  },
+  {
+    id: 'log-14',
+    timestamp: '2026-04-11 00:00',
+    source: 'HYCOM',
+    dataType: '해수면높이(SSH)',
+    size: '53 MB',
+    receiveStatus: '시간초과',
+    processStatus: '오류',
+  },
+  {
+    id: 'log-15',
+    timestamp: '2026-04-10 21:30',
+    source: '긴급구난시스템',
+    dataType: '비상배인력 정보',
+    size: '0.4 MB',
+    receiveStatus: '수신완료',
+    processStatus: '처리완료',
+  },
+];
+
+const MOCK_ALERTS: AlertItem[] = [
+  {
+    id: 'alert-01',
+    level: '정보',
+    message: '해경 긴급구난 시스템 정상 연계 중',
+    timestamp: '2026-04-11 06:30',
+  },
+  {
+    id: 'alert-02',
+    level: '정보',
+    message: 'HYCOM 데이터 정상 수신',
+    timestamp: '2026-04-11 06:00',
+  },
+  {
+    id: 'alert-03',
+    level: '정보',
+    message: '금일 긴급구난 분석 완료: 5회/6회',
+    timestamp: '2026-04-11 06:40',
+  },
+];
+
+// ─── Mock fetch ─────────────────────────────────────────────────────────────────
+
+interface RescueData {
+  pipeline: PipelineNode[];
+  logs: DataLogRow[];
+  alerts: AlertItem[];
+}
+
+function fetchRescueData(): Promise<RescueData> {
+  return new Promise((resolve) => {
+    setTimeout(
+      () =>
+        resolve({
+          pipeline: MOCK_PIPELINE,
+          logs: MOCK_LOGS,
+          alerts: MOCK_ALERTS,
+        }),
+      300,
+    );
+  });
+}
+
+// ─── 유틸 ───────────────────────────────────────────────────────────────────────
+
+function getPipelineStatusStyle(status: PipelineStatus): string {
+  if (status === '정상') return 'text-emerald-400 bg-emerald-500/10';
+  if (status === '지연') return 'text-yellow-400 bg-yellow-500/10';
+  return 'text-red-400 bg-red-500/10';
+}
+
+function getPipelineBorderStyle(status: PipelineStatus): string {
+  if (status === '정상') return 'border-l-emerald-500';
+  if (status === '지연') return 'border-l-yellow-500';
+  return 'border-l-red-500';
+}
+
+function getReceiveStatusStyle(status: ReceiveStatus): string {
+  if (status === '수신완료') return 'text-emerald-400 bg-emerald-500/10';
+  if (status === '수신대기') return 'text-yellow-400 bg-yellow-500/10';
+  return 'text-red-400 bg-red-500/10';
+}
+
+function getProcessStatusStyle(status: ProcessStatus): string {
+  if (status === '처리완료') return 'text-emerald-400 bg-emerald-500/10';
+  if (status === '처리중') return 'text-cyan-400 bg-cyan-500/10';
+  if (status === '대기') return 'text-yellow-400 bg-yellow-500/10';
+  return 'text-red-400 bg-red-500/10';
+}
+
+function getAlertStyle(level: AlertLevel): string {
+  if (level === '경고') return 'text-red-400 bg-red-500/10 border-red-500/30';
+  if (level === '주의') return 'text-yellow-400 bg-yellow-500/10 border-yellow-500/30';
+  return 'text-cyan-400 bg-cyan-500/10 border-cyan-500/30';
+}
+
+// ─── 파이프라인 카드 ─────────────────────────────────────────────────────────────
+
+function PipelineCard({ node }: { node: PipelineNode }) {
+  const badgeStyle = getPipelineStatusStyle(node.status);
+  const borderStyle = getPipelineBorderStyle(node.status);
+
+  return (
+    <div
+      className={`flex-1 min-w-0 bg-bg-card rounded border border-stroke-1 border-l-2 ${borderStyle} p-3 flex flex-col gap-1.5`}
+    >
+      <div className="text-xs font-medium text-t1 leading-snug">{node.name}</div>
+      <span
+        className={`self-start inline-block px-1.5 py-0.5 rounded text-label-2 font-medium ${badgeStyle}`}
+      >
+        {node.status}
+      </span>
+      <div className="text-label-2 text-t3 mt-0.5">최근 수신: {node.lastReceived}</div>
+      <div className="text-label-2 text-t3">{node.cycle}</div>
+    </div>
+  );
+}
+
+function PipelineFlow({ nodes, loading }: { nodes: PipelineNode[]; loading: boolean }) {
+  if (loading && nodes.length === 0) {
+    return (
+      <div className="flex items-center gap-1 animate-pulse">
+        {Array.from({ length: 5 }).map((_, i) => (
+          <div key={i} className="flex items-center gap-1">
+            <div className="flex-1 h-16 bg-bg-elevated rounded w-28" />
+            {i < 4 && <span className="text-t3 text-sm px-0.5">→</span>}
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex items-stretch gap-1">
+      {nodes.map((node, idx) => (
+        <div key={node.id} className="flex items-center gap-1 flex-1 min-w-0">
+          <PipelineCard node={node} />
+          {idx < nodes.length - 1 && (
+            <span className="text-t3 text-sm shrink-0 px-0.5">→</span>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// ─── 수신 이력 테이블 ────────────────────────────────────────────────────────────
+
+type FilterSource = 'all' | DataSource;
+type FilterReceive = 'all' | ReceiveStatus;
+type FilterPeriod = '6h' | '12h' | '24h';
+
+const PERIOD_HOURS: Record<FilterPeriod, number> = { '6h': 6, '12h': 12, '24h': 24 };
+
+function filterLogs(
+  rows: DataLogRow[],
+  source: FilterSource,
+  receive: FilterReceive,
+  period: FilterPeriod,
+): DataLogRow[] {
+  const cutoff = new Date('2026-04-11T06:40:00');
+  const hours = PERIOD_HOURS[period];
+  const from = new Date(cutoff.getTime() - hours * 60 * 60 * 1000);
+
+  return rows.filter((r) => {
+    if (source !== 'all' && r.source !== source) return false;
+    if (receive !== 'all' && r.receiveStatus !== receive) return false;
+    const ts = new Date(r.timestamp.replace(' ', 'T'));
+    if (ts < from) return false;
+    return true;
+  });
+}
+
+const LOG_HEADERS = ['시간', '데이터소스', '데이터종류', '크기', '수신상태', '처리상태'];
+
+function DataLogTable({ rows, loading }: { rows: DataLogRow[]; loading: boolean }) {
+  return (
+    <div className="overflow-auto">
+      <table className="w-full text-xs border-collapse">
+        <thead>
+          <tr className="bg-bg-elevated text-t3 uppercase tracking-wide">
+            {LOG_HEADERS.map((h) => (
+              <th
+                key={h}
+                className="px-3 py-2 text-left font-medium border-b border-stroke-1 whitespace-nowrap"
+              >
+                {h}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {loading && rows.length === 0
+            ? Array.from({ length: 8 }).map((_, i) => (
+                <tr key={i} className="border-b border-stroke-1 animate-pulse">
+                  {LOG_HEADERS.map((_, j) => (
+                    <td key={j} className="px-3 py-2">
+                      <div className="h-3 bg-bg-elevated rounded w-16" />
+                    </td>
+                  ))}
+                </tr>
+              ))
+            : rows.map((row) => (
+                <tr key={row.id} className="border-b border-stroke-1 hover:bg-bg-surface/50">
+                  <td className="px-3 py-2 text-t2 whitespace-nowrap font-mono">
+                    {row.timestamp}
+                  </td>
+                  <td className="px-3 py-2 font-medium text-t1 whitespace-nowrap">{row.source}</td>
+                  <td className="px-3 py-2 text-t2 whitespace-nowrap">{row.dataType}</td>
+                  <td className="px-3 py-2 text-t2 whitespace-nowrap font-mono">{row.size}</td>
+                  <td className="px-3 py-2">
+                    <span
+                      className={`inline-block px-1.5 py-0.5 rounded text-label-2 font-medium ${getReceiveStatusStyle(row.receiveStatus)}`}
+                    >
+                      {row.receiveStatus}
+                    </span>
+                  </td>
+                  <td className="px-3 py-2">
+                    <span
+                      className={`inline-block px-1.5 py-0.5 rounded text-label-2 font-medium ${getProcessStatusStyle(row.processStatus)}`}
+                    >
+                      {row.processStatus}
+                    </span>
+                  </td>
+                </tr>
+              ))}
+          {!loading && rows.length === 0 && (
+            <tr>
+              <td colSpan={6} className="px-3 py-8 text-center text-t3">
+                조회된 데이터가 없습니다.
+              </td>
+            </tr>
+          )}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+// ─── 알림 목록 ───────────────────────────────────────────────────────────────────
+
+function AlertList({ alerts, loading }: { alerts: AlertItem[]; loading: boolean }) {
+  if (loading && alerts.length === 0) {
+    return (
+      <div className="flex flex-col gap-2 animate-pulse">
+        {Array.from({ length: 3 }).map((_, i) => (
+          <div key={i} className="h-8 bg-bg-elevated rounded" />
+        ))}
+      </div>
+    );
+  }
+
+  if (alerts.length === 0) {
+    return <p className="text-xs text-t3 py-2">활성 알림이 없습니다.</p>;
+  }
+
+  return (
+    <div className="flex flex-col gap-1.5">
+      {alerts.map((alert) => (
+        <div
+          key={alert.id}
+          className={`flex items-start gap-2 px-3 py-2 rounded border text-xs ${getAlertStyle(alert.level)}`}
+        >
+          <span className="font-semibold shrink-0">[{alert.level}]</span>
+          <span className="flex-1">{alert.message}</span>
+          <span className="shrink-0 opacity-70 font-mono">{alert.timestamp}</span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// ─── 메인 패널 ───────────────────────────────────────────────────────────────────
+
+export default function RndRescuePanel() {
+  const [pipeline, setPipeline] = useState<PipelineNode[]>([]);
+  const [logs, setLogs] = useState<DataLogRow[]>([]);
+  const [alerts, setAlerts] = useState<AlertItem[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [lastUpdate, setLastUpdate] = useState<Date | null>(null);
+
+  // 필터
+  const [filterSource, setFilterSource] = useState<FilterSource>('all');
+  const [filterReceive, setFilterReceive] = useState<FilterReceive>('all');
+  const [filterPeriod, setFilterPeriod] = useState<FilterPeriod>('24h');
+
+  const fetchData = useCallback(async () => {
+    setLoading(true);
+    try {
+      const data = await fetchRescueData();
+      setPipeline(data.pipeline);
+      setLogs(data.logs);
+      setAlerts(data.alerts);
+      setLastUpdate(new Date());
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    let isMounted = true;
+    void Promise.resolve().then(() => {
+      if (isMounted) void fetchData();
+    });
+    return () => {
+      isMounted = false;
+    };
+  }, [fetchData]);
+
+  const filteredLogs = filterLogs(logs, filterSource, filterReceive, filterPeriod);
+
+  const totalReceived = logs.filter((r) => r.receiveStatus === '수신완료').length;
+  const totalDelayed = logs.filter((r) => r.receiveStatus === '수신대기').length;
+  const totalFailed = logs.filter(
+    (r) => r.receiveStatus === '수신실패' || r.receiveStatus === '시간초과',
+  ).length;
+
+  return (
+    <div className="flex flex-col h-full overflow-hidden">
+      {/* ── 헤더 ── */}
+      <div className="shrink-0 border-b border-stroke-1">
+        <div className="flex items-center justify-between px-5 py-3">
+          <h2 className="text-sm font-semibold text-t1">긴급구난과제 연계 모니터링</h2>
+          <div className="flex items-center gap-3">
+            {lastUpdate && (
+              <span className="text-xs text-t3">
+                갱신:{' '}
+                {lastUpdate.toLocaleTimeString('ko-KR', {
+                  hour: '2-digit',
+                  minute: '2-digit',
+                  second: '2-digit',
+                })}
+              </span>
+            )}
+            <button
+              onClick={() => void fetchData()}
+              disabled={loading}
+              className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded bg-bg-elevated hover:bg-bg-card text-t2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+            >
+              <svg
+                className={`w-3.5 h-3.5 ${loading ? 'animate-spin' : ''}`}
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+                />
+              </svg>
+              새로고침
+            </button>
+          </div>
+        </div>
+        {/* 요약 통계 바 */}
+        <div className="flex items-center gap-4 px-5 py-2 bg-bg-base text-xs text-t3 border-t border-stroke-1">
+          <span>
+            정상 수신:{' '}
+            <span className="text-emerald-400 font-medium">{totalReceived}건</span>
+          </span>
+          <span className="text-stroke-1">|</span>
+          <span>
+            지연: <span className="text-yellow-400 font-medium">{totalDelayed}건</span>
+          </span>
+          <span className="text-stroke-1">|</span>
+          <span>
+            실패: <span className="text-red-400 font-medium">{totalFailed}건</span>
+          </span>
+          <span className="text-stroke-1">|</span>
+          <span>
+            금일 분석 완료:{' '}
+            <span className="text-cyan-400 font-medium">5 / 6회</span>
+          </span>
+        </div>
+      </div>
+
+      {/* ── 스크롤 영역 ── */}
+      <div className="flex-1 overflow-auto">
+        {/* 파이프라인 현황 */}
+        <section className="px-5 pt-4 pb-3 border-b border-stroke-1">
+          <h3 className="text-xs font-semibold text-t2 mb-3 uppercase tracking-wide">
+            데이터 파이프라인 현황
+          </h3>
+          <PipelineFlow nodes={pipeline} loading={loading} />
+        </section>
+
+        {/* 필터 바 + 수신 이력 테이블 */}
+        <section className="px-5 pt-4 pb-3 border-b border-stroke-1">
+          <div className="flex items-center justify-between mb-3 gap-3 flex-wrap">
+            <h3 className="text-xs font-semibold text-t2 uppercase tracking-wide shrink-0">
+              데이터 수신 이력
+            </h3>
+            <div className="flex items-center gap-2 flex-wrap">
+              {/* 데이터소스 필터 */}
+              <select
+                value={filterSource}
+                onChange={(e) => setFilterSource(e.target.value as FilterSource)}
+                className="px-2 py-1 text-xs rounded bg-bg-elevated border border-stroke-1 text-t2 focus:outline-none focus:border-cyan-500 transition-colors"
+              >
+                <option value="all">모두 (소스)</option>
+                <option value="HYCOM">HYCOM</option>
+                <option value="기상청">기상청</option>
+                <option value="긴급구난시스템">긴급구난시스템</option>
+              </select>
+              {/* 수신상태 필터 */}
+              <select
+                value={filterReceive}
+                onChange={(e) => setFilterReceive(e.target.value as FilterReceive)}
+                className="px-2 py-1 text-xs rounded bg-bg-elevated border border-stroke-1 text-t2 focus:outline-none focus:border-cyan-500 transition-colors"
+              >
+                <option value="all">모두 (상태)</option>
+                <option value="수신완료">수신완료</option>
+                <option value="수신대기">수신대기</option>
+                <option value="수신실패">수신실패</option>
+                <option value="시간초과">시간초과</option>
+              </select>
+              {/* 기간 필터 */}
+              <select
+                value={filterPeriod}
+                onChange={(e) => setFilterPeriod(e.target.value as FilterPeriod)}
+                className="px-2 py-1 text-xs rounded bg-bg-elevated border border-stroke-1 text-t2 focus:outline-none focus:border-cyan-500 transition-colors"
+              >
+                <option value="6h">최근 6시간</option>
+                <option value="12h">최근 12시간</option>
+                <option value="24h">최근 24시간</option>
+              </select>
+              <span className="text-xs text-t3">{filteredLogs.length}건</span>
+            </div>
+          </div>
+          <DataLogTable rows={filteredLogs} loading={loading} />
+        </section>
+
+        {/* 알림 현황 */}
+        <section className="px-5 pt-4 pb-5">
+          <h3 className="text-xs font-semibold text-t2 uppercase tracking-wide mb-3">
+            알림 현황
+          </h3>
+          <AlertList alerts={alerts} loading={loading} />
+        </section>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/tabs/admin/components/SensitiveLayerPanel.tsx b/frontend/src/tabs/admin/components/SensitiveLayerPanel.tsx
index dda8889..de93bfc 100644
--- a/frontend/src/tabs/admin/components/SensitiveLayerPanel.tsx
+++ b/frontend/src/tabs/admin/components/SensitiveLayerPanel.tsx
@@ -136,7 +136,7 @@ const SensitiveLayerPanel = ({ categoryCode, title }: SensitiveLayerPanelProps)
         <div className="flex items-center justify-between mb-3">
           <div>
             <h1 className="text-lg font-bold text-fg font-korean">{title}</h1>
-            <p className="text-xs text-fg-disabled mt-1 font-korean">총 {total}개</p>
+            <p className="text-caption text-fg-disabled mt-1 font-korean">총 {total}개</p>
           </div>
         </div>
         <div className="flex items-center gap-2">
@@ -146,12 +146,12 @@ const SensitiveLayerPanel = ({ categoryCode, title }: SensitiveLayerPanelProps)
             onChange={(e) => setSearchInput(e.target.value)}
             onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
             placeholder="레이어코드 / 레이어명 검색"
-            className="flex-1 px-3 py-1.5 text-xs bg-bg-elevated border border-stroke rounded text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none font-korean"
+            className="flex-1 px-3 py-1.5 text-caption bg-bg-elevated border border-stroke rounded text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none font-korean"
           />
           <select
             value={filterUseYn}
             onChange={(e) => setFilterUseYn(e.target.value)}
-            className="px-2 py-1.5 text-xs bg-bg-elevated border border-stroke rounded text-fg focus:border-color-accent focus:outline-none font-korean"
+            className="px-2 py-1.5 text-caption bg-bg-elevated border border-stroke rounded text-fg focus:border-color-accent focus:outline-none font-korean"
           >
             <option value="">전체</option>
             <option value="Y">사용</option>
@@ -159,7 +159,7 @@ const SensitiveLayerPanel = ({ categoryCode, title }: SensitiveLayerPanelProps)
           </select>
           <button
             onClick={handleSearch}
-            className="px-3 py-1.5 text-xs border border-stroke text-fg-sub rounded hover:bg-[rgba(255,255,255,0.04)] transition-all font-korean"
+            className="px-3 py-1.5 text-caption border border-stroke text-fg-sub rounded hover:bg-[rgba(255,255,255,0.04)] transition-all font-korean"
           >
             검색
           </button>
@@ -168,7 +168,7 @@ const SensitiveLayerPanel = ({ categoryCode, title }: SensitiveLayerPanelProps)
 
       {/* 오류 메시지 */}
       {error && (
-        <div className="px-6 py-2 text-xs text-red-400 bg-[rgba(239,68,68,0.05)] border-b border-stroke shrink-0 font-korean">
+        <div className="px-6 py-2 text-caption text-red-400 bg-[rgba(239,68,68,0.05)] border-b border-stroke shrink-0 font-korean">
           {error}
         </div>
       )}
@@ -176,7 +176,7 @@ const SensitiveLayerPanel = ({ categoryCode, title }: SensitiveLayerPanelProps)
       {/* 테이블 영역 */}
       <div className="flex-1 overflow-auto">
         {loading ? (
-          <div className="flex items-center justify-center h-full text-fg-disabled text-sm font-korean">
+          <div className="flex items-center justify-center h-full text-fg-disabled text-body-2 font-korean">
             불러오는 중...
           </div>
         ) : (
@@ -217,7 +217,7 @@ const SensitiveLayerPanel = ({ categoryCode, title }: SensitiveLayerPanelProps)
                 <tr>
                   <td
                     colSpan={9}
-                    className="px-4 py-12 text-center text-fg-disabled text-sm font-korean"
+                    className="px-4 py-12 text-center text-fg-disabled text-body-2 font-korean"
                   >
                     데이터가 없습니다.
                   </td>
@@ -228,12 +228,12 @@ const SensitiveLayerPanel = ({ categoryCode, title }: SensitiveLayerPanelProps)
                     key={item.layerCd}
                     className="border-b border-stroke hover:bg-[rgba(255,255,255,0.02)] transition-colors"
                   >
-                    <td className="px-4 py-3 text-xs text-fg-disabled font-mono">
+                    <td className="px-4 py-3 text-caption text-fg-disabled font-mono">
                       {(page - 1) * PAGE_SIZE + idx + 1}
                     </td>
                     <td className="px-4 py-3 text-label-2 text-fg-sub font-mono">{item.layerCd}</td>
-                    <td className="px-4 py-3 text-xs text-fg font-korean">{item.layerNm}</td>
-                    <td className="px-4 py-3 text-xs text-fg-sub font-korean max-w-[200px]">
+                    <td className="px-4 py-3 text-caption text-fg font-korean">{item.layerNm}</td>
+                    <td className="px-4 py-3 text-caption text-fg-sub font-korean max-w-[200px]">
                       <span className="block truncate" title={item.layerFullNm}>
                         {item.layerFullNm}
                       </span>
@@ -246,7 +246,7 @@ const SensitiveLayerPanel = ({ categoryCode, title }: SensitiveLayerPanelProps)
                     <td className="px-4 py-3 text-label-2 text-fg-sub font-mono">
                       {item.wmsLayerNm ?? <span className="text-fg-disabled">-</span>}
                     </td>
-                    <td className="px-4 py-3 text-xs text-fg-disabled text-center font-mono">
+                    <td className="px-4 py-3 text-caption text-fg-disabled text-center font-mono">
                       {item.sortOrd}
                     </td>
                     <td className="px-4 py-3 text-label-2 text-fg-disabled font-mono">
diff --git a/frontend/src/tabs/admin/components/SettingsPanel.tsx b/frontend/src/tabs/admin/components/SettingsPanel.tsx
index bd09b68..36e8923 100644
--- a/frontend/src/tabs/admin/components/SettingsPanel.tsx
+++ b/frontend/src/tabs/admin/components/SettingsPanel.tsx
@@ -54,7 +54,7 @@ function SettingsPanel() {
 
   if (loading) {
     return (
-      <div className="flex items-center justify-center h-32 text-fg-disabled text-sm font-korean">
+      <div className="flex items-center justify-center h-32 text-fg-disabled text-body-2 font-korean">
         불러오는 중...
       </div>
     );
@@ -64,7 +64,7 @@ function SettingsPanel() {
     <div className="flex flex-col h-full">
       <div className="px-6 py-4 border-b border-stroke">
         <h1 className="text-lg font-bold text-fg font-korean">시스템 설정</h1>
-        <p className="text-xs text-fg-disabled mt-1 font-korean">
+        <p className="text-caption text-fg-disabled mt-1 font-korean">
           사용자 등록 및 권한 관련 시스템 설정을 관리합니다
         </p>
       </div>
@@ -74,7 +74,7 @@ function SettingsPanel() {
           {/* 사용자 등록 설정 */}
           <div className="rounded-lg border border-stroke bg-bg-surface overflow-hidden">
             <div className="px-5 py-3 border-b border-stroke">
-              <h2 className="text-sm font-bold text-fg font-korean">사용자 등록 설정</h2>
+              <h2 className="text-body-2 font-bold text-fg font-korean">사용자 등록 설정</h2>
               <p className="text-label-2 text-fg-disabled mt-0.5 font-korean">
                 신규 사용자 등록 시 적용되는 정책을 설정합니다
               </p>
@@ -140,7 +140,7 @@ function SettingsPanel() {
           {/* OAuth 설정 */}
           <div className="rounded-lg border border-stroke bg-bg-surface overflow-hidden">
             <div className="px-5 py-3 border-b border-stroke">
-              <h2 className="text-sm font-bold text-fg font-korean">Google OAuth 설정</h2>
+              <h2 className="text-body-2 font-bold text-fg font-korean">Google OAuth 설정</h2>
               <p className="text-label-2 text-fg-disabled mt-0.5 font-korean">
                 Google 계정 로그인 시 자동 승인할 이메일 도메인을 설정합니다
               </p>
@@ -162,7 +162,7 @@ function SettingsPanel() {
                     value={oauthDomainInput}
                     onChange={(e) => setOauthDomainInput(e.target.value)}
                     placeholder="gcsc.co.kr, example.com"
-                    className="flex-1 px-3 py-2 text-xs bg-bg-elevated border border-stroke rounded-md text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none font-mono"
+                    className="flex-1 px-3 py-2 text-caption bg-bg-elevated border border-stroke rounded-md text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none font-mono"
                   />
                   <button
                     onClick={async () => {
@@ -183,7 +183,7 @@ function SettingsPanel() {
                       savingOAuth ||
                       oauthDomainInput.trim() === (oauthSettings?.autoApproveDomains || '')
                     }
-                    className={`px-4 py-2 text-xs font-semibold rounded-md transition-all font-korean whitespace-nowrap ${
+                    className={`px-4 py-2 text-caption font-semibold rounded-md transition-all font-korean whitespace-nowrap ${
                       oauthDomainInput.trim() !== (oauthSettings?.autoApproveDomains || '')
                         ? 'bg-color-accent text-bg-0 hover:shadow-[0_0_12px_rgba(6,182,212,0.3)]'
                         : 'bg-bg-card text-fg-disabled cursor-not-allowed'
@@ -220,7 +220,7 @@ function SettingsPanel() {
           {/* 현재 설정 상태 요약 */}
           <div className="rounded-lg border border-stroke bg-bg-surface overflow-hidden">
             <div className="px-5 py-3 border-b border-stroke">
-              <h2 className="text-sm font-bold text-fg font-korean">설정 상태 요약</h2>
+              <h2 className="text-body-2 font-bold text-fg font-korean">설정 상태 요약</h2>
             </div>
             <div className="px-5 py-4">
               <div className="flex flex-col gap-3 text-label-1 font-korean">
diff --git a/frontend/src/tabs/admin/components/SortableMenuItem.tsx b/frontend/src/tabs/admin/components/SortableMenuItem.tsx
index bb29b1b..039bfa3 100644
--- a/frontend/src/tabs/admin/components/SortableMenuItem.tsx
+++ b/frontend/src/tabs/admin/components/SortableMenuItem.tsx
@@ -71,7 +71,7 @@ function SortableMenuItem({
             <circle cx="9" cy="14" r="1.5" />
           </svg>
         </button>
-        <span className="text-fg-disabled text-xs font-mono w-6 text-center shrink-0">
+        <span className="text-fg-disabled text-caption font-mono w-6 text-center shrink-0">
           {idx + 1}
         </span>
         {isEditing ? (
@@ -152,14 +152,14 @@ function SortableMenuItem({
           <button
             onClick={() => onMove(idx, -1)}
             disabled={idx === 0}
-            className="w-7 h-7 rounded border border-stroke bg-bg-elevated text-fg-disabled text-xs flex items-center justify-center hover:bg-bg-surface-hover hover:text-fg transition-all disabled:opacity-30 disabled:cursor-not-allowed"
+            className="w-7 h-7 rounded border border-stroke bg-bg-elevated text-fg-disabled text-caption flex items-center justify-center hover:bg-bg-surface-hover hover:text-fg transition-all disabled:opacity-30 disabled:cursor-not-allowed"
           >
             ▲
           </button>
           <button
             onClick={() => onMove(idx, 1)}
             disabled={idx === totalCount - 1}
-            className="w-7 h-7 rounded border border-stroke bg-bg-elevated text-fg-disabled text-xs flex items-center justify-center hover:bg-bg-surface-hover hover:text-fg transition-all disabled:opacity-30 disabled:cursor-not-allowed"
+            className="w-7 h-7 rounded border border-stroke bg-bg-elevated text-fg-disabled text-caption flex items-center justify-center hover:bg-bg-surface-hover hover:text-fg transition-all disabled:opacity-30 disabled:cursor-not-allowed"
           >
             ▼
           </button>
diff --git a/frontend/src/tabs/admin/components/SystemArchPanel.tsx b/frontend/src/tabs/admin/components/SystemArchPanel.tsx
new file mode 100644
index 0000000..b160cd3
--- /dev/null
+++ b/frontend/src/tabs/admin/components/SystemArchPanel.tsx
@@ -0,0 +1,1544 @@
+import { useState } from 'react';
+
+type TabId = 'framework' | 'target' | 'interface' | 'heterogeneous' | 'common-features';
+
+const TABS: { id: TabId; label: string }[] = [
+  { id: 'framework', label: '표준 프레임워크' },
+  { id: 'target', label: '목표시스템 아키텍쳐' },
+  { id: 'interface', label: '시스템 인터페이스 연계' },
+  { id: 'heterogeneous', label: '이기종시스템연계' },
+  { id: 'common-features', label: '공통기능' },
+];
+
+// ─── 기술 스택 테이블 데이터 ──────────────────────────────────────────────────────
+
+interface TechStackRow {
+  category: string;
+  tech: string;
+  version: string;
+  description: string;
+}
+
+const TECH_STACK: TechStackRow[] = [
+  { category: 'Frontend', tech: 'React', version: '19.x', description: '컴포넌트 기반 SPA' },
+  { category: 'Frontend', tech: 'TypeScript', version: '5.9', description: '정적 타입 시스템' },
+  { category: 'Frontend', tech: 'Vite', version: '7.x', description: '빌드 도구 (HMR)' },
+  { category: 'Frontend', tech: 'Tailwind CSS', version: '3.x', description: '유틸리티 기반 CSS' },
+  { category: 'Frontend', tech: 'MapLibre GL', version: '5.x', description: '오픈소스 GIS 엔진' },
+  { category: 'Frontend', tech: 'deck.gl', version: '9.x', description: '대규모 데이터 시각화' },
+  { category: 'Frontend', tech: 'Zustand', version: '-', description: '클라이언트 상태관리' },
+  { category: 'Frontend', tech: 'TanStack Query', version: '-', description: '서버 상태관리/캐싱' },
+  { category: 'Backend', tech: 'Express', version: '4.x', description: 'REST API 서버' },
+  { category: 'Backend', tech: 'Socket.IO', version: '-', description: '실시간 양방향 통신' },
+  { category: 'DB', tech: 'PostgreSQL', version: '16', description: '관계형 데이터베이스' },
+  { category: 'DB', tech: 'PostGIS', version: '-', description: '공간정보 확장' },
+  {
+    category: '인증',
+    tech: 'JWT',
+    version: '-',
+    description: '토큰 기반 인증 (HttpOnly Cookie)',
+  },
+  { category: '인증', tech: 'Google OAuth', version: '2.0', description: 'SSO 연동' },
+  { category: '보안', tech: 'Helmet', version: '-', description: 'HTTP 헤더 보안' },
+  { category: '보안', tech: 'Rate Limiting', version: '-', description: 'API 호출 제한' },
+  { category: 'CI/CD', tech: 'Gitea Actions', version: '-', description: '자동 빌드/배포' },
+];
+
+// ─── 탭 모듈 데이터 ───────────────────────────────────────────────────────────────
+
+interface TabModuleRow {
+  module: string;
+  name: string;
+  feature: string;
+  integration: string;
+}
+
+const TAB_MODULES: TabModuleRow[] = [
+  {
+    module: '확산예측',
+    name: 'prediction',
+    feature: '유출유 확산 시뮬레이션, 역추적 분석, 오일붐 배치',
+    integration: 'KOSPS, 포세이돈 R&D',
+  },
+  {
+    module: 'HNS 분석',
+    name: 'hns',
+    feature: '화학물질 확산 예측, 물질 DB, 위험도 평가',
+    integration: '충북대 R&D, 물질 DB',
+  },
+  {
+    module: '구조 시나리오',
+    name: 'rescue',
+    feature: '긴급구난 분석, 표류 예측',
+    integration: '긴급구난 R&D',
+  },
+  {
+    module: '항공 방제',
+    name: 'aerial',
+    feature: '위성영상 분석, 드론 영상, 유막 면적 분석',
+    integration: '위성/드론 데이터',
+  },
+  {
+    module: '해양 기상',
+    name: 'weather',
+    feature: '기상·해상 정보, 조위·해류 관측',
+    integration: 'KHOA API, 기상청 API',
+  },
+  {
+    module: '사건/사고',
+    name: 'incidents',
+    feature: '해양오염 사고 등록·관리·이력',
+    integration: '해경 사고 DB',
+  },
+  {
+    module: '자산 관리',
+    name: 'assets',
+    feature: '기관·장비·선박 보험 관리',
+    integration: '해경 자산 DB',
+  },
+  {
+    module: 'SCAT 조사',
+    name: 'scat',
+    feature: 'Pre-SCAT 해안 조사 기록',
+    integration: '현장 조사 데이터',
+  },
+  {
+    module: '관리자',
+    name: 'admin',
+    feature: '사용자/권한/메뉴/설정/연계 관리',
+    integration: '전체 시스템',
+  },
+];
+
+// ─── 연계 인터페이스 데이터 ───────────────────────────────────────────────────────
+
+interface InterfaceRow {
+  system: string;
+  method: string;
+  data: string;
+  cycle: string;
+  protocol: string;
+}
+
+const INTERFACES: InterfaceRow[] = [
+  {
+    system: 'KHOA (해양조사원)',
+    method: 'REST API',
+    data: '조위, 해류, 수온',
+    cycle: '실시간/1시간',
+    protocol: 'HTTPS',
+  },
+  {
+    system: '기상청',
+    method: 'REST API',
+    data: '풍향/풍속, 기압, 기온, 강수',
+    cycle: '3시간',
+    protocol: 'HTTPS',
+  },
+  {
+    system: 'HYCOM',
+    method: '파일 수신',
+    data: 'SST, 해류(U/V), SSH',
+    cycle: '6시간',
+    protocol: 'HTTPS/FTP',
+  },
+  {
+    system: '해경 KBP (인사)',
+    method: '배치 수집',
+    data: '사용자, 부서, 직위, 조직',
+    cycle: '1일 1회',
+    protocol: '내부망 API',
+  },
+  {
+    system: 'AIS 선박위치',
+    method: '실시간 수집',
+    data: '선박 위치, 속도, 방향',
+    cycle: '실시간',
+    protocol: 'Socket/API',
+  },
+  {
+    system: '포세이돈 R&D',
+    method: 'API 연계',
+    data: '유출유 확산 예측 결과',
+    cycle: '요청 시',
+    protocol: 'HTTPS',
+  },
+  {
+    system: 'KOSPS (광주)',
+    method: 'DLL 호출',
+    data: '유출유 확산 예측 결과',
+    cycle: '요청 시',
+    protocol: 'HTTPS (Fortran DLL)',
+  },
+  {
+    system: '충북대 HNS',
+    method: 'API 호출',
+    data: 'HNS 대기확산 결과',
+    cycle: '요청 시',
+    protocol: 'HTTPS',
+  },
+  {
+    system: '긴급구난 R&D',
+    method: '내부 연계',
+    data: '구난 분석 결과',
+    cycle: '요청 시',
+    protocol: '내부망 API',
+  },
+];
+
+// ─── 탭 1: 표준 프레임워크 ────────────────────────────────────────────────────────
+
+function FrameworkTab() {
+  return (
+    <div className="flex flex-col gap-6 p-5">
+      {/* 1. 개발 프레임워크 구성 */}
+      <section>
+        <h3 className="text-sm font-semibold text-t1 mb-3">1. 개발 프레임워크 구성</h3>
+        <div className="border border-stroke-1 rounded overflow-hidden">
+          {/* 프레젠테이션 계층 */}
+          <div className="border-b border-stroke-1 p-4 bg-bg-card">
+            <p className="text-xs font-semibold text-t2 mb-1">프레젠테이션 계층</p>
+            <p className="text-xs text-t3 mb-3">React 19 + TypeScript 5.9 + Tailwind CSS 3</p>
+            <div className="grid grid-cols-4 gap-2">
+              {[
+                { name: 'MapLibre', sub: 'GL JS 5' },
+                { name: 'deck.gl', sub: '9.x' },
+                { name: 'Zustand', sub: '상태관리' },
+                { name: 'TanStack', sub: 'Query' },
+              ].map((item) => (
+                <div
+                  key={item.name}
+                  className="bg-bg-elevated border border-stroke-1 rounded p-2 text-center"
+                >
+                  <p className="text-xs font-medium text-t1">{item.name}</p>
+                  <p className="text-xs text-t3 mt-0.5">{item.sub}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+          {/* 비즈니스 로직 계층 */}
+          <div className="border-b border-stroke-1 p-4 bg-bg-surface">
+            <p className="text-xs font-semibold text-t2 mb-1">비즈니스 로직 계층</p>
+            <p className="text-xs text-t3 mb-3">Express 4 + TypeScript</p>
+            <div className="grid grid-cols-4 gap-2">
+              {[
+                { name: 'JWT 인증', sub: 'OAuth2.0' },
+                { name: 'RBAC', sub: '권한엔진' },
+                { name: 'Socket.IO', sub: '실시간' },
+                { name: 'Helmet', sub: '보안' },
+              ].map((item) => (
+                <div
+                  key={item.name}
+                  className="bg-bg-elevated border border-stroke-1 rounded p-2 text-center"
+                >
+                  <p className="text-xs font-medium text-t1">{item.name}</p>
+                  <p className="text-xs text-t3 mt-0.5">{item.sub}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+          {/* 데이터 접근 계층 */}
+          <div className="p-4 bg-bg-card">
+            <p className="text-xs font-semibold text-t2 mb-1">데이터 접근 계층</p>
+            <p className="text-xs text-t3 mb-3">PostgreSQL 16 + PostGIS</p>
+            <div className="grid grid-cols-3 gap-2 max-w-xs">
+              {[
+                { name: 'wing DB', sub: '운영 DB' },
+                { name: 'wing_auth', sub: '인증 DB' },
+                { name: 'PostGIS', sub: '공간정보' },
+              ].map((item) => (
+                <div
+                  key={item.name}
+                  className="bg-bg-elevated border border-stroke-1 rounded p-2 text-center"
+                >
+                  <p className="text-xs font-medium text-t1">{item.name}</p>
+                  <p className="text-xs text-t3 mt-0.5">{item.sub}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* 2. 기술 스택 상세 */}
+      <section>
+        <h3 className="text-sm font-semibold text-t1 mb-3">2. 기술 스택 상세</h3>
+        <div className="overflow-auto">
+          <table className="w-full text-xs border-collapse">
+            <thead>
+              <tr className="bg-bg-elevated text-t3 uppercase tracking-wide">
+                {['구분', '기술', '버전', '설명'].map((h) => (
+                  <th
+                    key={h}
+                    className="px-3 py-2 text-left font-medium border-b border-stroke-1 whitespace-nowrap"
+                  >
+                    {h}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {TECH_STACK.map((row, idx) => (
+                <tr key={idx} className="border-b border-stroke-1 hover:bg-bg-surface/50">
+                  <td className="px-3 py-2 font-medium text-t1 whitespace-nowrap">
+                    {row.category}
+                  </td>
+                  <td className="px-3 py-2 text-t1 whitespace-nowrap">{row.tech}</td>
+                  <td className="px-3 py-2 text-t2 whitespace-nowrap font-mono">{row.version}</td>
+                  <td className="px-3 py-2 text-t2">{row.description}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </section>
+
+      {/* 3. 개발 표준 및 규칙 */}
+      <section>
+        <h3 className="text-sm font-semibold text-t1 mb-3">3. 개발 표준 및 규칙</h3>
+        <div className="grid grid-cols-1 gap-3">
+          {[
+            {
+              title: 'HTTP 정책',
+              content:
+                'GET/POST만 사용 (PUT/DELETE/PATCH 금지) — 한국 보안취약점 점검 가이드 준수',
+            },
+            {
+              title: '코드 표준',
+              content: 'ESLint + Prettier 적용, TypeScript strict 모드 필수',
+            },
+            {
+              title: '모듈 구조',
+              content: '@common/ (공통 모듈) + @tabs/ (업무별 탭) Path Alias 기반 분리',
+            },
+            {
+              title: '보안',
+              content: '입력 살균(sanitize), XSS/SQL Injection 방지, CORS 정책, Rate Limiting',
+            },
+          ].map((item) => (
+            <div key={item.title} className="bg-bg-card border border-stroke-1 rounded p-3">
+              <p className="text-xs font-semibold text-t2 mb-1">{item.title}</p>
+              <p className="text-xs text-t2 leading-relaxed">{item.content}</p>
+            </div>
+          ))}
+        </div>
+      </section>
+    </div>
+  );
+}
+
+// ─── 탭 2: 목표시스템 아키텍쳐 ───────────────────────────────────────────────────
+
+function TargetArchTab() {
+  return (
+    <div className="flex flex-col gap-6 p-5">
+      {/* 1. 시스템 전체 구성도 */}
+      <section>
+        <h3 className="text-sm font-semibold text-t1 mb-3">1. 시스템 전체 구성도</h3>
+        <div className="flex flex-col items-stretch gap-0 border border-stroke-1 rounded overflow-hidden">
+          {/* 사용자 접근 계층 */}
+          <div className="p-4 bg-bg-card">
+            <p className="text-xs font-semibold text-t2 mb-1">사용자 접근 계층</p>
+            <p className="text-xs text-t1 font-medium mb-1">웹 브라우저 (React SPA)</p>
+            <p className="text-xs text-t3 leading-relaxed">
+              확산예측 | HNS분석 | 구조시나리오 | 항공방제 | 기상정보 | 사고관리 | SCAT조사 |
+              자산관리 | 관리자
+            </p>
+          </div>
+          {/* 화살표 + 프로토콜 */}
+          <div className="flex flex-col items-center py-2 bg-bg-base border-y border-stroke-1">
+            <span className="text-t3 text-lg">↕</span>
+            <span className="text-xs text-t3">HTTPS (TLS 1.2+)</span>
+          </div>
+          {/* API 서버 계층 */}
+          <div className="p-4 bg-bg-surface border-b border-stroke-1">
+            <p className="text-xs font-semibold text-t2 mb-1">API 서버 계층</p>
+            <p className="text-xs text-t1 font-medium mb-2">Express 4 REST API (Port 3001)</p>
+            <div className="grid grid-cols-2 gap-1.5 sm:grid-cols-4">
+              {[
+                'JWT 인증 미들웨어',
+                'RBAC 권한 엔진 (permResolver)',
+                '감사로그 자동 기록',
+                '입력 살균 / Rate Limiting / Helmet',
+              ].map((item) => (
+                <div
+                  key={item}
+                  className="bg-bg-elevated border border-stroke-1 rounded px-2 py-1.5 text-center"
+                >
+                  <p className="text-xs text-t2 leading-snug">{item}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+          {/* 화살표 + 프로토콜 */}
+          <div className="flex flex-col items-center py-2 bg-bg-base border-b border-stroke-1">
+            <span className="text-t3 text-lg">↕</span>
+            <span className="text-xs text-t3">pg connection pool</span>
+          </div>
+          {/* 데이터 계층 */}
+          <div className="p-4 bg-bg-card">
+            <p className="text-xs font-semibold text-t2 mb-1">데이터 계층</p>
+            <p className="text-xs text-t1 font-medium mb-2">PostgreSQL 16 + PostGIS</p>
+            <div className="flex gap-2">
+              {[
+                { name: 'wing DB', sub: '운영' },
+                { name: 'wing_auth', sub: '인증' },
+              ].map((item) => (
+                <div
+                  key={item.name}
+                  className="bg-bg-elevated border border-stroke-1 rounded p-2 text-center min-w-24"
+                >
+                  <p className="text-xs font-medium text-t1">{item.name}</p>
+                  <p className="text-xs text-t3 mt-0.5">({item.sub})</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* 2. 탭 기반 업무 모듈 구조 */}
+      <section>
+        <h3 className="text-sm font-semibold text-t1 mb-3">2. 탭 기반 업무 모듈 구조</h3>
+        <div className="overflow-auto">
+          <table className="w-full text-xs border-collapse">
+            <thead>
+              <tr className="bg-bg-elevated text-t3 uppercase tracking-wide">
+                {['모듈', '패키지명', '기능', '주요 연계'].map((h) => (
+                  <th
+                    key={h}
+                    className="px-3 py-2 text-left font-medium border-b border-stroke-1 whitespace-nowrap"
+                  >
+                    {h}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {TAB_MODULES.map((row) => (
+                <tr key={row.name} className="border-b border-stroke-1 hover:bg-bg-surface/50">
+                  <td className="px-3 py-2 font-medium text-t1 whitespace-nowrap">{row.module}</td>
+                  <td className="px-3 py-2 text-t2 whitespace-nowrap font-mono">{row.name}</td>
+                  <td className="px-3 py-2 text-t2">{row.feature}</td>
+                  <td className="px-3 py-2 text-t2 whitespace-nowrap">{row.integration}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </section>
+
+      {/* 3. RBAC 권한 체계 */}
+      <section>
+        <h3 className="text-sm font-semibold text-t1 mb-3">3. RBAC 권한 체계</h3>
+        <div className="flex flex-col gap-3">
+          {[
+            {
+              title: '2차원 권한 엔진',
+              content:
+                'AUTH_PERM OPER_CD 기반: R(조회), C(생성), U(수정), D(삭제) — 역할별 메뉴·기능 접근 제어',
+            },
+            {
+              title: 'permResolver',
+              content:
+                '역할(Role)과 권한(Permission)의 2차원 매핑으로 메뉴 표시 여부 및 기능 사용 가능 여부를 동적으로 판단',
+            },
+            {
+              title: '감사로그 자동 기록',
+              content:
+                '누가(사용자) / 언제(타임스탬프) / 무엇을(기능) / 어디서(IP, 메뉴) — 모든 주요 작업 자동 기록',
+            },
+          ].map((item) => (
+            <div key={item.title} className="bg-bg-card border border-stroke-1 rounded p-3">
+              <p className="text-xs font-semibold text-t2 mb-1">{item.title}</p>
+              <p className="text-xs text-t2 leading-relaxed">{item.content}</p>
+            </div>
+          ))}
+        </div>
+      </section>
+    </div>
+  );
+}
+
+// ─── 탭 3: 시스템 인터페이스 연계 ────────────────────────────────────────────────
+
+function InterfaceTab() {
+  const dataFlowSteps = [
+    '수집',
+    '전처리',
+    '저장',
+    '분석/예측',
+    '시각화',
+    '의사결정지원',
+  ];
+
+  return (
+    <div className="flex flex-col gap-6 p-5">
+      {/* 1. 외부 시스템 연계 구성도 */}
+      <section>
+        <h3 className="text-sm font-semibold text-t1 mb-3">1. 외부 시스템 연계 구성도</h3>
+        <div className="flex items-stretch gap-2">
+          {/* 외부 시스템 */}
+          <div className="flex-1 bg-bg-card border border-stroke-1 rounded p-3 flex flex-col gap-1.5">
+            <p className="text-xs font-semibold text-t2 mb-1 text-center">외부 시스템</p>
+            {['KHOA API', '기상청 API', '해경 KBP', 'AIS 선박'].map((item) => (
+              <div
+                key={item}
+                className="bg-bg-elevated border border-stroke-1 rounded px-2 py-1 text-center"
+              >
+                <p className="text-xs text-t2">{item}</p>
+              </div>
+            ))}
+          </div>
+          {/* 화살표 */}
+          <div className="flex flex-col items-center justify-center gap-1 shrink-0">
+            <span className="text-t3 text-lg">→</span>
+            <span className="text-t3 text-lg">←</span>
+          </div>
+          {/* 통합지원시스템 */}
+          <div className="flex-[2] bg-bg-surface border-2 border-cyan-600/40 rounded p-3 flex flex-col gap-2">
+            <p className="text-xs font-semibold text-t1 text-center">
+              해양환경 위기대응
+              <br />
+              통합지원시스템
+            </p>
+            <div className="border border-stroke-1 rounded p-2 bg-bg-elevated">
+              <p className="text-xs font-medium text-t2 mb-1 text-center">연계관리 모듈</p>
+              <div className="flex flex-col gap-1">
+                {['수집자료 관리', '연계 모니터링', '비식별화 조치'].map((item) => (
+                  <p key={item} className="text-xs text-t3 text-center">
+                    - {item}
+                  </p>
+                ))}
+              </div>
+            </div>
+          </div>
+          {/* 화살표 */}
+          <div className="flex flex-col items-center justify-center gap-1 shrink-0">
+            <span className="text-t3 text-lg">←</span>
+            <span className="text-t3 text-lg">→</span>
+          </div>
+          {/* R&D 시스템 */}
+          <div className="flex-1 bg-bg-card border border-stroke-1 rounded p-3 flex flex-col gap-1.5">
+            <p className="text-xs font-semibold text-t2 mb-1 text-center">R&D 시스템</p>
+            {['포세이돈', 'KOSPS', '충북대 HNS', '긴급구난'].map((item) => (
+              <div
+                key={item}
+                className="bg-bg-elevated border border-stroke-1 rounded px-2 py-1 text-center"
+              >
+                <p className="text-xs text-t2">{item}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* 2. 연계 인터페이스 목록 */}
+      <section>
+        <h3 className="text-sm font-semibold text-t1 mb-3">2. 연계 인터페이스 목록</h3>
+        <div className="overflow-auto">
+          <table className="w-full text-xs border-collapse">
+            <thead>
+              <tr className="bg-bg-elevated text-t3 uppercase tracking-wide">
+                {['연계 시스템', '연계 방식', '데이터', '주기', '프로토콜'].map((h) => (
+                  <th
+                    key={h}
+                    className="px-3 py-2 text-left font-medium border-b border-stroke-1 whitespace-nowrap"
+                  >
+                    {h}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {INTERFACES.map((row) => (
+                <tr key={row.system} className="border-b border-stroke-1 hover:bg-bg-surface/50">
+                  <td className="px-3 py-2 font-medium text-t1 whitespace-nowrap">{row.system}</td>
+                  <td className="px-3 py-2 text-t2 whitespace-nowrap">{row.method}</td>
+                  <td className="px-3 py-2 text-t2">{row.data}</td>
+                  <td className="px-3 py-2 text-t2 whitespace-nowrap">{row.cycle}</td>
+                  <td className="px-3 py-2 text-t2 whitespace-nowrap font-mono">{row.protocol}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </section>
+
+      {/* 3. 데이터 흐름도 */}
+      <section>
+        <h3 className="text-sm font-semibold text-t1 mb-3">3. 데이터 흐름도</h3>
+        <div className="flex items-center gap-1 flex-wrap">
+          {dataFlowSteps.map((step, idx) => (
+            <div key={step} className="flex items-center gap-1">
+              <div className="bg-bg-elevated border border-stroke-1 rounded px-3 py-2 text-center min-w-16">
+                <p className="text-xs font-medium text-t1">{step}</p>
+              </div>
+              {idx < dataFlowSteps.length - 1 && (
+                <span className="text-t3 text-lg shrink-0">→</span>
+              )}
+            </div>
+          ))}
+        </div>
+        <div className="mt-3 grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3">
+          {[
+            { step: '수집', desc: 'KHOA, 기상청, HYCOM, AIS 등 외부 원천 데이터 수신' },
+            { step: '전처리', desc: '포맷 변환, 좌표계 통일, 비식별화, 품질 검사' },
+            { step: '저장', desc: 'PostgreSQL 16 + PostGIS 공간정보 DB 적재' },
+            { step: '분석/예측', desc: 'R&D 모델 연계 (포세이돈, KOSPS, 충북대, 긴급구난)' },
+            { step: '시각화', desc: 'MapLibre GL + deck.gl 기반 지도 레이어 렌더링' },
+            { step: '의사결정지원', desc: '방제작전 시나리오, 구조분석, 경보 발령 지원' },
+          ].map((item) => (
+            <div key={item.step} className="bg-bg-card border border-stroke-1 rounded p-2.5">
+              <p className="text-xs font-semibold text-t2 mb-1">{item.step}</p>
+              <p className="text-xs text-t2 leading-relaxed">{item.desc}</p>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* 4. 연계 장애 대응 */}
+      <section>
+        <h3 className="text-sm font-semibold text-t1 mb-3">4. 연계 장애 대응</h3>
+        <div className="flex flex-col gap-2">
+          {[
+            {
+              title: '연계 모니터링',
+              content: '관리자 > 연계관리 > 연계모니터링에서 실시간 연계 상태 확인',
+            },
+            {
+              title: 'R&D 파이프라인 모니터링',
+              content: '관리자 > 연계관리 > R&D과제에서 과제별 데이터 수신 이력 및 처리 현황 확인',
+            },
+            {
+              title: '장애 알림',
+              content: '데이터 수신 지연/실패 발생 시 알림 발생 — 운영자 즉시 인지 가능',
+            },
+            {
+              title: '비식별화 조치',
+              content: '개인정보 포함 데이터(해경 KBP 인사 등) 수집 시 자동 비식별화 처리 적용',
+            },
+          ].map((item) => (
+            <div key={item.title} className="bg-bg-card border border-stroke-1 rounded p-3">
+              <p className="text-xs font-semibold text-t2 mb-1">{item.title}</p>
+              <p className="text-xs text-t2 leading-relaxed">{item.content}</p>
+            </div>
+          ))}
+        </div>
+      </section>
+    </div>
+  );
+}
+
+
+// ─── 이기종시스템 연계 데이터 ─────────────────────────────────────────────────────
+
+interface HeterogeneousSystemRow {
+  system: string;
+  lang: string;
+  os: string;
+  location: string;
+  protocol: string;
+  description: string;
+}
+
+const HETEROGENEOUS_SYSTEMS: HeterogeneousSystemRow[] = [
+  {
+    system: 'KOSPS',
+    lang: 'Fortran',
+    os: 'Linux',
+    location: '광주',
+    protocol: 'HTTPS (REST 래퍼)',
+    description: '유출유 확산 예측 — Fortran DLL을 REST API로 래핑하여 연계',
+  },
+  {
+    system: '충북대 HNS',
+    lang: 'Python / C++',
+    os: 'Linux',
+    location: '충북대',
+    protocol: 'HTTPS',
+    description: 'HNS 대기확산 예측 — Python/C++ 모델을 REST API로 호출',
+  },
+  {
+    system: '긴급구난',
+    lang: 'Python',
+    os: 'Linux',
+    location: '해경 내부',
+    protocol: '내부망 API',
+    description: '구난 표류 분석 — Python 모델을 내부망 REST API로 연계',
+  },
+  {
+    system: 'HYCOM',
+    lang: 'Fortran / NetCDF',
+    os: 'Linux HPC',
+    location: '미 해군 공개',
+    protocol: 'HTTPS / FTP',
+    description: '전지구 해류·수온 예측 — NetCDF 파일 수신 후 ETL 전처리',
+  },
+  {
+    system: '기상청',
+    lang: '-',
+    os: '-',
+    location: '기상청 API Hub',
+    protocol: 'HTTPS',
+    description: '풍향·풍속·기온·강수 등 기상 데이터 REST API 수집',
+  },
+  {
+    system: 'KHOA',
+    lang: '-',
+    os: '-',
+    location: '해양조사원',
+    protocol: 'HTTPS',
+    description: '조위·해류·수온 등 해양관측 데이터 REST API 수집',
+  },
+  {
+    system: '해경 KBP',
+    lang: 'Java 전자정부',
+    os: 'Linux',
+    location: '해경 내부망',
+    protocol: '내부망 API',
+    description: '사용자·조직·직위 인사 데이터 배치 수집 (비식별화 적용)',
+  },
+  {
+    system: 'AIS',
+    lang: '-',
+    os: '-',
+    location: '해경 AIS 서버',
+    protocol: 'Socket / API',
+    description: '선박 위치·속도·방향 실시간 수신',
+  },
+];
+
+interface HeterogeneousStrategyCard {
+  challenge: string;
+  solution: string;
+  description: string;
+}
+
+interface IntegrationPlanItem {
+  title: string;
+  description: string;
+  details?: string[];
+}
+
+const INTEGRATION_PLANS: IntegrationPlanItem[] = [
+  {
+    title: '사용자 정보 연계',
+    description:
+      '해양경찰청의 인사관리플랫폼과 연계 또는 사용자 정보를 제공받아 구성할 수 있어야 함',
+  },
+  {
+    title: '해양공간 데이터 연계',
+    description:
+      '해경 해양공간 데이터 구축사업(해양공간정보 활용체계 구축 및 빅데이터 관련 사업)의 \'데이터통합저장소\' 시스템과 연계하여 현장탐색 전자지도 자동표출 기술 등에 영상 및 사진자료를 연계하여 구축',
+  },
+  {
+    title: 'DB 통합설계 기반 맞춤형 인터페이스',
+    description:
+      '플랫폼 변경 및 신규 통합설계 되는 데이터베이스(DB) 구조 설계를 기반으로 사용자 맞춤형 화면 인터페이스를 구현해야 함',
+    details: [
+      'DBMS는 분리되어 있는 시스템들을 통합설계를 통하여 공통, 분야별 등으로 설계하여야 함',
+    ],
+  },
+  {
+    title: '유출유 확산예측 정확성 향상 (KOSPS 연계)',
+    description:
+      '유출유 확산예측 정확성 향상을 위해, 해양오염방제지원시스템(KOSPS)를 연계·탑재하여야 함',
+    details: [
+      '다양한 유출유 확산 예측 결과를 사용자가 한눈에 확인 가능하여야 함',
+      '확산예측 기반으로 역추적, 최초 유출유 발생지점을 예측할 수 있어야 함',
+      '그 밖에 유출유 확산예측 정확성 향상을 위한 대책을 마련하여야 함',
+    ],
+  },
+  {
+    title: '기타 시스템 연계',
+    description:
+      '그 밖에 시스템 구축 중 효율적인 사고대응을 위한 타 시스템 연계할 수 있음',
+  },
+];
+
+const HETEROGENEOUS_STRATEGIES: HeterogeneousStrategyCard[] = [
+  {
+    challenge: '언어 이질성',
+    solution: 'REST API 래퍼 계층',
+    description:
+      'Fortran, Python, C++, Java 등 각 언어로 작성된 모델을 REST API 래퍼로 감싸 언어·플랫폼 독립적인 표준 인터페이스 제공',
+  },
+  {
+    challenge: '데이터 형식 차이',
+    solution: 'ETL 전처리 파이프라인',
+    description:
+      'NetCDF, CSV, Binary, JSON 등 이기종 포맷을 ETL 파이프라인으로 표준 JSON/GeoJSON 형식으로 변환 후 DB 적재',
+  },
+  {
+    challenge: '네트워크 분리',
+    solution: '이중 네트워크 연계',
+    description:
+      '외부망(인터넷) 연계와 내부망(해경 내부) 연계를 분리 운영하여 보안 정책 준수 및 데이터 안전성 확보',
+  },
+  {
+    challenge: '가용성·장애 대응',
+    solution: '연계 모니터링 + 알림',
+    description:
+      '연계 상태를 실시간 모니터링하고 수신 지연·실패 발생 시 운영자에게 즉시 알림 발송하여 신속 대응',
+  },
+  {
+    challenge: '인증·보안 차이',
+    solution: 'API Gateway 패턴',
+    description:
+      '시스템별 상이한 인증 방식(API Key, JWT, IP 제한 등)을 API Gateway 계층에서 통합 관리하여 단일 보안 정책 적용',
+  },
+  {
+    challenge: '프로토콜 차이',
+    solution: '어댑터 패턴 적용',
+    description:
+      'HTTP REST, FTP, Socket, 배치 파일 등 다양한 프로토콜을 어댑터 패턴으로 추상화하여 표준 인터페이스로 통일',
+  },
+];
+
+const HETEROGENEOUS_FLOW_STEPS = [
+  '원본 데이터',
+  '수집 어댑터',
+  'ETL 전처리',
+  '표준 변환',
+  'DB 적재',
+  'API 제공',
+];
+
+interface SecurityPolicyCard {
+  title: string;
+  items: string[];
+}
+
+const HETEROGENEOUS_SECURITY: SecurityPolicyCard[] = [
+  {
+    title: '외부망 연계',
+    items: [
+      'TLS 1.2+ 암호화 통신',
+      'API Key / OAuth 인증',
+      'IP 화이트리스트 제한',
+      'Rate Limiting 적용',
+    ],
+  },
+  {
+    title: '내부망 연계',
+    items: [
+      '전용 내부망 구간 분리',
+      '상호 인증서 검증',
+      '비식별화 자동 처리',
+      '접근 이력 감사로그',
+    ],
+  },
+  {
+    title: '데이터 보호',
+    items: [
+      '개인정보 수집 최소화',
+      'ETL 단계 비식별화',
+      '전송 구간 암호화',
+      '저장 데이터 접근 제어',
+    ],
+  },
+];
+
+// ─── 탭 4: 이기종시스템연계 ───────────────────────────────────────────────────────
+
+function HeterogeneousTab() {
+  return (
+    <div className="p-5 space-y-6">
+      {/* 1. 이기종시스템 연계 개요 */}
+      <section>
+        <h3 className="text-sm font-semibold text-t1 mb-3">1. 이기종시스템 연계 개요</h3>
+        <p className="text-xs text-t2 leading-relaxed mb-4">
+          통합지원시스템은 Fortran, Python, C++, Java 등 다양한 언어와 플랫폼으로 구현된 이기종
+          시스템과 연계한다. REST API 표준화, ETL 전처리, 어댑터 패턴을 통해 언어·플랫폼 독립적인
+          연계 구조를 구현하며, 외부망·내부망 이중 네트워크 정책을 준수한다.
+        </p>
+        <div className="flex items-stretch gap-2">
+          <div className="flex-1 bg-bg-elevated border border-stroke-1 rounded p-3 text-center">
+            <p className="text-xs font-semibold text-t2 mb-2">이기종 시스템</p>
+            {['Fortran KOSPS', 'Python/C++ 충북대', 'Java 해경KBP', 'NetCDF HYCOM'].map((item) => (
+              <p key={item} className="text-xs text-t3 leading-relaxed">
+                {item}
+              </p>
+            ))}
+          </div>
+          <div className="flex flex-col items-center justify-center shrink-0 gap-0.5">
+            <span className="text-t3 text-lg">→</span>
+            <span className="text-t3 text-lg">←</span>
+          </div>
+          <div className="flex-1 bg-cyan-600/10 border border-cyan-500/30 rounded p-3 text-center">
+            <p className="text-xs font-semibold text-t2 mb-2">연계 어댑터 계층</p>
+            {['REST API 래퍼', 'ETL 전처리', '프로토콜 변환', '인증 통합'].map((item) => (
+              <p key={item} className="text-xs text-t3 leading-relaxed">
+                {item}
+              </p>
+            ))}
+          </div>
+          <div className="flex flex-col items-center justify-center shrink-0 gap-0.5">
+            <span className="text-t3 text-lg">→</span>
+            <span className="text-t3 text-lg">←</span>
+          </div>
+          <div className="flex-1 bg-bg-elevated border border-stroke-1 rounded p-3 text-center">
+            <p className="text-xs font-semibold text-t2 mb-2">통합지원시스템</p>
+            {['Express REST API', 'PostgreSQL+PostGIS', 'React SPA', '표준 JSON'].map((item) => (
+              <p key={item} className="text-xs text-t3 leading-relaxed">
+                {item}
+              </p>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* 2. 이기종 시스템 간의 연계 방안 */}
+      <section>
+        <h3 className="text-sm font-semibold text-t1 mb-3">2. 이기종 시스템 간의 연계 방안</h3>
+        <div className="flex flex-col gap-2">
+          {INTEGRATION_PLANS.map((item, idx) => (
+            <div key={item.title} className="bg-bg-card border border-stroke-1 rounded p-3">
+              <p className="text-xs font-semibold text-t2 mb-1">
+                {idx + 1}. {item.title}
+              </p>
+              <p className="text-xs text-t2 leading-relaxed">{item.description}</p>
+              {item.details && (
+                <ul className="mt-1.5 flex flex-col gap-1 pl-3">
+                  {item.details.map((detail) => (
+                    <li key={detail} className="text-xs text-t3 leading-relaxed list-disc">
+                      {detail}
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* 3. 연계 대상 이기종 시스템 목록 */}
+      <section>
+        <h3 className="text-sm font-semibold text-t1 mb-3">3. 연계 대상 이기종 시스템 목록</h3>
+        <div className="overflow-auto">
+          <table className="w-full text-xs border-collapse">
+            <thead>
+              <tr className="bg-bg-elevated text-t3 uppercase tracking-wide">
+                {['시스템', '구현 언어', 'OS', '위치', '연계 프로토콜', '연계 설명'].map((h) => (
+                  <th
+                    key={h}
+                    className="px-3 py-2 text-left font-medium border-b border-stroke-1 whitespace-nowrap"
+                  >
+                    {h}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {HETEROGENEOUS_SYSTEMS.map((row) => (
+                <tr key={row.system} className="border-b border-stroke-1 hover:bg-bg-surface/50">
+                  <td className="px-3 py-2 font-medium text-t1 whitespace-nowrap">{row.system}</td>
+                  <td className="px-3 py-2 text-t2 whitespace-nowrap font-mono">{row.lang}</td>
+                  <td className="px-3 py-2 text-t2 whitespace-nowrap">{row.os}</td>
+                  <td className="px-3 py-2 text-t2 whitespace-nowrap">{row.location}</td>
+                  <td className="px-3 py-2 text-t2 whitespace-nowrap font-mono">{row.protocol}</td>
+                  <td className="px-3 py-2 text-t2">{row.description}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </section>
+
+      {/* 4. 이기종 연계 전략 */}
+      <section>
+        <h3 className="text-sm font-semibold text-t1 mb-3">4. 이기종 연계 전략</h3>
+        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
+          {HETEROGENEOUS_STRATEGIES.map((card) => (
+            <div key={card.challenge} className="bg-bg-card border border-stroke-1 rounded p-3">
+              <div className="flex items-center gap-1.5 mb-1.5">
+                <span className="text-xs font-semibold text-red-400">{card.challenge}</span>
+                <span className="text-t3 text-xs">→</span>
+                <span className="text-xs font-semibold text-cyan-400">{card.solution}</span>
+              </div>
+              <p className="text-xs text-t2 leading-relaxed">{card.description}</p>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* 5. 이기종 데이터 변환 흐름 */}
+      <section>
+        <h3 className="text-sm font-semibold text-t1 mb-3">5. 이기종 데이터 변환 흐름</h3>
+        <div className="flex items-center gap-1 flex-wrap">
+          {HETEROGENEOUS_FLOW_STEPS.map((step, idx) => (
+            <div key={step} className="flex items-center gap-1">
+              <div className="bg-bg-elevated border border-stroke-1 rounded px-3 py-2 text-center min-w-16">
+                <p className="text-xs font-medium text-t1">{step}</p>
+              </div>
+              {idx < HETEROGENEOUS_FLOW_STEPS.length - 1 && (
+                <span className="text-t3 text-lg shrink-0">→</span>
+              )}
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* 6. 이기종 연계 보안 정책 */}
+      <section>
+        <h3 className="text-sm font-semibold text-t1 mb-3">6. 이기종 연계 보안 정책</h3>
+        <div className="grid grid-cols-3 gap-3">
+          {HETEROGENEOUS_SECURITY.map((card) => (
+            <div key={card.title} className="bg-bg-card border border-stroke-1 rounded p-3">
+              <p className="text-xs font-semibold text-t2 mb-2">{card.title}</p>
+              <ul className="flex flex-col gap-1">
+                {card.items.map((item) => (
+                  <li key={item} className="text-xs text-t2 leading-relaxed">
+                    · {item}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+      </section>
+    </div>
+  );
+}
+
+// ─── 공통기능 탭 데이터 ──────────────────────────────────────────────────────────
+
+interface CommonFeatureItem {
+  title: string;
+  description: string;
+  details: string[];
+}
+
+const COMMON_FEATURES: CommonFeatureItem[] = [
+  {
+    title: '인증 시스템',
+    description: 'JWT 기반 세션 인증 + Google OAuth 소셜 로그인',
+    details: [
+      'HttpOnly 쿠키(WING_SESSION) 기반 토큰 관리 — XSS 방어',
+      'Access Token(15분) + Refresh Token(7일) 이중 토큰 구조',
+      'Google OAuth 2.0 소셜 로그인 지원',
+      'Zustand authStore 기반 프론트엔드 인증 상태 통합 관리',
+    ],
+  },
+  {
+    title: 'RBAC 2차원 권한',
+    description: 'AUTH_PERM 기반 기능별·역할별 2차원 권한 엔진',
+    details: [
+      'OPER_CD (R: 조회, C: 생성, U: 수정, D: 삭제) 4단계 조작 권한',
+      '역할(Role) × 기능(Feature) 매트릭스 기반 권한 매핑',
+      'permResolver 엔진으로 백엔드·프론트엔드 동시 권한 검증',
+      '메뉴 접근, 버튼 노출, API 호출 3중 권한 통제',
+    ],
+  },
+  {
+    title: 'API 통신 패턴',
+    description: 'Axios 기반 공통 API 클라이언트 + 자동 인증·에러 처리',
+    details: [
+      'GET/POST만 사용 (PUT/DELETE/PATCH 금지 — 보안취약점 점검 가이드 준수)',
+      '요청 인터셉터: 쿠키 자동 첨부 (withCredentials)',
+      '응답 인터셉터: 401 시 자동 토큰 갱신, 실패 시 로그아웃',
+      'TanStack Query 기반 서버 상태 캐싱 및 자동 재검증',
+    ],
+  },
+  {
+    title: '상태 관리',
+    description: 'Zustand(클라이언트) + TanStack Query(서버) 이중 상태 관리',
+    details: [
+      'Zustand: authStore(인증), menuStore(메뉴) 등 클라이언트 전역 상태',
+      'TanStack Query: API 응답 캐싱, 자동 재요청, 낙관적 업데이트',
+      '컴포넌트 로컬 상태: useState 활용',
+    ],
+  },
+  {
+    title: '메뉴 시스템',
+    description: 'DB 기반 동적 메뉴 + 권한 연동 자동 필터링',
+    details: [
+      'DB에서 메뉴 트리 구조를 동적으로 로드',
+      '사용자 권한에 따라 메뉴 항목 자동 필터링 (접근 불가 메뉴 미노출)',
+      '관리자 화면에서 메뉴 순서·표시 여부·아이콘 실시간 편집',
+      'menuStore(Zustand)로 현재 활성 메뉴 상태 전역 관리',
+    ],
+  },
+  {
+    title: '지도 엔진',
+    description: 'MapLibre GL JS 5.x + deck.gl 9.x 기반 GIS 시각화',
+    details: [
+      'MapLibre GL JS: 오픈소스 벡터 타일 기반 지도 렌더링',
+      'deck.gl: 대규모 공간 데이터(파티클, 히트맵, 궤적) 고성능 시각화',
+      'PostGIS 공간 쿼리 → GeoJSON → deck.gl 레이어 파이프라인',
+      '레이어 트리 UI로 사용자별 레이어 표시·숨김 제어',
+    ],
+  },
+  {
+    title: '스타일링',
+    description: 'Tailwind CSS @layer 아키텍처 + CSS 변수 디자인 시스템',
+    details: [
+      '@layer base → components → wing 3단계 CSS 계층 구조',
+      'CSS 변수 기반 시맨틱 컬러 (bg-bg-base, text-t1, border-stroke-1 등)',
+      '다크 모드 기본 적용 — CSS 변수 전환으로 테마 일괄 변경',
+      '인라인 스타일 지양, Tailwind 유틸리티 클래스 우선',
+    ],
+  },
+  {
+    title: '감사 로그',
+    description: '사용자 행위 자동 기록 — 접속·조회·변경 이력 추적',
+    details: [
+      '로그인/로그아웃, 메뉴 접근, 데이터 변경 자동 기록',
+      'App.tsx에서 탭 전환 시 감사 로그 자동 전송',
+      '관리자 화면에서 사용자별·기간별 감사 로그 조회 가능',
+      'IP 주소, User-Agent, 요청 경로 등 부가 정보 기록',
+    ],
+  },
+  {
+    title: '보안',
+    description: '입력 살균·CORS·CSP·Rate Limiting 다층 보안 정책',
+    details: [
+      '입력 살균(sanitize): XSS·SQL Injection 방어 미들웨어 적용',
+      'Helmet: CSP, X-Frame-Options, HSTS 등 보안 헤더 자동 설정',
+      'CORS: 허용 오리진 화이트리스트 제한',
+      'Rate Limiting: API 요청 빈도 제한으로 DoS 방어',
+    ],
+  },
+];
+
+// ─── 방제대응 프로세스 데이터 ─────────────────────────────────────────────────────
+
+interface ProcessStep {
+  phase: string;
+  description: string;
+  modules: string[];
+}
+
+const RESPONSE_PROCESS: ProcessStep[] = [
+  {
+    phase: '사고 접수',
+    description: '해양오염 사고 신고 접수 및 초동 상황 등록',
+    modules: ['사건/사고'],
+  },
+  {
+    phase: '상황 파악',
+    description: '사고 현장 기상·해상 조건 확인, 유출원·유출량 파악',
+    modules: ['해양기상', '사건/사고'],
+  },
+  {
+    phase: '확산 예측',
+    description: '유출유/HNS 확산 시뮬레이션 및 역추적 분석 수행',
+    modules: ['확산예측', 'HNS분석'],
+  },
+  {
+    phase: '방제 계획',
+    description: '오일붐 배치, 유처리제 살포 구역, 방제선 투입 계획 수립',
+    modules: ['확산예측', '자산관리'],
+  },
+  {
+    phase: '구조 작전',
+    description: '인명 구조 시나리오 수립, 표류 예측 기반 수색 구역 결정',
+    modules: ['구조시나리오'],
+  },
+  {
+    phase: '항공 감시',
+    description: '위성·드론 영상으로 유막 면적 모니터링 및 방제 효과 확인',
+    modules: ['항공방제'],
+  },
+  {
+    phase: '해안 조사',
+    description: 'Pre-SCAT 해안 오염 조사, 피해 범위 기록',
+    modules: ['SCAT조사'],
+  },
+  {
+    phase: '상황 종료',
+    description: '방제 완료 보고, 감사 이력 정리, 사후 분석',
+    modules: ['사건/사고', '관리자'],
+  },
+];
+
+// ─── 시스템별 기능 유무 매트릭스 데이터 ────────────────────────────────────────────
+
+const SYSTEM_MODULES = [
+  '확산예측',
+  'HNS분석',
+  '구조시나리오',
+  '항공방제',
+  '해양기상',
+  '사건/사고',
+  '자산관리',
+  'SCAT조사',
+  '게시판',
+  '관리자',
+] as const;
+
+interface FeatureMatrixRow {
+  feature: string;
+  category: '공통기능' | '기본정보관리' | '업무기능';
+  integrated: boolean;
+  systems: Record<string, boolean>;
+}
+
+const FEATURE_MATRIX: FeatureMatrixRow[] = [
+  {
+    feature: '사용자 인증 (JWT)',
+    category: '공통기능',
+    integrated: true,
+    systems: { '확산예측': true, 'HNS분석': true, '구조시나리오': true, '항공방제': true, '해양기상': true, '사건/사고': true, '자산관리': true, 'SCAT조사': true, '게시판': true, '관리자': true },
+  },
+  {
+    feature: 'RBAC 권한 제어',
+    category: '공통기능',
+    integrated: true,
+    systems: { '확산예측': true, 'HNS분석': true, '구조시나리오': true, '항공방제': true, '해양기상': true, '사건/사고': true, '자산관리': true, 'SCAT조사': true, '게시판': true, '관리자': true },
+  },
+  {
+    feature: '감사 로그',
+    category: '공통기능',
+    integrated: true,
+    systems: { '확산예측': true, 'HNS분석': true, '구조시나리오': true, '항공방제': true, '해양기상': true, '사건/사고': true, '자산관리': true, 'SCAT조사': true, '게시판': true, '관리자': true },
+  },
+  {
+    feature: 'API 통신 (Axios)',
+    category: '공통기능',
+    integrated: true,
+    systems: { '확산예측': true, 'HNS분석': true, '구조시나리오': true, '항공방제': true, '해양기상': true, '사건/사고': true, '자산관리': true, 'SCAT조사': true, '게시판': true, '관리자': true },
+  },
+  {
+    feature: '입력 살균/보안',
+    category: '공통기능',
+    integrated: true,
+    systems: { '확산예측': true, 'HNS분석': true, '구조시나리오': true, '항공방제': true, '해양기상': true, '사건/사고': true, '자산관리': true, 'SCAT조사': true, '게시판': true, '관리자': true },
+  },
+  {
+    feature: '사용자 관리',
+    category: '기본정보관리',
+    integrated: true,
+    systems: { '확산예측': false, 'HNS분석': false, '구조시나리오': false, '항공방제': false, '해양기상': false, '사건/사고': false, '자산관리': false, 'SCAT조사': false, '게시판': false, '관리자': true },
+  },
+  {
+    feature: '지도 엔진 (MapLibre)',
+    category: '기본정보관리',
+    integrated: true,
+    systems: { '확산예측': true, 'HNS분석': true, '구조시나리오': true, '항공방제': true, '해양기상': true, '사건/사고': true, '자산관리': false, 'SCAT조사': true, '게시판': false, '관리자': false },
+  },
+  {
+    feature: '레이어 관리',
+    category: '기본정보관리',
+    integrated: true,
+    systems: { '확산예측': true, 'HNS분석': true, '구조시나리오': true, '항공방제': true, '해양기상': true, '사건/사고': true, '자산관리': false, 'SCAT조사': true, '게시판': false, '관리자': true },
+  },
+  {
+    feature: '메뉴 관리',
+    category: '기본정보관리',
+    integrated: true,
+    systems: { '확산예측': false, 'HNS분석': false, '구조시나리오': false, '항공방제': false, '해양기상': false, '사건/사고': false, '자산관리': false, 'SCAT조사': false, '게시판': false, '관리자': true },
+  },
+  {
+    feature: '시스템 설정',
+    category: '기본정보관리',
+    integrated: true,
+    systems: { '확산예측': false, 'HNS분석': false, '구조시나리오': false, '항공방제': false, '해양기상': false, '사건/사고': false, '자산관리': false, 'SCAT조사': false, '게시판': false, '관리자': true },
+  },
+  {
+    feature: '확산 시뮬레이션',
+    category: '업무기능',
+    integrated: false,
+    systems: { '확산예측': true, 'HNS분석': false, '구조시나리오': false, '항공방제': false, '해양기상': false, '사건/사고': false, '자산관리': false, 'SCAT조사': false, '게시판': false, '관리자': false },
+  },
+  {
+    feature: 'HNS 대기확산',
+    category: '업무기능',
+    integrated: false,
+    systems: { '확산예측': false, 'HNS분석': true, '구조시나리오': false, '항공방제': false, '해양기상': false, '사건/사고': false, '자산관리': false, 'SCAT조사': false, '게시판': false, '관리자': false },
+  },
+  {
+    feature: '표류 예측',
+    category: '업무기능',
+    integrated: false,
+    systems: { '확산예측': false, 'HNS분석': false, '구조시나리오': true, '항공방제': false, '해양기상': false, '사건/사고': false, '자산관리': false, 'SCAT조사': false, '게시판': false, '관리자': false },
+  },
+  {
+    feature: '위성/드론 영상',
+    category: '업무기능',
+    integrated: false,
+    systems: { '확산예측': false, 'HNS분석': false, '구조시나리오': false, '항공방제': true, '해양기상': false, '사건/사고': false, '자산관리': false, 'SCAT조사': false, '게시판': false, '관리자': false },
+  },
+  {
+    feature: '기상/해상 정보',
+    category: '업무기능',
+    integrated: false,
+    systems: { '확산예측': true, 'HNS분석': true, '구조시나리오': true, '항공방제': false, '해양기상': true, '사건/사고': false, '자산관리': false, 'SCAT조사': false, '게시판': false, '관리자': false },
+  },
+  {
+    feature: '역추적 분석',
+    category: '업무기능',
+    integrated: false,
+    systems: { '확산예측': true, 'HNS분석': false, '구조시나리오': false, '항공방제': false, '해양기상': false, '사건/사고': false, '자산관리': false, 'SCAT조사': false, '게시판': false, '관리자': false },
+  },
+  {
+    feature: '사고 등록/이력',
+    category: '업무기능',
+    integrated: false,
+    systems: { '확산예측': false, 'HNS분석': false, '구조시나리오': false, '항공방제': false, '해양기상': false, '사건/사고': true, '자산관리': false, 'SCAT조사': false, '게시판': false, '관리자': false },
+  },
+  {
+    feature: '장비/선박 관리',
+    category: '업무기능',
+    integrated: false,
+    systems: { '확산예측': false, 'HNS분석': false, '구조시나리오': false, '항공방제': false, '해양기상': false, '사건/사고': false, '자산관리': true, 'SCAT조사': false, '게시판': false, '관리자': false },
+  },
+  {
+    feature: '해안 조사',
+    category: '업무기능',
+    integrated: false,
+    systems: { '확산예측': false, 'HNS분석': false, '구조시나리오': false, '항공방제': false, '해양기상': false, '사건/사고': false, '자산관리': false, 'SCAT조사': true, '게시판': false, '관리자': false },
+  },
+  {
+    feature: '게시판 CRUD',
+    category: '업무기능',
+    integrated: false,
+    systems: { '확산예측': false, 'HNS분석': false, '구조시나리오': false, '항공방제': false, '해양기상': false, '사건/사고': false, '자산관리': false, 'SCAT조사': false, '게시판': true, '관리자': false },
+  },
+];
+
+const CATEGORY_STYLES: Record<string, string> = {
+  '공통기능': 'bg-cyan-600/20 text-cyan-300',
+  '기본정보관리': 'bg-emerald-600/20 text-emerald-300',
+  '업무기능': 'bg-bg-elevated text-t3',
+};
+
+// ─── 탭 5: 공통기능 ─────────────────────────────────────────────────────────────
+
+function CommonFeaturesTab() {
+  return (
+    <div className="flex flex-col gap-6 p-5">
+      {/* 1. 방제대응 프로세스 */}
+      <section>
+        <h3 className="text-sm font-semibold text-t1 mb-3">1. 방제대응 프로세스</h3>
+        <p className="text-xs text-t2 leading-relaxed mb-4">
+          해양오염 사고 발생 시 사고 접수부터 상황 종료까지의 단계별 대응 프로세스이며,
+          각 단계에서 활용하는 시스템 모듈을 표시한다.
+        </p>
+        {/* 프로세스 흐름도 */}
+        <div className="flex items-start gap-1 flex-wrap mb-4">
+          {RESPONSE_PROCESS.map((step, idx) => (
+            <div key={step.phase} className="flex items-start gap-1">
+              <div className="bg-bg-elevated border border-stroke-1 rounded px-3 py-2 text-center min-w-20">
+                <p className="text-xs font-semibold text-t1 mb-1">{step.phase}</p>
+                <div className="flex flex-col gap-0.5">
+                  {step.modules.map((mod) => (
+                    <span key={mod} className="text-[10px] text-cyan-400">{mod}</span>
+                  ))}
+                </div>
+              </div>
+              {idx < RESPONSE_PROCESS.length - 1 && (
+                <span className="text-t3 text-lg shrink-0 mt-2.5">→</span>
+              )}
+            </div>
+          ))}
+        </div>
+        {/* 프로세스 상세 */}
+        <div className="flex flex-col gap-2">
+          {RESPONSE_PROCESS.map((step, idx) => (
+            <div key={step.phase} className="bg-bg-card border border-stroke-1 rounded p-3 flex items-start gap-3">
+              <span className="inline-flex items-center justify-center w-5 h-5 rounded bg-cyan-600 text-white text-xs font-semibold shrink-0 mt-0.5">
+                {idx + 1}
+              </span>
+              <div className="flex-1">
+                <p className="text-xs font-semibold text-t1 mb-0.5">{step.phase}</p>
+                <p className="text-xs text-t2 leading-relaxed">{step.description}</p>
+              </div>
+              <div className="flex gap-1 shrink-0">
+                {step.modules.map((mod) => (
+                  <span key={mod} className="px-1.5 py-0.5 text-[10px] font-medium rounded bg-cyan-600/20 text-cyan-300">
+                    {mod}
+                  </span>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* 2. 시스템별 기능 유무 매트릭스 */}
+      <section>
+        <h3 className="text-sm font-semibold text-t1 mb-3">2. 시스템별 기능 유무 매트릭스</h3>
+        <p className="text-xs text-t2 leading-relaxed mb-4">
+          각 시스템(업무 모듈)별 기능의 유무를 파악하여 공통기능, 기본정보 관리(사용자, 지도 등) 등
+          통합할 수 있는 기능을 표시한다. <span className="text-cyan-400 font-medium">통합 대상</span> 기능은
+          공통 모듈로 일원화하여 중복 개발을 방지한다.
+        </p>
+        <div className="overflow-auto">
+          <table className="w-full text-xs border-collapse">
+            <thead>
+              <tr className="bg-bg-elevated text-t3 tracking-wide">
+                <th className="px-2 py-2 text-left font-medium border-b border-stroke-1 whitespace-nowrap sticky left-0 bg-bg-elevated z-10">
+                  기능
+                </th>
+                <th className="px-2 py-2 text-center font-medium border-b border-stroke-1 whitespace-nowrap">
+                  분류
+                </th>
+                <th className="px-2 py-2 text-center font-medium border-b border-stroke-1 whitespace-nowrap">
+                  통합
+                </th>
+                {SYSTEM_MODULES.map((mod) => (
+                  <th key={mod} className="px-1.5 py-2 text-center font-medium border-b border-stroke-1 whitespace-nowrap">
+                    <span className="writing-mode-vertical text-[10px]">{mod}</span>
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {FEATURE_MATRIX.map((row) => (
+                <tr key={row.feature} className="border-b border-stroke-1 hover:bg-bg-surface/50">
+                  <td className="px-2 py-1.5 font-medium text-t1 whitespace-nowrap sticky left-0 bg-bg-base z-10">
+                    {row.feature}
+                  </td>
+                  <td className="px-2 py-1.5 text-center">
+                    <span className={`px-1.5 py-0.5 rounded text-[10px] font-medium ${CATEGORY_STYLES[row.category]}`}>
+                      {row.category}
+                    </span>
+                  </td>
+                  <td className="px-2 py-1.5 text-center">
+                    {row.integrated ? (
+                      <span className="text-cyan-400 font-semibold">통합</span>
+                    ) : (
+                      <span className="text-t3">개별</span>
+                    )}
+                  </td>
+                  {SYSTEM_MODULES.map((mod) => (
+                    <td key={mod} className="px-1.5 py-1.5 text-center">
+                      {row.systems[mod] ? (
+                        <span className="text-emerald-400 font-bold">O</span>
+                      ) : (
+                        <span className="text-t3/30">-</span>
+                      )}
+                    </td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+        {/* 범례 */}
+        <div className="flex gap-4 mt-3">
+          <div className="flex items-center gap-1.5">
+            <span className="px-1.5 py-0.5 rounded text-[10px] font-medium bg-cyan-600/20 text-cyan-300">공통기능</span>
+            <span className="text-xs text-t3">전 모듈 공통 적용</span>
+          </div>
+          <div className="flex items-center gap-1.5">
+            <span className="px-1.5 py-0.5 rounded text-[10px] font-medium bg-emerald-600/20 text-emerald-300">기본정보관리</span>
+            <span className="text-xs text-t3">사용자·지도·메뉴·설정 통합 관리</span>
+          </div>
+          <div className="flex items-center gap-1.5">
+            <span className="px-1.5 py-0.5 rounded text-[10px] font-medium bg-bg-elevated text-t3">업무기능</span>
+            <span className="text-xs text-t3">모듈별 고유 기능</span>
+          </div>
+        </div>
+      </section>
+
+      {/* 3. 공통기능 상세 */}
+      <section>
+        <h3 className="text-sm font-semibold text-t1 mb-3">3. 공통기능 상세</h3>
+        <div className="flex flex-col gap-3">
+          {COMMON_FEATURES.map((feature, idx) => (
+            <div key={feature.title} className="bg-bg-card border border-stroke-1 rounded p-3">
+              <div className="flex items-center gap-2 mb-1.5">
+                <span className="inline-flex items-center justify-center w-5 h-5 rounded bg-cyan-600 text-white text-xs font-semibold shrink-0">
+                  {idx + 1}
+                </span>
+                <p className="text-xs font-semibold text-t1">{feature.title}</p>
+              </div>
+              <p className="text-xs text-t2 leading-relaxed mb-2 pl-7">{feature.description}</p>
+              <ul className="flex flex-col gap-1 pl-7">
+                {feature.details.map((detail) => (
+                  <li key={detail} className="text-xs text-t3 leading-relaxed list-disc">
+                    {detail}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* 4. 공통 모듈 구조 */}
+      <section>
+        <h3 className="text-sm font-semibold text-t1 mb-3">4. 공통 모듈 디렉토리 구조</h3>
+        <div className="overflow-auto">
+          <table className="w-full text-xs border-collapse">
+            <thead>
+              <tr className="bg-bg-elevated text-t3 uppercase tracking-wide">
+                {['디렉토리', '역할', '주요 파일'].map((h) => (
+                  <th
+                    key={h}
+                    className="px-3 py-2 text-left font-medium border-b border-stroke-1 whitespace-nowrap"
+                  >
+                    {h}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {[
+                { dir: 'common/components/', role: '공통 UI 컴포넌트', files: 'auth/, layout/, map/, ui/, layer/' },
+                { dir: 'common/hooks/', role: '공통 커스텀 훅', files: 'useLayers, useSubMenu, useFeatureTracking' },
+                { dir: 'common/services/', role: 'API 통신 모듈', files: 'api.ts, authApi.ts, layerService.ts' },
+                { dir: 'common/store/', role: '전역 상태 스토어', files: 'authStore.ts, menuStore.ts' },
+                { dir: 'common/styles/', role: 'CSS @layer 스타일', files: 'base.css, components.css, wing.css' },
+                { dir: 'common/types/', role: '공통 타입 정의', files: 'backtrack, hns, navigation 등' },
+                { dir: 'common/utils/', role: '유틸리티 함수', files: 'coordinates, geo, sanitize, cn.ts' },
+                { dir: 'common/constants/', role: '상수 정의', files: 'featureIds.ts' },
+                { dir: 'common/data/', role: 'UI 데이터', files: 'layerData.ts (레이어 트리)' },
+              ].map((row) => (
+                <tr key={row.dir} className="border-b border-stroke-1 hover:bg-bg-surface/50">
+                  <td className="px-3 py-2 font-medium text-t1 whitespace-nowrap font-mono">{row.dir}</td>
+                  <td className="px-3 py-2 text-t2">{row.role}</td>
+                  <td className="px-3 py-2 text-t3 font-mono">{row.files}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </div>
+  );
+}
+
+// ─── 메인 패널 ───────────────────────────────────────────────────────────────────
+
+export default function SystemArchPanel() {
+  const [activeTab, setActiveTab] = useState<TabId>('framework');
+
+  return (
+    <div className="flex flex-col h-full overflow-hidden">
+      {/* 헤더 */}
+      <div className="flex items-center justify-between px-5 py-3 border-b border-stroke-1 shrink-0">
+        <h2 className="text-sm font-semibold text-t1">시스템구조</h2>
+      </div>
+
+      {/* 탭 버튼 */}
+      <div className="flex gap-1.5 px-5 py-2.5 border-b border-stroke-1 shrink-0 bg-bg-base">
+        {TABS.map((tab) => (
+          <button
+            key={tab.id}
+            onClick={() => setActiveTab(tab.id)}
+            className={`px-3 py-1.5 text-xs font-medium rounded transition-colors ${
+              activeTab === tab.id
+                ? 'bg-cyan-600 text-white'
+                : 'bg-bg-elevated text-t2 hover:bg-bg-card'
+            }`}
+          >
+            {tab.label}
+          </button>
+        ))}
+      </div>
+
+      {/* 탭 콘텐츠 */}
+      <div className="flex-1 overflow-auto">
+        {activeTab === 'framework' && <FrameworkTab />}
+        {activeTab === 'target' && <TargetArchTab />}
+        {activeTab === 'interface' && <InterfaceTab />}
+        {activeTab === 'heterogeneous' && <HeterogeneousTab />}
+        {activeTab === 'common-features' && <CommonFeaturesTab />}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/tabs/admin/components/UsersPanel.tsx b/frontend/src/tabs/admin/components/UsersPanel.tsx
index a3bb490..5a57d34 100644
--- a/frontend/src/tabs/admin/components/UsersPanel.tsx
+++ b/frontend/src/tabs/admin/components/UsersPanel.tsx
@@ -87,7 +87,7 @@ function RegisterModal({ allRoles, allOrgs, onClose, onSuccess }: RegisterModalP
       <div className="bg-bg-surface border border-stroke rounded-lg shadow-lg w-[480px] max-h-[90vh] flex flex-col">
         {/* 헤더 */}
         <div className="flex items-center justify-between px-6 py-4 border-b border-stroke">
-          <h2 className="text-sm font-bold text-fg font-korean">사용자 등록</h2>
+          <h2 className="text-body-2 font-bold text-fg font-korean">사용자 등록</h2>
           <button onClick={onClose} className="text-fg-disabled hover:text-fg transition-colors">
             <svg
               width="16"
@@ -115,7 +115,7 @@ function RegisterModal({ allRoles, allOrgs, onClose, onSuccess }: RegisterModalP
                 value={account}
                 onChange={(e) => setAccount(e.target.value)}
                 placeholder="로그인 계정 ID"
-                className="w-full px-3 py-2 text-xs bg-bg-elevated border border-stroke rounded-md text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none font-mono"
+                className="w-full px-3 py-2 text-caption bg-bg-elevated border border-stroke rounded-md text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none font-mono"
               />
             </div>
 
@@ -129,7 +129,7 @@ function RegisterModal({ allRoles, allOrgs, onClose, onSuccess }: RegisterModalP
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
                 placeholder="초기 비밀번호"
-                className="w-full px-3 py-2 text-xs bg-bg-elevated border border-stroke rounded-md text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none font-mono"
+                className="w-full px-3 py-2 text-caption bg-bg-elevated border border-stroke rounded-md text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none font-mono"
               />
             </div>
 
@@ -143,7 +143,7 @@ function RegisterModal({ allRoles, allOrgs, onClose, onSuccess }: RegisterModalP
                 value={name}
                 onChange={(e) => setName(e.target.value)}
                 placeholder="실명"
-                className="w-full px-3 py-2 text-xs bg-bg-elevated border border-stroke rounded-md text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none font-korean"
+                className="w-full px-3 py-2 text-caption bg-bg-elevated border border-stroke rounded-md text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none font-korean"
               />
             </div>
 
@@ -157,7 +157,7 @@ function RegisterModal({ allRoles, allOrgs, onClose, onSuccess }: RegisterModalP
                 value={rank}
                 onChange={(e) => setRank(e.target.value)}
                 placeholder="예: 팀장, 주임 등"
-                className="w-full px-3 py-2 text-xs bg-bg-elevated border border-stroke rounded-md text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none font-korean"
+                className="w-full px-3 py-2 text-caption bg-bg-elevated border border-stroke rounded-md text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none font-korean"
               />
             </div>
 
@@ -169,7 +169,7 @@ function RegisterModal({ allRoles, allOrgs, onClose, onSuccess }: RegisterModalP
               <select
                 value={orgSn}
                 onChange={(e) => setOrgSn(e.target.value !== '' ? Number(e.target.value) : '')}
-                className="w-full px-3 py-2 text-xs bg-bg-elevated border border-stroke rounded-md text-fg focus:border-color-accent focus:outline-none font-korean"
+                className="w-full px-3 py-2 text-caption bg-bg-elevated border border-stroke rounded-md text-fg focus:border-color-accent focus:outline-none font-korean"
               >
                 <option value="">소속 없음</option>
                 {allOrgs.map((org) => (
@@ -191,7 +191,7 @@ function RegisterModal({ allRoles, allOrgs, onClose, onSuccess }: RegisterModalP
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
                 placeholder="이메일 주소"
-                className="w-full px-3 py-2 text-xs bg-bg-elevated border border-stroke rounded-md text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none font-mono"
+                className="w-full px-3 py-2 text-caption bg-bg-elevated border border-stroke rounded-md text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none font-mono"
               />
             </div>
 
@@ -217,7 +217,7 @@ function RegisterModal({ allRoles, allOrgs, onClose, onSuccess }: RegisterModalP
                           onChange={() => toggleRole(role.sn)}
                           style={{ accentColor: color }}
                         />
-                        <span className="text-xs font-korean" style={{ color }}>
+                        <span className="text-caption font-korean" style={{ color }}>
                           {role.name}
                         </span>
                         <span className="text-caption text-fg-disabled font-mono">{role.code}</span>
@@ -237,14 +237,14 @@ function RegisterModal({ allRoles, allOrgs, onClose, onSuccess }: RegisterModalP
             <button
               type="button"
               onClick={onClose}
-              className="px-4 py-2 text-xs border border-stroke text-fg-sub rounded-md hover:bg-[rgba(255,255,255,0.04)] transition-all font-korean"
+              className="px-4 py-2 text-caption border border-stroke text-fg-sub rounded-md hover:bg-[rgba(255,255,255,0.04)] transition-all font-korean"
             >
               취소
             </button>
             <button
               type="submit"
               disabled={submitting}
-              className="px-4 py-2 text-xs font-semibold rounded-md bg-color-accent text-bg-0 hover:shadow-[0_0_12px_rgba(6,182,212,0.3)] transition-all disabled:opacity-50 font-korean"
+              className="px-4 py-2 text-caption font-semibold rounded-md bg-color-accent text-bg-0 hover:shadow-[0_0_12px_rgba(6,182,212,0.3)] transition-all disabled:opacity-50 font-korean"
             >
               {submitting ? '등록 중...' : '등록'}
             </button>
@@ -332,7 +332,7 @@ function UserDetailModal({ user, allOrgs, onClose, onUpdated }: UserDetailModalP
         {/* 헤더 */}
         <div className="flex items-center justify-between px-6 py-4 border-b border-stroke">
           <div>
-            <h2 className="text-sm font-bold text-fg font-korean">사용자 정보</h2>
+            <h2 className="text-body-2 font-bold text-fg font-korean">사용자 정보</h2>
             <p className="text-caption text-fg-disabled font-mono mt-0.5">{user.account}</p>
           </div>
           <button onClick={onClose} className="text-fg-disabled hover:text-fg transition-colors">
@@ -364,7 +364,7 @@ function UserDetailModal({ user, allOrgs, onClose, onUpdated }: UserDetailModalP
                   type="text"
                   value={name}
                   onChange={(e) => setName(e.target.value)}
-                  className="w-full px-3 py-1.5 text-xs bg-bg-elevated border border-stroke rounded-md text-fg focus:border-color-accent focus:outline-none font-korean"
+                  className="w-full px-3 py-1.5 text-caption bg-bg-elevated border border-stroke rounded-md text-fg focus:border-color-accent focus:outline-none font-korean"
                 />
               </div>
               <div className="grid grid-cols-2 gap-3">
@@ -377,7 +377,7 @@ function UserDetailModal({ user, allOrgs, onClose, onUpdated }: UserDetailModalP
                     value={rank}
                     onChange={(e) => setRank(e.target.value)}
                     placeholder="예: 팀장"
-                    className="w-full px-3 py-1.5 text-xs bg-bg-elevated border border-stroke rounded-md text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none font-korean"
+                    className="w-full px-3 py-1.5 text-caption bg-bg-elevated border border-stroke rounded-md text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none font-korean"
                   />
                 </div>
                 <div>
@@ -387,7 +387,7 @@ function UserDetailModal({ user, allOrgs, onClose, onUpdated }: UserDetailModalP
                   <select
                     value={orgSn}
                     onChange={(e) => setOrgSn(e.target.value !== '' ? Number(e.target.value) : '')}
-                    className="w-full px-3 py-1.5 text-xs bg-bg-elevated border border-stroke rounded-md text-fg focus:border-color-accent focus:outline-none font-korean"
+                    className="w-full px-3 py-1.5 text-caption bg-bg-elevated border border-stroke rounded-md text-fg focus:border-color-accent focus:outline-none font-korean"
                   >
                     <option value="">소속 없음</option>
                     {allOrgs.map((org) => (
@@ -427,7 +427,7 @@ function UserDetailModal({ user, allOrgs, onClose, onUpdated }: UserDetailModalP
                   value={newPassword}
                   onChange={(e) => setNewPassword(e.target.value)}
                   placeholder="새 비밀번호 입력"
-                  className="w-full px-3 py-1.5 text-xs bg-bg-elevated border border-stroke rounded-md text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none font-mono"
+                  className="w-full px-3 py-1.5 text-caption bg-bg-elevated border border-stroke rounded-md text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none font-mono"
                 />
               </div>
               <button
@@ -535,7 +535,7 @@ function UserDetailModal({ user, allOrgs, onClose, onUpdated }: UserDetailModalP
         <div className="flex items-center justify-end px-6 py-3 border-t border-stroke">
           <button
             onClick={onClose}
-            className="px-4 py-2 text-xs border border-stroke text-fg-sub rounded-md hover:bg-[rgba(255,255,255,0.04)] transition-all font-korean"
+            className="px-4 py-2 text-caption border border-stroke text-fg-sub rounded-md hover:bg-[rgba(255,255,255,0.04)] transition-all font-korean"
           >
             닫기
           </button>
@@ -680,7 +680,7 @@ function UsersPanel() {
           <div className="flex items-center gap-3">
             <div>
               <h1 className="text-lg font-bold text-fg font-korean">사용자 관리</h1>
-              <p className="text-xs text-fg-disabled mt-1 font-korean">
+              <p className="text-caption text-fg-disabled mt-1 font-korean">
                 총 {filteredUsers.length}명
               </p>
             </div>
@@ -698,7 +698,7 @@ function UsersPanel() {
                 setOrgFilter(e.target.value);
                 setCurrentPage(1);
               }}
-              className="px-3 py-2 text-xs bg-bg-elevated border border-stroke rounded-md text-fg focus:border-color-accent focus:outline-none font-korean"
+              className="px-3 py-2 text-caption bg-bg-elevated border border-stroke rounded-md text-fg focus:border-color-accent focus:outline-none font-korean"
             >
               <option value="">전체 소속</option>
               {allOrgs.map((org) => (
@@ -711,7 +711,7 @@ function UsersPanel() {
             <select
               value={statusFilter}
               onChange={(e) => setStatusFilter(e.target.value)}
-              className="px-3 py-2 text-xs bg-bg-elevated border border-stroke rounded-md text-fg focus:border-color-accent focus:outline-none font-korean"
+              className="px-3 py-2 text-caption bg-bg-elevated border border-stroke rounded-md text-fg focus:border-color-accent focus:outline-none font-korean"
             >
               <option value="">전체 상태</option>
               <option value="PENDING">승인대기</option>
@@ -726,11 +726,11 @@ function UsersPanel() {
               placeholder="이름, 계정 검색..."
               value={searchTerm}
               onChange={(e) => setSearchTerm(e.target.value)}
-              className="w-56 px-3 py-2 text-xs bg-bg-elevated border border-stroke rounded-md text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none font-korean"
+              className="w-56 px-3 py-2 text-caption bg-bg-elevated border border-stroke rounded-md text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none font-korean"
             />
             <button
               onClick={() => setShowRegisterModal(true)}
-              className="px-4 py-2 text-xs font-semibold rounded-md bg-color-accent text-bg-0 hover:shadow-[0_0_12px_rgba(6,182,212,0.3)] transition-all font-korean"
+              className="px-4 py-2 text-caption font-semibold rounded-md bg-color-accent text-bg-0 hover:shadow-[0_0_12px_rgba(6,182,212,0.3)] transition-all font-korean"
             >
               + 사용자 등록
             </button>
@@ -740,7 +740,7 @@ function UsersPanel() {
         {/* 테이블 */}
         <div className="flex-1 overflow-auto">
           {loading ? (
-            <div className="flex items-center justify-center h-32 text-fg-disabled text-sm font-korean">
+            <div className="flex items-center justify-center h-32 text-fg-disabled text-body-2 font-korean">
               불러오는 중...
             </div>
           ) : (
@@ -781,7 +781,7 @@ function UsersPanel() {
                   <tr>
                     <td
                       colSpan={9}
-                      className="px-6 py-10 text-center text-xs text-fg-disabled font-korean"
+                      className="px-6 py-10 text-center text-caption text-fg-disabled font-korean"
                     >
                       조회된 사용자가 없습니다.
                     </td>
@@ -897,7 +897,7 @@ function UsersPanel() {
                                         onChange={() => toggleRoleSelection(role.sn)}
                                         style={{ accentColor: color }}
                                       />
-                                      <span className="text-xs font-korean" style={{ color }}>
+                                      <span className="text-caption font-korean" style={{ color }}>
                                         {role.name}
                                       </span>
                                       <span className="text-caption text-fg-disabled font-mono">
diff --git a/frontend/src/tabs/admin/components/VesselMaterialsPanel.tsx b/frontend/src/tabs/admin/components/VesselMaterialsPanel.tsx
index b3630cf..1efd57b 100644
--- a/frontend/src/tabs/admin/components/VesselMaterialsPanel.tsx
+++ b/frontend/src/tabs/admin/components/VesselMaterialsPanel.tsx
@@ -90,7 +90,7 @@ function VesselMaterialsPanel() {
       <div className="flex items-center justify-between px-6 py-4 border-b border-stroke">
         <div>
           <h1 className="text-lg font-bold text-fg font-korean">방제선 보유자재 현황</h1>
-          <p className="text-xs text-fg-disabled mt-1 font-korean">
+          <p className="text-caption text-fg-disabled mt-1 font-korean">
             총 {filtered.length}개 기관 (방제선 보유)
           </p>
         </div>
@@ -98,7 +98,7 @@ function VesselMaterialsPanel() {
           <select
             value={regionFilter}
             onChange={handleFilterChange(setRegionFilter)}
-            className="px-3 py-2 text-xs bg-bg-elevated border border-stroke rounded-md text-fg focus:border-color-accent focus:outline-none font-korean"
+            className="px-3 py-2 text-caption bg-bg-elevated border border-stroke rounded-md text-fg focus:border-color-accent focus:outline-none font-korean"
           >
             <option value="전체">전체 관할청</option>
             <option value="남해">남해청</option>
@@ -110,7 +110,7 @@ function VesselMaterialsPanel() {
           <select
             value={typeFilter}
             onChange={handleFilterChange(setTypeFilter)}
-            className="px-3 py-2 text-xs bg-bg-elevated border border-stroke rounded-md text-fg focus:border-color-accent focus:outline-none font-korean"
+            className="px-3 py-2 text-caption bg-bg-elevated border border-stroke rounded-md text-fg focus:border-color-accent focus:outline-none font-korean"
           >
             <option value="전체">전체 유형</option>
             {typeOptions.map((t) => (
@@ -127,11 +127,11 @@ function VesselMaterialsPanel() {
               setSearchTerm(e.target.value);
               setCurrentPage(1);
             }}
-            className="w-56 px-3 py-2 text-xs bg-bg-elevated border border-stroke rounded-md text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none font-korean"
+            className="w-56 px-3 py-2 text-caption bg-bg-elevated border border-stroke rounded-md text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none font-korean"
           />
           <button
             onClick={load}
-            className="px-4 py-2 text-xs font-semibold rounded-md bg-bg-elevated border border-stroke text-fg-sub hover:border-color-accent hover:text-color-accent transition-all font-korean"
+            className="px-4 py-2 text-caption font-semibold rounded-md bg-bg-elevated border border-stroke text-fg-sub hover:border-color-accent hover:text-color-accent transition-all font-korean"
           >
             새로고침
           </button>
@@ -141,7 +141,7 @@ function VesselMaterialsPanel() {
       {/* 테이블 */}
       <div className="flex-1 overflow-auto">
         {loading ? (
-          <div className="flex items-center justify-center h-32 text-fg-disabled text-sm font-korean">
+          <div className="flex items-center justify-center h-32 text-fg-disabled text-body-2 font-korean">
             불러오는 중...
           </div>
         ) : (
@@ -188,7 +188,7 @@ function VesselMaterialsPanel() {
                 <tr>
                   <td
                     colSpan={11}
-                    className="px-6 py-10 text-center text-xs text-fg-disabled font-korean"
+                    className="px-6 py-10 text-center text-caption text-fg-disabled font-korean"
                   >
                     조회된 기관이 없습니다.
                   </td>
diff --git a/frontend/src/tabs/admin/components/VesselSignalPanel.tsx b/frontend/src/tabs/admin/components/VesselSignalPanel.tsx
index 886d9d3..a0d2e15 100644
--- a/frontend/src/tabs/admin/components/VesselSignalPanel.tsx
+++ b/frontend/src/tabs/admin/components/VesselSignalPanel.tsx
@@ -142,17 +142,17 @@ export default function VesselSignalPanel() {
     <div className="flex flex-col h-full overflow-hidden">
       {/* 헤더 */}
       <div className="flex items-center justify-between px-6 py-3 border-b border-stroke-1">
-        <h2 className="text-sm font-semibold text-fg">선박신호 수신 현황</h2>
+        <h2 className="text-body-2 font-semibold text-fg">선박신호 수신 현황</h2>
         <div className="flex items-center gap-3">
           <input
             type="date"
             value={date}
             onChange={(e) => setDate(e.target.value)}
-            className="px-2 py-1 text-xs rounded bg-bg-elevated border border-stroke-1 text-fg"
+            className="px-2 py-1 text-caption rounded bg-bg-elevated border border-stroke-1 text-fg"
           />
           <button
             onClick={load}
-            className="px-3 py-1 text-xs rounded bg-bg-elevated border border-stroke-1 text-fg-sub hover:bg-bg-card"
+            className="px-3 py-1 text-caption rounded bg-bg-elevated border border-stroke-1 text-fg-sub hover:bg-bg-card"
           >
             새로고침
           </button>
@@ -163,7 +163,7 @@ export default function VesselSignalPanel() {
       <div className="flex-1 overflow-y-auto px-6 py-5">
         {loading ? (
           <div className="flex items-center justify-center h-full">
-            <span className="text-xs text-fg-disabled">로딩 중...</span>
+            <span className="text-caption text-fg-disabled">로딩 중...</span>
           </div>
         ) : (
           <div className="flex gap-2">
diff --git a/frontend/src/tabs/admin/components/adminMenuConfig.ts b/frontend/src/tabs/admin/components/adminMenuConfig.ts
index d719756..643ce0f 100644
--- a/frontend/src/tabs/admin/components/adminMenuConfig.ts
+++ b/frontend/src/tabs/admin/components/adminMenuConfig.ts
@@ -15,6 +15,7 @@ export const ADMIN_MENU: AdminMenuItem[] = [
     children: [
       { id: 'menus', label: '메뉴관리' },
       { id: 'settings', label: '시스템설정' },
+      { id: 'system-arch', label: '시스템구조' },
     ],
   },
   {
@@ -91,6 +92,17 @@ export const ADMIN_MENU: AdminMenuItem[] = [
           { id: 'monitor-vessel', label: '선박위치정보' },
         ],
       },
+      {
+        id: 'rnd',
+        label: 'R&D과제',
+        children: [
+          { id: 'rnd-poseidon', label: '유출유확산예측(포세이돈)' },
+          { id: 'rnd-kosps', label: '유출유확산예측(KOSPS)' },
+          { id: 'rnd-hns-atmos', label: 'HNS대기확산(충북대)' },
+          { id: 'rnd-rescue', label: '긴급구난과제' },
+        ],
+      },
+      { id: 'deidentify', label: '비식별화조치' },
     ],
   },
 ];
diff --git a/frontend/src/tabs/aerial/components/CctvView.tsx b/frontend/src/tabs/aerial/components/CctvView.tsx
index 93ec81e..1cb1474 100644
--- a/frontend/src/tabs/aerial/components/CctvView.tsx
+++ b/frontend/src/tabs/aerial/components/CctvView.tsx
@@ -589,7 +589,7 @@ export function CctvView() {
         {/* 헤더 */}
         <div className="p-3 pb-2.5 border-b border-stroke shrink-0 bg-bg-elevated">
           <div className="flex items-center justify-between mb-2">
-            <div className="text-xs font-bold text-fg font-korean flex items-center gap-1.5">
+            <div className="text-caption font-bold text-fg font-korean flex items-center gap-1.5">
               <span
                 className="w-[7px] h-[7px] rounded-full inline-block animate-pulse"
                 style={{ background: 'var(--color-danger)' }}
@@ -776,7 +776,7 @@ export function CctvView() {
         {/* 뷰어 툴바 */}
         <div className="flex items-center justify-between px-4 py-2 border-b border-stroke bg-bg-elevated shrink-0 gap-2.5">
           <div className="flex items-center gap-2 min-w-0">
-            <div className="text-xs font-bold text-fg font-korean whitespace-nowrap overflow-hidden text-ellipsis">
+            <div className="text-caption font-bold text-fg font-korean whitespace-nowrap overflow-hidden text-ellipsis">
               {selectedCamera ? `📹 ${selectedCamera.cameraNm}` : '📹 카메라를 선택하세요'}
             </div>
             {selectedCamera?.sttsCd === 'LIVE' && (
@@ -966,7 +966,7 @@ export function CctvView() {
                   <div key={srcKey} className="mb-5">
                     {/* 출처 헤더 */}
                     <div className="flex items-center gap-2 mb-2 pb-1.5 border-b border-stroke">
-                      <span className="text-sm">{group.icon}</span>
+                      <span className="text-body-2">{group.icon}</span>
                       <span className="text-label-1 font-bold text-fg font-korean">
                         {group.label}
                       </span>
diff --git a/frontend/src/tabs/aerial/components/MediaManagement.tsx b/frontend/src/tabs/aerial/components/MediaManagement.tsx
index 1fa4469..b5f281c 100644
--- a/frontend/src/tabs/aerial/components/MediaManagement.tsx
+++ b/frontend/src/tabs/aerial/components/MediaManagement.tsx
@@ -421,7 +421,7 @@ export function MediaManagement() {
         <div className="fixed inset-0 z-[300] bg-black/60 backdrop-blur-sm flex items-center justify-center">
           <div className="bg-bg-surface border border-stroke rounded-md p-6 w-72 text-center">
             <div className="text-2xl mb-3">📥</div>
-            <div className="text-sm font-bold font-korean mb-3">다운로드 완료</div>
+            <div className="text-body-2 font-bold font-korean mb-3">다운로드 완료</div>
             <div className="text-title-4 font-korean text-fg-sub mb-1">
               총 <span className="text-color-accent font-bold">{downloadResult.total}</span>건 선택
             </div>
@@ -441,7 +441,7 @@ export function MediaManagement() {
             </div>
             <button
               onClick={() => setDownloadResult(null)}
-              className="px-6 py-2 text-sm font-semibold rounded bg-[rgba(6,182,212,0.15)] text-color-accent border border-[rgba(6,182,212,0.3)] hover:bg-[rgba(6,182,212,0.25)] transition-colors font-korean"
+              className="px-6 py-2 text-body-2 font-semibold rounded bg-[rgba(6,182,212,0.15)] text-color-accent border border-[rgba(6,182,212,0.3)] hover:bg-[rgba(6,182,212,0.25)] transition-colors font-korean"
             >
               확인
             </button>
@@ -475,7 +475,7 @@ export function MediaManagement() {
               </div>
             </div>
             <div className="mb-3">
-              <label className="block text-xs font-semibold mb-1.5 text-fg-sub font-korean">
+              <label className="block text-caption font-semibold mb-1.5 text-fg-sub font-korean">
                 촬영 장비
               </label>
               <select className="prd-i w-full">
@@ -489,7 +489,7 @@ export function MediaManagement() {
               </select>
             </div>
             <div className="mb-3">
-              <label className="block text-xs font-semibold mb-1.5 text-fg-sub font-korean">
+              <label className="block text-caption font-semibold mb-1.5 text-fg-sub font-korean">
                 연관 사고
               </label>
               <select className="prd-i w-full">
@@ -499,7 +499,7 @@ export function MediaManagement() {
               </select>
             </div>
             <div className="mb-4">
-              <label className="block text-xs font-semibold mb-1.5 text-fg-sub font-korean">
+              <label className="block text-caption font-semibold mb-1.5 text-fg-sub font-korean">
                 메모
               </label>
               <textarea
@@ -508,7 +508,7 @@ export function MediaManagement() {
               />
             </div>
             <button
-              className="w-full py-3 rounded-sm text-sm font-bold font-korean cursor-pointer hover:brightness-125 transition-all"
+              className="w-full py-3 rounded-sm text-body-2 font-bold font-korean cursor-pointer hover:brightness-125 transition-all"
               style={{
                 background: 'rgba(6,182,212,0.15)',
                 border: '1px solid rgba(6,182,212,0.3)',
diff --git a/frontend/src/tabs/aerial/components/OilAreaAnalysis.tsx b/frontend/src/tabs/aerial/components/OilAreaAnalysis.tsx
index 1d96259..6dee772 100644
--- a/frontend/src/tabs/aerial/components/OilAreaAnalysis.tsx
+++ b/frontend/src/tabs/aerial/components/OilAreaAnalysis.tsx
@@ -239,7 +239,7 @@ export function OilAreaAnalysis() {
     <div className="flex gap-5 h-full overflow-hidden">
       {/* ── Left Panel ── */}
       <div className="w-[280px] min-w-[280px] flex flex-col overflow-y-auto scrollbar-thin">
-        <div className="text-sm font-bold mb-1 font-korean">🧩 영상사진합성</div>
+        <div className="text-body-2 font-bold mb-1 font-korean">🧩 영상사진합성</div>
         <div className="text-label-2 text-fg-disabled mb-4 font-korean">
           드론 사진을 합성하여 유출유 확산 면적과 기름 양을 산정합니다.
         </div>
@@ -256,7 +256,7 @@ export function OilAreaAnalysis() {
         <button
           onClick={() => fileInputRef.current?.click()}
           disabled={selectedFiles.length >= MAX_IMAGES || isStitching || isAnalyzing}
-          className="w-full py-2 mb-3 border border-dashed border-stroke rounded-sm text-xs font-korean text-fg-sub
+          className="w-full py-2 mb-3 border border-dashed border-stroke rounded-sm text-caption font-korean text-fg-sub
                      hover:border-color-accent hover:text-color-accent transition-colors cursor-pointer
                      disabled:opacity-40 disabled:cursor-not-allowed"
         >
diff --git a/frontend/src/tabs/aerial/components/RealtimeDrone.tsx b/frontend/src/tabs/aerial/components/RealtimeDrone.tsx
index 266ce67..ac5954b 100644
--- a/frontend/src/tabs/aerial/components/RealtimeDrone.tsx
+++ b/frontend/src/tabs/aerial/components/RealtimeDrone.tsx
@@ -177,7 +177,7 @@ export function RealtimeDrone() {
         {/* 헤더 */}
         <div className="p-3 pb-2.5 border-b border-stroke shrink-0 bg-bg-elevated">
           <div className="flex items-center justify-between mb-2">
-            <div className="text-xs font-bold text-fg font-korean flex items-center gap-1.5">
+            <div className="text-caption font-bold text-fg font-korean flex items-center gap-1.5">
               <span
                 className="w-[7px] h-[7px] rounded-full inline-block"
                 style={{
@@ -225,7 +225,7 @@ export function RealtimeDrone() {
                 >
                   <div className="flex items-center justify-between mb-1.5">
                     <div className="flex items-center gap-2">
-                      <div className="text-sm">🚁</div>
+                      <div className="text-body-2">🚁</div>
                       <div>
                         <div className="text-label-2 font-normal text-fg font-korean">
                           {stream.shipName}{' '}
@@ -300,7 +300,7 @@ export function RealtimeDrone() {
         {/* 툴바 */}
         <div className="flex items-center justify-between px-4 py-2 border-b border-stroke bg-bg-elevated shrink-0 gap-2.5">
           <div className="flex items-center gap-2 min-w-0">
-            <div className="text-xs font-bold text-fg font-korean whitespace-nowrap overflow-hidden text-ellipsis">
+            <div className="text-caption font-bold text-fg font-korean whitespace-nowrap overflow-hidden text-ellipsis">
               {selectedStream ? `🚁 ${selectedStream.shipName}` : '🚁 드론 스트림을 선택하세요'}
             </div>
             {selectedStream?.status === 'streaming' && (
@@ -566,7 +566,7 @@ export function RealtimeDrone() {
                     style={{ minWidth: 170, background: 'var(--bg-card)', borderRadius: 6 }}
                   >
                     <div className="flex items-center gap-1.5 mb-1">
-                      <span className="text-sm">🚁</span>
+                      <span className="text-body-2">🚁</span>
                       <div className="text-label-2 font-bold text-fg">{mapPopup.shipName}</div>
                     </div>
                     <div className="text-caption text-fg-disabled mb-0.5">
@@ -813,7 +813,7 @@ export function RealtimeDrone() {
               ].map((item, i) => (
                 <div key={i} className="px-2 py-1.5 bg-bg-base rounded text-center">
                   <div className="text-caption text-fg-disabled font-korean">{item.label}</div>
-                  <div className="text-sm font-mono text-fg">{item.value}</div>
+                  <div className="text-body-2 font-mono text-fg">{item.value}</div>
                 </div>
               ))}
             </div>
diff --git a/frontend/src/tabs/aerial/components/SatelliteRequest.tsx b/frontend/src/tabs/aerial/components/SatelliteRequest.tsx
index 70fe175..8a16616 100644
--- a/frontend/src/tabs/aerial/components/SatelliteRequest.tsx
+++ b/frontend/src/tabs/aerial/components/SatelliteRequest.tsx
@@ -485,7 +485,7 @@ export function SatelliteRequest() {
       <div className="flex items-center gap-3 mb-2 h-9">
         <div className="flex items-center gap-2 shrink-0">
           <div
-            className="w-7 h-7 rounded-md flex items-center justify-center text-sm"
+            className="w-7 h-7 rounded-md flex items-center justify-center text-body-2"
             style={{
               background: 'rgba(6,182,212,0.15)',
               border: '1px solid rgba(6,182,212,0.3)',
@@ -624,7 +624,7 @@ export function SatelliteRequest() {
                 >
                   <div className="text-label-2 font-mono text-fg-sub">{r.id}</div>
                   <div>
-                    <div className="text-xs font-semibold text-fg font-korean">{r.zone}</div>
+                    <div className="text-caption font-semibold text-fg font-korean">{r.zone}</div>
                     <div className="text-caption text-fg-disabled font-mono mt-0.5">
                       {r.zoneCoord} · {r.zoneArea}
                     </div>
@@ -776,7 +776,9 @@ export function SatelliteRequest() {
           <div className="grid grid-cols-2 gap-3.5">
             {/* 가용 위성 현황 */}
             <div className="bg-bg-elevated border border-stroke rounded-md p-4">
-              <div className="text-xs font-bold text-fg font-korean mb-3">🛰 가용 위성 현황</div>
+              <div className="text-caption font-bold text-fg font-korean mb-3">
+                🛰 가용 위성 현황
+              </div>
               <div className="flex flex-col gap-2">
                 {satellites.map((sat, i) => (
                   <div
@@ -807,7 +809,7 @@ export function SatelliteRequest() {
 
             {/* 오늘 촬영 가능 시간 */}
             <div className="bg-bg-elevated border border-stroke rounded-md p-4">
-              <div className="text-xs font-bold text-fg font-korean mb-3">
+              <div className="text-caption font-bold text-fg font-korean mb-3">
                 ⏰ 오늘 촬영 가능 시간 (KST)
               </div>
               <div className="flex flex-col gap-1.5">
@@ -1133,7 +1135,7 @@ export function SatelliteRequest() {
                     )}
                     <button
                       onClick={() => setMapSelectedItem(null)}
-                      className="text-fg-disabled bg-transparent border-none cursor-pointer text-sm"
+                      className="text-fg-disabled bg-transparent border-none cursor-pointer text-body-2"
                     >
                       ✕
                     </button>
@@ -1213,7 +1215,7 @@ export function SatelliteRequest() {
                           </span>
                         </div>
                         <div>
-                          <div className="text-sm font-bold text-fg font-korean">BlackSky</div>
+                          <div className="text-body-2 font-bold text-fg font-korean">BlackSky</div>
                           <div className="text-caption text-fg-disabled font-korean mt-px">
                             Maxar Electro-Optical API
                           </div>
@@ -1274,7 +1276,7 @@ export function SatelliteRequest() {
                           </span>
                         </div>
                         <div>
-                          <div className="text-sm font-bold text-fg font-korean">
+                          <div className="text-body-2 font-bold text-fg font-korean">
                             UP42 — EO + SAR
                           </div>
                           <div className="text-caption text-fg-disabled font-korean mt-px">
@@ -1703,13 +1705,13 @@ export function SatelliteRequest() {
                   </div>
                   <button
                     onClick={() => setModalPhase('provider')}
-                    className="px-5 py-2.5 rounded-lg border border-stroke text-xs font-semibold cursor-pointer font-korean text-fg-sub bg-bg-elevated"
+                    className="px-5 py-2.5 rounded-lg border border-stroke text-caption font-semibold cursor-pointer font-korean text-fg-sub bg-bg-elevated"
                   >
                     ← 뒤로
                   </button>
                   <button
                     onClick={() => setModalPhase('none')}
-                    className="px-7 py-2.5 rounded-lg text-xs font-bold cursor-pointer font-korean text-color-accent"
+                    className="px-7 py-2.5 rounded-lg text-caption font-bold cursor-pointer font-korean text-color-accent"
                     style={{
                       background: 'rgba(6,182,212,0.08)',
                     }}
@@ -2098,7 +2100,7 @@ export function SatelliteRequest() {
                                 {urgency}
                               </span>
                               {up42SelPass === pass.id && (
-                                <span className="text-xs text-fg">✓</span>
+                                <span className="text-caption text-fg">✓</span>
                               )}
                             </div>
                           );
diff --git a/frontend/src/tabs/aerial/components/SensorAnalysis.tsx b/frontend/src/tabs/aerial/components/SensorAnalysis.tsx
index a6a2b26..87fb184 100644
--- a/frontend/src/tabs/aerial/components/SensorAnalysis.tsx
+++ b/frontend/src/tabs/aerial/components/SensorAnalysis.tsx
@@ -391,7 +391,7 @@ function Vessel3DModel({ viewMode, status }: { viewMode: string; status: string
       {isProcessing && (
         <div className="absolute inset-0 flex items-center justify-center">
           <div className="text-center">
-            <div className="text-color-accent/40 text-xs font-mono animate-pulse">
+            <div className="text-color-accent/40 text-caption font-mono animate-pulse">
               재구성 처리중...
             </div>
             <div className="w-24 h-0.5 bg-bg-card rounded-full mt-2 mx-auto overflow-hidden">
@@ -712,7 +712,7 @@ function Pollution3DModel({ viewMode, status }: { viewMode: string; status: stri
       {isProcessing && (
         <div className="absolute inset-0 flex items-center justify-center">
           <div className="text-center">
-            <div className="text-color-danger/40 text-xs font-mono animate-pulse">
+            <div className="text-color-danger/40 text-caption font-mono animate-pulse">
               재구성 처리중...
             </div>
             <div className="w-24 h-0.5 bg-bg-card rounded-full mt-2 mx-auto overflow-hidden">
@@ -818,7 +818,7 @@ export function SensorAnalysis() {
                   className="absolute inset-0 flex items-center justify-center"
                   style={{ background: 'var(--bg-base)' }}
                 >
-                  <div className="text-fg-disabled/10 text-xs font-mono">
+                  <div className="text-fg-disabled/10 text-caption font-mono">
                     {src.label.split(' ')[0]}
                   </div>
                 </div>
@@ -916,7 +916,7 @@ export function SensorAnalysis() {
             { value: '0.023m', label: 'RMS오차' },
           ].map((s, i) => (
             <div key={i} className="text-center">
-              <div className="font-mono font-bold text-sm text-color-accent">{s.value}</div>
+              <div className="font-mono font-bold text-body-2 text-color-accent">{s.value}</div>
               <div className="text-caption text-fg-disabled mt-0.5 font-korean">{s.label}</div>
             </div>
           ))}
diff --git a/frontend/src/tabs/aerial/components/WingAI.tsx b/frontend/src/tabs/aerial/components/WingAI.tsx
index d85b390..226e2b0 100644
--- a/frontend/src/tabs/aerial/components/WingAI.tsx
+++ b/frontend/src/tabs/aerial/components/WingAI.tsx
@@ -47,7 +47,7 @@ export function WingAI() {
       <div className="flex items-center gap-3 mb-4 h-9">
         <div className="flex items-center gap-2 shrink-0">
           <div
-            className="w-7 h-7 rounded-md flex items-center justify-center text-sm"
+            className="w-7 h-7 rounded-md flex items-center justify-center text-body-2"
             style={{
               background: 'rgba(6,182,212,0.15)',
               border: '1px solid rgba(6,182,212,0.3)',
@@ -1757,8 +1757,8 @@ function AoiPanel() {
                                         }
                                   }
                                 >
-                                  <span className="text-sm shrink-0">{active ? '◉' : '○'}</span>
-                                  <span className="text-sm shrink-0">{src.icon}</span>
+                                  <span className="text-body-2 shrink-0">{active ? '◉' : '○'}</span>
+                                  <span className="text-body-2 shrink-0">{src.icon}</span>
                                   <div className="flex-1 min-w-0">
                                     <div className="text-caption font-bold font-korean">
                                       {src.label}
diff --git a/frontend/src/tabs/assets/components/AssetManagement.tsx b/frontend/src/tabs/assets/components/AssetManagement.tsx
index 9903994..a0ec8ea 100644
--- a/frontend/src/tabs/assets/components/AssetManagement.tsx
+++ b/frontend/src/tabs/assets/components/AssetManagement.tsx
@@ -83,7 +83,9 @@ function AssetManagement() {
   if (loading) {
     return (
       <div className="flex items-center justify-center h-full">
-        <div className="text-fg-disabled text-sm font-korean">방제자산 데이터를 불러오는 중...</div>
+        <div className="text-fg-disabled text-body-2 font-korean">
+          방제자산 데이터를 불러오는 중...
+        </div>
       </div>
     );
   }
@@ -415,7 +417,7 @@ function AssetManagement() {
             <aside className="w-[340px] min-w-[340px] bg-bg-surface border-l border-stroke flex flex-col">
               {/* Header */}
               <div className="p-4 border-b border-stroke">
-                <div className="text-sm font-bold mb-1 font-korean">{selectedOrg.name}</div>
+                <div className="text-body-2 font-bold mb-1 font-korean">{selectedOrg.name}</div>
                 <div className="text-label-2 text-fg-sub font-semibold font-korean mb-1">
                   {selectedOrg.type} · {regionShort(selectedOrg.jurisdiction)} · {selectedOrg.area}
                 </div>
@@ -505,7 +507,7 @@ function AssetManagement() {
                         );
                       })
                     ) : (
-                      <div className="text-center text-fg-disabled text-xs py-8 font-korean">
+                      <div className="text-center text-fg-disabled text-caption py-8 font-korean">
                         상세 장비 데이터가 없습니다.
                       </div>
                     )}
@@ -601,10 +603,10 @@ function AssetManagement() {
 
               {/* Bottom Actions */}
               {/* <div className="p-3.5 border-t border-stroke flex gap-2">
-                <button className="flex-1 py-2.5 rounded-sm text-xs font-semibold font-korean text-white bg-color-accent border-none cursor-pointer hover:opacity-90 transition-opacity">
+                <button className="flex-1 py-2.5 rounded-sm text-caption font-semibold font-korean text-white bg-color-accent border-none cursor-pointer hover:opacity-90 transition-opacity">
                   📥 다운로드
                 </button>
-                <button className="flex-1 py-2.5 rounded-sm text-xs font-semibold font-korean bg-bg-card border border-stroke text-fg-sub cursor-pointer hover:bg-bg-surface-hover transition-colors">
+                <button className="flex-1 py-2.5 rounded-sm text-caption font-semibold font-korean bg-bg-card border border-stroke text-fg-sub cursor-pointer hover:bg-bg-surface-hover transition-colors">
                   ✏ 수정
                 </button>
               </div> */}
diff --git a/frontend/src/tabs/assets/components/AssetUpload.tsx b/frontend/src/tabs/assets/components/AssetUpload.tsx
index f1586c4..30d09e8 100644
--- a/frontend/src/tabs/assets/components/AssetUpload.tsx
+++ b/frontend/src/tabs/assets/components/AssetUpload.tsx
@@ -27,7 +27,7 @@ function AssetUpload() {
         {/* Drop Zone */}
         <div className="border-2 border-dashed border-stroke-light rounded-md py-10 px-5 text-center mb-5 cursor-pointer hover:border-[rgba(6,182,212,0.4)] transition-colors">
           <div className="text-4xl mb-2.5 opacity-50">📁</div>
-          <div className="text-sm font-semibold mb-1.5 font-korean">
+          <div className="text-body-2 font-semibold mb-1.5 font-korean">
             파일을 드래그하거나 클릭하여 업로드
           </div>
           <div className="text-label-2 text-fg-disabled mb-4 font-korean">
@@ -43,7 +43,7 @@ function AssetUpload() {
 
         {/* Asset Classification */}
         <div className="mb-4">
-          <label className="block text-xs font-semibold mb-1.5 text-fg-sub font-korean">
+          <label className="block text-caption font-semibold mb-1.5 text-fg-sub font-korean">
             자산 분류
           </label>
           <select className="prd-i w-full">
@@ -58,7 +58,7 @@ function AssetUpload() {
 
         {/* Jurisdiction */}
         <div className="mb-4">
-          <label className="block text-xs font-semibold mb-1.5 text-fg-sub font-korean">
+          <label className="block text-caption font-semibold mb-1.5 text-fg-sub font-korean">
             업로드 대상 관할
           </label>
           <select className="prd-i w-full">
@@ -74,10 +74,10 @@ function AssetUpload() {
 
         {/* Upload Mode */}
         <div className="mb-5">
-          <label className="block text-xs font-semibold mb-1.5 text-fg-sub font-korean">
+          <label className="block text-caption font-semibold mb-1.5 text-fg-sub font-korean">
             업로드 방식
           </label>
-          <div className="flex gap-4 text-xs text-fg-sub font-korean">
+          <div className="flex gap-4 text-caption text-fg-sub font-korean">
             <label className="flex items-center gap-1.5 cursor-pointer">
               <input
                 type="radio"
@@ -102,7 +102,7 @@ function AssetUpload() {
         {/* Upload Button */}
         <button
           onClick={handleUpload}
-          className={`w-full py-3.5 rounded-sm text-sm font-bold font-korean border-none cursor-pointer transition-all ${
+          className={`w-full py-3.5 rounded-sm text-body-2 font-bold font-korean border-none cursor-pointer transition-all ${
             uploaded
               ? 'bg-[rgba(34,197,94,0.2)] text-color-success border border-status-green'
               : 'text-white'
@@ -163,7 +163,7 @@ function AssetUpload() {
                 {p.icon}
               </div>
               <div>
-                <div className={`text-xs font-bold font-korean ${p.color}`}>{p.role}</div>
+                <div className={`text-caption font-bold font-korean ${p.color}`}>{p.role}</div>
                 <div className="text-caption text-fg-disabled font-korean">{p.desc}</div>
               </div>
             </div>
@@ -179,7 +179,7 @@ function AssetUpload() {
               className="flex justify-between items-center p-3.5 px-4 bg-bg-card border border-stroke rounded-sm"
             >
               <div>
-                <div className="text-xs font-semibold font-korean">{h.fileNm}</div>
+                <div className="text-caption font-semibold font-korean">{h.fileNm}</div>
                 <div className="text-caption text-fg-disabled mt-0.5 font-korean">
                   {new Date(h.regDtm).toLocaleString('ko-KR')} · {h.uploaderNm} · {h.uploadCnt}건
                 </div>
diff --git a/frontend/src/tabs/assets/components/AssetsView.tsx b/frontend/src/tabs/assets/components/AssetsView.tsx
index 262a41c..35fce25 100755
--- a/frontend/src/tabs/assets/components/AssetsView.tsx
+++ b/frontend/src/tabs/assets/components/AssetsView.tsx
@@ -27,10 +27,8 @@ export function AssetsView() {
             <button
               key={tab.id}
               onClick={() => setActiveTab(tab.id)}
-              className={`px-5 py-3.5 text-xs font-semibold transition-all font-korean border-b-2 ${
-                activeTab === tab.id
-                  ? 'text-color-accent border-color-accent'
-                  : 'text-fg-disabled border-transparent hover:text-fg-sub'
+              className={`px-4 py-2.5 text-title-4 font-medium transition-all duration-200 font-korean tracking-navigation ${
+                activeTab === tab.id ? 'text-color-accent' : 'text-fg-sub hover:text-fg'
               }`}
             >
               {tab.label}
diff --git a/frontend/src/tabs/assets/components/ShipInsurance.tsx b/frontend/src/tabs/assets/components/ShipInsurance.tsx
index bfac8f1..d10f484 100644
--- a/frontend/src/tabs/assets/components/ShipInsurance.tsx
+++ b/frontend/src/tabs/assets/components/ShipInsurance.tsx
@@ -167,7 +167,7 @@ function ShipInsurance() {
               {total > 0 ? `${total.toLocaleString()}건` : '데이터 없음'}
             </div>
           </div>
-          <div className="text-xs text-fg-disabled">
+          <div className="text-caption text-fg-disabled">
             해양수산부 해운항만물류정보 공공데이터 기반
           </div>
         </div>
@@ -200,7 +200,7 @@ function ShipInsurance() {
               onChange={(e) => setSearch(e.target.value)}
               onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
               placeholder="선박명, 호출부호, IMO, 선주명"
-              className="w-full px-3.5 py-2 bg-bg-base border border-stroke rounded-sm text-xs outline-none box-border"
+              className="w-full px-3.5 py-2 bg-bg-base border border-stroke rounded-sm text-caption outline-none box-border"
             />
           </div>
           <div>
@@ -243,20 +243,20 @@ function ShipInsurance() {
           </div>
           <button
             onClick={handleSearch}
-            className="px-4 py-2 bg-bg-base text-fg border border-stroke rounded-sm text-xs cursor-pointer"
+            className="px-4 py-2 bg-bg-base text-fg border border-stroke rounded-sm text-caption cursor-pointer"
           >
             조회
           </button>
           <button
             onClick={handleReset}
-            className="px-4 py-2 bg-bg-base text-fg border border-stroke rounded-sm text-xs cursor-pointer"
+            className="px-4 py-2 bg-bg-base text-fg border border-stroke rounded-sm text-caption cursor-pointer"
           >
             초기화
           </button>
           <button
             onClick={handleDownload}
             disabled={total === 0}
-            className="px-4 py-2 text-xs cursor-pointer rounded-sm disabled:opacity-30 disabled:cursor-default bg-bg-base border border-stroke"
+            className="px-4 py-2 text-caption cursor-pointer rounded-sm disabled:opacity-30 disabled:cursor-default bg-bg-base border border-stroke"
           >
             엑셀 다운로드
           </button>
@@ -281,8 +281,8 @@ function ShipInsurance() {
       {/* 에러 */}
       {error && !isLoading && (
         <div className="flex flex-col items-center justify-center py-16 px-5 bg-bg-card border border-stroke rounded-md">
-          <div className="text-sm font-bold text-color-danger mb-2">조회 실패</div>
-          <div className="text-xs text-fg-disabled">{error}</div>
+          <div className="text-body-2 font-bold text-color-danger mb-2">조회 실패</div>
+          <div className="text-caption text-fg-disabled">{error}</div>
         </div>
       )}
 
@@ -291,7 +291,7 @@ function ShipInsurance() {
         <>
           <div className="border border-stroke rounded-md overflow-hidden mb-3">
             <div className="flex items-center justify-between px-4 py-3 border-b border-stroke">
-              <div className="text-xs font-bold">
+              <div className="text-caption font-bold">
                 조회 결과 <span className="text-color-accent">{total.toLocaleString()}</span>건
                 {totalPages > 1 && (
                   <span className="text-fg-disabled font-normal ml-2">
diff --git a/frontend/src/tabs/hns/components/HNSLeftPanel.tsx b/frontend/src/tabs/hns/components/HNSLeftPanel.tsx
index 97d3094..ed939ac 100755
--- a/frontend/src/tabs/hns/components/HNSLeftPanel.tsx
+++ b/frontend/src/tabs/hns/components/HNSLeftPanel.tsx
@@ -219,7 +219,7 @@ export function HNSLeftPanel({
   };
 
   return (
-    <div className="w-80 min-w-[320px] flex flex-col h-full bg-bg-surface border-r border-stroke overflow-hidden">
+    <div className="w-full min-w-0 flex flex-col h-full bg-bg-surface border-r border-stroke overflow-hidden">
       {/* Scrollable Content */}
       <div
         className="flex-1 overflow-y-scroll scrollbar-thin scrollbar-thumb-border-light scrollbar-track-transparent bg-bg-base"
@@ -799,15 +799,15 @@ export function HNSLeftPanel({
               <div className="flex flex-col gap-2">
                 <div className="flex justify-between items-center p-2 bg-bg-base rounded">
                   <span className="text-label-2 text-fg-disabled">전체 분석</span>
-                  <span className="text-sm font-bold text-color-accent font-mono">8건</span>
+                  <span className="text-body-2 font-bold text-color-accent font-mono">8건</span>
                 </div>
                 <div className="flex justify-between items-center p-2 bg-bg-base rounded">
                   <span className="text-label-2 text-fg-disabled">고위험 (AEGL-3)</span>
-                  <span className="text-sm font-bold text-color-caution font-mono">3건</span>
+                  <span className="text-body-2 font-bold text-color-caution font-mono">3건</span>
                 </div>
                 <div className="flex justify-between items-center p-2 bg-bg-base rounded">
                   <span className="text-label-2 text-fg-disabled">중위험 (AEGL-2)</span>
-                  <span className="text-sm font-bold text-color-accent font-mono">5건</span>
+                  <span className="text-body-2 font-bold text-color-accent font-mono">5건</span>
                 </div>
               </div>
             </div>
diff --git a/frontend/src/tabs/hns/components/HNSRightPanel.tsx b/frontend/src/tabs/hns/components/HNSRightPanel.tsx
index 026572d..df6ccd5 100755
--- a/frontend/src/tabs/hns/components/HNSRightPanel.tsx
+++ b/frontend/src/tabs/hns/components/HNSRightPanel.tsx
@@ -35,8 +35,8 @@ export function HNSRightPanel({
 }: HNSRightPanelProps) {
   if (!dispersionResult) {
     return (
-      <div className="w-[300px] bg-bg-surface border-l border-stroke p-4 overflow-auto">
-        <div className="flex flex-col gap-3 items-center justify-center h-full text-fg-disabled text-label-1">
+      <div className="w-full h-full bg-bg-surface border-l border-stroke p-4 overflow-auto flex items-center justify-center">
+        <div className="flex flex-col gap-3 items-center text-fg-disabled text-label-1">
           <div style={{ fontSize: '32px', opacity: 0.3 }}>📊</div>
           <div>예측 실행 후 결과가 표시됩니다</div>
         </div>
@@ -58,7 +58,7 @@ export function HNSRightPanel({
           : 'ALOHA';
 
   return (
-    <div className="w-[300px] bg-bg-surface border-l border-stroke p-4 overflow-auto flex flex-col gap-4">
+    <div className="w-full bg-bg-surface border-l border-stroke p-4 overflow-auto flex flex-col gap-4">
       {/* Header */}
       <div>
         <div className="flex items-center gap-1.5 mb-2">
diff --git a/frontend/src/tabs/hns/components/HNSSubstanceView.tsx b/frontend/src/tabs/hns/components/HNSSubstanceView.tsx
index 428084b..8106060 100755
--- a/frontend/src/tabs/hns/components/HNSSubstanceView.tsx
+++ b/frontend/src/tabs/hns/components/HNSSubstanceView.tsx
@@ -792,7 +792,7 @@ ${styles}
                 <div className="rounded-[10px] p-[14px] border border-stroke bg-bg-card">
                   <div className="flex items-center justify-between mb-[10px]">
                     <div>
-                      <span className="text-sm font-mono font-extrabold text-color-accent">
+                      <span className="text-body-2 font-mono font-extrabold text-color-accent">
                         NH₃
                       </span>{' '}
                       <span className="text-label-1 font-bold">암모니아</span>
@@ -891,7 +891,7 @@ ${styles}
                 <div className="rounded-[10px] p-[14px] border border-stroke bg-bg-card">
                   <div className="flex items-center justify-between mb-[10px]">
                     <div>
-                      <span className="text-sm font-mono font-extrabold text-color-accent">
+                      <span className="text-body-2 font-mono font-extrabold text-color-accent">
                         CH₃OH
                       </span>{' '}
                       <span className="text-label-1 font-bold">메탄올</span>
@@ -990,7 +990,9 @@ ${styles}
                 <div className="rounded-[10px] p-[14px] border border-stroke bg-bg-card">
                   <div className="flex items-center justify-between mb-[10px]">
                     <div>
-                      <span className="text-sm font-mono font-extrabold text-color-accent">H₂</span>{' '}
+                      <span className="text-body-2 font-mono font-extrabold text-color-accent">
+                        H₂
+                      </span>{' '}
                       <span className="text-label-1 font-bold">수소</span>
                     </div>
                     <div className="flex gap-1">
@@ -1048,7 +1050,7 @@ ${styles}
                 <div className="rounded-[10px] p-[14px] border border-stroke bg-bg-card">
                   <div className="flex items-center justify-between mb-[10px]">
                     <div>
-                      <span className="text-sm font-mono font-extrabold text-color-accent">
+                      <span className="text-body-2 font-mono font-extrabold text-color-accent">
                         CH₄
                       </span>{' '}
                       <span className="text-label-1 font-bold">LNG (메탄)</span>
@@ -1106,7 +1108,7 @@ ${styles}
                 <div className="rounded-[10px] p-[14px] border border-stroke bg-bg-card">
                   <div className="flex items-center justify-between mb-[10px]">
                     <div>
-                      <span className="text-sm font-mono font-extrabold text-color-accent">
+                      <span className="text-body-2 font-mono font-extrabold text-color-accent">
                         C₆H₅OH
                       </span>{' '}
                       <span className="text-label-1 font-bold">페놀</span>
@@ -1164,7 +1166,7 @@ ${styles}
                 <div className="rounded-[10px] p-[14px] border border-stroke bg-bg-card">
                   <div className="flex items-center justify-between mb-[10px]">
                     <div>
-                      <span className="text-sm font-mono font-extrabold text-color-accent">
+                      <span className="text-body-2 font-mono font-extrabold text-color-accent">
                         C₇H₈
                       </span>{' '}
                       <span className="text-label-1 font-bold">톨루엔</span>
diff --git a/frontend/src/tabs/hns/components/HNSView.tsx b/frontend/src/tabs/hns/components/HNSView.tsx
index bfe59fb..4a49115 100755
--- a/frontend/src/tabs/hns/components/HNSView.tsx
+++ b/frontend/src/tabs/hns/components/HNSView.tsx
@@ -262,6 +262,8 @@ function DispersionTimeSlider({
 export function HNSView() {
   const { activeSubTab, setActiveSubTab } = useSubMenu('hns');
   const { user } = useAuthStore();
+  const [leftCollapsed, setLeftCollapsed] = useState(false);
+  const [rightCollapsed, setRightCollapsed] = useState(false);
   const [incidentCoord, setIncidentCoord] = useState<{ lon: number; lat: number } | null>(null);
   const [isSelectingLocation, setIsSelectingLocation] = useState(false);
   const [isRunningPrediction, setIsRunningPrediction] = useState(false);
@@ -890,22 +892,66 @@ export function HNSView() {
     <div className="flex flex-1 overflow-hidden">
       {/* Left Panel - 분석 목록일 때는 숨김 */}
       {activeSubTab === 'analysis' && (
-        <HNSLeftPanel
-          activeSubTab={activeSubTab}
-          onSubTabChange={setActiveSubTab}
-          incidentCoord={incidentCoord}
-          onCoordChange={setIncidentCoord}
-          onMapSelectClick={() => setIsSelectingLocation(true)}
-          onRunPrediction={handleRunPrediction}
-          isRunningPrediction={isRunningPrediction}
-          onParamsChange={handleParamsChange}
-          onReset={handleReset}
-          loadedParams={loadedParams}
-        />
+        <div className="shrink-0 overflow-hidden" style={{ width: leftCollapsed ? 0 : 320 }}>
+          <HNSLeftPanel
+            activeSubTab={activeSubTab}
+            onSubTabChange={setActiveSubTab}
+            incidentCoord={incidentCoord}
+            onCoordChange={setIncidentCoord}
+            onMapSelectClick={() => setIsSelectingLocation(true)}
+            onRunPrediction={handleRunPrediction}
+            isRunningPrediction={isRunningPrediction}
+            onParamsChange={handleParamsChange}
+            onReset={handleReset}
+            loadedParams={loadedParams}
+          />
+        </div>
       )}
 
       {/* Center - Map/Content Area */}
       <div className="flex-1 relative overflow-hidden">
+        {/* Left panel toggle button */}
+        {activeSubTab === 'analysis' && (
+          <button
+            onClick={() => setLeftCollapsed((v) => !v)}
+            className="absolute z-[500] top-1/2 -translate-y-1/2 flex items-center justify-center text-[10px]"
+            style={{
+              left: 0,
+              width: 18,
+              height: 40,
+              background: 'var(--bg-elevated)',
+              border: '1px solid var(--stroke-default)',
+              borderLeft: 'none',
+              borderRadius: '0 6px 6px 0',
+              color: 'var(--fg-sub)',
+              cursor: 'pointer',
+            }}
+          >
+            {leftCollapsed ? '▶' : '◀'}
+          </button>
+        )}
+
+        {/* Right panel toggle button */}
+        {activeSubTab === 'analysis' && (
+          <button
+            onClick={() => setRightCollapsed((v) => !v)}
+            className="absolute z-[500] top-1/2 -translate-y-1/2 flex items-center justify-center text-[10px]"
+            style={{
+              right: 0,
+              width: 18,
+              height: 40,
+              background: 'var(--bg-elevated)',
+              border: '1px solid var(--stroke-default)',
+              borderRight: 'none',
+              borderRadius: '6px 0 0 6px',
+              color: 'var(--fg-sub)',
+              cursor: 'pointer',
+            }}
+          >
+            {rightCollapsed ? '◀' : '▶'}
+          </button>
+        )}
+
         {activeSubTab === 'list' ? (
           <HNSAnalysisListTable
             onTabChange={(v) =>
@@ -942,14 +988,16 @@ export function HNSView() {
 
       {/* Right Panel - 분석 목록일 때는 숨김 */}
       {activeSubTab === 'analysis' && (
-        <HNSRightPanel
-          dispersionResult={dispersionResult}
-          computedResult={computedResult}
-          weatherData={inputParams?.weather ?? null}
-          onOpenRecalc={() => setRecalcModalOpen(true)}
-          onOpenReport={handleOpenReport}
-          onSave={handleSave}
-        />
+        <div className="shrink-0 overflow-hidden" style={{ width: rightCollapsed ? 0 : 300 }}>
+          <HNSRightPanel
+            dispersionResult={dispersionResult}
+            computedResult={computedResult}
+            weatherData={inputParams?.weather ?? null}
+            onOpenRecalc={() => setRecalcModalOpen(true)}
+            onOpenReport={handleOpenReport}
+            onSave={handleSave}
+          />
+        </div>
       )}
 
       {/* HNS 재계산 모달 */}
diff --git a/frontend/src/tabs/incidents/components/DischargeZonePanel.tsx b/frontend/src/tabs/incidents/components/DischargeZonePanel.tsx
index d47f56a..6afccdd 100644
--- a/frontend/src/tabs/incidents/components/DischargeZonePanel.tsx
+++ b/frontend/src/tabs/incidents/components/DischargeZonePanel.tsx
@@ -1,4 +1,7 @@
 import { useState } from 'react';
+import { DndContext } from '@dnd-kit/core';
+import { useDraggable } from '@dnd-kit/core';
+import type { DragEndEvent } from '@dnd-kit/core';
 
 /**
  * 해양환경관리법 제22조 기반 선박 발생 오염물 배출 규정
@@ -100,33 +103,30 @@ const RULES: DischargeRule[] = [
 ];
 
 const ZONE_LABELS = ['~3해리', '3~12해리', '12~25해리', '25~50해리', '50해리+'];
-const ZONE_COLORS = ['#ef4444', '#f97316', '#eab308', '#22c55e', '#64748b'];
+const ZONE_COLORS = [
+  'var(--color-danger)',
+  'var(--color-warning)',
+  'var(--color-caution)',
+  'var(--color-success)',
+  'var(--fg-disabled)',
+];
 
 function StatusBadge({ status }: { status: Status }) {
   if (status === 'forbidden')
     return (
       <span
-        className="text-caption font-bold px-1.5 py-0.5 rounded"
-        style={{ background: 'rgba(239,68,68,0.15)', color: 'var(--color-danger)' }}
+        className="text-caption px-1.5 py-0.5 rounded"
+        style={{
+          background: 'color-mix(in srgb, var(--color-danger) 15%, transparent)',
+          color: 'var(--color-danger)',
+        }}
       >
         배출불가
       </span>
     );
-  if (status === 'allowed')
-    return (
-      <span
-        className="text-caption font-bold px-1.5 py-0.5 rounded"
-        style={{ background: 'rgba(34,197,94,0.15)', color: 'var(--color-success)' }}
-      >
-        배출가능
-      </span>
-    );
   return (
-    <span
-      className="text-caption font-bold px-1.5 py-0.5 rounded"
-      style={{ background: 'rgba(234,179,8,0.15)', color: 'var(--color-caution)' }}
-    >
-      조건부
+    <span className="text-caption px-1.5 py-0.5 rounded text-fg-sub">
+      {status === 'allowed' ? '배출가능' : '조건부'}
     </span>
   );
 }
@@ -139,15 +139,36 @@ interface DischargeZonePanelProps {
   onClose: () => void;
 }
 
-export function DischargeZonePanel({
+export function DischargeZonePanel(props: DischargeZonePanelProps) {
+  const [offset, setOffset] = useState({ x: 0, y: 0 });
+
+  function handleDragEnd(event: DragEndEvent) {
+    setOffset((prev) => ({ x: prev.x + event.delta.x, y: prev.y + event.delta.y }));
+  }
+
+  return (
+    <DndContext onDragEnd={handleDragEnd}>
+      <DraggablePanel {...props} offset={offset} />
+    </DndContext>
+  );
+}
+
+function DraggablePanel({
   lat,
   lon,
   distanceNm,
   zoneIndex,
   onClose,
-}: DischargeZonePanelProps) {
+  offset,
+}: DischargeZonePanelProps & { offset: { x: number; y: number } }) {
   const zoneIdx = zoneIndex;
   const [expandedCat, setExpandedCat] = useState<string | null>(null);
+  const { attributes, listeners, setNodeRef, transform } = useDraggable({
+    id: 'discharge-panel',
+  });
+
+  const tx = offset.x + (transform?.x ?? 0);
+  const ty = offset.y + (transform?.y ?? 0);
 
   const categories = [...new Set(RULES.map((r) => r.category))];
 
@@ -161,22 +182,33 @@ export function DischargeZonePanel({
         border: '1px solid var(--stroke-default)',
         boxShadow: '0 16px 48px rgba(0,0,0,0.5)',
         backdropFilter: 'blur(12px)',
+        transform: `translate(${tx}px, ${ty}px)`,
       }}
     >
-      {/* Header */}
+      {/* Header — drag handle */}
       <div
+        ref={setNodeRef}
+        {...listeners}
+        {...attributes}
         className="shrink-0 flex items-center justify-between"
         style={{
           padding: '10px 14px',
           borderBottom: '1px solid var(--stroke-default)',
           background: 'var(--bg-elevated)',
+          cursor: 'grab',
+          userSelect: 'none',
         }}
       >
         <div>
-          <div className="text-label-2 font-bold text-fg font-korean">🚢 오염물 배출 규정</div>
+          <div className="text-label-2 text-fg font-korean">🚢 오염물 배출 규정</div>
           <div className="text-caption text-fg-sub font-korean">해양환경관리법 제22조</div>
         </div>
-        <span onClick={onClose} className="text-title-3 cursor-pointer text-fg-sub hover:text-fg">
+        <span
+          onClick={onClose}
+          onPointerDown={(e) => e.stopPropagation()}
+          className="text-title-3 cursor-pointer text-fg-sub hover:text-fg"
+          style={{ pointerEvents: 'all' }}
+        >
           ✕
         </span>
       </div>
@@ -194,10 +226,7 @@ export function DischargeZonePanel({
         </div>
         <div className="flex items-center justify-between mb-2">
           <span className="text-caption text-fg-sub font-korean">영해기선 거리</span>
-          <span
-            className="text-label-2 font-bold font-mono"
-            style={{ color: ZONE_COLORS[zoneIdx] }}
-          >
+          <span className="text-label-2 font-mono" style={{ color: ZONE_COLORS[zoneIdx] }}>
             {distanceNm.toFixed(1)} NM
           </span>
         </div>
@@ -206,12 +235,10 @@ export function DischargeZonePanel({
           {ZONE_LABELS.map((label, i) => (
             <div
               key={label}
-              className="flex-1 text-center rounded-sm"
+              className="flex-1 text-center rounded-sm text-[10px]"
               style={{
-                padding: '3px 0',
-                fontSize: 8,
-                fontWeight: i === zoneIdx ? 700 : 400,
-                color: i === zoneIdx ? 'var(--fg-default)' : 'var(--fg-sub)',
+                padding: '2px 0',
+                color: i === zoneIdx ? '#000' : 'var(--fg-sub)',
                 background: i === zoneIdx ? ZONE_COLORS[i] : 'var(--hover-overlay)',
                 border: i === zoneIdx ? 'none' : '1px solid var(--stroke-light)',
               }}
@@ -231,8 +258,7 @@ export function DischargeZonePanel({
           const catRules = RULES.filter((r) => r.category === cat);
           const isExpanded = expandedCat === cat;
           const allForbidden = catRules.every((r) => r.zones[zoneIdx] === 'forbidden');
-          const allAllowed = catRules.every((r) => r.zones[zoneIdx] === 'allowed');
-          const summaryColor = allForbidden ? '#ef4444' : allAllowed ? '#22c55e' : '#eab308';
+          const summaryColor = allForbidden ? 'var(--color-danger)' : 'var(--fg-sub)';
 
           return (
             <div key={cat} style={{ borderBottom: '1px solid var(--stroke-light)' }}>
@@ -245,11 +271,11 @@ export function DischargeZonePanel({
                   <div
                     style={{ width: 6, height: 6, borderRadius: '50%', background: summaryColor }}
                   />
-                  <span className="text-caption font-bold text-fg font-korean">{cat}</span>
+                  <span className="text-caption text-fg font-korean">{cat}</span>
                 </div>
                 <div className="flex items-center gap-2">
-                  <span className="text-caption font-semibold" style={{ color: summaryColor }}>
-                    {allForbidden ? '전체 불가' : allAllowed ? '전체 가능' : '항목별 상이'}
+                  <span className="text-caption" style={{ color: summaryColor }}>
+                    {allForbidden ? '전체 불가' : '허용'}
                   </span>
                   <span className="text-caption text-fg-sub">{isExpanded ? '▾' : '▸'}</span>
                 </div>
@@ -268,7 +294,7 @@ export function DischargeZonePanel({
                         borderRadius: 4,
                       }}
                     >
-                      <span className="text-caption text-fg font-korean">{rule.item}</span>
+                      <span className="text-caption text-fg-sub font-korean">{rule.item}</span>
                       <StatusBadge status={rule.zones[zoneIdx]} />
                     </div>
                   ))}
diff --git a/frontend/src/tabs/incidents/components/IncidentTable.tsx b/frontend/src/tabs/incidents/components/IncidentTable.tsx
index 8d5119c..aa7e603 100755
--- a/frontend/src/tabs/incidents/components/IncidentTable.tsx
+++ b/frontend/src/tabs/incidents/components/IncidentTable.tsx
@@ -23,10 +23,10 @@ export function IncidentTable() {
       <div className="flex items-center justify-between px-5 py-4 border-b border-stroke">
         <div>
           <h1 className="text-xl font-bold text-fg">유출유 확산 예측 목록</h1>
-          <p className="text-sm text-fg-disabled mt-1">총 {filteredIncidents.length}건</p>
+          <p className="text-body-2 text-fg-disabled mt-1">총 {filteredIncidents.length}건</p>
         </div>
         <div className="flex items-center gap-3">
-          <button className="px-4 py-2 text-sm font-semibold border border-stroke rounded-md bg-bg-card text-fg-sub hover:bg-bg-surface-hover hover:text-fg transition-all">
+          <button className="px-4 py-2 text-body-2 font-semibold border border-stroke rounded-md bg-bg-card text-fg-sub hover:bg-bg-surface-hover hover:text-fg transition-all">
             시간별 검색
           </button>
           <div className="relative">
@@ -35,10 +35,10 @@ export function IncidentTable() {
               placeholder="검색..."
               value={searchTerm}
               onChange={(e) => setSearchTerm(e.target.value)}
-              className="w-64 px-4 py-2 text-sm bg-bg-elevated border border-stroke rounded-md text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none"
+              className="w-64 px-4 py-2 text-body-2 bg-bg-elevated border border-stroke rounded-md text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none"
             />
           </div>
-          <button className="px-4 py-2 text-sm font-semibold rounded-md bg-color-accent text-bg-0 hover:shadow-[0_0_16px_rgba(6,182,212,0.3)] transition-all">
+          <button className="px-4 py-2 text-body-2 font-semibold rounded-md bg-color-accent text-bg-0 hover:shadow-[0_0_16px_rgba(6,182,212,0.3)] transition-all">
             + 새 분석
           </button>
         </div>
@@ -49,31 +49,31 @@ export function IncidentTable() {
         <table className="w-full">
           <thead className="sticky top-0 bg-bg-surface border-b border-stroke z-10">
             <tr>
-              <th className="px-4 py-3 text-left text-xs font-bold text-fg-disabled uppercase tracking-wider">
+              <th className="px-4 py-3 text-left text-caption font-bold text-fg-disabled uppercase tracking-wider">
                 번호
               </th>
-              <th className="px-4 py-3 text-left text-xs font-bold text-fg-disabled uppercase tracking-wider">
+              <th className="px-4 py-3 text-left text-caption font-bold text-fg-disabled uppercase tracking-wider">
                 사고명
               </th>
-              <th className="px-4 py-3 text-left text-xs font-bold text-fg-disabled uppercase tracking-wider">
+              <th className="px-4 py-3 text-left text-caption font-bold text-fg-disabled uppercase tracking-wider">
                 사고시각
               </th>
-              <th className="px-4 py-3 text-left text-xs font-bold text-fg-disabled uppercase tracking-wider">
+              <th className="px-4 py-3 text-left text-caption font-bold text-fg-disabled uppercase tracking-wider">
                 선박유형
               </th>
-              <th className="px-4 py-3 text-left text-xs font-bold text-fg-disabled uppercase tracking-wider">
+              <th className="px-4 py-3 text-left text-caption font-bold text-fg-disabled uppercase tracking-wider">
                 유종
               </th>
-              <th className="px-4 py-3 text-right text-xs font-bold text-fg-disabled uppercase tracking-wider">
+              <th className="px-4 py-3 text-right text-caption font-bold text-fg-disabled uppercase tracking-wider">
                 유출량
               </th>
-              <th className="px-4 py-3 text-left text-xs font-bold text-fg-disabled uppercase tracking-wider">
+              <th className="px-4 py-3 text-left text-caption font-bold text-fg-disabled uppercase tracking-wider">
                 사고유형
               </th>
-              <th className="px-4 py-3 text-left text-xs font-bold text-fg-disabled uppercase tracking-wider">
+              <th className="px-4 py-3 text-left text-caption font-bold text-fg-disabled uppercase tracking-wider">
                 상태
               </th>
-              <th className="px-4 py-3 text-left text-xs font-bold text-fg-disabled uppercase tracking-wider">
+              <th className="px-4 py-3 text-left text-caption font-bold text-fg-disabled uppercase tracking-wider">
                 분석자
               </th>
             </tr>
@@ -84,28 +84,28 @@ export function IncidentTable() {
                 key={incident.acdntSn}
                 className="hover:bg-bg-elevated transition-colors cursor-pointer group"
               >
-                <td className="px-4 py-3 text-sm text-fg-sub font-mono">{incident.acdntSn}</td>
+                <td className="px-4 py-3 text-body-2 text-fg-sub font-mono">{incident.acdntSn}</td>
                 <td className="px-4 py-3">
                   <div className="flex items-center gap-2">
                     <span className="w-2 h-2 rounded-full bg-color-danger animate-pulse" />
-                    <span className="text-sm font-semibold text-fg group-hover:text-color-accent transition-colors">
+                    <span className="text-body-2 font-semibold text-fg group-hover:text-color-accent transition-colors">
                       {incident.acdntNm}
                     </span>
                   </div>
                 </td>
-                <td className="px-4 py-3 text-sm text-fg-sub font-mono">{incident.occrnDtm}</td>
-                <td className="px-4 py-3 text-sm text-fg-sub">{incident.vesselTp ?? '—'}</td>
-                <td className="px-4 py-3 text-sm text-fg-sub">{incident.oilTpCd ?? '—'}</td>
-                <td className="px-4 py-3 text-sm text-fg font-mono text-right font-semibold">
+                <td className="px-4 py-3 text-body-2 text-fg-sub font-mono">{incident.occrnDtm}</td>
+                <td className="px-4 py-3 text-body-2 text-fg-sub">{incident.vesselTp ?? '—'}</td>
+                <td className="px-4 py-3 text-body-2 text-fg-sub">{incident.oilTpCd ?? '—'}</td>
+                <td className="px-4 py-3 text-body-2 text-fg font-mono text-right font-semibold">
                   {incident.spilQty != null ? incident.spilQty.toFixed(2) : '—'}
                 </td>
-                <td className="px-4 py-3 text-sm text-fg-sub">{incident.acdntTpCd}</td>
+                <td className="px-4 py-3 text-body-2 text-fg-sub">{incident.acdntTpCd}</td>
                 <td className="px-4 py-3">
-                  <span className="px-2 py-1 text-xs font-semibold rounded-md bg-[rgba(168,85,247,0.15)] text-purple-400">
+                  <span className="px-2 py-1 text-caption font-semibold rounded-md bg-[rgba(168,85,247,0.15)] text-purple-400">
                     {incident.phaseCd}
                   </span>
                 </td>
-                <td className="px-4 py-3 text-sm text-fg-sub">{incident.analystNm ?? '—'}</td>
+                <td className="px-4 py-3 text-body-2 text-fg-sub">{incident.analystNm ?? '—'}</td>
               </tr>
             ))}
           </tbody>
diff --git a/frontend/src/tabs/incidents/components/IncidentsLeftPanel.tsx b/frontend/src/tabs/incidents/components/IncidentsLeftPanel.tsx
index 1627be8..9d973b7 100755
--- a/frontend/src/tabs/incidents/components/IncidentsLeftPanel.tsx
+++ b/frontend/src/tabs/incidents/components/IncidentsLeftPanel.tsx
@@ -215,7 +215,7 @@ export function IncidentsLeftPanel({
       {/* Search */}
       <div className="px-4 py-3 border-b border-stroke shrink-0">
         <div className="relative">
-          <span className="absolute left-[10px] top-1/2 -translate-y-1/2 text-xs">🔍</span>
+          <span className="absolute left-[10px] top-1/2 -translate-y-1/2 text-caption">🔍</span>
           <input
             type="text"
             placeholder="사고명, 선박명 검색..."
@@ -224,7 +224,7 @@ export function IncidentsLeftPanel({
               setSearchTerm(e.target.value);
               resetPage();
             }}
-            className="w-full py-2 pr-3 pl-8 bg-bg-base border border-stroke text-xs outline-none"
+            className="w-full py-2 pr-3 pl-8 bg-bg-base border border-stroke text-caption outline-none"
             style={{ borderRadius: 'var(--radius-sm)' }}
           />
         </div>
@@ -257,11 +257,11 @@ export function IncidentsLeftPanel({
         />
         <button
           onClick={resetPage}
-          className="text-label-2 font-semibold cursor-pointer whitespace-nowrap text-white border-none"
+          className="rounded-sm text-label-2 font-semibold cursor-pointer whitespace-nowrap text-color-accent"
           style={{
             padding: '5px 12px',
-            background: 'linear-gradient(135deg,var(--color-accent),var(--color-info))',
-            borderRadius: 'var(--radius-sm)',
+            border: '1px solid rgba(6,182,212,.3)',
+            background: 'rgba(6,182,212,.08)',
           }}
         >
           조회
@@ -356,7 +356,7 @@ export function IncidentsLeftPanel({
               setSelectedStatus(s.id);
               resetPage();
             }}
-            className="flex items-center gap-1 text-caption font-semibold cursor-pointer"
+            className="flex items-center gap-1 text-caption cursor-pointer"
             style={{
               padding: '4px 10px',
               borderRadius: '12px',
@@ -442,7 +442,7 @@ export function IncidentsLeftPanel({
               >
                 {/* Row 1: name + status */}
                 <div className="flex items-center justify-between mb-[5px]">
-                  <div className="flex items-center gap-1.5 text-xs font-bold">
+                  <div className="flex items-center gap-1.5 text-caption">
                     <span
                       className="shrink-0"
                       style={{
@@ -456,7 +456,7 @@ export function IncidentsLeftPanel({
                     {inc.name}
                   </div>
                   <span
-                    className="shrink-0 text-caption font-semibold"
+                    className="shrink-0 text-caption"
                     style={{
                       padding: '2px 10px',
                       borderRadius: '10px',
@@ -470,9 +470,9 @@ export function IncidentsLeftPanel({
                 {/* Row 2: meta */}
                 <div className="flex items-center gap-2 text-caption text-fg-disabled mb-[5px]">
                   <span>
-                    📅 {inc.date} {inc.time}
+                    {inc.date} {inc.time}
                   </span>
-                  <span>🏛 {inc.office}</span>
+                  <span> {inc.office}</span>
                 </div>
                 {/* Row 3: tags + buttons */}
                 <div className="flex items-center justify-between">
@@ -492,12 +492,12 @@ export function IncidentsLeftPanel({
                     )}
                     {inc.oilType && (
                       <span
-                        className="text-caption font-medium text-color-warning"
+                        className="text-caption font-medium text-fg-sub"
                         style={{
                           padding: '2px 8px',
                           borderRadius: '3px',
-                          background: 'rgba(249,115,22,0.08)',
-                          border: '1px solid rgba(249,115,22,0.2)',
+                          background: 'rgba(100,116,139,0.08)',
+                          border: '1px solid rgba(100,116,139,0.2)',
                         }}
                       >
                         {inc.oilType}
@@ -505,12 +505,12 @@ export function IncidentsLeftPanel({
                     )}
                     {inc.prediction && (
                       <span
-                        className="text-caption font-medium text-color-success"
+                        className="text-caption font-medium text-fg-sub"
                         style={{
                           padding: '2px 8px',
                           borderRadius: '3px',
-                          background: 'rgba(34,197,94,0.08)',
-                          border: '1px solid rgba(34,197,94,0.2)',
+                          background: 'rgba(100,116,139,0.08)',
+                          border: '1px solid rgba(100,116,139,0.2)',
                         }}
                       >
                         {inc.prediction}
@@ -535,7 +535,7 @@ export function IncidentsLeftPanel({
                         transition: '0.15s',
                       }}
                     >
-                      🌤
+                      기상정보
                     </button>
                     {(inc.mediaCount ?? 0) > 0 && (
                       <button
@@ -555,7 +555,7 @@ export function IncidentsLeftPanel({
                           transition: '0.15s',
                         }}
                       >
-                        📹 <span className="text-caption">{inc.mediaCount}</span>
+                        <span className="text-caption">{inc.mediaCount}</span>
                       </button>
                     )}
                     {inc.hasImgAnalysis && (
@@ -720,13 +720,13 @@ const WeatherPopup = forwardRef<
         }}
       >
         <div className="flex items-center gap-1.5">
-          <span className="text-sm">🌤</span>
+          <span className="text-body-2">🌤</span>
           <div>
             <div className="text-label-2 font-bold">{data?.locNm || '기상정보 없음'}</div>
             <div className="text-fg-disabled font-mono text-caption">{data?.obsDtm || '-'}</div>
           </div>
         </div>
-        <span onClick={onClose} className="cursor-pointer text-fg-disabled text-sm p-0.5">
+        <span onClick={onClose} className="cursor-pointer text-fg-disabled text-body-2 p-0.5">
           ✕
         </span>
       </div>
@@ -761,7 +761,7 @@ const WeatherPopup = forwardRef<
               border: '1px solid rgba(59,130,246,0.1)',
             }}
           >
-            <span className="text-xs">⬆</span>
+            <span className="text-caption">⬆</span>
             <div>
               <div className="text-fg-disabled text-caption">고조 (만조)</div>
               <div className="font-bold font-mono text-caption text-color-info">
@@ -773,7 +773,7 @@ const WeatherPopup = forwardRef<
             className="flex-1 flex items-center gap-1.5 px-2 py-1.5 rounded-md"
             style={{ background: 'rgba(6,182,212,0.06)', border: '1px solid rgba(6,182,212,0.1)' }}
           >
-            <span className="text-xs">⬇</span>
+            <span className="text-caption">⬇</span>
             <div>
               <div className="text-fg-disabled text-caption">저조 (간조)</div>
               <div className="text-color-accent font-bold font-mono text-caption">
@@ -791,7 +791,7 @@ const WeatherPopup = forwardRef<
               {forecast.map((f, i) => (
                 <div key={i} className="text-center">
                   <div>{f.hour}</div>
-                  <div className="text-xs my-0.5">{f.icon}</div>
+                  <div className="text-caption my-0.5">{f.icon}</div>
                   <div className="font-semibold">{f.temp}</div>
                 </div>
               ))}
diff --git a/frontend/src/tabs/incidents/components/IncidentsRightPanel.tsx b/frontend/src/tabs/incidents/components/IncidentsRightPanel.tsx
index 9b10f34..d056caf 100755
--- a/frontend/src/tabs/incidents/components/IncidentsRightPanel.tsx
+++ b/frontend/src/tabs/incidents/components/IncidentsRightPanel.tsx
@@ -50,31 +50,8 @@ interface AnalysisItem {
   checked: boolean;
 }
 
-/* ── 카테고리별 고유 색상 (목록 순서 인덱스 기반 — 중복 없음) ── */
-const CATEGORY_PALETTE: [number, number, number][] = [
-  [239, 68, 68], // red
-  [249, 115, 22], // orange
-  [234, 179, 8], // yellow
-  [132, 204, 22], // lime
-  [20, 184, 166], // teal
-  [6, 182, 212], // cyan
-  [59, 130, 246], // blue
-  [99, 102, 241], // indigo
-  [168, 85, 247], // purple
-  [236, 72, 153], // pink
-  [244, 63, 94], // rose
-  [16, 185, 129], // emerald
-  [14, 165, 233], // sky
-  [139, 92, 246], // violet
-  [217, 119, 6], // amber
-  [45, 212, 191], // turquoise
-];
-
-function getCategoryColor(index: number): [number, number, number] {
-  return CATEGORY_PALETTE[index % CATEGORY_PALETTE.length];
-}
-
-/* ── 카테고리 → 이모지 매핑 (prediction LeftPanel의 CATEGORY_ICON_MAP 기반) ── */
+/* ── 카테고리 → 이모지 매핑 (prediction LeftPanel의 CATEGORY_ICON_MAP 기반, 미사용 보존) ── */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const CATEGORY_ICON: Record<string, string> = {
   어장정보: '🐟',
   양식장: '🦪',
@@ -140,8 +117,20 @@ function getActiveModels(p: PredictionAnalysis): string {
 
 /* ── HNS/구난 섹션 (미개발, 고정 구조만 유지) ────── */
 const STATIC_SECTIONS = [
-  { key: 'hns', icon: '🧪', title: 'HNS 대기확산', color: '#a855f7', colorRgb: '168,85,247' },
-  { key: 'rsc', icon: '🚨', title: '긴급구난', color: '#06b6d4', colorRgb: '6,182,212' },
+  {
+    key: 'hns',
+    icon: '🧪',
+    title: 'HNS 대기확산',
+    color: 'var(--color-accent)',
+    colorRgb: '6,182,212',
+  },
+  {
+    key: 'rsc',
+    icon: '🚨',
+    title: '긴급구난',
+    color: 'var(--color-accent)',
+    colorRgb: '6,182,212',
+  },
 ];
 
 /* ── Component ───────────────────────────────────── */
@@ -292,7 +281,7 @@ export function IncidentsRightPanel({
     key: 'oil',
     icon: '🛢',
     title: '유출유 확산예측',
-    color: '#f97316',
+    color: 'var(--color-accent)',
     colorRgb: '249,115,22',
     totalLabel: `전체 ${predItems.length}건`,
     items: predItems.map((p) => {
@@ -310,7 +299,7 @@ export function IncidentsRightPanel({
 
   if (!incident) {
     return (
-      <div className="flex flex-col items-center justify-center bg-bg-surface border-l border-stroke w-[280px] min-w-[280px]">
+      <div className="flex flex-col items-center justify-center bg-bg-surface border-l border-stroke w-full h-full">
         <div className="text-center text-fg-disabled text-label-2">
           <div className="text-[32px] mb-2 opacity-30">📊</div>
           좌측에서 사고를 선택하면
@@ -325,9 +314,9 @@ export function IncidentsRightPanel({
     <div className="flex flex-col bg-bg-surface border-l border-stroke overflow-hidden h-full w-[280px] min-w-[280px]">
       {/* Header */}
       <div className="px-[14px] py-2.5 border-b border-stroke shrink-0">
-        <div className="text-xs font-bold mb-0.5">🔬 통합분석 조회</div>
+        <div className="text-caption font-bold mb-0.5">🔬 통합분석 조회</div>
         <div className="text-caption text-fg-disabled">
-          선택: <b className="text-color-accent">{incident.name}</b>
+          선택: <span className="text-fg-disabled">{incident.name}</span>
         </div>
       </div>
 
@@ -344,22 +333,19 @@ export function IncidentsRightPanel({
             <div className="bg-bg-elevated border border-stroke rounded-md p-2.5">
               <div className="flex items-center justify-between mb-2">
                 <div className="flex items-center gap-1.5">
-                  <span className="text-sm">{sec.icon}</span>
-                  <span className="text-xs font-bold" style={{ color: sec.color }}>
-                    {sec.title}
-                  </span>
+                  {/* <span className="text-body-2">{sec.icon}</span> */}
+                  <span className="text-caption">{sec.title}</span>
                 </div>
                 <button
                   className="text-caption font-semibold cursor-pointer"
                   style={{
                     padding: '3px 10px',
                     borderRadius: '4px',
-                    background: `rgba(${sec.colorRgb},0.1)`,
-                    border: `1px solid rgba(${sec.colorRgb},0.25)`,
+                    border: '1px solid var(--stroke-default)',
                     color: sec.color,
                   }}
                 >
-                  📋 조회
+                  조회
                 </button>
               </div>
               <div className="flex flex-col gap-1">
@@ -374,8 +360,7 @@ export function IncidentsRightPanel({
                       className="flex items-center gap-1.5"
                       style={{
                         padding: '5px 8px',
-                        background: `rgba(${sec.colorRgb},0.06)`,
-                        border: `1px solid rgba(${sec.colorRgb},0.15)`,
+                        border: '1px solid var(--stroke-default)',
                         borderRadius: '4px',
                       }}
                     >
@@ -415,22 +400,19 @@ export function IncidentsRightPanel({
           <div key={sec.key} className="bg-bg-elevated border border-stroke rounded-md p-2.5">
             <div className="flex items-center justify-between mb-2">
               <div className="flex items-center gap-1.5">
-                <span className="text-sm">{sec.icon}</span>
-                <span className="text-xs font-bold" style={{ color: sec.color }}>
-                  {sec.title}
-                </span>
+                {/* <span className="text-body-2">{sec.icon}</span> */}
+                <span className="text-caption">{sec.title}</span>
               </div>
               <button
                 className="text-caption font-semibold cursor-pointer"
                 style={{
                   padding: '3px 10px',
                   borderRadius: '4px',
-                  background: `rgba(${sec.colorRgb},0.1)`,
-                  border: `1px solid rgba(${sec.colorRgb},0.25)`,
+                  border: '1px solid var(--stroke-default)',
                   color: sec.color,
                 }}
               >
-                📋 조회
+                조회
               </button>
             </div>
             <div className="text-caption text-fg-disabled text-center py-1.5">준비 중입니다</div>
@@ -443,8 +425,8 @@ export function IncidentsRightPanel({
         {/* 민감자원 */}
         <div className="bg-bg-elevated border border-stroke rounded-md p-2.5">
           <div className="flex items-center gap-1.5 mb-2">
-            <span className="text-sm">🐟</span>
-            <span className="text-xs font-bold text-color-success">민감자원</span>
+            {/* <span className="text-body-2">🐟</span> */}
+            <span className="text-caption">민감자원</span>
           </div>
           <div className="flex flex-col gap-[3px]">
             {sensCategories.length === 0 ? (
@@ -452,38 +434,33 @@ export function IncidentsRightPanel({
                 해당 사고 영역의 민감자원이 없습니다
               </div>
             ) : (
-              sensCategories.map((cat, i) => {
-                const icon = CATEGORY_ICON[cat.category] ?? '🌊';
+              sensCategories.map((cat) => {
                 const areaLabel =
                   cat.totalArea != null
                     ? `${cat.totalArea.toLocaleString('ko-KR', { maximumFractionDigits: 0 })}ha`
                     : `${cat.count}개소`;
-                const [r, g, b] = getCategoryColor(i);
-                const hex = `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
                 return (
                   <label
                     key={cat.category}
-                    className="flex items-center cursor-pointer text-caption gap-[5px] rounded-[3px]"
-                    style={{ padding: '4px 6px', background: `rgba(${r},${g},${b},0.06)` }}
+                    className="flex items-center cursor-pointer text-caption gap-[5px]"
+                    style={{ padding: '3px 0' }}
                   >
                     <input
                       type="checkbox"
                       checked={checkedSensCategories.has(cat.category)}
                       onChange={() => toggleSensCategory(cat.category)}
-                      style={{ accentColor: hex }}
+                      style={{ accentColor: 'var(--color-accent)' }}
                     />
                     <span
                       style={{
-                        width: 8,
-                        height: 8,
+                        width: 6,
+                        height: 6,
                         borderRadius: '50%',
-                        background: hex,
+                        background: 'var(--color-accent)',
                         flexShrink: 0,
                         display: 'inline-block',
-                        border: `1px solid rgba(${r},${g},${b},0.45)`,
                       }}
                     />
-                    <span>{icon}</span>
                     <span className="flex-1">{cat.category}</span>
                     <span className="text-fg-disabled font-mono shrink-0">({areaLabel})</span>
                   </label>
@@ -496,10 +473,9 @@ export function IncidentsRightPanel({
         {/* 근처 방제자원 */}
         <div className="bg-bg-elevated border border-stroke rounded-md p-2.5">
           <div className="flex items-center gap-1.5 mb-2">
-            <span className="text-sm">🛡</span>
-            <span className="text-xs font-bold text-color-boom">근처 방제자원</span>
+            <span className="text-caption font-bold text-color-accent">근처 방제자원</span>
             {nearbyOrgs.length > 0 && (
-              <span className="ml-auto text-caption font-mono text-color-boom">
+              <span className="ml-auto text-caption font-mono text-color-accent">
                 {nearbyOrgs.length}개
               </span>
             )}
@@ -519,21 +495,18 @@ export function IncidentsRightPanel({
               반경 내 방제자원 없음
             </div>
           ) : (
-            <div className="flex flex-col gap-[3px] max-h-[200px] overflow-y-auto">
+            <div className="flex flex-col max-h-[200px] overflow-y-auto">
               {nearbyOrgs.map((org) => (
                 <div
                   key={org.orgSn}
-                  className="flex items-start gap-1.5 rounded-[3px] px-[6px] py-[5px]"
-                  style={{
-                    background: 'rgba(245,158,11,0.05)',
-                    border: '1px solid rgba(245,158,11,0.08)',
-                  }}
+                  className="flex items-start gap-1.5 px-[2px] py-[5px]"
+                  style={{ borderBottom: '1px solid var(--stroke-default)' }}
                 >
                   <div className="flex-1 min-w-0">
                     <div className="flex items-center gap-1 mb-[2px]">
                       <span
-                        className="text-caption px-[4px] py-[1px] rounded-[2px] font-bold shrink-0"
-                        style={{ background: 'rgba(245,158,11,0.15)', color: '#f59e0b' }}
+                        className="text-caption px-[4px] py-[1px] rounded-[2px] font-bold shrink-0 text-color-accent"
+                        style={{ background: 'rgba(6,182,212,0.1)' }}
                       >
                         {org.orgTp}
                       </span>
@@ -544,7 +517,7 @@ export function IncidentsRightPanel({
                       {org.totalAssets > 0 ? ` · 장비 ${org.totalAssets}개` : ''}
                     </div>
                   </div>
-                  <span className="text-caption font-mono text-color-boom shrink-0">
+                  <span className="text-caption font-mono text-color-accent shrink-0">
                     {org.distanceNm.toFixed(1)} nm
                   </span>
                 </div>
@@ -553,10 +526,10 @@ export function IncidentsRightPanel({
           )}
 
           {/* Radius slider */}
-          <div className="mt-2 pt-2" style={{ borderTop: '1px solid rgba(245,158,11,0.1)' }}>
+          <div className="mt-2 pt-2" style={{ borderTop: '1px solid var(--stroke-default)' }}>
             <div className="flex items-center justify-between mb-[5px]">
               <span className="text-caption text-fg-disabled">탐색 반경</span>
-              <span className="text-caption font-bold font-mono text-color-boom">
+              <span className="text-caption font-bold font-mono text-color-accent">
                 {nearbyRadius} nm
               </span>
             </div>
@@ -572,7 +545,7 @@ export function IncidentsRightPanel({
                 height: '4px',
                 background: 'var(--stroke-default)',
                 borderRadius: '2px',
-                accentColor: '#f59e0b',
+                accentColor: 'var(--color-accent)',
               }}
             />
           </div>
@@ -605,7 +578,8 @@ export function IncidentsRightPanel({
                   color: isActive ? 'var(--color-accent)' : 'var(--fg-disabled)',
                 }}
               >
-                {v.icon} {v.label}
+                {/* {v.icon} */}
+                {v.label}
               </button>
             );
           })}
@@ -627,9 +601,7 @@ export function IncidentsRightPanel({
           className="w-full text-label-2 font-bold cursor-pointer"
           style={{
             padding: '8px',
-            background: analysisActive
-              ? 'linear-gradient(135deg,rgba(239,68,68,0.15),rgba(239,68,68,0.1))'
-              : 'linear-gradient(135deg,rgba(6,182,212,0.15),rgba(59,130,246,0.1))',
+            background: analysisActive ? 'rgba(239,68,68,0.1)' : 'rgba(6,182,212,0.1)',
             border: analysisActive
               ? '1px solid rgba(239,68,68,0.3)'
               : '1px solid rgba(6,182,212,0.3)',
diff --git a/frontend/src/tabs/incidents/components/IncidentsView.tsx b/frontend/src/tabs/incidents/components/IncidentsView.tsx
index a1d17e6..bfdc079 100755
--- a/frontend/src/tabs/incidents/components/IncidentsView.tsx
+++ b/frontend/src/tabs/incidents/components/IncidentsView.tsx
@@ -138,6 +138,8 @@ export function IncidentsView() {
   const [hoverInfo, setHoverInfo] = useState<HoverInfo | null>(null);
 
   const [dischargeMode, setDischargeMode] = useState(false);
+  const [leftCollapsed, setLeftCollapsed] = useState(false);
+  const [rightCollapsed, setRightCollapsed] = useState(false);
   const [dischargeInfo, setDischargeInfo] = useState<{
     lat: number;
     lon: number;
@@ -196,12 +198,17 @@ export function IncidentsView() {
     if (sections.length === 0) return;
     const tags: { icon: string; label: string; color: string }[] = [];
     sections.forEach((s) => {
-      if (s.key === 'oil') tags.push({ icon: '🛢', label: '유출유', color: '#f97316' });
-      if (s.key === 'hns') tags.push({ icon: '🧪', label: 'HNS', color: '#a855f7' });
-      if (s.key === 'rsc') tags.push({ icon: '🚨', label: '구난', color: '#06b6d4' });
+      if (s.key === 'oil')
+        tags.push({ icon: '🛢', label: '유출유', color: 'var(--color-warning)' });
+      if (s.key === 'hns') tags.push({ icon: '🧪', label: 'HNS', color: 'var(--color-tertiary)' });
+      if (s.key === 'rsc') tags.push({ icon: '🚨', label: '구난', color: 'var(--color-accent)' });
     });
     if (sensitiveCount > 0)
-      tags.push({ icon: '🐟', label: `민감자원 ${sensitiveCount}건`, color: '#22c55e' });
+      tags.push({
+        icon: '🐟',
+        label: `민감자원 ${sensitiveCount}건`,
+        color: 'var(--color-success)',
+      });
     setAnalysisTags(tags);
     setAnalysisActive(true);
   };
@@ -574,12 +581,14 @@ export function IncidentsView() {
   return (
     <div className="flex flex-1 overflow-hidden">
       {/* Left Panel */}
-      <IncidentsLeftPanel
-        incidents={incidents}
-        selectedIncidentId={selectedIncidentId}
-        onIncidentSelect={setSelectedIncidentId}
-        onFilteredChange={setFilteredIncidents}
-      />
+      <div className="shrink-0 overflow-hidden" style={{ width: leftCollapsed ? 0 : 360 }}>
+        <IncidentsLeftPanel
+          incidents={incidents}
+          selectedIncidentId={selectedIncidentId}
+          onIncidentSelect={setSelectedIncidentId}
+          onFilteredChange={setFilteredIncidents}
+        />
+      </div>
 
       {/* Center - Map + Analysis Views */}
       <div className="flex-1 flex flex-col overflow-hidden">
@@ -590,7 +599,8 @@ export function IncidentsView() {
             style={{
               height: 36,
               padding: '0 16px',
-              background: 'linear-gradient(90deg,rgba(6,182,212,0.06),var(--bg-surface))',
+              background:
+                'linear-gradient(90deg, color-mix(in srgb, var(--color-accent) 6%, transparent), var(--bg-surface))',
             }}
           >
             <div className="flex items-center gap-2">
@@ -603,8 +613,8 @@ export function IncidentsView() {
                     className="text-caption font-semibold rounded-md"
                     style={{
                       padding: '2px 8px',
-                      background: `${t.color}18`,
-                      border: `1px solid ${t.color}40`,
+                      background: `color-mix(in srgb, ${t.color} 18%, transparent)`,
+                      border: `1px solid color-mix(in srgb, ${t.color} 40%, transparent)`,
                       color: t.color,
                     }}
                   >
@@ -627,10 +637,13 @@ export function IncidentsView() {
                   className="text-caption font-semibold cursor-pointer rounded-sm"
                   style={{
                     padding: '3px 10px',
-                    background: viewMode === v.mode ? 'rgba(6,182,212,0.12)' : 'var(--bg-card)',
+                    background:
+                      viewMode === v.mode
+                        ? 'color-mix(in srgb, var(--color-accent) 12%, transparent)'
+                        : 'var(--bg-card)',
                     border:
                       viewMode === v.mode
-                        ? '1px solid rgba(6,182,212,0.3)'
+                        ? '1px solid color-mix(in srgb, var(--color-accent) 30%, transparent)'
                         : '1px solid var(--stroke-default)',
                     color: viewMode === v.mode ? 'var(--color-accent)' : 'var(--fg-disabled)',
                   }}
@@ -643,8 +656,8 @@ export function IncidentsView() {
                 className="text-caption font-semibold cursor-pointer rounded-sm"
                 style={{
                   padding: '3px 8px',
-                  background: 'rgba(239,68,68,0.06)',
-                  border: '1px solid rgba(239,68,68,0.2)',
+                  background: 'color-mix(in srgb, var(--color-danger) 6%, transparent)',
+                  border: '1px solid color-mix(in srgb, var(--color-danger) 20%, transparent)',
                   color: 'var(--color-danger)',
                 }}
               >
@@ -656,6 +669,44 @@ export function IncidentsView() {
 
         {/* Map / Analysis Content Area */}
         <div className="flex-1 relative overflow-hidden">
+          {/* Left panel toggle button */}
+          <button
+            onClick={() => setLeftCollapsed((v) => !v)}
+            className="absolute z-[500] top-1/2 -translate-y-1/2 flex items-center justify-center text-[10px]"
+            style={{
+              left: 0,
+              width: 18,
+              height: 40,
+              background: 'var(--bg-elevated)',
+              border: '1px solid var(--stroke-default)',
+              borderLeft: 'none',
+              borderRadius: '0 6px 6px 0',
+              color: 'var(--fg-sub)',
+              cursor: 'pointer',
+            }}
+          >
+            {leftCollapsed ? '▶' : '◀'}
+          </button>
+
+          {/* Right panel toggle button */}
+          <button
+            onClick={() => setRightCollapsed((v) => !v)}
+            className="absolute z-[500] top-1/2 -translate-y-1/2 flex items-center justify-center text-[10px]"
+            style={{
+              right: 0,
+              width: 18,
+              height: 40,
+              background: 'var(--bg-elevated)',
+              border: '1px solid var(--stroke-default)',
+              borderRight: 'none',
+              borderRadius: '6px 0 0 6px',
+              color: 'var(--fg-sub)',
+              cursor: 'pointer',
+            }}
+          >
+            {rightCollapsed ? '◀' : '▶'}
+          </button>
+
           {/* Default Map (visible when not in analysis or in overlay mode) */}
           {(!analysisActive || viewMode === 'overlay') && (
             <div className="absolute inset-0">
@@ -738,7 +789,7 @@ export function IncidentsView() {
                         width: 180,
                         height: 120,
                         background:
-                          'radial-gradient(ellipse, rgba(249,115,22,0.35) 0%, rgba(249,115,22,0.1) 50%, transparent 70%)',
+                          'radial-gradient(ellipse, color-mix(in srgb, var(--color-warning) 35%, transparent) 0%, color-mix(in srgb, var(--color-warning) 10%, transparent) 50%, transparent 70%)',
                         borderRadius: '50%',
                         transform: 'rotate(-15deg)',
                       }}
@@ -753,7 +804,7 @@ export function IncidentsView() {
                         width: 150,
                         height: 100,
                         background:
-                          'radial-gradient(ellipse, rgba(168,85,247,0.3) 0%, rgba(168,85,247,0.08) 50%, transparent 70%)',
+                          'radial-gradient(ellipse, color-mix(in srgb, var(--color-tertiary) 30%, transparent) 0%, color-mix(in srgb, var(--color-tertiary) 8%, transparent) 50%, transparent 70%)',
                         borderRadius: '50%',
                         transform: 'rotate(20deg)',
                       }}
@@ -767,7 +818,8 @@ export function IncidentsView() {
                         left: '42%',
                         width: 200,
                         height: 200,
-                        border: '2px dashed rgba(6,182,212,0.4)',
+                        border:
+                          '2px dashed color-mix(in srgb, var(--color-accent) 40%, transparent)',
                         borderRadius: '50%',
                       }}
                     />
@@ -784,18 +836,16 @@ export function IncidentsView() {
                 className="absolute z-[500] cursor-pointer rounded-md text-caption font-bold font-korean"
                 style={{
                   top: 10,
-                  right: dischargeMode ? 340 : 180,
+                  right: 180,
                   padding: '6px 10px',
-                  background: dischargeMode ? 'rgba(6,182,212,0.15)' : 'rgba(13,17,23,0.88)',
-                  border: dischargeMode
-                    ? '1px solid rgba(6,182,212,0.4)'
-                    : '1px solid var(--stroke-default)',
-                  color: dischargeMode ? '#22d3ee' : 'var(--fg-disabled)',
+                  background: 'var(--bg-base)',
+                  border: '1px solid var(--stroke-default)',
+                  color: dischargeMode ? 'var(--color-accent)' : 'var(--fg-disabled)',
                   backdropFilter: 'blur(8px)',
-                  transition: 'all 0.2s',
+                  transition: 'color 0.2s',
                 }}
               >
-                🚢 배출규정 {dischargeMode ? 'ON' : 'OFF'}
+                배출규정 {dischargeMode ? 'ON' : 'OFF'}
               </button>
 
               {/* 오염물 배출 규정 패널 */}
@@ -818,9 +868,9 @@ export function IncidentsView() {
                     left: '50%',
                     transform: 'translate(-50%, -50%)',
                     padding: '12px 20px',
-                    background: 'rgba(13,17,23,0.9)',
-                    border: '1px solid rgba(6,182,212,0.3)',
-                    color: '#22d3ee',
+                    background: 'var(--bg-base)',
+                    border: '1px solid color-mix(in srgb, var(--color-accent) 30%, transparent)',
+                    color: 'var(--color-accent)',
                     backdropFilter: 'blur(8px)',
                     pointerEvents: 'none',
                   }}
@@ -833,14 +883,14 @@ export function IncidentsView() {
               <div
                 className="absolute top-[10px] right-[10px] z-[500] rounded-md"
                 style={{
-                  background: 'rgba(13,17,23,0.88)',
+                  background: 'var(--bg-base)',
                   border: '1px solid var(--stroke-default)',
                   padding: '8px 12px',
                   backdropFilter: 'blur(8px)',
                 }}
               >
                 <div className="flex items-center gap-1.5 mb-[5px]">
-                  <div
+                  {/* <div
                     style={{
                       width: 6,
                       height: 6,
@@ -848,20 +898,14 @@ export function IncidentsView() {
                       background: 'var(--color-success)',
                       animation: 'pd 1.5s infinite',
                     }}
-                  />
-                  <span className="text-caption font-bold">AIS Live</span>
+                  /> */}
+                  <span className="text-caption">AIS Live</span>
                   <span className="text-caption text-fg-disabled font-mono">MarineTraffic</span>
                 </div>
                 <div className="flex gap-2.5 text-caption font-mono">
-                  <div className="text-fg-sub">
-                    선박 <b className="text-color-accent">20</b>
-                  </div>
-                  <div className="text-fg-sub">
-                    사고 <b className="text-red-400">6</b>
-                  </div>
-                  <div className="text-fg-sub">
-                    방제선 <b className="text-cyan-500">2</b>
-                  </div>
+                  <div className="text-fg-sub">선박 20</div>
+                  <div className="text-fg-sub">사고 6</div>
+                  <div className="text-fg-sub">방제선 2</div>
                 </div>
               </div>
 
@@ -869,29 +913,29 @@ export function IncidentsView() {
               <div
                 className="absolute bottom-[10px] left-[10px] z-[500] rounded-md flex flex-col gap-1.5"
                 style={{
-                  background: 'rgba(13,17,23,0.88)',
+                  background: 'var(--bg-base)',
                   border: '1px solid var(--stroke-default)',
                   padding: '8px 12px',
                   backdropFilter: 'blur(8px)',
                 }}
               >
                 <div className="text-caption font-bold text-fg-sub">사고 상태</div>
-                <div className="flex gap-2.5">
+                <div className="grid grid-cols-3 gap-1.5">
                   {[
-                    { c: '#ef4444', l: '대응중' },
-                    { c: '#f59e0b', l: '조사중' },
-                    { c: '#6b7280', l: '종료' },
+                    { c: 'var(--color-danger)', l: '대응중' },
+                    { c: 'var(--color-warning)', l: '조사중' },
+                    { c: 'var(--fg-disabled)', l: '종료' },
                   ].map((s) => (
-                    <div key={s.l} className="flex items-center gap-1">
+                    <div key={s.l} className="flex flex-col items-center gap-0.5">
                       <div style={{ width: 8, height: 8, borderRadius: '50%', background: s.c }} />
                       <span className="text-caption text-fg-disabled">{s.l}</span>
                     </div>
                   ))}
                 </div>
                 <div className="text-caption font-bold text-fg-sub mt-0.5">AIS 선박</div>
-                <div className="flex flex-wrap gap-[6px_12px]">
+                <div className="grid grid-cols-3 gap-1.5">
                   {VESSEL_LEGEND.map((vl) => (
-                    <div key={vl.type} className="flex items-center gap-1">
+                    <div key={vl.type} className="flex flex-col items-center gap-0.5">
                       <div
                         style={{
                           width: 0,
@@ -901,7 +945,7 @@ export function IncidentsView() {
                           borderBottom: `7px solid ${vl.color}`,
                         }}
                       />
-                      <span className="text-caption text-fg-disabled">{vl.type}</span>
+                      <span className="text-caption text-fg-disabled text-center">{vl.type}</span>
                     </div>
                   ))}
                 </div>
@@ -981,11 +1025,15 @@ export function IncidentsView() {
                   className="flex items-center shrink-0 border-b border-stroke"
                   style={{
                     height: 28,
-                    background: 'linear-gradient(90deg,rgba(249,115,22,0.08),var(--bg-surface))',
+                    background:
+                      'linear-gradient(90deg, color-mix(in srgb, var(--color-warning) 8%, transparent), var(--bg-surface))',
                     padding: '0 10px',
                   }}
                 >
-                  <span className="text-caption font-bold" style={{ color: '#f97316' }}>
+                  <span
+                    className="text-caption font-bold"
+                    style={{ color: 'var(--color-warning)' }}
+                  >
                     🛢 유출유 확산예측
                   </span>
                 </div>
@@ -994,7 +1042,7 @@ export function IncidentsView() {
                   style={{ padding: 10 }}
                 >
                   <SplitPanelContent
-                    tag={{ icon: '🛢', label: '유출유', color: '#f97316' }}
+                    tag={{ icon: '🛢', label: '유출유', color: 'var(--color-warning)' }}
                     incident={selectedIncident}
                   />
                 </div>
@@ -1004,11 +1052,15 @@ export function IncidentsView() {
                   className="flex items-center shrink-0 border-b border-stroke"
                   style={{
                     height: 28,
-                    background: 'linear-gradient(90deg,rgba(168,85,247,0.08),var(--bg-surface))',
+                    background:
+                      'linear-gradient(90deg, color-mix(in srgb, var(--color-tertiary) 8%, transparent), var(--bg-surface))',
                     padding: '0 10px',
                   }}
                 >
-                  <span className="text-caption font-bold" style={{ color: '#a855f7' }}>
+                  <span
+                    className="text-caption font-bold"
+                    style={{ color: 'var(--color-tertiary)' }}
+                  >
                     🧪 HNS 대기확산
                   </span>
                 </div>
@@ -1017,7 +1069,7 @@ export function IncidentsView() {
                   style={{ padding: 10 }}
                 >
                   <SplitPanelContent
-                    tag={{ icon: '🧪', label: 'HNS', color: '#a855f7' }}
+                    tag={{ icon: '🧪', label: 'HNS', color: 'var(--color-tertiary)' }}
                     incident={selectedIncident}
                   />
                 </div>
@@ -1027,7 +1079,8 @@ export function IncidentsView() {
                   className="flex items-center shrink-0 border-b border-stroke"
                   style={{
                     height: 28,
-                    background: 'linear-gradient(90deg,rgba(6,182,212,0.08),var(--bg-surface))',
+                    background:
+                      'linear-gradient(90deg, color-mix(in srgb, var(--color-accent) 8%, transparent), var(--bg-surface))',
                     padding: '0 10px',
                   }}
                 >
@@ -1038,7 +1091,7 @@ export function IncidentsView() {
                   style={{ padding: 10 }}
                 >
                   <SplitPanelContent
-                    tag={{ icon: '🚨', label: '구난', color: '#06b6d4' }}
+                    tag={{ icon: '🚨', label: '구난', color: 'var(--color-accent)' }}
                     incident={selectedIncident}
                   />
                 </div>
@@ -1062,8 +1115,8 @@ export function IncidentsView() {
                 className="cursor-pointer rounded text-caption font-semibold"
                 style={{
                   padding: '4px 12px',
-                  background: 'rgba(59,130,246,0.1)',
-                  border: '1px solid rgba(59,130,246,0.2)',
+                  background: 'color-mix(in srgb, var(--color-info) 10%, transparent)',
+                  border: '1px solid color-mix(in srgb, var(--color-info) 20%, transparent)',
                   color: 'var(--color-info)',
                 }}
               >
@@ -1073,9 +1126,9 @@ export function IncidentsView() {
                 className="cursor-pointer rounded text-caption font-semibold"
                 style={{
                   padding: '4px 12px',
-                  background: 'rgba(168,85,247,0.1)',
-                  border: '1px solid rgba(168,85,247,0.2)',
-                  color: '#a78bfa',
+                  background: 'color-mix(in srgb, var(--color-tertiary) 10%, transparent)',
+                  border: '1px solid color-mix(in srgb, var(--color-tertiary) 20%, transparent)',
+                  color: 'var(--color-tertiary)',
                 }}
               >
                 🔗 R&D 연계
@@ -1086,17 +1139,19 @@ export function IncidentsView() {
       </div>
 
       {/* Right Panel */}
-      <IncidentsRightPanel
-        incident={selectedIncident}
-        viewMode={viewMode}
-        onViewModeChange={setViewMode}
-        onRunAnalysis={handleRunAnalysis}
-        analysisActive={analysisActive}
-        onCloseAnalysis={handleCloseAnalysis}
-        onCheckedPredsChange={handleCheckedPredsChange}
-        onSensitiveDataChange={handleSensitiveDataChange}
-        selectedVessel={selectedVessel}
-      />
+      <div className="shrink-0 overflow-hidden" style={{ width: rightCollapsed ? 0 : 280 }}>
+        <IncidentsRightPanel
+          incident={selectedIncident}
+          viewMode={viewMode}
+          onViewModeChange={setViewMode}
+          onRunAnalysis={handleRunAnalysis}
+          analysisActive={analysisActive}
+          onCloseAnalysis={handleCloseAnalysis}
+          onCheckedPredsChange={handleCheckedPredsChange}
+          onSensitiveDataChange={handleSensitiveDataChange}
+          selectedVessel={selectedVessel}
+        />
+      </div>
     </div>
   );
 }
@@ -1133,11 +1188,11 @@ function SplitPanelContent({
       model: 'KOSPS + OpenDrift · BUNKER-C 150kL',
       items: [
         { label: '예측 시간', value: '72시간 (3일)' },
-        { label: '최대 확산거리', value: '12.3 NM', color: '#f97316' },
-        { label: '해안 도달 시간', value: '18시간 후', color: '#ef4444' },
+        { label: '최대 확산거리', value: '12.3 NM', color: 'var(--color-warning)' },
+        { label: '해안 도달 시간', value: '18시간 후', color: 'var(--color-danger)' },
         { label: '영향 해안선', value: '27.5 km' },
         { label: '풍화율', value: '32.4%' },
-        { label: '잔존유량', value: '101.4 kL', color: '#f97316' },
+        { label: '잔존유량', value: '101.4 kL', color: 'var(--color-warning)' },
       ],
       summary:
         '여수항 남동쪽 방향 확산, 18시간 후 돌산도 해안 도달 예상. 조류 영향으로 남서쪽 이동.',
@@ -1146,12 +1201,12 @@ function SplitPanelContent({
       title: 'HNS 대기확산 결과',
       model: 'ALOHA + PHAST · 톨루엔 5톤',
       items: [
-        { label: 'IDLH 범위', value: '1.2 km', color: '#ef4444' },
-        { label: 'ERPG-2 범위', value: '2.8 km', color: '#f97316' },
-        { label: 'ERPG-1 범위', value: '5.1 km', color: '#eab308' },
+        { label: 'IDLH 범위', value: '1.2 km', color: 'var(--color-danger)' },
+        { label: 'ERPG-2 범위', value: '2.8 km', color: 'var(--color-warning)' },
+        { label: 'ERPG-1 범위', value: '5.1 km', color: 'var(--color-caution)' },
         { label: '풍향', value: 'SW → NE 방향' },
         { label: '대기 안정도', value: 'D등급 (중립)' },
-        { label: '영향 인구', value: '약 2,400명', color: '#ef4444' },
+        { label: '영향 인구', value: '약 2,400명', color: 'var(--color-danger)' },
       ],
       summary: '남서풍에 의해 북동쪽 내륙 방향 확산. IDLH 1.2km 이내 즉시 대피 필요.',
     },
@@ -1159,12 +1214,12 @@ function SplitPanelContent({
       title: '긴급구난 SAR 결과',
       model: 'SAROPS · Monte Carlo 10,000회 시뮬레이션',
       items: [
-        { label: '95% 확률 범위', value: '8.5 NM²', color: '#06b6d4' },
+        { label: '95% 확률 범위', value: '8.5 NM²', color: 'var(--color-accent)' },
         { label: '최적 탐색 경로', value: 'Sector Search' },
         { label: '예상 표류 속도', value: '1.8 kn' },
         { label: '표류 방향', value: 'NE (045°)' },
-        { label: '생존 가능 시간', value: '36시간', color: '#ef4444' },
-        { label: '필요 자산', value: '헬기 2 + 경비정 3', color: '#f97316' },
+        { label: '생존 가능 시간', value: '36시간', color: 'var(--color-danger)' },
+        { label: '필요 자산', value: '헬기 2 + 경비정 3', color: 'var(--color-warning)' },
       ],
       summary: '북동쪽 방향 표류 예상. 06:00 기준 최적 탐색 패턴: 섹터탐색(Sector Search).',
     },
@@ -1178,8 +1233,8 @@ function SplitPanelContent({
         className="rounded-sm"
         style={{
           padding: '10px 12px',
-          background: `${tag.color}08`,
-          border: `1px solid ${tag.color}20`,
+          background: `color-mix(in srgb, ${tag.color} 8%, transparent)`,
+          border: `1px solid color-mix(in srgb, ${tag.color} 20%, transparent)`,
         }}
       >
         <div className="text-label-2 font-bold" style={{ color: tag.color, marginBottom: 4 }}>
@@ -1207,7 +1262,7 @@ function SplitPanelContent({
             <span className="text-caption text-fg-disabled">{item.label}</span>
             <span
               className="text-caption font-semibold font-mono"
-              style={{ color: item.color || 'var(--fg-default)' }}
+              style={{ color: item.color || 'var(--fg)' }}
             >
               {item.value}
             </span>
@@ -1219,8 +1274,8 @@ function SplitPanelContent({
         className="rounded-sm text-caption text-fg-sub"
         style={{
           padding: '8px 10px',
-          background: `${tag.color}06`,
-          border: `1px solid ${tag.color}15`,
+          background: `color-mix(in srgb, ${tag.color} 6%, transparent)`,
+          border: `1px solid color-mix(in srgb, ${tag.color} 15%, transparent)`,
           lineHeight: 1.6,
         }}
       >
@@ -1250,8 +1305,10 @@ function VesselPopupPanel({
   onClose: () => void;
   onDetail: () => void;
 }) {
-  const statusColor = v.status.includes('사고') ? '#ef4444' : '#22c55e';
-  const statusBg = v.status.includes('사고') ? 'rgba(239,68,68,0.15)' : 'rgba(34,197,94,0.1)';
+  const statusColor = v.status.includes('사고') ? 'var(--color-danger)' : 'var(--color-success)';
+  const statusBg = v.status.includes('사고')
+    ? 'color-mix(in srgb, var(--color-danger) 15%, transparent)'
+    : 'color-mix(in srgb, var(--color-success) 10%, transparent)';
 
   return (
     <div
@@ -1262,10 +1319,10 @@ function VesselPopupPanel({
         transform: 'translate(-50%,-50%)',
         zIndex: 9995,
         width: 300,
-        background: 'var(--bg-elevated)',
-        border: '1px solid var(--stroke-default)',
+        background: 'rgba(13,17,23,0.97)',
+        border: '1px solid rgba(48,54,61,0.8)',
         borderRadius: 12,
-        boxShadow: '0 16px 48px rgba(0,0,0,0.6)',
+        boxShadow: '0 16px 48px rgba(0,0,0,0.7)',
         overflow: 'hidden',
       }}
     >
@@ -1276,8 +1333,8 @@ function VesselPopupPanel({
           alignItems: 'center',
           gap: 8,
           padding: '10px 14px',
-          background: 'var(--bg-elevated)',
-          borderBottom: '1px solid var(--stroke-default)',
+          background: 'rgba(22,27,34,0.97)',
+          borderBottom: '1px solid rgba(48,54,61,0.8)',
         }}
       >
         <div
@@ -1287,23 +1344,33 @@ function VesselPopupPanel({
           {v.flag}
         </div>
         <div className="flex-1 min-w-0">
-          <div className="text-label-1 font-[800] text-fg whitespace-nowrap overflow-hidden text-ellipsis">
+          <div
+            className="text-label-1 font-[800] whitespace-nowrap overflow-hidden text-ellipsis"
+            style={{ color: '#e6edf3' }}
+          >
             {v.name}
           </div>
-          <div className="text-caption text-fg-disabled font-mono">MMSI: {v.mmsi}</div>
+          <div className="text-caption font-mono" style={{ color: '#8b949e' }}>
+            MMSI: {v.mmsi}
+          </div>
         </div>
-        <span onClick={onClose} className="text-title-3 cursor-pointer text-fg-disabled p-[2px]">
+        <span
+          onClick={onClose}
+          className="text-title-3 cursor-pointer p-[2px]"
+          style={{ color: '#8b949e' }}
+        >
           ✕
         </span>
       </div>
 
       {/* Ship Image */}
       <div
-        className="w-full flex items-center justify-center text-[40px] text-fg-disabled"
+        className="w-full flex items-center justify-center text-[40px]"
         style={{
           height: 120,
-          background: '#0d1117',
-          borderBottom: '1px solid #21262d',
+          background: 'rgba(22,27,34,0.97)',
+          borderBottom: '1px solid rgba(48,54,61,0.6)',
+          color: '#484f58',
         }}
       >
         🚢
@@ -1312,14 +1379,14 @@ function VesselPopupPanel({
       {/* Tags */}
       <div
         className="flex gap-2"
-        style={{ padding: '6px 14px', borderBottom: '1px solid #21262d' }}
+        style={{ padding: '6px 14px', borderBottom: '1px solid rgba(48,54,61,0.6)' }}
       >
         <span
           className="text-caption font-bold rounded text-color-info"
           style={{
             padding: '2px 8px',
-            background: 'rgba(59,130,246,0.12)',
-            border: '1px solid rgba(59,130,246,0.25)',
+            background: 'color-mix(in srgb, var(--color-info) 12%, transparent)',
+            border: '1px solid color-mix(in srgb, var(--color-info) 25%, transparent)',
           }}
         >
           {v.typS}
@@ -1329,7 +1396,7 @@ function VesselPopupPanel({
           style={{
             padding: '2px 8px',
             background: statusBg,
-            border: `1px solid ${statusColor}40`,
+            border: `1px solid color-mix(in srgb, ${statusColor} 40%, transparent)`,
             color: statusColor,
           }}
         >
@@ -1349,12 +1416,20 @@ function VesselPopupPanel({
           }}
         >
           <div className="flex justify-between">
-            <span className="text-caption text-fg-disabled">출항지</span>
-            <span className="text-caption text-fg-sub font-semibold font-mono">{v.depart}</span>
+            <span className="text-caption" style={{ color: '#8b949e' }}>
+              출항지
+            </span>
+            <span className="text-caption font-semibold font-mono" style={{ color: '#c9d1d9' }}>
+              {v.depart}
+            </span>
           </div>
           <div className="flex justify-between">
-            <span className="text-caption text-fg-disabled">입항지</span>
-            <span className="text-caption text-fg-sub font-semibold font-mono">{v.arrive}</span>
+            <span className="text-caption" style={{ color: '#8b949e' }}>
+              입항지
+            </span>
+            <span className="text-caption font-semibold font-mono" style={{ color: '#c9d1d9' }}>
+              {v.arrive}
+            </span>
           </div>
         </div>
         <PopupRow label="데이터 수신" value="2026-02-25 14:32:00" muted />
@@ -1364,31 +1439,34 @@ function VesselPopupPanel({
       <div className="flex gap-1.5" style={{ padding: '10px 14px' }}>
         <button
           onClick={onDetail}
-          className="flex-1 text-caption font-bold cursor-pointer text-center rounded-sm text-color-info"
+          className="flex-1 text-caption font-bold cursor-pointer text-center rounded-sm"
           style={{
             padding: 6,
-            background: 'rgba(59,130,246,0.12)',
-            border: '1px solid rgba(59,130,246,0.3)',
+            color: '#58a6ff',
+            background: 'rgba(88,166,255,0.12)',
+            border: '1px solid rgba(88,166,255,0.3)',
           }}
         >
           📋 상세정보
         </button>
         <button
-          className="flex-1 text-caption font-bold cursor-pointer text-center rounded-sm text-color-tertiary"
+          className="flex-1 text-caption font-bold cursor-pointer text-center rounded-sm"
           style={{
             padding: 6,
-            background: 'rgba(168,85,247,0.1)',
-            border: '1px solid rgba(168,85,247,0.25)',
+            color: '#a5d6ff',
+            background: 'rgba(165,214,255,0.1)',
+            border: '1px solid rgba(165,214,255,0.25)',
           }}
         >
           🔍 항적조회
         </button>
         <button
-          className="flex-1 text-caption font-bold cursor-pointer text-center rounded-sm text-color-accent"
+          className="flex-1 text-caption font-bold cursor-pointer text-center rounded-sm"
           style={{
             padding: 6,
-            background: 'rgba(6,182,212,0.1)',
-            border: '1px solid rgba(6,182,212,0.25)',
+            color: '#22d3ee',
+            background: 'rgba(34,211,238,0.1)',
+            border: '1px solid rgba(34,211,238,0.25)',
           }}
         >
           📐 항로예측
@@ -1417,7 +1495,7 @@ function PopupRow({
         borderBottom: '1px solid rgba(48,54,61,0.4)',
       }}
     >
-      <span className="text-fg-disabled">{label}</span>
+      <span style={{ color: '#8b949e' }}>{label}</span>
       <span
         className="font-semibold font-mono"
         style={{
@@ -1562,10 +1640,7 @@ function IncidentPopupContent({
           <span className="text-fg-disabled">관할</span>
           <span className="text-fg-sub font-semibold">{inc.office}</span>
         </div>
-        <div
-          className="flex justify-between text-caption"
-          style={{ padding: '5px 14px' }}
-        >
+        <div className="flex justify-between text-caption" style={{ padding: '5px 14px' }}>
           <span className="text-fg-disabled">지역</span>
           <span className="text-fg-sub font-semibold">{inc.region}</span>
         </div>
@@ -1617,24 +1692,18 @@ function VesselDetailModal({ vessel: v, onClose }: { vessel: Vessel; onClose: ()
       }}
     >
       <div
-        className="flex flex-col overflow-hidden"
+        className="flex flex-col overflow-hidden bg-bg-surface border border-stroke"
         style={{
           width: 560,
           height: '85vh',
-          background: '#161b22',
-          border: '1px solid #30363d',
           borderRadius: 14,
           boxShadow: '0 24px 64px rgba(0,0,0,0.7)',
         }}
       >
         {/* Header */}
         <div
-          className="shrink-0 flex items-center justify-between"
-          style={{
-            padding: '14px 18px',
-            background: 'linear-gradient(135deg,#1c2333,#161b22)',
-            borderBottom: '1px solid #30363d',
-          }}
+          className="shrink-0 flex items-center justify-between bg-bg-surface border-b border-stroke"
+          style={{ padding: '14px 18px' }}
         >
           <div className="flex items-center gap-[10px]">
             <span className="text-lg">{v.flag}</span>
@@ -1652,12 +1721,8 @@ function VesselDetailModal({ vessel: v, onClose }: { vessel: Vessel; onClose: ()
 
         {/* Tabs */}
         <div
-          className="shrink-0 flex gap-0.5 overflow-x-auto"
-          style={{
-            padding: '0 18px',
-            background: '#0d1117',
-            borderBottom: '1px solid #21262d',
-          }}
+          className="shrink-0 flex gap-0.5 overflow-x-auto bg-bg-base border-b border-stroke"
+          style={{ padding: '0 18px' }}
         >
           {TAB_LABELS.map((t) => (
             <button
@@ -1667,8 +1732,9 @@ function VesselDetailModal({ vessel: v, onClose }: { vessel: Vessel; onClose: ()
               style={{
                 padding: '8px 11px',
                 fontWeight: tab === t.key ? 600 : 400,
-                color: tab === t.key ? '#58a6ff' : '#8b949e',
-                borderBottom: tab === t.key ? '2px solid #58a6ff' : '2px solid transparent',
+                color: tab === t.key ? 'var(--color-accent)' : 'var(--fg-disabled)',
+                borderBottom:
+                  tab === t.key ? '2px solid var(--color-accent)' : '2px solid transparent',
                 background: 'none',
                 border: 'none',
                 transition: '0.15s',
@@ -1686,7 +1752,7 @@ function VesselDetailModal({ vessel: v, onClose }: { vessel: Vessel; onClose: ()
             padding: '16px 18px',
             gap: 14,
             scrollbarWidth: 'thin',
-            scrollbarColor: '#30363d transparent',
+            scrollbarColor: 'var(--stroke-default) transparent',
           }}
         >
           {tab === 'info' && <TabInfo v={v} />}
@@ -1717,7 +1783,7 @@ function Sec({
   return (
     <div
       style={{
-        border: `1px solid ${borderColor || '#21262d'}`,
+        border: `1px solid ${borderColor || 'var(--stroke-default)'}`,
         borderRadius: 8,
         overflow: 'hidden',
       }}
@@ -1726,8 +1792,8 @@ function Sec({
         className="text-label-2 font-bold text-fg-sub flex items-center justify-between"
         style={{
           padding: '8px 12px',
-          background: bgColor || '#0d1117',
-          borderBottom: `1px solid ${borderColor || '#21262d'}`,
+          background: bgColor || 'var(--bg-base)',
+          borderBottom: `1px solid ${borderColor || 'var(--stroke-default)'}`,
         }}
       >
         <span>{title}</span>
@@ -1757,15 +1823,17 @@ function Cell({
     <div
       style={{
         padding: '8px 12px',
-        borderBottom: '1px solid rgba(33,38,45,0.6)',
-        borderRight: span ? 'none' : '1px solid rgba(33,38,45,0.6)',
+        borderBottom: '1px solid color-mix(in srgb, var(--stroke-default) 60%, transparent)',
+        borderRight: span
+          ? 'none'
+          : '1px solid color-mix(in srgb, var(--stroke-default) 60%, transparent)',
         gridColumn: span ? '1 / -1' : undefined,
       }}
     >
       <div className="text-caption text-fg-disabled" style={{ marginBottom: 2 }}>
         {label}
       </div>
-      <div className="text-label-2 font-semibold font-mono" style={{ color: color || '#f0f6fc' }}>
+      <div className="text-label-2 font-semibold font-mono" style={{ color: color || 'var(--fg)' }}>
         {value}
       </div>
     </div>
@@ -1780,7 +1848,7 @@ function StatusBadge({ label, color }: { label: string; color: string }) {
         padding: '2px 6px',
         borderRadius: 8,
         marginLeft: 'auto',
-        background: `${color}25`,
+        background: `color-mix(in srgb, ${color} 25%, transparent)`,
         color,
       }}
     >
@@ -1794,11 +1862,8 @@ function TabInfo({ v }: { v: Vessel }) {
   return (
     <>
       <div
-        className="w-full rounded-lg overflow-hidden flex items-center justify-center text-[60px] text-fg-disabled"
-        style={{
-          height: 160,
-          background: '#0d1117',
-        }}
+        className="w-full rounded-lg overflow-hidden flex items-center justify-center text-[60px] text-fg-disabled bg-bg-base"
+        style={{ height: 160 }}
       >
         🚢
       </div>
@@ -1806,7 +1871,11 @@ function TabInfo({ v }: { v: Vessel }) {
       <Sec title="📡 실시간 현황">
         <Grid>
           <Cell label="선박상태" value={v.status} />
-          <Cell label="속도 / 항로" value={`${v.speed} kn / ${v.heading}°`} color="#22d3ee" />
+          <Cell
+            label="속도 / 항로"
+            value={`${v.speed} kn / ${v.heading}°`}
+            color="var(--color-accent)"
+          />
           <Cell label="위도" value={`${v.lat.toFixed(4)}°N`} />
           <Cell label="경도" value={`${v.lng.toFixed(4)}°E`} />
           <Cell label="흘수" value={`${v.draft}m`} />
@@ -1832,24 +1901,21 @@ function TabNav(_props: { v: Vessel }) {
   const hours = ['08', '09', '10', '11', '12', '13', '14'];
   const heights = [45, 60, 78, 82, 70, 85, 75];
   const colors = [
-    'rgba(34,197,94,.3)',
-    'rgba(34,197,94,.4)',
-    'rgba(59,130,246,.4)',
-    'rgba(59,130,246,.5)',
-    'rgba(59,130,246,.5)',
-    'rgba(59,130,246,.6)',
-    'rgba(6,182,212,.5)',
+    'color-mix(in srgb, var(--color-success) 30%, transparent)',
+    'color-mix(in srgb, var(--color-success) 40%, transparent)',
+    'color-mix(in srgb, var(--color-info) 40%, transparent)',
+    'color-mix(in srgb, var(--color-info) 50%, transparent)',
+    'color-mix(in srgb, var(--color-info) 50%, transparent)',
+    'color-mix(in srgb, var(--color-info) 60%, transparent)',
+    'color-mix(in srgb, var(--color-accent) 50%, transparent)',
   ];
 
   return (
     <>
       <Sec title="🗺 최근 항적 (24h)">
         <div
-          className="flex items-center justify-center relative overflow-hidden"
-          style={{
-            height: 180,
-            background: '#0d1117',
-          }}
+          className="flex items-center justify-center relative overflow-hidden bg-bg-base"
+          style={{ height: 180 }}
         >
           <svg
             width="100%"
@@ -1860,25 +1926,49 @@ function TabNav(_props: { v: Vessel }) {
             <path
               d="M50,150 C80,140 120,100 160,95 S240,70 280,50 S340,30 370,20"
               fill="none"
-              stroke="#58a6ff"
+              stroke="var(--color-accent)"
               strokeWidth="2"
               strokeDasharray="6,3"
               opacity=".6"
             />
-            <circle cx="50" cy="150" r="4" fill="#8b949e" />
-            <circle cx="160" cy="95" r="3" fill="#58a6ff" opacity=".5" />
-            <circle cx="280" cy="50" r="3" fill="#58a6ff" opacity=".5" />
-            <circle cx="370" cy="20" r="5" fill="#58a6ff" />
-            <text x="45" y="168" fill="#8b949e" fontSize="9" fontFamily="monospace">
+            <circle cx="50" cy="150" r="4" fill="var(--fg-disabled)" />
+            <circle cx="160" cy="95" r="3" fill="var(--color-accent)" opacity=".5" />
+            <circle cx="280" cy="50" r="3" fill="var(--color-accent)" opacity=".5" />
+            <circle cx="370" cy="20" r="5" fill="var(--color-accent)" />
+            <text
+              x="45"
+              y="168"
+              fill="var(--fg-disabled)"
+              fontSize="9"
+              fontFamily="var(--font-mono)"
+            >
               08:00
             </text>
-            <text x="150" y="113" fill="#8b949e" fontSize="9" fontFamily="monospace">
+            <text
+              x="150"
+              y="113"
+              fill="var(--fg-disabled)"
+              fontSize="9"
+              fontFamily="var(--font-mono)"
+            >
               10:30
             </text>
-            <text x="270" y="68" fill="#8b949e" fontSize="9" fontFamily="monospace">
+            <text
+              x="270"
+              y="68"
+              fill="var(--fg-disabled)"
+              fontSize="9"
+              fontFamily="var(--font-mono)"
+            >
               12:45
             </text>
-            <text x="350" y="16" fill="#58a6ff" fontSize="9" fontFamily="monospace">
+            <text
+              x="350"
+              y="16"
+              fill="var(--color-accent)"
+              fontSize="9"
+              fontFamily="var(--font-mono)"
+            >
               현재
             </text>
           </svg>
@@ -1913,16 +2003,16 @@ function TabNav(_props: { v: Vessel }) {
         <ActionBtn
           icon="🔍"
           label="전체 항적 조회"
-          bg="rgba(168,85,247,0.1)"
-          bd="rgba(168,85,247,0.25)"
-          fg="#a78bfa"
+          bg="color-mix(in srgb, var(--color-tertiary) 10%, transparent)"
+          bd="color-mix(in srgb, var(--color-tertiary) 25%, transparent)"
+          fg="var(--color-tertiary)"
         />
         <ActionBtn
           icon="📐"
           label="항로 예측"
-          bg="rgba(6,182,212,0.1)"
-          bd="rgba(6,182,212,0.25)"
-          fg="#22d3ee"
+          bg="color-mix(in srgb, var(--color-accent) 10%, transparent)"
+          bd="color-mix(in srgb, var(--color-accent) 25%, transparent)"
+          fg="var(--color-accent)"
         />
       </div>
     </>
@@ -1961,8 +2051,8 @@ function TabSpec({ v }: { v: Vessel }) {
             className="flex items-center gap-2 rounded"
             style={{
               padding: '5px 8px',
-              background: 'rgba(239,68,68,0.06)',
-              border: '1px solid rgba(239,68,68,0.12)',
+              background: 'color-mix(in srgb, var(--color-danger) 6%, transparent)',
+              border: '1px solid color-mix(in srgb, var(--color-danger) 12%, transparent)',
             }}
           >
             <span className="text-label-1">🛢</span>
@@ -1977,7 +2067,7 @@ function TabSpec({ v }: { v: Vessel }) {
                 className="text-caption font-bold text-color-danger"
                 style={{
                   padding: '2px 6px',
-                  background: 'rgba(239,68,68,0.15)',
+                  background: 'color-mix(in srgb, var(--color-danger) 15%, transparent)',
                   borderRadius: 3,
                 }}
               >
@@ -2006,27 +2096,27 @@ function TabInsurance(_props: { v: Vessel }) {
 
       <Sec
         title="🚢 선체보험 (H&M)"
-        borderColor="rgba(6,182,212,0.2)"
-        bgColor="rgba(6,182,212,0.06)"
-        badge={<StatusBadge label="유효" color="#22c55e" />}
+        borderColor="color-mix(in srgb, var(--color-accent) 20%, transparent)"
+        bgColor="color-mix(in srgb, var(--color-accent) 6%, transparent)"
+        badge={<StatusBadge label="유효" color="var(--color-success)" />}
       >
         <Grid>
           <Cell label="보험사" value="삼성화재해상보험" />
-          <Cell label="보험가액" value="USD 28,500,000" color="#22d3ee" />
-          <Cell label="보험기간" value="2025.01 ~ 2026.01" color="#22c55e" />
+          <Cell label="보험가액" value="USD 28,500,000" color="var(--color-accent)" />
+          <Cell label="보험기간" value="2025.01 ~ 2026.01" color="var(--color-success)" />
           <Cell label="면책금" value="USD 150,000" />
         </Grid>
       </Sec>
 
       <Sec
         title="📦 화물보험 (Cargo)"
-        borderColor="rgba(168,85,247,0.2)"
-        bgColor="rgba(168,85,247,0.06)"
-        badge={<StatusBadge label="유효" color="#22c55e" />}
+        borderColor="color-mix(in srgb, var(--color-tertiary) 20%, transparent)"
+        bgColor="color-mix(in srgb, var(--color-tertiary) 6%, transparent)"
+        badge={<StatusBadge label="유효" color="var(--color-success)" />}
       >
         <Grid>
           <Cell label="보험사" value="DB손해보험" />
-          <Cell label="보험가액" value="USD 42,100,000" color="#a855f7" />
+          <Cell label="보험가액" value="USD 42,100,000" color="var(--color-tertiary)" />
           <Cell label="적하물" value="벙커C유 72,850톤" />
           <Cell label="조건" value="ICC(A) All Risks" />
         </Grid>
@@ -2034,17 +2124,17 @@ function TabInsurance(_props: { v: Vessel }) {
 
       <Sec
         title="🛢 유류오염배상 (CLC/IOPC)"
-        borderColor="rgba(239,68,68,0.2)"
-        bgColor="rgba(239,68,68,0.06)"
-        badge={<StatusBadge label="유효" color="#22c55e" />}
+        borderColor="color-mix(in srgb, var(--color-danger) 20%, transparent)"
+        bgColor="color-mix(in srgb, var(--color-danger) 6%, transparent)"
+        badge={<StatusBadge label="유효" color="var(--color-success)" />}
       >
         <Grid>
-          <Cell label="배상보증서" value="유효 (2025-12-31)" color="#22c55e" />
+          <Cell label="배상보증서" value="유효 (2025-12-31)" color="var(--color-success)" />
           <Cell label="발급기관" value="한국선주상호보험" />
-          <Cell label="CLC 한도" value="89.77M SDR" color="#ef4444" />
+          <Cell label="CLC 한도" value="89.77M SDR" color="var(--color-danger)" />
           <Cell label="IOPC 기금" value="203M SDR" />
           <Cell label="추가기금" value="750M SDR" />
-          <Cell label="총 배상한도" value="약 1,042.77M SDR" color="#f97316" />
+          <Cell label="총 배상한도" value="약 1,042.77M SDR" color="var(--color-warning)" />
         </Grid>
       </Sec>
 
@@ -2052,8 +2142,8 @@ function TabInsurance(_props: { v: Vessel }) {
         className="rounded-sm text-caption text-fg-disabled"
         style={{
           padding: '8px 10px',
-          background: 'rgba(59,130,246,0.04)',
-          border: '1px solid rgba(59,130,246,0.1)',
+          background: 'color-mix(in srgb, var(--color-info) 4%, transparent)',
+          border: '1px solid color-mix(in srgb, var(--color-info) 10%, transparent)',
           lineHeight: 1.6,
         }}
       >
@@ -2070,13 +2160,13 @@ function TabDangerous({ v }: { v: Vessel }) {
     <>
       <Sec
         title="⚠ 위험물 화물 신고정보"
-        bgColor="rgba(249,115,22,0.06)"
+        bgColor="color-mix(in srgb, var(--color-warning) 6%, transparent)"
         badge={
           <span
             className="text-caption font-bold text-color-danger"
             style={{
               padding: '2px 6px',
-              background: 'rgba(239,68,68,0.15)',
+              background: 'color-mix(in srgb, var(--color-danger) 15%, transparent)',
               borderRadius: 8,
             }}
           >
@@ -2085,7 +2175,11 @@ function TabDangerous({ v }: { v: Vessel }) {
         }
       >
         <Grid>
-          <Cell label="화물명" value={v.cargo.split('·')[0].trim() || '—'} color="#f97316" />
+          <Cell
+            label="화물명"
+            value={v.cargo.split('·')[0].trim() || '—'}
+            color="var(--color-warning)"
+          />
           <Cell label="컨테이너갯수/총량" value="— / 72,850 톤" />
           <Cell label="하역업체코드" value="KRY-2847" />
           <Cell label="하역기간" value="02-26 ~ 02-28" />
@@ -2112,7 +2206,7 @@ function TabDangerous({ v }: { v: Vessel }) {
                   width: 14,
                   height: 14,
                   borderRadius: '50%',
-                  border: '2px solid #22d3ee',
+                  border: '2px solid var(--color-accent)',
                 }}
               >
                 ✓
@@ -2124,8 +2218,8 @@ function TabDangerous({ v }: { v: Vessel }) {
             className="text-caption font-semibold text-color-info cursor-pointer whitespace-nowrap shrink-0 rounded"
             style={{
               padding: '6px 14px',
-              background: 'rgba(59,130,246,0.1)',
-              border: '1px solid rgba(59,130,246,0.2)',
+              background: 'color-mix(in srgb, var(--color-info) 10%, transparent)',
+              border: '1px solid color-mix(in srgb, var(--color-info) 20%, transparent)',
             }}
           >
             📎 첨부[화물적부도]
@@ -2135,41 +2229,44 @@ function TabDangerous({ v }: { v: Vessel }) {
 
       <Sec
         title="🔥 IMO 위험물 분류"
-        borderColor="rgba(239,68,68,0.2)"
-        bgColor="rgba(239,68,68,0.06)"
+        borderColor="color-mix(in srgb, var(--color-danger) 20%, transparent)"
+        bgColor="color-mix(in srgb, var(--color-danger) 6%, transparent)"
       >
         <Grid>
-          <Cell label="IMO Class" value="Class 3" color="#ef4444" />
+          <Cell label="IMO Class" value="Class 3" color="var(--color-danger)" />
           <Cell label="분류" value="인화성 액체" />
           <Cell label="UN No." value="UN 1993" />
           <Cell label="포장등급" value="III" />
-          <Cell label="인화점" value="60°C 이상" color="#f97316" />
-          <Cell label="해양오염물질" value="해당 (P)" color="#ef4444" />
+          <Cell label="인화점" value="60°C 이상" color="var(--color-warning)" />
+          <Cell label="해양오염물질" value="해당 (P)" color="var(--color-danger)" />
         </Grid>
       </Sec>
 
-      <Sec title="🚨 비상 대응 요약 (EmS)" bgColor="rgba(234,179,8,0.06)">
+      <Sec
+        title="🚨 비상 대응 요약 (EmS)"
+        bgColor="color-mix(in srgb, var(--color-caution) 6%, transparent)"
+      >
         <div className="flex flex-col gap-1.5 bg-bg-base" style={{ padding: '10px 12px' }}>
           <EmsRow
             icon="🔥"
             label="화재시"
             value="포말소화제, CO₂ 소화기 사용 · 물분무 냉각"
-            bg="rgba(239,68,68,0.05)"
-            bd="rgba(239,68,68,0.12)"
+            bg="color-mix(in srgb, var(--color-danger) 5%, transparent)"
+            bd="color-mix(in srgb, var(--color-danger) 12%, transparent)"
           />
           <EmsRow
             icon="🌊"
             label="유출시"
             value="오일펜스 전개 · 유흡착재 투입 · 해상 기름 회수"
-            bg="rgba(59,130,246,0.05)"
-            bd="rgba(59,130,246,0.12)"
+            bg="color-mix(in srgb, var(--color-info) 5%, transparent)"
+            bd="color-mix(in srgb, var(--color-info) 12%, transparent)"
           />
           <EmsRow
             icon="🫁"
             label="보호장비"
             value="내화학장갑, 보안경, 방독마스크 · 레벨C 보호복"
-            bg="rgba(168,85,247,0.05)"
-            bd="rgba(168,85,247,0.12)"
+            bg="color-mix(in srgb, var(--color-tertiary) 5%, transparent)"
+            bd="color-mix(in srgb, var(--color-tertiary) 12%, transparent)"
           />
         </div>
       </Sec>
@@ -2178,8 +2275,8 @@ function TabDangerous({ v }: { v: Vessel }) {
         className="rounded-sm text-caption text-fg-disabled"
         style={{
           padding: '8px 10px',
-          background: 'rgba(249,115,22,0.04)',
-          border: '1px solid rgba(249,115,22,0.1)',
+          background: 'color-mix(in srgb, var(--color-warning) 4%, transparent)',
+          border: '1px solid color-mix(in srgb, var(--color-warning) 10%, transparent)',
           lineHeight: 1.6,
         }}
       >
@@ -2271,7 +2368,11 @@ function VesselTooltipContent({ vessel: v }: { vessel: Vessel }) {
 
 function IncidentTooltipContent({ incident: i }: { incident: IncidentCompat }) {
   const statusColor =
-    i.status === 'active' ? '#ef4444' : i.status === 'investigating' ? '#f59e0b' : '#6b7280';
+    i.status === 'active'
+      ? 'var(--color-danger)'
+      : i.status === 'investigating'
+        ? 'var(--color-warning)'
+        : 'var(--fg-disabled)';
 
   return (
     <>
diff --git a/frontend/src/tabs/prediction/components/AnalysisListTable.tsx b/frontend/src/tabs/prediction/components/AnalysisListTable.tsx
index c32b5cd..b895415 100755
--- a/frontend/src/tabs/prediction/components/AnalysisListTable.tsx
+++ b/frontend/src/tabs/prediction/components/AnalysisListTable.tsx
@@ -112,7 +112,7 @@ export function AnalysisListTable({ onTabChange, onSelectAnalysis }: AnalysisLis
         <button
           key={page}
           onClick={() => setCurrentPage(page as number)}
-          className={`px-3 py-1 text-title-3 font-medium rounded transition-colors ${
+          className={`px-3 py-1 text-body-2 font-medium rounded transition-colors ${
             currentPage === page ? 'bg-color-accent text-bg-0' : 'text-fg-sub hover:bg-bg-elevated'
           }`}
         >
@@ -127,8 +127,8 @@ export function AnalysisListTable({ onTabChange, onSelectAnalysis }: AnalysisLis
       {/* 헤더 */}
       <div className="flex items-center justify-between px-5 py-4 border-b border-stroke">
         <div>
-          <h1 className="text-heading-3 font-bold text-fg">유출유 확산 예측 목록</h1>
-          <p className="text-title-3 text-fg-disabled mt-1">총 {analyses.length}건</p>
+          <h1 className="text-heading-3 text-fg">유출유 확산 예측 목록</h1>
+          <p className="text-body-2 text-fg-disabled mt-1">총 {analyses.length}건</p>
         </div>
         <div className="flex items-center gap-3">
           <div className="relative">
@@ -137,12 +137,12 @@ export function AnalysisListTable({ onTabChange, onSelectAnalysis }: AnalysisLis
               placeholder="검색..."
               value={searchTerm}
               onChange={(e) => setSearchTerm(e.target.value)}
-              className="w-64 px-4 py-2 text-title-3 bg-bg-elevated border border-stroke rounded-md text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none"
+              className="w-64 px-4 py-2 text-body-2 bg-bg-elevated border border-stroke rounded-md text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none"
             />
           </div>
           <button
             onClick={() => onTabChange('analysis')}
-            className="px-4 py-2 text-title-3 font-semibold rounded-sm cursor-pointer text-color-accent"
+            className="px-4 py-2 text-body-2 font-semibold rounded-sm cursor-pointer text-color-accent"
             style={{
               border: '1px solid rgba(6,182,212,.3)',
               background: 'rgba(6,182,212,.08)',
@@ -156,7 +156,7 @@ export function AnalysisListTable({ onTabChange, onSelectAnalysis }: AnalysisLis
       {/* 테이블 */}
       <div className="flex-1 overflow-auto">
         {loading ? (
-          <div className="text-center py-20 text-fg-disabled text-title-3">로딩 중...</div>
+          <div className="text-center py-20 text-fg-disabled text-body-2">로딩 중...</div>
         ) : (
           <table className="w-full">
             <thead className="sticky top-0 bg-bg-surface border-b border-stroke z-10">
@@ -208,14 +208,14 @@ export function AnalysisListTable({ onTabChange, onSelectAnalysis }: AnalysisLis
                   key={analysis.predRunSn ?? analysis.acdntSn}
                   className="hover:bg-bg-elevated transition-colors cursor-pointer group"
                 >
-                  <td className="px-4 py-3 text-title-3 text-fg-sub font-mono">
+                  <td className="px-4 py-3 text-body-2 text-fg-sub font-mono">
                     {analysis.acdntSn}
                   </td>
                   <td className="px-4 py-3">
                     <div className="flex items-center gap-2">
                       <span className="w-2 h-2 rounded-full bg-color-danger animate-pulse" />
                       <span
-                        className="text-title-3 font-medium text-color-accent hover:underline transition-all cursor-pointer"
+                        className="text-body-2 font-medium text-color-accent hover:underline transition-all cursor-pointer"
                         onClick={(e) => {
                           e.stopPropagation();
                           if (onSelectAnalysis) {
@@ -227,7 +227,7 @@ export function AnalysisListTable({ onTabChange, onSelectAnalysis }: AnalysisLis
                       </span>
                     </div>
                   </td>
-                  <td className="px-4 py-3 text-title-3 text-fg-sub font-mono">
+                  <td className="px-4 py-3 text-body-2 text-fg-sub font-mono">
                     {analysis.occurredAt
                       ? new Date(analysis.occurredAt).toLocaleString('ko-KR', {
                           month: '2-digit',
@@ -237,7 +237,7 @@ export function AnalysisListTable({ onTabChange, onSelectAnalysis }: AnalysisLis
                         })
                       : '—'}
                   </td>
-                  <td className="px-4 py-3 text-title-3 text-fg-sub font-mono">
+                  <td className="px-4 py-3 text-body-2 text-fg-sub font-mono">
                     {analysis.runDtm
                       ? new Date(analysis.runDtm).toLocaleString('ko-KR', {
                           month: '2-digit',
@@ -247,11 +247,11 @@ export function AnalysisListTable({ onTabChange, onSelectAnalysis }: AnalysisLis
                         })
                       : '—'}
                   </td>
-                  <td className="px-4 py-3 text-title-3 text-fg-sub font-mono">
+                  <td className="px-4 py-3 text-body-2 text-fg-sub font-mono">
                     {analysis.duration}
                   </td>
-                  <td className="px-4 py-3 text-title-3 text-fg-sub">{analysis.oilType}</td>
-                  <td className="px-4 py-3 text-title-3 text-fg font-mono text-right font-medium">
+                  <td className="px-4 py-3 text-body-2 text-fg-sub">{analysis.oilType}</td>
+                  <td className="px-4 py-3 text-body-2 text-fg font-mono text-right font-medium">
                     {analysis.volume != null
                       ? analysis.volume >= 0.01
                         ? analysis.volume.toFixed(2)
@@ -268,8 +268,8 @@ export function AnalysisListTable({ onTabChange, onSelectAnalysis }: AnalysisLis
                   <td className="px-4 py-3 text-center">
                     {getStatusBadge(analysis.backtrackStatus)}
                   </td>
-                  <td className="px-4 py-3 text-title-3 text-fg-sub">{analysis.analyst}</td>
-                  <td className="px-4 py-3 text-title-3 text-fg-sub">{analysis.officeName}</td>
+                  <td className="px-4 py-3 text-body-2 text-fg-sub">{analysis.analyst}</td>
+                  <td className="px-4 py-3 text-body-2 text-fg-sub">{analysis.officeName}</td>
                 </tr>
               ))}
             </tbody>
@@ -277,7 +277,7 @@ export function AnalysisListTable({ onTabChange, onSelectAnalysis }: AnalysisLis
         )}
 
         {!loading && analyses.length === 0 && (
-          <div className="text-center py-20 text-fg-disabled text-title-3">
+          <div className="text-center py-20 text-fg-disabled text-body-2">
             분석 데이터가 없습니다.
           </div>
         )}
@@ -288,14 +288,14 @@ export function AnalysisListTable({ onTabChange, onSelectAnalysis }: AnalysisLis
         <button
           onClick={() => setCurrentPage(1)}
           disabled={currentPage === 1}
-          className="px-3 py-1 text-title-3 font-medium text-fg-sub hover:bg-bg-elevated rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+          className="px-3 py-1 text-body-2 font-medium text-fg-sub hover:bg-bg-elevated rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
         >
           ≪
         </button>
         <button
           onClick={() => setCurrentPage((prev) => Math.max(1, prev - 1))}
           disabled={currentPage === 1}
-          className="px-3 py-1 text-title-3 font-medium text-fg-sub hover:bg-bg-elevated rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+          className="px-3 py-1 text-body-2 font-medium text-fg-sub hover:bg-bg-elevated rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
         >
           ‹
         </button>
@@ -305,14 +305,14 @@ export function AnalysisListTable({ onTabChange, onSelectAnalysis }: AnalysisLis
         <button
           onClick={() => setCurrentPage((prev) => Math.min(totalPages, prev + 1))}
           disabled={currentPage === totalPages}
-          className="px-3 py-1 text-title-3 font-medium text-fg-sub hover:bg-bg-elevated rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+          className="px-3 py-1 text-body-2 font-medium text-fg-sub hover:bg-bg-elevated rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
         >
           ›
         </button>
         <button
           onClick={() => setCurrentPage(totalPages)}
           disabled={currentPage === totalPages}
-          className="px-3 py-1 text-title-3 font-medium text-fg-sub hover:bg-bg-elevated rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+          className="px-3 py-1 text-body-2 font-medium text-fg-sub hover:bg-bg-elevated rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
         >
           ≫
         </button>
diff --git a/frontend/src/tabs/prediction/components/BacktrackModal.tsx b/frontend/src/tabs/prediction/components/BacktrackModal.tsx
index f1aee87..8668677 100755
--- a/frontend/src/tabs/prediction/components/BacktrackModal.tsx
+++ b/frontend/src/tabs/prediction/components/BacktrackModal.tsx
@@ -68,7 +68,7 @@ export function BacktrackModal({
     border: '1px solid var(--bd)',
     borderRadius: '6px',
     color: 'var(--t1)',
-    fontSize: '11px',
+    fontSize: 'var(--font-size-caption)',
     fontFamily: 'var(--fM)',
     outline: 'none',
     opacity: inputDisabled ? 0.6 : 1,
@@ -108,9 +108,8 @@ export function BacktrackModal({
               borderRadius: '10px',
               background: 'linear-gradient(135deg, rgba(168,85,247,0.2), rgba(6,182,212,0.2))',
               border: '1px solid rgba(168,85,247,0.3)',
-              fontSize: '18px',
             }}
-            className="flex items-center justify-center"
+            className="flex items-center justify-center text-title-1"
           >
             🔍
           </div>
@@ -127,7 +126,7 @@ export function BacktrackModal({
               height: '32px',
               borderRadius: '8px',
               background: 'var(--bg-card)',
-              fontSize: '14px',
+              fontSize: 'var(--font-size-body-2)',
             }}
             className="border border-stroke text-fg-disabled cursor-pointer flex items-center justify-center"
           >
@@ -245,7 +244,7 @@ export function BacktrackModal({
                 }}
               >
                 <div className="text-caption text-fg-disabled mb-1">분석 대상 선박</div>
-                <div className="text-sm font-bold text-color-tertiary font-mono">
+                <div className="text-body-2 font-bold text-color-tertiary font-mono">
                   {conditions.totalVessels}척{' '}
                   <span className="text-caption font-medium text-fg-disabled">(AIS 수신)</span>
                 </div>
@@ -371,7 +370,7 @@ function VesselCard({ vessel }: { vessel: BacktrackVessel }) {
             borderRadius: '50%',
             background: `${vessel.color}20`,
             border: `2px solid ${vessel.color}`,
-            fontSize: '12px',
+            fontSize: 'var(--font-size-caption)',
             fontWeight: 800,
             color: vessel.color,
           }}
diff --git a/frontend/src/tabs/prediction/components/BoomDeploymentTheoryView.tsx b/frontend/src/tabs/prediction/components/BoomDeploymentTheoryView.tsx
index cae540d..b3d3089 100755
--- a/frontend/src/tabs/prediction/components/BoomDeploymentTheoryView.tsx
+++ b/frontend/src/tabs/prediction/components/BoomDeploymentTheoryView.tsx
@@ -1222,7 +1222,7 @@ function FieldApplicationPanel() {
               style={{ background: step.bg, border: `1px solid ${step.bd}` }}
             >
               <div
-                className="min-w-[36px] h-[36px] rounded-[9px] flex items-center justify-center font-extrabold text-sm flex-shrink-0"
+                className="min-w-[36px] h-[36px] rounded-[9px] flex items-center justify-center font-extrabold text-body-2 flex-shrink-0"
                 style={{
                   background: step.numBg,
                   border: `1px solid ${step.numBd}`,
diff --git a/frontend/src/tabs/prediction/components/LeftPanel.tsx b/frontend/src/tabs/prediction/components/LeftPanel.tsx
index 71ccb72..4edb0b6 100755
--- a/frontend/src/tabs/prediction/components/LeftPanel.tsx
+++ b/frontend/src/tabs/prediction/components/LeftPanel.tsx
@@ -130,7 +130,7 @@ export function LeftPanel({
   };
 
   return (
-    <div className="w-80 min-w-[320px] bg-bg-surface border-r border-stroke flex flex-col">
+    <div className="w-full min-w-0 h-full bg-bg-surface border-r border-stroke flex flex-col overflow-hidden">
       {/* Scrollable Content */}
       <div
         className="flex-1 overflow-y-scroll scrollbar-thin scrollbar-thumb-border-light scrollbar-track-transparent"
diff --git a/frontend/src/tabs/prediction/components/OilSpillView.tsx b/frontend/src/tabs/prediction/components/OilSpillView.tsx
index 23e3af0..f276a0b 100755
--- a/frontend/src/tabs/prediction/components/OilSpillView.tsx
+++ b/frontend/src/tabs/prediction/components/OilSpillView.tsx
@@ -166,6 +166,8 @@ export const ALL_MODELS: PredictionModel[] = ['KOSPS', 'POSEIDON', 'OpenDrift'];
 
 export function OilSpillView() {
   const { activeSubTab, setActiveSubTab } = useSubMenu('prediction');
+  const [leftCollapsed, setLeftCollapsed] = useState(false);
+  const [rightCollapsed, setRightCollapsed] = useState(false);
   const [enabledLayers, setEnabledLayers] = useState<Set<string>>(new Set());
   const [incidentCoord, setIncidentCoord] = useState<{ lon: number; lat: number } | null>(null);
   const [flyToCoord, setFlyToCoord] = useState<{ lon: number; lat: number } | undefined>(undefined);
@@ -1129,88 +1131,132 @@ export function OilSpillView() {
     <div className="relative flex flex-1 overflow-hidden">
       {/* Left Sidebar */}
       {activeSubTab === 'analysis' && (
-        <LeftPanel
-          selectedAnalysis={selectedAnalysis}
-          enabledLayers={enabledLayers}
-          onToggleLayer={handleToggleLayer}
-          accidentTime={accidentTime}
-          onAccidentTimeChange={(v) => {
-            setAccidentTime(v);
-            setValidationErrors((prev) => {
-              const n = new Set(prev);
-              n.delete('accidentTime');
-              return n;
-            });
-          }}
-          incidentCoord={incidentCoord}
-          onCoordChange={(v) => {
-            setIncidentCoord(v);
-            setValidationErrors((prev) => {
-              const n = new Set(prev);
-              n.delete('coord');
-              return n;
-            });
-          }}
-          isSelectingLocation={isSelectingLocation}
-          onMapSelectClick={() => setIsSelectingLocation((prev) => !prev)}
-          onRunSimulation={handleRunSimulation}
-          isRunningSimulation={isRunningSimulation}
-          selectedModels={selectedModels}
-          onModelsChange={(v) => {
-            setSelectedModels(v);
-            setValidationErrors((prev) => {
-              const n = new Set(prev);
-              n.delete('models');
-              return n;
-            });
-          }}
-          visibleModels={visibleModels}
-          onVisibleModelsChange={setVisibleModels}
-          hasResults={oilTrajectory.length > 0}
-          predictionTime={predictionTime}
-          onPredictionTimeChange={setPredictionTime}
-          spillType={spillType}
-          onSpillTypeChange={setSpillType}
-          oilType={oilType}
-          onOilTypeChange={setOilType}
-          spillAmount={spillAmount}
-          onSpillAmountChange={setSpillAmount}
-          incidentName={incidentName}
-          onIncidentNameChange={(v) => {
-            setIncidentName(v);
-            setValidationErrors((prev) => {
-              const n = new Set(prev);
-              n.delete('incidentName');
-              return n;
-            });
-          }}
-          spillUnit={spillUnit}
-          onSpillUnitChange={setSpillUnit}
-          boomLines={boomLines}
-          onBoomLinesChange={setBoomLines}
-          oilTrajectory={oilTrajectory}
-          algorithmSettings={algorithmSettings}
-          onAlgorithmSettingsChange={setAlgorithmSettings}
-          isDrawingBoom={isDrawingBoom}
-          onDrawingBoomChange={setIsDrawingBoom}
-          drawingPoints={drawingPoints}
-          onDrawingPointsChange={setDrawingPoints}
-          containmentResult={containmentResult}
-          onContainmentResultChange={setContainmentResult}
-          layerOpacity={layerOpacity}
-          onLayerOpacityChange={setLayerOpacity}
-          layerBrightness={layerBrightness}
-          onLayerBrightnessChange={setLayerBrightness}
-          layerColors={layerColors}
-          onLayerColorChange={(id, color) => setLayerColors((prev) => ({ ...prev, [id]: color }))}
-          sensitiveResources={sensitiveResourceCategories}
-          onImageAnalysisResult={handleImageAnalysisResult}
-          validationErrors={validationErrors}
-        />
+        <div className="shrink-0 overflow-hidden" style={{ width: leftCollapsed ? 0 : 320 }}>
+          <LeftPanel
+            selectedAnalysis={selectedAnalysis}
+            enabledLayers={enabledLayers}
+            onToggleLayer={handleToggleLayer}
+            accidentTime={accidentTime}
+            onAccidentTimeChange={(v) => {
+              setAccidentTime(v);
+              setValidationErrors((prev) => {
+                const n = new Set(prev);
+                n.delete('accidentTime');
+                return n;
+              });
+            }}
+            incidentCoord={incidentCoord}
+            onCoordChange={(v) => {
+              setIncidentCoord(v);
+              setValidationErrors((prev) => {
+                const n = new Set(prev);
+                n.delete('coord');
+                return n;
+              });
+            }}
+            isSelectingLocation={isSelectingLocation}
+            onMapSelectClick={() => setIsSelectingLocation((prev) => !prev)}
+            onRunSimulation={handleRunSimulation}
+            isRunningSimulation={isRunningSimulation}
+            selectedModels={selectedModels}
+            onModelsChange={(v) => {
+              setSelectedModels(v);
+              setValidationErrors((prev) => {
+                const n = new Set(prev);
+                n.delete('models');
+                return n;
+              });
+            }}
+            visibleModels={visibleModels}
+            onVisibleModelsChange={setVisibleModels}
+            hasResults={oilTrajectory.length > 0}
+            predictionTime={predictionTime}
+            onPredictionTimeChange={setPredictionTime}
+            spillType={spillType}
+            onSpillTypeChange={setSpillType}
+            oilType={oilType}
+            onOilTypeChange={setOilType}
+            spillAmount={spillAmount}
+            onSpillAmountChange={setSpillAmount}
+            incidentName={incidentName}
+            onIncidentNameChange={(v) => {
+              setIncidentName(v);
+              setValidationErrors((prev) => {
+                const n = new Set(prev);
+                n.delete('incidentName');
+                return n;
+              });
+            }}
+            spillUnit={spillUnit}
+            onSpillUnitChange={setSpillUnit}
+            boomLines={boomLines}
+            onBoomLinesChange={setBoomLines}
+            oilTrajectory={oilTrajectory}
+            algorithmSettings={algorithmSettings}
+            onAlgorithmSettingsChange={setAlgorithmSettings}
+            isDrawingBoom={isDrawingBoom}
+            onDrawingBoomChange={setIsDrawingBoom}
+            drawingPoints={drawingPoints}
+            onDrawingPointsChange={setDrawingPoints}
+            containmentResult={containmentResult}
+            onContainmentResultChange={setContainmentResult}
+            layerOpacity={layerOpacity}
+            onLayerOpacityChange={setLayerOpacity}
+            layerBrightness={layerBrightness}
+            onLayerBrightnessChange={setLayerBrightness}
+            layerColors={layerColors}
+            onLayerColorChange={(id, color) => setLayerColors((prev) => ({ ...prev, [id]: color }))}
+            sensitiveResources={sensitiveResourceCategories}
+            onImageAnalysisResult={handleImageAnalysisResult}
+            validationErrors={validationErrors}
+          />
+        </div>
       )}
 
       {/* Center - Map/Content Area */}
       <div className="flex-1 relative overflow-hidden">
+        {/* Left panel toggle button */}
+        {activeSubTab === 'analysis' && (
+          <button
+            onClick={() => setLeftCollapsed((v) => !v)}
+            className="absolute z-[500] top-1/2 -translate-y-1/2 flex items-center justify-center text-[10px]"
+            style={{
+              left: 0,
+              width: 18,
+              height: 40,
+              background: 'var(--bg-elevated)',
+              border: '1px solid var(--stroke-default)',
+              borderLeft: 'none',
+              borderRadius: '0 6px 6px 0',
+              color: 'var(--fg-sub)',
+              cursor: 'pointer',
+            }}
+          >
+            {leftCollapsed ? '▶' : '◀'}
+          </button>
+        )}
+
+        {/* Right panel toggle button */}
+        {activeSubTab === 'analysis' && (
+          <button
+            onClick={() => setRightCollapsed((v) => !v)}
+            className="absolute z-[500] top-1/2 -translate-y-1/2 flex items-center justify-center text-[10px]"
+            style={{
+              right: 0,
+              width: 18,
+              height: 40,
+              background: 'var(--bg-elevated)',
+              border: '1px solid var(--stroke-default)',
+              borderRight: 'none',
+              borderRadius: '6px 0 0 6px',
+              color: 'var(--fg-sub)',
+              cursor: 'pointer',
+            }}
+          >
+            {rightCollapsed ? '◀' : '▶'}
+          </button>
+        )}
+
         {activeSubTab === 'list' ? (
           <AnalysisListTable
             onTabChange={setActiveSubTab}
@@ -1332,7 +1378,7 @@ export function OilSpillView() {
                             alignItems: 'center',
                             justifyContent: 'center',
                             cursor: 'pointer',
-                            fontSize: '14px',
+                            fontSize: 'var(--font-size-body-2)',
                             transition: '0.2s',
                           }}
                         >
@@ -1358,7 +1404,7 @@ export function OilSpillView() {
                           alignItems: 'center',
                           justifyContent: 'center',
                           cursor: 'pointer',
-                          fontSize: '14px',
+                          fontSize: 'var(--font-size-body-2)',
                           transition: '0.2s',
                         }}
                       >
@@ -1394,7 +1440,7 @@ export function OilSpillView() {
                             alignItems: 'center',
                             justifyContent: 'center',
                             cursor: 'pointer',
-                            fontSize: '12px',
+                            fontSize: 'var(--font-size-caption)',
                             transition: '0.2s',
                           }}
                         >
@@ -1415,7 +1461,7 @@ export function OilSpillView() {
                           alignItems: 'center',
                           justifyContent: 'center',
                           cursor: 'pointer',
-                          fontSize: '11px',
+                          fontSize: 'var(--font-size-caption)',
                           fontWeight: 600,
                           fontFamily: 'var(--font-mono)',
                           transition: '0.2s',
@@ -1439,7 +1485,7 @@ export function OilSpillView() {
                                 position: 'absolute',
                                 left: `${pos}%`,
                                 transform: 'translateX(-50%)',
-                                fontSize: '10px',
+                                fontSize: 'var(--font-size-caption)',
                                 fontFamily: 'var(--font-mono)',
                                 color: isActive ? 'var(--color-accent)' : 'var(--fg-disabled)',
                                 fontWeight: isActive ? 600 : 400,
@@ -1526,7 +1572,7 @@ export function OilSpillView() {
                                     top: '-18px',
                                     left: `${bm.pos}%`,
                                     transform: 'translateX(-50%)',
-                                    fontSize: '12px',
+                                    fontSize: 'var(--font-size-caption)',
                                     cursor: 'pointer',
                                     filter: 'drop-shadow(0 0 4px rgba(245,158,11,0.5))',
                                   }}
@@ -1569,7 +1615,7 @@ export function OilSpillView() {
                     >
                       <div
                         style={{
-                          fontSize: '14px',
+                          fontSize: 'var(--font-size-body-2)',
                           fontWeight: 600,
                           color: 'var(--color-accent)',
                           fontFamily: 'var(--font-mono)',
@@ -1610,7 +1656,7 @@ export function OilSpillView() {
                                 display: 'flex',
                                 alignItems: 'center',
                                 gap: '5px',
-                                fontSize: '11px',
+                                fontSize: 'var(--font-size-caption)',
                               }}
                             >
                               <span className="text-fg-disabled">{s.label}</span>
@@ -1655,44 +1701,46 @@ export function OilSpillView() {
 
       {/* Right Panel */}
       {activeSubTab === 'analysis' && (
-        <RightPanel
-          onOpenBacktrack={handleOpenBacktrack}
-          onOpenRecalc={() => {
-            if (!selectedAnalysis) {
-              alert('선택된 사고가 없습니다.\n분석 목록에서 사고를 선택해주세요.');
-              return;
+        <div className="shrink-0 overflow-hidden" style={{ width: rightCollapsed ? 0 : 300 }}>
+          <RightPanel
+            onOpenBacktrack={handleOpenBacktrack}
+            onOpenRecalc={() => {
+              if (!selectedAnalysis) {
+                alert('선택된 사고가 없습니다.\n분석 목록에서 사고를 선택해주세요.');
+                return;
+              }
+              setRecalcModalOpen(true);
+            }}
+            onOpenReport={handleOpenReport}
+            detail={analysisDetail}
+            summary={
+              stepSummariesByModel[windHydrModel]?.[currentStep] ??
+              summaryByModel[windHydrModel] ??
+              simulationSummary
             }
-            setRecalcModalOpen(true);
-          }}
-          onOpenReport={handleOpenReport}
-          detail={analysisDetail}
-          summary={
-            stepSummariesByModel[windHydrModel]?.[currentStep] ??
-            summaryByModel[windHydrModel] ??
-            simulationSummary
-          }
-          boomBlockedVolume={boomBlockedVolume}
-          displayControls={displayControls}
-          onDisplayControlsChange={setDisplayControls}
-          windHydrModel={windHydrModel}
-          windHydrModelOptions={windHydrModelOptions}
-          onWindHydrModelChange={setWindHydrModel}
-          analysisTab={analysisTab}
-          onSwitchAnalysisTab={setAnalysisTab}
-          drawAnalysisMode={drawAnalysisMode}
-          analysisPolygonPoints={analysisPolygonPoints}
-          circleRadiusNm={circleRadiusNm}
-          onCircleRadiusChange={setCircleRadiusNm}
-          analysisResult={analysisResult}
-          incidentCoord={incidentCoord}
-          centerPoints={centerPoints}
-          predictionTime={predictionTime}
-          onStartPolygonDraw={handleStartPolygonDraw}
-          onRunPolygonAnalysis={handleRunPolygonAnalysis}
-          onRunCircleAnalysis={handleRunCircleAnalysis}
-          onCancelAnalysis={handleCancelAnalysis}
-          onClearAnalysis={handleClearAnalysis}
-        />
+            boomBlockedVolume={boomBlockedVolume}
+            displayControls={displayControls}
+            onDisplayControlsChange={setDisplayControls}
+            windHydrModel={windHydrModel}
+            windHydrModelOptions={windHydrModelOptions}
+            onWindHydrModelChange={setWindHydrModel}
+            analysisTab={analysisTab}
+            onSwitchAnalysisTab={setAnalysisTab}
+            drawAnalysisMode={drawAnalysisMode}
+            analysisPolygonPoints={analysisPolygonPoints}
+            circleRadiusNm={circleRadiusNm}
+            onCircleRadiusChange={setCircleRadiusNm}
+            analysisResult={analysisResult}
+            incidentCoord={incidentCoord}
+            centerPoints={centerPoints}
+            predictionTime={predictionTime}
+            onStartPolygonDraw={handleStartPolygonDraw}
+            onRunPolygonAnalysis={handleRunPolygonAnalysis}
+            onRunCircleAnalysis={handleRunCircleAnalysis}
+            onCancelAnalysis={handleCancelAnalysis}
+            onClearAnalysis={handleClearAnalysis}
+          />
+        </div>
       )}
 
       {/* 확산 예측 실행 중 로딩 오버레이 */}
diff --git a/frontend/src/tabs/prediction/components/RecalcModal.tsx b/frontend/src/tabs/prediction/components/RecalcModal.tsx
index 20802d9..0956154 100755
--- a/frontend/src/tabs/prediction/components/RecalcModal.tsx
+++ b/frontend/src/tabs/prediction/components/RecalcModal.tsx
@@ -159,7 +159,7 @@ export function RecalcModal({
               borderRadius: '10px',
               background: 'linear-gradient(135deg, rgba(249,115,22,0.2), rgba(6,182,212,0.2))',
               border: '1px solid rgba(249,115,22,0.3)',
-              fontSize: '16px',
+              fontSize: 'var(--font-size-body-1)',
             }}
             className="flex items-center justify-center"
           >
@@ -178,7 +178,7 @@ export function RecalcModal({
               height: '28px',
               borderRadius: '6px',
               background: 'var(--bg-card)',
-              fontSize: '12px',
+              fontSize: 'var(--font-size-caption)',
             }}
             className="border border-stroke text-fg-disabled cursor-pointer flex items-center justify-center"
           >
@@ -321,7 +321,7 @@ export function RecalcModal({
                     }
                     toggleModel(model);
                   }}
-                  style={{ fontSize: '11px', padding: '5px 10px' }}
+                  style={{ fontSize: 'var(--font-size-caption)', padding: '5px 10px' }}
                 >
                   <span className="prd-md" style={{ background: color }} />
                   {model}
diff --git a/frontend/src/tabs/prediction/components/RightPanel.tsx b/frontend/src/tabs/prediction/components/RightPanel.tsx
index a31e6d2..a584c70 100755
--- a/frontend/src/tabs/prediction/components/RightPanel.tsx
+++ b/frontend/src/tabs/prediction/components/RightPanel.tsx
@@ -117,7 +117,7 @@ export function RightPanel({
   }, [incidentCoord, centerPoints, summary, predictionTime]);
 
   return (
-    <div className="w-[300px] min-w-[300px] bg-bg-surface border-l border-stroke flex flex-col">
+    <div className="w-full min-w-0 h-full bg-bg-surface border-l border-stroke flex flex-col overflow-hidden">
       {/* Tab Header */}
       <div className="flex border-b border-stroke">
         <button className="flex-1 py-3 text-center text-label-1 font-medium text-color-accent border-b-2 border-color-accent transition-all font-korean">
@@ -580,7 +580,7 @@ export function RightPanel({
 
       {/* Bottom Action Buttons */}
       <div className="flex gap-1.5 p-3 border-t border-stroke">
-        <button className="flex-1 py-2 px-1 rounded-sm text-label-2 font-medium border border-color-accent text-color-accent font-korean hover:bg-[rgba(6,182,212,0.08)] transition-colors">
+        <button className="flex-1 py-2 px-1 rounded-sm text-label-2 font-medium border  border-stroke font-korean hover:bg-[rgba(6,182,212,0.08)] transition-colors">
           저장
         </button>
         <button
@@ -597,7 +597,7 @@ export function RightPanel({
         </button>
         <button
           onClick={onOpenBacktrack}
-          className="flex-1 py-2 px-1 rounded-sm text-label-2 font-medium border border-[var(--color-tertiary)] text-[var(--color-tertiary)] font-korean hover:bg-[rgba(168,85,247,0.08)] transition-colors"
+          className="flex-1 py-2 px-1 rounded-sm text-label-2 font-medium border border-stroke  font-korean hover:bg-[rgba(168,85,247,0.08)] transition-colors"
         >
           역추적
         </button>
diff --git a/frontend/src/tabs/reports/components/ReportGenerator.tsx b/frontend/src/tabs/reports/components/ReportGenerator.tsx
index 8cc0040..0aa23c0 100644
--- a/frontend/src/tabs/reports/components/ReportGenerator.tsx
+++ b/frontend/src/tabs/reports/components/ReportGenerator.tsx
@@ -1120,7 +1120,9 @@ function ReportGenerator({ onSave }: ReportGeneratorProps) {
             {activeSections.length === 0 && (
               <div className="flex flex-col items-center justify-center py-20 text-fg-disabled">
                 <div className="text-4xl mb-4">📋</div>
-                <p className="text-sm font-korean">왼쪽에서 보고서에 포함할 섹션을 선택하세요</p>
+                <p className="text-body-2 font-korean">
+                  왼쪽에서 보고서에 포함할 섹션을 선택하세요
+                </p>
               </div>
             )}
           </div>
diff --git a/frontend/src/tabs/reports/components/ReportsView.tsx b/frontend/src/tabs/reports/components/ReportsView.tsx
index 55cfe05..c654272 100755
--- a/frontend/src/tabs/reports/components/ReportsView.tsx
+++ b/frontend/src/tabs/reports/components/ReportsView.tsx
@@ -171,13 +171,13 @@ export function ReportsView() {
             {filteredReports.length === 0 ? (
               <div className="flex flex-col items-center justify-center py-20 text-fg-disabled">
                 <div className="text-4xl mb-4">📄</div>
-                <p className="text-sm font-korean mb-2">저장된 보고서가 없습니다</p>
+                <p className="text-body-2 font-korean mb-2">저장된 보고서가 없습니다</p>
                 <button
                   onClick={() => {
                     setView({ screen: 'templates' });
                     setActiveSubTab('template');
                   }}
-                  className="px-4 py-2 text-xs font-semibold rounded-md border border-color-accent text-color-accent hover:bg-[color-mix(in_srgb,var(--color-accent)_10%,transparent)] transition-all font-korean mt-4"
+                  className="px-4 py-2 text-caption font-semibold rounded-md border border-color-accent text-color-accent hover:bg-[color-mix(in_srgb,var(--color-accent)_10%,transparent)] transition-all font-korean mt-4"
                 >
                   템플릿에서 작성
                 </button>
@@ -376,7 +376,7 @@ export function ReportsView() {
                         <td className="px-3 py-3 text-center">
                           <button
                             onClick={() => handleDelete(report.id)}
-                            className="w-7 h-7 rounded flex items-center justify-center text-color-danger hover:bg-[color-mix(in_srgb,var(--color-danger)_10%,transparent)] transition-all text-sm"
+                            className="w-7 h-7 rounded flex items-center justify-center text-color-danger hover:bg-[color-mix(in_srgb,var(--color-danger)_10%,transparent)] transition-all text-body-2"
                           >
                             🗑
                           </button>
diff --git a/frontend/src/tabs/rescue/components/RescueScenarioView.tsx b/frontend/src/tabs/rescue/components/RescueScenarioView.tsx
index 4fd23a9..9072508 100755
--- a/frontend/src/tabs/rescue/components/RescueScenarioView.tsx
+++ b/frontend/src/tabs/rescue/components/RescueScenarioView.tsx
@@ -1,4 +1,7 @@
-import { useState, useEffect, useCallback, useRef } from 'react';
+import { useState, useEffect, useCallback, useRef, useMemo } from 'react';
+import { Map, Marker, Popup } from '@vis.gl/react-maplibre';
+import 'maplibre-gl/dist/maplibre-gl.css';
+import { useBaseMapStyle } from '@common/hooks/useBaseMapStyle';
 import { fetchRescueOps, fetchRescueScenarios } from '../services/rescueApi';
 import type { RescueOpsItem, RescueScenarioItem } from '../services/rescueApi';
 
@@ -103,6 +106,295 @@ interface ChartDataItem {
   severity: Severity;
 }
 
+/* ─── 시나리오 관리 요건 ─── */
+const SCENARIO_MGMT_GUIDELINES = [
+  '긴급구난 R&D 분석 결과는 시간 단계별 시나리오의 형태로 관리되어야 함',
+  '각 시나리오는 사고 발생 시점부터 구난 진행 단계별 상태 변화를 포함하여야 함',
+  '시나리오별 분석 결과는 사고 단위로 기존 사고 정보와 연계되어 관리되어야 함',
+  '동일 사고에 대해 복수 시나리오(시간대, 조건별)가 존재할 경우, 상호 비교·검토가 되어야 함',
+  '시나리오별 분석결과는 긴급구난 대응 판단을 지원할 수 있도록 요약 정보 형태로 제공되어야 함',
+  '시나리오 관리 기능은 기존 통합지원시스템의 흐름과 연계되어 실질적인 구난 대응 업무에 활용 가능하도록 반영되어야 함',
+  '긴급구난 시나리오 관리 기능 구현 시 1차 구축 완료된 GIS기능을 활용하여 구축하여 재개발하거나 중복구현하지 않도록 함',
+];
+
+/* ─── Mock 시나리오 (API 미연결 시 폴백) — 긴급구난 모델 이론 기반 10개 ─── */
+const MOCK_SCENARIOS: RescueScenarioItem[] = [
+  {
+    scenarioSn: 1, rescueOpsSn: 1, timeStep: 'T+0h',
+    scenarioDtm: '2024-10-27T01:30:00.000Z', svrtCd: 'CRITICAL',
+    gmM: 0.8, listDeg: 15.0, trimM: 2.5, buoyancyPct: 30.0, oilRateLpm: 100.0, bmRatioPct: 92.0,
+    description: '좌현 35° 충돌로 No.1P 화물탱크 파공. 벙커C유 유출 개시. 손상복원성 분석: 초기 GM 0.8m으로 IMO 기준(1.0m) 미달, 복원력 위험 판정.',
+    compartments: [
+      { name: '#1 FP Tank', status: 'FLOODED', color: 'var(--red)' },
+      { name: '#1 Port Tank', status: 'BREACHED', color: 'var(--red)' },
+      { name: '#2 Port Tank', status: 'RISK', color: 'var(--orange)' },
+      { name: 'Engine Room', status: 'INTACT', color: 'var(--green)' },
+      { name: '#3 Stbd Tank', status: 'INTACT', color: 'var(--green)' },
+    ],
+    assessment: [
+      { label: '복원력', value: '위험 (GM 0.8m < IMO 1.0m)', color: 'var(--red)' },
+      { label: '유출 위험', value: '활발 유출중 (100 L/min)', color: 'var(--red)' },
+      { label: '선체 강도', value: 'BM 92% (경계)', color: 'var(--orange)' },
+      { label: '승선인원', value: '15/20 확인, 5명 수색중', color: 'var(--red)' },
+    ],
+    actions: [
+      { time: '10:30', text: '충돌 발생, VHF Ch.16 조난 통보', color: 'var(--red)' },
+      { time: '10:32', text: 'EPIRB 자동 발신 확인', color: 'var(--red)' },
+      { time: '10:35', text: '해경 3009함 출동 지시', color: 'var(--orange)' },
+      { time: '10:42', text: '인근 선박 구조 활동 개시', color: 'var(--cyan)' },
+    ],
+    sortOrd: 1,
+  },
+  {
+    scenarioSn: 2, rescueOpsSn: 1, timeStep: 'T+30m',
+    scenarioDtm: '2024-10-27T02:00:00.000Z', svrtCd: 'CRITICAL',
+    gmM: 0.7, listDeg: 17.0, trimM: 2.8, buoyancyPct: 28.0, oilRateLpm: 120.0, bmRatioPct: 90.0,
+    description: '잠수사 수중 조사 결과 좌현 No.1P 파공 크기 1.2m×0.8m 확인. Bernoulli 유입률 모델 적용: 수두차 4.5m 기준 유입률 약 2.1㎥/min.',
+    compartments: [
+      { name: '#1 FP Tank', status: 'FLOODED', color: 'var(--red)' },
+      { name: '#1 Port Tank', status: 'BREACHED', color: 'var(--red)' },
+      { name: '#2 Port Tank', status: 'RISK', color: 'var(--orange)' },
+      { name: 'Engine Room', status: 'INTACT', color: 'var(--green)' },
+      { name: '#3 Stbd Tank', status: 'INTACT', color: 'var(--green)' },
+    ],
+    assessment: [
+      { label: '복원력', value: '악화 (GM 0.7m, GZ 커브 감소)', color: 'var(--red)' },
+      { label: '유출 위험', value: '증가 (120 L/min)', color: 'var(--red)' },
+      { label: '선체 강도', value: 'BM 90% — 종강도 모니터링 개시', color: 'var(--orange)' },
+      { label: '승선인원', value: '15명 퇴선, 5명 수색중', color: 'var(--red)' },
+    ],
+    actions: [
+      { time: '10:50', text: '잠수사 투입, 수중 손상 조사 개시', color: 'var(--cyan)' },
+      { time: '10:55', text: '파공 규모 확인: 1.2m×0.8m', color: 'var(--red)' },
+      { time: '11:00', text: '손상복원성 재계산 — IMO 기준 위험', color: 'var(--red)' },
+      { time: '11:00', text: '유출유 방제선 배치 요청', color: 'var(--orange)' },
+    ],
+    sortOrd: 2,
+  },
+  {
+    scenarioSn: 3, rescueOpsSn: 1, timeStep: 'T+1h',
+    scenarioDtm: '2024-10-27T02:30:00.000Z', svrtCd: 'CRITICAL',
+    gmM: 0.65, listDeg: 18.5, trimM: 3.0, buoyancyPct: 26.0, oilRateLpm: 135.0, bmRatioPct: 89.0,
+    description: '해경 3009함 현장 도착, SAR 작전 개시. Leeway 표류 예측 모델: 풍속 8m/s, 해류 2.5kn NE — 실종자 표류 반경 1.2nm. GZ 최대 복원력 각도 25°로 감소.',
+    compartments: [
+      { name: '#1 FP Tank', status: 'FLOODED', color: 'var(--red)' },
+      { name: '#1 Port Tank', status: 'FLOODED', color: 'var(--red)' },
+      { name: '#2 Port Tank', status: 'FLOODING', color: 'var(--red)' },
+      { name: 'Engine Room', status: 'INTACT', color: 'var(--green)' },
+      { name: '#3 Stbd Tank', status: 'INTACT', color: 'var(--green)' },
+    ],
+    assessment: [
+      { label: '복원력', value: '한계 접근 (GM 0.65m)', color: 'var(--red)' },
+      { label: '유출 위험', value: '파공 확대 우려 (135 L/min)', color: 'var(--red)' },
+      { label: '선체 강도', value: 'BM 89% — Hogging 증가', color: 'var(--orange)' },
+      { label: '인명구조', value: '실종 5명 수색중, 표류 1.2nm', color: 'var(--red)' },
+    ],
+    actions: [
+      { time: '11:10', text: '해경 3009함 현장 도착, SAR 구역 설정', color: 'var(--cyan)' },
+      { time: '11:15', text: 'Leeway 표류 예측 모델 적용', color: 'var(--cyan)' },
+      { time: '11:20', text: '회전익 항공기 수색 개시', color: 'var(--cyan)' },
+      { time: '11:30', text: '#2 Port Tank 2차 침수 징후', color: 'var(--red)' },
+    ],
+    sortOrd: 3,
+  },
+  {
+    scenarioSn: 4, rescueOpsSn: 1, timeStep: 'T+2h',
+    scenarioDtm: '2024-10-27T03:30:00.000Z', svrtCd: 'CRITICAL',
+    gmM: 0.5, listDeg: 20.0, trimM: 3.5, buoyancyPct: 22.0, oilRateLpm: 160.0, bmRatioPct: 86.0,
+    description: '격벽 관통으로 #2 Port Tank 침수 확대. 자유표면효과(FSE) 보정: GM_fluid = 0.5m. 종강도: Sagging 모멘트 86%. 침몰 위험 단계 진입.',
+    compartments: [
+      { name: '#1 FP Tank', status: 'FLOODED', color: 'var(--red)' },
+      { name: '#1 Port Tank', status: 'FLOODED', color: 'var(--red)' },
+      { name: '#2 Port Tank', status: 'FLOODED', color: 'var(--red)' },
+      { name: 'Engine Room', status: 'RISK', color: 'var(--orange)' },
+      { name: '#3 Stbd Tank', status: 'INTACT', color: 'var(--green)' },
+    ],
+    assessment: [
+      { label: '복원력', value: '위기 (GM 0.5m, FSE 보정)', color: 'var(--red)' },
+      { label: '유출 위험', value: '최대치 접근 (160 L/min)', color: 'var(--red)' },
+      { label: '선체 강도', value: 'BM 86% — Sagging 경고', color: 'var(--red)' },
+      { label: '승선인원', value: '실종 3명 발견, 2명 수색', color: 'var(--orange)' },
+    ],
+    actions: [
+      { time: '12:00', text: '#2 Port Tank 격벽 관통 침수', color: 'var(--red)' },
+      { time: '12:10', text: '자유표면효과(FSE) 보정 재계산', color: 'var(--red)' },
+      { time: '12:15', text: '긴급 Counter-Flooding 검토', color: 'var(--orange)' },
+      { time: '12:30', text: '실종자 3명 추가 발견 구조', color: 'var(--green)' },
+    ],
+    sortOrd: 4,
+  },
+  {
+    scenarioSn: 5, rescueOpsSn: 1, timeStep: 'T+3h',
+    scenarioDtm: '2024-10-27T04:30:00.000Z', svrtCd: 'HIGH',
+    gmM: 0.55, listDeg: 16.0, trimM: 3.2, buoyancyPct: 25.0, oilRateLpm: 140.0, bmRatioPct: 87.0,
+    description: 'Counter-Flooding 실시: #3 Stbd Tank에 평형수 280톤 주입, 횡경사 20°→16° 교정. 종강도: 중량 재배분으로 BM 87% 유지.',
+    compartments: [
+      { name: '#1 FP Tank', status: 'FLOODED', color: 'var(--red)' },
+      { name: '#1 Port Tank', status: 'FLOODED', color: 'var(--red)' },
+      { name: '#2 Port Tank', status: 'FLOODED', color: 'var(--red)' },
+      { name: 'Engine Room', status: 'RISK', color: 'var(--orange)' },
+      { name: '#3 Stbd Tank', status: 'BALLASTED', color: 'var(--orange)' },
+    ],
+    assessment: [
+      { label: '복원력', value: '개선 중 (GM 0.55m, 경사 16°)', color: 'var(--orange)' },
+      { label: '유출 위험', value: '감소 추세 (140 L/min)', color: 'var(--orange)' },
+      { label: '선체 강도', value: 'BM 87% — Counter-Flooding 평가', color: 'var(--orange)' },
+      { label: '구조 상황', value: '실종 2명 수색 지속', color: 'var(--orange)' },
+    ],
+    actions: [
+      { time: '12:45', text: 'Counter-Flooding — #3 Stbd 주입 개시', color: 'var(--orange)' },
+      { time: '13:00', text: '평형수 280톤 주입, 경사 교정 진행', color: 'var(--cyan)' },
+      { time: '13:15', text: '종강도 재계산 — 허용 범위 내', color: 'var(--cyan)' },
+      { time: '13:30', text: '횡경사 16° 안정화 확인', color: 'var(--green)' },
+    ],
+    sortOrd: 5,
+  },
+  {
+    scenarioSn: 6, rescueOpsSn: 1, timeStep: 'T+6h',
+    scenarioDtm: '2024-10-27T07:30:00.000Z', svrtCd: 'HIGH',
+    gmM: 0.7, listDeg: 12.0, trimM: 2.5, buoyancyPct: 32.0, oilRateLpm: 80.0, bmRatioPct: 90.0,
+    description: '수중패치 설치, 유입률 감소. GM 0.7m 회복. Trim/Stability Booklet 기준 예인 가능 최소 조건(GM≥0.5m, List≤15°) 충족.',
+    compartments: [
+      { name: '#1 FP Tank', status: 'FLOODED', color: 'var(--red)' },
+      { name: '#1 Port Tank', status: 'PATCHED', color: 'var(--orange)' },
+      { name: '#2 Port Tank', status: 'FLOODED', color: 'var(--red)' },
+      { name: 'Engine Room', status: 'INTACT', color: 'var(--green)' },
+      { name: '#3 Stbd Tank', status: 'BALLASTED', color: 'var(--orange)' },
+    ],
+    assessment: [
+      { label: '복원력', value: '개선 (GM 0.7m, 예인 가능)', color: 'var(--orange)' },
+      { label: '유출 위험', value: '수중패치 효과 (80 L/min)', color: 'var(--orange)' },
+      { label: '선체 강도', value: 'BM 90% — 안정 범위', color: 'var(--green)' },
+      { label: '구조 상황', value: '전원 구조 완료', color: 'var(--green)' },
+    ],
+    actions: [
+      { time: '14:00', text: '수중패치 설치 작업 개시', color: 'var(--cyan)' },
+      { time: '14:30', text: '수중패치 설치 완료', color: 'var(--green)' },
+      { time: '15:00', text: '해상크레인 도착, 잔류유 이적 준비', color: 'var(--cyan)' },
+      { time: '16:30', text: '잔류유 1차 이적 완료 (45kL)', color: 'var(--green)' },
+    ],
+    sortOrd: 6,
+  },
+  {
+    scenarioSn: 7, rescueOpsSn: 1, timeStep: 'T+8h',
+    scenarioDtm: '2024-10-27T09:30:00.000Z', svrtCd: 'MEDIUM',
+    gmM: 0.8, listDeg: 10.0, trimM: 2.0, buoyancyPct: 38.0, oilRateLpm: 55.0, bmRatioPct: 91.0,
+    description: '오일붐 2중 전개, 유회수기 3대 가동. GNOME 확산 모델: 12시간 후 확산 면적 2.3km² 예측. 기계적 회수율 35%.',
+    compartments: [
+      { name: '#1 FP Tank', status: 'FLOODED', color: 'var(--red)' },
+      { name: '#1 Port Tank', status: 'PATCHED', color: 'var(--orange)' },
+      { name: '#2 Port Tank', status: 'SEALED', color: 'var(--orange)' },
+      { name: 'Engine Room', status: 'INTACT', color: 'var(--green)' },
+      { name: '#3 Stbd Tank', status: 'BALLASTED', color: 'var(--orange)' },
+    ],
+    assessment: [
+      { label: '복원력', value: '안정 (GM 0.8m)', color: 'var(--orange)' },
+      { label: '유출 위험', value: '방제 진행 (55 L/min, 회수 35%)', color: 'var(--orange)' },
+      { label: '선체 강도', value: 'BM 91%', color: 'var(--green)' },
+      { label: '방제 현황', value: '오일붐 2중, 유회수기 3대', color: 'var(--cyan)' },
+    ],
+    actions: [
+      { time: '17:00', text: '오일붐 1차 전개 (500m)', color: 'var(--cyan)' },
+      { time: '17:30', text: '오일붐 2차 전개 (이중 방어선)', color: 'var(--cyan)' },
+      { time: '17:45', text: '유회수기 3대 배치·가동', color: 'var(--cyan)' },
+      { time: '18:30', text: 'GNOME 확산 예측 갱신', color: 'var(--orange)' },
+    ],
+    sortOrd: 7,
+  },
+  {
+    scenarioSn: 8, rescueOpsSn: 1, timeStep: 'T+12h',
+    scenarioDtm: '2024-10-27T13:30:00.000Z', svrtCd: 'MEDIUM',
+    gmM: 0.9, listDeg: 8.0, trimM: 1.5, buoyancyPct: 45.0, oilRateLpm: 30.0, bmRatioPct: 94.0,
+    description: '예인 개시. 예인 저항 Rt=1/2·ρ·Cd·A·V²  기반 4,000HP급 배정. 목포항 42nm, 예인 속도 3kn, ETA 14h.',
+    compartments: [
+      { name: '#1 FP Tank', status: 'FLOODED', color: 'var(--red)' },
+      { name: '#1 Port Tank', status: 'PATCHED', color: 'var(--orange)' },
+      { name: '#2 Port Tank', status: 'SEALED', color: 'var(--orange)' },
+      { name: 'Engine Room', status: 'INTACT', color: 'var(--green)' },
+      { name: '#3 Stbd Tank', status: 'BALLASTED', color: 'var(--orange)' },
+    ],
+    assessment: [
+      { label: '복원력', value: '안정 (GM 0.9m)', color: 'var(--orange)' },
+      { label: '유출 위험', value: '억제 중 (30 L/min)', color: 'var(--green)' },
+      { label: '선체 강도', value: 'BM 94%', color: 'var(--green)' },
+      { label: '예인 상태', value: '목포항, ETA 14h, 3kn', color: 'var(--cyan)' },
+    ],
+    actions: [
+      { time: '18:00', text: '예인 접속, 예인삭 250m 전개', color: 'var(--cyan)' },
+      { time: '18:30', text: '예인 개시 (목포항 방향)', color: 'var(--cyan)' },
+      { time: '20:00', text: '야간 감시 체제 전환', color: 'var(--orange)' },
+      { time: '22:30', text: '예인 진행률 30%, 선체 안정', color: 'var(--green)' },
+    ],
+    sortOrd: 8,
+  },
+  {
+    scenarioSn: 9, rescueOpsSn: 1, timeStep: 'T+18h',
+    scenarioDtm: '2024-10-27T19:30:00.000Z', svrtCd: 'MEDIUM',
+    gmM: 1.0, listDeg: 5.0, trimM: 1.0, buoyancyPct: 55.0, oilRateLpm: 15.0, bmRatioPct: 96.0,
+    description: '예인 진행률 65%. 파랑 응답 분석(RAO): 유의파고 1.2m, 주기 6s — 횡동요 ±3° 안전 범위. 잔류 유출률 15 L/min.',
+    compartments: [
+      { name: '#1 FP Tank', status: 'FLOODED', color: 'var(--red)' },
+      { name: '#1 Port Tank', status: 'PATCHED', color: 'var(--orange)' },
+      { name: '#2 Port Tank', status: 'SEALED', color: 'var(--orange)' },
+      { name: 'Engine Room', status: 'INTACT', color: 'var(--green)' },
+      { name: '#3 Stbd Tank', status: 'STABLE', color: 'var(--green)' },
+    ],
+    assessment: [
+      { label: '복원력', value: '양호 (GM 1.0m, IMO 충족)', color: 'var(--green)' },
+      { label: '유출 위험', value: '미량 유출 (15 L/min)', color: 'var(--green)' },
+      { label: '선체 강도', value: 'BM 96% 정상', color: 'var(--green)' },
+      { label: '예인 상태', value: '진행률 65%, ETA 5.5h', color: 'var(--cyan)' },
+    ],
+    actions: [
+      { time: '00:00', text: '야간 예인 정상 진행', color: 'var(--green)' },
+      { time: '02:00', text: '파랑 응답 분석 — 안전 확인', color: 'var(--green)' },
+      { time: '03:00', text: '잔류유 유출률 15 L/min', color: 'var(--green)' },
+      { time: '04:30', text: '목포항 VTS 통보, 입항 협의', color: 'var(--cyan)' },
+    ],
+    sortOrd: 9,
+  },
+  {
+    scenarioSn: 10, rescueOpsSn: 1, timeStep: 'T+24h',
+    scenarioDtm: '2024-10-28T01:30:00.000Z', svrtCd: 'RESOLVED',
+    gmM: 1.2, listDeg: 3.0, trimM: 0.5, buoyancyPct: 75.0, oilRateLpm: 5.0, bmRatioPct: 98.0,
+    description: '목포항 접안 완료. 잔류유 전량 이적(120kL). 최종 GM 1.2m IMO 충족, BM 98% 정상. 방제 총 회수량 85kL (회수율 71%). 상황 종료.',
+    compartments: [
+      { name: '#1 FP Tank', status: 'SEALED', color: 'var(--orange)' },
+      { name: '#1 Port Tank', status: 'SEALED', color: 'var(--orange)' },
+      { name: '#2 Port Tank', status: 'SEALED', color: 'var(--orange)' },
+      { name: 'Engine Room', status: 'INTACT', color: 'var(--green)' },
+      { name: '#3 Stbd Tank', status: 'STABLE', color: 'var(--green)' },
+    ],
+    assessment: [
+      { label: '복원력', value: '안전 (GM 1.2m)', color: 'var(--green)' },
+      { label: '유출 위험', value: '차단 완료', color: 'var(--green)' },
+      { label: '선체 강도', value: 'BM 98% 정상', color: 'var(--green)' },
+      { label: '최종 상태', value: '접안 완료, 상황 종료', color: 'var(--green)' },
+    ],
+    actions: [
+      { time: '06:00', text: '목포항 접근, 도선사 대기', color: 'var(--cyan)' },
+      { time: '08:00', text: '도선사 승선, 접안 개시', color: 'var(--cyan)' },
+      { time: '09:30', text: '접안 완료, 잔류유 이적선 접현', color: 'var(--green)' },
+      { time: '10:30', text: '잔류유 전량 이적, 상황 종료', color: 'var(--green)' },
+    ],
+    sortOrd: 10,
+  },
+];
+
+const MOCK_OPS: RescueOpsItem[] = [
+  {
+    rescueOpsSn: 1, acdntSn: 1, opsCd: 'RSC-2026-001', acdntTpCd: 'collision',
+    vesselNm: 'M/V SEA GUARDIAN', commanderNm: null,
+    lon: 126.25, lat: 37.467, locDc: '37°28\'N, 126°15\'E',
+    depthM: 25.0, currentDc: '2.5kn NE',
+    gmM: 0.8, listDeg: 15.0, trimM: 2.5, buoyancyPct: 30.0,
+    oilRateLpm: 100.0, bmRatioPct: 92.0,
+    totalCrew: 20, survivors: 15, missing: 5,
+    hydroData: null, gmdssData: null,
+    sttsCd: 'ACTIVE', regDtm: '2024-10-27T01:30:00.000Z',
+  },
+];
+
 /* ═══════════════════════════════════════════════════════════════════
    RescueScenarioView
    ═══════════════════════════════════════════════════════════════════ */
@@ -116,14 +408,15 @@ export function RescueScenarioView() {
   const [sortBy, setSortBy] = useState<'time' | 'risk'>('time');
   const [detailView, setDetailView] = useState<DetailView>(0);
   const [newScnModalOpen, setNewScnModalOpen] = useState(false);
+  const [guideOpen, setGuideOpen] = useState(false);
 
   const loadScenarios = useCallback(async (opsSn: number) => {
     setLoading(true);
     try {
       const items = await fetchRescueScenarios(opsSn);
-      setApiScenarios(items);
-    } catch (err) {
-      console.error('[rescue] 시나리오 조회 실패:', err);
+      setApiScenarios(items.length > 0 ? items : MOCK_SCENARIOS);
+    } catch {
+      setApiScenarios(MOCK_SCENARIOS);
     } finally {
       setLoading(false);
     }
@@ -132,14 +425,17 @@ export function RescueScenarioView() {
   const loadOps = useCallback(async () => {
     try {
       const items = await fetchRescueOps();
-      setOps(items);
       if (items.length > 0) {
+        setOps(items);
         loadScenarios(items[0].rescueOpsSn);
       } else {
+        setOps(MOCK_OPS);
+        setApiScenarios(MOCK_SCENARIOS);
         setLoading(false);
       }
-    } catch (err) {
-      console.error('[rescue] 구난 작전 목록 조회 실패:', err);
+    } catch {
+      setOps(MOCK_OPS);
+      setApiScenarios(MOCK_SCENARIOS);
       setLoading(false);
     }
   }, [loadScenarios]);
@@ -229,9 +525,35 @@ export function RescueScenarioView() {
           >
             + 신규 시나리오
           </button>
+          <button
+            onClick={() => setGuideOpen((v) => !v)}
+            className="cursor-pointer whitespace-nowrap font-semibold text-label-2 px-[14px] py-1.5 rounded-sm"
+            style={{
+              border: '1px solid rgba(6,182,212,.15)',
+              background: guideOpen ? 'rgba(6,182,212,.12)' : 'transparent',
+              color: guideOpen ? 'var(--color-accent)' : 'var(--fg-disabled)',
+            }}
+          >
+            {guideOpen ? '▴ 관리 요건' : '▾ 관리 요건'}
+          </button>
         </div>
       </div>
 
+      {/* ── 시나리오 관리 요건 가이드라인 ── */}
+      {guideOpen && (
+        <div className="border-b border-stroke px-5 py-3 bg-bg-surface shrink-0">
+          <p className="text-label-1 font-bold mb-2">시나리오 관리 요건</p>
+          <ul className="flex flex-col gap-1">
+            {SCENARIO_MGMT_GUIDELINES.map((g, i) => (
+              <li key={i} className="text-caption text-fg-sub leading-relaxed flex gap-1.5">
+                <span className="text-color-accent shrink-0">{i + 1}.</span>
+                <span>{g}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+
       {/* ── Content: Left List + Right Detail ── */}
       <div className="flex flex-1 overflow-hidden">
         {/* ═══ LEFT: 시나리오 목록 ═══ */}
@@ -376,7 +698,7 @@ export function RescueScenarioView() {
           </div>
 
           {/* View content */}
-          <div className="flex-1 overflow-y-auto scrollbar-thin">
+          <div className={`flex-1 ${detailView === 2 ? 'flex flex-col overflow-hidden' : 'overflow-y-auto scrollbar-thin'}`}>
             {/* ─── VIEW 0: 시나리오 상세 ─── */}
             {detailView === 0 && selected && (
               <div className="p-5">
@@ -536,37 +858,14 @@ export function RescueScenarioView() {
 
             {/* ─── VIEW 2: 지도 오버레이 ─── */}
             {detailView === 2 && (
-              <div className="p-5">
-                <div className="bg-bg-card border border-stroke rounded-[10px] p-5 text-center">
-                  <div className="text-[32px] opacity-30 mb-2.5">🗺</div>
-                  <div className="text-title-4 font-bold mb-1.5">GIS 기반 시나리오 비교</div>
-                  <div className="text-label-2 text-fg-disabled leading-relaxed mb-4">
-                    선택된 시나리오의 침수 구역을 지도 위에 오버레이하여 비교합니다.
-                  </div>
-                  <div className="flex gap-2 justify-center flex-wrap">
-                    {scenarios.map((sc) => (
-                      <div
-                        key={sc.id}
-                        className="px-3 py-1.5 rounded-md text-caption"
-                        style={{
-                          border: `1px solid ${SEV_STYLE[sc.severity].color}40`,
-                          background: SEV_STYLE[sc.severity].bg,
-                        }}
-                      >
-                        <span className="font-bold" style={{ color: SEV_STYLE[sc.severity].color }}>
-                          {sc.id}
-                        </span>
-                        <span className="text-fg-sub ml-1.5">{sc.name}</span>
-                      </div>
-                    ))}
-                  </div>
-                  <div className="mt-4 p-[30px] bg-bg-base rounded-md border border-dashed border-stroke">
-                    <div className="text-label-2 text-fg-disabled">
-                      지도 뷰 영역 — 구난 분석 지도와 연동하여 침수 구역 오버레이 표시
-                    </div>
-                  </div>
-                </div>
-              </div>
+              <ScenarioMapOverlay
+                ops={ops}
+                selectedIncident={selectedIncident}
+                scenarios={scenarios}
+                selectedId={selectedId}
+                checked={checked}
+                onSelectScenario={setSelectedId}
+              />
             )}
           </div>
         </div>
@@ -578,6 +877,310 @@ export function RescueScenarioView() {
   );
 }
 
+/* ═══ 지도 오버레이 ═══ */
+interface ScenarioMapOverlayProps {
+  ops: RescueOpsItem[];
+  selectedIncident: number;
+  scenarios: RescueScenario[];
+  selectedId: string;
+  checked: Set<string>;
+  onSelectScenario: (id: string) => void;
+}
+
+function ScenarioMapOverlay({
+  ops,
+  selectedIncident,
+  scenarios,
+  selectedId,
+  checked,
+  onSelectScenario,
+}: ScenarioMapOverlayProps) {
+  const [popupId, setPopupId] = useState<string | null>(null);
+  const baseMapStyle = useBaseMapStyle();
+
+  const currentOp = ops[selectedIncident] ?? null;
+  const center = useMemo<[number, number]>(
+    () =>
+      currentOp?.lon != null && currentOp?.lat != null
+        ? [currentOp.lon, currentOp.lat]
+        : [126.25, 37.467],
+    [currentOp],
+  );
+
+  const visibleScenarios = useMemo(
+    () => scenarios.filter((s) => checked.has(s.id)),
+    [scenarios, checked],
+  );
+
+  const selected = scenarios.find((s) => s.id === selectedId);
+
+  return (
+    <div className="flex flex-col flex-1 overflow-hidden">
+      {/* 시나리오 선택 바 */}
+      <div className="flex items-center gap-1.5 px-4 py-2 border-b border-stroke bg-bg-surface shrink-0 overflow-x-auto">
+        <span className="text-caption text-fg-disabled shrink-0">시나리오:</span>
+        {visibleScenarios.map((sc) => {
+          const sev = SEV_STYLE[sc.severity];
+          const isActive = selectedId === sc.id;
+          return (
+            <button
+              key={sc.id}
+              onClick={() => onSelectScenario(sc.id)}
+              className="cursor-pointer shrink-0 px-2 py-1 rounded text-caption font-semibold transition-all"
+              style={{
+                border: `1.5px solid ${isActive ? sev.color : sev.color + '40'}`,
+                background: isActive ? sev.bg : 'transparent',
+                color: isActive ? sev.color : 'var(--fg-disabled)',
+              }}
+            >
+              {sc.id} {sc.timeStep}
+            </button>
+          );
+        })}
+      </div>
+
+      {/* 지도 영역 */}
+      <div className="flex-1 relative">
+        <Map
+          initialViewState={{ longitude: center[0], latitude: center[1], zoom: 11 }}
+          mapStyle={baseMapStyle}
+          style={{ width: '100%', height: '100%' }}
+          attributionControl={false}
+        >
+          {/* 사고 위치 마커 */}
+          {currentOp && currentOp.lon != null && currentOp.lat != null && (
+            <Marker longitude={currentOp.lon} latitude={currentOp.lat} anchor="center">
+              <div
+                className="flex items-center justify-center"
+                style={{
+                  width: 28,
+                  height: 28,
+                  borderRadius: '50%',
+                  background: 'rgba(239,68,68,0.25)',
+                  border: '2px solid var(--color-danger)',
+                }}
+              >
+                <div
+                  style={{
+                    width: 10,
+                    height: 10,
+                    borderRadius: '50%',
+                    background: 'var(--color-danger)',
+                  }}
+                />
+              </div>
+            </Marker>
+          )}
+
+          {/* 시나리오별 마커 — 사고 지점 주변에 시간 순서대로 배치 */}
+          {visibleScenarios.map((sc, idx) => {
+            const angle = (idx / visibleScenarios.length) * Math.PI * 2 - Math.PI / 2;
+            const radius = 0.015 + idx * 0.003;
+            const lng = center[0] + Math.cos(angle) * radius;
+            const lat = center[1] + Math.sin(angle) * radius * 0.8;
+            const sev = SEV_STYLE[sc.severity];
+            const isActive = selectedId === sc.id;
+
+            return (
+              <Marker
+                key={sc.id}
+                longitude={lng}
+                latitude={lat}
+                anchor="center"
+                onClick={(e) => {
+                  e.originalEvent.stopPropagation();
+                  onSelectScenario(sc.id);
+                  setPopupId(popupId === sc.id ? null : sc.id);
+                }}
+              >
+                <div
+                  className="cursor-pointer flex items-center justify-center transition-transform"
+                  style={{
+                    width: isActive ? 36 : 28,
+                    height: isActive ? 36 : 28,
+                    borderRadius: '50%',
+                    background: sev.bg,
+                    border: `2px solid ${sev.color}`,
+                    transform: isActive ? 'scale(1.15)' : 'scale(1)',
+                    boxShadow: isActive ? `0 0 12px ${sev.color}60` : 'none',
+                    zIndex: isActive ? 10 : 1,
+                  }}
+                >
+                  <span
+                    className="font-bold font-mono"
+                    style={{ fontSize: isActive ? 11 : 9, color: sev.color }}
+                  >
+                    {sc.timeStep.replace('T+', '')}
+                  </span>
+                </div>
+              </Marker>
+            );
+          })}
+
+          {/* 팝업 — 클릭한 시나리오 정보 표출 */}
+          {popupId &&
+            (() => {
+              const sc = visibleScenarios.find((s) => s.id === popupId);
+              if (!sc) return null;
+              const idx = visibleScenarios.indexOf(sc);
+              const angle = (idx / visibleScenarios.length) * Math.PI * 2 - Math.PI / 2;
+              const radius = 0.015 + idx * 0.003;
+              const lng = center[0] + Math.cos(angle) * radius;
+              const lat = center[1] + Math.sin(angle) * radius * 0.8;
+              const sev = SEV_STYLE[sc.severity];
+
+              return (
+                <Popup
+                  longitude={lng}
+                  latitude={lat}
+                  anchor="bottom"
+                  closeOnClick={false}
+                  onClose={() => setPopupId(null)}
+                  maxWidth="320px"
+                  className="rescue-map-popup"
+                >
+                  <div style={{ padding: '8px 4px', minWidth: 260, background: 'var(--bg-card)', color: 'var(--fg)' }}>
+                    <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 6 }}>
+                      <span style={{ fontWeight: 800, fontFamily: 'monospace', color: sev.color, fontSize: 13 }}>
+                        {sc.id}
+                      </span>
+                      <span style={{ fontWeight: 700, fontSize: 12 }}>{sc.timeStep}</span>
+                      <span
+                        style={{
+                          marginLeft: 'auto',
+                          padding: '1px 6px',
+                          borderRadius: 8,
+                          fontSize: 10,
+                          fontWeight: 700,
+                          background: sev.bg,
+                          color: sev.color,
+                        }}
+                      >
+                        {sev.label}
+                      </span>
+                    </div>
+                    <div style={{ fontSize: 11, color: 'var(--fg-sub)', lineHeight: 1.5, marginBottom: 6 }}>
+                      {sc.description}
+                    </div>
+                    {/* KPI */}
+                    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', gap: 4, marginBottom: 6 }}>
+                      {[
+                        { label: 'GM', value: `${sc.gm}m`, color: gmColor(parseFloat(sc.gm)) },
+                        { label: '횡경사', value: `${sc.list}°`, color: listColor(parseFloat(sc.list)) },
+                        { label: '부력', value: `${sc.buoyancy}%`, color: buoyColor(sc.buoyancy) },
+                        { label: '유출', value: sc.oilRate.split(' ')[0], color: oilColor(parseFloat(sc.oilRate)) },
+                      ].map((m) => (
+                        <div
+                          key={m.label}
+                          style={{
+                            textAlign: 'center',
+                            padding: '3px 2px',
+                            borderRadius: 3,
+                            background: 'var(--bg-base)',
+                            fontSize: 10,
+                          }}
+                        >
+                          <div style={{ color: 'var(--fg-disabled)' }}>{m.label}</div>
+                          <div style={{ fontWeight: 700, fontFamily: 'monospace', color: m.color }}>{m.value}</div>
+                        </div>
+                      ))}
+                    </div>
+                    {/* 구획 상태 */}
+                    {sc.compartments.length > 0 && (
+                      <div style={{ marginBottom: 4 }}>
+                        <div style={{ fontSize: 10, fontWeight: 600, color: 'var(--fg-disabled)', marginBottom: 3 }}>
+                          구획 상태
+                        </div>
+                        <div style={{ display: 'flex', gap: 3, flexWrap: 'wrap' }}>
+                          {sc.compartments.map((c) => (
+                            <span
+                              key={c.name}
+                              style={{
+                                fontSize: 9,
+                                padding: '1px 5px',
+                                borderRadius: 3,
+                                border: `1px solid ${c.color}40`,
+                                color: c.color,
+                              }}
+                            >
+                              {c.name}: {c.status}
+                            </span>
+                          ))}
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                </Popup>
+              );
+            })()}
+        </Map>
+
+        {/* 좌측 하단 — 선택된 시나리오 요약 오버레이 */}
+        {selected && (
+          <div
+            className="absolute bottom-3 left-3 z-10 rounded-lg border border-stroke overflow-hidden"
+            style={{ background: 'rgba(15,23,42,0.92)', width: 280, backdropFilter: 'blur(8px)' }}
+          >
+            <div className="px-3 py-2 border-b border-stroke flex items-center gap-2">
+              <span className="font-bold font-mono text-color-accent text-label-2">{selected.id}</span>
+              <span className="text-caption font-bold">{selected.timeStep}</span>
+              <span
+                className="ml-auto px-1.5 py-0.5 rounded-md text-caption font-bold"
+                style={{ background: SEV_STYLE[selected.severity].bg, color: SEV_STYLE[selected.severity].color }}
+              >
+                {SEV_STYLE[selected.severity].label}
+              </span>
+            </div>
+            <div className="px-3 py-2">
+              <div className="grid grid-cols-4 gap-1 font-mono text-caption mb-2">
+                {[
+                  { label: 'GM', value: `${selected.gm}m`, color: gmColor(parseFloat(selected.gm)) },
+                  { label: '횡경사', value: `${selected.list}°`, color: listColor(parseFloat(selected.list)) },
+                  { label: '부력', value: `${selected.buoyancy}%`, color: buoyColor(selected.buoyancy) },
+                  { label: '유출', value: selected.oilRate.split(' ')[0], color: oilColor(parseFloat(selected.oilRate)) },
+                ].map((m) => (
+                  <div key={m.label} className="text-center p-1 bg-bg-base rounded">
+                    <div className="text-fg-disabled" style={{ fontSize: 9 }}>{m.label}</div>
+                    <div className="font-bold" style={{ color: m.color, fontSize: 11 }}>{m.value}</div>
+                  </div>
+                ))}
+              </div>
+              <div className="text-caption text-fg-sub leading-relaxed" style={{ fontSize: 10 }}>
+                {selected.description.slice(0, 120)}
+                {selected.description.length > 120 ? '...' : ''}
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* 우측 상단 — 범례 */}
+        <div
+          className="absolute top-3 right-3 z-10 rounded-lg border border-stroke px-3 py-2"
+          style={{ background: 'rgba(15,23,42,0.88)', backdropFilter: 'blur(8px)' }}
+        >
+          <div className="text-caption font-bold text-fg-disabled mb-1.5">시나리오 범례</div>
+          {(['CRITICAL', 'HIGH', 'MEDIUM', 'RESOLVED'] as Severity[]).map((sev) => (
+            <div key={sev} className="flex items-center gap-1.5 mb-0.5">
+              <span
+                className="inline-block rounded-full"
+                style={{ width: 8, height: 8, background: SEV_COLOR[sev] }}
+              />
+              <span className="text-caption text-fg-sub">{SEV_STYLE[sev].label}</span>
+            </div>
+          ))}
+          <div className="flex items-center gap-1.5 mt-1 pt-1 border-t border-stroke">
+            <span
+              className="inline-block rounded-full"
+              style={{ width: 8, height: 8, background: 'var(--color-danger)', border: '1px solid var(--color-danger)' }}
+            />
+            <span className="text-caption text-fg-sub">사고 위치</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 /* ═══ 신규 시나리오 생성 모달 ═══ */
 function NewScenarioModal({ ops, onClose }: { ops: RescueOpsItem[]; onClose: () => void }) {
   const overlayRef = useRef<HTMLDivElement>(null);
@@ -1048,14 +1651,14 @@ function NewScenarioModal({ ops, onClose }: { ops: RescueOpsItem[]; onClose: ()
           </div>
           <button
             onClick={onClose}
-            className="px-5 py-2.5 rounded-md border border-stroke bg-bg-card text-fg-sub text-xs font-semibold cursor-pointer"
+            className="px-5 py-2.5 rounded-md border border-stroke bg-bg-card text-fg-sub text-caption font-semibold cursor-pointer"
           >
             취소
           </button>
           {done ? (
             <button
               onClick={onClose}
-              className="px-7 py-2.5 rounded-md border-none text-static-white text-xs font-bold cursor-pointer bg-color-success"
+              className="px-7 py-2.5 rounded-md border-none text-static-white text-caption font-bold cursor-pointer bg-color-success"
             >
               ✅ 생성 완료 — 닫기
             </button>
@@ -1063,7 +1666,7 @@ function NewScenarioModal({ ops, onClose }: { ops: RescueOpsItem[]; onClose: ()
             <button
               onClick={handleSubmit}
               disabled={submitting}
-              className={`px-7 py-2.5 rounded-md border-none text-xs font-bold ${
+              className={`px-7 py-2.5 rounded-md border-none text-caption font-bold ${
                 submitting
                   ? 'bg-bg-card text-fg-disabled cursor-wait'
                   : 'bg-color-navy text-static-white cursor-pointer hover:bg-color-navy-hover'
diff --git a/frontend/src/tabs/rescue/components/RescueView.tsx b/frontend/src/tabs/rescue/components/RescueView.tsx
index d0e22bc..59d27d7 100755
--- a/frontend/src/tabs/rescue/components/RescueView.tsx
+++ b/frontend/src/tabs/rescue/components/RescueView.tsx
@@ -1,9 +1,12 @@
 import { Fragment, useState, useEffect, useCallback } from 'react';
 import { useSubMenu } from '@common/hooks/useSubMenu';
+import { MapView } from '@common/components/map/MapView';
 import { RescueTheoryView } from './RescueTheoryView';
 import { RescueScenarioView } from './RescueScenarioView';
 import { fetchRescueOps } from '../services/rescueApi';
 import type { RescueOpsItem } from '../services/rescueApi';
+import { fetchIncidentsRaw } from '@tabs/incidents/services/incidentsApi';
+import type { IncidentListItem } from '@tabs/incidents/services/incidentsApi';
 
 /* ─── Types ─── */
 type AccidentType =
@@ -221,12 +224,145 @@ function TopInfoBar({ activeType }: { activeType: AccidentType }) {
 function LeftPanel({
   activeType,
   onTypeChange,
+  incidents,
+  selectedAcdnt,
+  onSelectAcdnt,
 }: {
   activeType: AccidentType;
   onTypeChange: (t: AccidentType) => void;
+  incidents: IncidentListItem[];
+  selectedAcdnt: IncidentListItem | null;
+  onSelectAcdnt: (item: IncidentListItem | null) => void;
 }) {
+  const [acdntName, setAcdntName] = useState('');
+  const [acdntDate, setAcdntDate] = useState('');
+  const [acdntTime, setAcdntTime] = useState('');
+  const [acdntLat, setAcdntLat] = useState('');
+  const [acdntLon, setAcdntLon] = useState('');
+  const [showList, setShowList] = useState(false);
+
+  // 사고 선택 시 필드 자동 채움
+  const handlePickIncident = (item: IncidentListItem) => {
+    onSelectAcdnt(item);
+    setAcdntName(item.acdntNm);
+    const dt = new Date(item.occrnDtm);
+    setAcdntDate(
+      `${dt.getFullYear()}. ${String(dt.getMonth() + 1).padStart(2, '0')}. ${String(dt.getDate()).padStart(2, '0')}.`,
+    );
+    setAcdntTime(
+      `${dt.getHours() >= 12 ? '오후' : '오전'} ${String(dt.getHours() % 12 || 12).padStart(2, '0')}:${String(dt.getMinutes()).padStart(2, '0')}`,
+    );
+    setAcdntLat(String(item.lat));
+    setAcdntLon(String(item.lng));
+    setShowList(false);
+  };
+
   return (
     <div className="w-[208px] min-w-[208px] bg-bg-base border-r border-stroke flex flex-col overflow-y-auto scrollbar-thin p-2 gap-0.5">
+      {/* ── 사고 기본정보 ── */}
+      <div className="text-caption font-bold text-fg-disabled font-korean mb-0.5 tracking-wider">
+        사고 기본정보
+      </div>
+
+      {/* 사고명 직접 입력 */}
+      <input
+        type="text"
+        placeholder="사고명 직접 입력"
+        value={acdntName}
+        onChange={(e) => {
+          setAcdntName(e.target.value);
+          if (selectedAcdnt) onSelectAcdnt(null);
+        }}
+        className="w-full px-2 py-1.5 text-caption bg-bg-card border border-stroke rounded font-korean placeholder:text-fg-disabled/50 text-fg focus:border-[rgba(6,182,212,0.5)] focus:outline-none"
+      />
+
+      {/* 또는 사고 리스트에서 선택 */}
+      <div className="relative">
+        <button
+          onClick={() => setShowList(!showList)}
+          className="w-full px-2 py-1.5 text-caption bg-bg-card border border-stroke rounded font-korean text-left cursor-pointer hover:border-[var(--stroke-light)] flex items-center justify-between"
+        >
+          <span className={selectedAcdnt ? 'text-fg' : 'text-fg-disabled/50'}>
+            {selectedAcdnt ? selectedAcdnt.acdntCd : '또는 사고 리스트에서 선택'}
+          </span>
+          <span className="text-fg-disabled text-[10px]">{showList ? '▲' : '▼'}</span>
+        </button>
+        {showList && (
+          <div className="absolute left-0 right-0 top-full mt-0.5 z-30 bg-bg-card border border-stroke rounded shadow-lg max-h-[200px] overflow-y-auto scrollbar-thin">
+            {incidents.length === 0 && (
+              <div className="px-2 py-3 text-caption text-fg-disabled text-center font-korean">
+                사고 데이터 없음
+              </div>
+            )}
+            {incidents.map((item) => (
+              <button
+                key={item.acdntSn}
+                onClick={() => handlePickIncident(item)}
+                className="w-full text-left px-2 py-1.5 text-caption font-korean hover:bg-bg-surface cursor-pointer border-b border-stroke last:border-b-0"
+              >
+                <div className="text-fg font-semibold truncate">{item.acdntNm}</div>
+                <div className="text-fg-disabled text-[10px]">
+                  {item.acdntCd} · {item.regionNm}
+                </div>
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* 사고 발생 일시 */}
+      <div className="text-[10px] text-fg-disabled font-korean mt-1">사고 발생 일시</div>
+      <div className="flex gap-1">
+        <input
+          type="text"
+          placeholder="2026. 04. 11."
+          value={acdntDate}
+          onChange={(e) => setAcdntDate(e.target.value)}
+          className="flex-1 min-w-0 px-1.5 py-1 text-caption bg-bg-card border border-stroke rounded font-mono text-fg placeholder:text-fg-disabled/50 focus:border-[rgba(6,182,212,0.5)] focus:outline-none"
+        />
+        <input
+          type="text"
+          placeholder="오후 03:42"
+          value={acdntTime}
+          onChange={(e) => setAcdntTime(e.target.value)}
+          className="flex-1 min-w-0 px-1.5 py-1 text-caption bg-bg-card border border-stroke rounded font-mono text-fg placeholder:text-fg-disabled/50 focus:border-[rgba(6,182,212,0.5)] focus:outline-none"
+        />
+      </div>
+
+      {/* 위도 / 경도 */}
+      <div className="flex gap-1 mt-0.5">
+        <input
+          type="text"
+          placeholder="위도"
+          value={acdntLat}
+          onChange={(e) => setAcdntLat(e.target.value)}
+          className="flex-1 min-w-0 px-1.5 py-1 text-caption bg-bg-card border border-stroke rounded font-mono text-fg placeholder:text-fg-disabled/50 focus:border-[rgba(6,182,212,0.5)] focus:outline-none"
+        />
+        <input
+          type="text"
+          placeholder="경도"
+          value={acdntLon}
+          onChange={(e) => setAcdntLon(e.target.value)}
+          className="flex-1 min-w-0 px-1.5 py-1 text-caption bg-bg-card border border-stroke rounded font-mono text-fg placeholder:text-fg-disabled/50 focus:border-[rgba(6,182,212,0.5)] focus:outline-none"
+        />
+        <button
+          className="shrink-0 px-1.5 py-1 text-[10px] font-bold rounded cursor-pointer"
+          style={{
+            background: 'rgba(239,68,68,0.15)',
+            color: 'var(--color-danger)',
+            border: '1px solid rgba(239,68,68,0.3)',
+          }}
+        >
+          지도
+        </button>
+      </div>
+      <div className="text-[10px] text-fg-disabled font-korean text-center mb-1">
+        지도에서 위치를 선택하세요
+      </div>
+
+      {/* 구분선 */}
+      <div className="border-t border-stroke my-1" />
+
       {/* 사고유형 제목 */}
       <div className="text-caption font-bold text-fg-disabled font-korean mb-0.5 tracking-wider">
         사고 유형 (INCIDENT TYPE)
@@ -290,191 +426,6 @@ function LeftPanel({
 }
 
 /* ─── 중앙 지도 영역 ─── */
-function CenterMap({ activeType }: { activeType: AccidentType }) {
-  const d = rscTypeData[activeType];
-
-  return (
-    <div className="flex-1 relative overflow-hidden bg-bg-base">
-      {/* 해양 배경 그라데이션 */}
-      <div
-        className="absolute inset-0"
-        style={{
-          background:
-            'radial-gradient(ellipse at 30% 40%, rgba(6,90,130,.25) 0%, transparent 60%), radial-gradient(ellipse at 70% 60%, rgba(8,60,100,.2) 0%, transparent 50%), linear-gradient(180deg, #0a1628, #0d1f35 50%, #091520)',
-        }}
-      />
-      {/* 격자 */}
-      <div
-        className="absolute inset-0"
-        style={{
-          backgroundImage:
-            'linear-gradient(rgba(30,60,100,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(30,60,100,.12) 1px, transparent 1px)',
-          backgroundSize: '80px 80px',
-        }}
-      />
-      {/* 해안선 힌트 */}
-      <div
-        className="absolute right-0 top-0 w-[55%] h-full"
-        style={{
-          background:
-            'linear-gradient(225deg, rgba(30,50,70,.55), rgba(20,35,50,.25) 35%, transparent 55%)',
-          clipPath:
-            'polygon(60% 0%, 65% 5%, 70% 12%, 72% 20%, 68% 30%, 65% 40%, 60% 50%, 55% 58%, 50% 65%, 45% 72%, 42% 80%, 48% 88%, 100% 100%, 100% 0%)',
-        }}
-      />
-
-      {/* 사고 해역 정보 */}
-      <div className="absolute top-2.5 left-2.5 z-20 bg-[var(--dropdown-bg)] border border-stroke rounded-md px-3 py-2 backdrop-blur-sm font-mono text-caption text-fg-disabled">
-        <div className="text-label-2 font-bold text-fg font-korean mb-1">사고 해역 정보</div>
-        <div className="grid gap-x-1.5 gap-y-px" style={{ gridTemplateColumns: '32px 1fr' }}>
-          <span>위치</span>
-          <b className="text-fg">37°28'N, 126°15'E</b>
-          <span>수심</span>
-          <b className="text-fg">45m</b>
-          <span>조류</span>
-          <b className="text-fg">2.5 knots NE</b>
-        </div>
-      </div>
-
-      {/* 선박 모형 */}
-      <div className="absolute z-[15] top-[42%] left-[46%] -rotate-[15deg]">
-        <div
-          className="relative w-[72px] h-5"
-          style={{
-            background: 'linear-gradient(90deg, #4a3728, #6b4c33)',
-            borderRadius: '3px 10px 10px 3px',
-            border: '1px solid rgba(255,150,50,.4)',
-            boxShadow: '0 0 18px rgba(255,100,0,.2)',
-          }}
-        >
-          <div
-            className="absolute w-0.5 h-[7px] bg-fg-disabled rounded-[1px]"
-            style={{ top: '-3px', left: '60%' }}
-          />
-        </div>
-        <div className="text-caption text-center mt-0.5 font-mono text-[rgba(255,200,150,0.5)]">
-          M/V SEA GUARDIAN
-        </div>
-      </div>
-
-      {/* 예측 구역 원 */}
-      <div
-        className="absolute z-[5] rounded-full"
-        style={{
-          top: '32%',
-          left: '32%',
-          width: '220px',
-          height: '220px',
-          background:
-            'radial-gradient(circle, rgba(6,182,212,.07), rgba(6,182,212,.02) 50%, transparent 70%)',
-          border: '1.5px dashed rgba(6,182,212,.2)',
-        }}
-      />
-      {/* 구역 라벨 */}
-      <div className="absolute z-[6] text-caption font-korean font-semibold tracking-wider uppercase whitespace-pre-line text-[rgba(6,182,212,0.45)] top-1/2 left-[36%]">
-        {d.zone.replace('\\n', '\n')}
-      </div>
-
-      {/* SAR 자산 */}
-      <div className="absolute z-10 text-caption font-mono text-[rgba(200,220,255,0.35)] top-[10%] left-[42%]">
-        ETA 5 MIN ─
-      </div>
-      <div className="absolute z-10 text-caption font-mono text-[rgba(200,220,255,0.35)] top-[14%] left-[56%]">
-        ETA 15 MIN ─
-      </div>
-      <div className="absolute z-[12] text-title-3 opacity-60 top-[7%] left-[52%] -rotate-[30deg]">
-        🚁
-      </div>
-      <div className="absolute z-[12] text-caption font-mono text-[rgba(200,220,255,0.45)] top-[20%] left-[60%]">
-        6M
-      </div>
-      <div className="absolute z-[12] text-label-2 opacity-45 top-[28%] left-[54%]">🚢</div>
-
-      {/* 환경 민감 구역 */}
-      <div className="absolute z-10 px-3.5 py-2 rounded bg-[rgba(34,197,94,0.06)] border border-[rgba(34,197,94,0.2)] bottom-[6%] right-[6%]">
-        <div className="text-caption font-bold font-serif uppercase tracking-wider leading-snug text-[rgba(34,197,94,0.55)]">
-          ENVIRONMENTALLY SENSITIVE
-          <br />
-          AREA: AQUACULTURE FARM
-        </div>
-      </div>
-
-      {/* 지도 컨트롤 */}
-      <div className="absolute top-2.5 right-2.5 z-20 flex flex-col gap-0.5">
-        {['🗺', '🔍', '📐'].map((ico, i) => (
-          <button
-            key={i}
-            className="w-7 h-7 bg-[rgba(13,17,23,0.85)] border border-stroke rounded text-fg-disabled text-label-1 flex items-center justify-center cursor-pointer hover:text-fg"
-          >
-            {ico}
-          </button>
-        ))}
-      </div>
-
-      {/* 스케일 바 */}
-      <div className="absolute bottom-2.5 left-2.5 z-20 bg-[rgba(13,17,23,0.8)] border border-stroke rounded px-2.5 py-1 text-caption text-fg-disabled font-mono">
-        <div
-          className="w-[70px] h-0.5 mb-0.5"
-          style={{ background: 'linear-gradient(90deg, #e4e8f1 50%, var(--stroke-default) 50%)' }}
-        />
-        5 km · Zoom: 100%
-      </div>
-
-      {/* 사고 유형 표시 */}
-      {/* <div className="absolute bottom-2.5 right-2.5 z-20 bg-[rgba(13,17,23,0.85)] border border-stroke rounded px-3 py-1.5">
-        <div className="text-caption text-fg-disabled font-korean">현재 사고 유형</div>
-        <div className="text-label-2 font-bold font-korean text-color-accent">
-          {at.icon} {at.label} ({at.eng})
-        </div>
-      </div> */}
-
-      {/* 타임라인 시뮬레이션 컨트롤 */}
-      <div className="absolute bottom-2.5 left-1/2 -translate-x-1/2 z-20 bg-[rgba(13,17,23,0.9)] border border-stroke rounded-md px-4 py-2 flex items-center gap-4 backdrop-blur-sm">
-        <div className="text-caption font-bold text-fg font-korean whitespace-nowrap">TIMELINE</div>
-        <div className="flex items-center gap-1.5 text-caption text-fg-disabled font-mono">
-          <span>[-6h]</span>
-          <span className="font-bold text-fg">[NOW]</span>
-          <span>[+6H]</span>
-          <span>[+12H]</span>
-          <span>[+24H]</span>
-        </div>
-        <div className="relative w-24 h-1.5 bg-bg-surface-hover rounded-sm">
-          <div
-            className="absolute rounded-full border-2 border-bg-0 bg-color-accent"
-            style={{
-              left: '35%',
-              top: '-3px',
-              width: '12px',
-              height: '12px',
-              boxShadow: '0 0 8px rgba(6,182,212,.4)',
-            }}
-          />
-        </div>
-        <div className="flex items-center gap-1.5">
-          <button className="w-6 h-6 bg-bg-card border border-stroke rounded-full text-fg-disabled text-label-2 flex items-center justify-center cursor-pointer hover:text-fg">
-            ⏮
-          </button>
-          <button
-            className="w-8 h-8 rounded-full text-color-accent text-title-4 flex items-center justify-center cursor-pointer hover:brightness-125"
-            style={{
-              background: 'color-mix(in srgb, var(--color-accent) 15%, transparent)',
-              border: '1px solid color-mix(in srgb, var(--color-accent) 30%, transparent)',
-            }}
-          >
-            ▶
-          </button>
-          <button className="w-6 h-6 bg-bg-card border border-stroke rounded-full text-fg-disabled text-label-2 flex items-center justify-center cursor-pointer hover:text-fg">
-            ⏭
-          </button>
-        </div>
-        <div className="text-caption text-fg-disabled font-mono whitespace-nowrap">
-          <b className="text-color-accent">10:45</b> KST
-        </div>
-      </div>
-    </div>
-  );
-}
-
 /* ─── 오른쪽 분석 패널 ─── */
 function RightPanel({
   activeAnalysis,
@@ -1572,6 +1523,44 @@ export function RescueView() {
   const { activeSubTab } = useSubMenu('rescue');
   const [activeType, setActiveType] = useState<AccidentType>('collision');
   const [activeAnalysis, setActiveAnalysis] = useState<AnalysisTab>('rescue');
+  const [incidents, setIncidents] = useState<IncidentListItem[]>([]);
+  const [selectedAcdnt, setSelectedAcdnt] = useState<IncidentListItem | null>(null);
+  const [incidentCoord, setIncidentCoord] = useState<{ lon: number; lat: number } | null>(null);
+  const [isSelectingLocation, setIsSelectingLocation] = useState(false);
+
+  useEffect(() => {
+    fetchIncidentsRaw()
+      .then((items) => setIncidents(items))
+      .catch(() => setIncidents([]));
+  }, []);
+
+  // 지도 클릭 시 좌표 선택
+  const handleMapClick = useCallback((lon: number, lat: number) => {
+    setIncidentCoord({ lon, lat });
+    setIsSelectingLocation(false);
+  }, []);
+
+  // 사고 선택 시 사고유형 자동 매핑
+  const handleSelectAcdnt = useCallback(
+    (item: IncidentListItem | null) => {
+      setSelectedAcdnt(item);
+      if (item) {
+        const typeMap: Record<string, AccidentType> = {
+          collision: 'collision',
+          grounding: 'grounding',
+          turning: 'turning',
+          capsizing: 'capsizing',
+          sharpTurn: 'sharpTurn',
+          flooding: 'flooding',
+          sinking: 'sinking',
+        };
+        const mapped = typeMap[item.acdntTpCd];
+        if (mapped) setActiveType(mapped);
+        setIncidentCoord({ lon: item.lng, lat: item.lat });
+      }
+    },
+    [],
+  );
 
   if (activeSubTab === 'list') {
     return (
@@ -1596,8 +1585,23 @@ export function RescueView() {
 
       {/* 3단 레이아웃: 사고유형 | 지도 | 분석 패널 */}
       <div className="flex flex-1 overflow-hidden">
-        <LeftPanel activeType={activeType} onTypeChange={setActiveType} />
-        <CenterMap activeType={activeType} />
+        <LeftPanel
+          activeType={activeType}
+          onTypeChange={setActiveType}
+          incidents={incidents}
+          selectedAcdnt={selectedAcdnt}
+          onSelectAcdnt={handleSelectAcdnt}
+        />
+        <div className="flex-1 relative overflow-hidden">
+          <MapView
+            incidentCoord={incidentCoord ?? undefined}
+            isSelectingLocation={isSelectingLocation}
+            onMapClick={handleMapClick}
+            oilTrajectory={[]}
+            enabledLayers={new Set()}
+            showOverlays={false}
+          />
+        </div>
         <RightPanel
           activeAnalysis={activeAnalysis}
           onAnalysisChange={setActiveAnalysis}
diff --git a/frontend/src/tabs/scat/components/DistributionView.tsx b/frontend/src/tabs/scat/components/DistributionView.tsx
index b1c45dd..9fb2c2a 100644
--- a/frontend/src/tabs/scat/components/DistributionView.tsx
+++ b/frontend/src/tabs/scat/components/DistributionView.tsx
@@ -3,8 +3,8 @@ function DistributionView() {
     <div className="flex w-full h-full bg-bg-base items-center justify-center">
       <div className="text-center">
         <div className="text-3xl opacity-20 mb-3">🗺</div>
-        <div className="text-sm font-bold text-fg-sub font-korean mb-1">해양오염분포도</div>
-        <div className="text-xs text-fg-disabled font-korean">
+        <div className="text-body-2 font-bold text-fg-sub font-korean mb-1">해양오염분포도</div>
+        <div className="text-caption text-fg-disabled font-korean">
           해양오염 분포도 기능이 준비 중입니다.
         </div>
       </div>
diff --git a/frontend/src/tabs/scat/components/PreScatView.tsx b/frontend/src/tabs/scat/components/PreScatView.tsx
index d7a0ec1..62f7d9d 100755
--- a/frontend/src/tabs/scat/components/PreScatView.tsx
+++ b/frontend/src/tabs/scat/components/PreScatView.tsx
@@ -16,6 +16,8 @@ import ScatRightPanel from './ScatRightPanel';
 // ═══ Main PreScatView ═══
 
 export function PreScatView() {
+  const [leftCollapsed, setLeftCollapsed] = useState(false);
+  const [rightCollapsed, setRightCollapsed] = useState(false);
   const [segments, setSegments] = useState<ScatSegment[]>([]);
   const [zones, setZones] = useState<ApiZoneItem[]>([]);
   const [jurisdictions, setJurisdictions] = useState<string[]>([]);
@@ -175,13 +177,13 @@ export function PreScatView() {
   if (error) {
     return (
       <div className="flex w-full h-full bg-bg-base items-center justify-center flex-col gap-3">
-        <div className="text-color-danger text-sm font-korean">{error}</div>
+        <div className="text-color-danger text-body-2 font-korean">{error}</div>
         <button
           onClick={() => {
             setError(null);
             setLoading(true);
           }}
-          className="px-4 py-1.5 bg-color-accent text-white text-xs rounded font-korean"
+          className="px-4 py-1.5 bg-color-accent text-white text-caption rounded font-korean"
         >
           다시 시도
         </button>
@@ -192,36 +194,77 @@ export function PreScatView() {
   if (loading || !selectedSeg) {
     return (
       <div className="flex w-full h-full bg-bg-base items-center justify-center">
-        <div className="text-fg-sub text-sm font-korean">SCAT 데이터 로딩 중...</div>
+        <div className="text-fg-sub text-body-2 font-korean">SCAT 데이터 로딩 중...</div>
       </div>
     );
   }
 
   return (
     <div className="flex w-full h-full bg-bg-base overflow-hidden">
-      <ScatLeftPanel
-        segments={segments}
-        zones={zones}
-        jurisdictions={jurisdictions}
-        offices={offices}
-        selectedOffice={selectedOffice}
-        onOfficeChange={setSelectedOffice}
-        selectedSeg={selectedSeg}
-        onSelectSeg={setSelectedSeg}
-        onOpenPopup={handleOpenPopup}
-        jurisdictionFilter={jurisdictionFilter}
-        onJurisdictionChange={setJurisdictionFilter}
-        areaFilter={areaFilter}
-        onAreaChange={setAreaFilter}
-        phaseFilter={phaseFilter}
-        onPhaseChange={setPhaseFilter}
-        statusFilter={statusFilter}
-        onStatusChange={setStatusFilter}
-        searchTerm={searchTerm}
-        onSearchChange={setSearchTerm}
-      />
+      {/* Left Panel */}
+      <div className="shrink-0 overflow-hidden" style={{ width: leftCollapsed ? 0 : 340 }}>
+        <ScatLeftPanel
+          segments={segments}
+          zones={zones}
+          jurisdictions={jurisdictions}
+          offices={offices}
+          selectedOffice={selectedOffice}
+          onOfficeChange={setSelectedOffice}
+          selectedSeg={selectedSeg}
+          onSelectSeg={setSelectedSeg}
+          onOpenPopup={handleOpenPopup}
+          jurisdictionFilter={jurisdictionFilter}
+          onJurisdictionChange={setJurisdictionFilter}
+          areaFilter={areaFilter}
+          onAreaChange={setAreaFilter}
+          phaseFilter={phaseFilter}
+          onPhaseChange={setPhaseFilter}
+          statusFilter={statusFilter}
+          onStatusChange={setStatusFilter}
+          searchTerm={searchTerm}
+          onSearchChange={setSearchTerm}
+        />
+      </div>
+
+      <div className="flex-1 relative overflow-hidden">
+        {/* Left panel toggle button */}
+        <button
+          onClick={() => setLeftCollapsed((v) => !v)}
+          className="absolute z-[500] top-1/2 -translate-y-1/2 flex items-center justify-center text-[10px]"
+          style={{
+            left: 0,
+            width: 18,
+            height: 40,
+            background: 'var(--bg-elevated)',
+            border: '1px solid var(--stroke-default)',
+            borderLeft: 'none',
+            borderRadius: '0 6px 6px 0',
+            color: 'var(--fg-sub)',
+            cursor: 'pointer',
+          }}
+        >
+          {leftCollapsed ? '▶' : '◀'}
+        </button>
+
+        {/* Right panel toggle button */}
+        <button
+          onClick={() => setRightCollapsed((v) => !v)}
+          className="absolute z-[500] top-1/2 -translate-y-1/2 flex items-center justify-center text-[10px]"
+          style={{
+            right: 0,
+            width: 18,
+            height: 40,
+            background: 'var(--bg-elevated)',
+            border: '1px solid var(--stroke-default)',
+            borderRight: 'none',
+            borderRadius: '6px 0 0 6px',
+            color: 'var(--fg-sub)',
+            cursor: 'pointer',
+          }}
+        >
+          {rightCollapsed ? '◀' : '▶'}
+        </button>
 
-      <div className="flex-1 relative">
         <ScatMap
           segments={segments}
           zones={zones}
@@ -237,7 +280,10 @@ export function PreScatView() {
         /> */}
       </div>
 
-      <ScatRightPanel detail={panelDetail} loading={panelLoading} />
+      {/* Right Panel */}
+      <div className="shrink-0 overflow-hidden" style={{ width: rightCollapsed ? 0 : 280 }}>
+        <ScatRightPanel detail={panelDetail} loading={panelLoading} />
+      </div>
 
       {popupData && (
         <ScatPopup data={popupData} segCode={selectedSeg.code} onClose={handleClosePopup} />
diff --git a/frontend/src/tabs/scat/components/ScatLeftPanel.tsx b/frontend/src/tabs/scat/components/ScatLeftPanel.tsx
index 7cdc25d..0e8b725 100644
--- a/frontend/src/tabs/scat/components/ScatLeftPanel.tsx
+++ b/frontend/src/tabs/scat/components/ScatLeftPanel.tsx
@@ -156,7 +156,7 @@ function ScatLeftPanel({
   }, []);
 
   return (
-    <div className="w-[340px] min-w-[340px] bg-bg-surface border-r border-stroke flex flex-col overflow-hidden">
+    <div className="w-full h-full min-w-0 bg-bg-surface border-r border-stroke flex flex-col overflow-hidden">
       {/* Filters */}
       <div className="p-3.5 border-b border-stroke">
         <div className="flex items-center gap-1.5 text-caption font-bold uppercase tracking-wider text-fg mb-3">
@@ -269,7 +269,11 @@ function ScatLeftPanel({
             rowCount={filtered.length}
             rowHeight={88}
             overscanCount={5}
-            style={{ height: listHeight }}
+            style={{
+              height: listHeight,
+              scrollbarWidth: 'thin',
+              scrollbarColor: 'var(--stroke-default) transparent',
+            }}
             rowComponent={SegRow}
             rowProps={{
               filtered,
diff --git a/frontend/src/tabs/scat/components/ScatMap.tsx b/frontend/src/tabs/scat/components/ScatMap.tsx
index e96525a..9fb5227 100644
--- a/frontend/src/tabs/scat/components/ScatMap.tsx
+++ b/frontend/src/tabs/scat/components/ScatMap.tsx
@@ -310,7 +310,7 @@ function ScatMap({
       </div>
 
       {/* Right info cards */}
-      <div className="absolute top-3.5 right-3.5 w-[260px] flex flex-col gap-2 z-[1000] max-h-[calc(100%-100px)] overflow-y-auto scrollbar-thin">
+      <div className="absolute top-3.5 right-8 w-[260px] flex flex-col gap-2 z-[1000] max-h-[calc(100%-100px)] overflow-y-auto scrollbar-thin">
         {/* ESI Legend */}
         <div className="bg-[color-mix(in_srgb,var(--bg-base)_92%,transparent)] backdrop-blur-xl border border-stroke rounded-md p-3.5 shadow-[0_4px_20px_rgba(0,0,0,0.3)]">
           <div className="text-caption font-bold uppercase tracking-wider text-fg-disabled mb-2.5">
diff --git a/frontend/src/tabs/scat/components/ScatPopup.tsx b/frontend/src/tabs/scat/components/ScatPopup.tsx
index ce46f81..316d322 100644
--- a/frontend/src/tabs/scat/components/ScatPopup.tsx
+++ b/frontend/src/tabs/scat/components/ScatPopup.tsx
@@ -182,7 +182,7 @@ function ScatPopup({ data, segCode, onClose }: ScatPopupProps) {
             <button
               key={i}
               onClick={() => setPopTab(i)}
-              className={`px-5 py-3 text-xs font-semibold font-korean border-b-2 transition-colors cursor-pointer ${
+              className={`px-5 py-3 text-caption font-semibold font-korean border-b-2 transition-colors cursor-pointer ${
                 popTab === i
                   ? 'text-color-success border-status-green'
                   : 'text-fg-disabled border-transparent hover:text-fg-sub'
@@ -204,7 +204,9 @@ function ScatPopup({ data, segCode, onClose }: ScatPopupProps) {
                   {/* Skeleton */}
                   {!imgLoaded && !imgError && (
                     <div className="w-full aspect-video bg-bg-card animate-pulse flex items-center justify-center">
-                      <span className="text-fg-disabled text-xs font-korean">사진 로딩 중...</span>
+                      <span className="text-fg-disabled text-caption font-korean">
+                        사진 로딩 중...
+                      </span>
                     </div>
                   )}
                   <img
@@ -216,7 +218,7 @@ function ScatPopup({ data, segCode, onClose }: ScatPopupProps) {
                     onError={() => setImgError(true)}
                   />
                   {imgError && (
-                    <div className="w-full aspect-video flex flex-col items-center justify-center text-fg-disabled text-xs font-korean">
+                    <div className="w-full aspect-video flex flex-col items-center justify-center text-fg-disabled text-caption font-korean">
                       {/* <span className="text-[40px]">📷</span> */}
                       <span>사진 없음</span>
                     </div>
@@ -266,7 +268,7 @@ function ScatPopup({ data, segCode, onClose }: ScatPopupProps) {
                   ].map(([k, v, cls], i) => (
                     <div
                       key={i}
-                      className="flex justify-between py-1.5 text-xs border-b border-stroke last:border-b-0"
+                      className="flex justify-between py-1.5 text-caption border-b border-stroke last:border-b-0"
                     >
                       <span className="text-fg-sub font-korean">{k}</span>
                       <span className={`text-fg font-korean ${cls}`}>{v}</span>
@@ -282,7 +284,7 @@ function ScatPopup({ data, segCode, onClose }: ScatPopupProps) {
                   {data.sensitive.map((s, i) => (
                     <div
                       key={i}
-                      className="flex justify-between py-1.5 text-xs border-b border-stroke last:border-b-0"
+                      className="flex justify-between py-1.5 text-caption border-b border-stroke last:border-b-0"
                     >
                       <span className="text-fg-sub font-korean">{s.t}</span>
                       <span className="text-fg font-korean">{s.v}</span>
@@ -344,7 +346,9 @@ function ScatPopup({ data, segCode, onClose }: ScatPopupProps) {
                 <div className="w-full aspect-[4/3] bg-bg-base border border-stroke rounded-md mb-4 overflow-hidden relative">
                   {!mapLoaded && (
                     <div className="absolute inset-0 bg-bg-card animate-pulse flex items-center justify-center z-10">
-                      <span className="text-fg-disabled text-xs font-korean">지도 로딩 중...</span>
+                      <span className="text-fg-disabled text-caption font-korean">
+                        지도 로딩 중...
+                      </span>
                     </div>
                   )}
                   <PopupMap
@@ -390,7 +394,7 @@ function ScatPopup({ data, segCode, onClose }: ScatPopupProps) {
                   ].map(([k, v], i) => (
                     <div
                       key={i}
-                      className="flex justify-between py-1.5 text-xs border-b border-stroke last:border-b-0"
+                      className="flex justify-between py-1.5 text-caption border-b border-stroke last:border-b-0"
                     >
                       <span className="text-fg-disabled font-korean">{k}</span>
                       <span className="text-color-success font-mono font-medium">{v}</span>
@@ -413,7 +417,7 @@ function ScatPopup({ data, segCode, onClose }: ScatPopupProps) {
                   ].map(([k, v], i) => (
                     <div
                       key={i}
-                      className="flex justify-between py-1.5 text-xs border-b border-stroke last:border-b-0"
+                      className="flex justify-between py-1.5 text-caption border-b border-stroke last:border-b-0"
                     >
                       <span className="text-fg-disabled font-korean">{k}</span>
                       <span className="text-fg font-medium font-korean">{v}</span>
@@ -441,7 +445,7 @@ function ScatPopup({ data, segCode, onClose }: ScatPopupProps) {
                 ].map((h, i) => (
                   <div key={i} className="bg-bg-card border border-stroke rounded-md p-4">
                     <div className="flex items-center justify-between mb-2">
-                      <span className="text-xs font-bold font-mono">{h.date}</span>
+                      <span className="text-caption font-bold font-mono">{h.date}</span>
                       <span
                         className={`text-caption font-bold px-2 py-0.5 rounded-lg ${
                           h.type === 'Pre-SCAT'
diff --git a/frontend/src/tabs/scat/components/ScatRightPanel.tsx b/frontend/src/tabs/scat/components/ScatRightPanel.tsx
index 331b1c9..f43a8d8 100644
--- a/frontend/src/tabs/scat/components/ScatRightPanel.tsx
+++ b/frontend/src/tabs/scat/components/ScatRightPanel.tsx
@@ -23,7 +23,7 @@ export default function ScatRightPanel({
 
   if (!detail && !loading) {
     return (
-      <div className="flex flex-col items-center justify-center bg-bg-surface border-l border-stroke w-[280px] min-w-[280px] h-full">
+      <div className="flex flex-col items-center justify-center bg-bg-surface border-l border-stroke w-full h-full">
         <div className="text-3xl mb-2">🏖️</div>
         <div className="text-center text-fg-disabled text-label-2 leading-relaxed">
           좌측 목록에서 구간을
@@ -37,7 +37,7 @@ export default function ScatRightPanel({
   }
 
   return (
-    <div className="flex flex-col bg-bg-surface border-l border-stroke overflow-hidden h-full w-[280px] min-w-[280px]">
+    <div className="flex flex-col bg-bg-surface border-l border-stroke overflow-hidden h-full w-full">
       {/* 헤더 */}
       <div className="px-3.5 py-2.5 border-b border-stroke shrink-0">
         {detail ? (
@@ -49,12 +49,12 @@ export default function ScatRightPanel({
               {detail.esi}
             </span>
             <div className="flex-1 min-w-0">
-              <div className="text-xs font-bold truncate">{detail.name}</div>
+              <div className="text-caption font-bold truncate">{detail.name}</div>
               <div className="text-caption text-fg-disabled">{detail.code}</div>
             </div>
           </div>
         ) : (
-          <div className="text-xs text-fg-disabled">로딩 중...</div>
+          <div className="text-caption text-fg-disabled">로딩 중...</div>
         )}
       </div>
 
diff --git a/frontend/src/tabs/scat/components/ScatTimeline.tsx b/frontend/src/tabs/scat/components/ScatTimeline.tsx
index d73ccff..90dc70d 100644
--- a/frontend/src/tabs/scat/components/ScatTimeline.tsx
+++ b/frontend/src/tabs/scat/components/ScatTimeline.tsx
@@ -67,38 +67,38 @@ function ScatTimeline({ segments, currentIdx, onSeek }: ScatTimelineProps) {
       <div className="flex gap-1 flex-shrink-0">
         <button
           onClick={() => onSeek(0)}
-          className="w-[34px] h-[34px] rounded-sm border border-stroke bg-bg-card text-fg-sub flex items-center justify-center cursor-pointer hover:bg-bg-surface-hover text-sm"
+          className="w-[34px] h-[34px] rounded-sm border border-stroke bg-bg-card text-fg-sub flex items-center justify-center cursor-pointer hover:bg-bg-surface-hover text-body-2"
         >
           ⏮
         </button>
         <button
           onClick={() => onSeek(Math.max(0, currentIdx - 1))}
-          className="w-[34px] h-[34px] rounded-sm border border-stroke bg-bg-card text-fg-sub flex items-center justify-center cursor-pointer hover:bg-bg-surface-hover text-sm"
+          className="w-[34px] h-[34px] rounded-sm border border-stroke bg-bg-card text-fg-sub flex items-center justify-center cursor-pointer hover:bg-bg-surface-hover text-body-2"
         >
           ◀
         </button>
         <button
           onClick={togglePlay}
-          className={`w-[34px] h-[34px] rounded-sm border flex items-center justify-center cursor-pointer text-sm ${playing ? 'bg-color-success text-black border-status-green' : 'border-stroke bg-bg-card text-fg-sub hover:bg-bg-surface-hover'}`}
+          className={`w-[34px] h-[34px] rounded-sm border flex items-center justify-center cursor-pointer text-body-2 ${playing ? 'bg-color-success text-black border-status-green' : 'border-stroke bg-bg-card text-fg-sub hover:bg-bg-surface-hover'}`}
         >
           {playing ? '⏸' : '▶'}
         </button>
         <button
           onClick={() => onSeek(Math.min(total - 1, currentIdx + 1))}
-          className="w-[34px] h-[34px] rounded-sm border border-stroke bg-bg-card text-fg-sub flex items-center justify-center cursor-pointer hover:bg-bg-surface-hover text-sm"
+          className="w-[34px] h-[34px] rounded-sm border border-stroke bg-bg-card text-fg-sub flex items-center justify-center cursor-pointer hover:bg-bg-surface-hover text-body-2"
         >
           ▶
         </button>
         <button
           onClick={() => onSeek(total - 1)}
-          className="w-[34px] h-[34px] rounded-sm border border-stroke bg-bg-card text-fg-sub flex items-center justify-center cursor-pointer hover:bg-bg-surface-hover text-sm"
+          className="w-[34px] h-[34px] rounded-sm border border-stroke bg-bg-card text-fg-sub flex items-center justify-center cursor-pointer hover:bg-bg-surface-hover text-body-2"
         >
           ⏭
         </button>
         <div className="w-2" />
         <button
           onClick={cycleSpeed}
-          className="w-[34px] h-[34px] rounded-sm border border-stroke bg-bg-card text-fg-sub flex items-center justify-center cursor-pointer hover:bg-bg-surface-hover text-xs font-mono font-bold"
+          className="w-[34px] h-[34px] rounded-sm border border-stroke bg-bg-card text-fg-sub flex items-center justify-center cursor-pointer hover:bg-bg-surface-hover text-caption font-mono font-bold"
         >
           {speed}×
         </button>
@@ -162,7 +162,7 @@ function ScatTimeline({ segments, currentIdx, onSeek }: ScatTimelineProps) {
 
       {/* Info */}
       <div className="flex flex-col items-end gap-1 flex-shrink-0 min-w-[210px]">
-        <span className="text-sm font-semibold text-color-success font-mono">
+        <span className="text-body-2 font-semibold text-color-success font-mono">
           구간 {displaySegs[currentIdx]?.code || 'S-001'} / {total}개
         </span>
         <div className="flex gap-3.5">
diff --git a/frontend/src/tabs/scat/components/SurveyView.tsx b/frontend/src/tabs/scat/components/SurveyView.tsx
index 67b0cd1..320138d 100644
--- a/frontend/src/tabs/scat/components/SurveyView.tsx
+++ b/frontend/src/tabs/scat/components/SurveyView.tsx
@@ -3,8 +3,8 @@ function SurveyView() {
     <div className="flex w-full h-full bg-bg-base items-center justify-center">
       <div className="text-center">
         <div className="text-3xl opacity-20 mb-3">📋</div>
-        <div className="text-sm font-bold text-fg-sub font-korean mb-1">해안오염 조사 평가</div>
-        <div className="text-xs text-fg-disabled font-korean">
+        <div className="text-body-2 font-bold text-fg-sub font-korean mb-1">해안오염 조사 평가</div>
+        <div className="text-caption text-fg-disabled font-korean">
           해안오염 조사 및 평가 기능이 준비 중입니다.
         </div>
       </div>
diff --git a/frontend/src/tabs/weather/components/WeatherMapControls.tsx b/frontend/src/tabs/weather/components/WeatherMapControls.tsx
index 9d6714f..f724566 100644
--- a/frontend/src/tabs/weather/components/WeatherMapControls.tsx
+++ b/frontend/src/tabs/weather/components/WeatherMapControls.tsx
@@ -33,11 +33,11 @@ export function WeatherMapControls({ center, zoom }: WeatherMapControlsProps) {
           <div key={tooltip} className="relative group">
             <button
               onClick={onClick}
-              className="w-[38px] h-[38px] bg-[rgba(18,25,41,0.9)] backdrop-blur-xl border border-stroke rounded-sm text-fg-sub flex items-center justify-center hover:bg-bg-surface-hover hover:text-fg transition-all text-base"
+              className="w-[38px] h-[38px] bg-bg-surface border border-stroke rounded-sm shadow-md text-fg-sub flex items-center justify-center hover:bg-bg-surface-hover hover:text-fg transition-all text-base"
             >
               {label}
             </button>
-            <div className="absolute right-full top-1/2 -translate-y-1/2 mr-2 px-2 py-1 text-xs bg-bg-base text-fg border border-stroke rounded whitespace-nowrap opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity z-20">
+            <div className="absolute right-full top-1/2 -translate-y-1/2 mr-2 px-2 py-1 text-caption bg-bg-base text-fg border border-stroke rounded whitespace-nowrap opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity z-20">
               {tooltip}
             </div>
           </div>
diff --git a/frontend/src/tabs/weather/components/WeatherMapOverlay.tsx b/frontend/src/tabs/weather/components/WeatherMapOverlay.tsx
index 28175dd..65dec9f 100755
--- a/frontend/src/tabs/weather/components/WeatherMapOverlay.tsx
+++ b/frontend/src/tabs/weather/components/WeatherMapOverlay.tsx
@@ -33,26 +33,26 @@ interface WeatherMapOverlayProps {
   selectedStationId: string | null;
 }
 
-// 풍속에 따른 hex 색상 반환
+// 풍속에 따른 색상 반환
 function getWindHexColor(speed: number, isSelected: boolean): string {
-  if (isSelected) return '#06b6d4';
-  if (speed > 10) return '#ef4444';
-  if (speed > 7) return '#f59e0b';
-  return '#3b82f6';
+  if (isSelected) return 'var(--color-accent)';
+  if (speed > 10) return 'var(--color-danger)';
+  if (speed > 7) return 'var(--color-caution)';
+  return 'var(--color-info)';
 }
 
-// 파고에 따른 hex 색상 반환
+// 파고에 따른 색상 반환
 function getWaveHexColor(height: number): string {
-  if (height > 2.5) return '#ef4444';
-  if (height > 1.5) return '#f59e0b';
-  return '#3b82f6';
+  if (height > 2.5) return 'var(--color-danger)';
+  if (height > 1.5) return 'var(--color-caution)';
+  return 'var(--color-info)';
 }
 
-// 수온에 따른 hex 색상 반환
+// 수온에 따른 색상 반환
 function getTempHexColor(temp: number): string {
-  if (temp > 8) return '#ef4444';
-  if (temp > 6) return '#f59e0b';
-  return '#3b82f6';
+  if (temp > 8) return 'var(--color-danger)';
+  if (temp > 6) return 'var(--color-caution)';
+  return 'var(--color-info)';
 }
 
 /**
@@ -91,15 +91,17 @@ export function WeatherMapOverlay({
                     width={24}
                     height={24}
                     viewBox="0 0 24 24"
-                    style={{ filter: 'drop-shadow(0 2px 4px rgba(0,0,0,0.3))' }}
+                    style={{ filter: 'drop-shadow(0 2px 6px rgba(0,0,0,0.5))' }}
                   >
-                    {/* 위쪽이 바람 방향을 나타내는 삼각형 */}
-                    <polygon points="12,2 4,22 12,16 20,22" fill={color} opacity="0.9" />
+                    {/* 흰 외곽선 레이어 */}
+                    <polygon points="12,2 4,22 12,16 20,22" fill="white" opacity="0.9" />
+                    {/* 색상 레이어 */}
+                    <polygon points="12,3 5,21 12,15.5 19,21" fill={color} opacity="0.95" />
                   </svg>
                 </div>
                 <span
-                  style={{ color, textShadow: '0 1px 3px rgba(0,0,0,0.8)' }}
-                  className="text-xs font-bold leading-none"
+                  className="text-caption font-bold leading-none px-1 py-px rounded-sm bg-bg-base/80"
+                  style={{ color }}
                 >
                   {station.wind.speed.toFixed(1)}
                 </span>
@@ -138,7 +140,7 @@ export function WeatherMapOverlay({
                     textShadow: '1px 1px 3px rgba(0,0,0,0.7)',
                     borderBottom: `1px solid ${isSelected ? 'rgba(0,0,0,0.2)' : 'rgba(255,255,255,0.3)'}`,
                   }}
-                  className="text-center text-xs font-bold pb-1 mb-0.5"
+                  className="text-center text-caption font-bold pb-1 mb-0.5"
                 >
                   {station.name}
                 </div>
@@ -150,7 +152,7 @@ export function WeatherMapOverlay({
                     🌡️
                   </div>
                   <div className="flex items-baseline gap-0.5">
-                    <span className="text-sm font-bold text-white" style={{ textShadow: '1px 1px 2px rgba(0,0,0,0.5)' }}>
+                    <span className="text-body-2 font-bold text-white" style={{ textShadow: '1px 1px 2px rgba(0,0,0,0.5)' }}>
                       {station.temperature.current.toFixed(1)}
                     </span>
                     <span className="text-caption text-white opacity-90" style={{ textShadow: '1px 1px 2px rgba(0,0,0,0.5)' }}>°C</span>
@@ -164,7 +166,7 @@ export function WeatherMapOverlay({
                     🌊
                   </div>
                   <div className="flex items-baseline gap-0.5">
-                    <span className="text-sm font-bold text-white" style={{ textShadow: '1px 1px 2px rgba(0,0,0,0.5)' }}>
+                    <span className="text-body-2 font-bold text-white" style={{ textShadow: '1px 1px 2px rgba(0,0,0,0.5)' }}>
                       {station.wave.height.toFixed(1)}
                     </span>
                     <span className="text-caption text-white opacity-90" style={{ textShadow: '1px 1px 2px rgba(0,0,0,0.5)' }}>m</span>
@@ -178,7 +180,7 @@ export function WeatherMapOverlay({
                     💨
                   </div>
                   <div className="flex items-baseline gap-0.5">
-                    <span className="text-sm font-bold text-white" style={{ textShadow: '1px 1px 2px rgba(0,0,0,0.5)' }}>
+                    <span className="text-body-2 font-bold text-white" style={{ textShadow: '1px 1px 2px rgba(0,0,0,0.5)' }}>
                       {station.wind.speed.toFixed(1)}
                     </span>
                     <span className="text-caption text-white opacity-90" style={{ textShadow: '1px 1px 2px rgba(0,0,0,0.5)' }}>m/s</span>
@@ -205,7 +207,6 @@ export function useWeatherDeckLayers(
   onStationClick: (station: WeatherStation) => void,
 ): Layer[] {
   return useMemo(() => {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const result: Layer[] = [];
 
     // 파고 분포 ScatterplotLayer (Circle 대체, 반경 = 파고 * 15km)
diff --git a/frontend/src/tabs/weather/components/WeatherRightPanel.tsx b/frontend/src/tabs/weather/components/WeatherRightPanel.tsx
index d7950b2..e9c89b7 100755
--- a/frontend/src/tabs/weather/components/WeatherRightPanel.tsx
+++ b/frontend/src/tabs/weather/components/WeatherRightPanel.tsx
@@ -1,3 +1,5 @@
+import { useState } from 'react';
+
 interface WeatherData {
   stationName: string;
   location: { lat: number; lon: number };
@@ -46,20 +48,14 @@ interface WeatherRightPanelProps {
   weatherData: WeatherData | null;
 }
 
-/** 풍속 등급 색상 */
-function windColor(speed: number): string {
-  if (speed >= 14) return '#ef4444';
-  if (speed >= 10) return '#f97316';
-  if (speed >= 6) return '#eab308';
-  return '#22c55e';
+/** 풍속 텍스트 색상 (2단계 — danger | accent) */
+function windTextColor(speed: number): string {
+  return speed >= 10 ? 'var(--color-danger)' : 'var(--color-accent)';
 }
 
-/** 파고 등급 색상 */
-function waveColor(height: number): string {
-  if (height >= 3) return '#ef4444';
-  if (height >= 2) return '#f97316';
-  if (height >= 1) return '#eab308';
-  return '#22c55e';
+/** 파고 텍스트 색상 (2단계 — danger | accent) */
+function waveTextColor(height: number): string {
+  return height >= 2 ? 'var(--color-danger)' : 'var(--color-accent)';
 }
 
 /** 풍향 텍스트 */
@@ -86,13 +82,38 @@ function windDirText(deg: number): string {
 }
 
 export function WeatherRightPanel({ weatherData }: WeatherRightPanelProps) {
+  const [collapsed, setCollapsed] = useState(false);
+
+  if (collapsed) {
+    return (
+      <div className="flex flex-col bg-bg-surface border-l border-stroke w-8 shrink-0">
+        <button
+          onClick={() => setCollapsed(false)}
+          className="flex-1 flex flex-col items-center justify-start pt-3 gap-1 text-fg-sub hover:text-fg transition-colors"
+          title="패널 펼치기"
+        >
+          <span className="text-heading-2 leading-none">‹</span>
+          <span className="text-subtitle text-fg-disabled [writing-mode:vertical-rl]">펼치기</span>
+        </button>
+      </div>
+    );
+  }
+
   if (!weatherData) {
     return (
       <div className="flex flex-col bg-bg-surface border-l border-stroke overflow-hidden w-[320px] shrink-0">
-        <div className="p-6 text-center">
+        <div className="flex items-center justify-between px-4 py-3 border-b border-stroke bg-bg-elevated">
           <p className="text-fg-disabled text-title-4 font-korean">
             지도에서 해양 지점을 클릭하세요
           </p>
+          <button
+            onClick={() => setCollapsed(true)}
+            className="shrink-0 flex items-center gap-0.5 text-fg-sub hover:text-fg transition-colors ml-2"
+            title="패널 접기"
+          >
+            <span className="text-subtitle text-fg-disabled">접기</span>
+            <span className="text-heading-2 leading-none">›</span>
+          </button>
         </div>
       </div>
     );
@@ -109,18 +130,30 @@ export function WeatherRightPanel({ weatherData }: WeatherRightPanelProps) {
     <div className="flex flex-col bg-bg-surface border-l border-stroke overflow-hidden w-[320px] shrink-0">
       {/* 헤더 */}
       <div className="px-4 py-3 border-b border-stroke bg-bg-elevated">
-        <div className="flex items-center gap-2 mb-1">
-          <span className="text-title-4 font-bold text-color-accent font-korean">
-            📍 {weatherData.stationName}
-          </span>
-          <span className="px-1.5 py-px text-label-2 rounded bg-[rgba(6,182,212,0.15)] text-color-accent font-bold">
-            기상예보관
-          </span>
+        <div className="flex items-start justify-between">
+          <div className="flex-1 min-w-0">
+            <div className="flex items-center gap-2 mb-1">
+              <span className="text-title-4 font-bold text-color-accent font-korean truncate">
+                📍 {weatherData.stationName}
+              </span>
+              <span className="px-1.5 py-px text-label-2 rounded bg-[color-mix(in_srgb,var(--color-accent)_15%,transparent)] text-color-accent font-bold shrink-0">
+                기상예보관
+              </span>
+            </div>
+            <p className="text-label-2 text-fg-disabled font-mono">
+              {weatherData.location.lat.toFixed(2)}°N, {weatherData.location.lon.toFixed(2)}°E ·{' '}
+              {weatherData.currentTime}
+            </p>
+          </div>
+          <button
+            onClick={() => setCollapsed(true)}
+            className="shrink-0 flex items-center gap-0.5 text-fg-sub hover:text-fg transition-colors ml-2 mt-0.5"
+            title="패널 접기"
+          >
+            <span className="text-subtitle text-fg-disabled">접기</span>
+            <span className="text-heading-2 leading-none">›</span>
+          </button>
         </div>
-        <p className="text-label-2 text-fg-disabled font-mono">
-          {weatherData.location.lat.toFixed(2)}°N, {weatherData.location.lon.toFixed(2)}°E ·{' '}
-          {weatherData.currentTime}
-        </p>
       </div>
 
       {/* 스크롤 콘텐츠 */}
@@ -131,13 +164,13 @@ export function WeatherRightPanel({ weatherData }: WeatherRightPanelProps) {
         {/* ── 핵심 지표 3칸 카드 ── */}
         <div className="grid grid-cols-3 gap-1 px-3 py-2.5">
           <div className="text-center py-2.5 bg-bg-base border border-stroke rounded-md">
-            <div className="text-[20px] font-bold font-mono" style={{ color: windColor(wSpd) }}>
+            <div className="text-[20px] font-bold font-mono" style={{ color: windTextColor(wSpd) }}>
               {wSpd.toFixed(1)}
             </div>
             <div className="text-label-2 text-fg-disabled font-korean">풍속 (m/s)</div>
           </div>
           <div className="text-center py-2.5 bg-bg-base border border-stroke rounded-md">
-            <div className="text-[20px] font-bold font-mono" style={{ color: waveColor(wHgt) }}>
+            <div className="text-[20px] font-bold font-mono" style={{ color: waveTextColor(wHgt) }}>
               {wHgt.toFixed(1)}
             </div>
             <div className="text-label-2 text-fg-disabled font-korean">파고 (m)</div>
@@ -152,9 +185,7 @@ export function WeatherRightPanel({ weatherData }: WeatherRightPanelProps) {
 
         {/* ── 바람 상세 ── */}
         <div className="px-3 py-2 border-b border-stroke">
-          <div className="text-label-2 font-bold text-fg-disabled font-korean mb-2">
-            🌬️ 바람 현황
-          </div>
+          <div className="text-label-2 text-fg-disabled font-korean mb-2">🌬️ 바람 현황</div>
           <div className="flex items-center gap-3 mb-2">
             {/* 풍향 컴파스 */}
             <div className="relative w-[50px] h-[50px] shrink-0">
@@ -202,11 +233,11 @@ export function WeatherRightPanel({ weatherData }: WeatherRightPanelProps) {
                   y1="25"
                   x2={25 + 14 * Math.sin((wind.direction * Math.PI) / 180)}
                   y2={25 - 14 * Math.cos((wind.direction * Math.PI) / 180)}
-                  stroke={windColor(wSpd)}
+                  stroke="var(--color-accent)"
                   strokeWidth="2"
                   strokeLinecap="round"
                 />
-                <circle cx="25" cy="25" r="3" fill={windColor(wSpd)} />
+                <circle cx="25" cy="25" r="3" fill="var(--color-accent)" />
               </svg>
             </div>
             <div className="flex-1 grid grid-cols-2 gap-x-3 gap-y-1.5 text-label-2">
@@ -222,19 +253,13 @@ export function WeatherRightPanel({ weatherData }: WeatherRightPanelProps) {
               </div>
               <div className="flex justify-between">
                 <span className="text-fg-disabled">1k 최고</span>
-                <span
-                  className="font-mono text-title-4"
-                  style={{ color: windColor(wind.speed_1k) }}
-                >
+                <span className="font-mono text-title-4 text-fg">
                   {Number(wind.speed_1k).toFixed(1)}
                 </span>
               </div>
               <div className="flex justify-between">
                 <span className="text-fg-disabled">3k 평균</span>
-                <span
-                  className="font-mono text-title-4"
-                  style={{ color: windColor(wind.speed_3k) }}
-                >
+                <span className="font-mono text-title-4 text-fg">
                   {Number(wind.speed_3k).toFixed(1)}
                 </span>
               </div>
@@ -248,11 +273,8 @@ export function WeatherRightPanel({ weatherData }: WeatherRightPanelProps) {
           <div className="flex items-center gap-2">
             <div className="flex-1 h-[5px] bg-bg-card rounded-full overflow-hidden">
               <div
-                className="h-full rounded-full transition-all"
-                style={{
-                  width: `${Math.min((wSpd / 20) * 100, 100)}%`,
-                  background: windColor(wSpd),
-                }}
+                className="h-full rounded-full transition-all bg-color-accent"
+                style={{ width: `${Math.min((wSpd / 20) * 100, 100)}%` }}
               />
             </div>
             <span className="text-label-2 font-mono text-fg-disabled shrink-0">
@@ -263,24 +285,20 @@ export function WeatherRightPanel({ weatherData }: WeatherRightPanelProps) {
 
         {/* ── 파도 상세 ── */}
         <div className="px-3 py-2 border-b border-stroke">
-          <div className="text-label-2 font-bold text-fg-disabled font-korean mb-2">🌊 파도</div>
+          <div className="text-label-2 text-fg-disabled font-korean mb-2">🌊 파도</div>
           <div className="grid grid-cols-4 gap-1">
             <div className="text-center py-2 bg-bg-base border border-stroke rounded">
-              <div className="text-title-3 font-bold font-mono" style={{ color: waveColor(wHgt) }}>
-                {wHgt.toFixed(1)}m
-              </div>
+              <div className="text-title-3 font-bold font-mono text-fg">{wHgt.toFixed(1)}m</div>
               <div className="text-caption text-fg-disabled">유의파고</div>
             </div>
             <div className="text-center py-2 bg-bg-base border border-stroke rounded">
-              <div className="text-title-3 font-bold font-mono text-color-danger">
+              <div className="text-title-3 font-bold font-mono text-fg">
                 {wave.maxHeight.toFixed(1)}m
               </div>
               <div className="text-caption text-fg-disabled">최고파고</div>
             </div>
             <div className="text-center py-2 bg-bg-base border border-stroke rounded">
-              <div className="text-title-3 font-bold font-mono text-color-accent">
-                {wave.period}s
-              </div>
+              <div className="text-title-3 font-bold font-mono text-fg">{wave.period}s</div>
               <div className="text-caption text-fg-disabled">주기</div>
             </div>
             <div className="text-center py-2 bg-bg-base border border-stroke rounded">
@@ -295,7 +313,7 @@ export function WeatherRightPanel({ weatherData }: WeatherRightPanelProps) {
                 className="h-full rounded-full transition-all"
                 style={{
                   width: `${Math.min((wHgt / 5) * 100, 100)}%`,
-                  background: waveColor(wHgt),
+                  background: 'var(--color-accent)',
                 }}
               />
             </div>
@@ -307,14 +325,10 @@ export function WeatherRightPanel({ weatherData }: WeatherRightPanelProps) {
 
         {/* ── 수온/공기 ── */}
         <div className="px-3 py-2 border-b border-stroke">
-          <div className="text-label-2 font-bold text-fg-disabled font-korean mb-2">
-            🌡️ 수온 · 공기
-          </div>
+          <div className="text-label-2 text-fg-disabled font-korean mb-2">🌡️ 수온 · 공기</div>
           <div className="grid grid-cols-3 gap-1">
             <div className="text-center py-2 bg-bg-base border border-stroke rounded">
-              <div className="text-title-3 font-bold font-mono text-color-accent">
-                {wTemp.toFixed(1)}°
-              </div>
+              <div className="text-title-3 font-bold font-mono text-fg">{wTemp.toFixed(1)}°</div>
               <div className="text-caption text-fg-disabled">수온</div>
             </div>
             <div className="text-center py-2 bg-bg-base border border-stroke rounded">
@@ -332,9 +346,7 @@ export function WeatherRightPanel({ weatherData }: WeatherRightPanelProps) {
 
         {/* ── 시간별 예보 ── */}
         <div className="px-3 py-2 border-b border-stroke">
-          <div className="text-label-2 font-bold text-fg-disabled font-korean mb-2">
-            ⏰ 시간별 예보
-          </div>
+          <div className="text-label-2 text-fg-disabled font-korean mb-2">⏰ 시간별 예보</div>
           <div className="grid grid-cols-5 gap-1">
             {forecast.map((f, i) => (
               <div
@@ -353,9 +365,7 @@ export function WeatherRightPanel({ weatherData }: WeatherRightPanelProps) {
         {/* ── 천문/조석 ── */}
         {astronomy && (
           <div className="px-3 py-2 border-b border-stroke">
-            <div className="text-label-2 font-bold text-fg-disabled font-korean mb-2">
-              ☀️ 천문 · 조석
-            </div>
+            <div className="text-label-2 text-fg-disabled font-korean mb-2">☀️ 천문 · 조석</div>
             <div className="grid grid-cols-4 gap-1">
               {[
                 { icon: '🌅', label: '일출', value: astronomy.sunrise },
@@ -371,7 +381,7 @@ export function WeatherRightPanel({ weatherData }: WeatherRightPanelProps) {
               ))}
             </div>
             <div className="flex items-center gap-2 mt-1.5 px-2 py-1 bg-bg-base border border-stroke rounded text-label-2">
-              <span className="text-sm">🌓</span>
+              <span className="text-body-2">🌓</span>
               <span className="text-fg-disabled">{astronomy.moonPhase}</span>
               <span className="ml-auto text-fg font-mono">조차 {astronomy.tidalRange}m</span>
             </div>
@@ -381,17 +391,21 @@ export function WeatherRightPanel({ weatherData }: WeatherRightPanelProps) {
         {/* ── 날씨 특보 ── */}
         {alert && (
           <div className="px-3 py-2">
-            <div className="text-label-2 font-bold text-fg-disabled font-korean mb-2">
-              🚨 날씨 특보
-            </div>
+            <div className="text-label-2 text-fg-disabled font-korean mb-2">🚨 날씨 특보</div>
             <div
               className="px-2.5 py-2 rounded border"
-              style={{ background: 'rgba(239,68,68,.06)', borderColor: 'rgba(239,68,68,.2)' }}
+              style={{
+                background: 'color-mix(in srgb, var(--color-danger) 6%, transparent)',
+                borderColor: 'color-mix(in srgb, var(--color-danger) 20%, transparent)',
+              }}
             >
               <div className="flex items-center gap-2 text-label-2">
                 <span
                   className="px-1.5 py-px rounded text-label-2 font-bold"
-                  style={{ background: 'rgba(239,68,68,.15)', color: 'var(--color-danger)' }}
+                  style={{
+                    background: 'color-mix(in srgb, var(--color-danger) 15%, transparent)',
+                    color: 'var(--color-danger)',
+                  }}
                 >
                   주의
                 </span>
diff --git a/frontend/src/tabs/weather/components/WeatherView.tsx b/frontend/src/tabs/weather/components/WeatherView.tsx
index 834b510..783c0ee 100755
--- a/frontend/src/tabs/weather/components/WeatherView.tsx
+++ b/frontend/src/tabs/weather/components/WeatherView.tsx
@@ -90,7 +90,6 @@ const WEATHER_MAP_CENTER: [number, number] = [127.8, 36.5]; // [lng, lat]
 const WEATHER_MAP_ZOOM = 7;
 
 // deck.gl 오버레이 컴포넌트 (MapLibre 컨트롤로 등록)
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function DeckGLOverlay({ layers }: { layers: Layer[] }) {
   const overlay = useControl<MapboxOverlay>(() => new MapboxOverlay({ interleaved: true }));
   overlay.setProps({ layers });
@@ -178,7 +177,7 @@ function WeatherMapInner({
             {/* 핀 꼬리 */}
             <div className="w-px h-3 bg-color-accent" />
             {/* 좌표 라벨 */}
-            <div className="px-2 py-1 bg-bg-base/90 border border-color-accent rounded text-caption text-color-accent whitespace-nowrap backdrop-blur-sm">
+            <div className="px-2 py-1 bg-bg-base border border-color-accent rounded text-caption text-color-accent whitespace-nowrap shadow-md">
               {clickedLocation.lat.toFixed(3)}°N&nbsp;{clickedLocation.lon.toFixed(3)}°E
             </div>
           </div>
@@ -295,13 +294,13 @@ export function WeatherView() {
       {/* Main Map Area */}
       <div className="flex-1 relative flex flex-col overflow-hidden">
         {/* Tab Navigation */}
-        <div className="flex items-center border-b border-stroke bg-bg-surface shrink-0">
+        <div className="flex items-center border-b border-stroke bg-bg-surface shrink-0 pt-2 pb-2">
           <div className="flex items-center gap-2 px-6">
             {(['0', '3', '6', '9'] as TimeOffset[]).map((offset) => (
               <button
                 key={offset}
                 onClick={() => setTimeOffset(offset)}
-                className={`px-3 py-2 text-xs font-semibold rounded transition-all ${
+                className={`px-3 py-2 text-caption font-semibold rounded transition-all ${
                   timeOffset === offset
                     ? 'bg-color-accent text-bg-0'
                     : 'bg-bg-card border border-stroke text-fg-sub hover:bg-bg-surface-hover'
@@ -312,7 +311,7 @@ export function WeatherView() {
             ))}
 
             <div className="flex items-center gap-2 ml-4">
-              <span className="text-xs text-fg-disabled">
+              <span className="text-caption text-fg-disabled">
                 {lastUpdate
                   ? `마지막 업데이트: ${lastUpdate.toLocaleTimeString('ko-KR', {
                       hour: '2-digit',
@@ -323,7 +322,7 @@ export function WeatherView() {
               {loading && (
                 <div className="w-4 h-4 border-2 border-color-accent border-t-transparent rounded-full animate-spin" />
               )}
-              {error && <span className="text-xs text-color-danger">⚠️ {error}</span>}
+              {error && <span className="text-caption text-color-danger">⚠️ {error}</span>}
             </div>
           </div>
 
@@ -356,10 +355,7 @@ export function WeatherView() {
           </Map>
 
           {/* 레이어 컨트롤 */}
-          <div
-            className="absolute top-4 left-4 bg-bg-surface/85 border border-stroke rounded-md backdrop-blur-sm z-10"
-            style={{ padding: '6px 10px' }}
-          >
+          <div className="absolute top-4 left-4 bg-bg-surface border border-stroke rounded-md shadow-md z-10 px-2.5 py-1.5">
             <div className="text-caption font-semibold text-fg mb-1.5 font-korean">기상 레이어</div>
             <div className="flex flex-col gap-1">
               <label className="flex items-center gap-1.5 cursor-pointer">
@@ -420,17 +416,12 @@ export function WeatherView() {
           </div>
 
           {/* 범례 */}
-          <div
-            className="absolute bottom-4 left-4 bg-bg-surface/85 border border-stroke rounded-md backdrop-blur-sm z-10"
-            style={{ padding: '6px 10px', maxWidth: 180 }}
-          >
-            <div className="text-caption font-semibold text-fg mb-1.5 font-korean">기상 범례</div>
-            <div className="flex flex-col gap-1.5" style={{ fontSize: 8 }}>
+          <div className="absolute bottom-4 left-4 bg-bg-surface border border-stroke rounded-md shadow-md z-10 px-2.5 py-1.5 max-w-[180px]">
+            <div className="text-caption text-fg mb-1.5 font-korean">기상 범례</div>
+            <div className="flex flex-col gap-1.5 text-[8px]">
               {/* 바람 */}
               <div>
-                <div className="font-semibold text-fg-sub mb-0.5" style={{ fontSize: 8 }}>
-                  바람 (m/s)
-                </div>
+                <div className="text-fg-sub mb-0.5">바람 (m/s)</div>
                 <div className="flex items-center gap-px h-[6px] rounded-sm overflow-hidden mb-0.5">
                   <div className="flex-1 h-full" style={{ background: '#6271b7' }} />
                   <div className="flex-1 h-full" style={{ background: '#39a0f6' }} />
@@ -441,7 +432,7 @@ export function WeatherView() {
                   <div className="flex-1 h-full" style={{ background: '#f05421' }} />
                   <div className="flex-1 h-full" style={{ background: '#b41e46' }} />
                 </div>
-                <div className="flex justify-between text-fg-disabled" style={{ fontSize: 7 }}>
+                <div className="flex justify-between text-fg-disabled text-[7px]">
                   <span>3</span>
                   <span>5</span>
                   <span>7</span>
@@ -453,16 +444,14 @@ export function WeatherView() {
               </div>
               {/* 해류 */}
               <div className="pt-1 border-t border-stroke">
-                <div className="font-semibold text-fg-sub mb-0.5" style={{ fontSize: 8 }}>
-                  해류 (m/s)
-                </div>
+                <div className="text-fg-sub mb-0.5">해류 (m/s)</div>
                 <div className="flex items-center gap-px h-[6px] rounded-sm overflow-hidden mb-0.5">
                   <div className="flex-1 h-full" style={{ background: 'rgb(59, 130, 246)' }} />
                   <div className="flex-1 h-full" style={{ background: 'rgb(6, 182, 212)' }} />
                   <div className="flex-1 h-full" style={{ background: 'rgb(34, 197, 94)' }} />
                   <div className="flex-1 h-full" style={{ background: 'rgb(249, 115, 22)' }} />
                 </div>
-                <div className="flex justify-between text-fg-disabled" style={{ fontSize: 7 }}>
+                <div className="flex justify-between text-fg-disabled text-[7px]">
                   <span>0.2</span>
                   <span>0.4</span>
                   <span>0.6</span>
@@ -471,23 +460,18 @@ export function WeatherView() {
               </div>
               {/* 파고 */}
               <div className="pt-1 border-t border-stroke">
-                <div className="font-semibold text-fg-sub mb-0.5" style={{ fontSize: 8 }}>
-                  파고 (m)
-                </div>
+                <div className="text-fg-sub mb-0.5">파고 (m)</div>
                 <div className="flex items-center gap-1">
-                  <div className="w-2 h-2 rounded-full bg-blue-500" />
+                  <div className="w-2 h-2 rounded-full bg-color-info" />
                   <span className="text-fg-disabled">&lt;1.5 낮음</span>
-                  <div className="w-2 h-2 rounded-full bg-orange-500 ml-1" />
+                  <div className="w-2 h-2 rounded-full bg-color-warning ml-1" />
                   <span className="text-fg-disabled">~2.5</span>
-                  <div className="w-2 h-2 rounded-full bg-red-500 ml-1" />
+                  <div className="w-2 h-2 rounded-full bg-color-danger ml-1" />
                   <span className="text-fg-disabled">&gt;2.5</span>
                 </div>
               </div>
             </div>
-            <div
-              className="mt-1 pt-1 border-t border-stroke text-fg-disabled font-korean"
-              style={{ fontSize: 7 }}
-            >
+            <div className="mt-1 pt-1 border-t border-stroke text-fg-disabled text-[7px] font-korean">
               💡 지도 클릭 → 기상 예보 확인
             </div>
           </div>
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 4b33d29..602798a 100755
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -77,29 +77,29 @@ export default {
           { lineHeight: '1.5', letterSpacing: 'var(--letter-spacing-navigation)' },
         ],
         'title-3': [
-          '0.875rem',
+          '1rem',
           { lineHeight: '1.5', letterSpacing: 'var(--letter-spacing-navigation)' },
         ],
         'title-4': [
-          '0.8125rem',
+          '0.875rem',
           { lineHeight: '1.5', letterSpacing: 'var(--letter-spacing-navigation)' },
         ],
         'title-5': [
-          '0.75rem',
+          '0.8125rem',
           { lineHeight: '1.5', letterSpacing: 'var(--letter-spacing-navigation)' },
         ],
         'title-6': [
-          '0.6875rem',
+          '0.75rem',
           { lineHeight: '1.5', letterSpacing: 'var(--letter-spacing-navigation)' },
         ],
-        'body-1': ['0.875rem', { lineHeight: '1.6', letterSpacing: 'var(--letter-spacing-body)' }],
-        'body-2': ['0.8125rem', { lineHeight: '1.6', letterSpacing: 'var(--letter-spacing-body)' }],
-        'label-1': ['0.75rem', { lineHeight: '1.5', letterSpacing: 'var(--letter-spacing-label)' }],
-        'label-2': [
-          '0.6875rem',
+        'body-1': ['1rem', { lineHeight: '1.6', letterSpacing: 'var(--letter-spacing-body)' }],
+        'body-2': ['0.875rem', { lineHeight: '1.6', letterSpacing: 'var(--letter-spacing-body)' }],
+        'label-1': [
+          '0.8125rem',
           { lineHeight: '1.5', letterSpacing: 'var(--letter-spacing-label)' },
         ],
-        caption: ['0.6875rem', { lineHeight: '1.5', letterSpacing: 'var(--letter-spacing-body)' }],
+        'label-2': ['0.75rem', { lineHeight: '1.5', letterSpacing: 'var(--letter-spacing-label)' }],
+        caption: ['0.75rem', { lineHeight: '1.5', letterSpacing: 'var(--letter-spacing-body)' }],
       },
       letterSpacing: {
         display: 'var(--letter-spacing-display)',